8
0

renderer.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. 'use strict';
  6. import ViewText from './text.js';
  7. import ViewElement from './element.js';
  8. import ViewPosition from './position.js';
  9. import { INLINE_FILLER, INLINE_FILLER_LENGTH, startsWithFiller, isInlineFiller, isBlockFiller } from './filler.js';
  10. import diff from '../../utils/diff.js';
  11. import insertAt from '../../utils/dom/insertat.js';
  12. import remove from '../../utils/dom/remove.js';
  13. import CKEditorError from '../../utils/ckeditorerror.js';
  14. /**
  15. * Renderer updates DOM structure and selection, to make them a reflection of the view structure and selection.
  16. *
  17. * View nodes which may need to be rendered needs to be {@link engine.treeView.Renderer#markToSync marked}.
  18. * Then, on {@link engine.treeView.Renderer#render render}, renderer compares the view nodes with the DOM nodes
  19. * in order to check which ones really need to be refreshed. Finally, it creates DOM nodes from these view nodes,
  20. * {@link engine.treeView.DomConverter#bindElements binds} them and inserts into the DOM tree.
  21. *
  22. * Every time {@link engine.treeView.Renderer#render render} is called, renderer additionally checks if
  23. * {@link engine.treeView.Renderer#selection selection} needs update and updates it if so.
  24. *
  25. * Renderer uses {@link engine.treeView.DomConverter} to transform and bind nodes.
  26. *
  27. * @memberOf engine.treeView
  28. */
  29. export default class Renderer {
  30. /**
  31. * Creates a renderer instance.
  32. *
  33. * @param {engine.treeView.DomConverter} domConverter Converter instance.
  34. * @param {engine.treeView.Selection} selection View selection.
  35. */
  36. constructor( domConverter, selection ) {
  37. /**
  38. * Converter instance.
  39. *
  40. * @readonly
  41. * @member {engine.treeView.DomConverter} engine.treeView.Renderer#domConverter
  42. */
  43. this.domConverter = domConverter;
  44. /**
  45. * Set of nodes which attributes changed and may need to be rendered.
  46. *
  47. * @readonly
  48. * @member {Set.<engine.treeView.Node>} engine.treeView.Renderer#markedAttributes
  49. */
  50. this.markedAttributes = new Set();
  51. /**
  52. * Set of elements which child lists changed and may need to be rendered.
  53. *
  54. * @readonly
  55. * @member {Set.<engine.treeView.Node>} engine.treeView.Renderer#markedChildren
  56. */
  57. this.markedChildren = new Set();
  58. /**
  59. * Set of text nodes which text data changed and may need to be rendered.
  60. *
  61. * @readonly
  62. * @member {Set.<engine.treeView.Node>} engine.treeView.Renderer#markedTexts
  63. */
  64. this.markedTexts = new Set();
  65. /**
  66. * View selection. Renderer updates DOM Selection to make it match this one.
  67. *
  68. * @readonly
  69. * @member {engine.treeView.Selection} engine.treeView.Renderer#selection
  70. */
  71. this.selection = selection;
  72. /**
  73. * Position of the inline {@link engine.treeView.filler filler}.
  74. * It should always be put BEFORE the text which contains filler.
  75. *
  76. * @private
  77. * @member {engine.treeView.Position} engine.treeView.Renderer#_inlineFillerPosition
  78. */
  79. this._inlineFillerPosition = null;
  80. /**
  81. * Last DOM selection object.
  82. *
  83. * Because renderer handles multiple roots, and because these roots might be in different documents (in case of
  84. * using `iframes`) renderer needs to keep last DOM selection object to remove ranges from it before new selection
  85. * is rendered.
  86. *
  87. * @private
  88. * @member {Selection} engine.treeView.Renderer#_domSelection
  89. */
  90. this._domSelection = null;
  91. }
  92. /**
  93. * Mark node to be synchronized.
  94. *
  95. * Note that only view nodes which parents have corresponding DOM elements need to be marked to be synchronized.
  96. *
  97. * @see engine.treeView.Renderer#markedAttributes
  98. * @see engine.treeView.Renderer#markedChildren
  99. * @see engine.treeView.Renderer#markedTexts
  100. *
  101. * @param {engine.treeView.ChangeType} type Type of the change.
  102. * @param {engine.treeView.Node} node Node to be marked.
  103. */
  104. markToSync( type, node ) {
  105. if ( type === 'TEXT' ) {
  106. if ( this.domConverter.getCorrespondingDom( node.parent ) ) {
  107. this.markedTexts.add( node );
  108. }
  109. } else {
  110. // If the node has no DOM element it is not rendered yet,
  111. // its children/attributes do not need to be marked to be sync.
  112. if ( !this.domConverter.getCorrespondingDom( node ) ) {
  113. return;
  114. }
  115. if ( type === 'ATTRIBUTES' ) {
  116. this.markedAttributes.add( node );
  117. } else if ( type === 'CHILDREN' ) {
  118. this.markedChildren.add( node );
  119. } else {
  120. /**
  121. * Unknown type passed to Renderer.markToSync.
  122. *
  123. * @error renderer-unknown-type
  124. */
  125. throw new CKEditorError( 'renderer-unknown-type: Unknown type passed to Renderer.markToSync.' );
  126. }
  127. }
  128. }
  129. /**
  130. * Render method checks {@link engine.treeView.Renderer#markedAttributes},
  131. * {@link engine.treeView.Renderer#markedChildren} and {@link engine.treeView.Renderer#markedTexts} and updats all
  132. * nodes which need to be updated. Then it clears all three sets. Also, every time render is called it compares and
  133. * if needed updates the selection.
  134. *
  135. * Renderer tries not to break text composition (e.g. IME) and x-index of the selection,
  136. * so it does as little as it is needed to update the DOM.
  137. *
  138. * For attributes it adds new attributes to DOM elements, updates values and removes
  139. * attributes which do not exist in the view element.
  140. *
  141. * For text nodes it updates the text string if it is different. Note that if parent element is marked as an element
  142. * which changed child list, text node update will not be done, because it may not be possible do find a
  143. * {@link engine.treeView.DomConverter#getCorrespondingDomText corresponding DOM text}. The change will be handled
  144. * in the parent element.
  145. *
  146. * For elements, which child lists have changed, it calculates a {@link diff} and adds or removs children which have changed.
  147. *
  148. * Rendering also handles {@link engine.treeView.filler fillers}. Especially, it checks if the inline filler is needed
  149. * at selection position and adds or removes it. To prevent breaking text composition inline filler will not be
  150. * removed as long selection is in the text node which needed it at first.
  151. */
  152. render() {
  153. if ( !this._isInlineFillerAtSelection() ) {
  154. this._removeInlineFiller();
  155. if ( this._needAddInlineFiller() ) {
  156. this._inlineFillerPosition = this.selection.getFirstPosition();
  157. this.markedChildren.add( this._inlineFillerPosition.parent );
  158. } else {
  159. this._inlineFillerPosition = null;
  160. }
  161. }
  162. for ( let node of this.markedTexts ) {
  163. if ( !this.markedChildren.has( node.parent ) && this.domConverter.getCorrespondingDom( node.parent ) ) {
  164. this._updateText( node );
  165. }
  166. }
  167. for ( let element of this.markedAttributes ) {
  168. this._updateAttrs( element );
  169. }
  170. for ( let element of this.markedChildren ) {
  171. this._updateChildren( element );
  172. }
  173. this._updateSelection();
  174. this.markedTexts.clear();
  175. this.markedAttributes.clear();
  176. this.markedChildren.clear();
  177. }
  178. /**
  179. * Returns `true` if the inline filler and selection are in the same place.
  180. * If it is true it means filler had been added for a reason and selection does not
  181. * left text node, user can be in the middle of the composition so it should not be touched.
  182. *
  183. * @private
  184. * @returns {Boolean} True if the inline filler and selection are in the same place.
  185. */
  186. _isInlineFillerAtSelection() {
  187. if ( this.selection.rangeCount != 1 || !this.selection.isCollapsed ) {
  188. return false;
  189. }
  190. const selectionPosition = this.selection.getFirstPosition();
  191. const fillerPosition = this._inlineFillerPosition;
  192. if ( !fillerPosition ) {
  193. return false;
  194. }
  195. if ( fillerPosition.isEqual( selectionPosition ) ) {
  196. return true;
  197. }
  198. if ( selectionPosition.parent instanceof ViewText ) {
  199. if ( fillerPosition.isEqual( ViewPosition.createBefore( selectionPosition.parent ) ) ) {
  200. return true;
  201. }
  202. }
  203. return false;
  204. }
  205. /**
  206. * Removes inline filler.
  207. *
  208. * @private
  209. */
  210. _removeInlineFiller() {
  211. if ( !this._inlineFillerPosition ) {
  212. // Nothing to remove.
  213. return;
  214. }
  215. const domFillerPosition = this.domConverter.viewPositionToDom( this._inlineFillerPosition );
  216. const domFillerNode = domFillerPosition.parent;
  217. // If there is no filler viewPositionToDom will return parent node, so domFillerNode will be an element.
  218. if ( !( domFillerNode instanceof Text ) || !startsWithFiller( domFillerNode ) ) {
  219. /**
  220. * No inline filler on expected position.
  221. *
  222. * @error renderer-render-no-inline-filler.
  223. */
  224. throw new CKEditorError( 'renderer-render-no-inline-filler: No inline filler on expected position.' );
  225. }
  226. if ( isInlineFiller( domFillerNode ) ) {
  227. domFillerNode.parentNode.removeChild( domFillerNode );
  228. } else {
  229. domFillerNode.data = domFillerNode.data.substr( INLINE_FILLER_LENGTH );
  230. }
  231. }
  232. /**
  233. * Checks if the inline {@link engine.treeView.filler fillers} should be added.
  234. *
  235. * @private
  236. * @returns {Boolean} True if the inline fillers should be added.
  237. */
  238. _needAddInlineFiller() {
  239. if ( this.selection.rangeCount != 1 || !this.selection.isCollapsed ) {
  240. return false;
  241. }
  242. const selectionPosition = this.selection.getFirstPosition();
  243. const selectionParent = selectionPosition.parent;
  244. const selectionOffset = selectionPosition.offset;
  245. if ( !( selectionParent instanceof ViewElement ) ) {
  246. return false;
  247. }
  248. // We have block filler, we do not need inline one.
  249. if ( selectionOffset === selectionParent.getFillerOffset() ) {
  250. return false;
  251. }
  252. const nodeBefore = selectionPosition.nodeBefore;
  253. const nodeAfter = selectionPosition.nodeAfter;
  254. if ( nodeBefore instanceof ViewText || nodeAfter instanceof ViewText ) {
  255. return false;
  256. }
  257. return true;
  258. }
  259. /**
  260. * Checks if text needs to be updated and possibly updates it.
  261. *
  262. * @private
  263. * @param {engine.treeView.Text} viewText View text to update.
  264. */
  265. _updateText( viewText ) {
  266. const domText = this.domConverter.getCorrespondingDom( viewText );
  267. const actualText = domText.data;
  268. let expectedText = viewText.data;
  269. const filler = this._inlineFillerPosition;
  270. if ( filler && filler.parent == viewText.parent && filler.offset == viewText.getIndex() ) {
  271. expectedText = INLINE_FILLER + expectedText;
  272. }
  273. if ( actualText != expectedText ) {
  274. domText.data = expectedText;
  275. }
  276. }
  277. /**
  278. * Checks if attributes list needs to be updated and possibly updates it.
  279. *
  280. * @private
  281. * @param {engine.treeView.Element} viewElement View element to update.
  282. */
  283. _updateAttrs( viewElement ) {
  284. const domElement = this.domConverter.getCorrespondingDom( viewElement );
  285. const domAttrKeys = Array.from( domElement.attributes ).map( attr => attr.name );
  286. const viewAttrKeys = viewElement.getAttributeKeys();
  287. // Add or overwrite attributes.
  288. for ( let key of viewAttrKeys ) {
  289. domElement.setAttribute( key, viewElement.getAttribute( key ) );
  290. }
  291. // Remove from DOM attributes which do not exists in the view.
  292. for ( let key of domAttrKeys ) {
  293. if ( !viewElement.hasAttribute( key ) ) {
  294. domElement.removeAttribute( key );
  295. }
  296. }
  297. }
  298. /**
  299. * Checks if elements child list needs to be updated and possibly updates it.
  300. *
  301. * @private
  302. * @param {engine.treeView.Element} viewElement View element to update.
  303. */
  304. _updateChildren( viewElement ) {
  305. const domConverter = this.domConverter;
  306. const domElement = domConverter.getCorrespondingDom( viewElement );
  307. const domDocument = domElement.ownerDocument;
  308. const filler = this._inlineFillerPosition;
  309. const actualDomChildren = domElement.childNodes;
  310. const expectedDomChildren = Array.from( domConverter.viewChildrenToDom( viewElement, domDocument, { bind: true } ) );
  311. if ( filler && filler.parent == viewElement ) {
  312. const expectedNoteAfterFiller = expectedDomChildren[ filler.offset ];
  313. if ( expectedNoteAfterFiller instanceof Text ) {
  314. expectedNoteAfterFiller.data = INLINE_FILLER + expectedNoteAfterFiller.data;
  315. } else {
  316. expectedDomChildren.splice( filler.offset, 0, domDocument.createTextNode( INLINE_FILLER ) );
  317. }
  318. }
  319. const actions = diff( actualDomChildren, expectedDomChildren, sameNodes );
  320. let i = 0;
  321. for ( let action of actions ) {
  322. if ( action === 'INSERT' ) {
  323. insertAt( domElement, i, expectedDomChildren[ i ] );
  324. i++;
  325. } else if ( action === 'DELETE' ) {
  326. remove( actualDomChildren[ i ] );
  327. } else { // 'EQUAL'
  328. i++;
  329. }
  330. }
  331. function sameNodes( actualDomChild, expectedDomChild ) {
  332. // Elements.
  333. if ( actualDomChild === expectedDomChild ) {
  334. return true;
  335. }
  336. // Texts.
  337. else if ( actualDomChild instanceof Text && expectedDomChild instanceof Text ) {
  338. return actualDomChild.data === expectedDomChild.data;
  339. }
  340. // Block fillers.
  341. else if ( isBlockFiller( actualDomChild, domConverter.blockFiller ) &&
  342. isBlockFiller( expectedDomChild, domConverter.blockFiller ) ) {
  343. return true;
  344. }
  345. // Not matching types.
  346. return false;
  347. }
  348. }
  349. /**
  350. * Checks if selection needs to be updated and possibly updates it.
  351. *
  352. * @private
  353. */
  354. _updateSelection() {
  355. let domSelection = this._domSelection;
  356. const oldViewSelection = domSelection && this.domConverter.domSelectionToView( domSelection );
  357. if ( !oldViewSelection && !this.selection.rangeCount ) {
  358. return;
  359. }
  360. if ( oldViewSelection && this.selection.isEqual( oldViewSelection ) ) {
  361. return;
  362. }
  363. if ( domSelection ) {
  364. domSelection.removeAllRanges();
  365. }
  366. domSelection = null;
  367. for ( let range of this.selection.getRanges() ) {
  368. const domRangeStart = this.domConverter.viewPositionToDom( range.start );
  369. const domRangeEnd = this.domConverter.viewPositionToDom( range.end );
  370. domSelection = domSelection || domRangeStart.parent.ownerDocument.defaultView.getSelection();
  371. const domRange = new Range();
  372. domRange.setStart( domRangeStart.parent, domRangeStart.offset );
  373. domRange.setEnd( domRangeEnd.parent, domRangeEnd.offset );
  374. domSelection.addRange( domRange );
  375. }
  376. this._domSelection = domSelection;
  377. }
  378. }