lsp-grid 1.0.0

package/dist/collection/components/order/order-row.service.js

@@ -0,0 +1,72 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { getItemByPosition } from "../../store/index";
+export default class RowOrderService {
+    constructor(config) {
+        this.config = config;
+        this.currentCell = null;
+        this.previousRow = null;
+    }
+    /** Drag finished, calculate and apply changes */
+    endOrder(e, data) {
+        if (this.currentCell === null) {
+            return;
+        }
+        const newRow = this.getCell(e, data);
+        // if position changed
+        if (newRow.y !== this.currentCell.y) {
+            // rgRow dragged out table
+            if (newRow.y < 0) {
+                newRow.y = 0;
+            }
+            // rgRow dragged to the top
+            else if (newRow.y < this.currentCell.y) {
+                newRow.y++;
+            }
+            this.config.positionChanged(this.currentCell.y, newRow.y);
+        }
+        this.clear();
+    }
+    /** Drag started, reserve initial cell for farther use */
+    startOrder(e, data) {
+        this.currentCell = this.getCell(e, data);
+        return this.currentCell;
+    }
+    move(y, data) {
+        const rgRow = this.getRow(y, data);
+        // if rgRow same as previous or below range (-1 = 0) do nothing
+        if (this.previousRow === rgRow.itemIndex || rgRow.itemIndex < -1) {
+            return null;
+        }
+        this.previousRow = rgRow.itemIndex;
+        return rgRow;
+    }
+    /** Drag stopped, probably cursor outside of document area */
+    clear() {
+        this.currentCell = null;
+        this.previousRow = null;
+    }
+    /** Calculate cell based on x, y position */
+    getRow(y, { el, rows }) {
+        const { top } = el.getBoundingClientRect();
+        const topRelative = y - top;
+        const rgRow = getItemByPosition(rows, topRelative);
+        const absolutePosition = {
+            itemIndex: rgRow.itemIndex,
+            start: rgRow.start + top,
+            end: rgRow.end + top,
+        };
+        return absolutePosition;
+    }
+    /** Calculate cell based on x, y position */
+    getCell({ x, y }, { el, rows, cols }) {
+        const { top, left } = el.getBoundingClientRect();
+        const topRelative = y - top;
+        const leftRelative = x - left;
+        const rgRow = getItemByPosition(rows, topRelative);
+        const rgCol = getItemByPosition(cols, leftRelative);
+        return { x: rgCol.itemIndex, y: rgRow.itemIndex };
+    }
+}
+//# sourceMappingURL=order-row.service.js.map

