tt/ttstd-infinite-canvas
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(canvas): 画布交互 - 优化节点视觉、分镜列与滑动性能

Browse Source
This commit is contained in:
ddCat committed 2026-08-22 13:34:30 +08:00
1 parent 73ff34670d
commit 8f8b0f108d
12 files changed
+42 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/pages/canvas/use-canvas-render-model.ts
+8 -15
View File
@@ -95,22 +95,15 @@ export function useCanvasRenderModel({
return hidden;
}, [collapsedBatchChildIds, collapsingBatchIds, nodeById, nodes]);
const connectionLayerBounds = useMemo(() => {
if (!nodes.length) return { left: -1, top: -1, width: 2, height: 2 };
const padding = 320;
let left = Number.POSITIVE_INFINITY;
let top = Number.POSITIVE_INFINITY;
let right = Number.NEGATIVE_INFINITY;
let bottom = Number.NEGATIVE_INFINITY;
nodes.forEach((node) => {
left = Math.min(left, node.position.x - padding);
top = Math.min(top, node.position.y - padding);
right = Math.max(right, node.position.x + node.width + padding);
bottom = Math.max(bottom, node.position.y + node.height + padding);
});
return { left, top, width: Math.max(2, right - left), height: Math.max(2, bottom - top) };
}, [nodes]);
const padding = (reduceMediaEffects ? 96 : 144) / Math.max(viewport.k, 0.05);
const left = -viewport.x / viewport.k - padding;
const top = -viewport.y / viewport.k - padding;
const width = viewportSize.width / viewport.k + padding * 2;
const height = viewportSize.height / viewport.k + padding * 2;
return { left, top, width: Math.max(2, width), height: Math.max(2, height) };
}, [reduceMediaEffects, viewport.k, viewport.x, viewport.y, viewportSize.height, viewportSize.width]);
const renderBounds = useMemo(() => {
const padding = (reduceMediaEffects ? 240 : 360) / viewport.k;
const padding = (reduceMediaEffects ? 128 : 192) / viewport.k;
const viewLeft = -viewport.x / viewport.k - padding;
const viewTop = -viewport.y / viewport.k - padding;
const viewRight = viewLeft + viewportSize.width / viewport.k + padding * 2;
web/src/pages/canvas/use-canvas-storyboard.ts
+3 -3
View File
@@ -80,7 +80,7 @@ export function useCanvasStoryboard({
...node.metadata,
storyboard: {
rows: updater(node.metadata?.storyboard?.rows || []),
visibleColumns: node.metadata?.storyboard?.visibleColumns || ["shotNumber", "durationSeconds", "plotDescription", "dialogue"],
visibleColumns: node.metadata?.storyboard?.visibleColumns || ["shotNumber", "plotDescription", "videoMotionPrompt", "dialogue"],
referenceNodeIds: node.metadata?.storyboard?.referenceNodeIds || [],
},
},
@@ -225,7 +225,7 @@ export function useCanvasStoryboard({
...scriptNode.metadata,
storyboard: {
rows: (scriptNode.metadata?.storyboard?.rows || []).map((row) => ({ ...row, imageNodeId: imageNodeByRowId.get(row.id) || row.imageNodeId })),
visibleColumns: scriptNode.metadata?.storyboard?.visibleColumns || ["shotNumber", "durationSeconds", "plotDescription", "dialogue"],
visibleColumns: scriptNode.metadata?.storyboard?.visibleColumns || ["shotNumber", "plotDescription", "videoMotionPrompt", "dialogue"],
referenceNodeIds: scriptNode.metadata?.storyboard?.referenceNodeIds || [],
},
},
@@ -313,7 +313,7 @@ export function useCanvasStoryboard({
...scriptNode.metadata,
storyboard: {
rows: allRows.map((row) => ({ ...row, videoNodeId: videoNodeByRowId.get(row.id) || row.videoNodeId })),
visibleColumns: scriptNode.metadata?.storyboard?.visibleColumns || ["shotNumber", "durationSeconds", "plotDescription", "dialogue"],
visibleColumns: scriptNode.metadata?.storyboard?.visibleColumns || ["shotNumber", "plotDescription", "videoMotionPrompt", "dialogue"],
referenceNodeIds: scriptNode.metadata?.storyboard?.referenceNodeIds || [],
},
},