fastDomNode.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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 = '';
  9. this._width = '';
  10. this._height = '';
  11. this._top = '';
  12. this._left = '';
  13. this._bottom = '';
  14. this._right = '';
  15. this._paddingLeft = '';
  16. this._fontFamily = '';
  17. this._fontWeight = '';
  18. this._fontSize = '';
  19. this._fontStyle = '';
  20. this._fontFeatureSettings = '';
  21. this._fontVariationSettings = '';
  22. this._textDecoration = '';
  23. this._lineHeight = '';
  24. this._letterSpacing = '';
  25. this._className = '';
  26. this._display = '';
  27. this._position = '';
  28. this._visibility = '';
  29. this._color = '';
  30. this._backgroundColor = '';
  31. this._layerHint = false;
  32. this._contain = 'none';
  33. this._boxShadow = '';
  34. }
  35. setMaxWidth(_maxWidth) {
  36. const maxWidth = numberAsPixels(_maxWidth);
  37. if (this._maxWidth === maxWidth) {
  38. return;
  39. }
  40. this._maxWidth = maxWidth;
  41. this.domNode.style.maxWidth = this._maxWidth;
  42. }
  43. setWidth(_width) {
  44. const width = numberAsPixels(_width);
  45. if (this._width === width) {
  46. return;
  47. }
  48. this._width = width;
  49. this.domNode.style.width = this._width;
  50. }
  51. setHeight(_height) {
  52. const height = numberAsPixels(_height);
  53. if (this._height === height) {
  54. return;
  55. }
  56. this._height = height;
  57. this.domNode.style.height = this._height;
  58. }
  59. setTop(_top) {
  60. const top = numberAsPixels(_top);
  61. if (this._top === top) {
  62. return;
  63. }
  64. this._top = top;
  65. this.domNode.style.top = this._top;
  66. }
  67. setLeft(_left) {
  68. const left = numberAsPixels(_left);
  69. if (this._left === left) {
  70. return;
  71. }
  72. this._left = left;
  73. this.domNode.style.left = this._left;
  74. }
  75. setBottom(_bottom) {
  76. const bottom = numberAsPixels(_bottom);
  77. if (this._bottom === bottom) {
  78. return;
  79. }
  80. this._bottom = bottom;
  81. this.domNode.style.bottom = this._bottom;
  82. }
  83. setRight(_right) {
  84. const right = numberAsPixels(_right);
  85. if (this._right === right) {
  86. return;
  87. }
  88. this._right = right;
  89. this.domNode.style.right = this._right;
  90. }
  91. setPaddingLeft(_paddingLeft) {
  92. const paddingLeft = numberAsPixels(_paddingLeft);
  93. if (this._paddingLeft === paddingLeft) {
  94. return;
  95. }
  96. this._paddingLeft = paddingLeft;
  97. this.domNode.style.paddingLeft = this._paddingLeft;
  98. }
  99. setFontFamily(fontFamily) {
  100. if (this._fontFamily === fontFamily) {
  101. return;
  102. }
  103. this._fontFamily = fontFamily;
  104. this.domNode.style.fontFamily = this._fontFamily;
  105. }
  106. setFontWeight(fontWeight) {
  107. if (this._fontWeight === fontWeight) {
  108. return;
  109. }
  110. this._fontWeight = fontWeight;
  111. this.domNode.style.fontWeight = this._fontWeight;
  112. }
  113. setFontSize(_fontSize) {
  114. const fontSize = numberAsPixels(_fontSize);
  115. if (this._fontSize === fontSize) {
  116. return;
  117. }
  118. this._fontSize = fontSize;
  119. this.domNode.style.fontSize = this._fontSize;
  120. }
  121. setFontStyle(fontStyle) {
  122. if (this._fontStyle === fontStyle) {
  123. return;
  124. }
  125. this._fontStyle = fontStyle;
  126. this.domNode.style.fontStyle = this._fontStyle;
  127. }
  128. setFontFeatureSettings(fontFeatureSettings) {
  129. if (this._fontFeatureSettings === fontFeatureSettings) {
  130. return;
  131. }
  132. this._fontFeatureSettings = fontFeatureSettings;
  133. this.domNode.style.fontFeatureSettings = this._fontFeatureSettings;
  134. }
  135. setFontVariationSettings(fontVariationSettings) {
  136. if (this._fontVariationSettings === fontVariationSettings) {
  137. return;
  138. }
  139. this._fontVariationSettings = fontVariationSettings;
  140. this.domNode.style.fontVariationSettings = this._fontVariationSettings;
  141. }
  142. setTextDecoration(textDecoration) {
  143. if (this._textDecoration === textDecoration) {
  144. return;
  145. }
  146. this._textDecoration = textDecoration;
  147. this.domNode.style.textDecoration = this._textDecoration;
  148. }
  149. setLineHeight(_lineHeight) {
  150. const lineHeight = numberAsPixels(_lineHeight);
  151. if (this._lineHeight === lineHeight) {
  152. return;
  153. }
  154. this._lineHeight = lineHeight;
  155. this.domNode.style.lineHeight = this._lineHeight;
  156. }
  157. setLetterSpacing(_letterSpacing) {
  158. const letterSpacing = numberAsPixels(_letterSpacing);
  159. if (this._letterSpacing === letterSpacing) {
  160. return;
  161. }
  162. this._letterSpacing = letterSpacing;
  163. this.domNode.style.letterSpacing = this._letterSpacing;
  164. }
  165. setClassName(className) {
  166. if (this._className === className) {
  167. return;
  168. }
  169. this._className = className;
  170. this.domNode.className = this._className;
  171. }
  172. toggleClassName(className, shouldHaveIt) {
  173. this.domNode.classList.toggle(className, shouldHaveIt);
  174. this._className = this.domNode.className;
  175. }
  176. setDisplay(display) {
  177. if (this._display === display) {
  178. return;
  179. }
  180. this._display = display;
  181. this.domNode.style.display = this._display;
  182. }
  183. setPosition(position) {
  184. if (this._position === position) {
  185. return;
  186. }
  187. this._position = position;
  188. this.domNode.style.position = this._position;
  189. }
  190. setVisibility(visibility) {
  191. if (this._visibility === visibility) {
  192. return;
  193. }
  194. this._visibility = visibility;
  195. this.domNode.style.visibility = this._visibility;
  196. }
  197. setColor(color) {
  198. if (this._color === color) {
  199. return;
  200. }
  201. this._color = color;
  202. this.domNode.style.color = this._color;
  203. }
  204. setBackgroundColor(backgroundColor) {
  205. if (this._backgroundColor === backgroundColor) {
  206. return;
  207. }
  208. this._backgroundColor = backgroundColor;
  209. this.domNode.style.backgroundColor = this._backgroundColor;
  210. }
  211. setLayerHinting(layerHint) {
  212. if (this._layerHint === layerHint) {
  213. return;
  214. }
  215. this._layerHint = layerHint;
  216. this.domNode.style.transform = this._layerHint ? 'translate3d(0px, 0px, 0px)' : '';
  217. }
  218. setBoxShadow(boxShadow) {
  219. if (this._boxShadow === boxShadow) {
  220. return;
  221. }
  222. this._boxShadow = boxShadow;
  223. this.domNode.style.boxShadow = boxShadow;
  224. }
  225. setContain(contain) {
  226. if (this._contain === contain) {
  227. return;
  228. }
  229. this._contain = contain;
  230. this.domNode.style.contain = this._contain;
  231. }
  232. setAttribute(name, value) {
  233. this.domNode.setAttribute(name, value);
  234. }
  235. removeAttribute(name) {
  236. this.domNode.removeAttribute(name);
  237. }
  238. appendChild(child) {
  239. this.domNode.appendChild(child.domNode);
  240. }
  241. removeChild(child) {
  242. this.domNode.removeChild(child.domNode);
  243. }
  244. }
  245. function numberAsPixels(value) {
  246. return (typeof value === 'number' ? `${value}px` : value);
  247. }
  248. export function createFastDomNode(domNode) {
  249. return new FastDomNode(domNode);
  250. }