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

Other: Count cell spans when inserting rows & columns.

Maciej Gołaszewski 7 лет назад
Родитель
Сommit
3ec3274441

+ 26 - 21
packages/ckeditor5-table/src/insertcolumncommand.js

@@ -9,6 +9,7 @@
 
 import Command from '@ckeditor/ckeditor5-core/src/command';
 import { CellSpans } from './converters/downcasttable';
+import Position from '../../ckeditor5-engine/src/model/position';
 
 /**
  * The insert column command.
@@ -43,12 +44,10 @@ export default class InsertColumnCommand extends Command {
 		const selection = document.selection;
 
 		const columns = parseInt( options.columns ) || 1;
-		const startingAt = parseInt( options.at ) || 0;
+		const insertAt = parseInt( options.at ) || 0;
 
 		const table = getValidParent( selection.getFirstPosition() );
 
-		const maxColumns = getColumns( table );
-
 		const cellSpans = new CellSpans();
 
 		model.change( writer => {
@@ -56,29 +55,45 @@ export default class InsertColumnCommand extends Command {
 
 			const headingColumns = table.getAttribute( 'headingColumns' );
 
-			if ( startingAt < headingColumns ) {
+			if ( insertAt < headingColumns ) {
 				writer.setAttribute( 'headingColumns', headingColumns + columns, table );
 			}
 
 			for ( const row of table.getChildren() ) {
-				const insertAt = startingAt > maxColumns ? maxColumns : startingAt;
+				// TODO: what to do with max columns?
 
 				let columnIndex = 0;
 
-				for ( const tableCell of row.getChildren() ) {
+				// Cache original children.
+				const children = [ ...row.getChildren() ];
+
+				for ( const tableCell of children ) {
+					let colspan = tableCell.hasAttribute( 'colspan' ) ? parseInt( tableCell.getAttribute( 'colspan' ) ) : 1;
+					const rowspan = tableCell.hasAttribute( 'rowspan' ) ? parseInt( tableCell.getAttribute( 'rowspan' ) ) : 1;
+
 					columnIndex = cellSpans.getNextFreeColumnIndex( rowIndex, columnIndex );
 
+					// TODO: this is not cool:
+					const shouldExpandSpan = colspan > 1 &&
+						( columnIndex !== insertAt ) &&
+						( columnIndex <= insertAt ) &&
+						( columnIndex <= insertAt + columns ) &&
+						( columnIndex + colspan > insertAt );
+
+					if ( shouldExpandSpan ) {
+						colspan += columns;
+
+						writer.setAttribute( 'colspan', colspan, tableCell );
+					}
+
 					while ( columnIndex >= insertAt && columnIndex < insertAt + columns ) {
 						const cell = writer.createElement( 'tableCell' );
 
-						writer.insert( cell, row, insertAt );
+						writer.insert( cell, Position.createBefore( tableCell ) );
 
 						columnIndex++;
 					}
 
-					const colspan = tableCell.hasAttribute( 'colspan' ) ? parseInt( tableCell.getAttribute( 'colspan' ) ) : 1;
-					const rowspan = tableCell.hasAttribute( 'rowspan' ) ? parseInt( tableCell.getAttribute( 'rowspan' ) ) : 1;
-
 					cellSpans.recordSpans( rowIndex, columnIndex, rowspan, colspan );
 
 					columnIndex += colspan;
@@ -88,7 +103,7 @@ export default class InsertColumnCommand extends Command {
 				while ( columnIndex >= insertAt && columnIndex < insertAt + columns ) {
 					const cell = writer.createElement( 'tableCell' );
 
-					writer.insert( cell, row, insertAt );
+					writer.insert( cell, row, 'end' );
 
 					columnIndex++;
 				}
@@ -110,13 +125,3 @@ function getValidParent( firstPosition ) {
 		parent = parent.parent;
 	}
 }
-
-function getColumns( table ) {
-	const row = table.getChild( 0 );
-
-	return [ ...row.getChildren() ].reduce( ( columns, row ) => {
-		const columnWidth = parseInt( row.getAttribute( 'colspan' ) ) || 1;
-
-		return columns + ( columnWidth );
-	}, 0 );
-}

+ 1 - 5
packages/ckeditor5-table/src/insertrowcommand.js

@@ -42,7 +42,7 @@ export default class InsertRowCommand extends Command {
 		const selection = document.selection;
 
 		const rows = parseInt( options.rows ) || 1;
-		const startingAt = parseInt( options.at ) || 0;
+		const insertAt = parseInt( options.at ) || 0;
 
 		const table = getValidParent( selection.getFirstPosition() );
 
@@ -51,8 +51,6 @@ export default class InsertRowCommand extends Command {
 		const columns = getColumns( table );
 
 		model.change( writer => {
-			let insertAt = startingAt > table.childCount ? table.childCount : startingAt;
-
 			if ( headingRows > insertAt ) {
 				writer.setAttribute( 'headingRows', headingRows + rows, table );
 			}
@@ -66,8 +64,6 @@ export default class InsertRowCommand extends Command {
 
 					writer.insert( cell, row, 'end' );
 				}
-
-				insertAt++;
 			}
 		} );
 	}

+ 28 - 21
packages/ckeditor5-table/tests/_utils/utils.js

@@ -3,6 +3,17 @@
  * For licensing, see LICENSE.md.
  */
 
