lsp-grid 1.0.0

package/dist/collection/components/overlay/autofill.service.js

@@ -0,0 +1,224 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import debounce from "lodash/debounce";
+import { h } from "@stencil/core";
+import { CELL_HANDLER_CLASS, MOBILE_CLASS } from "../../utils/consts";
+import { collectModelsOfRange, getCell, getCurrentCell, isAfterLast, } from "./selection.utils";
+import { getRange } from "../../store/index";
+import { getPropertyFromEvent } from "../../utils/events";
+export class AutoFillService {
+    constructor(sv) {
+        this.sv = sv;
+        this.autoFillType = null;
+        this.autoFillInitial = null;
+        this.autoFillStart = null;
+        this.autoFillLast = null;
+    }
+    /**
+     * Render autofill box
+     * @param range
+     * @param selectionFocus
+     */
+    renderAutofill(range, selectionFocus, isMobile = false) {
+        let handlerStyle;
+        if (range) {
+            handlerStyle = getCell(range, this.sv.dimensionRow.state, this.sv.dimensionCol.state);
+        }
+        else {
+            handlerStyle = getCell(Object.assign(Object.assign({}, selectionFocus), { x1: selectionFocus.x, y1: selectionFocus.y }), this.sv.dimensionRow.state, this.sv.dimensionCol.state);
+        }
+        return (h("div", { class: {
+                [CELL_HANDLER_CLASS]: true,
+                [MOBILE_CLASS]: isMobile,
+            }, style: {
+                left: `${handlerStyle.right}px`,
+                top: `${handlerStyle.bottom}px`,
+            }, onMouseDown: (e) => this.autoFillHandler(e), onTouchStart: (e) => this.autoFillHandler(e) }));
+    }
+    autoFillHandler(e, type = "AutoFill" /* AutoFillType.autoFill */) {
+        let target = null;
+        if (e.target instanceof Element) {
+            target = e.target;
+        }
+        if (!target) {
+            return;
+        }
+        this.selectionStart(target, this.sv.getData(), type);
+        e.preventDefault();
+    }
+    get isAutoFill() {
+        return !!this.autoFillType;
+    }
+    /**
+     * Process mouse move events
+     */
+    selectionMouseMove(e) {
+        // initiate mouse move debounce if not present
+        if (!this.onMouseMoveAutofill) {
+            this.onMouseMoveAutofill = debounce((e, data) => this.doAutofillMouseMove(e, data), 5);
+        }
+        if (this.isAutoFill) {
+            this.onMouseMoveAutofill(e, this.sv.getData());
+        }
+    }
+    getFocus(focus, range) {
+        // there was an issue that it was taking last cell from range but focus was out
+        if (!focus && range) {
+            focus = { x: range.x, y: range.y };
+        }
+        return focus || null;
+    }
+    /**
+     * Autofill logic:
+     * on mouse move apply based on previous direction (if present)
+     */
+    doAutofillMouseMove(event, data) {
+        // if no initial - not started
+        if (!this.autoFillInitial) {
+            return;
+        }
+        const x = getPropertyFromEvent(event, 'clientX', MOBILE_CLASS);
+        const y = getPropertyFromEvent(event, 'clientY', MOBILE_CLASS);
+        // skip touch
+        if (x === null || y === null) {
+            return;
+        }
+        const current = getCurrentCell({ x, y }, data);
+        // first time or direction equal to start(same as first time)
+        if (!this.autoFillLast) {
+            if (!this.autoFillLast) {
+                this.autoFillLast = this.autoFillStart;
+            }
+        }
+        // check if not the latest, if latest - do nothing
+        if (isAfterLast(current, data.lastCell)) {
+            return;
+        }
+        this.autoFillLast = current;
+        const isSame = current.x === this.autoFillInitial.x &&
+            current.y === this.autoFillInitial.y;
+        // if same as initial - clear
+        if (isSame) {
+            this.sv.setTempRange(null);
+        }
+        else {
+            const area = getRange(this.autoFillInitial, this.autoFillLast);
+            this.sv.setTempRange({
+                area,
+                type: this.autoFillType,
+            });
+        }
+    }
+    /**
+     * Range selection started
+     * Mode @param type:
+     * Can be triggered from MouseDown selection on element
+     * Or can be triggered on corner square drag
+     */
+    selectionStart(target, data, type = "Selection" /* AutoFillType.selection */) {
+        /** Get cell by autofill element */
+        const { top, left } = target.getBoundingClientRect();
+        this.autoFillInitial = this.getFocus(data.focus, data.range);
+        this.autoFillType = type;
+        this.autoFillStart = getCurrentCell({ x: left, y: top }, data);
+    }
+    /**
+     * Clear current range selection on mouse up and mouse leave events
+     */
+    clearAutoFillSelection(focus, oldRange) {
+        // If autofill was active, apply autofill values
+        if (this.autoFillInitial) {
+            // Fetch latest focus
+            this.autoFillInitial = this.getFocus(focus, oldRange);
+            // Apply range data if autofill mode is active
+            if (this.autoFillType === "AutoFill" /* AutoFillType.autoFill */) {
+                const range = getRange(this.autoFillInitial, this.autoFillLast);
+                // If range is present, apply data
+                if (range) {
+                    const { defaultPrevented: stopApply, detail: { range: newRange }, } = this.sv.clearRangeDataApply({
+                        range,
+                    });
+                    // If data apply was not prevented, apply new range
+                    if (!stopApply && oldRange) {
+                        this.applyRangeWithData(newRange, oldRange);
+                    }
+                    else {
+                        // If data apply was prevented, clear temporary range
+                        this.sv.setTempRange(null);
+                    }
+                }
+            }
+            else {
+                // If not autofill mode, apply range only
+                this.applyRangeOnly(this.autoFillInitial, this.autoFillLast);
+            }
+        }
+        // Reset autofill state
+        this.resetAutoFillState();
+    }
+    /**
+     * Reset autofill state
+     */
+    resetAutoFillState() {
+        this.autoFillType = null;
+        this.autoFillInitial = null;
+        this.autoFillLast = null;
+        this.autoFillStart = null;
+    }
+    /**
+     * Trigger range apply events and handle responses
+     */
+    onRangeApply(newData, newRange, oldRange, copy = false, clear = false) {
+        this.sv.rangeDataApply({
+            data: newData,
+            models: collectModelsOfRange(newData, this.sv.dataStore),
+            type: this.sv.dataStore.get('type'),
+            oldRange,
+            newRange,
+            previousModels: null,
+            copy,
+            clearByKeyboard: clear,
+        });
+        this.sv.setRange(newRange);
+    }
+    /** Apply range and copy data during range application */
+    applyRangeWithData(newRange, rangeToCopy) {
+        const rangeData = {
+            type: this.sv.dataStore.get('type'),
+            colType: this.sv.columnService.type,
+            newData: {},
+            mapping: {},
+            newRange,
+            oldRange: rangeToCopy,
+        };
+        const { mapping, changed } = this.sv.columnService.getRangeData(rangeData, this.sv.columnService.columns);
+        rangeData.newData = changed;
+        rangeData.mapping = mapping;
+        let e = this.sv.selectionChanged(rangeData);
+        // if default prevented - clear range
+        if (e.defaultPrevented) {
+            this.sv.setTempRange(null);
+            return;
+        }
+        e = this.sv.rangeCopy(rangeData);
+        if (e.defaultPrevented) {
+            this.sv.setRange(newRange);
+            return;
+        }
+        this.onRangeApply(rangeData.newData, newRange, rangeToCopy);
+    }
+    /**
+     * Update range selection only,
+     * no data change (mouse selection)
+     */
+    applyRangeOnly(start, end) {
+        // no changes to apply
+        if (!start || !end) {
+            return;
+        }
+        const newRange = getRange(start, end);
+        this.sv.setRange(newRange);
+    }
+}
+//# sourceMappingURL=autofill.service.js.map

