lsp-grid 1.0.0

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

@@ -0,0 +1,400 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+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() {
+        /**
+         * 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 });
+            if (!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": false
+            },
+            "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": 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.\r\nCan be prevented by event.preventDefault().\r\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\r\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 {\r\n  Component,\r\n  Prop,\r\n  h,\r\n  Host,\r\n  Event,\r\n  Element,\r\n  EventEmitter,\r\n} from '@stencil/core';\r\nimport { FOCUS_CLASS } from '../../utils/consts';\r\nimport { getCell, styleByCellProps } from '../overlay/selection.utils';\r\nimport { DSourceState, getSourceItem } from '@store';\r\nimport type {\r\n  Cell,\r\n  SelectionStoreState,\r\n  ColumnRegular,\r\n  DataType,\r\n  DimensionSettingsState,\r\n  FocusRenderEvent,\r\n  FocusTemplateFunc,\r\n  DimensionCols,\r\n  DimensionRows,\r\n  FocusAfterRenderEvent,\r\n} from '@type';\r\nimport type { Observable } from '../../utils';\r\n\r\n/**\r\n * Focus component. Shows focus layer around the cell that is currently in focus.\r\n * @slot focus-${view.type}-${data.type}. @example focus-rgCol-rgRow\r\n */\r\n@Component({\r\n  tag: 'revogr-focus',\r\n  styleUrl: 'revogr-focus-style.scss',\r\n})\r\nexport class RevogrFocus {\r\n  /**\r\n   * Column type\r\n   */\r\n  @Prop() colType!: DimensionCols;\r\n  /**\r\n   * Row type\r\n   */\r\n  @Prop() rowType!: DimensionRows;\r\n\r\n  /** Dynamic stores */\r\n  /** Selection, range, focus for selection */\r\n  @Prop() selectionStore!: Observable<SelectionStoreState>;\r\n  /** Dimension settings Y */\r\n  @Prop() dimensionRow!: Observable<DimensionSettingsState>;\r\n  /** Dimension settings X */\r\n  @Prop() dimensionCol!: Observable<DimensionSettingsState>;\r\n  /**\r\n   * Data rows source\r\n   */\r\n  @Prop() dataStore!: Observable<DSourceState<DataType, DimensionRows>>;\r\n  /**\r\n   * Column source\r\n   */\r\n  @Prop() colData!: Observable<DSourceState<ColumnRegular, DimensionCols>>;\r\n\r\n  /**\r\n   * Focus template custom function. Can be used to render custom focus layer.\r\n   */\r\n  @Prop() focusTemplate: FocusTemplateFunc | null = null;\r\n\r\n  /**\r\n   * Before focus render event.\r\n   * Can be prevented by event.preventDefault().\r\n   * If preventDefault used slot will be rendered.\r\n   */\r\n  @Event({ eventName: 'beforefocusrender' })\r\n  beforeFocusRender: EventEmitter<FocusRenderEvent>;\r\n\r\n  /**\r\n   * Before focus changed verify if it's in view and scroll viewport into this view\r\n   * Can be prevented by event.preventDefault()\r\n   */\r\n  @Event({ eventName: 'beforescrollintoview' })\r\n  beforeScrollIntoView: EventEmitter<{ el: HTMLElement }>;\r\n  /**\r\n   * Used to setup properties after focus was rendered\r\n   */\r\n  @Event({ eventName: 'afterfocus' })\r\n  afterFocus: EventEmitter<FocusAfterRenderEvent>;\r\n\r\n  @Element() el: HTMLElement;\r\n  private activeFocus: Cell | null = null;\r\n\r\n  componentDidRender() {\r\n    const currentFocus = this.selectionStore.get('focus');\r\n    if (\r\n      this.activeFocus?.x === currentFocus?.x &&\r\n      this.activeFocus?.y === currentFocus?.y\r\n    ) {\r\n      return;\r\n    }\r\n    this.activeFocus = currentFocus;\r\n    if (currentFocus && this.el) {\r\n      const beforeScrollIn = this.beforeScrollIntoView.emit({ el: this.el });\r\n      if (!beforeScrollIn.defaultPrevented) {\r\n        this.el.scrollIntoView({\r\n          block: 'nearest',\r\n          inline: 'nearest',\r\n        });\r\n      }\r\n      const model = getSourceItem(this.dataStore, currentFocus.y);\r\n      const column = getSourceItem(this.colData, currentFocus.x);\r\n      this.afterFocus.emit({\r\n        model,\r\n        column,\r\n        rowType: this.rowType,\r\n        colType: this.colType,\r\n        rowIndex: currentFocus.y,\r\n        colIndex: currentFocus.x,\r\n      });\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const editCell = this.selectionStore.get('edit');\r\n    if (editCell) {\r\n      return;\r\n    }\r\n    const focusCell = this.selectionStore.get('focus');\r\n    if (!focusCell) {\r\n      return;\r\n    }\r\n    const event = this.beforeFocusRender.emit({\r\n      range: {\r\n        ...focusCell,\r\n        x1: focusCell.x,\r\n        y1: focusCell.y,\r\n      },\r\n      rowType: this.rowType,\r\n      colType: this.colType,\r\n      rowDimension: { ...this.dimensionRow.state },\r\n      colDimension: { ...this.dimensionCol.state },\r\n    });\r\n    if (event.defaultPrevented) {\r\n      return <slot />;\r\n    }\r\n    const { detail } = event;\r\n\r\n    const cell = getCell(\r\n      detail.range,\r\n      event.detail.rowDimension,\r\n      event.detail.colDimension,\r\n    );\r\n    const styles = styleByCellProps(cell);\r\n    const extra = this.focusTemplate?.(h, detail);\r\n    const props = {\r\n      class: { [FOCUS_CLASS]: true },\r\n      style: styles,\r\n    };\r\n    return (\r\n      <Host {...props}>\r\n        <slot />\r\n        {extra}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\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 LevelSkill.Pro
+ */
+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';\r\nimport throttle from 'lodash/throttle';\r\nimport { TMP_SELECTION_BG_CLASS } from '../../utils/consts';\r\nimport { getCell, styleByCellProps } from '../overlay/selection.utils';\r\nimport { DimensionSettingsState, SelectionStoreState, RangeArea } from '@type';\r\nimport type { Observable } from '../../utils';\r\n\r\n/**\r\n * Temporary range selection component. Shows temporary range selection.\r\n */\r\n@Component({\r\n  tag: 'revogr-temp-range',\r\n  styleUrl: 'revogr-temp-range-style.scss',\r\n})\r\nexport class RevogrFocus {\r\n  /**\r\n   * Dynamic stores\r\n   */\r\n\r\n  /**\r\n   * Selection store, shows current selection and focus\r\n   */\r\n  @Prop() selectionStore: Observable<SelectionStoreState>;\r\n\r\n  /**\r\n   * Dimension row store\r\n   */\r\n  @Prop() dimensionRow: Observable<DimensionSettingsState>;\r\n  /**\r\n   * Dimension column store\r\n   */\r\n  @Prop() dimensionCol: Observable<DimensionSettingsState>;\r\n\r\n  el?: HTMLElement;\r\n  private readonly onChange = throttle((e: HTMLElement) => this.doChange(e), 300);\r\n\r\n  private doChange(e: HTMLElement) {\r\n    e?.scrollIntoView({\r\n      block: 'nearest',\r\n      inline: 'nearest',\r\n    });\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.el) {\r\n      this.onChange(this.el);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const data = this.selectionStore.get('tempRange');\r\n    const type = this.selectionStore.get('tempRangeType');\r\n    if (!data) {\r\n      return;\r\n    }\r\n    let directionY = 'bottom';\r\n    let derectionX = 'right';\r\n    const range = this.getRange();\r\n    if (!range) {\r\n      return;\r\n    }\r\n    if (data.y < range.y) {\r\n      directionY = 'top';\r\n    }\r\n    if (data.x < range.x) {\r\n      derectionX = 'left';\r\n    }\r\n    const directionClass = `${derectionX} ${directionY}`;\r\n    const cell = getCell(data,\r\n      this.dimensionRow.state,\r\n      this.dimensionCol.state\r\n    );\r\n    const styles = styleByCellProps(cell);\r\n    const props = {\r\n      class: {\r\n        [TMP_SELECTION_BG_CLASS]: true,\r\n        [type || '']: true,\r\n      },\r\n      style: styles,\r\n      hidden: false\r\n    };\r\n    return (\r\n      <Host {...props}>\r\n        <div class={directionClass} ref={(e) => (this.el = e)} />\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private getRange(): RangeArea | null {\r\n    const range = this.selectionStore.get('range');\r\n    if (range) {\r\n      return range;\r\n    }\r\n    const focus = this.selectionStore.get('focus');\r\n    if (!focus) {\r\n      return null;\r\n    }\r\n    return {\r\n      ...focus,\r\n      x1: focus.x,\r\n      y1: focus.y,\r\n    };\r\n  }\r\n}\r\n"]}