qms-angular 1.0.87 → 1.0.90

package/src/assets/qms-ckeditor-plugin/src/plugins/table/ui/inserttableview.js

@@ -0,0 +1,222 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/ui/inserttableview
+ */
+
+import { View } from 'ckeditor5/src/ui';
+
+import '../../table/theme/inserttable.css';
+
+/**
+ * The table size view.
+ *
+ * It renders a 10x10 grid to choose the inserted table size.
+ *
+ * @extends module:ui/view~View
+ * @implements module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable
+ */
+export default class InsertTableView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		/**
+		 * A collection of table size box items.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.items = this._createGridCollection();
+
+		/**
+		 * The currently selected number of rows of the new table.
+		 *
+		 * @observable
+		 * @member {Number} #rows
+		 */
+		this.set( 'rows', 0 );
+
+		/**
+		 * The currently selected number of columns of the new table.
+		 *
+		 * @observable
+		 * @member {Number} #columns
+		 */
+		this.set( 'columns', 0 );
+
+		/**
+		 * The label text displayed under the boxes.
+		 *
+		 * @observable
+		 * @member {String} #label
+		 */
+		this.bind( 'label' )
+			.to( this, 'columns', this, 'rows', ( columns, rows ) => `${ rows } × ${ columns }` );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [ 'ck' ]
+			},
+
+			children: [
+				{
+					tag: 'div',
+					attributes: {
+						class: [ 'ck-insert-table-dropdown__grid' ]
+					},
+					on: {
+						'mouseover@.ck-insert-table-dropdown-grid-box': bind.to( 'boxover' )
+					},
+					children: this.items
+				},
+				{
+					tag: 'div',
+					attributes: {
+						class: [ 'ck-insert-table-dropdown__label' ]
+					},
+					children: [
+						{
+							text: bind.to( 'label' )
+						}
+					]
+				}
+			],
+
+			on: {
+				mousedown: bind.to( evt => {
+					evt.preventDefault();
+				} ),
+
+				click: bind.to( () => {
+					this.fire( 'execute' );
+				} )
+			}
+		} );
+
+		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: parseInt( row ),
+				columns: parseInt( column )
+			} );
+		} );
+
+		this.on( 'change:columns', () => {
+			this._highlightGridBoxes();
+		} );
+
+		this.on( 'change:rows', () => {
+			this._highlightGridBoxes();
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	focus() {
+		// The dropdown panel expects DropdownPanelFocusable interface on views passed to dropdown panel. See #30.
+		// The method should be implemented while working on keyboard support for this view. See #22.
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	focusLast() {
+		// The dropdown panel expects DropdownPanelFocusable interface on views passed to dropdown panel. See #30.
+		// The method should be implemented while working on keyboard support for this view. See #22.
+	}
+
+	/**
+	 * Highlights grid boxes depending on rows and columns selected.
+	 *
+	 * @private
+	 */
+	_highlightGridBoxes() {
+		const rows = this.rows;
+		const columns = this.columns;
+
+		this.items.map( ( boxView, index ) => {
+			// Translate box index to the row & column index.
+			const itemRow = Math.floor( index / 10 );
+			const itemColumn = index % 10;
+
+			// Grid box is highlighted when its row & column index belongs to selected number of rows & columns.
+			const isOn = itemRow < rows && itemColumn < columns;
+
+			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
+	 */
+}
+
+/**
+ * A single grid box view element.
+ *
+ * This class is used to render the table size selection grid in {@link module:table/ui/inserttableview~InsertTableView}.
+ *
+ * @private
+ */
+class TableSizeGridBoxView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale, row, column ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		/**
+		 * Controls whether the grid box view is "on".
+		 *
+		 * @observable
+		 * @member {Boolean} #isOn
+		 */
+		this.set( 'isOn', false );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck-insert-table-dropdown-grid-box',
+					bind.if( 'isOn', 'ck-on' )
+				],
+				'data-row': row,
+				'data-column': column
+			}
+		} );
+	}
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/utils/common.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/utils/common
+ */
+
+/**
+ * A common method to update the numeric value. If a value is the default one, it will be unset.
+ *
+ * @param {String} key An attribute key.
+ * @param {*} value The new attribute value.
+ * @param {module:engine/model/item~Item} item A model item on which the attribute will be set.
+ * @param {module:engine/model/writer~Writer} writer
+ * @param {*} defaultValue The default attribute value. If a value is lower or equal, it will be unset.
+ */
+export function updateNumericAttribute( key, value, item, writer, defaultValue = 1 ) {
+	if ( value > defaultValue ) {
+		writer.setAttribute( key, value, item );
+	} else {
+		writer.removeAttribute( key, item );
+	}
+}
+
+/**
+ * A common method to create an empty table cell. It creates a proper model structure as a table cell must have at least one block inside.
+ *
+ * @param {module:engine/model/writer~Writer} writer The model writer.
+ * @param {module:engine/model/position~Position} insertPosition The position at which the table cell should be inserted.
+ * @param {Object} attributes The element attributes.
+ * @returns {module:engine/model/element~Element} Created table cell.
+ */
+export function createEmptyTableCell( writer, insertPosition, attributes = {} ) {
+	const tableCell = writer.createElement( 'tableCell', attributes );
+
+	writer.insertElement( 'paragraph', tableCell );
+	writer.insert( tableCell, insertPosition );
+
+	return tableCell;
+}
+
+/**
+ * Checks if a table cell belongs to the heading column section.
+ *
+ * @param {module:table/tableutils~TableUtils} tableUtils
+ * @param {module:engine/model/element~Element} tableCell
+ * @returns {Boolean}
+ */
+export function isHeadingColumnCell( tableUtils, tableCell ) {
+	const table = tableCell.parent.parent;
+	const headingColumns = parseInt( table.getAttribute( 'headingColumns' ) || 0 );
+	const { column } = tableUtils.getCellLocation( tableCell );
+
+	return !!headingColumns && column < headingColumns;
+}

