diff --git a/apps/ai-game-creator-shell/tests/useNodeTransformInteraction.test.tsx b/apps/ai-game-creator-shell/tests/useNodeTransformInteraction.test.tsx index e2f8339f9..f135a1db6 100644 --- a/apps/ai-game-creator-shell/tests/useNodeTransformInteraction.test.tsx +++ b/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(); 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(); });