fix: 调整节点视图自动适配行为
修改 VueFlow 初始适配视图为 false,改为手动控制适配 优化根节点添加时的视图适配,增加缩放效果 调整子节点适配逻辑,包含所有子节点并允许更大缩放
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user