@svgrid/grid 1.1.0 → 1.1.1

package/src/aligned-grids.test.ts

@@ -0,0 +1,80 @@
+/**
+ * Unit tests for aligned grids: two members sharing a group mirror horizontal
+ * scroll and column-resize widths to each other. Driven with minimal fake ctxs.
+ */
+import { describe, expect, it } from 'vitest'
+import { createAlignedGrids } from './aligned-grids'
+
+function makeCtx(group: string | undefined) {
+  return {
+    props: { alignedGridGroup: group },
+    scrollContainer: { scrollLeft: 0 } as { scrollLeft: number },
+    columnWidths: {} as Record<string, number>,
+  } as Record<string, any>
+}
+
+describe('aligned grids', () => {
+  it('mirrors horizontal scroll to peers in the same group', () => {
+    const a = makeCtx('g')
+    const b = makeCtx('g')
+    const ha = createAlignedGrids(a)
+    const hb = createAlignedGrids(b)
+    const un1 = ha.register()
+    const un2 = hb.register()
+
+    ha.broadcastScroll(240)
+    expect(b.scrollContainer.scrollLeft).toBe(240)
+    // and the other way
+    hb.broadcastScroll(80)
+    expect(a.scrollContainer.scrollLeft).toBe(80)
+    un1(); un2()
+  })
+
+  it('mirrors column-resize widths to peers (matched by column id)', () => {
+    const a = makeCtx('g')
+    const b = makeCtx('g')
+    const ha = createAlignedGrids(a)
+    const hb = createAlignedGrids(b)
+    ha.register(); hb.register()
+
+    a.columnWidths = { Feb: 180 }
+    ha.broadcastWidths()
+    expect(b.columnWidths.Feb).toBe(180)
+  })
+
+  it('does NOT mirror across different groups', () => {
+    const a = makeCtx('one')
+    const b = makeCtx('two')
+    const ha = createAlignedGrids(a)
+    const hb = createAlignedGrids(b)
+    ha.register(); hb.register()
+
+    ha.broadcastScroll(200)
+    expect(b.scrollContainer.scrollLeft).toBe(0)
+    a.columnWidths = { Feb: 999 }
+    ha.broadcastWidths()
+    expect(b.columnWidths.Feb).toBeUndefined()
+  })
+
+  it('is inert with no group set, and after unregister', () => {
+    const a = makeCtx(undefined)
+    const b = makeCtx(undefined)
+    const ha = createAlignedGrids(a)
+    const hb = createAlignedGrids(b)
+    ha.register(); hb.register()
+    ha.broadcastScroll(120)
+    expect(b.scrollContainer.scrollLeft).toBe(0)
+
+    // Grouped, then unregistered -> no longer receives updates.
+    const c = makeCtx('gg')
+    const d = makeCtx('gg')
+    const hc = createAlignedGrids(c)
+    const hd = createAlignedGrids(d)
+    const unc = hc.register()
+    const und = hd.register()
+    und() // d leaves the group
+    hc.broadcastScroll(55)
+    expect(d.scrollContainer.scrollLeft).toBe(0)
+    unc()
+  })
+})

package/src/aligned-grids.ts

@@ -0,0 +1,87 @@
+// Aligned grids - keep two or more independent grids in lockstep on horizontal
+// scroll and column widths. Grids that share the same `alignedGridGroup` string
+// register with a module-level registry (same pattern as managed row dragging);
+// when one scrolls horizontally or a column is resized, the others follow.
+//
+// Loop-safety without flags: scroll sync no-ops when the target already has the
+// value (so the echo scroll event never fires); width sync compares a serialized
+// snapshot and pre-seeds it on apply, so the reactive effect that fires after
+// applying a peer's widths sees "no change" and doesn't echo.
+
+type Member = {
+  id: number;
+  applyScroll: (left: number) => void;
+  applyWidths: (widths: Record<string, number>) => void;
+};
+
+// Shared across every grid in the bundle.
+const groups = new Map<string, Map<number, Member>>();
+let seq = 0;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createAlignedGrids<TFeatures, TData>(ctx: any) {
+  const id = ++seq;
+  let lastWidthsSerial = "";
+
+  const group = (): string | null => ctx.props.alignedGridGroup ?? null;
+
+  function peers(): Member[] {
+    const g = group();
+    if (!g) return [];
+    const m = groups.get(g);
+    if (!m) return [];
+    const out: Member[] = [];
+    for (const member of m.values()) if (member.id !== id) out.push(member);
+    return out;
+  }
+
+  const self: Member = {
+    id,
+    applyScroll(left: number) {
+      const el = ctx.scrollContainer as HTMLElement | null;
+      // Only set when it differs, so no echo scroll event fires -> no loop.
+      if (el && el.scrollLeft !== left) el.scrollLeft = left;
+    },
+    applyWidths(widths: Record<string, number>) {
+      const merged = { ...(ctx.columnWidths as Record<string, number>), ...widths };
+      // Pre-seed the serial so the columnWidths effect that fires after this
+      // set sees an unchanged snapshot and skips its own broadcast.
+      lastWidthsSerial = JSON.stringify(merged);
+      ctx.columnWidths = merged;
+    },
+  };
+
+  // Register on mount; returns the unregister for the effect's cleanup.
+  function register(): () => void {
+    const g = group();
+    if (!g) return () => {};
+    let m = groups.get(g);
+    if (!m) {
+      m = new Map();
+      groups.set(g, m);
+    }
+    m.set(id, self);
+    return () => {
+      const mm = groups.get(g);
+      if (!mm) return;
+      mm.delete(id);
+      if (!mm.size) groups.delete(g);
+    };
+  }
+
+  function broadcastScroll(left: number) {
+    const p = peers();
+    for (const member of p) member.applyScroll(left);
+  }
+
+  function broadcastWidths() {
+    if (!group()) return;
+    const serial = JSON.stringify((ctx.columnWidths as Record<string, number>) ?? {});
+    if (serial === lastWidthsSerial) return; // nothing new (or echo of an apply)
+    lastWidthsSerial = serial;
+    const w = ctx.columnWidths as Record<string, number>;
+    for (const member of peers()) member.applyWidths(w);
+  }
+
+  return { register, broadcastScroll, broadcastWidths, alignedGridId: id };
+}