8
0

treeview.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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 EmitterMixin from '../emittermixin.js';
  7. import Renderer from './renderer.js';
  8. import Converter from './converter.js';
  9. import utils from '../utils.js';
  10. /**
  11. * TreeView class combines the actual tree of view elements, tree of DOM elements, {@link core.treeView.Converter converter},
  12. * {@link core.treeView.Renderer renderer} and all {@link core.treeView.Observer observers}. It creates an abstract layer over the
  13. * content editable area.
  14. *
  15. * If you want to only transform the tree of view elements to the DOM elements you can use the {@link core.treeView.Converter Converter}.
  16. *
  17. * @memberOf core.treeView
  18. * @mixes core.EmitterMixin
  19. */
  20. export default class TreeView {
  21. /**
  22. * Creates a TreeView based on the HTMLElement.
  23. *
  24. * The constructor copies the element name and attributes to create the
  25. * root of the view, but does not copy its children. This means that the while rendering, the whole content of this
  26. * root element will be removed when you call {@link core.treeView.TreeView#render render} but the root name and attributes will
  27. * be preserved.
  28. *
  29. * @param {HTMLElement} domRoot DOM element in which the tree view should do change.
  30. */
  31. constructor( domRoot ) {
  32. /**
  33. * Root of the DOM tree.
  34. *
  35. * @member {HTMLElement} core.treeView.TreeView#domRoot
  36. */
  37. this.domRoot = domRoot;
  38. /**
  39. * Set of {@link core.treeView.Observer observers}.
  40. *
  41. * @member {Set.<core.treeView.Observer>} core.treeView.TreeView#observers
  42. */
  43. this.observers = new Set();
  44. /**
  45. * Instance of the {@link core.treeView.Converter converter} use by {@link core.treeView.TreeView#renderer renderer} and
  46. * {@link core.treeView.TreeView#observers observers}.
  47. *
  48. * @member {core.treeView.Converter} core.treeView.TreeView#converter
  49. */
  50. this.converter = new Converter();
  51. /**
  52. * Root of the view tree.
  53. *
  54. * @member {core.treeView.Element} core.treeView.TreeView#viewRoot
  55. */
  56. this.viewRoot = this.converter.domToView( domRoot, { bind: true, withChildren: false } );
  57. this.viewRoot.setTreeView( this );
  58. /**
  59. * Instance of the {@link core.treeView.TreeView#renderer renderer}.
  60. *
  61. * @member {core.treeView.Renderer} core.treeView.TreeView#renderer
  62. */
  63. this.renderer = new Renderer( this.converter );
  64. this.renderer.markToSync( 'CHILDREN', this.viewRoot );
  65. // Mark changed nodes in the renderer.
  66. this.viewRoot.on( 'change', ( evt, type, node ) => {
  67. this.renderer.markToSync( type, node );
  68. } );
  69. }
  70. /**
  71. * Adds an observer to the set of observers. This method also {@link core.treeView.Observer#init initializes} and
  72. * {@link core.treeView.Observer#attach attaches} the observer.
  73. *
  74. * @param {core.treeView.Observer} observer Observer to add.
  75. */
  76. addObserver( observer ) {
  77. this.observers.add( observer );
  78. observer.init( this );
  79. observer.attach();
  80. }
  81. /**
  82. * Renders all changes. In order to avoid triggering the observers (e.g. mutations) all observers all detached
  83. * before rendering and reattached after that.
  84. */
  85. render() {
  86. for ( let observer of this.observers ) {
  87. observer.detach();
  88. }
  89. this.renderer.render();
  90. for ( let observer of this.observers ) {
  91. observer.attach();
  92. }
  93. }
  94. }
  95. utils.mix( TreeView, EmitterMixin );
  96. /**
  97. * Enum representing type of the change.
  98. *
  99. * Possible values:
  100. *
  101. * * `CHILDREN` - for child list changes,
  102. * * `ATTRIBUTES` - for element attributes changes,
  103. * * `TEXT` - for text nodes changes.
  104. *
  105. * @typedef {String} core.treeView.ChangeType
  106. */