graph.updateItem方法调用后,控制台打印graph.addItem创建的新边改变后信息,可以看到边的属性的变化了,但是视图上没有变化 #5968
123123-spec posted onGitHub
Describe the bug / 问题描述
graph.updateItem方法调用后,控制台打印graph.addItem创建的新边改变后信息,可以看到边的属性的变化了,但是视图上没有变化,
Reproduction link / 重现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
No response
G6 Version / G6 版本
4.x
Operating System / 操作系统
Windows
Browser / 浏览器
Chrome
Additional context / 补充说明
let previousEdgeId = null graph.on('edge:click', (evt) => { const { item } = evt; const edgeModel = item.getModel(); const currentEdgeId = edgeModel.id; const edge = evt.item; const isNewEdge = edge.getModel().isNewEdge; // 获取边是否是新创建的标记 console.log(isNewEdge, '哈哈哈哈'); // // 检查当前边是否已经被点击过 if (!isNewEdge) { const model = edge.getModel() // 获取边的模型数据 console.log(model); // 获取边的源和目标节点 const source = model.source; const target = model.target; // 删除原有的边 graph.removeItem(edge) // 获取节点的位置 const sourceNode = graph.findById(source); const targetNode = graph.findById(target); const sourceModel = sourceNode.getModel(); const targetModel = targetNode.getModel(); departmentId.value = sourceNode._cfg.model.data.raw.departmentId getDocumentFlowPeopleApp(departmentId.value) // 计算两个中间点用于弧度 const midX = (sourceModel.x + targetModel.x) / 2; const midY = (sourceModel.y + targetModel.y) / 2; const offset = 100; // 控制点偏移量 // 控制边的弧度 function computeControlPointX(length, index) { const median = Math.ceil((length + 1) / 2); // 计算中间值,使用 Math.ceil 确保计算结果正确 const offset = 100; // 偏移量,假设为100,根据实际情况调整
if (index < median - 1) {
return 100 - offset * (median - 1 - index); // 左侧边的控制点位置
} else if (index > median - 1) {
return 100 + offset * (index - median + 1); // 右侧边的控制点位置
} else {
return 100; // 中间边的控制点位置,确保返回100
}
}
let newEdge = [] // 新创建的额边
function processEdge(callback) {
watch(appList, () => {
newEdge = []
for (let i = 0; i < appList.value.length; i++) {
console.log(appList.value[i], offset * i, appList.value.length % 2, '用户到部门的应用数~~~~~~~~~');
const item = appList.value[i]
// 添加两条新的带有控制点的边
const itemEdge = graph.addItem('edge', {
source: source,
target: target,
isNewEdge: true,
hidden: true,
type: 'quadratic',
createApplicationId: item.id,
controlPoints: [{ x: computeControlPointX(appList.value.length, i), y: midY + 10 }],//edges.length === 1 ? [{ x: offset * i, y: midY + 10 }] : [{ x: computeControlPointX(appList.value.length, i), y: midY + 10 }],
label: `${item.name}-${item.familyCount}`,
labelCfg: {
position: 'middle',
autoRotate: false, // 确保标签水平
style: {
fill: '#000',
background: {
fill: '#fff',
padding: [2, 2, 2, 2],
radius: 2
},
textAlign: 'center', // 水平居中显示
fontSize: 8, // 缩小标签文字
}
},
style: {
stroke: 'red',
startArrow: false, // 隐藏箭头
}
});
newEdge.push(itemEdge)
isNewEdgeAdded = true; // 是否已经添加了新的边的标志
}
callback(newEdge)
})
return newEdge
}
processEdge((edges) => {
if (previousEdgeId !== currentEdgeId && previousEdgeId !== null) {
graph.addItem('edge', edgeModel)
edges.forEach(item => {
graph.setData(item.id, { visible: item.visible });
// 隐藏边
graph.updateItem(item, {
visible: false
});
})
// 手动触发图表的布局更新(假设图表库支持)
graph.layout();
} else {
console.log('点击了相同的边');
}
})
// 不重新渲染整个图,而是更新布局
graph.layout();
// 可以取消 isNewEdge 标记,避免下次点击再次执行第一次逻辑
model.isNewEdge = false; // 更新边的数据模型
const edges = graph.getEdges() // 获取图中所有边的集合
console.log(edges, '所有的边~~~~~~~~~~~~~');
} else {
const createApplicationId = edge.getModel().createApplicationId
router.push({
path: `/docmap/docs/family-tree`,
query: {
createApplicationId
}
});
// 取消当前边的点击事件监听,确保只能点击一次
graph.off('edge:click', undefined, isNewEdge); // 取消特定边的点击事件监听
}
// 更新上一次点击的边的 id
previousEdgeId = currentEdgeId;
}) }