8
0

renderer.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  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 tree, to make it a reflection of the view tree. Changed nodes need to be
  16. * {@link engine.treeView.Renderer#markToSync marked} to be rendered. Then, on {@link engine.treeView.Renderer#render render}, renderer
  17. * ensure they need to be refreshed and creates DOM nodes from view nodes,
  18. * {@link engine.treeView.DomConverter#bindElements bind} them and insert into DOM tree. Renderer use {@link engine.treeView.DomConverter}
  19. * to transform and bind nodes.
  20. *
  21. * @memberOf engine.treeView
  22. */
  23. export default class Renderer {
  24. /**
  25. * Creates a renderer instance.
  26. *
  27. * @param {engine.treeView.DomConverter} domConverter Converter instance.
  28. */
  29. constructor( domConverter, selection ) {
  30. /**
  31. * Converter instance.
  32. *
  33. * @readonly
  34. * @member {engine.treeView.DomConverter} engine.treeView.Renderer#domConverter
  35. */
  36. this.domConverter = domConverter;
  37. /**
  38. * Set of nodes which attributes changed and may need to be rendered.
  39. *
  40. * @readonly
  41. * @member {Set.<engine.treeView.Node>} engine.treeView.Renderer#markedAttributes
  42. */
  43. this.markedAttributes = new Set();
  44. /**
  45. * Set of elements which child lists changed and may need to be rendered.
  46. *
  47. * @readonly
  48. * @member {Set.<engine.treeView.Node>} engine.treeView.Renderer#markedChildren
  49. */
  50. this.markedChildren = new Set();
  51. /**
  52. * Set of text nodes which text data changed and may need to be rendered.
  53. *
  54. * @readonly
  55. * @member {Set.<engine.treeView.Node>} engine.treeView.Renderer#markedTexts
  56. */
  57. this.markedTexts = new Set();
  58. this.selection = selection;
  59. /**
  60. * Position of the inline filler. It should always be put BEFORE the text which contains filler.
  61. *
  62. * @private
  63. * @readonly
  64. * @type {engine.treeView.Position}
  65. */
  66. this._inlineFillerPosition = null;
  67. this._domSelection = null;
  68. }
  69. /**
  70. * Mark node to be synchronized.
  71. *
  72. * Note that only view nodes which parents have corresponding DOM elements need to be marked to be synchronized.
  73. *
  74. * @see engine.treeView.Renderer#markedAttributes
  75. * @see engine.treeView.Renderer#markedChildren
  76. * @see engine.treeView.Renderer#markedTexts
  77. *
  78. * @param {engine.treeView.ChangeType} type Type of the change.
  79. * @param {engine.treeView.Node} node Node to be marked.
  80. */
  81. markToSync( type, node ) {
  82. if ( type === 'TEXT' ) {
  83. if ( this.domConverter.getCorrespondingDom( node.parent ) ) {
  84. this.markedTexts.add( node );
  85. }
  86. } else {
  87. // If the node has no DOM element it is not rendered yet,
  88. // its children/attributes do not need to be marked to be sync.
  89. if ( !this.domConverter.getCorrespondingDom( node ) ) {
  90. return;
  91. }
  92. if ( type === 'ATTRIBUTES' ) {
  93. this.markedAttributes.add( node );
  94. } else if ( type === 'CHILDREN' ) {
  95. this.markedChildren.add( node );
  96. } else {
  97. /**
  98. * Unknown type passed to Renderer.markToSync.
  99. *
  100. * @error renderer-unknown-type
  101. */
  102. throw new CKEditorError( 'renderer-unknown-type: Unknown type passed to Renderer.markToSync.' );
  103. }
  104. }
  105. }
  106. /**
  107. * Render method check {@link engine.treeView.Renderer#markedAttributes}, {@link engine.treeView.Renderer#markedChildren} and
  108. * {@link engine.treeView.Renderer#markedTexts} and updated all nodes which needs to be updated. Then it clear all three
  109. * sets.
  110. *
  111. * Renderer try not to break IME, so it do as little as it is possible to update DOM.
  112. *
  113. * For attributes it adds new attributes to DOM elements, update attributes with different values and remove
  114. * attributes which does not exists in the view element.
  115. *
  116. * For text nodes it update the text string if it is different. Note that if parent element is marked as an element
  117. * which changed child list, text node update will not be done, because it may not be possible do find a
  118. * {@link engine.treeView.DomConverter#getCorrespondingDomText corresponding DOM text}. The change will be handled in the
  119. * parent element.
  120. *
  121. * For nodes which changed child list it calculates a {@link diff} and add or removed nodes which changed.
  122. */
  123. render() {
  124. const domConverter = this.domConverter;
  125. const selection = this.selection;
  126. if ( !this._isInlineFillerAtSelection() ) {
  127. this._removeInlineFiller();
  128. if ( this._needAddInlineFiller() ) {
  129. this._inlineFillerPosition = selection.getFirstPosition();
  130. this.markedChildren.add( this._inlineFillerPosition.parent );
  131. } else {
  132. this._inlineFillerPosition = null;
  133. }
  134. }
  135. for ( let node of this.markedTexts ) {
  136. if ( !this.markedChildren.has( node.parent ) && domConverter.getCorrespondingDom( node.parent ) ) {
  137. this._updateText( node );
  138. }
  139. }
  140. for ( let element of this.markedAttributes ) {
  141. this._updateAttrs( element );
  142. }
  143. for ( let element of this.markedChildren ) {
  144. this._updateChildren( element );
  145. }
  146. this._updateSelection();
  147. this.markedTexts.clear();
  148. this.markedAttributes.clear();
  149. this.markedChildren.clear();
  150. }
  151. _isInlineFillerAtSelection() {
  152. if ( this.selection.rangeCount != 1 || !this.selection.isCollapsed ) {
  153. return false;
  154. }
  155. const selectionPosition = this.selection.getFirstPosition();
  156. const fillerPosition = this._inlineFillerPosition;
  157. if ( !fillerPosition ) {
  158. return false;
  159. }
  160. if ( fillerPosition.isEqual( selectionPosition ) ) {
  161. return true;
  162. }
  163. if ( selectionPosition.parent instanceof ViewText ) {
  164. if ( fillerPosition.isEqual( ViewPosition.createBefore( selectionPosition.parent ) ) ) {
  165. return true;
  166. }
  167. }
  168. return false;
  169. }
  170. _removeInlineFiller() {
  171. if ( !this._inlineFillerPosition ) {
  172. // Nothing to remove;
  173. return;
  174. }
  175. const domFillerPosition = this.domConverter.viewPositionToDom( this._inlineFillerPosition );
  176. const domFillerNode = domFillerPosition.parent;
  177. if ( !startsWithFiller( domFillerNode ) ) {
  178. /**
  179. * No inline filler on expected position.
  180. *
  181. * @error renderer-render-no-inline-filler.
  182. */
  183. throw new CKEditorError( 'renderer-render-no-inline-filler: No inline filler on expected position.' );
  184. }
  185. if ( isInlineFiller( domFillerNode ) ) {
  186. domFillerNode.parentNode.removeChild( domFillerNode );
  187. } else {
  188. domFillerNode.data = domFillerNode.data.substr( INLINE_FILLER_LENGTH );
  189. }
  190. }
  191. _needAddInlineFiller() {
  192. if ( this.selection.rangeCount != 1 || !this.selection.isCollapsed ) {
  193. return false;
  194. }
  195. const selectionPosition = this.selection.getFirstPosition();
  196. const selectionParent = selectionPosition.parent;
  197. const selectionOffset = selectionPosition.offset;
  198. if ( !( selectionParent instanceof ViewElement ) ) {
  199. return false;
  200. }
  201. // We have block filler, we do not need inline one.
  202. if ( selectionOffset === selectionParent.getBlockFillerOffset() ) {
  203. return false;
  204. }
  205. const nodeBefore = selectionPosition.nodeBefore;
  206. const nodeAfter = selectionPosition.nodeAfter;
  207. if ( nodeBefore instanceof ViewText || nodeAfter instanceof ViewText ) {
  208. return false;
  209. }
  210. return true;
  211. }
  212. _updateText( viewText ) {
  213. const domText = this.domConverter.getCorrespondingDom( viewText );
  214. const actualText = domText.data;
  215. let expectedText = viewText.data;
  216. const filler = this._inlineFillerPosition;
  217. if ( filler && filler.parent == viewText.parent && filler.offset == viewText.offset ) {
  218. expectedText = INLINE_FILLER + expectedText;
  219. }
  220. if ( actualText != expectedText ) {
  221. domText.data = expectedText;
  222. }
  223. }
  224. _updateAttrs( viewElement ) {
  225. const domElement = this.domConverter.getCorrespondingDom( viewElement );
  226. const domAttrKeys = Array.from( domElement.attributes ).map( attr => attr.name );
  227. const viewAttrKeys = viewElement.getAttributeKeys();
  228. // Add or overwrite attributes.
  229. for ( let key of viewAttrKeys ) {
  230. domElement.setAttribute( key, viewElement.getAttribute( key ) );
  231. }
  232. // Remove from DOM attributes which do not exists in the view.
  233. for ( let key of domAttrKeys ) {
  234. if ( !viewElement.hasAttribute( key ) ) {
  235. domElement.removeAttribute( key );
  236. }
  237. }
  238. }
  239. _updateChildren( viewElement ) {
  240. const domConverter = this.domConverter;
  241. const domElement = domConverter.getCorrespondingDom( viewElement );
  242. const domDocument = domElement.ownerDocument;
  243. const filler = this._inlineFillerPosition;
  244. const actualDomChildren = domElement.childNodes;
  245. const expectedDomChildren = Array.from( domConverter.viewChildrenToDom( viewElement, domDocument, { bind: true } ) );
  246. if ( filler && filler.parent == viewElement ) {
  247. const expectedNoteAfterFiller = expectedDomChildren[ filler.offset ];
  248. if ( expectedNoteAfterFiller instanceof Text ) {
  249. expectedNoteAfterFiller.data = INLINE_FILLER + expectedNoteAfterFiller.data;
  250. } else {
  251. expectedDomChildren.splice( filler.offset, 0, domDocument.createTextNode( INLINE_FILLER ) );
  252. }
  253. }
  254. const actions = diff( actualDomChildren, expectedDomChildren, sameNodes );
  255. let i = 0;
  256. for ( let action of actions ) {
  257. if ( action === 'INSERT' ) {
  258. insertAt( domElement, i, expectedDomChildren[ i ] );
  259. i++;
  260. } else if ( action === 'DELETE' ) {
  261. remove( actualDomChildren[ i ] );
  262. } else { // 'EQUAL'
  263. i++;
  264. }
  265. }
  266. function sameNodes( actualDomChild, expectedDomChild ) {
  267. // Elements.
  268. if ( actualDomChild === expectedDomChild ) {
  269. return true;
  270. }
  271. // Texts.
  272. else if ( actualDomChild instanceof Text && expectedDomChild instanceof Text ) {
  273. return actualDomChild.data === expectedDomChild.data;
  274. }
  275. // Block fillers.
  276. else if ( isBlockFiller( actualDomChild, domConverter.blockFiller ) &&
  277. isBlockFiller( expectedDomChild, domConverter.blockFiller ) ) {
  278. return true;
  279. }
  280. // Not matching types.
  281. return false;
  282. }
  283. }
  284. _updateSelection() {
  285. let domSelection = this._domSelection;
  286. const oldViewSelection = domSelection && this.domConverter.domSelectionToView( domSelection );
  287. if ( !oldViewSelection && !this.selection.rangeCount ) {
  288. return;
  289. }
  290. if ( oldViewSelection && this.selection.isEqual( oldViewSelection ) ) {
  291. return;
  292. }
  293. if ( domSelection ) {
  294. domSelection.removeAllRanges();
  295. }
  296. domSelection = null;
  297. for ( let range of this.selection.getRanges() ) {
  298. const domRangeStart = this.domConverter.viewPositionToDom( range.start );
  299. const domRangeEnd = this.domConverter.viewPositionToDom( range.end );
  300. domSelection = domSelection || domRangeStart.parent.ownerDocument.defaultView.getSelection();
  301. const domRange = new Range();
  302. domRange.setStart( domRangeStart.parent, domRangeStart.offset );
  303. domRange.setEnd( domRangeEnd.parent, domRangeEnd.offset );
  304. domSelection.addRange( domRange );
  305. }
  306. this._domSelection = domSelection;
  307. }
  308. }