Procházet zdrojové kódy

Moving responsibilites from view document to view controller.

Szymon Kupś před 8 roky
rodič
revize
c379ad6d57

+ 8 - 8
packages/ckeditor5-engine/src/controller/editingcontroller.js

@@ -9,7 +9,7 @@
 
 import RootEditableElement from '../view/rooteditableelement';
 import ModelDiffer from '../model/differ';
-import ViewDocument from '../view/document';
+import View from '../view/view';
 import Mapper from '../conversion/mapper';
 import ModelConversionDispatcher from '../conversion/modelconversiondispatcher';
 import {
@@ -50,12 +50,12 @@ export default class EditingController {
 		this.model = model;
 
 		/**
-		 * View document.
+		 * Editing view.
 		 *
 		 * @readonly
-		 * @member {module:engine/view/document~Document}
+		 * @member {module:engine/view/view~View}
 		 */
-		this.view = new ViewDocument();
+		this.view = new View();
 
 		/**
 		 * Mapper which describes model-view binding.
@@ -81,7 +81,7 @@ export default class EditingController {
 		 */
 		this.modelToView = new ModelConversionDispatcher( this.model, {
 			mapper: this.mapper,
-			viewSelection: this.view.selection
+			viewSelection: this.view.document.selection
 		} );
 
 		// Model differ object. It's role is to buffer changes done on model and then calculates a diff of those changes.
@@ -131,7 +131,7 @@ export default class EditingController {
 		}, { priority: 'low' } );
 
 		// Convert selection from view to model.
-		this.listenTo( this.view, 'selectionChange', convertSelectionChange( this.model, this.mapper ) );
+		this.listenTo( this.view.document, 'selectionChange', convertSelectionChange( this.model, this.mapper ) );
 
 		// Attach default model converters.
 		this.modelToView.on( 'insert:$text', insertText(), { priority: 'lowest' } );
@@ -146,7 +146,7 @@ export default class EditingController {
 		// Binds {@link module:engine/view/document~Document#roots view roots collection} to
 		// {@link module:engine/model/document~Document#roots model roots collection} so creating
 		// model root automatically creates corresponding view root.
-		this.view.roots.bindTo( this.model.document.roots ).using( root => {
+		this.view.document.roots.bindTo( this.model.document.roots ).using( root => {
 			// $graveyard is a special root that has no reflection in the view.
 			if ( root.rootName == '$graveyard' ) {
 				return null;
@@ -155,7 +155,7 @@ export default class EditingController {
 			const viewRoot = new RootEditableElement( root.name );
 
 			viewRoot.rootName = root.rootName;
-			viewRoot.document = this.view;
+			viewRoot.document = this.view.document;
 			this.mapper.bindElements( root, viewRoot );
 
 			return viewRoot;

+ 1 - 33
packages/ckeditor5-engine/src/view/document.js

@@ -23,6 +23,7 @@ import mix from '@ckeditor/ckeditor5-utils/src/mix';
 import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import { scrollViewportToShowTarget } from '@ckeditor/ckeditor5-utils/src/dom/scroll';
 
+// todo: check the docs
 /**
  * Document class creates an abstract layer over the content editable area.
  * It combines the actual tree of view elements, tree of DOM elements,
@@ -63,16 +64,6 @@ export default class Document {
 		 */
 		this.selection = new Selection();
 
-		/**
-		 * Instance of the {@link module:engine/view/domconverter~DomConverter domConverter} use by
-		 * {@link module:engine/view/document~Document#renderer renderer}
-		 * and {@link module:engine/view/observer/observer~Observer observers}.
-		 *
-		 * @readonly
-		 * @member {module:engine/view/domconverter~DomConverter} module:engine/view/document~Document#domConverter
-		 */
-		this.domConverter = new DomConverter();
-
 		/**
 		 * Roots of the view tree. Collection of the {module:engine/view/element~Element view elements}.
 		 *
@@ -108,15 +99,6 @@ export default class Document {
 		 */
 		this.set( 'isFocused', false );
 
-		/**
-		 * Instance of the {@link module:engine/view/document~Document#renderer renderer}.
-		 *
-		 * @readonly
-		 * @member {module:engine/view/renderer~Renderer} module:engine/view/document~Document#renderer
-		 */
-		this.renderer = new Renderer( this.domConverter, this.selection );
-		this.renderer.bind( 'isFocused' ).to( this );
-
 		/**
 		 * Map of registered {@link module:engine/view/observer/observer~Observer observers}.
 		 *
@@ -134,8 +116,6 @@ export default class Document {
 
 		injectQuirksHandling( this );
 		injectUiElementHandling( this );
-
-		this.decorate( 'render' );
 	}
 
 	/**
@@ -234,18 +214,6 @@ export default class Document {
 		return this.domRoots.get( name );
 	}
 
-	/**
-	 * Renders all changes. In order to avoid triggering the observers (e.g. mutations) all observers are disabled
-	 * before rendering and re-enabled after that.
-	 *
-	 * @fires render
-	 */
-	render() {
-		this.disableObservers();
-		this.renderer.render();
-		this.enableObservers();
-	}
-
 	/**
 	 * Focuses document. It will focus {@link module:engine/view/editableelement~EditableElement EditableElement} that is currently having
 	 * selection inside.

+ 54 - 4
packages/ckeditor5-engine/src/view/view.js

@@ -1,12 +1,40 @@
 import Document from './document';
 import Writer from './writer';
+import Renderer from './renderer';
+import DomConverter from './domconverter';
+
 import log from '@ckeditor/ckeditor5-utils/src/log';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
+import ObservableMixin from '../../../ckeditor5-utils/src/observablemixin';
 
 export default class View {
 	constructor() {
 		this.document = new Document();
 		this._writer = new Writer();
 
+		// TODO: check docs
+		// TODO: move render event description to this file.
+
+		/**
+		 * Instance of the {@link module:engine/view/domconverter~DomConverter domConverter} use by
+		 * {@link module:engine/view/document~Document#renderer renderer}
+		 * and {@link module:engine/view/observer/observer~Observer observers}.
+		 *
+		 * @readonly
+		 * @member {module:engine/view/domconverter~DomConverter} module:engine/view/view~View#domConverter
+		 */
+		this.domConverter = new DomConverter();
+
+		/**
+		 * Instance of the {@link module:engine/view/document~Document#renderer renderer}.
+		 *
+		 * @readonly
+		 * @member {module:engine/view/renderer~Renderer} module:engine/view/view~View#renderer
+		 */
+		this._renderer = new Renderer( this.domConverter, this.document.selection );
+		this._renderer.bind( 'isFocused' ).to( this.document );
+		// this.decorate( 'render' );
+
 		this._ongoingChange = false;
 		this._renderingInProgress = false;
 	}
@@ -29,13 +57,35 @@ export default class View {
 			callback( this._writer );
 		} else {
 			this._ongoingChange = true;
-			callback( this._writer );
 
-			this._renderingInProgress = true;
-			// TODO: render
-			this._renderingInProgress = false;
+			callback( this._writer );
+			this._render();
 
 			this._ongoingChange = false;
 		}
 	}
+
+	/**
+	 * Renders all changes. In order to avoid triggering the observers (e.g. mutations) all observers are disabled
+	 * before rendering and re-enabled after that.
+	 *
+	 * @private
+	 * @fires render
+	 */
+	_render() {
+		this._renderingInProgress = true;
+
+		this.document.disableObservers();
+		this._renderer.render();
+		this.document.enableObservers();
+
+		this._renderingInProgress = false;
+	}
+
+	destroy() {
+		this.document.destroy();
+		this.stopListening();
+	}
 }
+
+mix( View, ObservableMixin );