@revolist/revogrid 4.0.11 → 4.0.13

package/dist/collection/components/overlay/revogr-overlay-selection.js

@@ -3,15 +3,17 @@
  */
 import { h, Host, } from "@stencil/core";
 import ColumnService from "../data/column.service";
-import SelectionStoreService from "../../store/selection/selection.store.service";
 import { codesLetter } from "../../utils/key.codes";
 import { MOBILE_CLASS, SELECTION_BORDER_CLASS } from "../../utils/consts";
-import { getRange, isRangeSingleCell } from "../../store/selection/selection.helpers";
-import { getCurrentCell, getElStyle } from "./selection.utils";
+import { getRange, isRangeSingleCell, } from "../../store/index";
+import { getElStyle, getFocusCellBasedOnEvent, } from "./selection.utils";
 import { isEditInput } from "../editors/edit.utils";
 import { KeyboardService } from "./keyboard.service";
 import { AutoFillService } from "./autofill.service";
-import { getFromEvent, verifyTouchTarget } from "../../utils/events";
+import { verifyTouchTarget } from "../../utils/events";
+/**
+ * Component for overlaying the grid with the selection.
+ */
 export class OverlaySelection {
     constructor() {
         this.keyboardService = null;
@@ -35,44 +37,60 @@ export class OverlaySelection {
     // #endregion
     // #region Listeners
     onMouseMove(e) {
-        if (this.selectionStoreService.focused) {
+        if (this.selectionStore.get('focus')) {
             this.autoFillService.selectionMouseMove(e);
         }
     }
-    /** Action finished inside of the document. */
-    /** Pointer left document, clear any active operation. */
+    /**
+     * Action finished inside of the document.
+     * Pointer left document, clear any active operation.
+     */
     onMouseUp() {
-        this.autoFillService.clearAutoFillSelection();
+        // Clear auto fill selection
+        // when pointer left document,
+        // clear any active operation.
+        this.autoFillService.clearAutoFillSelection(this.selectionStore.get('focus'), this.selectionStore.get('range'));
     }
-    /** Row drag started. */
+    /**
+     * Row drag started.
+     * This event is fired when drag action started on cell.
+     */
     onCellDrag(e) {
         var _a;
+        // Invoke drag start on order editor.
         (_a = this.orderEditor) === null || _a === void 0 ? void 0 : _a.dragStart(e.detail);
     }
-    /** Get keyboard down from element. */
+    /**
+     * Get keyboard down from element.
+     * This event is fired when keyboard key is released.
+     */
     onKeyUp(e) {
+        // Emit before key up event.
         this.beforeKeyUp.emit(e);
     }
-    /** Get keyboard down from element. */
+    /**
+     * Get keyboard down from element.
+     * This event is fired when keyboard key is pressed.
+     */
     onKeyDown(e) {
         var _a;
+        // Emit before key down event and check if default prevention is set.
         const proxy = this.beforeKeyDown.emit(e);
         if (e.defaultPrevented || proxy.defaultPrevented) {
             return;
         }
-        (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyDown(e, this.range);
+        // Invoke key down on keyboard service.
+        (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyDown(e, this.range, !!this.selectionStore.get('edit'), {
+            focus: this.selectionStore.get('focus'),
+            range: this.selectionStore.get('range'),
+        });
     }
     // #endregion
     /** Selection & Keyboard */
     selectionServiceSet(s) {
-        this.selectionStoreService = new SelectionStoreService(s, {
-            changeRange: range => this.triggerRangeEvent(range),
-            focus: (focus, end) => this.doFocus(focus, end),
-        });
         this.keyboardService = new KeyboardService({
-            selectionStoreService: this.selectionStoreService,
             selectionStore: s,
-            range: r => this.selectionStoreService.changeRange(r),
+            range: r => this.triggerRangeEvent(r),
             focusNext: (f, next) => this.doFocus(f, f, next),
             change: val => {
                 if (this.readonly) {
@@ -94,7 +112,6 @@ export class OverlaySelection {
     /** Autofill */
     createAutoFillService() {
         this.autoFillService = new AutoFillService({
-            selectionStoreService: this.selectionStoreService,
             dimensionRow: this.dimensionRow,
             dimensionCol: this.dimensionCol,
             columnService: this.columnService,
@@ -170,10 +187,10 @@ export class OverlaySelection {
             nodes.push(editCell);
         }
         else {
-            const range = this.selectionStoreService.ranged;
-            const selectionFocus = this.selectionStoreService.focused;
+            const range = this.selectionStore.get('range');
+            const focus = this.selectionStore.get('focus');
             // Clipboard
-            if ((range || selectionFocus) && this.useClipboard) {
+            if ((range || focus) && this.useClipboard) {
                 nodes.push(h("revogr-clipboard", { readonly: this.readonly, onCopyregion: e => this.onCopy(e.detail), onClearregion: () => !this.readonly && this.clearCell(), ref: e => (this.clipboard = e), onPasteregion: e => this.onPaste(e.detail) }));
             }
             // Range
@@ -181,23 +198,19 @@ export class OverlaySelection {
                 nodes.push(...this.renderRange(range));
             }
             // Autofill
-            if (selectionFocus && !this.readonly && this.range) {
-                nodes.push(this.autoFillService.renderAutofill(range, selectionFocus));
+            if (focus && !this.readonly && this.range) {
+                nodes.push(this.autoFillService.renderAutofill(range, focus));
             }
             // Order
             if (this.canDrag) {
                 nodes.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (h(Host, { key: 'd20fcf63958e3d491f4fd881a4a5dd242cfdd9ac', class: { mobile: this.isMobileDevice },
-            // Open Editor on DblClick
-            onDblClick: (e) => {
-                // DblClick prevented outside - Editor will not open
-                if (!e.defaultPrevented) {
-                    this.doEdit();
-                }
-            }, onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, h("slot", { key: '89b9bec7824739ea11fadeecbf3908ac74e85c96', name: "data" })));
+        return (h(Host, { key: '3d40ea4ca89197d464bc5b84354e859a7bb9e1fa', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, h("slot", { key: '0d318f6e73fe84efd8d3b621c463bb3700d11eed', name: "data" })));
     }
+    /**
+     * Executes the focus operation on the specified range of cells.
+     */
     doFocus(focus, end, next) {
         const { defaultPrevented } = this.beforeFocusCell.emit(this.columnService.getSaveData(focus.y, focus.x));
         if (defaultPrevented) {
@@ -231,31 +244,48 @@ export class OverlaySelection {
         }
         return !e.defaultPrevented;
     }
+    /**
+     * Open Editor on DblClick
+     */
+    onElementDblClick(e) {
+        // DblClick prevented outside - Editor will not open
+        // Get data from the component
+        const data = this.getData();
+        const focusCell = getFocusCellBasedOnEvent(e, data);
+        if (!focusCell) {
+            return;
+        }
+        this.doEdit();
+    }
+    /**
+     * Handle mouse down event on Host element
+     */
     onElementMouseDown(e, touch = false) {
+        // Get the target element from the event object
+        const targetElement = e.target;
         // Ignore focus if clicked input
-        if (isEditInput(e.target)) {
+        if (isEditInput(targetElement)) {
             return;
         }
+        // Get data from the component
         const data = this.getData();
-        if (e.defaultPrevented) {
+        const focusCell = getFocusCellBasedOnEvent(e, data);
+        if (!focusCell) {
             return;
         }
-        const x = getFromEvent(e, 'clientX');
-        const y = getFromEvent(e, 'clientY');
-        // skip touch
-        if (x === null || y === null) {
-            return;
-        }
-        // Regular cell click
-        const focusCell = getCurrentCell({ x, y }, data);
-        this.selectionStoreService.focus(focusCell, this.range && e.shiftKey);
+        // Set focus on the current cell
+        this.focus(focusCell, this.range && e.shiftKey);
         // Initiate autofill selection
         if (this.range) {
-            this.autoFillService.selectionStart(e.target, data);
+            this.autoFillService.selectionStart(targetElement, this.getData());
+            // Prevent default behavior for mouse events,
+            // but only if target element is not a mobile input
             if (!touch) {
                 e.preventDefault();
             }
             else if (verifyTouchTarget(e.touches[0], MOBILE_CLASS)) {
+                // Prevent default behavior for touch events
+                // if target element is a mobile input
                 e.preventDefault();
             }
         }
@@ -266,8 +296,8 @@ export class OverlaySelection {
     doEdit(val = '') {
         var _a;
         if (this.canEdit()) {
-            const editCell = this.selectionStore.get('focus');
-            const data = this.columnService.getSaveData(editCell.y, editCell.x);
+            const focus = this.selectionStore.get('focus');
+            const data = this.columnService.getSaveData(focus.y, focus.x);
             (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
         }
     }
@@ -290,8 +320,8 @@ export class OverlaySelection {
         this.cellEditApply.emit(dataToSave);
     }
     getRegion() {
-        const focus = this.selectionStoreService.focused;
-        let range = this.selectionStoreService.ranged;
+        const focus = this.selectionStore.get('focus');
+        let range = this.selectionStore.get('range');
         if (!range) {
             range = getRange(focus, focus);
         }
@@ -317,8 +347,8 @@ export class OverlaySelection {
         return true;
     }
     onPaste(data) {
-        const focus = this.selectionStoreService.focused;
-        const isEditing = this.selectionStoreService.edited !== null;
+        const focus = this.selectionStore.get('focus');
+        const isEditing = this.selectionStore.get('edit') !== null;
         if (!focus || isEditing) {
             return;
         }
@@ -338,13 +368,13 @@ export class OverlaySelection {
         }
     }
     clearCell() {
-        if (this.selectionStoreService.ranged &&
-            !isRangeSingleCell(this.selectionStoreService.ranged)) {
-            const data = this.columnService.getRangeStaticData(this.selectionStoreService.ranged, '');
-            this.autoFillService.onRangeApply(data, this.selectionStoreService.ranged);
+        if (this.selectionStore.get('range') &&
+            !isRangeSingleCell(this.selectionStore.get('range'))) {
+            const data = this.columnService.getRangeStaticData(this.selectionStore.get('range'), '');
+            this.autoFillService.onRangeApply(data, this.selectionStore.get('range'));
         }
         else if (this.canEdit()) {
-            const focused = this.selectionStoreService.focused;
+            const focused = this.selectionStore.get('focus');
             const cell = this.columnService.getSaveData(focused.y, focused.x);
             this.cellEdit({
                 rgRow: focused.y,
@@ -366,8 +396,24 @@ export class OverlaySelection {
         if (this.readonly) {
             return false;
         }
-        const editCell = this.selectionStoreService.focused;
-        return editCell && !((_a = this.columnService) === null || _a === void 0 ? void 0 : _a.isReadOnly(editCell.y, editCell.x));
+        const focus = this.selectionStore.get('focus');
+        return focus && !((_a = this.columnService) === null || _a === void 0 ? void 0 : _a.isReadOnly(focus.y, focus.x));
+    }
+    get edited() {
+        return this.selectionStore.get('edit');
+    }
+    /**
+     * Sets the focus on a cell and optionally edits a range.
+     */
+    focus(cell, isRangeEdit = false) {
+        if (!cell)
+            return false;
+        const end = cell;
+        const start = this.selectionStore.get('focus');
+        if (isRangeEdit && start) {
+            return this.triggerRangeEvent(getRange(start, end));
+        }
+        return this.doFocus(cell, end);
     }
     get types() {
         return {
@@ -384,6 +430,8 @@ export class OverlaySelection {
             rows: this.dimensionRow.state,
             cols: this.dimensionCol.state,
             lastCell: this.lastCell,
+            focus: this.selectionStore.get('focus'),
+            range: this.selectionStore.get('range'),
         };
     }
     static get is() { return "revogr-overlay-selection"; }
@@ -559,8 +607,8 @@ export class OverlaySelection {
                         },
                         "DSourceState": {
                             "location": "import",
-                            "path": "../../store/dataSource/data.store",
-                            "id": "src/store/dataSource/data.store.ts::DSourceState"
+                            "path": "@store",
+                            "id": "src/store/index.ts::DSourceState"
                         },
                         "DataType": {
                             "location": "import",
@@ -595,8 +643,8 @@ export class OverlaySelection {
                         },
                         "DSourceState": {
                             "location": "import",
-                            "path": "../../store/dataSource/data.store",
-                            "id": "src/store/dataSource/data.store.ts::DSourceState"
+                            "path": "@store",
+                            "id": "src/store/index.ts::DSourceState"
                         },
                         "ColumnRegular": {
                             "location": "import",
@@ -635,7 +683,7 @@ export class OverlaySelection {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Last cell position."
+                    "text": "Last real coordinates positions + 1."
                 }
             },
             "editors": {
@@ -647,8 +695,8 @@ export class OverlaySelection {
                     "references": {
                         "Editors": {
                             "location": "import",
-                            "path": "../../types/selection",
-                            "id": "src/types/selection.ts::Editors"
+                            "path": "@type",
+                            "id": "src/types/index.ts::Editors"
                         }
                     }
                 },
@@ -760,8 +808,8 @@ export class OverlaySelection {
                     "references": {
                         "BeforeSaveDataDetails": {
                             "location": "import",
-                            "path": "../../types/selection",
-                            "id": "src/types/selection.ts::BeforeSaveDataDetails"
+                            "path": "@type",
+                            "id": "src/types/index.ts::BeforeSaveDataDetails"
                         }
                     }
                 }
@@ -781,8 +829,8 @@ export class OverlaySelection {
                     "references": {
                         "BeforeSaveDataDetails": {
                             "location": "import",
-                            "path": "../../types/selection",
-                            "id": "src/types/selection.ts::BeforeSaveDataDetails"
+                            "path": "@type",
+                            "id": "src/types/index.ts::BeforeSaveDataDetails"
                         }
                     }
                 }
@@ -802,8 +850,8 @@ export class OverlaySelection {
                     "references": {
                         "BeforeEdit": {
                             "location": "import",
-                            "path": "../../types/selection",
-                            "id": "src/types/selection.ts::BeforeEdit"
+                            "path": "@type",
+                            "id": "src/types/index.ts::BeforeEdit"
                         }
                     }
                 }
@@ -823,8 +871,8 @@ export class OverlaySelection {
                     "references": {
                         "FocusRenderEvent": {
                             "location": "import",
-                            "path": "../../types/interfaces",
-                            "id": "src/types/interfaces.ts::FocusRenderEvent"
+                            "path": "@type",
+                            "id": "src/types/index.ts::FocusRenderEvent"
                         }
                     }
                 }
@@ -859,8 +907,8 @@ export class OverlaySelection {
                     "references": {
                         "FocusRenderEvent": {
                             "location": "import",
-                            "path": "../../types/interfaces",
-                            "id": "src/types/interfaces.ts::FocusRenderEvent"
+                            "path": "@type",
+                            "id": "src/types/index.ts::FocusRenderEvent"
                         }
                     }
                 }
@@ -880,13 +928,13 @@ export class OverlaySelection {
                     "references": {
                         "RangeArea": {
                             "location": "import",
-                            "path": "../../types/selection",
-                            "id": "src/types/selection.ts::RangeArea"
+                            "path": "@type",
+                            "id": "src/types/index.ts::RangeArea"
                         },
                         "MultiDimensionType": {
                             "location": "import",
-                            "path": "../../types/dimension",
-                            "id": "src/types/dimension.ts::MultiDimensionType"
+                            "path": "@type",
+                            "id": "src/types/index.ts::MultiDimensionType"
                         }
                     }
                 }
@@ -936,8 +984,8 @@ export class OverlaySelection {
                     "references": {
                         "TempRange": {
                             "location": "import",
-                            "path": "../../types/selection",
-                            "id": "src/types/selection.ts::TempRange"
+                            "path": "@type",
+                            "id": "src/types/index.ts::TempRange"
                         }
                     }
                 }
@@ -957,8 +1005,8 @@ export class OverlaySelection {
                     "references": {
                         "FocusRenderEvent": {
                             "location": "import",
-                            "path": "../../types/interfaces",
-                            "id": "src/types/interfaces.ts::FocusRenderEvent"
+                            "path": "@type",
+                            "id": "src/types/index.ts::FocusRenderEvent"
                         }
                     }
                 }
@@ -974,12 +1022,12 @@ export class OverlaySelection {
                 },
                 "complexType": {
                     "original": "ApplyFocusEvent",
-                    "resolved": "AllDimensionType & FocusedCells",
+                    "resolved": "ApplyFocusEvent",
                     "references": {
                         "ApplyFocusEvent": {
                             "location": "import",
-                            "path": "../../types/interfaces",
-                            "id": "src/types/interfaces.ts::ApplyFocusEvent"
+                            "path": "@type",
+                            "id": "src/types/index.ts::ApplyFocusEvent"
                         }
                     }
                 }
@@ -999,8 +1047,8 @@ export class OverlaySelection {
                     "references": {
                         "FocusRenderEvent": {
                             "location": "import",
-                            "path": "../../types/interfaces",
-                            "id": "src/types/interfaces.ts::FocusRenderEvent"
+                            "path": "@type",
+                            "id": "src/types/index.ts::FocusRenderEvent"
                         }
                     }
                 }
@@ -1020,8 +1068,8 @@ export class OverlaySelection {
                     "references": {
                         "ChangedRange": {
                             "location": "import",
-                            "path": "../../types/selection",
-                            "id": "src/types/selection.ts::ChangedRange"
+                            "path": "@type",
+                            "id": "src/types/index.ts::ChangedRange"
                         }
                     }
                 }
@@ -1041,8 +1089,8 @@ export class OverlaySelection {
                     "references": {
                         "ChangedRange": {
                             "location": "import",
-                            "path": "../../types/selection",
-                            "id": "src/types/selection.ts::ChangedRange"
+                            "path": "@type",
+                            "id": "src/types/index.ts::ChangedRange"
                         }
                     }
                 }
@@ -1062,8 +1110,8 @@ export class OverlaySelection {
                     "references": {
                         "BeforeRangeSaveDataDetails": {
                             "location": "import",
-                            "path": "../../types/selection",
-                            "id": "src/types/selection.ts::BeforeRangeSaveDataDetails"
+                            "path": "@type",
+                            "id": "src/types/index.ts::BeforeRangeSaveDataDetails"
                         }
                     }
                 }