Merge pull request #1296 from ckeditor/t/1210

Other: Refactoring of the view API. Closes #1210.

BREAKING CHANGE: `view.Writer` is no longer an object literal with functions but a class.
BREAKING CHANGE: View controller `view.View` is introduced. Changes to the view document tree structure should be done by using writer provided to callback in `view.change()` method.
BREAKING CHANGE: View document is now separated from the DOM. `view.Renderer`, `view.DomConverter` and observers are moved to `view.View`. 
BREAKING CHANGE: `view#event:render` is introduced to indicate a moment when all changes are applied and document may be rendered to the DOM.
BREAKING CHANGE: Downcast converter helpers no longer accepts view elements instances as constructors are now protected. Callbacks using view writer should be used.

src/controller/datacontroller.js

@@ -19,6 +19,8 @@ import UpcastDispatcher from '../conversion/upcastdispatcher';
 import { convertText, convertToModelFragment } from '../conversion/upcast-converters';
 
 import ViewDocumentFragment from '../view/documentfragment';
+import ViewDocument from '../view/document';
+import ViewWriter from '../view/writer';
 
 import ModelRange from '../model/range';
 
@@ -74,7 +76,7 @@ export default class DataController {
 		 * @readonly
 		 * @member {module:engine/conversion/downcastdispatcher~DowncastDispatcher}
 		 */
-		this.downcastDispatcher = new DowncastDispatcher( this.model, {
+		this.downcastDispatcher = new DowncastDispatcher( {
 			mapper: this.mapper
 		} );
 		this.downcastDispatcher.on( 'insert:$text', insertText(), { priority: 'lowest' } );
@@ -85,7 +87,7 @@ export default class DataController {
 		 * @readonly
 		 * @member {module:engine/conversion/upcastdispatcher~UpcastDispatcher}
 		 */
-		this.upcastDispatcher = new UpcastDispatcher( this.model, {
+		this.upcastDispatcher = new UpcastDispatcher( {
 			schema: model.schema
 		} );
 
@@ -143,17 +145,21 @@ export default class DataController {
 		const modelRange = ModelRange.createIn( modelElementOrFragment );
 
 		const viewDocumentFragment = new ViewDocumentFragment();
+
+		// Create separate ViewWriter just for data conversion purposes.
+		// We have no view controller and rendering do DOM in DataController so view.change() block is not used here.
+		const viewWriter = new ViewWriter( new ViewDocument() );
 		this.mapper.bindElements( modelElementOrFragment, viewDocumentFragment );
 
-		this.downcastDispatcher.convertInsert( modelRange );
+		this.downcastDispatcher.convertInsert( modelRange, viewWriter );
 
 		if ( !modelElementOrFragment.is( 'documentFragment' ) ) {
 			// Then, if a document element is converted, convert markers.
 			// From all document markers, get those, which "intersect" with the converter element.
 			const markers = _getMarkersRelativeToElement( modelElementOrFragment );
 
 			for ( const [ name, range ] of markers ) {
-				this.downcastDispatcher.convertMarkerAdd( name, range );
+				this.downcastDispatcher.convertMarkerAdd( name, range, viewWriter );
 			}
 		}
 
@@ -221,7 +227,9 @@ export default class DataController {
 	 * @returns {module:engine/model/documentfragment~DocumentFragment} Output document fragment.
 	 */
 	toModel( viewElementOrFragment, context = '$root' ) {
-		return this.upcastDispatcher.convert( viewElementOrFragment, context );
+		return this.model.change( writer => {
+			return this.upcastDispatcher.convert( viewElementOrFragment, writer, context );
+		} );
 	}
 
 	/**

src/controller/editingcontroller.js

@@ -8,7 +8,7 @@
  */
 
 import RootEditableElement from '../view/rooteditableelement';
-import ViewDocument from '../view/document';
+import View from '../view/view';
 import Mapper from '../conversion/mapper';
 import DowncastDispatcher from '../conversion/downcastdispatcher';
 import {
@@ -49,12 +49,12 @@ export default class EditingController {
 		this.model = model;
 
 		/**
-		 * View document.
+		 * Editing view controller.
 		 *
 		 * @readonly
-		 * @member {module:engine/view/document~Document}
+		 * @member {module:engine/view/view~View}
 		 */
-		this.view = new ViewDocument();
+		this.view = new View();
 
 		/**
 		 * Mapper which describes the model-view binding.
@@ -70,24 +70,23 @@ export default class EditingController {
 		 * @readonly
 		 * @member {module:engine/conversion/downcastdispatcher~DowncastDispatcher} #downcastDispatcher
 		 */
-		this.downcastDispatcher = new DowncastDispatcher( this.model, {
-			mapper: this.mapper,
-			viewSelection: this.view.selection
+		this.downcastDispatcher = new DowncastDispatcher( {
+			mapper: this.mapper
 		} );
 
 		const doc = this.model.document;
+		const selection = doc.selection;
+		const markers = this.model.markers;
 
 		this.listenTo( doc, 'change', () => {
-			this.downcastDispatcher.convertChanges( doc.differ );
-		}, { priority: 'low' } );
-
-		this.listenTo( model, '_change', () => {
-			this.downcastDispatcher.convertSelection( doc.selection );
-			this.view.render();
+			this.view.change( writer => {
+				this.downcastDispatcher.convertChanges( doc.differ, writer );
+				this.downcastDispatcher.convertSelection( selection, markers, writer );
+			} );
 		}, { 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.downcastDispatcher.on( 'insert:$text', insertText(), { priority: 'lowest' } );
@@ -122,7 +121,9 @@ export default class EditingController {
 				if ( _operationAffectsMarker( operation, marker ) ) {
 					// And if the operation in any way modifies the marker, remove the marker from the view.
 					removedMarkers.add( marker.name );
-					this.downcastDispatcher.convertMarkerRemove( marker.name, markerRange );
+					this.view.change( writer => {
+						this.downcastDispatcher.convertMarkerRemove( marker.name, markerRange, writer );
+					} );
 
 					// TODO: This stinks but this is the safest place to have this code.
 					this.model.document.differ.bufferMarkerChange( marker.name, markerRange, markerRange );
@@ -135,7 +136,9 @@ export default class EditingController {
 		this.listenTo( model.markers, 'remove', ( evt, marker ) => {
 			if ( !removedMarkers.has( marker.name ) ) {
 				removedMarkers.add( marker.name );
-				this.downcastDispatcher.convertMarkerRemove( marker.name, marker.getRange() );
+				this.view.change( writer => {
+					this.downcastDispatcher.convertMarkerRemove( marker.name, marker.getRange(), writer );
+				} );
 			}
 		} );
 
@@ -147,7 +150,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;
@@ -156,7 +159,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;