Skip to content

Commit

Permalink
The first commit which introduces the prototype how to non-consecutive
Browse files Browse the repository at this point in the history 
cell selection can work (#4708).

To make this feature work necessary changes were introduced to the selection functionality. The logic responsible for selection was moved into separate files (without breaking change). Now, every file has its own responsibility: for keeping selection coordinates and for keeping properties necessary for visualizing the borders.
  • Loading branch information
@budnix
budnix committed Feb 12, 2018
1 parent 505846f commit 4ea13f9
Show file tree
Hide file tree
Showing 36 changed files with 1,284 additions and 683 deletions.
2 changes: 1 addition & 1 deletion .config/development.js
View file
Expand Up @@ -22,7 +22,7 @@ module.exports.create = function create(envArgs) {
configBase.forEach(function(c) {
c.output.filename = PACKAGE_FILENAME + '.js';

c.devtool = 'cheap-module-source-map';
c.devtool = 'source-map';
// Exclude all external dependencies from 'base' bundle (handsontable.js and handsontable.css files)
c.externals = {
numbro: {
Expand Down
80 changes: 33 additions & 47 deletions src/3rdparty/walkontable/src/border.js
View file
Expand Up @@ -255,8 +255,8 @@ class Border {
}

isPartRange(row, col) {
if (this.wot.selections.area.cellRange) {
if (row != this.wot.selections.area.cellRange.to.row || col != this.wot.selections.area.cellRange.to.col) {
if (this.wot.selections.getArea().cellRange) {
if (row != this.wot.selections.getArea().cellRange.to.row || col != this.wot.selections.getArea().cellRange.to.col) {
return true;
}
}
Expand Down Expand Up @@ -316,29 +316,15 @@ class Border {
if (this.disabled) {
return;
}
var isMultiple,
fromTD,
toTD,
fromOffset,
toOffset,
containerOffset,
top,
minTop,
left,
minLeft,
height,
width,
fromRow,
fromColumn,
toRow,
toColumn,
trimmingContainer,
cornerOverlappingContainer,
ilen;

ilen = this.wot.wtTable.getRenderedRowsCount();

for (let i = 0; i < ilen; i++) {

let fromRow;
let toRow;
let fromColumn;
let toColumn;

const rowsCount = this.wot.wtTable.getRenderedRowsCount();

for (let i = 0; i < rowsCount; i++) {
let s = this.wot.wtTable.rowFilter.renderedToSource(i);

if (s >= corners[0] && s <= corners[2]) {
Expand All @@ -347,7 +333,7 @@ class Border {
}
}

for (let i = ilen - 1; i >= 0; i--) {
for (let i = rowsCount - 1; i >= 0; i--) {
let s = this.wot.wtTable.rowFilter.renderedToSource(i);

if (s >= corners[0] && s <= corners[2]) {
Expand All @@ -356,9 +342,9 @@ class Border {
}
}

ilen = this.wot.wtTable.getRenderedColumnsCount();
const columnsCount = this.wot.wtTable.getRenderedColumnsCount();

for (let i = 0; i < ilen; i++) {
for (let i = 0; i < columnsCount; i++) {
let s = this.wot.wtTable.columnFilter.renderedToSource(i);

if (s >= corners[1] && s <= corners[3]) {
Expand All @@ -367,7 +353,7 @@ class Border {
}
}

for (let i = ilen - 1; i >= 0; i--) {
for (let i = columnsCount - 1; i >= 0; i--) {
let s = this.wot.wtTable.columnFilter.renderedToSource(i);

if (s >= corners[1] && s <= corners[3]) {
Expand All @@ -380,20 +366,20 @@ class Border {

return;
}
isMultiple = (fromRow !== toRow || fromColumn !== toColumn);
fromTD = this.wot.wtTable.getCell(new CellCoords(fromRow, fromColumn));
toTD = isMultiple ? this.wot.wtTable.getCell(new CellCoords(toRow, toColumn)) : fromTD;
fromOffset = offset(fromTD);
toOffset = isMultiple ? offset(toTD) : fromOffset;
containerOffset = offset(this.wot.wtTable.TABLE);

minTop = fromOffset.top;
height = toOffset.top + outerHeight(toTD) - minTop;
minLeft = fromOffset.left;
width = toOffset.left + outerWidth(toTD) - minLeft;

top = minTop - containerOffset.top - 1;
left = minLeft - containerOffset.left - 1;
const isMultiple = (fromRow !== toRow || fromColumn !== toColumn);
const fromTD = this.wot.wtTable.getCell(new CellCoords(fromRow, fromColumn));
const toTD = isMultiple ? this.wot.wtTable.getCell(new CellCoords(toRow, toColumn)) : fromTD;
const fromOffset = offset(fromTD);
const toOffset = isMultiple ? offset(toTD) : fromOffset;
const containerOffset = offset(this.wot.wtTable.TABLE);

const minTop = fromOffset.top;
const minLeft = fromOffset.left;
let height = toOffset.top + outerHeight(toTD) - minTop;
let width = toOffset.left + outerWidth(toTD) - minLeft;

let top = minTop - containerOffset.top - 1;
let left = minLeft - containerOffset.left - 1;
let style = getComputedStyle(fromTD);

if (parseInt(style.borderTopWidth, 10) > 0) {
Expand All @@ -415,7 +401,7 @@ class Border {
this.leftStyle.height = `${height}px`;
this.leftStyle.display = 'block';

let delta = Math.floor(this.settings.border.width / 2);
const delta = Math.floor(this.settings.border.width / 2);

this.bottomStyle.top = `${top + height - delta}px`;
this.bottomStyle.left = `${left}px`;
Expand All @@ -438,10 +424,10 @@ class Border {
// Hide the fill handle, so the possible further adjustments won't force unneeded scrollbars.
this.cornerStyle.display = 'none';

trimmingContainer = getTrimmingContainer(this.wot.wtTable.TABLE);
const trimmingContainer = getTrimmingContainer(this.wot.wtTable.TABLE);

if (toColumn === this.wot.getSetting('totalColumns') - 1) {
cornerOverlappingContainer = toTD.offsetLeft + outerWidth(toTD) + (parseInt(this.cornerDefaultStyle.width, 10) / 2) >= innerWidth(trimmingContainer);
const cornerOverlappingContainer = toTD.offsetLeft + outerWidth(toTD) + (parseInt(this.cornerDefaultStyle.width, 10) / 2) >= innerWidth(trimmingContainer);

if (cornerOverlappingContainer) {
this.cornerStyle.left = `${Math.floor(left + width - 3 - (parseInt(this.cornerDefaultStyle.width, 10) / 2))}px`;
Expand All @@ -450,7 +436,7 @@ class Border {
}

if (toRow === this.wot.getSetting('totalRows') - 1) {
cornerOverlappingContainer = toTD.offsetTop + outerHeight(toTD) + (parseInt(this.cornerDefaultStyle.height, 10) / 2) >= innerHeight(trimmingContainer);
const cornerOverlappingContainer = toTD.offsetTop + outerHeight(toTD) + (parseInt(this.cornerDefaultStyle.height, 10) / 2) >= innerHeight(trimmingContainer);

if (cornerOverlappingContainer) {
this.cornerStyle.top = `${Math.floor(top + height - 3 - (parseInt(this.cornerDefaultStyle.height, 10) / 2))}px`;
Expand Down
12 changes: 12 additions & 0 deletions src/3rdparty/walkontable/src/cell/coords.js
View file
Expand Up @@ -92,6 +92,18 @@ class CellCoords {
isNorthEastOf(testedCoords) {
return this.row <= testedCoords.row && this.col >= testedCoords.col;
}

/**
* Convert CellCoords to literla object.
*
* @return {Object} Returns a literal object with `row` and `col` properties.
*/
toObject() {
return {
row: this.row,
col: this.col,
};
}
}

export default CellCoords;
57 changes: 48 additions & 9 deletions src/3rdparty/walkontable/src/cell/range.js
View file
Expand Up @@ -15,8 +15,41 @@ class CellRange {
*/
constructor(highlight, from, to) {
this.highlight = highlight;
this.from = from;
this.to = to;
this.from = from === void 0 ? highlight : from;
this.to = to === void 0 ? highlight : to;
}

/**
* Set the new coordinates for highlighting selection.
*
* @param {CellCoords} coords Coordinates to use.
*/
setHighlight(coords) {
this.highlight = coords;

return this;
}

/**
* Set the new coordinates where selection starts from.
*
* @param {CellCoords} coords Coordinates to use.
*/
setFrom(coords) {
this.from = coords;

return this;
}

/**
* Set new coordinates where selection ends from.
*
* @param {CellCoords} coords Coordinates to use.
*/
setTo(coords) {
this.to = coords;

return this;
}

/**
Expand Down Expand Up @@ -63,12 +96,11 @@ class CellRange {
* @returns {Boolean}
*/
includes(cellCoords) {
let {row, col} = cellCoords;
let topLeft = this.getTopLeftCorner();
let bottomRight = this.getBottomRightCorner();
const {row, col} = cellCoords;
const topLeft = this.getTopLeftCorner();
const bottomRight = this.getBottomRightCorner();

return topLeft.row <= row && bottomRight.row >= row &&
topLeft.col <= col && bottomRight.col >= col;
return topLeft.row <= row && bottomRight.row >= row && topLeft.col <= col && bottomRight.col >= col;
}

/**
Expand Down Expand Up @@ -128,8 +160,8 @@ class CellRange {
* @returns {Boolean}
*/
expand(cellCoords) {
let topLeft = this.getTopLeftCorner();
let bottomRight = this.getBottomRightCorner();
const topLeft = this.getTopLeftCorner();
const bottomRight = this.getBottomRightCorner();

if (cellCoords.row < topLeft.row || cellCoords.col < topLeft.col ||
cellCoords.row > bottomRight.row || cellCoords.col > bottomRight.col) {
Expand Down Expand Up @@ -429,6 +461,13 @@ class CellRange {
}
}
}

toObject() {
return {
from: this.from.toObject(),
to: this.to.toObject(),
};
}
}

export default CellRange;
6 changes: 3 additions & 3 deletions src/3rdparty/walkontable/src/event.js
View file
Expand Up @@ -218,12 +218,12 @@ Event.prototype.parentCell = function(elem) {
cell.TD = TD;

} else if (hasClass(elem, 'wtBorder') && hasClass(elem, 'current')) {
cell.coords = this.instance.selections.current.cellRange.highlight; // selections.current is current selected cell
cell.coords = this.instance.selections.getCell().cellRange.highlight;
cell.TD = this.instance.wtTable.getCell(cell.coords);

} else if (hasClass(elem, 'wtBorder') && hasClass(elem, 'area')) {
if (this.instance.selections.area.cellRange) {
cell.coords = this.instance.selections.area.cellRange.to; // selections.area is area selected cells
if (this.instance.selections.getArea().cellRange) {
cell.coords = this.instance.selections.getArea().cellRange.to;
cell.TD = this.instance.wtTable.getCell(cell.coords);
}
}
Expand Down
19 changes: 11 additions & 8 deletions src/3rdparty/walkontable/src/overlay/top.js
View file
Expand Up @@ -10,6 +10,7 @@ import {
setOverlayPosition,
resetCssTransform
} from './../../../../helpers/dom/element';
import {arrayEach} from './../../../../helpers/array';
import Overlay from './_base';

/**
Expand Down Expand Up @@ -281,12 +282,10 @@ class TopOverlay extends Overlay {
redrawSelectionBorders(selection) {
if (selection && selection.cellRange) {
const border = selection.getBorder(this.wot);
const corners = selection.getCorners();

if (border) {
const corners = selection.getCorners();
border.disappear();
border.appear(corners);
}
border.disappear();
border.appear(corners);
}
}

Expand All @@ -296,9 +295,13 @@ class TopOverlay extends Overlay {
redrawAllSelectionsBorders() {
const selections = this.wot.selections;

this.redrawSelectionBorders(selections.current);
this.redrawSelectionBorders(selections.area);
this.redrawSelectionBorders(selections.fill);
this.redrawSelectionBorders(selections.getCell());

arrayEach(selections.getAreas(), (area) => {
this.redrawSelectionBorders(area);
});
this.redrawSelectionBorders(selections.getFill());

this.wot.wtTable.wot.wtOverlays.leftOverlay.refresh();
}

Expand Down
27 changes: 12 additions & 15 deletions src/3rdparty/walkontable/src/selection.js
View file
Expand Up @@ -25,12 +25,11 @@ class Selection {
* @returns {Border}
*/
getBorder(wotInstance) {
if (this.instanceBorders[wotInstance.guid]) {
return this.instanceBorders[wotInstance.guid];
if (!this.instanceBorders[wotInstance.guid]) {
this.instanceBorders[wotInstance.guid] = new Border(wotInstance, this.settings);
}

// where is this returned?
this.instanceBorders[wotInstance.guid] = new Border(wotInstance, this.settings);
return this.instanceBorders[wotInstance.guid];
}

/**
Expand All @@ -54,6 +53,8 @@ class Selection {
} else {
this.cellRange.expand(coords);
}

return this;
}

/**
Expand Down Expand Up @@ -86,6 +87,8 @@ class Selection {
*/
clear() {
this.cellRange = null;

return this;
}

/**
Expand Down Expand Up @@ -119,6 +122,8 @@ class Selection {
if (typeof TD === 'object') {
addClass(TD, className);
}

return this;
}

/**
Expand All @@ -127,11 +132,7 @@ class Selection {
draw(wotInstance) {
if (this.isEmpty()) {
if (this.settings.border) {
let border = this.getBorder(wotInstance);

if (border) {
border.disappear();
}
this.getBorder(wotInstance).disappear();
}

return;
Expand Down Expand Up @@ -210,12 +211,8 @@ class Selection {
wotInstance.getSetting('onBeforeDrawBorders', corners, this.settings.className);

if (this.settings.border) {
let border = this.getBorder(wotInstance);

if (border) {
// warning! border.appear modifies corners!
border.appear(corners);
}
// warning! border.appear modifies corners!
this.getBorder(wotInstance).appear(corners);
}
}
}
Expand Down

0 comments on commit 4ea13f9

Please sign in to comment.