@omegagrid/grid 0.2.6 → 0.2.8

package/dist/ui/selector.d.ts

@@ -1,5 +1,5 @@
 import { DiagonalDirection, Direction, DirectionalPosition } from "@omegagrid/core";
-import { SelectionModel, CellRange } from "@omegagrid/grid-core";
+import { CellRange } from "@omegagrid/grid-core";
 import { LitElement } from 'lit';
 import { Grid } from './grid';
 export declare class SelectorEvent extends Event {
@@ -20,12 +20,7 @@ export declare class Selector extends LitElement {
     private activeCell?;
     private autofillSelector;
     private moveSelector;
-    private movingBaseCell;
-    private _grid;
-    get grid(): Grid;
-    private _selection;
-    get selection(): SelectionModel;
-    get moving(): boolean;
+    private baseCell;
     private _animationTimer;
     private _autofillDirection;
     get autofillDirection(): Direction;
@@ -38,6 +33,9 @@ export declare class Selector extends LitElement {
     private _resizing;
     private _resizingDirection;
     get isResizing(): boolean;
+    private _selecting;
+    get isSelecting(): boolean;
+    get isSelectorOperationActive(): boolean;
     get table(): import("./table").Table;
     index: number;
     autofill: boolean;
@@ -47,6 +45,9 @@ export declare class Selector extends LitElement {
     color: string;
     borderWidth: number;
     animated: boolean;
+    selection: CellRange;
+    activeCellRange: CellRange;
+    grid: Grid;
     handleElm: HTMLDivElement;
     svgAnimation: SVGElement;
     moveHandleLeftElm: HTMLDivElement;
@@ -59,18 +60,29 @@ export declare class Selector extends LitElement {
     hide: () => void;
     show: () => void;
     highlightAutofillRange(): void;
-    _onHandleMouseMove: (e: MouseEvent) => void;
     createAutofillSelector(): HTMLDivElement;
-    _onHandleMouseDown: () => void;
+    stopAutofilling(dispatchEvent?: boolean): void;
+    updateAutofilling(c: number, r: number): void;
     getMoveSelector(): Selector;
-    _onMoveHandleMouseMove: (e: MouseEvent) => void;
-    _onMoveHandleMouseDown: (e: MouseEvent, _side: DirectionalPosition) => void;
-    startMoving(moveBaseCell: CellRange): void;
-    stopMoving(): void;
-    _onResizeHandleMouseMove: (e: MouseEvent) => void;
-    stopResizing(): void;
-    _onResizeHandleMouseDown: (e: MouseEvent, direction: DiagonalDirection) => void;
-    _onHandleMouseUp: (e: MouseEvent) => void;
+    startMoving(baseCell: CellRange): void;
+    updateMoving(c: number, r: number): void;
+    stopMoving(dispatchEvent?: boolean): void;
+    startResizing(direction: DiagonalDirection): void;
+    updateResizing(c: number, r: number): void;
+    stopResizing(dispatchEvent?: boolean): void;
+    startSelecting(baseCell: CellRange): void;
+    select(selection: CellRange, dispatchEvent?: boolean): void;
+    stopSelecting(_dispatchEvent?: boolean): void;
+    /**
+     * Updates selector state after table moving events
+     * @param cell
+     */
+    updateMovingOperations(c: number, r: number): void;
+    stopSelectorOperations(dispatchEvent?: boolean): void;
+    _onMoveHandleMouseDown: (e: PointerEvent, _side: DirectionalPosition) => void;
+    _onResizeHandleMouseDown: (e: PointerEvent, direction: DiagonalDirection) => void;
+    _onHandleMouseUp: (e: PointerEvent) => void;
+    _onHandleMouseDown: () => void;
     render: () => import("lit-html").TemplateResult<1>;
     startAnimation(): void;
     stopAnimation(): void;
@@ -78,6 +90,5 @@ export declare class Selector extends LitElement {
     willUpdate(): void;
     updated(): void;
     updatePosition(): void;
-    select(selection: SelectionModel, grid: Grid, dispatchEvent?: boolean): void;
 }
 //# sourceMappingURL=selector.d.ts.map

package/dist/ui/selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selector.d.ts","sourceRoot":"","sources":["../../src/ui/selector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,mBAAmB,EAAO,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,qBAAa,aAAc,SAAQ,KAAK;IAEvC,QAAQ,EAAE,QAAQ,CAAC;gBAEP,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC;CAIvD;AAED,qBAAa,iBAAkB,SAAQ,aAAa;IACnD,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,EAAE,SAAS,CAAA;gBACN,IAAI,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC;CAI7C;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,MAAM,CAAC,MAAM,4BAAW;IAExB,OAAO,CAAC,WAAW,CAAC,CAAY;IAChC,OAAO,CAAC,YAAY,CAAC,CAAY;IACjC,OAAO,CAAC,cAAc,CAAC,CAAY;IACnC,OAAO,CAAC,eAAe,CAAC,CAAY;IACpC,OAAO,CAAC,UAAU,CAAC,CAAY;IAC/B,OAAO,CAAC,gBAAgB,CAAiB;IACzC,OAAO,CAAC,YAAY,CAAW;IAC/B,OAAO,CAAC,cAAc,CAAY;IAElC,OAAO,CAAC,KAAK,CAAO;IACpB,IAAI,IAAI,SAAwB;IAEhC,OAAO,CAAC,UAAU,CAAiB;IACnC,IAAI,SAAS,mBAA6B;IAC1C,IAAI,MAAM,YAA0B;IAEpC,OAAO,CAAC,eAAe,CAAgB;IAEvC,OAAO,CAAC,kBAAkB,CAAY;IACtC,IAAI,iBAAiB,cAAqC;IAE1D,OAAO,CAAC,cAAc,CAAY;IAClC,IAAI,aAAa,cAAiC;IAElD,OAAO,CAAC,YAAY,CAAS;IAC7B,IAAI,aAAa,YAA+B;IAEhD,OAAO,CAAC,OAAO,CAAS;IACxB,IAAI,QAAQ,YAA0B;IAEtC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,kBAAkB,CAAoB;IAC9C,IAAI,UAAU,YAA4B;IAE1C,IAAI,KAAK,4BAAgD;IAEzD,KAAK,EAAE,MAAM,CAAC;IAGd,QAAQ,EAAE,OAAO,CAAC;IAGlB,OAAO,EAAE,OAAO,CAAC;IAGjB,SAAS,EAAE,OAAO,CAAC;IAGnB,WAAW,UAAS;IAGpB,KAAK,EAAE,MAAM,CAAC;IAGd,WAAW,EAAE,MAAM,CAAmC;IAGtD,QAAQ,UAAS;IAGjB,SAAS,EAAE,cAAc,CAAC;IAG1B,YAAY,EAAE,UAAU,CAAC;IAGzB,iBAAiB,EAAE,cAAc,CAAC;IAGlC,gBAAgB,EAAE,cAAc,CAAC;IAGjC,kBAAkB,EAAE,cAAc,CAAC;IAGnC,mBAAmB,EAAE,cAAc,CAAC;IAGpC,cAAc,EAAE,cAAc,CAAC;IAE/B,OAAO,CAAC,UAAU,CAAS;IAC3B,IAAI,SAAS,YAA6B;IAE1C,IAAI,aAIF;IACF,IAAI,aAIH;IAED,sBAAsB;IAqCtB,kBAAkB,MAAO,UAAU,UAiClC;IAED,sBAAsB;IAStB,kBAAkB,aAajB;IAED,eAAe;IAWf,sBAAsB,MAAO,UAAU,UAqBtC;IAED,sBAAsB,MAAO,UAAU,SAAS,mBAAmB,UAiBjE;IAEF,WAAW,CAAC,YAAY,EAAE,SAAS;IAOnC,UAAU;IAgBV,wBAAwB,MAAO,UAAU,UA0CxC;IAED,YAAY;IAOZ,wBAAwB,MAAO,UAAU,aAAa,iBAAiB,UAYtE;IAED,gBAAgB,MAAO,UAAU,UAIhC;IAED,MAAM,6CAsCJ;IAEF,cAAc;IAUd,aAAa;IAKb,oBAAoB;IAIpB,UAAU;IAIV,OAAO;IAMP,cAAc;IAgFd,MAAM,CAAC,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,UAAO;CAalE"}
+{"version":3,"file":"selector.d.ts","sourceRoot":"","sources":["../../src/ui/selector.ts"],"names":[],"mappings":"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"}

package/dist/ui/selector.js

@@ -38,6 +38,7 @@ let Selector = class Selector extends lit_1.LitElement {
         this._autofilling = false;
         this._moving = false;
         this._resizing = false;
+        this._selecting = false;
         this.subselector = false;
         this.borderWidth = constants_1.default.SELECTOR_BORDER_WIDTH;
         this.animated = false;
@@ -45,6 +46,7 @@ let Selector = class Selector extends lit_1.LitElement {
         this.hide = () => {
             this._isVisible = false;
             core_1.dom.hideElement(this);
+            this.stopSelectorOperations();
             this.stopAnimation();
         };
         this.show = () => {
@@ -52,71 +54,6 @@ let Selector = class Selector extends lit_1.LitElement {
             core_1.dom.showElement(this);
             this.startAnimation();
         };
-        this._onHandleMouseMove = (e) => {
-            for (const elm of e.composedPath()) {
-                if (elm.tagName == 'TD') {
-                    const td = elm;
-                    const { c1, r1, c2, r2 } = this.selection.range;
-                    const { r, c } = td;
-                    this._autofillRange = null;
-                    // down autofill
-                    if (r > r2 && c - c2 <= r - r2) {
-                        this._autofillDirection = 'down';
-                        this._autofillRange = new grid_core_1.CellRange(c1, r2 + 1, c2, r);
-                    }
-                    // up autofill
-                    else if (r < r1 && c1 - c <= r1 - r) {
-                        this._autofillDirection = 'up';
-                        this._autofillRange = new grid_core_1.CellRange(c1, r, c2, r1 - 1);
-                    }
-                    // right autofill
-                    else if (c > c2 && c - c2 > r - r2) {
-                        this._autofillDirection = 'right';
-                        this._autofillRange = new grid_core_1.CellRange(c2 + 1, r1, c, r2);
-                    }
-                    // left autofill
-                    else if (c < c1 && c1 - c > r1 - r) {
-                        this._autofillDirection = 'left';
-                        this._autofillRange = new grid_core_1.CellRange(c, r1, c1 - 1, r2);
-                    }
-                    if (this._autofillRange)
-                        this.highlightAutofillRange();
-                    return;
-                }
-            }
-        };
-        this._onHandleMouseDown = () => {
-            var _a;
-            this._autofilling = true;
-            this.autofillSelector = (_a = this.autofillSelector) !== null && _a !== void 0 ? _a : this.createAutofillSelector();
-            core_1.dom.hideElement(this.autofillSelector);
-            core_1.dom.appendElement(this.grid.shadowRoot, this.autofillSelector);
-            this.table.addEventListener('mousemove', this._onHandleMouseMove);
-            this.table.addEventListener('mouseup', () => {
-                this._autofilling = false;
-                this.dispatchEvent(new SelectorEvent('autofill', { selector: this }));
-                //this.autofillRange = null;
-                this.autofillSelector.remove();
-                this.table.removeEventListener('mousemove', this._onHandleMouseMove);
-            }, { once: true });
-        };
-        // TODO - another mousemove event handler in grid.events.ts, should be passible to move it there
-        this._onMoveHandleMouseMove = (e) => {
-            // primary button not pressed
-            if ((e.buttons & 1) == 0) {
-                this.stopMoving();
-                return;
-            }
-            const td = e.composedPath().find((elm) => elm.tagName == 'TD');
-            if (td) {
-                const c = this.selection.range.isRow ? 0 : td.c - this.movingBaseCell.c1;
-                const r = this.selection.range.isColumn ? 0 : td.r - this.movingBaseCell.r1;
-                const moveSelector = this.getMoveSelector();
-                moveSelector.selection.setCoords(this.selection.range.c1 + c, this.selection.range.r1 + r, this.selection.range.c2 + c, this.selection.range.r2 + r);
-                moveSelector.select(moveSelector.selection, this.grid);
-                core_1.dom.showElement(this.moveSelector);
-            }
-        };
         this._onMoveHandleMouseDown = (e, _side) => {
             const x = e.offsetX + e.target.offsetLeft + this.offsetLeft - this.table.totalHeaderWidth;
             const y = e.offsetY + e.target.offsetTop + this.offsetTop - this.table.thead.clientHeight;
@@ -135,61 +72,9 @@ let Selector = class Selector extends lit_1.LitElement {
                 this.startMoving(new grid_core_1.CellRange(c, r));
             }
         };
-        this._onResizeHandleMouseMove = (e) => {
-            if (e.buttons != 1)
-                this.stopResizing();
-            for (const elm of e.composedPath()) {
-                if (elm.tagName == 'TD') {
-                    const td = elm;
-                    const { c1, r1, c2, r2 } = this.selection.range;
-                    const { r, c } = td;
-                    const range = this.selection.range.clone();
-                    switch (this._resizingDirection) {
-                        case 'nw':
-                            if (r <= r2 && c <= c2) {
-                                range.r1 = r;
-                                range.c1 = c;
-                            }
-                            break;
-                        case 'ne':
-                            if (r <= r2 && c >= c1) {
-                                range.r1 = r;
-                                range.c2 = c;
-                            }
-                            break;
-                        case 'sw':
-                            if (r >= r1 && c <= c2) {
-                                range.r2 = r;
-                                range.c1 = c;
-                            }
-                            break;
-                        case 'se':
-                            if (r >= r1 && c >= c1) {
-                                range.r2 = r;
-                                range.c2 = c;
-                            }
-                            break;
-                    }
-                    if (!this.selection.range.equals(range)) {
-                        this.selection.setRange(range);
-                        this.updatePosition();
-                    }
-                    return;
-                }
-            }
-        };
         this._onResizeHandleMouseDown = (e, direction) => {
             e.stopImmediatePropagation();
-            this._resizing = true;
-            this._resizingDirection = direction;
-            this.table.addEventListener('mousemove', this._onResizeHandleMouseMove);
-            const _mouseUp = (e) => {
-                if (e.button != 0)
-                    return;
-                this.stopResizing();
-                this.table.removeEventListener('mouseup', _mouseUp);
-            };
-            this.table.addEventListener('mouseup', _mouseUp);
+            this.startResizing(direction);
         };
         this._onHandleMouseUp = (e) => {
             if (e.button != 0)
@@ -197,38 +82,45 @@ let Selector = class Selector extends lit_1.LitElement {
             this.stopMoving();
             this.stopResizing();
         };
+        this._onHandleMouseDown = () => {
+            var _a;
+            this._autofilling = true;
+            this.autofillSelector = (_a = this.autofillSelector) !== null && _a !== void 0 ? _a : this.createAutofillSelector();
+            core_1.dom.hideElement(this.autofillSelector);
+            core_1.dom.appendElement(this.grid.shadowRoot, this.autofillSelector);
+        };
         this.render = () => (0, lit_1.html) `
 		${this.subselector ? (0, lit_1.html) `<div id="subselector"></div>` : ''}
 		${this.resizable ? (0, lit_1.html) `
 			<div id="handle-nw" class="handle-resize" style="${(0, style_map_js_1.styleMap)({ backgroundColor: this.color })}" 
-				@mousedown="${(e) => this._onResizeHandleMouseDown(e, 'nw')}"
-				@mouseup="${this._onHandleMouseUp}"></div>
+				@pointerdown="${(e) => this._onResizeHandleMouseDown(e, 'nw')}"
+				@pointerup="${this._onHandleMouseUp}"></div>
 			<div id="handle-ne" class="handle-resize" style="${(0, style_map_js_1.styleMap)({ backgroundColor: this.color })}" 
-				@mousedown="${(e) => this._onResizeHandleMouseDown(e, 'ne')}"
-				@mouseup="${this._onHandleMouseUp}"></div>
+				@pointerdown="${(e) => this._onResizeHandleMouseDown(e, 'ne')}"
+				@pointerup="${this._onHandleMouseUp}"></div>
 			<div id="handle-sw" class="handle-resize" style="${(0, style_map_js_1.styleMap)({ backgroundColor: this.color })}" 
-				@mousedown="${(e) => this._onResizeHandleMouseDown(e, 'sw')}"
-				@mouseup="${this._onHandleMouseUp}"></div>
+				@pointerdown="${(e) => this._onResizeHandleMouseDown(e, 'sw')}"
+				@pointerup="${this._onHandleMouseUp}"></div>
 			<div id="handle-se" class="handle-resize" style="${(0, style_map_js_1.styleMap)({ backgroundColor: this.color })}" 
-				@mousedown="${(e) => this._onResizeHandleMouseDown(e, 'se')}"
-				@mouseup="${this._onHandleMouseUp}"></div>
+				@pointerdown="${(e) => this._onResizeHandleMouseDown(e, 'se')}"
+				@pointerup="${this._onHandleMouseUp}"></div>
 		` : (this.autofill ? (0, lit_1.html) `
-			<div id="handle" @mousedown="${this._onHandleMouseDown}"></div>
+			<div id="handle" @pointerdown="${this._onHandleMouseDown}"></div>
 		` : '')}
 		
 		${this.movable ? (0, lit_1.html) `
 			<div id="handle-top" class="handle-move" 
-				@mousedown="${(e) => this._onMoveHandleMouseDown(e, 'top')}"
-				@mouseup="${this._onHandleMouseUp}"></div>
+				@pointerdown="${(e) => this._onMoveHandleMouseDown(e, 'top')}"
+				@pointerup="${this._onHandleMouseUp}"></div>
 			<div id="handle-right" class="handle-move" 
-				@mousedown="${(e) => this._onMoveHandleMouseDown(e, 'right')}"
-				@mouseup="${this._onHandleMouseUp}"></div>
+				@pointerdown="${(e) => this._onMoveHandleMouseDown(e, 'right')}"
+				@pointerup="${this._onHandleMouseUp}"></div>
 			<div id="handle-bottom" class="handle-move" 
-				@mousedown="${(e) => this._onMoveHandleMouseDown(e, 'bottom')}"
-				@mouseup="${this._onHandleMouseUp}"></div>
+				@pointerdown="${(e) => this._onMoveHandleMouseDown(e, 'bottom')}"
+				@pointerup="${this._onHandleMouseUp}"></div>
 			<div id="handle-left" class="handle-move" 
-				@mousedown="${(e) => this._onMoveHandleMouseDown(e, 'left')}"
-				@mouseup="${this._onHandleMouseUp}"></div>
+				@pointerdown="${(e) => this._onMoveHandleMouseDown(e, 'left')}"
+				@pointerup="${this._onHandleMouseUp}"></div>
 		` : ''}
 		${this.animated ? (0, lit_1.html) `
 			<svg id="svgAnimation" xmlns="http://www.w3.org/2000/svg">
@@ -237,16 +129,16 @@ let Selector = class Selector extends lit_1.LitElement {
 		` : ''}
 	`;
     }
-    get grid() { return this._grid; }
-    get selection() { return this._selection; }
-    get moving() { return this._moving; }
     get autofillDirection() { return this._autofillDirection; }
     get autofillRange() { return this._autofillRange; }
     get isAutofilling() { return this._autofilling; }
     get isMoving() { return this._moving; }
     get isResizing() { return this._resizing; }
-    get table() { return this.grid ? this.grid.table : null; }
+    get isSelecting() { return this._selecting; }
+    get isSelectorOperationActive() { return this._resizing || this._moving || this._autofilling || this._selecting; }
+    get table() { var _a; return (_a = this.grid) === null || _a === void 0 ? void 0 : _a.table; }
     get isVisible() { return this._isVisible; }
+    // #region Autofill
     highlightAutofillRange() {
         const tlCell = this.table.getCellByModelIndex(this._autofillRange.c1, this._autofillRange.r1);
         const trCell = this.table.getCellByModelIndex(this._autofillRange.c2, this._autofillRange.r1);
@@ -288,43 +180,164 @@ let Selector = class Selector extends lit_1.LitElement {
         selector.style.pointerEvents = 'none';
         return selector;
     }
+    stopAutofilling(dispatchEvent = true) {
+        if (!this.isAutofilling)
+            return;
+        this._autofilling = false;
+        if (dispatchEvent)
+            this.dispatchEvent(new SelectorEvent('autofill', { selector: this }));
+        //this.autofillRange = null;
+        this.autofillSelector.remove();
+    }
+    updateAutofilling(c, r) {
+        const { c1, r1, c2, r2 } = this.selection;
+        this._autofillRange = null;
+        // down autofill
+        if (r > r2 && c - c2 <= r - r2) {
+            this._autofillDirection = 'down';
+            this._autofillRange = new grid_core_1.CellRange(c1, r2 + 1, c2, r);
+        }
+        // up autofill
+        else if (r < r1 && c1 - c <= r1 - r) {
+            this._autofillDirection = 'up';
+            this._autofillRange = new grid_core_1.CellRange(c1, r, c2, r1 - 1);
+        }
+        // right autofill
+        else if (c > c2 && c - c2 > r - r2) {
+            this._autofillDirection = 'right';
+            this._autofillRange = new grid_core_1.CellRange(c2 + 1, r1, c, r2);
+        }
+        // left autofill
+        else if (c < c1 && c1 - c > r1 - r) {
+            this._autofillDirection = 'left';
+            this._autofillRange = new grid_core_1.CellRange(c, r1, c1 - 1, r2);
+        }
+        if (this._autofillRange)
+            this.highlightAutofillRange();
+    }
+    // #endregion
+    // #region Selector moving
     getMoveSelector() {
         if (!this.moveSelector) {
             this.moveSelector = core_1.dom.createElement('og-selector', this.grid.shadowRoot);
+            this.moveSelector.grid = this.grid;
             this.moveSelector.style.borderStyle = 'dotted';
             this.moveSelector.subselector = false;
-            this.moveSelector._selection = grid_core_1.SelectionModel.fromRange(this.selection.range);
+            this.moveSelector.selection = this.selection.clone();
         }
         return this.moveSelector;
     }
-    startMoving(moveBaseCell) {
-        this.movingBaseCell = moveBaseCell;
+    startMoving(baseCell) {
+        this.baseCell = baseCell;
         this._moving = true;
-        this.table.addEventListener('mousemove', this._onMoveHandleMouseMove);
-        this.table.addEventListener('mouseup', () => this.stopMoving(), { once: true });
     }
-    stopMoving() {
+    updateMoving(c, r) {
+        c = this.selection.isRow ? 0 : c - this.baseCell.c1;
+        r = this.selection.isColumn ? 0 : r - this.baseCell.r1;
+        const moveSelector = this.getMoveSelector();
+        moveSelector.selection.setCoords(this.selection.c1 + c, this.selection.r1 + r, this.selection.c2 + c, this.selection.r2 + r);
+        moveSelector.select(moveSelector.selection);
+        core_1.dom.showElement(this.moveSelector);
+    }
+    stopMoving(dispatchEvent = true) {
         if (!this._moving)
             return;
         this._moving = false;
         core_1.dom.hideElement(this.moveSelector);
-        this.table.removeEventListener('mousemove', this._onMoveHandleMouseMove);
         if (this.moveSelector) {
-            const fromRange = this.selection.range.clone();
-            const toRange = this.moveSelector.selection.range.clone();
+            const fromRange = this.selection.clone();
+            const toRange = this.moveSelector.selection.clone();
             if (!fromRange.equals(toRange)) {
-                this.selection.setRange(toRange);
-                this.grid.selecting.updateSelector(true);
-                this.dispatchEvent(new SelectorMoveEvent({ fromRange, toRange, selector: this }));
+                this.selection = toRange;
+                if (dispatchEvent)
+                    this.dispatchEvent(new SelectorMoveEvent({ fromRange, toRange, selector: this }));
             }
         }
     }
-    stopResizing() {
+    // #endregion
+    // #region Selector resizing
+    startResizing(direction) {
+        this._resizing = true;
+        this._resizingDirection = direction;
+    }
+    updateResizing(c, r) {
+        const { c1, r1, c2, r2 } = this.selection;
+        const range = this.selection.clone();
+        switch (this._resizingDirection) {
+            case 'nw':
+                if (r <= r2 && c <= c2) {
+                    range.r1 = r;
+                    range.c1 = c;
+                }
+                break;
+            case 'ne':
+                if (r <= r2 && c >= c1) {
+                    range.r1 = r;
+                    range.c2 = c;
+                }
+                break;
+            case 'sw':
+                if (r >= r1 && c <= c2) {
+                    range.r2 = r;
+                    range.c1 = c;
+                }
+                break;
+            case 'se':
+                if (r >= r1 && c >= c1) {
+                    range.r2 = r;
+                    range.c2 = c;
+                }
+                break;
+        }
+        if (!this.selection.equals(range)) {
+            this.selection.r1 = range.r1;
+            this.selection.r2 = range.r2;
+            this.selection.c1 = range.c1;
+            this.selection.c2 = range.c2;
+            this.updatePosition();
+        }
+    }
+    stopResizing(dispatchEvent = true) {
         if (!this._resizing)
             return;
         this._resizing = false;
-        this.dispatchEvent(new SelectorEvent('resize', { selector: this }));
-        this.table.removeEventListener('mousemove', this._onResizeHandleMouseMove);
+        if (dispatchEvent)
+            this.dispatchEvent(new SelectorEvent('resize', { selector: this }));
+    }
+    // #endregion
+    // #region Selecting
+    startSelecting(baseCell) {
+        this.baseCell = baseCell;
+        this._selecting = true;
+        this.select(baseCell);
+    }
+    select(selection, dispatchEvent = true) {
+        this.selection = selection.clone();
+        if (dispatchEvent)
+            this.dispatchEvent(new SelectorEvent('select', { selector: this }));
+    }
+    stopSelecting(_dispatchEvent = true) {
+        this._selecting = false;
+        this.baseCell = null;
+    }
+    // #endregion
+    /**
+     * Updates selector state after table moving events
+     * @param cell
+     */
+    updateMovingOperations(c, r) {
+        if (this.isAutofilling)
+            this.updateAutofilling(c, r);
+        if (this.isMoving)
+            this.updateMoving(c, r);
+        if (this.isResizing)
+            this.updateResizing(c, r);
+    }
+    stopSelectorOperations(dispatchEvent = true) {
+        this.stopAutofilling(dispatchEvent);
+        this.stopMoving(dispatchEvent);
+        this.stopResizing(dispatchEvent);
+        this.stopSelecting(dispatchEvent);
     }
     startAnimation() {
         if (!this.animated || this._animationTimer != null || !this.isVisible)
@@ -364,11 +377,11 @@ let Selector = class Selector extends lit_1.LitElement {
         let top = -1000, left = -1000, width = 0, height = 0;
         let subTop = -1000, subLeft = -1000, subWidth = 0, subHeight = 0;
         const options = this.table.model.options;
-        if (this.selection && !this.selection.hidden) {
-            const cMin = Math.min(this.selection.range.c1, this.selection.range.c2);
-            const cMax = Math.max(this.selection.range.c1, this.selection.range.c2);
-            const rMin = Math.min(this.selection.range.r1, this.selection.range.r2);
-            const rMax = Math.max(this.selection.range.r1, this.selection.range.r2);
+        if (this.selection) {
+            const cMin = Math.min(this.selection.c1, this.selection.c2);
+            const cMax = Math.max(this.selection.c1, this.selection.c2);
+            const rMin = Math.min(this.selection.r1, this.selection.r2);
+            const rMax = Math.max(this.selection.r1, this.selection.r2);
             this.topLeftCell = this.table.getCellByModelIndex(cMin, rMin);
             this.topRightCell = this.table.getCellByModelIndex(cMax, rMin);
             this.bottomLeftCell = this.table.getCellByModelIndex(cMin, rMax);
@@ -396,8 +409,8 @@ let Selector = class Selector extends lit_1.LitElement {
                     : (cMax <= this.table.colOffset
                         ? (core_1.dom.getElementOffset(this.table.getCellByGridIndex(options.freezeLeft, 0), this.table).left - left)
                         : this.table.offsetWidth - left)) + 1;
-                if (this.selection.activeCell) {
-                    this.activeCell = this.table.getCellByModelIndex(cMin + this.selection.activeCell.c1, rMin + this.selection.activeCell.r1);
+                if (this.activeCellRange) {
+                    this.activeCell = this.table.getCellByModelIndex(cMin + this.activeCellRange.c1, rMin + this.activeCellRange.r1);
                     if (this.activeCell) {
                         const subOffset = core_1.dom.getElementOffset(this.activeCell, this.table);
                         subLeft = subOffset.left - left;
@@ -411,7 +424,7 @@ let Selector = class Selector extends lit_1.LitElement {
         core_1.dom.setPosition(this, { l: left * zoom, t: top * zoom });
         core_1.dom.setSize(this, { w: width, h: height });
         if (this.subselectorElm) {
-            if (this.selection.activeCell) {
+            if (this.activeCellRange) {
                 core_1.dom.setPosition(this.subselectorElm, { l: subLeft - constants_1.default.SELECTOR_BORDER_WIDTH, t: subTop - constants_1.default.SELECTOR_BORDER_WIDTH });
                 core_1.dom.setSize(this.subselectorElm, { w: subWidth - 1, h: subHeight - 1 });
             }
@@ -424,17 +437,6 @@ let Selector = class Selector extends lit_1.LitElement {
             this.svgAnimation.setAttribute('height', (this.clientHeight + 4).toString());
         }
     }
-    select(selection, grid, dispatchEvent = true) {
-        if (selection) {
-            selection.activeCell.c1 = 0;
-            selection.activeCell.r1 = 0;
-        }
-        this._selection = selection;
-        this._grid = grid;
-        this.updatePosition();
-        if (dispatchEvent)
-            this.dispatchEvent(new SelectorEvent('select', { selector: this }));
-    }
 };
 exports.Selector = Selector;
 Selector.styles = [selector_style_1.style];
@@ -459,6 +461,15 @@ __decorate([
 __decorate([
     (0, decorators_js_1.property)({ type: Boolean, reflect: true })
 ], Selector.prototype, "animated", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], Selector.prototype, "selection", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], Selector.prototype, "activeCellRange", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], Selector.prototype, "grid", void 0);
 __decorate([
     (0, decorators_js_1.query)('#handle')
 ], Selector.prototype, "handleElm", void 0);