antvis/G6

graph.updateItem方法调用后,控制台打印graph.addItem创建的新边改变后信息,可以看到边的属性的变化了,但是视图上没有变化 #5968

123123-spec posted onGitHub

Describe the bug / 问题描述

graph.updateItem方法调用后,控制台打印graph.addItem创建的新边改变后信息,可以看到边的属性的变化了,但是视图上没有变化,

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;

}) }


你好,请问这个你当初怎么解决了

posted by a7650 about 2 months ago

Fund this Issue

$0.00
Funded

Pull requests