瀏覽代碼

Added force flag for the `view.render` method.

Maciej Bukowski 6 年之前
父節點
當前提交
d51733486b

+ 2 - 2
packages/ckeditor5-engine/src/view/observer/focusobserver.js

@@ -37,7 +37,7 @@ export default class FocusObserver extends DomEventObserver {
 			// overwrite new DOM selection with selection from the view.
 			// See https://github.com/ckeditor/ckeditor5-engine/issues/795 for more details.
 			// Long timeout is needed to solve #676 and https://github.com/ckeditor/ckeditor5-engine/issues/1157 issues.
-			this._renderTimeoutId = setTimeout( () => view.render(), 50 );
+			this._renderTimeoutId = setTimeout( () => view.render( { force: true } ), 50 );
 		} );
 
 		document.on( 'blur', ( evt, data ) => {
@@ -47,7 +47,7 @@ export default class FocusObserver extends DomEventObserver {
 				document.isFocused = false;
 
 				// Re-render the document to update view elements.
-				view.render();
+				view.render( { force: true } );
 			}
 		} );
 

+ 1 - 1
packages/ckeditor5-engine/src/view/observer/mutationobserver.js

@@ -248,7 +248,7 @@ export default class MutationObserver extends Observer {
 
 		// If nothing changes on `mutations` event, at this point we have "dirty DOM" (changed) and de-synched
 		// view (which has not been changed). In order to "reset DOM" we render the view again.
-		this.view.render();
+		this.view.render( { force: true } );
 
 		function sameNodes( child1, child2 ) {
 			// First level of comparison (array of children vs array of children) – use the Lodash's default behavior.

+ 1 - 1
packages/ckeditor5-engine/src/view/observer/selectionobserver.js

@@ -166,7 +166,7 @@ export default class SelectionObserver extends Observer {
 		if ( this.selection.isSimilar( newViewSelection ) ) {
 			// If selection was equal and we are at this point of algorithm, it means that it was incorrect.
 			// Just re-render it, no need to fire any events, etc.
-			this.view.render();
+			this.view.render( { force: true } );
 		} else {
 			const data = {
 				oldSelection: this.selection,

+ 1 - 1
packages/ckeditor5-engine/src/view/placeholder.js

@@ -40,7 +40,7 @@ export function attachPlaceholder( view, element, placeholderText, checkFunction
 	} );
 
 	// Update view right away.
-	view.render();
+	view.render( { force: true } );
 }
 
 /**

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

@@ -177,7 +177,11 @@ export default class View {
 		} );
 
 		// Listen to the selection changes.
-		this.listenTo( this.document.selection, 'change', () => {
+		this.listenTo( this.document, 'selectionChange', () => {
+			this._hasChangedSinceTheLastRendering = true;
+		} );
+
+		this.listenTo( this.document, 'selectionChange', () => {
 			this._hasChangedSinceTheLastRendering = true;
 		} );
 	}
@@ -312,9 +316,8 @@ export default class View {
 			const editable = this.document.selection.editableElement;
 
 			if ( editable ) {
-				this._hasChangedSinceTheLastRendering = true;
 				this.domConverter.focus( editable );
-				this.render();
+				this.render( { force: true } );
 			} else {
 				/**
 				 * Before focusing view document, selection should be placed inside one of the view's editables.
@@ -404,11 +407,19 @@ export default class View {
 	/**
 	 * Renders {@link module:engine/view/document~Document view document} to DOM. If any view changes are
 	 * currently in progress, rendering will start after all {@link #change change blocks} are processed.
+	 * If no changes are detected view will not re-render, unless the `options.force` is set to `true`.
 	 *
 	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `applying-view-changes-on-rendering` when
 	 * trying to re-render when rendering to DOM has already started.
+	 *
+	 * @param {Object} [options] Rendering options
+	 * @param {Boolean} [options.force=false] A flag ensures that the view will re-render even when nothing has changed.
 	 */
-	render() {
+	render( options = {} ) {
+		if ( options.force ) {
+			this._hasChangedSinceTheLastRendering = true;
+		}
+
 		this.change( () => {} );
 	}
 

+ 5 - 3
packages/ckeditor5-engine/tests/tickets/1653.js

@@ -9,7 +9,7 @@ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictest
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 
 describe( 'Bug ckeditor5-engine#1653', () => {
-	it( '`DataController.parse()` should not invoke `editing.view.render()`', () => {
+	it( '`DataController.parse()` should not fire `editing.view#render`', () => {
 		let editor;
 
 		const element = document.createElement( 'div' );
@@ -20,10 +20,12 @@ describe( 'Bug ckeditor5-engine#1653', () => {
 			.then( newEditor => {
 				editor = newEditor;
 
-				const spy = sinon.spy( editor.editing.view, 'render' );
+				const editingViewSpy = sinon.spy();
+
+				editor.editing.view.on( 'fire', editingViewSpy );
 				editor.data.parse( '<p></p>' );
 
-				sinon.assert.notCalled( spy );
+				sinon.assert.notCalled( editingViewSpy );
 			} )
 			.then( () => {
 				element.remove();

+ 1 - 1
packages/ckeditor5-engine/tests/view/observer/domeventobserver.js

@@ -183,7 +183,7 @@ describe( 'DomEventObserver', () => {
 			view.attachDomRoot( domRoot );
 			uiElement = createUIElement( 'p' );
 			viewRoot._appendChild( uiElement );
-			view.render();
+			view.render( { force: true } );
 
 			domEvent = new MouseEvent( 'click', { bubbles: true } );
 			evtSpy = sinon.spy();

+ 2 - 0
packages/ckeditor5-engine/tests/view/observer/focusobserver.js

@@ -169,6 +169,8 @@ describe( 'FocusObserver', () => {
 			setData( view, '<div contenteditable="true">foo bar</div>' );
 			view.render();
 
+			console.log( 1 );
+
 			viewDocument.on( 'selectionChange', selectionChangeSpy );
 			view.on( 'render', renderSpy );
 

+ 1 - 1
packages/ckeditor5-engine/tests/view/observer/mutationobserver.js

@@ -39,7 +39,7 @@ describe( 'MutationObserver', () => {
 
 		viewRoot._appendChild( parse( '<container:p>foo</container:p><container:p>bar</container:p>' ) );
 
-		view.render();
+		view.render( { render: true } );
 	} );
 
 	afterEach( () => {

+ 1 - 1
packages/ckeditor5-engine/tests/view/placeholder.js

@@ -84,7 +84,7 @@ describe( 'placeholder', () => {
 			expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
 
 			result = false;
-			view.render();
+			view.render( { force: true } );
 			expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
 		} );