@revolist/revogrid 4.0.10 → 4.0.12

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

@@ -4,10 +4,10 @@
 import debounce from "lodash/debounce";
 import { h } from "@stencil/core";
 import { CELL_HANDLER_CLASS, MOBILE_CLASS } from "../../utils/consts";
-import { getCell, getCurrentCell, isAfterLast } from "./selection.utils";
+import { getCell, getCurrentCell, isAfterLast, } from "./selection.utils";
 import { getRange } from "../../store/selection/selection.helpers";
 import { getSourceItem } from "../../store/dataSource/data.store";
-import { getFromEvent } from "../../utils/events";
+import { getPropertyFromEvent } from "../../utils/events";
 export class AutoFillService {
     constructor(sv) {
         this.sv = sv;
@@ -32,7 +32,10 @@ export class AutoFillService {
         return (h("div", { class: {
                 [CELL_HANDLER_CLASS]: true,
                 [MOBILE_CLASS]: true,
-            }, style: { left: `${handlerStyle.right}px`, top: `${handlerStyle.bottom}px` }, onMouseDown: (e) => this.autoFillHandler(e), onTouchStart: (e) => this.autoFillHandler(e) }));
+            }, 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;
@@ -48,7 +51,9 @@ export class AutoFillService {
     get isAutoFill() {
         return !!this.autoFillType;
     }
-    /** Process mouse move events */
+    /**
+     * Process mouse move events
+     */
     selectionMouseMove(e) {
         // initiate mouse move debounce if not present
         if (!this.onMouseMoveAutofill) {
@@ -58,9 +63,7 @@ export class AutoFillService {
             this.onMouseMoveAutofill(e, this.sv.getData());
         }
     }
-    getFocus() {
-        let focus = this.sv.selectionStoreService.focused;
-        const range = this.sv.selectionStoreService.ranged;
+    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 };
@@ -76,8 +79,8 @@ export class AutoFillService {
         if (!this.autoFillInitial) {
             return;
         }
-        const x = getFromEvent(event, 'clientX', MOBILE_CLASS);
-        const y = getFromEvent(event, 'clientY', MOBILE_CLASS);
+        const x = getPropertyFromEvent(event, 'clientX', MOBILE_CLASS);
+        const y = getPropertyFromEvent(event, 'clientY', MOBILE_CLASS);
         // skip touch
         if (x === null || y === null) {
             return;
@@ -90,11 +93,12 @@ export class AutoFillService {
             }
         }
         // check if not the latest, if latest - do nothing
-        if (isAfterLast(current, data)) {
+        if (isAfterLast(current, data.lastCell)) {
             return;
         }
         this.autoFillLast = current;
-        const isSame = current.x === this.autoFillInitial.x && current.y === this.autoFillInitial.y;
+        const isSame = current.x === this.autoFillInitial.x &&
+            current.y === this.autoFillInitial.y;
         // if same as initial - clear
         if (isSame) {
             this.sv.setTempRange(null);
@@ -115,39 +119,48 @@ export class AutoFillService {
     selectionStart(target, data, type = "Selection" /* AutoFillType.selection */) {
         /** Get cell by autofill element */
         const { top, left } = target.getBoundingClientRect();
-        this.autoFillInitial = this.getFocus();
+        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
+     * Clear current range selection on mouse up and mouse leave events
      */
-    clearAutoFillSelection() {
-        // Apply autofill values on mouse up if present
+    clearAutoFillSelection(focus, oldRange) {
+        // If autofill was active, apply autofill values
         if (this.autoFillInitial) {
-            // Get latest
-            this.autoFillInitial = this.getFocus();
-            // Apply range data if present
+            // 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({
+                    const { defaultPrevented: stopApply, detail: { range: newRange }, } = this.sv.clearRangeDataApply({
                         range,
                     });
+                    // If data apply was not prevented, apply new range
                     if (!stopApply) {
-                        this.applyRangeWithData(newRange);
+                        this.applyRangeWithData(newRange, oldRange);
                     }
                     else {
-                        // if prevented - clear temp range
+                        // 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;
@@ -167,8 +180,7 @@ export class AutoFillService {
         this.sv.setRange(range);
     }
     /** Apply range and copy data during range application */
-    applyRangeWithData(newRange) {
-        const oldRange = this.sv.selectionStoreService.ranged;
+    applyRangeWithData(newRange, oldRange) {
         const rangeData = {
             type: this.sv.dataStore.get('type'),
             colType: this.sv.columnService.type,

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

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

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

@@ -3,9 +3,9 @@
  */
 import { getRange } from "../../store/selection/selection.helpers";
 import { codesLetter } from "../../utils/key.codes";
-import { isAll, isClear, isCopy, isCut, isEnterKey, isLetterKey, isPaste } from "../../utils/key.utils";
+import { isAll, isClear, isCopy, isCut, isEnterKey, isLetterKey, isPaste, } from "../../utils/key.utils";
 import { timeout } from "../../utils";
-import { getCoordinate, isAfterLast, isBeforeFirst } from "./selection.utils";
+import { getCoordinate, isAfterLast, isBeforeFirst, } from "./selection.utils";
 import { RESIZE_INTERVAL } from "../../utils/consts";
 const DIRECTION_CODES = [
     codesLetter.TAB,
@@ -18,9 +18,9 @@ export class KeyboardService {
     constructor(sv) {
         this.sv = sv;
     }
-    async keyDown(e, canRange) {
+    async keyDown(e, canRange, isEditMode, { range, focus }) {
         // IF EDIT MODE
-        if (this.sv.selectionStoreService.edited) {
+        if (isEditMode) {
             switch (e.code) {
                 case codesLetter.ESCAPE:
                     this.sv.cancel();
@@ -30,12 +30,12 @@ export class KeyboardService {
         }
         // IF NOT EDIT MODE
         // pressed clear key
-        if (this.sv.selectionStoreService.ranged && isClear(e.code)) {
+        if (range && isClear(e.code)) {
             this.sv.clearCell();
             return;
         }
         // below works with focus only
-        if (!this.sv.selectionStoreService.focused) {
+        if (!focus) {
             return;
         }
         // tab key means same as arrow right
@@ -111,7 +111,7 @@ export class KeyboardService {
         }
         if (isMulti) {
             const eData = this.sv.getData();
-            if (isAfterLast(data.end, eData) || isBeforeFirst(data.start)) {
+            if (isAfterLast(data.end, eData.lastCell) || isBeforeFirst(data.start)) {
                 return false;
             }
             const range = getRange(data.start, data.end);

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

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

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

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