@revolist/revogrid 4.0.2-next → 4.0.2

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

@@ -1,358 +1,389 @@
-import { Component, Method, Event, Prop, Listen } from '@stencil/core';
-import debounce from 'lodash/debounce';
-import { setItems } from '../../store/dataSource/data.store';
-import { DRAGG_TEXT } from '../../utils/consts';
-import RowOrderService from './rowOrderService';
+import debounce from "lodash/debounce";
+import { setItems } from "../../store/dataSource/data.store";
+import { DRAGG_TEXT } from "../../utils/consts";
+import RowOrderService from "./order-row.service";
 export class OrderEditor {
-  constructor() {
-    this.rowMoveFunc = debounce((y) => {
-      const rgRow = this.rowOrderService.move(y, this.getData());
-      if (rgRow !== null) {
-        this.internalRowDrag.emit(rgRow);
-      }
-    }, 5);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Listeners
-  //
-  // --------------------------------------------------------------------------
-  onMouseOut() {
-    this.clearOrder();
-  }
-  /** Action finished inside of the document */
-  onMouseUp(e) {
-    this.endOrder(e);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  // --------------------------------------------------------------------------
-  async dragStart(e) {
-    e.preventDefault();
-    // extra check if previous ended
-    if (this.moveFunc) {
-      this.clearOrder();
+    constructor() {
+        this.events = [];
+        this.rowMoveFunc = debounce((y) => {
+            const rgRow = this.rowOrderService.move(y, this.getData());
+            if (rgRow !== null) {
+                this.rowDrag.emit(rgRow);
+            }
+        }, 5);
+        this.parent = undefined;
+        this.dimensionRow = undefined;
+        this.dimensionCol = undefined;
+        this.dataStore = undefined;
     }
-    const data = this.getData();
-    const cell = this.rowOrderService.startOrder(e, data);
-    const pos = this.rowOrderService.getRow(e.y, data);
-    const dragStartEvent = this.internalRowDragStart.emit({ cell, text: DRAGG_TEXT, pos, event: e });
-    if (dragStartEvent.defaultPrevented) {
-      return;
-    }
-    this.moveFunc = (e) => this.move(e);
-    document.addEventListener('mousemove', this.moveFunc);
-  }
-  async endOrder(e) {
-    this.rowOrderService.endOrder(e, this.getData());
-    this.clearOrder();
-  }
-  async clearOrder() {
-    this.rowOrderService.clear();
-    document.removeEventListener('mousemove', this.moveFunc);
-    this.moveFunc = null;
-    this.internalRowDragEnd.emit();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Component methods
-  //
-  // --------------------------------------------------------------------------
-  move({ x, y }) {
-    this.internalRowMouseMove.emit({ x, y });
-    this.rowMoveFunc(y);
-  }
-  connectedCallback() {
-    this.rowOrderService = new RowOrderService({ positionChanged: (f, t) => this.onPositionChanged(f, t) });
-  }
-  onPositionChanged(from, to) {
-    const dropEvent = this.initialRowDropped.emit({ from, to });
-    if (dropEvent.defaultPrevented) {
-      return;
-    }
-    const items = [...this.dataStore.get('items')];
-    const toMove = items.splice(from, 1);
-    items.splice(to, 0, ...toMove);
-    setItems(this.dataStore, items);
-  }
-  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",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "dimensionRow": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Observable<RevoGrid.DimensionSettingsState>",
-        "resolved": "ObservableMap<DimensionSettingsState>",
-        "references": {
-          "Observable": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "dimensionCol": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Observable<RevoGrid.DimensionSettingsState>",
-        "resolved": "ObservableMap<DimensionSettingsState>",
-        "references": {
-          "Observable": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
+    // #endregion
+    // #region Methods
+    async dragStart(e) {
+        e.originalEvent.preventDefault();
+        // extra check if previous ended
+        if (this.events.length) {
+            this.clearOrder();
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "dataStore": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Observable<DataSourceState<RevoGrid.DataType, RevoGrid.DimensionRows>>",
-        "resolved": "ObservableMap<DataSourceState<DataType, DimensionRows>>",
-        "references": {
-          "Observable": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "DataSourceState": {
-            "location": "import",
-            "path": "../../store/dataSource/data.store"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
+        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,
+        });
+        if (dragStartEvent.defaultPrevented) {
+            return;
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Static stores, not expected to change during component lifetime"
-      }
+        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);
     }
-  }; }
-  static get events() { return [{
-      "method": "internalRowDragStart",
-      "name": "internalRowDragStart",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row drag started"
-      },
-      "complexType": {
-        "original": "{\n    cell: Selection.Cell;\n    text: string;\n    pos: RevoGrid.PositionItem;\n    event: MouseEvent;\n  }",
-        "resolved": "{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; }",
-        "references": {
-          "Selection": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "internalRowDragEnd",
-      "name": "internalRowDragEnd",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row drag ended"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "internalRowDrag",
-      "name": "internalRowDrag",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row move"
-      },
-      "complexType": {
-        "original": "RevoGrid.PositionItem",
-        "resolved": "PositionItem",
-        "references": {
-          "RevoGrid": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
-        }
-      }
-    }, {
-      "method": "internalRowMouseMove",
-      "name": "internalRowMouseMove",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row mouse move"
-      },
-      "complexType": {
-        "original": "Selection.Cell",
-        "resolved": "Cell",
-        "references": {
-          "Selection": {
-            "location": "import",
-            "path": "../../interfaces"
-          }
+    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();
+    }
+    // #endregion
+    move({ x, y }) {
+        this.rowMouseMove.emit({ x, y });
+        this.rowMoveFunc(y);
+    }
+    connectedCallback() {
+        this.rowOrderService = new RowOrderService({
+            positionChanged: (f, t) => this.onPositionChanged(f, t),
+        });
+    }
+    onPositionChanged(from, to) {
+        const dropEvent = this.rowDropped.emit({ from, to });
+        if (dropEvent.defaultPrevented) {
+            return;
         }
-      }
-    }, {
-      "method": "initialRowDropped",
-      "name": "initialRowDropped",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Row dragged, new range ready to be applied"
-      },
-      "complexType": {
-        "original": "{ from: number; to: number }",
-        "resolved": "{ from: number; to: number; }",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "dragStart": {
-      "complexType": {
-        "signature": "(e: MouseEvent) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "endOrder": {
-      "complexType": {
-        "signature": "(e: MouseEvent) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "clearOrder": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
+        const items = [...this.dataStore.get('items')];
+        const toMove = items.splice(from, 1);
+        items.splice(to, 0, ...toMove);
+        setItems(this.dataStore, items);
+    }
+    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",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Parent element"
+                }
+            },
+            "dimensionRow": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DimensionSettingsState>",
+                    "resolved": "ObservableMap<DimensionSettingsState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::Observable"
+                        },
+                        "DimensionSettingsState": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::DimensionSettingsState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dimension settings Y"
+                }
+            },
+            "dimensionCol": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DimensionSettingsState>",
+                    "resolved": "ObservableMap<DimensionSettingsState>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::Observable"
+                        },
+                        "DimensionSettingsState": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::DimensionSettingsState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dimension settings X"
+                }
+            },
+            "dataStore": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Observable<DSourceState<DataType, DimensionRows>>",
+                    "resolved": "ObservableMap<DSourceState<DataType, DimensionRows>>",
+                    "references": {
+                        "Observable": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::Observable"
+                        },
+                        "DSourceState": {
+                            "location": "import",
+                            "path": "../../store/dataSource/data.store",
+                            "id": "src/store/dataSource/data.store.ts::DSourceState"
+                        },
+                        "DataType": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::DataType"
+                        },
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "../../types/dimension",
+                            "id": "src/types/dimension.ts::DimensionRows"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Static stores, not expected to change during component lifetime"
+                }
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowDragStart",
+                "name": "rowdragstartinit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row drag started"
+                },
+                "complexType": {
+                    "original": "{\n    cell: Cell;\n    text: string;\n    pos: PositionItem;\n    event: MouseEvent;\n  }",
+                    "resolved": "{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; }",
+                    "references": {
+                        "Cell": {
+                            "location": "import",
+                            "path": "../../types/selection",
+                            "id": "src/types/selection.ts::Cell"
+                        },
+                        "PositionItem": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::PositionItem"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowDragEnd",
+                "name": "rowdragendinit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row drag ended started"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "rowDrag",
+                "name": "rowdragmoveinit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row move started"
+                },
+                "complexType": {
+                    "original": "PositionItem",
+                    "resolved": "PositionItem",
+                    "references": {
+                        "PositionItem": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::PositionItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "rowMouseMove",
+                "name": "rowdragmousemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Row mouse move started"
+                },
+                "complexType": {
+                    "original": "Cell",
+                    "resolved": "Cell",
+                    "references": {
+                        "Cell": {
+                            "location": "import",
+                            "path": "../../types/selection",
+                            "id": "src/types/selection.ts::Cell"
+                        }
+                    }
+                }
+            }, {
+                "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  }",
+                    "resolved": "{ from: number; to: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "dragStart": {
+                "complexType": {
+                    "signature": "(e: DragStartEvent) => Promise<void>",
+                    "parameters": [{
+                            "name": "e",
+                            "type": "{ originalEvent: MouseEvent; model: ColumnDataSchemaModel; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DragStartEvent": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.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": []
+                }
+            }
+        };
     }
-  }; }
-  static get listeners() { return [{
-      "name": "mouseleave",
-      "method": "onMouseOut",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "mouseup",
-      "method": "onMouseUp",
-      "target": "document",
-      "capture": false,
-      "passive": true
-    }]; }
 }
+//# sourceMappingURL=revogr-order-editor.js.map