e-virt-table 1.0.6 → 1.0.9

package/dist/index.es.js

@@ -2248,7 +2248,7 @@ class li {
     this.ctx = t, this.init();
   }
   init() {
-    this.bind(window, "resize", this.handleResize.bind(this)), this.bind(window, "mouseup", this.handleMouseUp.bind(this)), this.bind(window, "mousemove", this.handleMousemove.bind(this)), this.bind(this.ctx.stageElement, "click", this.handleClick.bind(this)), this.bind(window, "keydown", this.handleKeydown.bind(this)), this.bind(this.ctx.stageElement, "wheel", this.handleWheel.bind(this)), this.bind(this.ctx.stageElement, "touchstart", this.handleTouchstart.bind(this)), this.bind(this.ctx.stageElement, "touchend", this.handleTouchend.bind(this)), this.bind(this.ctx.stageElement, "touchmove", this.handleTouchmove.bind(this)), this.bind(this.ctx.stageElement, "contextmenu", this.handleContextMenu.bind(this)), this.bind(this.ctx.stageElement, "mousedown", this.handleMouseDown.bind(this)), this.bind(this.ctx.stageElement, "dblclick", this.handleDblclick.bind(this)), this.bind(this.ctx.stageElement, "mouseover", this.handleMouseover.bind(this)), this.bind(this.ctx.stageElement, "mouseout", this.handleMouseout.bind(this));
+    this.bind(window, "resize", this.handleResize.bind(this)), this.bind(window, "mouseup", this.handleMouseUp.bind(this)), this.bind(window, "mousemove", this.handleMousemove.bind(this)), this.bind(this.ctx.stageElement, "click", this.handleClick.bind(this)), this.bind(window, "keydown", this.handleKeydown.bind(this)), this.bind(this.ctx.stageElement, "wheel", this.handleWheel.bind(this)), this.bind(this.ctx.stageElement, "touchstart", this.handleTouchstart.bind(this)), this.bind(this.ctx.stageElement, "touchend", this.handleTouchend.bind(this)), this.bind(this.ctx.stageElement, "touchmove", this.handleTouchmove.bind(this)), this.bind(this.ctx.stageElement, "contextmenu", this.handleContextMenu.bind(this)), this.bind(this.ctx.stageElement, "mousedown", this.handleMouseDown.bind(this)), this.bind(this.ctx.stageElement, "dblclick", this.handleDblclick.bind(this)), this.bind(this.ctx.stageElement, "mouseover", this.handleMouseover.bind(this)), this.bind(this.ctx.stageElement, "mouseout", this.handleMouseout.bind(this)), this.bind(this.ctx.containerElement, "focusin", this.handleFocusin.bind(this)), this.bind(this.ctx.containerElement, "focusout", this.handleFocusout.bind(this));
   }
   destroy() {
     this.eventTasks.forEach((t, e) => {
@@ -2293,11 +2293,17 @@ class li {
     this.ctx.isInsideTargetContainer = !0, this.ctx.emit("mouseover", t);
   }
   handleMouseout(t) {
-    this.ctx.isInsideTargetContainer = !1, this.ctx.emit("mouseout", t);
+    this.ctx.emit("mouseout", t);
   }
   handleDblclick(t) {
     this.ctx.emit("dblclick", t);
   }
+  handleFocusin(t) {
+    this.ctx.isInsideTargetContainer = !0, this.ctx.emit("focusin", t);
+  }
+  handleFocusout(t) {
+    this.ctx.isInsideTargetContainer = !1, this.ctx.emit("focusout", t);
+  }
   bind(t, e, i, s) {
     t.addEventListener(e, i, s), this.eventTasks.set(e, i);
   }
@@ -3161,13 +3167,10 @@ class xi {
     this.focusCell !== t && (((e = this.focusCell) == null ? void 0 : e.rowKey) !== t.rowKey && (this.focusCell = t, this.emit("rowFocusChange", t)), this.focusCell = t, this.emit("cellFocusChange", t));
   }
   clearSelector() {
-    this.selector = {
-      enable: !1,
-      xArr: [-1, -1],
-      yArr: [-1, -1],
-      xArrCopy: [-1, -1],
-      yArrCopy: [-1, -1]
-    };
+    this.selector.enable = !1, this.selector.xArr = [-1, -1], this.selector.yArr = [-1, -1];
+  }
+  clearSelectorCopy() {
+    this.selector.xArrCopy = [-1, -1], this.selector.yArrCopy = [-1, -1];
   }
   clearAutofill() {
     this.autofill = {
@@ -3388,30 +3391,30 @@ class ui {
     });
   }
   onWheel(t) {
-    this.verticalScrollbar.onWheel(t), this.horizontalScrollbar.onWheel(t), this.draw(!0);
+    this.verticalScrollbar.onWheel(t), this.horizontalScrollbar.onWheel(t), this.draw();
   }
   onTouchmove(t) {
-    this.verticalScrollbar.onTouchmove(t), this.horizontalScrollbar.onTouchmove(t), this.draw(!0);
+    this.verticalScrollbar.onTouchmove(t), this.horizontalScrollbar.onTouchmove(t), this.draw();
   }
   onTouchstart(t) {
-    this.verticalScrollbar.onTouchstart(t), this.horizontalScrollbar.onTouchstart(t), this.draw(!0);
+    this.verticalScrollbar.onTouchstart(t), this.horizontalScrollbar.onTouchstart(t), this.draw();
   }
   onMouseDown(t) {
-    this.verticalScrollbar.onMouseDown(t), this.horizontalScrollbar.onMouseDown(t), this.draw(!0);
+    this.verticalScrollbar.onMouseDown(t), this.horizontalScrollbar.onMouseDown(t), this.draw();
   }
   onMouseMove(t) {
-    this.verticalScrollbar.onMouseMove(t), this.horizontalScrollbar.onMouseMove(t), this.draw(!0);
+    this.verticalScrollbar.onMouseMove(t), this.horizontalScrollbar.onMouseMove(t), this.draw();
   }
   onMouseUp() {
     this.verticalScrollbar.onMouseUp(), this.horizontalScrollbar.onMouseUp(), this.ctx.scrollerMove = !1;
   }
-  draw(t = !1) {
+  draw() {
     this.verticalScrollbar.draw(), this.horizontalScrollbar.draw();
-    const e = Math.floor(this.horizontalScrollbar.scroll), i = Math.floor(this.verticalScrollbar.scroll);
-    (e !== this.ctx.scrollX || i !== this.ctx.scrollY) && (this.ctx.emit("onScroll", e, i, t), e !== this.ctx.scrollX && this.ctx.emit("onScrollX", e, t), i !== this.ctx.scrollY && this.ctx.emit("onScrollY", i, t), this.ctx.scrollX = e, this.ctx.scrollY = i, this.ctx.emit("draw"));
+    const t = Math.floor(this.horizontalScrollbar.scroll), e = Math.floor(this.verticalScrollbar.scroll);
+    (t !== this.ctx.scrollX || e !== this.ctx.scrollY) && (this.ctx.emit("onScroll", t, e), t !== this.ctx.scrollX && this.ctx.emit("onScrollX", t), e !== this.ctx.scrollY && this.ctx.emit("onScrollY", e), this.ctx.scrollX = t, this.ctx.scrollY = e, this.ctx.emit("draw"));
   }
   setScroll(t, e) {
-    this.horizontalScrollbar.scroll = t, this.verticalScrollbar.scroll = e, this.ctx.emit("draw");
+    this.horizontalScrollbar.scroll = t, this.verticalScrollbar.scroll = e, this.ctx.emit("draw"), this.ctx.emit("onScroll", t, e);
   }
   setScrollX(t) {
     this.horizontalScrollbar.scroll = t, this.ctx.emit("draw");
@@ -3872,19 +3875,25 @@ class wi {
   }
   update() {
     this.init();
-    const { header: t, database: e, scrollY: i } = this.ctx, s = i, { data: r, positions: o } = e.getData();
-    this.ctx.maxRowIndex = r.length - 1;
-    const n = this.binarySearch(o, s);
-    if (n === -1)
-      return;
-    let h = this.binarySearch(o, s + this.visibleHeight);
-    h === -1 && (h = r.length), this.headIndex = Math.max(0, n), this.tailIndex = Math.min(this.ctx.maxRowIndex, h + 1), this.visibleRows = r.slice(this.headIndex, this.tailIndex + 1), this.ctx.body.headIndex = this.headIndex, this.ctx.body.tailIndex = this.tailIndex, this.ctx.body.visibleRows = this.visibleRows;
-    const c = [];
-    for (let d = 0; d < this.visibleRows.length; d++) {
-      const f = this.headIndex + d, u = this.visibleRows[d], { height: x, top: p } = this.ctx.database.getPositionForRowIndex(f), g = new oe(this.ctx, f, 0, p + this.y, t.width, x, u);
-      c.push(g);
+    const {
+      header: t,
+      database: e,
+      scrollY: i,
+      config: { CELL_HEIGHT: s }
+    } = this.ctx, r = i, { data: o, positions: n } = e.getData();
+    this.ctx.maxRowIndex = o.length - 1;
+    let h = this.binarySearch(n, r), c = this.binarySearch(n, r + this.visibleHeight);
+    if (c === -1 && (c = this.ctx.maxRowIndex), h === -1 && c === this.ctx.maxRowIndex) {
+      const f = Math.floor(this.visibleHeight / s);
+      h = this.ctx.maxRowIndex - f;
+    }
+    this.headIndex = Math.max(0, h), this.tailIndex = Math.min(this.ctx.maxRowIndex, c + 1), this.visibleRows = o.slice(this.headIndex, this.tailIndex + 1), this.ctx.body.headIndex = this.headIndex, this.ctx.body.tailIndex = this.tailIndex, this.ctx.body.visibleRows = this.visibleRows;
+    const d = [];
+    for (let f = 0; f < this.visibleRows.length; f++) {
+      const u = this.headIndex + f, x = this.visibleRows[f], { height: p, top: g } = this.ctx.database.getPositionForRowIndex(u), w = new oe(this.ctx, u, 0, g + this.y, t.width, p, x);
+      d.push(w);
     }
-    this.renderRows = c, this.ctx.body.renderRows = c;
+    this.renderRows = d, this.ctx.body.renderRows = d;
   }
   draw() {
     this.renderRows.forEach((t) => {
@@ -3976,7 +3985,11 @@ class yi {
     this.ctx = t, this.init();
   }
   init() {
-    this.ctx.on(
+    this.ctx.on("focusout", () => {
+      this.ctx.clearSelector(), this.ctx.emit("draw");
+    }), this.ctx.on("setMoveFocus", (t) => {
+      this.moveFocus(t);
+    }), this.ctx.on(
       "mousemove",
       Jt((t) => {
         const { offsetY: e, offsetX: i } = this.ctx.getOffset(t), s = this.ctx.isTarget() && i > 0 && i < this.ctx.body.visibleWidth && e > this.ctx.header.visibleHeight && e < this.ctx.header.visibleHeight + this.ctx.body.visibleHeight;
@@ -4033,7 +4046,7 @@ class yi {
           t.preventDefault(), this.moveFocus("RIGHT");
           return;
         }
-        if (t.code === "ArrowDown") {
+        if (t.code === "ArrowDown" || t.code === "Enter") {
           t.preventDefault(), this.moveFocus("BOTTOM");
           return;
         }
@@ -5619,13 +5632,17 @@ class Zi {
     this.ctx = t, this.initTextEditor(), this.init();
   }
   init() {
-    this.ctx.on("onScroll", () => {
+    this.ctx.on("focusout", () => {
+      this.ctx.editing || (this.cellTarget = null);
+    }), this.ctx.on("onScroll", () => {
       this.enable && this.doneEdit();
     }), this.ctx.on("cellHeaderMousedown", () => {
       this.enable && this.doneEdit(), this.cellTarget = null;
     }), this.ctx.on("keydown", (t) => {
+      if (!this.ctx.isTarget())
+        return;
       const e = t.key, i = t.ctrlKey, s = t.altKey, r = t.shiftKey, o = t.metaKey;
-      if (!(i || s || r || o || [
+      i || s || r || o || [
         // "Enter",
         "Escape",
         "Tab",
@@ -5651,14 +5668,9 @@ class Zi {
         "F9",
         "F10",
         "F11",
-        "F12"
-      ].includes(e))) {
-        if (t.code === "Enter" && !this.enable) {
-          t.preventDefault(), this.startEdit();
-          return;
-        }
-        this.startEdit();
-      }
+        "F12",
+        "Enter"
+      ].includes(e) || this.startEdit();
     }), this.ctx.on("adjustBoundaryPosition", (t) => {
       this.cellTarget = t;
       const { xArr: e, yArr: i } = this.ctx.selector;
@@ -5700,7 +5712,7 @@ class Zi {
 ` + s, this.inputEl.selectionStart = this.inputEl.selectionEnd = e + 1, this.autoSize();
           return;
         }
-        (t.code === "Escape" || t.code === "Enter") && (t.preventDefault(), this.inputEl.blur());
+        (t.code === "Escape" || t.code === "Enter") && (t.preventDefault(), this.inputEl.blur(), this.ctx.emit("setMoveFocus", "BOTTOM"));
       }
     }), this.inputEl.addEventListener("input", this.autoSize.bind(this)), this.inputEl.addEventListener("blur", () => {
       this.doneEdit();
@@ -6112,7 +6124,7 @@ class ss {
   createContainer(t, e, i, s, r) {
     t.className = "e-virt-table-container";
     const o = document.createElement("div"), n = document.createElement("canvas"), h = e || document.createElement("div");
-    o.className = "e-virt-table-stage", n.className = "e-virt-table-canvas", h.className = "e-virt-table-overlayer";
+    o.className = "e-virt-table-stage", t.tabIndex = 0, n.className = "e-virt-table-canvas", h.className = "e-virt-table-overlayer";
     const c = i || document.createElement("div");
     c.className = "e-virt-table-editor";
     const d = s, f = r;
@@ -6227,10 +6239,10 @@ class ss {
     return this.ctx.database.hasValidationError();
   }
   scrollTo(t, e) {
-    this.scrollXTo(t), this.scrollYTo(e);
+    this.scroller.setScroll(t, e);
   }
   scrollXTo(t) {
-    this.ctx.setScrollX(t);
+    this.scroller.setScrollX(t);
   }
   scrollToColkey(t) {
     this.scroller.scrollToColkey(t);
@@ -6245,7 +6257,7 @@ class ss {
     this.scroller.scrollToRowIndex(t);
   }
   scrollYTo(t) {
-    this.ctx.setScrollY(t);
+    this.scroller.setScrollY(t);
   }
   setExpandRowKeys(t, e = !0) {
     this.ctx.database.setExpandRowKeys(t, e);