@allbluecn/web-app 0.17.1 → 0.18.0

package/src/components/design/canvas/plugins/leafer-x-board/__tests__/board.test.ts

@@ -0,0 +1,321 @@
+// SPDX-License-Identifier: MIT
+
+// leafer-x-board 插件测试：真实 leafer 树（stub canvas，纯 node 环境）。
+// 前置同 history-lite：leafer 异步初始化，轮询等待 created。
+// 拖拽/CHANGE 触发方式：真实 leafer 的 on() 不暴露订阅表，DRAG 用
+// Text.one wrapper 记录回调，CHANGE 用 emitEvent 手动派发。
+
+import { describe, expect, it, vi } from "vitest"
+
+vi.stubGlobal("CanvasRenderingContext2D", class {})
+vi.stubGlobal("DOMMatrix", class {})
+vi.stubGlobal("ImageData", class {})
+vi.stubGlobal("Path2D", class {})
+vi.stubGlobal("OffscreenCanvas", class {})
+vi.stubGlobal("createImageBitmap", async () => ({ width: 1, height: 1, close() {} }))
+vi.stubGlobal("devicePixelRatio", 1)
+vi.stubGlobal("matchMedia", () => ({ matches: false, addListener() {}, removeListener() {} }))
+vi.stubGlobal("requestAnimationFrame", (f: () => void) => setTimeout(f, 0))
+vi.stubGlobal("cancelAnimationFrame", (i: number) => clearTimeout(i))
+
+function makeEventClass(name: string) {
+  return class {
+    type = ""
+    constructor(_type?: string, _init?: unknown) {
+      this.type = _type ?? ""
+    }
+    static get name() {
+      return name
+    }
+    preventDefault() {}
+    stopPropagation() {}
+  }
+}
+
+for (const name of [
+  "Event",
+  "MouseEvent",
+  "KeyboardEvent",
+  "PointerEvent",
+  "TouchEvent",
+  "WheelEvent",
+  "DragEvent",
+  "ClipboardEvent",
+  "AnimationEvent",
+  "TransitionEvent",
+  "MessageEvent",
+  "ErrorEvent",
+  "FocusEvent",
+  "DeviceOrientationEvent",
+  "DeviceMotionEvent",
+  "OrientationEvent",
+  "CustomEvent",
+]) {
+  if (typeof (globalThis as Record<string, unknown>)[name] === "function") continue
+  vi.stubGlobal(name, makeEventClass(name))
+}
+
+const stub2d = new Proxy(
+  {},
+  {
+    get(_t, k) {
+      if (k === "measureText")
+        return () => ({ width: 10, actualBoundingBoxAscent: 10, actualBoundingBoxDescent: 3 })
+      if (k === "getImageData") return () => ({ data: new Uint8ClampedArray(4) })
+      if (k === "createLinearGradient" || k === "createRadialGradient")
+        return () => ({ addColorStop() {} })
+      if (k === "createPattern") return () => ({})
+      return () => undefined
+    },
+    set() {
+      return true
+    },
+  },
+)
+
+vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(
+  stub2d as unknown as CanvasRenderingContext2D,
+)
+
+import { installWithModule } from "../index"
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+type LeaferModule = typeof import("leafer-editor")
+
+function findLabel(lf: unknown): Record<string, unknown> | undefined {
+  return ((lf as { children: Record<string, unknown>[] }).children ?? []).find((c) =>
+    String(c.id).startsWith("frame_label:"),
+  ) as Record<string, unknown> | undefined
+}
+
+describe("leafer-x-board", async () => {
+  const leafer = (await import("leafer-editor")) as LeaferModule
+
+  // stub 环境下 leafer-editor 的 interaction 层 DragEvent 未导出（真实浏览器
+  // 正常），合成 mod 注入官方常量（DragEvent.DRAG = "drag"，dist 核实）
+  const boardMod = {
+    PropertyEvent: leafer.PropertyEvent,
+    DragEvent: leafer.DragEvent ?? { DRAG: "drag", END: "drag.end" },
+    Text: leafer.Text,
+  }
+
+  async function makeApp() {
+    const lf = new leafer.Leafer({ width: 1000, height: 800, trackChanges: true })
+    for (let i = 0; i < 40; i++) {
+      if ((lf as unknown as { created?: boolean }).created) break
+      await sleep(20)
+    }
+    const frame = (x: number, y: number, name: string, id = "f1") =>
+      new leafer.Frame({ id, x, y, width: 390, height: 844, name })
+    return { lf, frame }
+  }
+
+  it("sync 新增画板 → 标签出现且位置在画板左上 - offsetY", async () => {
+    const { lf, frame } = await makeApp()
+    const plugin = installWithModule(boardMod as never, { tree: lf, sky: lf })
+    const f = frame(100, 100, "首页")
+    lf.add(f)
+    await sleep(30)
+
+    plugin.sync([{ id: "f1", leaf: f, name: "首页" }])
+    await sleep(20)
+
+    const label = findLabel(lf)
+    expect(label).toBeDefined()
+    expect(label?.text).toBe("首页")
+    // sky 即 lf 本身（无变换），标签 y = 画板 world y(100) - 28
+    expect(label?.y).toBeCloseTo(72, 5)
+
+    plugin.destroy()
+    lf.destroy()
+  })
+
+  it("sync 改名 → 标签文本更新；删除画板 → 标签移除", async () => {
+    const { lf, frame } = await makeApp()
+    const plugin = installWithModule(boardMod as never, { tree: lf, sky: lf })
+    const f = frame(0, 0, "旧名")
+    lf.add(f)
+    plugin.sync([{ id: "f1", leaf: f, name: "旧名" }])
+    await sleep(20)
+
+    plugin.sync([{ id: "f1", leaf: f, name: "新名" }])
+    await sleep(20)
+    const label = findLabel(lf)
+    expect(label?.text).toBe("新名")
+
+    plugin.sync([])
+    await sleep(20)
+    // 只剩画板本身
+    expect((lf as unknown as { children: unknown[] }).children.length).toBe(1)
+
+    plugin.destroy()
+    lf.destroy()
+  })
+
+  it("pickLabel 命中返回业务 id，未命中返回 null", async () => {
+    const { lf, frame } = await makeApp()
+    const plugin = installWithModule(boardMod as never, { tree: lf, sky: lf })
+    const f = frame(0, 0, "画板")
+    lf.add(f)
+    plugin.sync([{ id: "f1", leaf: f, name: "画板" }])
+    await sleep(20)
+
+    // identity 变换下 client ≈ sky 内部坐标；标签 bounds 约 (0,-28,宽,18)。
+    // Text.one 的 measureText stub 宽度不确定，取左上角 -3px（容差内）
+    expect(plugin.pickLabel(2, -26)).toBe("f1")
+    // 画板内部远离标签区域
+    expect(plugin.pickLabel(200, 400)).toBeNull()
+
+    plugin.destroy()
+    lf.destroy()
+  })
+
+  it("画板移动后 sync 重投影标签", async () => {
+    const { lf, frame } = await makeApp()
+    const plugin = installWithModule(boardMod as never, { tree: lf, sky: lf })
+    const f = frame(0, 0, "画板")
+    lf.add(f)
+    plugin.sync([{ id: "f1", leaf: f, name: "画板" }])
+    await sleep(20)
+
+    // 业务侧移动画板（改 x/y 后调 sync）
+    ;(f as unknown as { x: number; y: number }).x = 500
+    ;(f as unknown as { x: number; y: number }).y = 300
+    plugin.sync([{ id: "f1", leaf: f, name: "画板" }])
+    await sleep(20)
+
+    const label = findLabel(lf)
+    expect(label?.x).toBeCloseTo(500, 5)
+    expect(label?.y).toBeCloseTo(272, 5)
+
+    plugin.destroy()
+    lf.destroy()
+  })
+
+  it("拖标签事件链路：DRAG/END 派发不抛错，END 触发 onFrameMove 回调", async () => {
+    // 位移驱动联动断言：drag.start 记录画板锚点 client，DRAG 用 totalX/totalY
+    // （官方 DragEvent 屏幕累计位移）换算新位置——不依赖 label 被 leafer 位移
+    // （editor 选中元素后 selector.proxy 接管拖拽，标签不再被位移）
+    const { lf, frame } = await makeApp()
+    const moved: string[] = []
+    const plugin = installWithModule(boardMod as never, { tree: lf, sky: lf }, {
+      onFrameMove: (id) => moved.push(id),
+    })
+    const f = frame(100, 100, "画板")
+    lf.add(f)
+    plugin.sync([{ id: "f1", leaf: f, name: "画板" }])
+    await sleep(20)
+
+    const label = findLabel(lf) as unknown as {
+      emitEvent: (e: unknown) => void
+      emit: (type: string, data?: unknown) => void
+    }
+    expect(() =>
+      (label as unknown as { emitEvent: (e: unknown) => void }).emitEvent(
+        new (leafer.DragEvent as unknown as new (t: string) => unknown)("drag"),
+      ),
+    ).not.toThrow()
+    // leafer 的 emitEvent 对 drag 类事件走内部状态机（无真实拖拽时被吞），
+    // 用 emit 直发（与 on 配对的官方底层 API）
+    label.emit("drag.end")
+    await sleep(20)
+    expect(moved).toEqual(["f1"])
+    // 位移驱动：drag.start 锚定 → drag(totalX/totalY) 移动画板
+    const x0 = (f as unknown as { x: number }).x
+    label.emit("drag.start")
+    label.emit("drag", { totalX: 50, totalY: 25 })
+    await sleep(20)
+    const fMut = f as unknown as { x: number; y: number }
+    expect(fMut.x).toBeCloseTo(x0 + 50, 0)
+    label.emit("drag")
+
+    plugin.destroy()
+    lf.destroy()
+  })
+
+  it("zoomLayer CHANGE（视口变化）自动重投影", async () => {
+    const { lf, frame } = await makeApp()
+    const plugin = installWithModule(boardMod as never, { tree: lf, sky: lf })
+    const f = frame(100, 100, "画板")
+    lf.add(f)
+    plugin.sync([{ id: "f1", leaf: f, name: "画板" }])
+    await sleep(20)
+
+    // 模拟视口变换：lf（zoomLayer）scaleX=2 后派发 property.change
+    ;(lf as unknown as { scaleX: number }).scaleX = 2
+    lf.emitEvent(
+      new leafer.PropertyEvent(leafer.PropertyEvent.CHANGE, lf, "scaleX", 1, 2),
+    )
+    await sleep(20)
+
+    // scaleX=2 后画板 world 左上 x = 200，标签应跟随到 client x=200（identity client）
+    const label = findLabel(lf)
+    expect(label?.x).toBeCloseTo(200, 5)
+
+    plugin.destroy()
+    lf.destroy()
+  })
+
+  // ===== FS-8.3「生成中」脉冲态：generating 画板渲染脉冲虚线边框 =====
+
+  function findGeneratingRect(lf: unknown): Record<string, unknown> | undefined {
+    return ((lf as { children: Record<string, unknown>[] }).children ?? []).find((c) =>
+      String(c.id).startsWith("frame_generating:"),
+    ) as Record<string, unknown> | undefined
+  }
+
+  it("sync(generating) → 脉冲虚线框出现且贴合画板 bounds；缺省后移除", async () => {
+    const { lf, frame } = await makeApp()
+    const pulseMod = { ...boardMod, Rect: leafer.Rect }
+    const plugin = installWithModule(pulseMod as never, { tree: lf, sky: lf })
+    const f = frame(100, 100, "画板")
+    lf.add(f)
+
+    plugin.sync([{ id: "f1", leaf: f, name: "画板", generating: true }])
+    await sleep(20)
+
+    const rect = findGeneratingRect(lf)
+    expect(rect).toBeDefined()
+    expect(rect?.skipJSON).toBe(true)
+    expect(Array.isArray(rect?.dashPattern)).toBe(true)
+    // identity 变换下：框贴合画板视觉 bounds（x=100, y=100, 390x844）
+    expect(rect?.x).toBeCloseTo(100, 5)
+    expect(rect?.y).toBeCloseTo(100, 5)
+    expect(rect?.width).toBeCloseTo(390, 3)
+    expect(rect?.height).toBeCloseTo(844, 3)
+
+    // generating 退场 → 框移除
+    plugin.sync([{ id: "f1", leaf: f, name: "画板" }])
+    await sleep(20)
+    expect(findGeneratingRect(lf)).toBeUndefined()
+
+    plugin.destroy()
+    lf.destroy()
+  })
+
+  it("画板移动后 sync 重投影脉冲框；destroy 清理脉冲框", async () => {
+    const { lf, frame } = await makeApp()
+    const pulseMod = { ...boardMod, Rect: leafer.Rect }
+    const plugin = installWithModule(pulseMod as never, { tree: lf, sky: lf })
+    const f = frame(0, 0, "画板")
+    lf.add(f)
+    plugin.sync([{ id: "f1", leaf: f, name: "画板", generating: true }])
+    await sleep(20)
+
+    ;(f as unknown as { x: number; y: number }).x = 500
+    ;(f as unknown as { y: number }).y = 300
+    plugin.sync([{ id: "f1", leaf: f, name: "画板", generating: true }])
+    await sleep(20)
+
+    const rect = findGeneratingRect(lf)
+    expect(rect?.x).toBeCloseTo(500, 5)
+    expect(rect?.y).toBeCloseTo(300, 5)
+
+    plugin.destroy()
+    await sleep(20)
+    // destroy 后 sky 中不残留脉冲框
+    expect(findGeneratingRect(lf)).toBeUndefined()
+    lf.destroy()
+  })
+})