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

Commit

Permalink
Merge pull request #255 from ckeditor/i/6341
Browse files Browse the repository at this point in the history
Other: Reduced the table insertion grid rendering time. Closes ckeditor/ckeditor5#6341.
  • Loading branch information
oleq authored Apr 6, 2020
2 parents cc3fe8e + f42e727 commit fd1d5da
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 37 deletions.
60 changes: 39 additions & 21 deletions src/ui/inserttableview.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default class InsertTableView extends View {
* @readonly
* @member {module:ui/viewcollection~ViewCollection}
*/
this.items = this.createCollection();
this.items = this._createGridCollection();

/**
* The currently selected number of rows of the new table.
Expand Down Expand Up @@ -73,6 +73,9 @@ export default class InsertTableView extends View {
attributes: {
class: [ 'ck-insert-table-dropdown__grid' ]
},
on: {
'mouseover@.ck-insert-table-dropdown-grid-box': bind.to( 'boxover' )
},
children: this.items
},
{
Expand All @@ -99,23 +102,15 @@ export default class InsertTableView extends View {
}
} );

// Add grid boxes to table selection view.
for ( let index = 0; index < 100; index++ ) {
const boxView = new TableSizeGridBoxView();

// Listen to box view 'over' event which indicates that mouse is over this box.
boxView.on( 'over', () => {
// Translate box index to the row & column index.
const row = Math.floor( index / 10 );
const column = index % 10;
this.on( 'boxover', ( evt, domEvt ) => {
const { row, column } = domEvt.target.dataset;

// As row & column indexes are zero-based transform it to number of selected rows & columns.
this.set( 'rows', row + 1 );
this.set( 'columns', column + 1 );
// As row & column indexes are zero-based transform it to number of selected rows & columns.
this.set( {
rows: parseInt( row ),
columns: parseInt( column )
} );

this.items.add( boxView );
}
} );

this.on( 'change:columns', () => {
this._highlightGridBoxes();
Expand Down Expand Up @@ -162,6 +157,30 @@ export default class InsertTableView extends View {
boxView.set( 'isOn', isOn );
} );
}

/**
* @private
* @returns {module:ui/viewcollection~ViewCollection} A view collection containing boxes to be placed in a table grid.
*/
_createGridCollection() {
const boxes = [];

// Add grid boxes to table selection view.
for ( let index = 0; index < 100; index++ ) {
const row = Math.floor( index / 10 );
const column = index % 10;

boxes.push( new TableSizeGridBoxView( this.locale, row + 1, column + 1 ) );
}

return this.createCollection( boxes );
}

/**
* Fired when the mouse hover over one of the {@link #items child grid boxes}.
*
* @event boxover
*/
}

/**
Expand All @@ -175,7 +194,7 @@ class TableSizeGridBoxView extends View {
/**
* @inheritDoc
*/
constructor( locale ) {
constructor( locale, row, column ) {
super( locale );

const bind = this.bindTemplate;
Expand All @@ -194,10 +213,9 @@ class TableSizeGridBoxView extends View {
class: [
'ck-insert-table-dropdown-grid-box',
bind.if( 'isOn', 'ck-on' )
]
},
on: {
mouseover: bind.to( 'over' )
],
'data-row': row,
'data-column': column
}
} );
}
Expand Down
19 changes: 3 additions & 16 deletions tests/ui/inserttableview.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,12 @@ describe( 'InsertTableView', () => {
} );

describe( 'view#items bindings', () => {
it( 'updates view#height & view#width on "over" event', () => {
it( 'updates view#height & view#width on DOM "mouseover" event', () => {
const boxView = view.items.get( 0 );

expect( boxView.isOn ).to.be.false;

boxView.fire( 'over' );
boxView.element.dispatchEvent( new Event( 'mouseover', { bubbles: true } ) );

expect( boxView.isOn ).to.be.true;

Expand All @@ -74,7 +74,7 @@ describe( 'InsertTableView', () => {

const boxViewB = view.items.get( 22 );

boxViewB.fire( 'over' );
boxViewB.element.dispatchEvent( new Event( 'mouseover', { bubbles: true } ) );

expect( view.rows ).to.equal( 3 );
expect( view.columns ).to.equal( 3 );
Expand Down Expand Up @@ -108,19 +108,6 @@ describe( 'InsertTableView', () => {

sinon.assert.calledOnce( spy );
} );

describe( 'view#items mousemove event', () => {
it( 'fires "over" event', () => {
const boxView = view.items.get( 0 );
const spy = sinon.spy();

boxView.on( 'over', spy );

dispatchEvent( boxView.element, 'mouseover' );

sinon.assert.calledOnce( spy );
} );
} );
} );
} );
} );
Expand Down

0 comments on commit fd1d5da

Please sign in to comment.