balala-revogrid 1.0.0

package/dist/collection/components/selectionFocus/revogr-focus.js

@@ -0,0 +1,429 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h, Host, } from "@stencil/core";
+import { FOCUS_CLASS } from "../../utils/consts";
+import { getCell, styleByCellProps } from "../overlay/selection.utils";
+import { getSourceItem } from "../../store/index";
+/**
+ * Focus component. Shows focus layer around the cell that is currently in focus.
+ * @slot focus-${view.type}-${data.type}. @example focus-rgCol-rgRow
+ */
+export class RevogrFocus {
+    constructor() {
+        /**
+         * Auto scroll to focused cell. When true, the grid will automatically scroll to make the focused cell visible.
+         * @default false
+         */
+        this.autoScrollToFocus = false;
+        /**
+         * Focus template custom function. Can be used to render custom focus layer.
+         */
+        this.focusTemplate = null;
+        this.activeFocus = null;
+    }
+    componentDidRender() {
+        var _a, _b;
+        const currentFocus = this.selectionStore.get('focus');
+        if (((_a = this.activeFocus) === null || _a === void 0 ? void 0 : _a.x) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.x) &&
+            ((_b = this.activeFocus) === null || _b === void 0 ? void 0 : _b.y) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.y)) {
+            return;
+        }
+        this.activeFocus = currentFocus;
+        if (currentFocus && this.el) {
+            const beforeScrollIn = this.beforeScrollIntoView.emit({ el: this.el });
+            // 只有在 autoScrollToFocus 为 true 时才执行自动滚动
+            if (this.autoScrollToFocus && !beforeScrollIn.defaultPrevented) {
+                this.el.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            }
+            const model = getSourceItem(this.dataStore, currentFocus.y);
+            const column = getSourceItem(this.colData, currentFocus.x);
+            this.afterFocus.emit({
+                model,
+                column,
+                rowType: this.rowType,
+                colType: this.colType,
+                rowIndex: currentFocus.y,
+                colIndex: currentFocus.x,
+            });
+        }
+    }
+    render() {
+        var _a;
+        const editCell = this.selectionStore.get('edit');
+        if (editCell) {
+            return;
+        }
+        const focusCell = this.selectionStore.get('focus');
+        if (!focusCell) {
+            return;
+        }
+        const event = this.beforeFocusRender.emit({
+            range: Object.assign(Object.assign({}, focusCell), { x1: focusCell.x, y1: focusCell.y }),
+            rowType: this.rowType,
+            colType: this.colType,
+            rowDimension: Object.assign({}, this.dimensionRow.state),
+            colDimension: Object.assign({}, this.dimensionCol.state),
+        });
+        if (event.defaultPrevented) {
+            return h("slot", null);
+        }
+        const { detail } = event;
+        const cell = getCell(detail.range, event.detail.rowDimension, event.detail.colDimension);
+        const styles = styleByCellProps(cell);
+        const extra = (_a = this.focusTemplate) === null || _a === void 0 ? void 0 : _a.call(this, h, detail);
+        const props = {
+            class: { [FOCUS_CLASS]: true },
+            style: styles,
+        };
+        return (h(Host, Object.assign({}, props), h("slot", null), extra));
+    }
+    static get is() { return "revogr-focus"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["revogr-focus-style.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["revogr-focus-style.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colType": {
+                "type": "string",
+                "attribute": "col-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "DimensionCols",
+                    "resolved": "\"colPinEnd\" | \"colPinStart\" | \"rgCol\"",
+                    "references": {
+                        "DimensionCols": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionCols"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "rowType": {
+                "type": "string",
+                "attribute": "row-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "DimensionRows",
+                    "resolved": "\"rgRow\" | \"rowPinEnd\" | \"rowPinStart\"",
+                    "references": {
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "autoScrollToFocus": {
+                "type": "boolean",
+                "attribute": "auto-scroll-to-focus",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Auto scroll to focused cell. When true, the grid will automatically scroll to make the focused cell visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectionStore": {
+                "type": "unknown",
+                "attribute": "selection-store",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<SelectionStoreState>",
+                    "resolved": "ObservableMap<SelectionStoreState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "SelectionStoreState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::SelectionStoreState"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection, range, focus for selection"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dimensionRow": {
+                "type": "unknown",
+                "attribute": "dimension-row",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DimensionSettingsState>",
+                    "resolved": "ObservableMap<DimensionSettingsState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DimensionSettingsState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionSettingsState"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dimension settings Y"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dimensionCol": {
+                "type": "unknown",
+                "attribute": "dimension-col",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DimensionSettingsState>",
+                    "resolved": "ObservableMap<DimensionSettingsState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DimensionSettingsState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionSettingsState"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dimension settings X"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dataStore": {
+                "type": "unknown",
+                "attribute": "data-store",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DSourceState<DataType, DimensionRows>>",
+                    "resolved": "ObservableMap<DSourceState<DataType, DimensionRows>>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DSourceState": {
+                            "location": "import",
+                            "path": "@store",
+                            "id": "src/store/index.ts::DSourceState"
+                        },
+                        "DataType": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DataType"
+                        },
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data rows source"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "colData": {
+                "type": "unknown",
+                "attribute": "col-data",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DSourceState<ColumnRegular, DimensionCols>>",
+                    "resolved": "ObservableMap<DSourceState<ColumnRegular, DimensionCols>>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DSourceState": {
+                            "location": "import",
+                            "path": "@store",
+                            "id": "src/store/index.ts::DSourceState"
+                        },
+                        "ColumnRegular": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ColumnRegular"
+                        },
+                        "DimensionCols": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionCols"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column source"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "focusTemplate": {
+                "type": "unknown",
+                "attribute": "focus-template",
+                "mutable": false,
+                "complexType": {
+                    "original": "FocusTemplateFunc | null",
+                    "resolved": "((createElement: HyperFunc<VNode>, detail: FocusRenderEvent) => any) | null",
+                    "references": {
+                        "FocusTemplateFunc": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::FocusTemplateFunc"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Focus template custom function. Can be used to render custom focus layer."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "beforeFocusRender",
+                "name": "beforefocusrender",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Before focus render event.\nCan be prevented by event.preventDefault().\nIf preventDefault used slot will be rendered."
+                },
+                "complexType": {
+                    "original": "FocusRenderEvent",
+                    "resolved": "FocusRenderEvent",
+                    "references": {
+                        "FocusRenderEvent": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::FocusRenderEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforeScrollIntoView",
+                "name": "beforescrollintoview",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Before focus changed verify if it's in view and scroll viewport into this view\nCan be prevented by event.preventDefault()"
+                },
+                "complexType": {
+                    "original": "{ el: HTMLElement }",
+                    "resolved": "{ el: HTMLElement; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "afterFocus",
+                "name": "afterfocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Used to setup properties after focus was rendered"
+                },
+                "complexType": {
+                    "original": "FocusAfterRenderEvent",
+                    "resolved": "FocusAfterRenderEvent",
+                    "references": {
+                        "FocusAfterRenderEvent": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::FocusAfterRenderEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=revogr-focus.js.map

package/dist/collection/components/selectionFocus/revogr-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revogr-focus.js","sourceRoot":"","sources":["../../../src/components/selectionFocus/revogr-focus.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Event,\n  Element,\n  EventEmitter,\n} from '@stencil/core';\nimport { FOCUS_CLASS } from '../../utils/consts';\nimport { getCell, styleByCellProps } from '../overlay/selection.utils';\nimport { DSourceState, getSourceItem } from '@store';\nimport type {\n  Cell,\n  SelectionStoreState,\n  ColumnRegular,\n  DataType,\n  DimensionSettingsState,\n  FocusRenderEvent,\n  FocusTemplateFunc,\n  DimensionCols,\n  DimensionRows,\n  FocusAfterRenderEvent,\n} from '@type';\nimport type { Observable } from '../../utils';\n\n/**\n * Focus component. Shows focus layer around the cell that is currently in focus.\n * @slot focus-${view.type}-${data.type}. @example focus-rgCol-rgRow\n */\n@Component({\n  tag: 'revogr-focus',\n  styleUrl: 'revogr-focus-style.scss',\n})\nexport class RevogrFocus {\n  /**\n   * Column type\n   */\n  @Prop({ reflect: true }) colType!: DimensionCols;\n  /**\n   * Row type\n   */\n  @Prop({ reflect: true }) rowType!: DimensionRows;\n\n  /**\n   * Auto scroll to focused cell. When true, the grid will automatically scroll to make the focused cell visible.\n   * @default false\n   */\n  @Prop() autoScrollToFocus: boolean = false;\n\n  /** Dynamic stores */\n  /** Selection, range, focus for selection */\n  @Prop() selectionStore!: Observable<SelectionStoreState>;\n  /** Dimension settings Y */\n  @Prop() dimensionRow!: Observable<DimensionSettingsState>;\n  /** Dimension settings X */\n  @Prop() dimensionCol!: Observable<DimensionSettingsState>;\n  /**\n   * Data rows source\n   */\n  @Prop() dataStore!: Observable<DSourceState<DataType, DimensionRows>>;\n  /**\n   * Column source\n   */\n  @Prop() colData!: Observable<DSourceState<ColumnRegular, DimensionCols>>;\n\n  /**\n   * Focus template custom function. Can be used to render custom focus layer.\n   */\n  @Prop() focusTemplate: FocusTemplateFunc | null = null;\n\n  /**\n   * Before focus render event.\n   * Can be prevented by event.preventDefault().\n   * If preventDefault used slot will be rendered.\n   */\n  @Event({ eventName: 'beforefocusrender' })\n  beforeFocusRender: EventEmitter<FocusRenderEvent>;\n\n  /**\n   * Before focus changed verify if it's in view and scroll viewport into this view\n   * Can be prevented by event.preventDefault()\n   */\n  @Event({ eventName: 'beforescrollintoview' })\n  beforeScrollIntoView: EventEmitter<{ el: HTMLElement }>;\n  /**\n   * Used to setup properties after focus was rendered\n   */\n  @Event({ eventName: 'afterfocus' })\n  afterFocus: EventEmitter<FocusAfterRenderEvent>;\n\n  @Element() el: HTMLElement;\n  private activeFocus: Cell | null = null;\n\n  componentDidRender() {\n    const currentFocus = this.selectionStore.get('focus');\n    if (\n      this.activeFocus?.x === currentFocus?.x &&\n      this.activeFocus?.y === currentFocus?.y\n    ) {\n      return;\n    }\n    this.activeFocus = currentFocus;\n    if (currentFocus && this.el) {\n      const beforeScrollIn = this.beforeScrollIntoView.emit({ el: this.el });\n      // 只有在 autoScrollToFocus 为 true 时才执行自动滚动\n      if (this.autoScrollToFocus && !beforeScrollIn.defaultPrevented) {\n        this.el.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n      const model = getSourceItem(this.dataStore, currentFocus.y);\n      const column = getSourceItem(this.colData, currentFocus.x);\n      this.afterFocus.emit({\n        model,\n        column,\n        rowType: this.rowType,\n        colType: this.colType,\n        rowIndex: currentFocus.y,\n        colIndex: currentFocus.x,\n      });\n    }\n  }\n\n  render() {\n    const editCell = this.selectionStore.get('edit');\n    if (editCell) {\n      return;\n    }\n    const focusCell = this.selectionStore.get('focus');\n    if (!focusCell) {\n      return;\n    }\n    const event = this.beforeFocusRender.emit({\n      range: {\n        ...focusCell,\n        x1: focusCell.x,\n        y1: focusCell.y,\n      },\n      rowType: this.rowType,\n      colType: this.colType,\n      rowDimension: { ...this.dimensionRow.state },\n      colDimension: { ...this.dimensionCol.state },\n    });\n    if (event.defaultPrevented) {\n      return <slot />;\n    }\n    const { detail } = event;\n\n    const cell = getCell(\n      detail.range,\n      event.detail.rowDimension,\n      event.detail.colDimension,\n    );\n    const styles = styleByCellProps(cell);\n    const extra = this.focusTemplate?.(h, detail);\n    const props = {\n      class: { [FOCUS_CLASS]: true },\n      style: styles,\n    };\n    return (\n      <Host {...props}>\n        <slot />\n        {extra}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/selectionTempRange/revogr-temp-range-style.css

@@ -0,0 +1,28 @@
+.temp-bg-range {
+  display: block !important;
+  position: absolute;
+  pointer-events: none;
+  z-index: 9;
+  border: 1px solid rgb(255, 94, 0);
+  box-sizing: border-box;
+}
+.temp-bg-range.Selection {
+  border: 1px dashed gray;
+}
+.temp-bg-range > div {
+  width: 1px;
+  height: 1px;
+  position: absolute;
+}
+.temp-bg-range > div.top {
+  top: -1px;
+}
+.temp-bg-range > div.bottom {
+  bottom: -1px;
+}
+.temp-bg-range > div.left {
+  left: -1px;
+}
+.temp-bg-range > div.right {
+  right: -1px;
+}

package/dist/collection/components/selectionTempRange/revogr-temp-range.js

@@ -0,0 +1,171 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h, Host } from "@stencil/core";
+import throttle from "lodash/throttle";
+import { TMP_SELECTION_BG_CLASS } from "../../utils/consts";
+import { getCell, styleByCellProps } from "../overlay/selection.utils";
+/**
+ * Temporary range selection component. Shows temporary range selection.
+ */
+export class RevogrFocus {
+    constructor() {
+        this.onChange = throttle((e) => this.doChange(e), 300);
+    }
+    doChange(e) {
+        e === null || e === void 0 ? void 0 : e.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+    componentDidRender() {
+        if (this.el) {
+            this.onChange(this.el);
+        }
+    }
+    render() {
+        const data = this.selectionStore.get('tempRange');
+        const type = this.selectionStore.get('tempRangeType');
+        if (!data) {
+            return;
+        }
+        let directionY = 'bottom';
+        let derectionX = 'right';
+        const range = this.getRange();
+        if (!range) {
+            return;
+        }
+        if (data.y < range.y) {
+            directionY = 'top';
+        }
+        if (data.x < range.x) {
+            derectionX = 'left';
+        }
+        const directionClass = `${derectionX} ${directionY}`;
+        const cell = getCell(data, this.dimensionRow.state, this.dimensionCol.state);
+        const styles = styleByCellProps(cell);
+        const props = {
+            class: {
+                [TMP_SELECTION_BG_CLASS]: true,
+                [type || '']: true,
+            },
+            style: styles,
+            hidden: false
+        };
+        return (h(Host, Object.assign({}, props), h("div", { class: directionClass, ref: (e) => (this.el = e) })));
+    }
+    getRange() {
+        const range = this.selectionStore.get('range');
+        if (range) {
+            return range;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return null;
+        }
+        return Object.assign(Object.assign({}, focus), { x1: focus.x, y1: focus.y });
+    }
+    static get is() { return "revogr-temp-range"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["revogr-temp-range-style.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["revogr-temp-range-style.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectionStore": {
+                "type": "unknown",
+                "attribute": "selection-store",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<SelectionStoreState>",
+                    "resolved": "ObservableMap<SelectionStoreState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "SelectionStoreState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::SelectionStoreState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection store, shows current selection and focus"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dimensionRow": {
+                "type": "unknown",
+                "attribute": "dimension-row",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DimensionSettingsState>",
+                    "resolved": "ObservableMap<DimensionSettingsState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DimensionSettingsState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionSettingsState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dimension row store"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "dimensionCol": {
+                "type": "unknown",
+                "attribute": "dimension-col",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DimensionSettingsState>",
+                    "resolved": "ObservableMap<DimensionSettingsState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
+                        },
+                        "DimensionSettingsState": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionSettingsState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dimension column store"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=revogr-temp-range.js.map

package/dist/collection/components/selectionTempRange/revogr-temp-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revogr-temp-range.js","sourceRoot":"","sources":["../../../src/components/selectionTempRange/revogr-temp-range.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport throttle from 'lodash/throttle';\nimport { TMP_SELECTION_BG_CLASS } from '../../utils/consts';\nimport { getCell, styleByCellProps } from '../overlay/selection.utils';\nimport { DimensionSettingsState, SelectionStoreState, RangeArea } from '@type';\nimport type { Observable } from '../../utils';\n\n/**\n * Temporary range selection component. Shows temporary range selection.\n */\n@Component({\n  tag: 'revogr-temp-range',\n  styleUrl: 'revogr-temp-range-style.scss',\n})\nexport class RevogrFocus {\n  /**\n   * Dynamic stores\n   */\n\n  /**\n   * Selection store, shows current selection and focus\n   */\n  @Prop() selectionStore: Observable<SelectionStoreState>;\n\n  /**\n   * Dimension row store\n   */\n  @Prop() dimensionRow: Observable<DimensionSettingsState>;\n  /**\n   * Dimension column store\n   */\n  @Prop() dimensionCol: Observable<DimensionSettingsState>;\n\n  el?: HTMLElement;\n  private readonly onChange = throttle((e: HTMLElement) => this.doChange(e), 300);\n\n  private doChange(e: HTMLElement) {\n    e?.scrollIntoView({\n      block: 'nearest',\n      inline: 'nearest',\n    });\n  }\n\n  componentDidRender() {\n    if (this.el) {\n      this.onChange(this.el);\n    }\n  }\n\n  render() {\n    const data = this.selectionStore.get('tempRange');\n    const type = this.selectionStore.get('tempRangeType');\n    if (!data) {\n      return;\n    }\n    let directionY = 'bottom';\n    let derectionX = 'right';\n    const range = this.getRange();\n    if (!range) {\n      return;\n    }\n    if (data.y < range.y) {\n      directionY = 'top';\n    }\n    if (data.x < range.x) {\n      derectionX = 'left';\n    }\n    const directionClass = `${derectionX} ${directionY}`;\n    const cell = getCell(data,\n      this.dimensionRow.state,\n      this.dimensionCol.state\n    );\n    const styles = styleByCellProps(cell);\n    const props = {\n      class: {\n        [TMP_SELECTION_BG_CLASS]: true,\n        [type || '']: true,\n      },\n      style: styles,\n      hidden: false\n    };\n    return (\n      <Host {...props}>\n        <div class={directionClass} ref={(e) => (this.el = e)} />\n      </Host>\n    );\n  }\n\n  private getRange(): RangeArea | null {\n    const range = this.selectionStore.get('range');\n    if (range) {\n      return range;\n    }\n    const focus = this.selectionStore.get('focus');\n    if (!focus) {\n      return null;\n    }\n    return {\n      ...focus,\n      x1: focus.x,\n      y1: focus.y,\n    };\n  }\n}\n"]}