@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/reui/gantt/__tests__/gantt-row-window.test.ts

@@ -0,0 +1,243 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+// 虚拟化行窗口纯函数的契约：
+// ① endIdx 为排他语义（窗口 = 行 [startIdx, endIdx)，与简报「不越 [0, rows.length)」一致）
+// ② 垫片恒等式：topPadRem + Σ窗口行高 + bottomPadRem === totalRem，任意 scrollTop 成立
+// ③ 覆盖区间为半开 [scrollTopRem, scrollTopRem + viewportRem)：与行区间恰好相切不算相交
+// 单位全程 rem（与 reui rowBars.heightRem 同源），函数不做任何 px↔rem 换算。
+import { describe, expect, it } from "vitest";
+import { buildRowOffsets, computeRowWindow } from "../gantt-row-window";
+
+/** 简报指定主表：4 行 [2,3,1.5,2] rem，prefix = [0,2,5,6.5,8.5]，total = 8.5 */
+const MAIN = buildRowOffsets([2, 3, 1.5, 2]);
+
+/** 10 行 × 1 rem：overscan 用表，prefix = [0..10]，total = 10 */
+const UNIFORM10 = buildRowOffsets(Array.from({ length: 10 }, () => 1));
+
+/** 求窗口内行高之和（借助 prefix，验证时独立于 topPad/bottomPad 计算） */
+const windowHeights = (
+  offsets: { prefix: number[] },
+  startIdx: number,
+  endIdx: number,
+) => offsets.prefix[endIdx] - offsets.prefix[startIdx];
+
+describe("buildRowOffsets", () => {
+  it("prefix[0]=0 且逐行累计，totalRem 为全高", () => {
+    expect(MAIN).toEqual({ prefix: [0, 2, 5, 6.5, 8.5], totalRem: 8.5 });
+  });
+
+  it("单行：prefix 长度为 2", () => {
+    expect(buildRowOffsets([5])).toEqual({ prefix: [0, 5], totalRem: 5 });
+  });
+
+  it("空 rows：prefix 仅含哨兵 0，totalRem 为 0", () => {
+    expect(buildRowOffsets([])).toEqual({ prefix: [0], totalRem: 0 });
+  });
+});
+
+describe("computeRowWindow：常规窗口", () => {
+  // viewport 4rem 从 0 滚起，overscan 0 → 恰好覆盖累计区间 [0,4) 的行
+  it("scrollTop=0 viewport=4：窗口为行 [0,2)，bottomPad=3", () => {
+    expect(computeRowWindow(MAIN, 0, 4, 0)).toEqual({
+      startIdx: 0,
+      endIdx: 2,
+      topPadRem: 0,
+      bottomPadRem: 3.5,
+    });
+  });
+
+  it("scrollTop=1.5 viewport=4：首行部分可见，窗口为行 [0,3)", () => {
+    expect(computeRowWindow(MAIN, 1.5, 4, 0)).toEqual({
+      startIdx: 0,
+      endIdx: 3,
+      topPadRem: 0,
+      bottomPadRem: 2,
+    });
+  });
+
+  it("scrollTop=4.5 viewport=4（滚到底）：窗口为行 [1,4)，topPad=2", () => {
+    expect(computeRowWindow(MAIN, 4.5, 4, 0)).toEqual({
+      startIdx: 1,
+      endIdx: 4,
+      topPadRem: 2,
+      bottomPadRem: 0,
+    });
+  });
+
+  it("scrollTop=2 viewport=3：视口恰好切在行边界，半开区间不含上一行", () => {
+    expect(computeRowWindow(MAIN, 2, 3, 0)).toEqual({
+      startIdx: 1,
+      endIdx: 2,
+      topPadRem: 2,
+      bottomPadRem: 3.5,
+    });
+  });
+
+  it("scrollTop=4.5 viewport=3：窗口为行 [1,4)，bottomPad=0", () => {
+    expect(computeRowWindow(MAIN, 4.5, 3, 0)).toEqual({
+      startIdx: 1,
+      endIdx: 4,
+      topPadRem: 2,
+      bottomPadRem: 0,
+    });
+  });
+});
+
+describe("computeRowWindow：垫片恒等式", () => {
+  const identity = (offsets: { prefix: number[]; totalRem: number }, scrollTop: number, viewport: number) => {
+    const w = computeRowWindow(offsets, scrollTop, viewport, 0);
+    expect(w.topPadRem + windowHeights(offsets, w.startIdx, w.endIdx) + w.bottomPadRem).toBe(
+      offsets.totalRem,
+    );
+  };
+
+  it("scrollTop=0（顶端）", () => {
+    identity(MAIN, 0, 4);
+  });
+
+  it("滚到底（scrollTop = total - viewport）", () => {
+    identity(MAIN, 4.5, 4);
+  });
+
+  it("滚过头（scrollTop 超出总高，overscroll 容错）", () => {
+    const w = computeRowWindow(MAIN, 100, 4, 0);
+    expect(w).toEqual({ startIdx: 4, endIdx: 4, topPadRem: 8.5, bottomPadRem: 0 });
+    expect(w.topPadRem + w.bottomPadRem).toBe(8.5);
+  });
+
+  it("负 scrollTop（橡皮筋回弹容错）", () => {
+    const w = computeRowWindow(MAIN, -1, 4, 0);
+    expect(w.startIdx).toBe(0);
+    identity(MAIN, -1, 4);
+  });
+
+  it("视口高于总高：全行可见，两垫片为 0", () => {
+    const w = computeRowWindow(MAIN, 0, 10, 0);
+    expect(w).toEqual({ startIdx: 0, endIdx: 4, topPadRem: 0, bottomPadRem: 0 });
+    identity(MAIN, 0, 10);
+  });
+
+  it("单行：任意 scrollTop 恒等式成立", () => {
+    const single = buildRowOffsets([5]);
+    for (const scrollTop of [0, 2, 4.9, 5, 7]) {
+      identity(single, scrollTop, 2);
+      identity(single, scrollTop, 10);
+    }
+  });
+
+  it("viewport=0（退化输入）：空窗口且恒等式成立", () => {
+    const w = computeRowWindow(MAIN, 3, 0, 0);
+    expect(w.startIdx).toBe(w.endIdx);
+    identity(MAIN, 3, 0);
+  });
+
+  it("负 viewportRem：空窗口（startIdx 收拢 endIdx）、恒等式成立（WP-B）", () => {
+    // 手算：scrollTop=3 → upperBound(prefix,3)-1 = 行 1；spanEnd=1 →
+    // lowerBound(prefix,1) = 行 1；startIdx<=endIdx，viewport<=0 分支收拢
+    // 为空窗口 {1,1}，垫片 = 2 + 6.5 = 8.5
+    expect(computeRowWindow(MAIN, 3, -2, 0)).toEqual({
+      startIdx: 1,
+      endIdx: 1,
+      topPadRem: 2,
+      bottomPadRem: 6.5,
+    });
+    identity(MAIN, 3, -2);
+    // viewport<=0 分支先于 overscan：负视口 + overscan 仍空窗口
+    expect(computeRowWindow(MAIN, 3, -2, 3)).toEqual({
+      startIdx: 1,
+      endIdx: 1,
+      topPadRem: 2,
+      bottomPadRem: 6.5,
+    });
+  });
+
+  it("overscroll（scrollTop 超总高）+ overscan：回弹期只向后扩张，endIdx 夹界（WP-B）", () => {
+    // 手算：scrollTop=100 → 基础窗口 {4,4}（全行之上，空窗口）；overscan=2
+    // 向两侧扩 → startIdx=max(0,4-2)=2，endIdx=min(4,4+2)=4——回弹期窗口
+    // 只向可视内容方向（后）扩张，endIdx 被 rowCount 夹住不越界
+    expect(computeRowWindow(MAIN, 100, 4, 2)).toEqual({
+      startIdx: 2,
+      endIdx: 4,
+      topPadRem: 5,
+      bottomPadRem: 0,
+    });
+    identity(MAIN, 100, 4);
+  });
+
+  it("任意 scrollTop × viewport 组合扫描", () => {
+    for (const scrollTop of [0, 0.5, 2, 3.7, 4, 6.5, 8, 100]) {
+      for (const viewport of [0.5, 4, 10]) {
+        identity(MAIN, scrollTop, viewport);
+        identity(UNIFORM10, scrollTop, viewport);
+      }
+    }
+  });
+});
+
+describe("computeRowWindow：overscan 扩张", () => {
+  it("overscan=0 等于基础窗口", () => {
+    expect(computeRowWindow(UNIFORM10, 4, 2, 0)).toEqual({
+      startIdx: 4,
+      endIdx: 6,
+      topPadRem: 4,
+      bottomPadRem: 4,
+    });
+  });
+
+  it("overscan=2：向两侧各扩 2 行，垫片同步收缩", () => {
+    expect(computeRowWindow(UNIFORM10, 4, 2, 2)).toEqual({
+      startIdx: 2,
+      endIdx: 8,
+      topPadRem: 2,
+      bottomPadRem: 2,
+    });
+  });
+
+  it("overscan 过大：夹在 [0, rows.length) 不越界", () => {
+    const w = computeRowWindow(UNIFORM10, 4, 2, 100);
+    expect(w).toEqual({ startIdx: 0, endIdx: 10, topPadRem: 0, bottomPadRem: 0 });
+  });
+
+  it("顶端附近：startIdx 夹到 0，endIdx 正常扩张", () => {
+    const w = computeRowWindow(UNIFORM10, 0.5, 1, 5);
+    expect(w).toEqual({ startIdx: 0, endIdx: 7, topPadRem: 0, bottomPadRem: 3 });
+  });
+
+  it("滚到底附近：endIdx 夹到 rows.length，startIdx 正常扩张", () => {
+    const w = computeRowWindow(UNIFORM10, 8.5, 1, 3);
+    expect(w).toEqual({ startIdx: 5, endIdx: 10, topPadRem: 5, bottomPadRem: 0 });
+  });
+});
+
+describe("computeRowWindow：空 rows", () => {
+  it("返回全零窗口", () => {
+    const empty = buildRowOffsets([]);
+    expect(computeRowWindow(empty, 0, 4, 0)).toEqual({
+      startIdx: 0,
+      endIdx: 0,
+      topPadRem: 0,
+      bottomPadRem: 0,
+    });
+    expect(computeRowWindow(empty, 5, 4, 3)).toEqual({
+      startIdx: 0,
+      endIdx: 0,
+      topPadRem: 0,
+      bottomPadRem: 0,
+    });
+  });
+});

