Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Feature: Introduced ViewDocument#layoutChanged event.
Browse files Browse the repository at this point in the history
  • Loading branch information
oskarwrobel committed Jun 25, 2018
1 parent ec70448 commit 17ac131
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/view/document.js
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,12 @@ export default class Document {
}
} while ( wasFixed );
}

/**
* @TODO.
*
* @event module:engine/view/document~Document#event:layoutChanged
*/
}

mix( Document, ObservableMixin );
Expand Down
13 changes: 13 additions & 0 deletions src/view/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import CompositionObserver from './observer/compositionobserver';
import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
import log from '@ckeditor/ckeditor5-utils/src/log';
import mix from '@ckeditor/ckeditor5-utils/src/mix';
import throttle from '@ckeditor/ckeditor5-utils/src/lib/lodash/throttle';
import { scrollViewportToShowTarget } from '@ckeditor/ckeditor5-utils/src/dom/scroll';
import { injectUiElementHandling } from './uielement';
import { injectQuirksHandling } from './filler';
Expand Down Expand Up @@ -134,6 +135,14 @@ export default class View {
*/
this._writer = new Writer( this.document );

/**
* Fires throttled {@link module:engine/view/document~Document#event:layoutChanged} event.
*
* @protected
* @type {Function}
*/
this._throttledLayoutChange = throttle( () => this.document.fire( 'layoutChanged' ), 200 );

// Add default observers.
this.addObserver( MutationObserver );
this.addObserver( SelectionObserver );
Expand All @@ -149,6 +158,9 @@ export default class View {
// Use 'normal' priority so that rendering is performed as first when using that priority.
this.on( 'render', () => {
this._render();

// Informs that layout has changed after render.
this._throttledLayoutChange();
} );
}

Expand Down Expand Up @@ -378,6 +390,7 @@ export default class View {
}

this.stopListening();
this._throttledLayoutChange.cancel();
}

/**
Expand Down
51 changes: 51 additions & 0 deletions tests/view/view/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ describe( 'view', () => {
this.enable = sinon.spy();
this.disable = sinon.spy();
this.observe = sinon.spy();
this.destroy = sinon.spy();
}
};

Expand Down Expand Up @@ -379,6 +380,26 @@ describe( 'view', () => {

sinon.assert.callOrder( observerMock.disable, renderStub, observerMock.enable );
} );

it( 'should fire throttled view.document.layoutChanged event after each render', () => {
const spy = sinon.spy();

view.document.on( 'layoutChanged', spy );

view.render();

sinon.assert.calledOnce( spy );

view.render();

// Still once because of throttle.
sinon.assert.calledOnce( spy );

view._throttledLayoutChange.flush();

// Twice after flushing throttled event.
sinon.assert.calledTwice( spy );
} );
} );

describe( 'view and DOM integration', () => {
Expand Down Expand Up @@ -588,6 +609,36 @@ describe( 'view', () => {
} );
} );

describe( 'destroy()', () => {
it( 'should destroy all observers', () => {
const observerMock = view.addObserver( ObserverMock );

view.destroy();

sinon.assert.calledOnce( observerMock.destroy );
} );

it( 'should cancel throttled layoutChanged event', () => {
const view = new View();
const spy = sinon.spy();

view.document.on( 'layoutChanged', spy );

view.render();

sinon.assert.calledOnce( spy );

view.render();

view.destroy();

view._throttledLayoutChange.flush();

// Still once because second call was canceled.
sinon.assert.calledOnce( spy );
} );
} );

function createRoot( name, rootName, viewDoc ) {
const viewRoot = new RootEditableElement( name );

Expand Down

0 comments on commit 17ac131

Please sign in to comment.