@toolbox-web/grid 0.0.3 → 0.0.5

package/lib/plugins/selection/index.js

@@ -1,4 +1,4 @@
-class w {
+class f {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -97,6 +97,26 @@ class w {
   get shadowRoot() {
     return this.grid?.shadowRoot ?? null;
   }
+  /**
+   * Get the disconnect signal for event listener cleanup.
+   * This signal is aborted when the grid disconnects from the DOM.
+   * Use this when adding event listeners that should be cleaned up automatically.
+   *
+   * Best for:
+   * - Document/window-level listeners added in attach()
+   * - Listeners on the grid element itself
+   * - Any listener that should persist across renders
+   *
+   * Not needed for:
+   * - Listeners on elements created in afterRender() (removed with element)
+   *
+   * @example
+   * element.addEventListener('click', handler, { signal: this.disconnectSignal });
+   * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
+   */
+  get disconnectSignal() {
+    return this.grid?.disconnectSignal;
+  }
   /**
    * Log a warning message.
    */
@@ -104,7 +124,7 @@ class w {
     console.warn(`[tbw-grid:${this.name}] ${e}`);
   }
 }
-function d(s) {
+function h(s) {
   return {
     startRow: Math.min(s.startRow, s.endRow),
     startCol: Math.min(s.startCol, s.endCol),
@@ -112,38 +132,38 @@ function d(s) {
     endCol: Math.max(s.startCol, s.endCol)
   };
 }
-function R(s) {
-  const e = d(s);
+function w(s) {
+  const e = h(s);
   return {
     from: { row: e.startRow, col: e.startCol },
     to: { row: e.endRow, col: e.endCol }
   };
 }
-function g(s) {
-  return s.map(R);
+function d(s) {
+  return s.map(w);
 }
-function C(s, e, t) {
-  const r = d(t);
-  return s >= r.startRow && s <= r.endRow && e >= r.startCol && e <= r.endCol;
+function R(s, e, t) {
+  const l = h(t);
+  return s >= l.startRow && s <= l.endRow && e >= l.startCol && e <= l.endCol;
 }
-function u(s, e, t) {
-  return t.some((r) => C(s, e, r));
+function g(s, e, t) {
+  return t.some((l) => R(s, e, l));
 }
-function m(s) {
-  const e = [], t = d(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 });
+function C(s) {
+  const e = [], t = h(s);
+  for (let l = t.startRow; l <= t.endRow; l++)
+    for (let r = t.startCol; r <= t.endCol; r++)
+      e.push({ row: l, col: r });
   return e;
 }
-function b(s) {
+function m(s) {
   const e = /* @__PURE__ */ new Map();
   for (const t of s)
-    for (const r of m(t))
-      e.set(`${r.row},${r.col}`, r);
+    for (const l of C(t))
+      e.set(`${l.row},${l.col}`, l);
   return [...e.values()];
 }
-function f(s, e) {
+function u(s, e) {
   return {
     startRow: s.row,
     startCol: s.col,
@@ -151,7 +171,7 @@ function f(s, e) {
     endCol: e.col
   };
 }
-function A(s, e, t) {
+function b(s, e, t) {
   if (s === "cell" && e.selectedCell)
     return {
       mode: s,
@@ -163,15 +183,15 @@ function A(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 l = [...e.selected].map((r) => ({
+      from: { row: r, col: 0 },
+      to: { row: r, col: t - 1 }
     }));
-    return { mode: s, ranges: r };
+    return { mode: s, ranges: l };
   }
-  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: g(e.ranges) } : { mode: s, ranges: [] };
+  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: d(e.ranges) } : { mode: s, ranges: [] };
 }
-class p extends w {
+class v extends f {
   name = "selection";
   version = "1.0.0";
   get defaultConfig() {
@@ -197,32 +217,32 @@ class p extends w {
   }
   // ===== Event Handlers =====
   onCellClick(e) {
-    const { rowIndex: t, colIndex: r, originalEvent: n } = e, { mode: o } = this.config;
-    if (o === "cell")
-      return this.selectedCell = { row: t, col: r }, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
-    if (o === "row")
+    const { rowIndex: t, colIndex: l, originalEvent: r } = e, { mode: n } = this.config;
+    if (n === "cell")
+      return this.selectedCell = { row: t, col: l }, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
+    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 i = n.shiftKey, a = n.ctrlKey || n.metaKey;
-      if (i && this.cellAnchor) {
-        const l = f(this.cellAnchor, { row: t, col: r });
-        a ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = l : this.ranges.push(l) : this.ranges = [l], this.activeRange = l;
-      } else if (a) {
-        const l = {
+    if (n === "range") {
+      const a = r.shiftKey, i = r.ctrlKey || r.metaKey;
+      if (a && this.cellAnchor) {
+        const o = u(this.cellAnchor, { row: t, col: l });
+        i ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = o : this.ranges.push(o) : this.ranges = [o], this.activeRange = o;
+      } else if (i) {
+        const o = {
           startRow: t,
-          startCol: r,
+          startCol: l,
           endRow: t,
-          endCol: r
+          endCol: l
         };
-        this.ranges.push(l), this.activeRange = l, this.cellAnchor = { row: t, col: r };
+        this.ranges.push(o), this.activeRange = o, this.cellAnchor = { row: t, col: l };
       } else {
-        const l = {
+        const o = {
           startRow: t,
-          startCol: r,
+          startCol: l,
           endRow: t,
-          endCol: r
+          endCol: l
         };
-        this.ranges = [l], this.activeRange = l, this.cellAnchor = { row: t, col: r };
+        this.ranges = [o], this.activeRange = o, this.cellAnchor = { row: t, col: l };
       }
       return this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
     }
@@ -233,15 +253,15 @@ class p extends w {
     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 === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
-      const r = this.rows.length, n = this.columns.length;
-      if (r > 0 && n > 0) {
-        const o = {
+      const l = this.rows.length, r = this.columns.length;
+      if (l > 0 && r > 0) {
+        const n = {
           startRow: 0,
           startCol: 0,
-          endRow: r - 1,
-          endCol: n - 1
+          endRow: l - 1,
+          endCol: r - 1
         };
-        return this.ranges = [o], this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+        return this.ranges = [n], this.activeRange = n, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
       }
     }
     return !1;
@@ -250,45 +270,63 @@ class p extends w {
     if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0 || e.originalEvent.shiftKey && this.cellAnchor)
       return;
     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 t = e.rowIndex, l = e.colIndex;
+    this.cellAnchor = { row: t, col: l }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
+    const n = {
       startRow: t,
-      startCol: r,
+      startCol: l,
       endRow: t,
-      endCol: r
+      endCol: l
     };
-    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;
-    const t = f(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
+    const t = u(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
     return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = t : this.ranges.push(t), this.activeRange = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
   }
   onCellMouseUp(e) {
     if (this.config.mode === "range" && this.isDragging)
       return this.isDragging = !1, !0;
   }
-  afterRender() {
+  /**
+   * Apply selection classes to visible cells/rows.
+   * Shared by afterRender and onScrollRender.
+   */
+  #t() {
     const e = this.shadowRoot;
     if (!e) return;
-    const t = e.children[0], { mode: r } = this.config;
-    this.grid.setAttribute("data-selection-mode", r), t && t.classList.toggle("selecting", this.isDragging), e.querySelectorAll(".cell").forEach((i) => {
-      i.classList.remove("selected", "top", "bottom", "first", "last");
+    const { mode: t } = this.config;
+    e.querySelectorAll(".cell").forEach((n) => {
+      n.classList.remove("selected", "top", "bottom", "first", "last");
     });
-    const o = e.querySelectorAll(".data-grid-row");
-    if (o.forEach((i) => {
-      i.classList.remove("selected");
-    }), r === "row" && (o.forEach((i) => i.classList.remove("row-focus")), o.forEach((i) => {
-      const a = i.querySelector(".cell[data-row]"), l = parseInt(a?.getAttribute("data-row") ?? "-1", 10);
-      l >= 0 && this.selected.has(l) && i.classList.add("selected", "row-focus");
-    })), r === "range" && this.ranges.length > 0) {
-      const i = this.activeRange ? d(this.activeRange) : null;
-      e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
-        const c = parseInt(l.getAttribute("data-row") ?? "-1", 10), h = parseInt(l.getAttribute("data-col") ?? "-1", 10);
-        c >= 0 && h >= 0 && u(c, h, this.ranges) && (l.classList.add("selected"), i && (c === i.startRow && l.classList.add("top"), c === i.endRow && l.classList.add("bottom"), h === i.startCol && l.classList.add("first"), h === i.endCol && l.classList.add("last")));
+    const r = e.querySelectorAll(".data-grid-row");
+    if (r.forEach((n) => {
+      n.classList.remove("selected", "row-focus");
+    }), t === "row" && r.forEach((n) => {
+      const a = n.querySelector(".cell[data-row]"), i = parseInt(a?.getAttribute("data-row") ?? "-1", 10);
+      i >= 0 && this.selected.has(i) && (n.classList.add("selected", "row-focus"), n.querySelectorAll(".cell-focus").forEach((o) => o.classList.remove("cell-focus")));
+    }), t === "range" && this.ranges.length > 0) {
+      const n = this.activeRange ? h(this.activeRange) : null;
+      e.querySelectorAll(".cell[data-row][data-col]").forEach((i) => {
+        const o = parseInt(i.getAttribute("data-row") ?? "-1", 10), c = parseInt(i.getAttribute("data-col") ?? "-1", 10);
+        o >= 0 && c >= 0 && g(o, c, this.ranges) && (i.classList.add("selected"), i.classList.remove("cell-focus"), n && (o === n.startRow && i.classList.add("top"), o === n.endRow && i.classList.add("bottom"), c === n.startCol && i.classList.add("first"), c === n.endCol && i.classList.add("last")));
       });
     }
+    t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((n) => n.classList.remove("cell-focus"));
+  }
+  afterRender() {
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = e.children[0], { mode: l } = this.config;
+    this.grid.setAttribute("data-selection-mode", l), t && t.classList.toggle("selecting", this.isDragging), this.#t();
+  }
+  /**
+   * Called after scroll-triggered row rendering.
+   * Reapplies selection classes to recycled DOM elements.
+   */
+  onScrollRender() {
+    this.#t();
   }
   // ===== Public API =====
   /**
@@ -307,19 +345,19 @@ class p extends w {
    * Get all selected cell ranges in public format.
    */
   getRanges() {
-    return g(this.ranges);
+    return d(this.ranges);
   }
   /**
    * Get all selected cells across all ranges.
    */
   getSelectedCells() {
-    return b(this.ranges);
+    return m(this.ranges);
   }
   /**
    * Check if a specific cell is in range selection.
    */
   isCellSelected(e, t) {
-    return u(e, t, this.ranges);
+    return g(e, t, this.ranges);
   }
   /**
    * Clear all selection.
@@ -338,12 +376,12 @@ class p extends w {
       endCol: t.to.col
     })), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
       mode: this.config.mode,
-      ranges: g(this.ranges)
+      ranges: d(this.ranges)
     }), this.requestAfterRender();
   }
   // ===== Private Helpers =====
   #e() {
-    return A(
+    return b(
       this.config.mode,
       {
         selectedCell: this.selectedCell,
@@ -388,39 +426,39 @@ class p extends w {
     }
   `;
 }
-function y(s, e, t, r) {
-  const n = new Set(s.selected);
-  let o = s.anchor;
+function p(s, e, t, l) {
+  const r = new Set(s.selected);
+  let n = s.anchor;
   if (t === "single")
-    n.clear(), n.add(e), o = e;
+    r.clear(), r.add(e), n = e;
   else if (t === "multiple") {
-    const i = r.ctrlKey || r.metaKey;
-    if (r.shiftKey && s.anchor !== null) {
-      const a = Math.min(s.anchor, e), l = Math.max(s.anchor, e);
-      for (let c = a; c <= l; c++)
-        n.add(c);
-    } else i ? (n.has(e) ? n.delete(e) : n.add(e), o = e) : (n.clear(), n.add(e), o = e);
-  }
-  return { selected: n, lastSelected: e, anchor: o };
+    const a = l.ctrlKey || l.metaKey;
+    if (l.shiftKey && s.anchor !== null) {
+      const i = Math.min(s.anchor, e), o = Math.max(s.anchor, e);
+      for (let c = i; c <= o; c++)
+        r.add(c);
+    } else a ? (r.has(e) ? r.delete(e) : r.add(e), n = e) : (r.clear(), r.add(e), n = e);
+  }
+  return { selected: r, lastSelected: e, anchor: n };
 }
-function x(s) {
+function y(s) {
   const e = /* @__PURE__ */ new Set();
   for (let t = 0; t < s; t++)
     e.add(t);
   return e;
 }
 function S(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);
-  return { added: t, removed: r };
+  const t = [], l = [];
+  for (const r of e)
+    s.has(r) || t.push(r);
+  for (const r of s)
+    e.has(r) || l.push(r);
+  return { added: t, removed: l };
 }
 export {
-  p as SelectionPlugin,
+  v as SelectionPlugin,
   S as computeSelectionDiff,
-  y as handleRowClick,
-  x as selectAll
+  p as handleRowClick,
+  y as selectAll
 };
 //# sourceMappingURL=index.js.map