balala-revogrid 1.0.0

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