mirror of
https://github.com/Powerful-517/yys-editor.git
synced 2026-03-05 06:55:26 +00:00
fix: 修复保存后刷新网页图层全变成1的问题
问题原因: 1. LogicFlow 的 render() 方法不会自动应用节点的 zIndex 属性 2. 切换标签时,LogicFlow Label 插件对空 _label 数组处理有误导致渲染失败 3. 渲染失败后节点 zIndex 被重置为默认值 1 解决方案: 1. 在 App.vue 中,render() 后立即从保存的数据中恢复每个节点的 zIndex 2. 在 normalizeGraphData() 中清理空的 _label 数组,避免 Label 插件报错 3. 简化 FlowEditor.vue 中的 normalizeAllNodes(),移除不必要的重新分配逻辑 4. 清理调试日志,保持代码整洁 测试: - 添加节点并调整图层顺序 - 切换标签页 - 刷新浏览器 - 确认图层顺序保持不变
This commit is contained in:
46
src/App.vue
46
src/App.vue
@@ -23,7 +23,18 @@ const contentHeight = computed(() => `${windowHeight.value - toolbarHeight}px`);
|
||||
|
||||
const normalizeGraphData = (data: any) => {
|
||||
if (data && Array.isArray((data as any).nodes) && Array.isArray((data as any).edges)) {
|
||||
return data;
|
||||
// 清理节点数据,移除可能导致 Label 插件出错的空 _label 数组
|
||||
const cleanedData = {
|
||||
...data,
|
||||
nodes: data.nodes.map((node: any) => {
|
||||
const cleanedNode = { ...node };
|
||||
if (cleanedNode.properties && Array.isArray(cleanedNode.properties._label) && cleanedNode.properties._label.length === 0) {
|
||||
delete cleanedNode.properties._label;
|
||||
}
|
||||
return cleanedNode;
|
||||
})
|
||||
};
|
||||
return cleanedData;
|
||||
}
|
||||
return { nodes: [], edges: [] };
|
||||
};
|
||||
@@ -63,7 +74,21 @@ watch(
|
||||
|
||||
if (logicFlowInstance && currentTab?.graphRawData) {
|
||||
try {
|
||||
logicFlowInstance.render(normalizeGraphData(currentTab.graphRawData));
|
||||
const graphData = normalizeGraphData(currentTab.graphRawData);
|
||||
logicFlowInstance.render(graphData);
|
||||
|
||||
// 渲染后立即恢复 zIndex
|
||||
if (graphData.nodes) {
|
||||
graphData.nodes.forEach((nodeData: any) => {
|
||||
if (nodeData.zIndex !== undefined) {
|
||||
const model = logicFlowInstance.getNodeModelById(nodeData.id);
|
||||
if (model) {
|
||||
model.setZIndex(nodeData.zIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
logicFlowInstance.zoom(
|
||||
currentTab.transform?.SCALE_X ?? 1,
|
||||
[currentTab.transform?.TRANSLATE_X ?? 0, currentTab.transform?.TRANSLATE_Y ?? 0]
|
||||
@@ -86,7 +111,22 @@ watch(
|
||||
|
||||
if (logicFlowInstance && currentTab?.graphRawData) {
|
||||
try {
|
||||
logicFlowInstance.render(normalizeGraphData(currentTab.graphRawData));
|
||||
const graphData = normalizeGraphData(currentTab.graphRawData);
|
||||
logicFlowInstance.render(graphData);
|
||||
|
||||
// 渲染后立即恢复 zIndex
|
||||
if (graphData.nodes) {
|
||||
graphData.nodes.forEach((nodeData: any) => {
|
||||
if (nodeData.zIndex !== undefined) {
|
||||
const model = logicFlowInstance.getNodeModelById(nodeData.id);
|
||||
if (model) {
|
||||
console.log(`[导入数据] 恢复节点 ${nodeData.id} 的 zIndex: ${nodeData.zIndex}`);
|
||||
model.setZIndex(nodeData.zIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
logicFlowInstance.zoom(
|
||||
currentTab.transform?.SCALE_X ?? 1,
|
||||
[currentTab.transform?.TRANSLATE_X ?? 0, currentTab.transform?.TRANSLATE_Y ?? 0]
|
||||
|
||||
Reference in New Issue
Block a user