Răsfoiți Sursa

Converter is a class.

Piotr Jasiun 10 ani în urmă
părinte
comite
53a3860073

+ 52 - 51
packages/ckeditor5-engine/src/treeview/converter.js

@@ -8,19 +8,22 @@
 import ViewText from './text.js';
 import ViewElement from './element.js';
 
-const _domToViewMapping = new WeakMap();
-const _viewToDomMapping = new WeakMap();
-
-const converter = {
-	bindElements: function( domElement, viewElement ) {
-		_domToViewMapping.set( domElement, viewElement );
-		_viewToDomMapping.set( viewElement, domElement );
-	},
-
-	compareNodes: function( domNode, viewNode ) {
+// Converter is a class in the future it may take a configuration in the constructor (e.g. what should be inserted into empty elements).
+export default class Converter {
+	constructor() {
+		this._domToViewMapping = new WeakMap();
+		this._viewToDomMapping = new WeakMap();
+	}
+
+	bindElements( domElement, viewElement ) {
+		this._domToViewMapping.set( domElement, viewElement );
+		this._viewToDomMapping.set( viewElement, domElement );
+	}
+
+	compareNodes( domNode, viewNode ) {
 		// Elements.
 		if ( domNode instanceof HTMLElement && viewNode instanceof ViewElement ) {
-			return domNode === converter.getCorespondingDomElement( viewNode );
+			return domNode === this.getCorespondingDomElement( viewNode );
 		}
 		// Texts.
 		else if ( domNode instanceof Text && viewNode instanceof ViewText ) {
@@ -29,43 +32,43 @@ const converter = {
 
 		// Not matching types.
 		return false;
-	},
+	}
 
-	cloneDomAttrs: function( domElement, viewElement ) {
+	cloneDomAttrs( domElement, viewElement ) {
 		for ( let i = domElement.attributes.length - 1; i >= 0; i-- ) {
 			let attr = domElement.attributes[ i ];
 			viewElement.setAttr( attr.name, attr.value );
 		}
-	},
+	}
 
 	// viewToDom do bind elements
-	viewToDom: function( viewNode, domDocument ) {
+	viewToDom( viewNode, domDocument ) {
 		if ( viewNode instanceof ViewText ) {
 			return domDocument.createTextNode( viewNode.getText() );
 		} else {
-			if ( converter.getCorespondingDom( viewNode ) ) {
-				return converter.getCorespondingDom( viewNode );
+			if ( this.getCorespondingDom( viewNode ) ) {
+				return this.getCorespondingDom( viewNode );
 			}
 
 			const domElement = domDocument.createElement( viewNode.name );
-			converter.bindElements( domElement, viewNode );
+			this.bindElements( domElement, viewNode );
 
 			for ( let key of viewNode.getAttrKeys() ) {
 				domElement.setAttribute( key, viewNode.getAttr( key ) );
 			}
 
 			for ( let childView of viewNode.getChildren() ) {
-				domElement.appendChild( converter.viewToDom( childView, domDocument ) );
+				domElement.appendChild( this.viewToDom( childView, domDocument ) );
 			}
 
 			return domElement;
 		}
-	},
+	}
 
 	// Note that created elements will not have coresponding DOM elements created it these did not exist before.
 	// domToView do not bind elements
-	domToView: function( domElement ) {
-		let viewElement = converter.getCorespondingView( domElement );
+	domToView( domElement ) {
+		let viewElement = this.getCorespondingView( domElement );
 
 		if ( viewElement ) {
 			return viewElement;
@@ -84,37 +87,37 @@ const converter = {
 			for ( let i = 0, len = domElement.childNodes.length; i < len; i++ ) {
 				let domChild = domElement.childNodes[ i ];
 
-				viewElement.appendChildren( converter.domToView( domChild ) );
+				viewElement.appendChildren( this.domToView( domChild ) );
 			}
 
 			return viewElement;
 		}
-	},
+	}
 
-	getCorespondingView: function( domNode ) {
+	getCorespondingView( domNode ) {
 		if ( domNode instanceof HTMLElement ) {
-			return converter.getCorespondingViewElement( domNode );
+			return this.getCorespondingViewElement( domNode );
 		} else {
-			return converter.getCorespondingViewText( domNode );
+			return this.getCorespondingViewText( domNode );
 		}
-	},
+	}
 
 	// Coresponding elements exists only for rendered elementes.
-	getCorespondingViewElement: function( domElement ) {
-		return _domToViewMapping.get( domElement );
-	},
+	getCorespondingViewElement( domElement ) {
+		return this._domToViewMapping.get( domElement );
+	}
 
-	getCorespondingViewText: function( domText ) {
+	getCorespondingViewText( domText ) {
 		const previousSibling = domText.previousSibling;
 
 		if ( previousSibling ) {
-			const viewElement = converter.getCorespondingView( previousSibling );
+			const viewElement = this.getCorespondingView( previousSibling );
 
 			if ( viewElement ) {
 				return viewElement.getNextSibling();
 			}
 		} else {
-			const viewElement = converter.getCorespondingView( domText.parentElement );
+			const viewElement = this.getCorespondingView( domText.parentElement );
 
 			if ( viewElement ) {
 				return viewElement.getChild( 0 );
@@ -122,33 +125,31 @@ const converter = {
 		}
 
 		return null;
-	},
+	}
 
-	getCorespondingDom: function( viewNode ) {
+	getCorespondingDom( viewNode ) {
 		if ( viewNode instanceof ViewElement ) {
-			return converter.getCorespondingDomElement( viewNode );
+			return this.getCorespondingDomElement( viewNode );
 		} else {
-			return converter.getCorespondingDomText( viewNode );
+			return this.getCorespondingDomText( viewNode );
 		}
-	},
+	}
 
-	getCorespondingDomElement: function( viewElement ) {
-		return _viewToDomMapping.get( viewElement );
-	},
+	getCorespondingDomElement( viewElement ) {
+		return this._viewToDomMapping.get( viewElement );
+	}
 
-	getCorespondingDomText: function( viewText ) {
+	getCorespondingDomText( viewText ) {
 		const previousSibling = viewText.getPreviousSibling();
 
-		if ( previousSibling && converter.getCorespondingDom( previousSibling ) ) {
-			return converter.getCorespondingDom( previousSibling ).nextSibling;
+		if ( previousSibling && this.getCorespondingDom( previousSibling ) ) {
+			return this.getCorespondingDom( previousSibling ).nextSibling;
 		}
 
-		if ( !previousSibling && converter.getCorespondingDom( viewText.parent ) ) {
-			return converter.getCorespondingDom( viewText.parent ).childNodes[ 0 ];
+		if ( !previousSibling && this.getCorespondingDom( viewText.parent ) ) {
+			return this.getCorespondingDom( viewText.parent ).childNodes[ 0 ];
 		}
 
 		return null;
-	},
-};
-
-export default converter;
+	}
+}

+ 5 - 5
packages/ckeditor5-engine/src/treeview/observer/mutationobserver.js

@@ -6,9 +6,8 @@
 'use strict';
 
 import Observer from './observer.js';
-import converter from '../converter.js';
-import objectUtils from '../../lib/lodash/object.js';
 import EmitterMixin from '../../emittermixin.js';
+import objectUtils from '../../lib/lodash/object.js';
 
 export default class MutationObserver extends Observer {
 	constructor() {
@@ -42,6 +41,7 @@ export default class MutationObserver extends Observer {
 	 */
 	init( treeView ) {
 		this.treeView = treeView;
+		this.converter = treeView.converter;
 		this.domRoot = treeView.domRoot;
 
 		this._mutationObserver = new window.MutationObserver( this._onMutations.bind( this ) );
@@ -54,7 +54,7 @@ export default class MutationObserver extends Observer {
 
 		for ( let mutation of domMutations ) {
 			if ( mutation.type === 'childList' ) {
-				const element = converter.getCorespondingView( mutation.target );
+				const element = this.converter.getCorespondingView( mutation.target );
 
 				if ( element ) {
 					mutatedElements.add( element );
@@ -64,7 +64,7 @@ export default class MutationObserver extends Observer {
 
 		for ( let mutation of domMutations ) {
 			if ( mutation.type === 'characterData' ) {
-				const text = converter.getCorespondingView( mutation.target );
+				const text = this.converter.getCorespondingView( mutation.target );
 
 				if ( text && !mutatedElements.has( text.parent ) ) {
 					mutatedTexts.set( text, {
@@ -92,7 +92,7 @@ export default class MutationObserver extends Observer {
 			const newViewChildren = [];
 
 			for ( let i = 0; i < domChildren.length; i++ ) {
-				newViewChildren.push( converter.createFromDom( domChildren[ i ] ) );
+				newViewChildren.push( this.converter.createFromDom( domChildren[ i ] ) );
 			}
 
 			viewElement.markToSync( 'CHILDREN_NEED_UPDATE' );

+ 8 - 5
packages/ckeditor5-engine/src/treeview/renderer.js

@@ -6,11 +6,12 @@
 'use strict';
 
 import diff from '../utils-diff.js';
-import converter from './converter.js';
 import CKEditorError from '../ckeditorerror.js';
 
 export default class Renderer {
-	constructor() {
+	constructor( converter ) {
+		this.converter = converter;
+
 		this.markedAttrs = new Set();
 		this.markedChildren = new Set();
 		this.markedTexts = new Set();
@@ -18,12 +19,12 @@ export default class Renderer {
 
 	markToSync( node, type ) {
 		if ( type === 'TEXT_NEEDS_UPDATE' ) {
-			if ( converter.getCorespondingDom( node.parent ) ) {
+			if ( this.converter.getCorespondingDom( node.parent ) ) {
 				this.markedTexts.add( node );
 			}
 		} else {
 			// If the node has no DOM element it is not rendered yet, its children/attributes do not need to be marked to be sync.
-			if ( !converter.getCorespondingDom( node ) ) {
+			if ( !this.converter.getCorespondingDom( node ) ) {
 				return;
 			}
 
@@ -43,6 +44,8 @@ export default class Renderer {
 	}
 
 	render() {
+		const converter = this.converter;
+
 		for ( let node of this.markedTexts ) {
 			if ( !this.markedChildren.has( node.parent ) && converter.getCorespondingDom( node.parent ) ) {
 				updateText( node );
@@ -93,7 +96,7 @@ export default class Renderer {
 			const viewChildren = Array.from( viewElement.getChildren() );
 			const domDocument = domElement.ownerDocument;
 
-			const actions = diff( domChildren, viewChildren, converter.compareNodes );
+			const actions = diff( domChildren, viewChildren, ( domNode, viewNode ) => converter.compareNodes( domNode, viewNode ) );
 			let i = 0;
 
 			for ( let action of actions ) {

+ 6 - 4
packages/ckeditor5-engine/src/treeview/treeview.js

@@ -8,9 +8,9 @@
 import EmitterMixin from '../emittermixin.js';
 import RootElement from './rootelement.js';
 import Renderer from './renderer.js';
+import Converter from './converter.js';
 
 import objectUtils from '../lib/lodash/object.js';
-import converter from './converter.js';
 
 export default class TreeView {
 	constructor( domRoot ) {
@@ -21,14 +21,16 @@ export default class TreeView {
 
 		this.observers = new Set();
 
+		this.converter = new Converter();
+
 		/**
 		 * Root of the view
 		 */
 		this.viewRoot = new RootElement( domRoot.tagName.toLowerCase(), this );
-		converter.cloneDomAttrs( domRoot, this.viewRoot );
-		converter.bindElements( domRoot, this.viewRoot );
+		this.converter.cloneDomAttrs( domRoot, this.viewRoot );
+		this.converter.bindElements( domRoot, this.viewRoot );
 
-		this.renderer = new Renderer( this );
+		this.renderer = new Renderer( this.converter );
 		this.renderer.markToSync( this.viewRoot, 'CHILDREN_NEED_UPDATE' );
 	}
 

+ 5 - 2
packages/ckeditor5-engine/tests/treeview/converter.js

@@ -19,13 +19,16 @@ const modules = bender.amd.require(
 );
 
 describe( 'converter', () => {
-	let converter, ViewText, ViewElement, ViewNode;
+	let Converter, ViewText, ViewElement, ViewNode;
+	let converter;
 
 	before( () => {
 		ViewText = modules[ 'core/treeview/text' ];
 		ViewElement = modules[ 'core/treeview/element' ];
 		ViewNode = modules[ 'core/treeview/node' ];
-		converter = modules[ 'core/treeview/converter' ];
+		Converter = modules[ 'core/treeview/converter' ];
+
+		converter = new Converter();
 	} );
 
 	describe( 'bindElements', () => {

+ 5 - 4
packages/ckeditor5-engine/tests/treeview/renderer.js

@@ -16,17 +16,18 @@ const modules = bender.amd.require(
 );
 
 describe( 'Renderer', () => {
-	let Renderer, ViewElement, ViewText, CKEditorError, converter;
-	let renderer;
+	let Renderer, ViewElement, ViewText, CKEditorError, Converter;
+	let converter, renderer;
 
 	before( () => {
 		Renderer = modules[ 'core/treeview/renderer' ];
 		ViewElement = modules[ 'core/treeview/element' ];
 		ViewText = modules[ 'core/treeview/text' ];
 		CKEditorError = modules[ 'core/ckeditorerror' ];
-		converter = modules[ 'core/treeview/converter' ];
+		Converter = modules[ 'core/treeview/converter' ];
 
-		renderer = new Renderer();
+		converter = new Converter();
+		renderer = new Renderer( converter );
 	} );
 
 	describe( 'markToSync', () => {

+ 4 - 3
packages/ckeditor5-engine/tests/treeview/treeview.js

@@ -15,13 +15,13 @@ const modules = bender.amd.require(
 );
 
 describe( 'TreeView', () => {
-	let TreeView, Observer, Renderer, converter;
+	let TreeView, Observer, Renderer, Converter;
 
 	before( () => {
 		TreeView = modules[ 'core/treeview/treeview' ];
 		Observer = modules[ 'core/treeview/observer/observer' ];
 		Renderer = modules[ 'core/treeview/renderer' ];
-		converter = modules[ 'core/treeview/converter' ];
+		Converter = modules[ 'core/treeview/converter' ];
 	} );
 
 	describe( 'constructor', () => {
@@ -36,9 +36,10 @@ describe( 'TreeView', () => {
 			expect( treeView ).to.have.property( 'domRoot' ).that.equals( domDiv );
 			expect( treeView ).to.have.property( 'observers' ).that.is.instanceOf( Set );
 			expect( treeView ).to.have.property( 'renderer' ).that.is.instanceOf( Renderer );
+			expect( treeView ).to.have.property( 'converter' ).that.is.instanceOf( Converter );
 			expect( treeView ).to.have.property( 'viewRoot' );
 
-			expect( converter.getCorespondingDom( treeView.viewRoot ) ).to.equal( domDiv );
+			expect( treeView.converter.getCorespondingDom( treeView.viewRoot ) ).to.equal( domDiv );
 			expect( treeView.viewRoot.name ).to.equal( 'div' );
 			expect( treeView.viewRoot.getAttr( 'id' ) ).to.equal( 'editor' );
 			expect( treeView.renderer.markedChildren.has( treeView.viewRoot ) ).to.be.true;