fastDomNode.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. export class FastDomNode {
  6. constructor(domNode) {
  7. this.domNode = domNode;
  8. this._maxWidth = -1;
  9. this._width = -1;
  10. this._height = -1;
  11. this._top = -1;
  12. this._left = -1;
  13. this._bottom = -1;
  14. this._right = -1;
  15. this._fontFamily = '';
  16. this._fontWeight = '';
  17. this._fontSize = -1;
  18. this._fontFeatureSettings = '';
  19. this._lineHeight = -1;
  20. this._letterSpacing = -100;
  21. this._className = '';
  22. this._display = '';
  23. this._position = '';
  24. this._visibility = '';
  25. this._backgroundColor = '';
  26. this._layerHint = false;
  27. this._contain = 'none';
  28. this._boxShadow = '';
  29. }
  30. setMaxWidth(maxWidth) {
  31. if (this._maxWidth === maxWidth) {
  32. return;
  33. }
  34. this._maxWidth = maxWidth;
  35. this.domNode.style.maxWidth = this._maxWidth + 'px';
  36. }
  37. setWidth(width) {
  38. if (this._width === width) {
  39. return;
  40. }
  41. this._width = width;
  42. this.domNode.style.width = this._width + 'px';
  43. }
  44. setHeight(height) {
  45. if (this._height === height) {
  46. return;
  47. }
  48. this._height = height;
  49. this.domNode.style.height = this._height + 'px';
  50. }
  51. setTop(top) {
  52. if (this._top === top) {
  53. return;
  54. }
  55. this._top = top;
  56. this.domNode.style.top = this._top + 'px';
  57. }
  58. unsetTop() {
  59. if (this._top === -1) {
  60. return;
  61. }
  62. this._top = -1;
  63. this.domNode.style.top = '';
  64. }
  65. setLeft(left) {
  66. if (this._left === left) {
  67. return;
  68. }
  69. this._left = left;
  70. this.domNode.style.left = this._left + 'px';
  71. }
  72. setBottom(bottom) {
  73. if (this._bottom === bottom) {
  74. return;
  75. }
  76. this._bottom = bottom;
  77. this.domNode.style.bottom = this._bottom + 'px';
  78. }
  79. setRight(right) {
  80. if (this._right === right) {
  81. return;
  82. }
  83. this._right = right;
  84. this.domNode.style.right = this._right + 'px';
  85. }
  86. setFontFamily(fontFamily) {
  87. if (this._fontFamily === fontFamily) {
  88. return;
  89. }
  90. this._fontFamily = fontFamily;
  91. this.domNode.style.fontFamily = this._fontFamily;
  92. }
  93. setFontWeight(fontWeight) {
  94. if (this._fontWeight === fontWeight) {
  95. return;
  96. }
  97. this._fontWeight = fontWeight;
  98. this.domNode.style.fontWeight = this._fontWeight;
  99. }
  100. setFontSize(fontSize) {
  101. if (this._fontSize === fontSize) {
  102. return;
  103. }
  104. this._fontSize = fontSize;
  105. this.domNode.style.fontSize = this._fontSize + 'px';
  106. }
  107. setFontFeatureSettings(fontFeatureSettings) {
  108. if (this._fontFeatureSettings === fontFeatureSettings) {
  109. return;
  110. }
  111. this._fontFeatureSettings = fontFeatureSettings;
  112. this.domNode.style.fontFeatureSettings = this._fontFeatureSettings;
  113. }
  114. setLineHeight(lineHeight) {
  115. if (this._lineHeight === lineHeight) {
  116. return;
  117. }
  118. this._lineHeight = lineHeight;
  119. this.domNode.style.lineHeight = this._lineHeight + 'px';
  120. }
  121. setLetterSpacing(letterSpacing) {
  122. if (this._letterSpacing === letterSpacing) {
  123. return;
  124. }
  125. this._letterSpacing = letterSpacing;
  126. this.domNode.style.letterSpacing = this._letterSpacing + 'px';
  127. }
  128. setClassName(className) {
  129. if (this._className === className) {
  130. return;
  131. }
  132. this._className = className;
  133. this.domNode.className = this._className;
  134. }
  135. toggleClassName(className, shouldHaveIt) {
  136. this.domNode.classList.toggle(className, shouldHaveIt);
  137. this._className = this.domNode.className;
  138. }
  139. setDisplay(display) {
  140. if (this._display === display) {
  141. return;
  142. }
  143. this._display = display;
  144. this.domNode.style.display = this._display;
  145. }
  146. setPosition(position) {
  147. if (this._position === position) {
  148. return;
  149. }
  150. this._position = position;
  151. this.domNode.style.position = this._position;
  152. }
  153. setVisibility(visibility) {
  154. if (this._visibility === visibility) {
  155. return;
  156. }
  157. this._visibility = visibility;
  158. this.domNode.style.visibility = this._visibility;
  159. }
  160. setBackgroundColor(backgroundColor) {
  161. if (this._backgroundColor === backgroundColor) {
  162. return;
  163. }
  164. this._backgroundColor = backgroundColor;
  165. this.domNode.style.backgroundColor = this._backgroundColor;
  166. }
  167. setLayerHinting(layerHint) {
  168. if (this._layerHint === layerHint) {
  169. return;
  170. }
  171. this._layerHint = layerHint;
  172. this.domNode.style.transform = this._layerHint ? 'translate3d(0px, 0px, 0px)' : '';
  173. }
  174. setBoxShadow(boxShadow) {
  175. if (this._boxShadow === boxShadow) {
  176. return;
  177. }
  178. this._boxShadow = boxShadow;
  179. this.domNode.style.boxShadow = boxShadow;
  180. }
  181. setContain(contain) {
  182. if (this._contain === contain) {
  183. return;
  184. }
  185. this._contain = contain;
  186. this.domNode.style.contain = this._contain;
  187. }
  188. setAttribute(name, value) {
  189. this.domNode.setAttribute(name, value);
  190. }
  191. removeAttribute(name) {
  192. this.domNode.removeAttribute(name);
  193. }
  194. appendChild(child) {
  195. this.domNode.appendChild(child.domNode);
  196. }
  197. removeChild(child) {
  198. this.domNode.removeChild(child.domNode);
  199. }
  200. }
  201. export function createFastDomNode(domNode) {
  202. return new FastDomNode(domNode);
  203. }