fastDomNode.js 7.0 KB

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