8
0
Просмотр исходного кода

Used UI#update event instead of View#render to attach the UI components.

Oskar Wróbel 7 лет назад
Родитель
Сommit
0c9dff5666

+ 3 - 4
packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js

@@ -167,9 +167,8 @@ export default class BalloonToolbar extends Plugin {
 			return;
 		}
 
-		// Update the toolbar position upon change (e.g. external document changes)
-		// while it's visible.
-		this.listenTo( this.editor.editing.view, 'render', () => {
+		// Update the toolbar position when the editor ui should be refreshed.
+		this.listenTo( this.editor.ui, 'update', () => {
 			this._balloon.updatePosition( this._getBalloonPositionData() );
 		} );
 
@@ -186,7 +185,7 @@ export default class BalloonToolbar extends Plugin {
 	 */
 	hide() {
 		if ( this._balloon.hasView( this.toolbarView ) ) {
-			this.stopListening( this.editor.editing.view, 'render' );
+			this.stopListening( this.editor.ui, 'update' );
 			this._balloon.remove( this.toolbarView );
 		}
 	}

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js

@@ -230,7 +230,7 @@ export default class BlockToolbar extends Plugin {
 			}
 		} );
 
-		this.listenTo( view, 'render', () => {
+		this.listenTo( editor.ui, 'update', () => {
 			// Get first selected block, button will be attached to this element.
 			modelTarget = Array.from( model.document.selection.getSelectedBlocks() )[ 0 ];
 

+ 5 - 5
packages/ckeditor5-ui/tests/toolbar/balloon/balloontoolbar.js

@@ -275,17 +275,17 @@ describe( 'BalloonToolbar', () => {
 			expect( targetRect ).to.deep.equal( backwardSelectionRect );
 		} );
 
-		it( 'should update balloon position on view#change event while balloon is added to the #_balloon', () => {
+		it( 'should update balloon position on ui#update event while balloon is added to the #_balloon', () => {
 			setData( model, '<paragraph>b[a]r</paragraph>' );
 
 			const spy = sandbox.spy( balloon, 'updatePosition' );
 
-			editingView.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			balloonToolbar.show();
 			sinon.assert.notCalled( spy );
 
-			editingView.fire( 'render' );
+			editor.ui.fire( 'update' );
 			sinon.assert.calledOnce( spy );
 		} );
 
@@ -369,7 +369,7 @@ describe( 'BalloonToolbar', () => {
 			sinon.assert.calledWithExactly( removeBalloonSpy, balloonToolbar.toolbarView );
 		} );
 
-		it( 'should stop update balloon position on ViewDocument#change event', () => {
+		it( 'should stop update balloon position on ui#update event', () => {
 			setData( model, '<paragraph>b[a]r</paragraph>' );
 
 			const spy = sandbox.spy( balloon, 'updatePosition' );
@@ -377,7 +377,7 @@ describe( 'BalloonToolbar', () => {
 			balloonToolbar.show();
 			balloonToolbar.hide();
 
-			editingView.fire( 'render' );
+			editor.ui.fire( 'update' );
 			sinon.assert.notCalled( spy );
 		} );
 

+ 44 - 8
packages/ckeditor5-ui/tests/toolbar/block/blocktoolbar.js

@@ -211,26 +211,38 @@ describe( 'BlockToolbar', () => {
 
 			setData( editor.model, '<foo>foo[]bar</foo>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			expect( blockToolbar.buttonView.isVisible ).to.be.true;
 		} );
 
 		it( 'should display the button when the first selected block is an object', () => {
 			setData( editor.model, '[<image src="foo.jpg"><caption>foo</caption></image>]' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			expect( blockToolbar.buttonView.isVisible ).to.be.true;
 		} );
 
 		it( 'should display the button when the selection is inside the object', () => {
 			setData( editor.model, '<image src="foo.jpg"><caption>f[]oo</caption></image>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			expect( blockToolbar.buttonView.isVisible ).to.be.true;
 		} );
 
-		it( 'should not display the button when the selection is placed in a root element', () => {
+		it( 'should not display the button when the selection is placed in the root element', () => {
 			editor.model.schema.extend( '$text', { allowIn: '$root' } );
 
 			setData( editor.model, '<paragraph>foo</paragraph>[]<paragraph>bar</paragraph>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			expect( blockToolbar.buttonView.isVisible ).to.be.false;
 		} );
 
@@ -247,6 +259,9 @@ describe( 'BlockToolbar', () => {
 
 				setData( editor.model, '[<image src="foo.jpg"></image>]' );
 
+				// "Flush" throttled event.
+				editor.ui.fire( 'update' );
+
 				expect( blockToolbar.buttonView.isVisible ).to.be.false;
 
 				element.remove();
@@ -267,6 +282,9 @@ describe( 'BlockToolbar', () => {
 			'of the selected block #1', () => {
 			setData( editor.model, '<paragraph>foo[]bar</paragraph>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			const target = editor.ui.view.editableElement.querySelector( 'p' );
 			const styleMock = testUtils.sinon.stub( window, 'getComputedStyle' );
 
@@ -291,7 +309,7 @@ describe( 'BlockToolbar', () => {
 				height: 100
 			} );
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			expect( blockToolbar.buttonView.top ).to.equal( 470 );
 			expect( blockToolbar.buttonView.left ).to.equal( 100 );
@@ -301,6 +319,9 @@ describe( 'BlockToolbar', () => {
 			'of the selected block #2', () => {
 			setData( editor.model, '<paragraph>foo[]bar</paragraph>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			const target = editor.ui.view.editableElement.querySelector( 'p' );
 			const styleMock = testUtils.sinon.stub( window, 'getComputedStyle' );
 
@@ -326,24 +347,24 @@ describe( 'BlockToolbar', () => {
 				height: 100
 			} );
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			expect( blockToolbar.buttonView.top ).to.equal( 472 );
 			expect( blockToolbar.buttonView.left ).to.equal( 100 );
 		} );
 
-		it( 'should reposition the #panelView when open on view#render', () => {
+		it( 'should reposition the #panelView when open on ui#update', () => {
 			blockToolbar.panelView.isVisible = false;
 
 			const spy = testUtils.sinon.spy( blockToolbar.panelView, 'pin' );
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			sinon.assert.notCalled( spy );
 
 			blockToolbar.panelView.isVisible = true;
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			sinon.assert.calledWith( spy, {
 				target: blockToolbar.buttonView.element,
@@ -351,12 +372,12 @@ describe( 'BlockToolbar', () => {
 			} );
 		} );
 
-		it( 'should not reset the toolbar focus on view#render', () => {
+		it( 'should not reset the toolbar focus on ui#update', () => {
 			blockToolbar.panelView.isVisible = true;
 
 			const spy = testUtils.sinon.spy( blockToolbar.toolbarView, 'focus' );
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			sinon.assert.notCalled( spy );
 		} );
@@ -380,6 +401,9 @@ describe( 'BlockToolbar', () => {
 		it( 'should hide the UI when editor switches to readonly when the panel is not visible', () => {
 			setData( editor.model, '<paragraph>foo[]bar</paragraph>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			blockToolbar.buttonView.isVisible = true;
 			blockToolbar.panelView.isVisible = false;
 
@@ -392,6 +416,9 @@ describe( 'BlockToolbar', () => {
 		it( 'should not hide button when the editor switches to readonly when the panel is visible', () => {
 			setData( editor.model, '<paragraph>foo[]bar</paragraph>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			blockToolbar.buttonView.isVisible = true;
 			blockToolbar.panelView.isVisible = true;
 
@@ -409,12 +436,18 @@ describe( 'BlockToolbar', () => {
 			// Place the selection outside of any block because the toolbar will not be shown in this case.
 			setData( editor.model, '[]<paragraph>bar</paragraph>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			window.dispatchEvent( new Event( 'resize' ) );
 
 			sinon.assert.notCalled( spy );
 
 			setData( editor.model, '<paragraph>ba[]r</paragraph>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			spy.resetHistory();
 
 			window.dispatchEvent( new Event( 'resize' ) );
@@ -423,6 +456,9 @@ describe( 'BlockToolbar', () => {
 
 			setData( editor.model, '[]<paragraph>bar</paragraph>' );
 
+			// "Flush" throttled event.
+			editor.ui.fire( 'update' );
+
 			spy.resetHistory();
 
 			window.dispatchEvent( new Event( 'resize' ) );