@toolbox-web/grid 0.1.1 → 0.2.2

package/lib/plugins/selection/index.js

@@ -162,6 +162,7 @@ class w {
   warn(e) {
     console.warn(`[tbw-grid:${this.name}] ${e}`);
   }
+  // #endregion
 }
 function h(s) {
   return {
@@ -191,8 +192,8 @@ function u(s, e, t) {
 function m(s) {
   const e = [], t = h(s);
   for (let r = t.startRow; r <= t.endRow; r++)
-    for (let n = t.startCol; n <= t.endCol; n++)
-      e.push({ row: r, col: n });
+    for (let o = t.startCol; o <= t.endCol; o++)
+      e.push({ row: r, col: o });
   return e;
 }
 function A(s) {
@@ -223,9 +224,9 @@ function p(s, e, t) {
       ]
     };
   if (s === "row" && e.selected.size > 0) {
-    const r = [...e.selected].map((n) => ({
-      from: { row: n, col: 0 },
-      to: { row: n, col: t - 1 }
+    const r = [...e.selected].map((o) => ({
+      from: { row: o, col: 0 },
+      to: { row: o, col: t - 1 }
     }));
     return { mode: s, ranges: r };
   }
@@ -239,7 +240,7 @@ class v extends w {
       mode: "cell"
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   /** Row selection state (row mode) */
   selected = /* @__PURE__ */ new Set();
   lastSelected = null;
@@ -251,19 +252,21 @@ class v extends w {
   isDragging = !1;
   /** Cell selection state (cell mode) */
   selectedCell = null;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.selected.clear(), this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.isDragging = !1, this.selectedCell = null;
   }
-  // ===== Event Handlers =====
+  // #endregion
+  // #region Event Handlers
   onCellClick(e) {
-    const { rowIndex: t, colIndex: r, originalEvent: n } = e, { mode: o } = this.config;
-    if (o === "cell")
+    const { rowIndex: t, colIndex: r, originalEvent: o } = e, { mode: n } = this.config;
+    if (n === "cell")
       return this.selectedCell = { row: t, col: r }, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
-    if (o === "row")
+    if (n === "row")
       return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
-    if (o === "range") {
-      const c = n.shiftKey, l = n.ctrlKey || n.metaKey;
+    if (n === "range") {
+      const c = o.shiftKey, l = o.ctrlKey || o.metaKey;
       if (c && this.cellAnchor) {
         const i = d(this.cellAnchor, { row: t, col: r });
         l ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = i : this.ranges.push(i) : this.ranges = [i], this.activeRange = i;
@@ -289,39 +292,37 @@ class v extends w {
     return !1;
   }
   onKeyDown(e) {
-    const { mode: t } = this.config, n = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
+    const { mode: t } = this.config, o = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
     if (e.key === "Escape")
       return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
-    if (t === "cell" && n)
+    if (t === "cell" && o)
       return queueMicrotask(() => {
-        const o = this.grid;
-        this.selectedCell = { row: o.focusRow, col: o.focusCol }, this.emit("selection-change", this.#e()), this.requestAfterRender();
+        this.selectedCell = { row: this.grid.focusRow, col: this.grid.focusCol }, this.emit("selection-change", this.#e()), this.requestAfterRender();
       }), !1;
     if (t === "row" && (e.key === "ArrowUp" || e.key === "ArrowDown"))
       return queueMicrotask(() => {
-        const o = this.grid;
-        this.selected.clear(), this.selected.add(o.focusRow), this.lastSelected = o.focusRow, this.emit("selection-change", this.#e()), this.requestAfterRender();
+        this.selected.clear(), this.selected.add(this.grid.focusRow), this.lastSelected = this.grid.focusRow, this.emit("selection-change", this.#e()), this.requestAfterRender();
       }), !1;
-    if (t === "range" && n) {
-      const o = e.shiftKey;
+    if (t === "range" && o) {
+      const n = e.shiftKey;
       return queueMicrotask(() => {
-        const c = this.grid, l = c.focusRow, i = c.focusCol;
-        if (o) {
-          this.cellAnchor || (this.cellAnchor = { row: l, col: i });
-          const a = d(this.cellAnchor, { row: l, col: i });
-          this.ranges = [a], this.activeRange = a;
+        const c = this.grid.focusRow, l = this.grid.focusCol;
+        if (n) {
+          this.cellAnchor || (this.cellAnchor = { row: c, col: l });
+          const i = d(this.cellAnchor, { row: c, col: l });
+          this.ranges = [i], this.activeRange = i;
         } else
-          this.ranges = [], this.activeRange = null, this.cellAnchor = { row: l, col: i };
+          this.ranges = [], this.activeRange = null, this.cellAnchor = { row: c, col: l };
         this.emit("selection-change", this.#e()), this.requestAfterRender();
       }), !1;
     }
     if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
-      const o = this.rows.length, c = this.columns.length;
-      if (o > 0 && c > 0) {
+      const n = this.rows.length, c = this.columns.length;
+      if (n > 0 && c > 0) {
         const l = {
           startRow: 0,
           startCol: 0,
-          endRow: o - 1,
+          endRow: n - 1,
           endCol: c - 1
         };
         return this.ranges = [l], this.activeRange = l, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
@@ -335,13 +336,13 @@ class v extends w {
     this.isDragging = !0;
     const t = e.rowIndex, r = e.colIndex;
     this.cellAnchor = { row: t, col: r }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
-    const o = {
+    const n = {
       startRow: t,
       startCol: r,
       endRow: t,
       endCol: r
     };
-    return this.ranges.push(o), this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+    return this.ranges.push(n), this.activeRange = n, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
   }
   onCellMouseMove(e) {
     if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
@@ -360,23 +361,23 @@ class v extends w {
     const e = this.shadowRoot;
     if (!e) return;
     const { mode: t } = this.config;
-    e.querySelectorAll(".cell").forEach((o) => {
-      o.classList.remove("selected", "top", "bottom", "first", "last");
+    e.querySelectorAll(".cell").forEach((n) => {
+      n.classList.remove("selected", "top", "bottom", "first", "last");
     });
-    const n = e.querySelectorAll(".data-grid-row");
-    if (n.forEach((o) => {
-      o.classList.remove("selected", "row-focus");
-    }), t === "row" && (e.querySelectorAll(".cell-focus").forEach((o) => o.classList.remove("cell-focus")), n.forEach((o) => {
-      const c = o.querySelector(".cell[data-row]"), l = parseInt(c?.getAttribute("data-row") ?? "-1", 10);
-      l >= 0 && this.selected.has(l) && o.classList.add("selected", "row-focus");
+    const o = e.querySelectorAll(".data-grid-row");
+    if (o.forEach((n) => {
+      n.classList.remove("selected", "row-focus");
+    }), t === "row" && (e.querySelectorAll(".cell-focus").forEach((n) => n.classList.remove("cell-focus")), o.forEach((n) => {
+      const c = n.querySelector(".cell[data-row]"), l = parseInt(c?.getAttribute("data-row") ?? "-1", 10);
+      l >= 0 && this.selected.has(l) && n.classList.add("selected", "row-focus");
     })), t === "range" && this.ranges.length > 0) {
-      const o = this.activeRange ? h(this.activeRange) : null;
+      const n = this.activeRange ? h(this.activeRange) : null;
       e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
         const i = parseInt(l.getAttribute("data-row") ?? "-1", 10), a = parseInt(l.getAttribute("data-col") ?? "-1", 10);
-        i >= 0 && a >= 0 && u(i, a, this.ranges) && (l.classList.add("selected"), l.classList.remove("cell-focus"), o && (i === o.startRow && l.classList.add("top"), i === o.endRow && l.classList.add("bottom"), a === o.startCol && l.classList.add("first"), a === o.endCol && l.classList.add("last")));
+        i >= 0 && a >= 0 && u(i, a, this.ranges) && (l.classList.add("selected"), l.classList.remove("cell-focus"), n && (i === n.startRow && l.classList.add("top"), i === n.endRow && l.classList.add("bottom"), a === n.startCol && l.classList.add("first"), a === n.endCol && l.classList.add("last")));
       });
     }
-    t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((o) => o.classList.remove("cell-focus"));
+    t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((n) => n.classList.remove("cell-focus"));
   }
   afterRender() {
     const e = this.shadowRoot;
@@ -391,7 +392,8 @@ class v extends w {
   onScrollRender() {
     this.#t();
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Get the selected cell (cell mode only).
    */
@@ -442,7 +444,8 @@ class v extends w {
       ranges: g(this.ranges)
     }), this.requestAfterRender();
   }
-  // ===== Private Helpers =====
+  // #endregion
+  // #region Private Helpers
   #e() {
     return p(
       this.config.mode,
@@ -454,23 +457,25 @@ class v extends w {
       this.columns.length
     );
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = b;
+  // #endregion
 }
 function q(s, e, t, r) {
-  const n = new Set(s.selected);
-  let o = s.anchor;
+  const o = new Set(s.selected);
+  let n = s.anchor;
   if (t === "single")
-    n.clear(), n.add(e), o = e;
+    o.clear(), o.add(e), n = e;
   else if (t === "multiple") {
     const c = r.ctrlKey || r.metaKey;
     if (r.shiftKey && s.anchor !== null) {
       const l = Math.min(s.anchor, e), i = Math.max(s.anchor, e);
       for (let a = l; a <= i; a++)
-        n.add(a);
-    } else c ? (n.has(e) ? n.delete(e) : n.add(e), o = e) : (n.clear(), n.add(e), o = e);
+        o.add(a);
+    } else c ? (o.has(e) ? o.delete(e) : o.add(e), n = e) : (o.clear(), o.add(e), n = e);
   }
-  return { selected: n, lastSelected: e, anchor: o };
+  return { selected: o, lastSelected: e, anchor: n };
 }
 function S(s) {
   const e = /* @__PURE__ */ new Set();
@@ -480,10 +485,10 @@ function S(s) {
 }
 function K(s, e) {
   const t = [], r = [];
-  for (const n of e)
-    s.has(n) || t.push(n);
-  for (const n of s)
-    e.has(n) || r.push(n);
+  for (const o of e)
+    s.has(o) || t.push(o);
+  for (const o of s)
+    e.has(o) || r.push(o);
   return { added: t, removed: r };
 }
 export {