+function formatAttributes( attributes ) {
+	let attributesString = '';
+
+	if ( attributes ) {
+		const entries = Object.entries( attributes );
+
+		attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
+	}
+	return attributesString;
+}
+
 /**
  * @param {Number} columns
  * @param {Array.<String>} tableData
@@ -10,32 +21,28 @@
  *
  * @returns {String}
  */
-export function modelTable( columns, tableData, attributes ) {
+export function modelTable( tableData, attributes ) {
 	const tableRows = tableData
-		.map( cellData => `<tableCell>${ cellData }</tableCell>` )
-		.reduce( ( table, tableCell, index ) => {
-			if ( index % columns === 0 ) {
-				table += '<tableRow>';
-			}
+		.reduce( ( previousRowsString, tableRow ) => {
+			const tableRowString = tableRow.reduce( ( tableRowString, tableCellData ) => {
+				let tableCell = tableCellData;
 
-			table += tableCell;
+				const isObject = typeof tableCellData === 'object';
 
-			if ( index % columns === columns - 1 ) {
-				table += '</tableRow>';
-			}
+				if ( isObject ) {
+					tableCell = tableCellData.contents;
+					delete tableCellData.contents;
+				}
 
-			return table;
-		}, '' );
-
-	let attributesString = '';
+				tableRowString += `<tableCell${ formatAttributes( isObject ? tableCellData : '' ) }>${ tableCell }</tableCell>`;
 
-	if ( attributes ) {
-		const entries = Object.entries( attributes );
+				return tableRowString;
+			}, '' );
 
-		attributesString = ' ' + entries.map( entry => `${ entry[ 0 ] }="${ entry[ 1 ] }"` ).join( ' ' );
-	}
+			return `${ previousRowsString }<tableRow>${ tableRowString }</tableRow>`;
+		}, '' );
 
-	return `<table${ attributesString }>${ tableRows }</table>`;
+	return `<table${ formatAttributes( attributes ) }>${ tableRows }</table>`;
 }
 
 export function formatModelTable( tableString ) {
@@ -45,8 +52,8 @@ export function formatModelTable( tableString ) {
 		.replace( /<\/table>/g, '\n</table>' );
 }
 
-export function formattedModelTable( columns, tableData, attributes ) {
-	const tableString = modelTable( columns, tableData, attributes );
+export function formattedModelTable( tableData, attributes ) {
+	const tableString = modelTable( tableData, attributes );
 
 	return formatModelTable( tableString );
 }

+ 89 - 29
packages/ckeditor5-table/tests/insertcolumncommand.js

@@ -77,7 +77,7 @@ describe( 'InsertColumnCommand', () => {
 			} );
 
 			it( 'should be true if in table', () => {
-				setData( model, modelTable( 1, [ '[]' ] ) );
+				setData( model, modelTable( [ [ '[]' ] ] ) );
 				expect( command.isEnabled ).to.be.true;
 			} );
 		} );
@@ -85,63 +85,123 @@ describe( 'InsertColumnCommand', () => {
 
 	describe( 'execute()', () => {
 		it( 'should insert column in given table at given index', () => {
-			setData( model, modelTable( 2, [
-				'11[]', '12',
-				'21', '22'
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ]
 			] ) );
 
 			command.execute( { at: 1 } );
 
-			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( 3, [
-				'11[]', '', '12',
-				'21', '', '22'
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '11[]', '', '12' ],
+				[ '21', '', '22' ]
 			] ) );
 		} );
 
 		it( 'should insert column in given table at default index', () => {
-			setData( model, modelTable( 2, [
-				'11[]', '12',
-				'21', '22'
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ]
 			] ) );
 
 			command.execute();
 
-			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( 3, [
-				'', '11[]', '12',
-				'', '21', '22'
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '', '11[]', '12' ],
+				[ '', '21', '22' ]
+			] ) );
+		} );
+
+		it( 'should insert columns at table end', () => {
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ]
+			] ) );
+
+			command.execute( { at: 2, columns: 2 } );
+
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '11[]', '12', '', '' ],
+				[ '21', '22', '', '' ]
 			] ) );
 		} );
 
 		it( 'should update table heading columns attribute when inserting column in headings section', () => {
-			setData( model, modelTable( 2, [
-				'11[]', '12',
-				'21', '22',
-				'31', '32'
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ],
+				[ '31', '32' ]
 			], { headingColumns: 2 } ) );
 
 			command.execute( { at: 1 } );
 
-			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( 3, [
-				'11[]', '', '12',
-				'21', '', '22',
-				'31', '', '32'
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '11[]', '', '12' ],
+				[ '21', '', '22' ],
+				[ '31', '', '32' ]
 			], { headingColumns: 3 } ) );
 		} );
 
 		it( 'should not update table heading columns attribute when inserting column after headings section', () => {
-			setData( model, modelTable( 2, [
-				'11[]', '12',
-				'21', '22',
-				'31', '32'
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ],
+				[ '31', '32' ]
 			], { headingColumns: 2 } ) );
 
 			command.execute( { at: 2 } );
 
-			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( 3, [
-				'11[]', '12', '',
-				'21', '22', '',
-				'31', '32', ''
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '11[]', '12', '' ],
+				[ '21', '22', '' ],
+				[ '31', '32', '' ]
+			], { headingColumns: 2 } ) );
+		} );
+
+		it( 'should skip spanned columns', () => {
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ { colspan: 2, contents: '21' } ],
+				[ '31', '32' ]
+			], { headingColumns: 2 } ) );
+
+			command.execute( { at: 1 } );
+
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '11[]', '', '12' ],
+				[ { colspan: 3, contents: '21' } ],
+				[ '31', '', '32' ]
+			], { headingColumns: 3 } ) );
+		} );
+
+		it( 'should skip wide spanned columns', () => {
+			setData( model, modelTable( [
+				[ '11[]', '12', '13', '14', '15' ],
+				[ '21', '22', { colspan: 2, contents: '23' }, '25' ],
+				[ { colspan: 4, contents: '31' }, { colspan: 2, contents: '34' } ]
+			], { headingColumns: 4 } ) );
+
+			command.execute( { at: 2, columns: 2 } );
+
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '11[]', '12', '', '', '13', '14', '15' ],
+				[ '21', '22', '', '', { colspan: 2, contents: '23' }, '25' ],
+				[ { colspan: 6, contents: '31' }, { colspan: 2, contents: '34' } ]
+			], { headingColumns: 6 } ) );
+		} );
+
+		it( 'should skip row spanned cells', () => {
+			setData( model, modelTable( [
+				[ { colspan: 2, rowspan: 2, contents: '11[]' }, '13' ],
+				[ '23' ]
 			], { headingColumns: 2 } ) );
+
+			command.execute( { at: 1, columns: 2 } );
+
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ { colspan: 4, rowspan: 2, contents: '11[]' }, '13' ],
+				[ '23' ]
+			], { headingColumns: 4 } ) );
 		} );
 	} );
 } );