package/src/assets/qms-ckeditor-plugin/src/plugins/table/utils/selection.js

@@ -0,0 +1,276 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/utils/selection
+ */
+
+import TableWalker from '../tablewalker';
+
+/**
+ * Returns all model table cells that are fully selected (from the outside)
+ * within the provided model selection's ranges.
+ *
+ * To obtain the cells selected from the inside, use
+ * {@link module:table/utils/selection~getTableCellsContainingSelection}.
+ *
+ * @param {module:engine/model/selection~Selection} selection
+ * @returns {Array.<module:engine/model/element~Element>}
+ */
+export function getSelectedTableCells( selection ) {
+	const cells = [];
+
+	for ( const range of sortRanges( selection.getRanges() ) ) {
+		const element = range.getContainedElement();
+
+		if ( element && element.is( 'element', 'tableCell' ) ) {
+			cells.push( element );
+		}
+	}
+
+	return cells;
+}
+
+/**
+ * Returns all model table cells that the provided model selection's ranges
+ * {@link module:engine/model/range~Range#start} inside.
+ *
+ * To obtain the cells selected from the outside, use
+ * {@link module:table/utils/selection~getSelectedTableCells}.
+ *
+ * @param {module:engine/model/selection~Selection} selection
+ * @returns {Array.<module:engine/model/element~Element>}
+ */
+export function getTableCellsContainingSelection( selection ) {
+	const cells = [];
+
+	for ( const range of selection.getRanges() ) {
+		const cellWithSelection = range.start.findAncestor( 'tableCell' );
+
+		if ( cellWithSelection ) {
+			cells.push( cellWithSelection );
+		}
+	}
+
+	return cells;
+}
+
+/**
+ * Returns all model table cells that are either completely selected
+ * by selection ranges or host selection range
+ * {@link module:engine/model/range~Range#start start positions} inside them.
+ *
+ * Combines {@link module:table/utils/selection~getTableCellsContainingSelection} and
+ * {@link module:table/utils/selection~getSelectedTableCells}.
+ *
+ * @param {module:engine/model/selection~Selection} selection
+ * @returns {Array.<module:engine/model/element~Element>}
+ */
+export function getSelectionAffectedTableCells( selection ) {
+	const selectedCells = getSelectedTableCells( selection );
+
+	if ( selectedCells.length ) {
+		return selectedCells;
+	}
+
+	return getTableCellsContainingSelection( selection );
+}
+
+/**
+ * Returns an object with the `first` and `last` row index contained in the given `tableCells`.
+ *
+ *		const selectedTableCells = getSelectedTableCells( editor.model.document.selection );
+ *
+ *		const { first, last } = getRowIndexes( selectedTableCells );
+ *
+ *		console.log( `Selected rows: ${ first } to ${ last }` );
+ *
+ * @param {Array.<module:engine/model/element~Element>} tableCells
+ * @returns {Object} Returns an object with the `first` and `last` table row indexes.
+ */
+export function getRowIndexes( tableCells ) {
+	const indexes = tableCells.map( cell => cell.parent.index );
+
+	return getFirstLastIndexesObject( indexes );
+}
+
+/**
+ * Returns an object with the `first` and `last` column index contained in the given `tableCells`.
+ *
+ *		const selectedTableCells = getSelectedTableCells( editor.model.document.selection );
+ *
+ *		const { first, last } = getColumnIndexes( selectedTableCells );
+ *
+ *		console.log( `Selected columns: ${ first } to ${ last }` );
+ *
+ * @param {Array.<module:engine/model/element~Element>} tableCells
+ * @returns {Object} Returns an object with the `first` and `last` table column indexes.
+ */
+export function getColumnIndexes( tableCells ) {
+	const table = tableCells[ 0 ].findAncestor( 'table' );
+	const tableMap = [ ...new TableWalker( table ) ];
+
+	const indexes = tableMap
+		.filter( entry => tableCells.includes( entry.cell ) )
+		.map( entry => entry.column );
+
+	return getFirstLastIndexesObject( indexes );
+}
+
+/**
+ * Checks if the selection contains cells that do not exceed rectangular selection.
+ *
+ * In a table below:
+ *
+ *		┌───┬───┬───┬───┐
+ *		│ a │ b │ c │ d │
+ *		├───┴───┼───┤   │
+ *		│ e     │ f │   │
+ *		│       ├───┼───┤
+ *		│       │ g │ h │
+ *		└───────┴───┴───┘
+ *
+ * Valid selections are these which create a solid rectangle (without gaps), such as:
+ *   - a, b (two horizontal cells)
+ *   - c, f (two vertical cells)
+ *   - a, b, e (cell "e" spans over four cells)
+ *   - c, d, f (cell d spans over a cell in the row below)
+ *
+ * While an invalid selection would be:
+ *   - a, c (the unselected cell "b" creates a gap)
+ *   - f, g, h (cell "d" spans over a cell from the row of "f" cell - thus creates a gap)
+ *
+ * @param {Array.<module:engine/model/element~Element>} selectedTableCells
+ * @param {module:table/tableutils~TableUtils} tableUtils
+ * @returns {Boolean}
+ */
+export function isSelectionRectangular( selectedTableCells, tableUtils ) {
+	if ( selectedTableCells.length < 2 || !areCellInTheSameTableSection( selectedTableCells ) ) {
+		return false;
+	}
+
+	// A valid selection is a fully occupied rectangle composed of table cells.
+	// Below we will calculate the area of a selected table cells and the area of valid selection.
+	// The area of a valid selection is defined by top-left and bottom-right cells.
+	const rows = new Set();
+	const columns = new Set();
+
+	let areaOfSelectedCells = 0;
+
+	for ( const tableCell of selectedTableCells ) {
+		const { row, column } = tableUtils.getCellLocation( tableCell );
+		const rowspan = parseInt( tableCell.getAttribute( 'rowspan' ) || 1 );
+		const colspan = parseInt( tableCell.getAttribute( 'colspan' ) || 1 );
+
+		// Record row & column indexes of current cell.
+		rows.add( row );
+		columns.add( column );
+
+		// For cells that spans over multiple rows add also the last row that this cell spans over.
+		if ( rowspan > 1 ) {
+			rows.add( row + rowspan - 1 );
+		}
+
+		// For cells that spans over multiple columns add also the last column that this cell spans over.
+		if ( colspan > 1 ) {
+			columns.add( column + colspan - 1 );
+		}
+
+		areaOfSelectedCells += ( rowspan * colspan );
+	}
+
+	// We can only merge table cells that are in adjacent rows...
+	const areaOfValidSelection = getBiggestRectangleArea( rows, columns );
+
+	return areaOfValidSelection == areaOfSelectedCells;
+}
+
+/**
+ * Returns array of sorted ranges.
+ *
+ * @param {Iterable.<module:engine/model/range~Range>} ranges
+ * @return {Array.<module:engine/model/range~Range>}
+ */
+export function sortRanges( ranges ) {
+	return Array.from( ranges ).sort( compareRangeOrder );
+}
+
+// Helper method to get an object with `first` and `last` indexes from an unsorted array of indexes.
+function getFirstLastIndexesObject( indexes ) {
+	const allIndexesSorted = indexes.sort( ( indexA, indexB ) => indexA - indexB );
+
+	const first = allIndexesSorted[ 0 ];
+	const last = allIndexesSorted[ allIndexesSorted.length - 1 ];
+
+	return { first, last };
+}
+
+function compareRangeOrder( rangeA, rangeB ) {
+	// Since table cell ranges are disjoint, it's enough to check their start positions.
+	const posA = rangeA.start;
+	const posB = rangeB.start;
+
+	// Checking for equal position (returning 0) is not needed because this would be either:
+	// a. Intersecting range (not allowed by model)
+	// b. Collapsed range on the same position (allowed by model but should not happen).
+	return posA.isBefore( posB ) ? -1 : 1;
+}
+
+// Calculates the area of a maximum rectangle that can span over the provided row & column indexes.
+//
+// @param {Array.<Number>} rows
+// @param {Array.<Number>} columns
+// @returns {Number}
+function getBiggestRectangleArea( rows, columns ) {
+	const rowsIndexes = Array.from( rows.values() );
+	const columnIndexes = Array.from( columns.values() );
+
+	const lastRow = Math.max( ...rowsIndexes );
+	const firstRow = Math.min( ...rowsIndexes );
+	const lastColumn = Math.max( ...columnIndexes );
+	const firstColumn = Math.min( ...columnIndexes );
+
+	return ( lastRow - firstRow + 1 ) * ( lastColumn - firstColumn + 1 );
+}
+
+// Checks if the selection does not mix a header (column or row) with other cells.
+//
+// For instance, in the table below valid selections consist of cells with the same letter only.
+// So, a-a (same heading row and column) or d-d (body cells) are valid while c-d or a-b are not.
+//
+//		 header columns
+//		  ↓   ↓
+//		┌───┬───┬───┬───┐
+//		│ a │ a │ b │ b │  ← header row
+//		├───┼───┼───┼───┤
+//		│ c │ c │ d │ d │
+//		├───┼───┼───┼───┤
+//		│ c │ c │ d │ d │
+//		└───┴───┴───┴───┘
+function areCellInTheSameTableSection( tableCells ) {
+	const table = tableCells[ 0 ].findAncestor( 'table' );
+
+	const rowIndexes = getRowIndexes( tableCells );
+	const headingRows = parseInt( table.getAttribute( 'headingRows' ) || 0 );
+
+	// Calculating row indexes is a bit cheaper so if this check fails we can't merge.
+	if ( !areIndexesInSameSection( rowIndexes, headingRows ) ) {
+		return false;
+	}
+
+	const headingColumns = parseInt( table.getAttribute( 'headingColumns' ) || 0 );
+	const columnIndexes = getColumnIndexes( tableCells );
+
+	// Similarly cells must be in same column section.
+	return areIndexesInSameSection( columnIndexes, headingColumns );
+}
+
+// Unified check if table rows/columns indexes are in the same heading/body section.
+function areIndexesInSameSection( { first, last }, headingSectionSize ) {
+	const firstCellIsInHeading = first < headingSectionSize;
+	const lastCellIsInHeading = last < headingSectionSize;
+
+	return firstCellIsInHeading === lastCellIsInHeading;
+}