renderer.js 12 KB

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