package/dist/collection/components/overlay/autofill.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autofill.service.js","sourceRoot":"","sources":["../../../src/components/overlay/autofill.service.tsx"],"names":[],"mappings":"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","sourcesContent":["import debounce from 'lodash/debounce';\r\nimport { DebouncedFunc } from 'lodash';\r\n\r\nimport { h } from '@stencil/core';\r\nimport { CELL_HANDLER_CLASS, MOBILE_CLASS } from '../../utils/consts';\r\nimport {\r\n  collectModelsOfRange,\r\n  EventData,\r\n  getCell,\r\n  getCurrentCell,\r\n  isAfterLast,\r\n} from './selection.utils';\r\nimport { DSourceState, getRange } from '@store';\r\nimport ColumnService from '../data/column.service';\r\nimport { getPropertyFromEvent } from '../../utils/events';\r\nimport {\r\n  DataLookup,\r\n  DataType,\r\n  DimensionSettingsState,\r\n  TempRange,\r\n  ChangedRange,\r\n  BeforeRangeSaveDataDetails,\r\n  RangeArea,\r\n  Cell,\r\n  DimensionRows,\r\n  Nullable,\r\n} from '@type';\r\nimport { Observable } from '../../utils';\r\n\r\ntype Config = {\r\n  dimensionRow: Observable<DimensionSettingsState>;\r\n  dimensionCol: Observable<DimensionSettingsState>;\r\n  columnService: ColumnService;\r\n  dataStore: Observable<DSourceState<DataType, DimensionRows>>;\r\n\r\n  setTempRange(e: Nullable<TempRange> | null): Event | null;\r\n  selectionChanged(e: ChangedRange): Event;\r\n  rangeCopy(e: ChangedRange): Event;\r\n  rangeDataApply(e: BeforeRangeSaveDataDetails): CustomEvent;\r\n  setRange(e: RangeArea | null): boolean;\r\n  clearRangeDataApply(e: { range: RangeArea }): CustomEvent<{\r\n    range: RangeArea;\r\n  }>;\r\n\r\n  getData(): any;\r\n};\r\n\r\nconst enum AutoFillType {\r\n  selection = 'Selection',\r\n  autoFill = 'AutoFill',\r\n}\r\n\r\nexport class AutoFillService {\r\n  private autoFillType: AutoFillType | null = null;\r\n  private autoFillInitial: Cell | null = null;\r\n  private autoFillStart: Cell | null = null;\r\n  private autoFillLast: Cell | null = null;\r\n\r\n  private onMouseMoveAutofill: DebouncedFunc<\r\n    (e: MouseEvent | TouchEvent, data: EventData) => void\r\n  >;\r\n\r\n  constructor(private sv: Config) {}\r\n\r\n  /**\r\n   * Render autofill box\r\n   * @param range\r\n   * @param selectionFocus\r\n   */\r\n  renderAutofill(\r\n    range: RangeArea | null,\r\n    selectionFocus: Cell,\r\n    isMobile = false,\r\n  ) {\r\n    let handlerStyle;\r\n    if (range) {\r\n      handlerStyle = getCell(\r\n        range,\r\n        this.sv.dimensionRow.state,\r\n        this.sv.dimensionCol.state,\r\n      );\r\n    } else {\r\n      handlerStyle = getCell(\r\n        {\r\n          ...selectionFocus,\r\n          x1: selectionFocus.x,\r\n          y1: selectionFocus.y,\r\n        },\r\n        this.sv.dimensionRow.state,\r\n        this.sv.dimensionCol.state,\r\n      );\r\n    }\r\n    return (\r\n      <div\r\n        class={{\r\n          [CELL_HANDLER_CLASS]: true,\r\n          [MOBILE_CLASS]: isMobile,\r\n        }}\r\n        style={{\r\n          left: `${handlerStyle.right}px`,\r\n          top: `${handlerStyle.bottom}px`,\r\n        }}\r\n        onMouseDown={(e: MouseEvent) => this.autoFillHandler(e)}\r\n        onTouchStart={(e: TouchEvent) => this.autoFillHandler(e)}\r\n      />\r\n    );\r\n  }\r\n\r\n  private autoFillHandler(\r\n    e: MouseEvent | TouchEvent,\r\n    type = AutoFillType.autoFill,\r\n  ) {\r\n    let target: Element | null = null;\r\n    if (e.target instanceof Element) {\r\n      target = e.target;\r\n    }\r\n    if (!target) {\r\n      return;\r\n    }\r\n    this.selectionStart(target, this.sv.getData(), type);\r\n    e.preventDefault();\r\n  }\r\n\r\n  get isAutoFill() {\r\n    return !!this.autoFillType;\r\n  }\r\n\r\n  /**\r\n   * Process mouse move events\r\n   */\r\n  selectionMouseMove(e: MouseEvent | TouchEvent) {\r\n    // initiate mouse move debounce if not present\r\n    if (!this.onMouseMoveAutofill) {\r\n      this.onMouseMoveAutofill = debounce(\r\n        (e: MouseEvent | TouchEvent, data: EventData) =>\r\n          this.doAutofillMouseMove(e, data),\r\n        5,\r\n      );\r\n    }\r\n    if (this.isAutoFill) {\r\n      this.onMouseMoveAutofill(e, this.sv.getData());\r\n    }\r\n  }\r\n\r\n  private getFocus(focus: Cell | null, range: RangeArea | null) {\r\n    // there was an issue that it was taking last cell from range but focus was out\r\n    if (!focus && range) {\r\n      focus = { x: range.x, y: range.y };\r\n    }\r\n    return focus || null;\r\n  }\r\n\r\n  /**\r\n   * Autofill logic:\r\n   * on mouse move apply based on previous direction (if present)\r\n   */\r\n  private doAutofillMouseMove(event: MouseEvent | TouchEvent, data: EventData) {\r\n    // if no initial - not started\r\n    if (!this.autoFillInitial) {\r\n      return;\r\n    }\r\n    const x = getPropertyFromEvent(event, 'clientX', MOBILE_CLASS);\r\n    const y = getPropertyFromEvent(event, 'clientY', MOBILE_CLASS);\r\n    // skip touch\r\n    if (x === null || y === null) {\r\n      return;\r\n    }\r\n    const current = getCurrentCell({ x, y }, data);\r\n\r\n    // first time or direction equal to start(same as first time)\r\n    if (!this.autoFillLast) {\r\n      if (!this.autoFillLast) {\r\n        this.autoFillLast = this.autoFillStart;\r\n      }\r\n    }\r\n\r\n    // check if not the latest, if latest - do nothing\r\n    if (isAfterLast(current, data.lastCell)) {\r\n      return;\r\n    }\r\n    this.autoFillLast = current;\r\n\r\n    const isSame =\r\n      current.x === this.autoFillInitial.x &&\r\n      current.y === this.autoFillInitial.y;\r\n\r\n    // if same as initial - clear\r\n    if (isSame) {\r\n      this.sv.setTempRange(null);\r\n    } else {\r\n      const area = getRange(this.autoFillInitial, this.autoFillLast);\r\n      this.sv.setTempRange({\r\n        area,\r\n        type: this.autoFillType,\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Range selection started\r\n   * Mode @param type:\r\n   * Can be triggered from MouseDown selection on element\r\n   * Or can be triggered on corner square drag\r\n   */\r\n  selectionStart(\r\n    target: Element,\r\n    data: EventData,\r\n    type = AutoFillType.selection,\r\n  ) {\r\n    /** Get cell by autofill element */\r\n    const { top, left } = target.getBoundingClientRect();\r\n    this.autoFillInitial = this.getFocus(data.focus, data.range);\r\n    this.autoFillType = type;\r\n    this.autoFillStart = getCurrentCell({ x: left, y: top }, data);\r\n  }\r\n\r\n  /**\r\n   * Clear current range selection on mouse up and mouse leave events\r\n   */\r\n  clearAutoFillSelection(focus: Cell | null, oldRange: RangeArea | null) {\r\n    // If autofill was active, apply autofill values\r\n    if (this.autoFillInitial) {\r\n      // Fetch latest focus\r\n      this.autoFillInitial = this.getFocus(focus, oldRange);\r\n\r\n      // Apply range data if autofill mode is active\r\n      if (this.autoFillType === AutoFillType.autoFill) {\r\n        const range = getRange(this.autoFillInitial, this.autoFillLast);\r\n\r\n        // If range is present, apply data\r\n        if (range) {\r\n          const {\r\n            defaultPrevented: stopApply,\r\n            detail: { range: newRange },\r\n          } = this.sv.clearRangeDataApply({\r\n            range,\r\n          });\r\n\r\n          // If data apply was not prevented, apply new range\r\n          if (!stopApply && oldRange) {\r\n            this.applyRangeWithData(newRange, oldRange);\r\n          } else {\r\n            // If data apply was prevented, clear temporary range\r\n            this.sv.setTempRange(null);\r\n          }\r\n        }\r\n      } else {\r\n        // If not autofill mode, apply range only\r\n        this.applyRangeOnly(this.autoFillInitial, this.autoFillLast);\r\n      }\r\n    }\r\n\r\n    // Reset autofill state\r\n    this.resetAutoFillState();\r\n  }\r\n\r\n  /**\r\n   * Reset autofill state\r\n   */\r\n  private resetAutoFillState() {\r\n    this.autoFillType = null;\r\n    this.autoFillInitial = null;\r\n    this.autoFillLast = null;\r\n    this.autoFillStart = null;\r\n  }\r\n\r\n  /**\r\n   * Trigger range apply events and handle responses\r\n   */\r\n  onRangeApply(\r\n    newData: DataLookup,\r\n    newRange: RangeArea | null,\r\n    oldRange: RangeArea | null,\r\n    copy: boolean = false,\r\n    clear: boolean = false,\r\n  ) {\r\n    this.sv.rangeDataApply({\r\n      data: newData,\r\n      models: collectModelsOfRange(newData, this.sv.dataStore),\r\n      type: this.sv.dataStore.get('type'),\r\n      oldRange,\r\n      newRange,\r\n      previousModels: null,\r\n      copy,\r\n      clearByKeyboard: clear,\r\n    });\r\n\r\n    this.sv.setRange(newRange);\r\n  }\r\n\r\n  /** Apply range and copy data during range application */\r\n  private applyRangeWithData(newRange: RangeArea, rangeToCopy: RangeArea) {\r\n    const rangeData: ChangedRange = {\r\n      type: this.sv.dataStore.get('type'),\r\n      colType: this.sv.columnService.type,\r\n      newData: {},\r\n      mapping: {},\r\n      newRange,\r\n      oldRange: rangeToCopy,\r\n    };\r\n    const { mapping, changed } = this.sv.columnService.getRangeData(\r\n      rangeData,\r\n      this.sv.columnService.columns,\r\n    );\r\n    rangeData.newData = changed;\r\n    rangeData.mapping = mapping;\r\n    let e = this.sv.selectionChanged(rangeData);\r\n\r\n    // if default prevented - clear range\r\n    if (e.defaultPrevented) {\r\n      this.sv.setTempRange(null);\r\n      return;\r\n    }\r\n\r\n    e = this.sv.rangeCopy(rangeData);\r\n    if (e.defaultPrevented) {\r\n      this.sv.setRange(newRange);\r\n      return;\r\n    }\r\n    this.onRangeApply(rangeData.newData, newRange, rangeToCopy);\r\n  }\r\n\r\n  /**\r\n   * Update range selection only,\r\n   * no data change (mouse selection)\r\n   */\r\n  private applyRangeOnly(start?: Cell | null, end?: Cell | null) {\r\n    // no changes to apply\r\n    if (!start || !end) {\r\n      return;\r\n    }\r\n\r\n    const newRange = getRange(start, end);\r\n    this.sv.setRange(newRange);\r\n  }\r\n}\r\n"]}

package/dist/collection/components/overlay/keyboard.service.js

@@ -0,0 +1,158 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { getRange } from "../../store/index";
+import { codesLetter, isAll, isClear, isCopy, isCut, isEnterKeyValue, isPaste, isTab, timeout, RESIZE_INTERVAL, isBack, } from "../../utils";
+import { getCoordinate, isAfterLast, isBeforeFirst, } from "./selection.utils";
+const DIRECTION_CODES = [
+    codesLetter.TAB,
+    codesLetter.ARROW_UP,
+    codesLetter.ARROW_DOWN,
+    codesLetter.ARROW_LEFT,
+    codesLetter.ARROW_RIGHT,
+];
+export class KeyboardService {
+    constructor(sv) {
+        this.sv = sv;
+    }
+    async keyDown(e, canRange, isEditMode, { range, focus }) {
+        // IF EDIT MODE
+        if (isEditMode) {
+            switch (e.code) {
+                case codesLetter.ESCAPE:
+                    this.sv.cancel();
+                    break;
+                case codesLetter.TAB:
+                    this.keyChangeSelection(e, canRange);
+                    break;
+            }
+            return;
+        }
+        // IF NOT EDIT MODE
+        // pressed clear key
+        if (range && isClear(e.code)) {
+            this.sv.clearCell();
+            return;
+        }
+        // below works with focus only
+        if (!focus) {
+            return;
+        }
+        // tab key means same as arrow right
+        if (isTab(e.code)) {
+            this.keyChangeSelection(e, canRange);
+            return;
+        }
+        // pressed enter
+        if (isEnterKeyValue(e.key)) {
+            this.sv.change();
+            return;
+        }
+        // copy operation
+        if (isCopy(e)) {
+            return;
+        }
+        // cut operation
+        if (isCut(e)) {
+            return;
+        }
+        // paste operation
+        if (isPaste(e)) {
+            this.sv.internalPaste();
+            return;
+        }
+        if (isBack(e)) {
+            // rollback
+            e.preventDefault();
+            this.sv.rollback();
+            return;
+        }
+        // select all
+        if (isAll(e)) {
+            e.preventDefault();
+            // if (canRange) {
+            //   this.selectAll(e);
+            // }
+            return;
+        }
+        // pressed letter key
+        if (e.key.length === 1) {
+            this.sv.change(e.key);
+            return;
+        }
+        // pressed arrow, change selection position
+        if (await this.keyChangeSelection(e, canRange)) {
+            return;
+        }
+    }
+    // private selectAll(e: KeyboardEvent) {
+    //   const range = this.sv.selectionStore.get('range');
+    //   const focus = this.sv.selectionStore.get('focus');
+    //   // if no range or focus - do nothing
+    //   if (!range || !focus) {
+    //     return;
+    //   }
+    //   e.preventDefault();
+    //   this.sv.selectAll();
+    // }
+    async keyChangeSelection(e, canRange) {
+        const data = this.changeDirectionKey(e, canRange);
+        if (!data) {
+            return false;
+        }
+        // this interval needed for several cases
+        // grid could be resized before next click
+        // at this case to avoid screen jump we use this interval
+        await timeout(RESIZE_INTERVAL + 30);
+        const range = this.sv.selectionStore.get('range');
+        const focus = this.sv.selectionStore.get('focus');
+        return this.keyPositionChange(data.changes, range, focus, data.isMulti);
+    }
+    keyPositionChange(changes, range, focus, isMulti = false) {
+        if (!range || !focus) {
+            return false;
+        }
+        const data = getCoordinate(range, focus, changes, isMulti);
+        if (!data) {
+            return false;
+        }
+        const eData = this.sv.getData();
+        if (isMulti) {
+            if (isAfterLast(data.end, eData.lastCell) || isBeforeFirst(data.start)) {
+                return false;
+            }
+            const range = getRange(data.start, data.end);
+            return this.sv.range(range);
+        }
+        return this.sv.focus(data.start, changes, isAfterLast(data.start, eData.lastCell)
+            ? 1
+            : isBeforeFirst(data.start)
+                ? -1
+                : 0);
+    }
+    /** Monitor key direction changes */
+    changeDirectionKey(e, canRange) {
+        const isMulti = canRange && e.shiftKey;
+        if (DIRECTION_CODES.includes(e.code)) {
+            e.preventDefault();
+        }
+        if (e.shiftKey) {
+            switch (e.code) {
+                case codesLetter.TAB:
+                    return { changes: { x: -1 }, isMulti: false };
+            }
+        }
+        switch (e.code) {
+            case codesLetter.ARROW_UP:
+                return { changes: { y: -1 }, isMulti };
+            case codesLetter.ARROW_DOWN:
+                return { changes: { y: 1 }, isMulti };
+            case codesLetter.ARROW_LEFT:
+                return { changes: { x: -1 }, isMulti };
+            case codesLetter.TAB:
+            case codesLetter.ARROW_RIGHT:
+                return { changes: { x: 1 }, isMulti };
+        }
+    }
+}
+//# sourceMappingURL=keyboard.service.js.map

package/dist/collection/components/overlay/keyboard.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.service.js","sourceRoot":"","sources":["../../../src/components/overlay/keyboard.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { getRange } from '@store';\r\nimport {\r\n  codesLetter,\r\n  isAll,\r\n  isClear,\r\n  isCopy,\r\n  isCut,\r\n  isEnterKeyValue,\r\n  isPaste,\r\n  isTab,\r\n  timeout,\r\n  RESIZE_INTERVAL,\r\n  type Observable,\r\n  isBack,\r\n} from '../../utils';\r\nimport {\r\n  EventData,\r\n  getCoordinate,\r\n  isAfterLast,\r\n  isBeforeFirst,\r\n} from './selection.utils';\r\nimport { Cell, Nullable, RangeArea, SelectionStoreState } from '@type';\r\n\r\ntype Config = {\r\n  selectionStore: Observable<SelectionStoreState>;\r\n\r\n  // Apply changes from edit.\r\n  change(val?: any): void;\r\n  // Cancels edit. Escape changes.\r\n  cancel(): void;\r\n\r\n  clearCell(): void;\r\n  focus(\r\n    focus: Cell,\r\n    changes: Partial<Cell>,\r\n    focusNextViewport?: number,\r\n  ): boolean;\r\n\r\n  getData(): any;\r\n  internalPaste(): void;\r\n  range(range: RangeArea | null): boolean;\r\n  selectAll(): void;\r\n\r\n  rollback(): void;\r\n};\r\n\r\nconst DIRECTION_CODES: string[] = [\r\n  codesLetter.TAB,\r\n  codesLetter.ARROW_UP,\r\n  codesLetter.ARROW_DOWN,\r\n  codesLetter.ARROW_LEFT,\r\n  codesLetter.ARROW_RIGHT,\r\n];\r\nexport class KeyboardService {\r\n  constructor(private sv: Config) {}\r\n\r\n  async keyDown(\r\n    e: KeyboardEvent,\r\n    canRange: boolean,\r\n    isEditMode: boolean,\r\n    { range, focus }: Nullable<Pick<EventData, 'range' | 'focus'>>,\r\n  ) {\r\n    // IF EDIT MODE\r\n    if (isEditMode) {\r\n      switch (e.code) {\r\n        case codesLetter.ESCAPE:\r\n          this.sv.cancel();\r\n          break;\r\n        case codesLetter.TAB:\r\n          this.keyChangeSelection(e, canRange);\r\n          break;\r\n      }\r\n      return;\r\n    }\r\n\r\n    // IF NOT EDIT MODE\r\n\r\n    // pressed clear key\r\n    if (range && isClear(e.code)) {\r\n      this.sv.clearCell();\r\n      return;\r\n    }\r\n\r\n    // below works with focus only\r\n    if (!focus) {\r\n      return;\r\n    }\r\n\r\n    // tab key means same as arrow right\r\n    if (isTab(e.code)) {\r\n      this.keyChangeSelection(e, canRange);\r\n      return;\r\n    }\r\n\r\n    // pressed enter\r\n    if (isEnterKeyValue(e.key)) {\r\n      this.sv.change();\r\n      return;\r\n    }\r\n\r\n    // copy operation\r\n    if (isCopy(e)) {\r\n      return;\r\n    }\r\n\r\n    // cut operation\r\n    if (isCut(e)) {\r\n      return;\r\n    }\r\n\r\n    // paste operation\r\n    if (isPaste(e)) {\r\n      this.sv.internalPaste();\r\n      return;\r\n    }\r\n\r\n    if (isBack(e)) {\r\n      // rollback\r\n      e.preventDefault();\r\n      this.sv.rollback();\r\n      return;\r\n    }\r\n\r\n    // select all\r\n    if (isAll(e)) {\r\n      e.preventDefault();\r\n      // if (canRange) {\r\n      //   this.selectAll(e);\r\n      // }\r\n      return;\r\n    }\r\n\r\n    // pressed letter key\r\n    if (e.key.length === 1) {\r\n      this.sv.change(e.key);\r\n      return;\r\n    }\r\n\r\n    // pressed arrow, change selection position\r\n    if (await this.keyChangeSelection(e, canRange)) {\r\n      return;\r\n    }\r\n  }\r\n\r\n  // private selectAll(e: KeyboardEvent) {\r\n  //   const range = this.sv.selectionStore.get('range');\r\n  //   const focus = this.sv.selectionStore.get('focus');\r\n  //   // if no range or focus - do nothing\r\n  //   if (!range || !focus) {\r\n  //     return;\r\n  //   }\r\n  //   e.preventDefault();\r\n  //   this.sv.selectAll();\r\n  // }\r\n\r\n  async keyChangeSelection(e: KeyboardEvent, canRange: boolean) {\r\n    const data = this.changeDirectionKey(e, canRange);\r\n    if (!data) {\r\n      return false;\r\n    }\r\n\r\n    // this interval needed for several cases\r\n    // grid could be resized before next click\r\n    // at this case to avoid screen jump we use this interval\r\n    await timeout(RESIZE_INTERVAL + 30);\r\n\r\n    const range = this.sv.selectionStore.get('range');\r\n    const focus = this.sv.selectionStore.get('focus');\r\n    return this.keyPositionChange(data.changes, range, focus, data.isMulti);\r\n  }\r\n\r\n  keyPositionChange(\r\n    changes: Partial<Cell>,\r\n    range: RangeArea | null,\r\n    focus: Cell | null,\r\n    isMulti = false,\r\n  ) {\r\n    if (!range || !focus) {\r\n      return false;\r\n    }\r\n    const data = getCoordinate(range, focus, changes, isMulti);\r\n    if (!data) {\r\n      return false;\r\n    }\r\n    const eData: EventData = this.sv.getData();\r\n    if (isMulti) {\r\n      if (isAfterLast(data.end, eData.lastCell) || isBeforeFirst(data.start)) {\r\n        return false;\r\n      }\r\n      const range = getRange(data.start, data.end);\r\n      return this.sv.range(range);\r\n    }\r\n    return this.sv.focus(\r\n      data.start,\r\n      changes,\r\n      isAfterLast(data.start, eData.lastCell)\r\n        ? 1\r\n        : isBeforeFirst(data.start)\r\n          ? -1\r\n          : 0,\r\n    );\r\n  }\r\n\r\n  /** Monitor key direction changes */\r\n  changeDirectionKey(\r\n    e: KeyboardEvent,\r\n    canRange: boolean,\r\n  ): { changes: Partial<Cell>; isMulti?: boolean } | void {\r\n    const isMulti = canRange && e.shiftKey;\r\n    if (DIRECTION_CODES.includes(e.code)) {\r\n      e.preventDefault();\r\n    }\r\n\r\n    if (e.shiftKey) {\r\n      switch (e.code) {\r\n        case codesLetter.TAB:\r\n          return { changes: { x: -1 }, isMulti: false };\r\n      }\r\n    }\r\n\r\n    switch (e.code) {\r\n      case codesLetter.ARROW_UP:\r\n        return { changes: { y: -1 }, isMulti };\r\n      case codesLetter.ARROW_DOWN:\r\n        return { changes: { y: 1 }, isMulti };\r\n      case codesLetter.ARROW_LEFT:\r\n        return { changes: { x: -1 }, isMulti };\r\n      case codesLetter.TAB:\r\n      case codesLetter.ARROW_RIGHT:\r\n        return { changes: { x: 1 }, isMulti };\r\n    }\r\n  }\r\n}\r\n"]}