迁移节点变换交互测试接口

将旧单树测试夹具改为 trees 与 logicalSizes 参数

为拖拽和缩放入口补充所属 treeId 并更新树移除语义

apps/ai-game-creator-shell/tests/useNodeTransformInteraction.test.tsx

@@ -93,14 +93,12 @@ function canvas() {
 }
 
 function renderInteraction({
-  activeImageId = 'page',
   scale = 1,
   tree = pageTree,
   keepChildrenUnchanged = false,
   onPreviewTransform,
   selectedNodeId = null,
 }: {
-  activeImageId?: string | null;
   scale?: number;
   tree?: UITree | null;
   keepChildrenUnchanged?: boolean;
@@ -112,20 +110,28 @@ function renderInteraction({
 } = {}) {
   const canvasProjection = canvas();
   const viewportRef = { current: { scale } };
+  const trees = tree ? [tree] : [];
+  const logicalSizes = tree
+    ? new Map([[tree.src_ui_design, { width: 320, height: 180 }]])
+    : new Map<string, { width: number; height: number }>();
   const hook = renderHook(
-    ({ imageId, currentTree }) =>
+    ({ currentTrees, currentLogicalSizes }) =>
       useNodeTransformInteraction({
-        activeImageId: imageId,
         canvas: canvasProjection,
-        logicalSize: { width: 320, height: 180 },
+        trees: currentTrees,
+        logicalSizes: currentLogicalSizes,
         spaceHeld: false,
-        tree: currentTree,
         viewportRef,
         keepChildrenUnchanged,
         onPreviewTransform,
         selectedNodeId,
       }),
-    { initialProps: { imageId: activeImageId, currentTree: tree } },
+    {
+      initialProps: {
+        currentTrees: trees,
+        currentLogicalSizes: logicalSizes,
+      },
+    },
   );
   return { ...hook, canvasProjection, viewportRef };
 }
@@ -149,7 +155,11 @@ describe('useNodeTransformInteraction', () => {
     const target = gestureTarget();
 
     act(() => {
-      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
+      result.current.onNodePointerDown(
+        pointerEvent(target, 1, 0, 0),
+        child,
+        'page',
+      );
       result.current.onNodePointerMove(pointerEvent(target, 1, 4, 0));
       result.current.onNodePointerUp(pointerEvent(target, 1, 4, 0));
     });
@@ -171,7 +181,7 @@ describe('useNodeTransformInteraction', () => {
     const event = pointerEvent(target, 1, 0, 0);
 
     act(() => {
-      result.current.onNodePointerDown(event, child);
+      result.current.onNodePointerDown(event, child, 'page');
     });
 
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
@@ -211,6 +221,7 @@ describe('useNodeTransformInteraction', () => {
       result.current.onNodePointerDown(
         pointerEvent(target, 1, 0, 0),
         nestedChild,
+        'page',
       );
       result.current.onNodePointerMove(pointerEvent(target, 1, 10, 5));
       result.current.onNodePointerCancel(pointerEvent(target, 1, 10, 5));
@@ -250,7 +261,11 @@ describe('useNodeTransformInteraction', () => {
     const target = gestureTarget();
 
     act(() => {
-      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), parent);
+      result.current.onNodePointerDown(
+        pointerEvent(target, 1, 0, 0),
+        parent,
+        'page',
+      );
       result.current.onNodePointerMove(pointerEvent(target, 1, 10, 5));
     });
 
@@ -300,6 +315,7 @@ describe('useNodeTransformInteraction', () => {
         pointerEvent(target, 1, 0, 0),
         parent,
         'nw',
+        'page',
       );
       result.current.onNodeResizePointerMove(pointerEvent(target, 1, 10, 5));
     });
@@ -320,11 +336,13 @@ describe('useNodeTransformInteraction', () => {
       result.current.onNodePointerDown(
         pointerEvent(dragTarget, 1, 0, 0),
         child,
+        'page',
       );
       result.current.onNodeResizePointerDown(
         pointerEvent(resizeTarget, 2, 0, 0),
         child,
         'se',
+        'page',
       );
       result.current.onNodePointerMove(pointerEvent(dragTarget, 1, 12, 8));
     });
@@ -338,6 +356,7 @@ describe('useNodeTransformInteraction', () => {
         pointerEvent(resizeTarget, 2, 0, 0),
         child,
         'se',
+        'page',
       );
     });
     expect(canvasProjection.updateNodeTransform).toHaveBeenCalledTimes(1);
@@ -348,7 +367,11 @@ describe('useNodeTransformInteraction', () => {
     const { result, canvasProjection } = renderInteraction();
     const target = gestureTarget();
     act(() => {
-      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
+      result.current.onNodePointerDown(
+        pointerEvent(target, 1, 0, 0),
+        child,
+        'page',
+      );
     });
     expect(canvasProjection.selectNode).not.toHaveBeenCalled();
     act(() => {
@@ -363,7 +386,11 @@ describe('useNodeTransformInteraction', () => {
     const { result, canvasProjection } = renderInteraction();
     const target = gestureTarget();
     act(() => {
-      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
+      result.current.onNodePointerDown(
+        pointerEvent(target, 1, 0, 0),
+        child,
+        'page',
+      );
       result.current.onNodePointerMove(pointerEvent(target, 1, 4, 0));
       result.current.onNodePointerUp(pointerEvent(target, 1, 4, 0));
     });
@@ -371,31 +398,38 @@ describe('useNodeTransformInteraction', () => {
     expect(result.current.consumeNodeClick()).toBe(true);
 
     act(() => {
-      result.current.onNodePointerDown(pointerEvent(target, 2, 0, 0), child);
+      result.current.onNodePointerDown(
+        pointerEvent(target, 2, 0, 0),
+        child,
+        'page',
+      );
       result.current.onNodePointerCancel(pointerEvent(target, 2, 0, 0));
     });
     expect(canvasProjection.selectNode).not.toHaveBeenCalled();
     expect(result.current.consumeNodeClick()).toBe(false);
   });
 
-  it('cancels a gesture when its tree changes and ignores its later events', () => {
+  it('ignores gesture updates when its tree leaves the preview', () => {
     const { result, rerender, canvasProjection } = renderInteraction();
     const target = gestureTarget();
 
     act(() => {
-      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
+      result.current.onNodePointerDown(
+        pointerEvent(target, 1, 0, 0),
+        child,
+        'page',
+      );
     });
     act(() => {
       rerender({
-        imageId: 'other',
-        currentTree: { ...pageTree, src_ui_design: 'other' },
+        currentTrees: [{ ...pageTree, src_ui_design: 'other' }],
+        currentLogicalSizes: new Map([['other', { width: 320, height: 180 }]]),
       });
     });
     act(() => {
       result.current.onNodePointerMove(pointerEvent(target, 1, 12, 8));
     });
 
-    expect(target.releasePointerCapture).toHaveBeenCalledWith(1);
     expect(canvasProjection.updateNodeTransform).not.toHaveBeenCalled();
   });
 
@@ -404,7 +438,11 @@ describe('useNodeTransformInteraction', () => {
     const target = gestureTarget();
 
     act(() => {
-      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
+      result.current.onNodePointerDown(
+        pointerEvent(target, 1, 0, 0),
+        child,
+        'page',
+      );
       viewportRef.current.scale = Number.NaN;
       result.current.onNodePointerMove(pointerEvent(target, 1, 12, 8));
     });
@@ -418,7 +456,11 @@ describe('useNodeTransformInteraction', () => {
     const target = gestureTarget();
 
     act(() => {
-      result.current.onNodePointerDown(pointerEvent(target, 1, 0, 0), child);
+      result.current.onNodePointerDown(
+        pointerEvent(target, 1, 0, 0),
+        child,
+        'page',
+      );
       unmount();
     });