package/src/components/reui/gantt/__tests__/gantt-view-virtualize.test.tsx

@@ -0,0 +1,243 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+// gantt-view 行窗口虚拟化接入的 jsdom smoke：
+// ① canVirtualize=false（jsdom 无布局，clientHeight=0）→ 全渲染，行数 === rows.length
+// ② canVirtualize=true（mock clientHeight）→ DOM 行数 ≤ 可见行 + 2×overscan，
+//    且树面板/时间轴共用同一窗口（两侧行数一致）
+// ③ 滚动（px scrollTop）经 px→rem 换算后窗口前移，垫片吸收窗口外高度
+// 渐进增强门控与 kanban `canVirtualize` 同语义：clientHeight > 0 才启用。
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Gantt } from "../gantt";
+import { GanttView } from "../gantt-view";
+
+/** 与 gantt-view 的 metrics?.minRowHeight ?? 2.5 同值：无 bars 的行回落行高 */
+const MIN_ROW_REM = 2.5;
+/** 与 useGanttRowWindow 默认 overscan 一致 */
+const OVERSCAN = 10;
+/**
+ * jsdom 根字号：computed font-size 返回 CSS 关键字 "medium"（parseFloat 得 NaN），
+ * hook 对非有限值回落 16 —— 与浏览器默认根字号一致，测试按同值推期望。
+ */
+const ROOT_REM_PX = 16;
+
+// jsdom 无 Web Animations API：custom 模式的 Base UI ScrollArea 挂载后的延迟
+// timer 会调 viewport.getAnimations()，缺失以 uncaught exception 炸测试进程。
+// jsdom 环境按文件隔离，此 stub 不外泄。
+if (typeof Element.prototype.getAnimations !== "function") {
+  Element.prototype.getAnimations = () => [];
+}
+
+function makeResources(count: number) {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `res-${i}`,
+    title: `Resource ${i}`,
+  }));
+}
+
+function renderGantt(count: number) {
+  return render(
+    <Gantt resources={makeResources(count)} events={[]} scrollbars="native">
+      <GanttView />
+    </Gantt>,
+  );
+}
+
+const treeRows = (container: HTMLElement) =>
+  container.querySelectorAll<HTMLElement>(
+    "[data-slot=gantt-tree-pane] [data-slot=gantt-row-group]",
+  );
+const timelineRows = (container: HTMLElement) =>
+  container.querySelectorAll<HTMLElement>(
+    "[data-slot=gantt-timeline-pane] [data-gantt-row]",
+  );
+const pads = (container: HTMLElement) =>
+  container.querySelectorAll<HTMLElement>("[data-gantt-row-window-pad]");
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("gantt-view 行窗口虚拟化", () => {
+  it("jsdom（clientHeight=0）不虚拟化：60 行全渲染，无垫片", () => {
+    const { container } = renderGantt(60);
+    // clientHeight 为 jsdom 默认 0，渐进增强门控关闭 → 全渲染
+    expect(treeRows(container)).toHaveLength(60);
+    expect(timelineRows(container)).toHaveLength(60);
+    expect(pads(container)).toHaveLength(0);
+  });
+
+  it("mock clientHeight=800 启用虚拟化：行数 ≤ 可见行 + 2×overscan，双 pane 同窗", () => {
+    vi.spyOn(Element.prototype, "clientHeight", "get").mockReturnValue(800);
+    const { container } = renderGantt(60);
+
+    const rows = treeRows(container);
+    const viewportRem = 800 / ROOT_REM_PX; // 50rem
+    const visibleRows = Math.ceil(viewportRem / MIN_ROW_REM); // 20
+    // scrollTop=0 时上侧 overscan 被夹到 0，实际 = 可见行 + 下侧 overscan
+    expect(rows.length).toBe(Math.min(60, visibleRows + OVERSCAN));
+    // 硬上限：可见行 + 2×overscan（简报的 smoke 断言口径）
+    expect(rows.length).toBeLessThanOrEqual(visibleRows + 2 * OVERSCAN);
+    // 共享同一窗口实例：时间轴行数与树面板一致
+    expect(timelineRows(container)).toHaveLength(rows.length);
+    // 垫片吸收窗口外高度：顶部 0、底部 = 未渲染行总高
+    expect(pads(container).length).toBeGreaterThan(0);
+  });
+
+  it("滚动 1600px（=100rem）窗口前移：首行 res-30，顶垫片 75rem", async () => {
+    vi.spyOn(Element.prototype, "clientHeight", "get").mockReturnValue(800);
+    const { container } = renderGantt(60);
+    const viewport = container.querySelector<HTMLElement>(
+      "[data-slot=gantt-timeline-pane] [data-slot=scroll-area-viewport]",
+    );
+    expect(viewport).not.toBeNull();
+    // jsdom 无布局，scrollTop 不可真实滚动 → 直接钉住读取值
+    Object.defineProperty(viewport!, "scrollTop", {
+      get: () => 1600,
+      configurable: true,
+    });
+    // 滚动回调经 rAF 节流重算：在 act 内派发并等满一帧，消除 act 告警
+    await act(async () => {
+      viewport!.dispatchEvent(new Event("scroll"));
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+
+    // 100rem 处：第 40 行（40×2.5rem）为窗口首行，上 overscan 10 → startIdx=30
+    const rows = treeRows(container);
+    expect(rows).toHaveLength(30); // 60 - 30
+    expect(rows[0].getAttribute("data-gantt-row-id")).toBe("res-30");
+    const topPad = container.querySelector<HTMLElement>(
+      "[data-slot=gantt-tree-pane] [data-gantt-row-window-pad]",
+    );
+    expect(topPad?.style.height).toBe("75rem"); // 30 × 2.5rem
+  });
+});
+
+describe("gantt-view 行窗口虚拟化：回归修复", () => {
+  it("startIdx>0 时窗口内拖拽提交全量数组的绝对目标（非局部下标）", async () => {
+    vi.spyOn(Element.prototype, "clientHeight", "get").mockReturnValue(800);
+    const onResourceReorder = vi.fn();
+    const { container } = render(
+      <Gantt
+        resources={makeResources(60)}
+        events={[]}
+        scrollbars="native"
+        onResourceReorder={onResourceReorder}
+      >
+        <GanttView />
+      </Gantt>,
+    );
+    // 滚到 startIdx=30：窗口渲染 res-30..res-59
+    const viewport = container.querySelector<HTMLElement>(
+      "[data-slot=gantt-timeline-pane] [data-slot=scroll-area-viewport]",
+    );
+    Object.defineProperty(viewport!, "scrollTop", {
+      get: () => 1600,
+      configurable: true,
+    });
+    await act(async () => {
+      viewport!.dispatchEvent(new Event("scroll"));
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+    expect(treeRows(container)[0].getAttribute("data-gantt-row-id")).toBe(
+      "res-30",
+    );
+
+    // 抓住窗口中部行 res-45 的把手拖动。jsdom 无布局（全部 rect 为 0），
+    // clientY ≥ 0 使局部 boundary = 渲染行数（=「放到窗口最后一行之后」）
+    const grip = container.querySelector<HTMLElement>(
+      '[data-gantt-row-id="res-45"] [data-slot=gantt-row-grip]',
+    );
+    expect(grip).not.toBeNull();
+    await act(async () => {
+      grip!.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+      await Promise.resolve();
+      window.dispatchEvent(
+        new PointerEvent("pointermove", { bubbles: true, clientY: 500 }),
+      );
+      await Promise.resolve();
+    });
+    await act(async () => {
+      window.dispatchEvent(
+        new PointerEvent("pointerup", { bubbles: true, pointerId: 0 }),
+      );
+      await Promise.resolve();
+    });
+
+    // 修复前：局部 boundary 30 被当全量下标 → 提交「插到 res-29 前」（index 29）
+    // 修复后：windowStart=30 对齐 → below=rows[60] 越界回落 → 追加到末尾（index 59）
+    expect(onResourceReorder).toHaveBeenCalledTimes(1);
+    const proposal = onResourceReorder.mock.calls[0][0];
+    expect(proposal.resourceId).toBe("res-45");
+    expect(proposal.parentId).toBeNull();
+    expect(proposal.index).toBe(59);
+    expect(proposal.resources.at(-1)?.id).toBe("res-45");
+  });
+
+  it("scale 切换替换 viewport 元素后，新元素的滚动仍重算窗口", async () => {
+    vi.spyOn(Element.prototype, "clientHeight", "get").mockReturnValue(800);
+    const props = {
+      resources: makeResources(60),
+      events: [],
+      // custom ScrollArea（生产默认）：ScrollArea 以 key={scale} 键控
+    };
+    const { container, rerender } = render(
+      <Gantt {...props} scale="day">
+        <GanttView />
+      </Gantt>,
+    );
+    expect(treeRows(container)).toHaveLength(30);
+
+    const oldViewport = container.querySelector<HTMLElement>(
+      "[data-slot=gantt-timeline-pane] [data-slot=scroll-area-viewport]",
+    );
+    expect(oldViewport).not.toBeNull();
+    rerender(
+      <Gantt {...props} scale="week">
+        <GanttView />
+      </Gantt>,
+    );
+    const newViewport = await vi.waitFor(() => {
+      const el = container.querySelector<HTMLElement>(
+        "[data-slot=gantt-timeline-pane] [data-slot=scroll-area-viewport]",
+      );
+      expect(el).not.toBeNull();
+      expect(el).not.toBe(oldViewport);
+      return el!;
+    });
+
+    // 修复前：监听留在已脱离的旧 viewport 上，新元素滚动不重算（首行停在 res-0）
+    // 修复后：捕获监听绑在 pane 上随 pane 存活，新 viewport 滚动照常重算
+    Object.defineProperty(newViewport, "scrollTop", {
+      get: () => 1600,
+      configurable: true,
+    });
+    await act(async () => {
+      newViewport.dispatchEvent(new Event("scroll"));
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+    expect(treeRows(container)[0].getAttribute("data-gantt-row-id")).toBe(
+      "res-30",
+    );
+    expect(treeRows(container)).toHaveLength(30);
+  });
+});