package/dist/collection/components/order/order-row.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-row.service.js","sourceRoot":"","sources":["../../../src/components/order/order-row.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { getItemByPosition } from '@store';\r\nimport { DimensionSettingsState, PositionItem, Cell } from '@type';\r\n\r\ntype EventData = { el: HTMLElement; rows: DimensionSettingsState; cols: DimensionSettingsState };\r\ninterface Config {\r\n  positionChanged(from: number, to: number): void;\r\n}\r\n\r\nexport default class RowOrderService {\r\n  private currentCell: Cell | null = null;\r\n  private previousRow: number | null = null;\r\n\r\n  constructor(private config: Config) {}\r\n\r\n  /** Drag finished, calculate and apply changes */\r\n  endOrder(e: MouseEvent, data: EventData) {\r\n    if (this.currentCell === null) {\r\n      return;\r\n    }\r\n    const newRow = this.getCell(e, data);\r\n\r\n    // if position changed\r\n    if (newRow.y !== this.currentCell.y) {\r\n      // rgRow dragged out table\r\n      if (newRow.y < 0) {\r\n        newRow.y = 0;\r\n      }\r\n      // rgRow dragged to the top\r\n      else if (newRow.y < this.currentCell.y) {\r\n        newRow.y++;\r\n      }\r\n      this.config.positionChanged(this.currentCell.y, newRow.y);\r\n    }\r\n    this.clear();\r\n  }\r\n\r\n  /** Drag started, reserve initial cell for farther use */\r\n  startOrder(e: MouseEvent, data: EventData): Cell {\r\n    this.currentCell = this.getCell(e, data);\r\n    return this.currentCell;\r\n  }\r\n\r\n  move(y: number, data: EventData): PositionItem | null {\r\n    const rgRow = this.getRow(y, data);\r\n    // if rgRow same as previous or below range (-1 = 0) do nothing\r\n    if (this.previousRow === rgRow.itemIndex || rgRow.itemIndex < -1) {\r\n      return null;\r\n    }\r\n    this.previousRow = rgRow.itemIndex;\r\n    return rgRow;\r\n  }\r\n\r\n  /** Drag stopped, probably cursor outside of document area */\r\n  clear() {\r\n    this.currentCell = null;\r\n    this.previousRow = null;\r\n  }\r\n\r\n  /** Calculate cell based on x, y position */\r\n  getRow(y: number, { el, rows }: EventData): PositionItem {\r\n    const { top } = el.getBoundingClientRect();\r\n    const topRelative = y - top;\r\n    const rgRow = getItemByPosition(rows, topRelative);\r\n    const absolutePosition = {\r\n      itemIndex: rgRow.itemIndex,\r\n      start: rgRow.start + top,\r\n      end: rgRow.end + top,\r\n    };\r\n    return absolutePosition;\r\n  }\r\n\r\n  /** Calculate cell based on x, y position */\r\n  getCell({ x, y }: Cell, { el, rows, cols }: EventData): Cell {\r\n    const { top, left } = el.getBoundingClientRect();\r\n    const topRelative = y - top;\r\n    const leftRelative = x - left;\r\n    const rgRow = getItemByPosition(rows, topRelative);\r\n    const rgCol = getItemByPosition(cols, leftRelative);\r\n    return { x: rgCol.itemIndex, y: rgRow.itemIndex };\r\n  }\r\n}\r\n"]}

package/dist/collection/components/order/revogr-order-editor.js

@@ -0,0 +1,461 @@
+import debounce from "lodash/debounce";
+import { getSourceItem } from "../../store/index";
+import { DRAGG_TEXT } from "../../utils/consts";
+import RowOrderService from "./order-row.service";
+/**
+ * Component for handling row order editor.
+ */
+export class OrderEditor {
+    constructor() {
+        this.events = [];
+        this.rowMoveFunc = debounce((y) => {
+            const rgRow = this.rowOrderService.move(y, this.getData());
+            if (rgRow !== null) {
+                this.rowDrag.emit(Object.assign(Object.assign({}, rgRow), { rowType: this.rowType }));
+            }
+        }, 5);
+    }
+    // #endregion
+    // #region Methods
+    async dragStart(e) {
+        e.originalEvent.preventDefault();
+        // extra check if previous ended
+        if (this.events.length) {
+            this.clearOrder();
+        }
+        const data = this.getData();
+        const cell = this.rowOrderService.startOrder(e.originalEvent, data);
+        const pos = this.rowOrderService.getRow(e.originalEvent.y, data);
+        const dragStartEvent = this.rowDragStart.emit({
+            cell,
+            text: DRAGG_TEXT,
+            pos,
+            event: e.originalEvent,
+            rowType: this.rowType,
+            model: getSourceItem(this.dataStore, pos.itemIndex),
+        });
+        if (dragStartEvent.defaultPrevented) {
+            return;
+        }
+        const moveMove = (e) => this.move(e);
+        const mouseUp = (e) => this.endOrder(e);
+        const mouseLeave = () => this.clearOrder();
+        this.events.push({
+            name: 'mousemove',
+            listener: moveMove,
+        }, {
+            name: 'mouseup',
+            listener: mouseUp,
+        }, {
+            name: 'mouseleave',
+            listener: mouseLeave,
+        });
+        document.addEventListener('mousemove', moveMove);
+        // Action finished inside of the document
+        document.addEventListener('mouseup', mouseUp);
+        document.addEventListener('mouseleave', mouseLeave);
+    }
+    async endOrder(e) {
+        this.rowOrderService.endOrder(e, this.getData());
+        this.clearOrder();
+    }
+    async clearOrder() {
+        this.rowOrderService.clear();
+        this.events.forEach(v => document.removeEventListener(v.name, v.listener));
+        this.events.length = 0;
+        this.rowDragEnd.emit({ rowType: this.rowType });
+    }
+    // #endregion
+    move({ x, y }) {
+        this.rowMouseMove.emit({ x, y, rowType: this.rowType });
+        this.rowMoveFunc(y);
+    }
+    connectedCallback() {
+        this.rowOrderService = new RowOrderService({
+            positionChanged: (from, to) => {
+                const dropEvent = this.rowDropped.emit({
+                    from,
+                    to,
+                    rowType: this.rowType,
+                });
+                if (dropEvent.defaultPrevented) {
+                    return;
+                }
+                this.rowOrderChange.emit(dropEvent.detail);
+            },
+        });
+    }
+    getData() {
+        return {
+            el: this.parent,
+            rows: this.dimensionRow.state,
+            cols: this.dimensionCol.state,
+        };
+    }
+    static get is() { return "revogr-order-editor"; }
+    static get properties() {
+        return {
+            "parent": {
+                "type": "unknown",
+                "attribute": "parent",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Parent element"
+                },
+                "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 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": false,
+                "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": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Static stores, not expected to change during component lifetime"
+                },
+                "getter": false,
+                "setter": 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": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowDragStart",
+                "name": "rowdragstartinit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row drag started"
+                },
+                "complexType": {
+                    "original": "RowDragStartDetails",
+                    "resolved": "{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; rowType: DimensionRows; model: any; }",
+                    "references": {
+                        "RowDragStartDetails": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::RowDragStartDetails"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowDragEnd",
+                "name": "rowdragendinit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row drag ended started"
+                },
+                "complexType": {
+                    "original": "{ rowType: DimensionRows }",
+                    "resolved": "{ rowType: DimensionRows; }",
+                    "references": {
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowDrag",
+                "name": "rowdragmoveinit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row move started"
+                },
+                "complexType": {
+                    "original": "PositionItem & { rowType: DimensionRows }",
+                    "resolved": "PositionItem & { rowType: DimensionRows; }",
+                    "references": {
+                        "PositionItem": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::PositionItem"
+                        },
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowMouseMove",
+                "name": "rowdragmousemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row mouse move started"
+                },
+                "complexType": {
+                    "original": "Cell & { rowType: DimensionRows }",
+                    "resolved": "Cell & { rowType: DimensionRows; }",
+                    "references": {
+                        "Cell": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::Cell"
+                        },
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowDropped",
+                "name": "rowdropinit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row dragged, new range ready to be applied"
+                },
+                "complexType": {
+                    "original": "{\r\n    from: number;\r\n    to: number;\r\n    rowType: DimensionRows;\r\n  }",
+                    "resolved": "{ from: number; to: number; rowType: DimensionRows; }",
+                    "references": {
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowOrderChange",
+                "name": "roworderchange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row drag ended finished. Time to apply data"
+                },
+                "complexType": {
+                    "original": "{\r\n    from: number;\r\n    to: number;\r\n    rowType: DimensionRows;\r\n  }",
+                    "resolved": "{ from: number; to: number; rowType: DimensionRows; }",
+                    "references": {
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "dragStart": {
+                "complexType": {
+                    "signature": "(e: DragStartEvent) => Promise<void>",
+                    "parameters": [{
+                            "name": "e",
+                            "type": "DragStartEvent",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DragStartEvent": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DragStartEvent"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "endOrder": {
+                "complexType": {
+                    "signature": "(e: MouseEvent) => Promise<void>",
+                    "parameters": [{
+                            "name": "e",
+                            "type": "MouseEvent",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clearOrder": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=revogr-order-editor.js.map

package/dist/collection/components/order/revogr-order-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revogr-order-editor.js","sourceRoot":"","sources":["../../../src/components/order/revogr-order-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Event, EventEmitter, Prop } from '@stencil/core';\r\nimport debounce from 'lodash/debounce';\r\n\r\nimport { type DSourceState, getSourceItem } from '@store';\r\nimport { DRAGG_TEXT } from '../../utils/consts';\r\nimport RowOrderService from './order-row.service';\r\nimport type {\r\n  DimensionRows,\r\n  DataType,\r\n  DimensionSettingsState,\r\n  DragStartEvent,\r\n  PositionItem,\r\n  Cell,\r\n  RowDragStartDetails,\r\n} from '@type';\r\nimport type { Observable } from '../../utils';\r\n\r\n/**\r\n * Component for handling row order editor.\r\n */\r\n@Component({ tag: 'revogr-order-editor' })\r\nexport class OrderEditor {\r\n  // #region Properties\r\n  /** Parent element */\r\n  @Prop() parent: HTMLElement;\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  /** Static stores, not expected to change during component lifetime */\r\n  @Prop() dataStore: Observable<DSourceState<DataType, DimensionRows>>;\r\n\r\n  @Prop() rowType: DimensionRows;\r\n  // #endregion\r\n\r\n  // #region Events\r\n  /** Row drag started */\r\n  @Event({ eventName: 'rowdragstartinit', cancelable: true })\r\n  rowDragStart: EventEmitter<RowDragStartDetails>;\r\n\r\n  /** Row drag ended started */\r\n  @Event({ eventName: 'rowdragendinit' })\r\n  rowDragEnd: EventEmitter<{ rowType: DimensionRows }>;\r\n\r\n  /** Row move started */\r\n  @Event({ eventName: 'rowdragmoveinit', cancelable: true })\r\n  rowDrag: EventEmitter<PositionItem & { rowType: DimensionRows }>;\r\n\r\n  /** Row mouse move started */\r\n  @Event({ eventName: 'rowdragmousemove', cancelable: true })\r\n  rowMouseMove: EventEmitter<Cell & { rowType: DimensionRows }>;\r\n\r\n  /** Row dragged, new range ready to be applied */\r\n  @Event({ eventName: 'rowdropinit', cancelable: true })\r\n  rowDropped: EventEmitter<{\r\n    from: number;\r\n    to: number;\r\n    rowType: DimensionRows;\r\n  }>;\r\n\r\n  /** Row drag ended finished. Time to apply data */\r\n  @Event({ eventName: 'roworderchange' })\r\n  rowOrderChange: EventEmitter<{\r\n    from: number;\r\n    to: number;\r\n    rowType: DimensionRows;\r\n  }>;\r\n\r\n  // #endregion\r\n\r\n  // #region Private\r\n  private rowOrderService: RowOrderService;\r\n  private events: {\r\n    name: keyof DocumentEventMap;\r\n    listener: (e: MouseEvent) => void;\r\n  }[] = [];\r\n  private rowMoveFunc = debounce((y: number) => {\r\n    const rgRow = this.rowOrderService.move(y, this.getData());\r\n    if (rgRow !== null) {\r\n      this.rowDrag.emit({\r\n        ...rgRow,\r\n        rowType: this.rowType,\r\n      });\r\n    }\r\n  }, 5);\r\n  // #endregion\r\n\r\n  // #region Methods\r\n  @Method() async dragStart(e: DragStartEvent) {\r\n    e.originalEvent.preventDefault();\r\n\r\n    // extra check if previous ended\r\n    if (this.events.length) {\r\n      this.clearOrder();\r\n    }\r\n\r\n    const data = this.getData();\r\n    const cell = this.rowOrderService.startOrder(e.originalEvent, data);\r\n    const pos = this.rowOrderService.getRow(e.originalEvent.y, data);\r\n    const dragStartEvent = this.rowDragStart.emit({\r\n      cell,\r\n      text: DRAGG_TEXT,\r\n      pos,\r\n      event: e.originalEvent,\r\n      rowType: this.rowType,\r\n      model: getSourceItem(this.dataStore, pos.itemIndex),\r\n    });\r\n    if (dragStartEvent.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    const moveMove = (e: MouseEvent) => this.move(e);\r\n    const mouseUp = (e: MouseEvent) => this.endOrder(e);\r\n    const mouseLeave = () => this.clearOrder();\r\n\r\n    this.events.push(\r\n      {\r\n        name: 'mousemove',\r\n        listener: moveMove,\r\n      },\r\n      {\r\n        name: 'mouseup',\r\n        listener: mouseUp,\r\n      },\r\n      {\r\n        name: 'mouseleave',\r\n        listener: mouseLeave,\r\n      },\r\n    );\r\n    document.addEventListener('mousemove', moveMove);\r\n    // Action finished inside of the document\r\n    document.addEventListener('mouseup', mouseUp);\r\n    document.addEventListener('mouseleave', mouseLeave);\r\n  }\r\n\r\n  @Method() async endOrder(e: MouseEvent) {\r\n    this.rowOrderService.endOrder(e, this.getData());\r\n    this.clearOrder();\r\n  }\r\n\r\n  @Method() async clearOrder() {\r\n    this.rowOrderService.clear();\r\n    this.events.forEach(v => document.removeEventListener(v.name, v.listener));\r\n    this.events.length = 0;\r\n    this.rowDragEnd.emit({ rowType: this.rowType });\r\n  }\r\n  // #endregion\r\n\r\n  move({ x, y }: { x: number; y: number }) {\r\n    this.rowMouseMove.emit({ x, y, rowType: this.rowType });\r\n    this.rowMoveFunc(y);\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.rowOrderService = new RowOrderService({\r\n      positionChanged: (from: number, to: number) => {\r\n        const dropEvent = this.rowDropped.emit({\r\n          from,\r\n          to,\r\n          rowType: this.rowType,\r\n        });\r\n        if (dropEvent.defaultPrevented) {\r\n          return;\r\n        }\r\n        this.rowOrderChange.emit(dropEvent.detail);\r\n      },\r\n    });\r\n  }\r\n\r\n  private getData() {\r\n    return {\r\n      el: this.parent,\r\n      rows: this.dimensionRow.state,\r\n      cols: this.dimensionCol.state,\r\n    };\r\n  }\r\n}\r\n"]}