+ 33 - 33
packages/ckeditor5-table/tests/insertrowcommand.js

@@ -77,7 +77,7 @@ describe( 'InsertRowCommand', () => {
 			} );
 
 			it( 'should be true if in table', () => {
-				setData( model, modelTable( 1, [ '[]' ] ) );
+				setData( model, modelTable( [ [ '[]' ] ] ) );
 				expect( command.isEnabled ).to.be.true;
 			} );
 		} );
@@ -85,66 +85,66 @@ describe( 'InsertRowCommand', () => {
 
 	describe( 'execute()', () => {
 		it( 'should insert row in given table at given index', () => {
-			setData( model, modelTable( 2, [
-				'11[]', '12',
-				'21', '22'
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ]
 			] ) );
 
 			command.execute( { at: 1 } );
 
-			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( 2, [
-				'11[]', '12',
-				'', '',
-				'21', '22'
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '11[]', '12' ],
+				[ '', '' ],
+				[ '21', '22' ]
 			] ) );
 		} );
 
 		it( 'should insert row in given table at default index', () => {
-			setData( model, modelTable( 2, [
-				'11[]', '12',
-				'21', '22'
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ]
 			] ) );
 
 			command.execute();
 
-			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( 2, [
-				'', '',
-				'11[]', '12',
-				'21', '22'
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '', '' ],
+				[ '11[]', '12' ],
+				[ '21', '22' ]
 			] ) );
 		} );
 
 		it( 'should update table heading rows attribute when inserting row in headings section', () => {
-			setData( model, modelTable( 2, [
-				'11[]', '12',
-				'21', '22',
-				'31', '32'
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ],
+				[ '31', '32' ]
 			], { headingRows: 2 } ) );
 
 			command.execute( { at: 1 } );
 
-			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( 2, [
-				'11[]', '12',
-				'', '',
-				'21', '22',
-				'31', '32'
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '11[]', '12' ],
+				[ '', '' ],
+				[ '21', '22' ],
+				[ '31', '32' ]
 			], { headingRows: 3 } ) );
 		} );
 
 		it( 'should not update table heading rows attribute when inserting row after headings section', () => {
-			setData( model, modelTable( 2, [
-				'11[]', '12',
-				'21', '22',
-				'31', '32'
+			setData( model, modelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ],
+				[ '31', '32' ]
 			], { headingRows: 2 } ) );
 
 			command.execute( { at: 2 } );
 
-			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( 2, [
-				'11[]', '12',
-				'21', '22',
-				'', '',
-				'31', '32'
+			expect( formatModelTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ '11[]', '12' ],
+				[ '21', '22' ],
+				[ '', '' ],
+				[ '31', '32' ]
 			], { headingRows: 2 } ) );
 		} );
 	} );