fix: 调整节点视图自动适配行为

修改 VueFlow 初始适配视图为 false,改为手动控制适配
优化根节点添加时的视图适配,增加缩放效果
调整子节点适配逻辑,包含所有子节点并允许更大缩放
This commit is contained in:
liuziting
2026-01-22 13:12:36 +08:00
parent a66dc9b42d
commit 407f884e84
2 changed files with 10 additions and 4 deletions

View File

@@ -156,7 +156,7 @@ const fitToView = () => {
<div class="flex-grow relative"> <div class="flex-grow relative">
<VueFlow <VueFlow
:default-edge-options="{ type: config.edgeType }" :default-edge-options="{ type: config.edgeType }"
:fit-view-on-init="true" :fit-view-on-init="false"
class="bg-white" class="bg-white"
:class="{ 'space-pressed': isSpacePressed }" :class="{ 'space-pressed': isSpacePressed }"
:pan-on-drag="panOnDrag" :pan-on-drag="panOnDrag"

View File

@@ -920,6 +920,11 @@ export function useThinkFlow({ t, locale }: { t: Translate; locale: Ref<string>
targetPosition: Position.Left targetPosition: Position.Left
}) })
// 初始添加根节点时进行一次较大的缩放,突出根节点
setTimeout(() => {
fitView({ nodes: [rootId], padding: 0.4, duration: 600, maxZoom: 1.2 })
}, 50)
ideaInput.value = '' ideaInput.value = ''
} else { } else {
const node = flowNodes.value.find(n => n.id === parentNode.id) const node = flowNodes.value.find(n => n.id === parentNode.id)
@@ -990,12 +995,13 @@ export function useThinkFlow({ t, locale }: { t: Translate; locale: Ref<string>
const childEdges = flowEdges.value.filter(e => e.source === currentParentId) const childEdges = flowEdges.value.filter(e => e.source === currentParentId)
const childIds = childEdges.map(e => e.target) const childIds = childEdges.map(e => e.target)
const nodesToFit = [currentParentId, ...childIds.slice(0, 3)] const nodesToFit = [currentParentId, ...childIds]
fitView({ fitView({
nodes: nodesToFit, nodes: nodesToFit,
padding: 0.25, padding: 0.15, // 极小边距,使内容充满屏幕
duration: 1000 duration: 1000,
maxZoom: 1.2 // 允许更大的缩放
}) })
}, 100) }, 100)
} }