8
0

node.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module engine/view/node
  7. */
  8. import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  9. import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
  10. import mix from '@ckeditor/ckeditor5-utils/src/mix';
  11. import compareArrays from '@ckeditor/ckeditor5-utils/src/comparearrays';
  12. import { clone } from 'lodash-es';
  13. /**
  14. * Abstract tree view node class.
  15. *
  16. * This is an abstract class. Its constructor should not be used directly.
  17. * Use the {@link module:engine/view/element~Element} class to create view elements
  18. * or {@link module:engine/view/text~Text} class to create view text nodes.
  19. *
  20. * @abstract
  21. */
  22. export default class Node {
  23. /**
  24. * Creates a tree view node.
  25. */
  26. constructor() {
  27. /**
  28. * Parent element. Null by default. Set by {@link module:engine/view/element~Element#_insertChild}.
  29. *
  30. * @readonly
  31. * @member {module:engine/view/element~Element|module:engine/view/documentfragment~DocumentFragment|null}
  32. */
  33. this.parent = null;
  34. }
  35. /**
  36. * Index of the node in the parent element or null if the node has no parent.
  37. *
  38. * Accessing this property throws an error if this node's parent element does not contain it.
  39. * This means that view tree got broken.
  40. *
  41. * @readonly
  42. * @type {Number|null}
  43. */
  44. get index() {
  45. let pos;
  46. if ( !this.parent ) {
  47. return null;
  48. }
  49. // No parent or child doesn't exist in parent's children.
  50. if ( ( pos = this.parent.getChildIndex( this ) ) == -1 ) {
  51. /**
  52. * The node's parent does not contain this node. It means that the document tree is corrupted.
  53. *
  54. * @error view-node-not-found-in-parent
  55. */
  56. throw new CKEditorError( 'view-node-not-found-in-parent: The node\'s parent does not contain this node.' );
  57. }
  58. return pos;
  59. }
  60. /**
  61. * Node's next sibling, or `null` if it is the last child.
  62. *
  63. * @readonly
  64. * @type {module:engine/view/node~Node|null}
  65. */
  66. get nextSibling() {
  67. const index = this.index;
  68. return ( index !== null && this.parent.getChild( index + 1 ) ) || null;
  69. }
  70. /**
  71. * Node's previous sibling, or `null` if it is the first child.
  72. *
  73. * @readonly
  74. * @type {module:engine/view/node~Node|null}
  75. */
  76. get previousSibling() {
  77. const index = this.index;
  78. return ( index !== null && this.parent.getChild( index - 1 ) ) || null;
  79. }
  80. /**
  81. * Top-most ancestor of the node. If the node has no parent it is the root itself.
  82. *
  83. * @readonly
  84. * @type {module:engine/view/node~Node|module:engine/view/documentfragment~DocumentFragment}
  85. */
  86. get root() {
  87. let root = this; // eslint-disable-line consistent-this
  88. while ( root.parent ) {
  89. root = root.parent;
  90. }
  91. return root;
  92. }
  93. /**
  94. * {@link module:engine/view/document~Document View document} that owns this node, or `null` if the node is inside
  95. * {@link module:engine/view/documentfragment~DocumentFragment document fragment}.
  96. *
  97. * @readonly
  98. * @type {module:engine/view/document~Document|null}
  99. */
  100. get document() {
  101. // Parent might be Node, null or DocumentFragment.
  102. if ( this.parent instanceof Node ) {
  103. return this.parent.document;
  104. } else {
  105. return null;
  106. }
  107. }
  108. /**
  109. * Gets a path to the node. The path is an array containing indices of consecutive ancestors of this node,
  110. * beginning from {@link module:engine/view/node~Node#root root}, down to this node's index.
  111. *
  112. * const abc = downcastWriter.createText( 'abc' );
  113. * const foo = downcastWriter.createText( 'foo' );
  114. * const h1 = downcastWriter.createElement( 'h1', null, downcastWriter.createText( 'header' ) );
  115. * const p = downcastWriter.createElement( 'p', null, [ abc, foo ] );
  116. * const div = downcastWriter.createElement( 'div', null, [ h1, p ] );
  117. * foo.getPath(); // Returns [ 1, 3 ]. `foo` is in `p` which is in `div`. `p` starts at offset 1, while `foo` at 3.
  118. * h1.getPath(); // Returns [ 0 ].
  119. * div.getPath(); // Returns [].
  120. *
  121. * @returns {Array.<Number>} The path.
  122. */
  123. getPath() {
  124. const path = [];
  125. let node = this; // eslint-disable-line consistent-this
  126. while ( node.parent ) {
  127. path.unshift( node.index );
  128. node = node.parent;
  129. }
  130. return path;
  131. }
  132. /**
  133. * Returns ancestors array of this node.
  134. *
  135. * @param {Object} options Options object.
  136. * @param {Boolean} [options.includeSelf=false] When set to `true` this node will be also included in parent's array.
  137. * @param {Boolean} [options.parentFirst=false] When set to `true`, array will be sorted from node's parent to root element,
  138. * otherwise root element will be the first item in the array.
  139. * @returns {Array} Array with ancestors.
  140. */
  141. getAncestors( options = { includeSelf: false, parentFirst: false } ) {
  142. const ancestors = [];
  143. let parent = options.includeSelf ? this : this.parent;
  144. while ( parent ) {
  145. ancestors[ options.parentFirst ? 'push' : 'unshift' ]( parent );
  146. parent = parent.parent;
  147. }
  148. return ancestors;
  149. }
  150. /**
  151. * Returns a {@link module:engine/view/element~Element} or {@link module:engine/view/documentfragment~DocumentFragment}
  152. * which is a common ancestor of both nodes.
  153. *
  154. * @param {module:engine/view/node~Node} node The second node.
  155. * @param {Object} options Options object.
  156. * @param {Boolean} [options.includeSelf=false] When set to `true` both nodes will be considered "ancestors" too.
  157. * Which means that if e.g. node A is inside B, then their common ancestor will be B.
  158. * @returns {module:engine/view/element~Element|module:engine/view/documentfragment~DocumentFragment|null}
  159. */
  160. getCommonAncestor( node, options = {} ) {
  161. const ancestorsA = this.getAncestors( options );
  162. const ancestorsB = node.getAncestors( options );
  163. let i = 0;
  164. while ( ancestorsA[ i ] == ancestorsB[ i ] && ancestorsA[ i ] ) {
  165. i++;
  166. }
  167. return i === 0 ? null : ancestorsA[ i - 1 ];
  168. }
  169. /**
  170. * Returns whether this node is before given node. `false` is returned if nodes are in different trees (for example,
  171. * in different {@link module:engine/view/documentfragment~DocumentFragment}s).
  172. *
  173. * @param {module:engine/view/node~Node} node Node to compare with.
  174. * @returns {Boolean}
  175. */
  176. isBefore( node ) {
  177. // Given node is not before this node if they are same.
  178. if ( this == node ) {
  179. return false;
  180. }
  181. // Return `false` if it is impossible to compare nodes.
  182. if ( this.root !== node.root ) {
  183. return false;
  184. }
  185. const thisPath = this.getPath();
  186. const nodePath = node.getPath();
  187. const result = compareArrays( thisPath, nodePath );
  188. switch ( result ) {
  189. case 'prefix':
  190. return true;
  191. case 'extension':
  192. return false;
  193. default:
  194. return thisPath[ result ] < nodePath[ result ];
  195. }
  196. }
  197. /**
  198. * Returns whether this node is after given node. `false` is returned if nodes are in different trees (for example,
  199. * in different {@link module:engine/view/documentfragment~DocumentFragment}s).
  200. *
  201. * @param {module:engine/view/node~Node} node Node to compare with.
  202. * @returns {Boolean}
  203. */
  204. isAfter( node ) {
  205. // Given node is not before this node if they are same.
  206. if ( this == node ) {
  207. return false;
  208. }
  209. // Return `false` if it is impossible to compare nodes.
  210. if ( this.root !== node.root ) {
  211. return false;
  212. }
  213. // In other cases, just check if the `node` is before, and return the opposite.
  214. return !this.isBefore( node );
  215. }
  216. /**
  217. * Removes node from parent.
  218. *
  219. * @protected
  220. */
  221. _remove() {
  222. this.parent._removeChildren( this.index );
  223. }
  224. /**
  225. * @protected
  226. * @param {module:engine/view/document~ChangeType} type Type of the change.
  227. * @param {module:engine/view/node~Node} node Changed node.
  228. * @fires change
  229. */
  230. _fireChange( type, node ) {
  231. this.fire( 'change:' + type, node );
  232. if ( this.parent ) {
  233. this.parent._fireChange( type, node );
  234. }
  235. }
  236. /**
  237. * Custom toJSON method to solve child-parent circular dependencies.
  238. *
  239. * @returns {Object} Clone of this object with the parent property removed.
  240. */
  241. toJSON() {
  242. const json = clone( this );
  243. // Due to circular references we need to remove parent reference.
  244. delete json.parent;
  245. return json;
  246. }
  247. /**
  248. * Checks whether given view tree object is of given type.
  249. *
  250. * This method is useful when processing view tree objects that are of unknown type. For example, a function
  251. * may return {@link module:engine/view/documentfragment~DocumentFragment} or {@link module:engine/view/node~Node}
  252. * that can be either text node or element. This method can be used to check what kind of object is returned.
  253. *
  254. * obj.is( 'node' ); // true for any node, false for document fragment and text fragment
  255. * obj.is( 'documentFragment' ); // true for document fragment, false for any node
  256. * obj.is( 'element' ); // true for any element, false for text node or document fragment
  257. * obj.is( 'element', 'p' ); // true only for element which name is 'p'
  258. * obj.is( 'p' ); // shortcut for obj.is( 'element', 'p' )
  259. * obj.is( 'text' ); // true for text node, false for element and document fragment
  260. *
  261. * @method #is
  262. * @param {'element'|'containerElement'|'attributeElement'|'emptyElement'|'uiElement'|
  263. * 'rootElement'|'documentFragment'|'text'|'textProxy'} type
  264. * @returns {Boolean}
  265. */
  266. is( type ) {
  267. return type == 'node';
  268. }
  269. /**
  270. * Clones this node.
  271. *
  272. * @protected
  273. * @method #_clone
  274. * @returns {module:engine/view/node~Node} Clone of this node.
  275. */
  276. /**
  277. * Checks if provided node is similar to this node.
  278. *
  279. * @method #isSimilar
  280. * @returns {Boolean} True if nodes are similar.
  281. */
  282. }
  283. /**
  284. * Fired when list of {@link module:engine/view/element~Element elements} children changes.
  285. *
  286. * Change event is bubbled – it is fired on all ancestors.
  287. *
  288. * @event change:children
  289. * @param {module:engine/view/node~Node} changedNode
  290. */
  291. /**
  292. * Fired when list of {@link module:engine/view/element~Element elements} attributes changes.
  293. *
  294. * Change event is bubbled – it is fired on all ancestors.
  295. *
  296. * @event change:attributes
  297. * @param {module:engine/view/node~Node} changedNode
  298. */
  299. /**
  300. * Fired when {@link module:engine/view/text~Text text nodes} data changes.
  301. *
  302. * Change event is bubbled – it is fired on all ancestors.
  303. *
  304. * @event change:text
  305. * @param {module:engine/view/node~Node} changedNode
  306. */
  307. /**
  308. * @event change
  309. */
  310. mix( Node, EmitterMixin );