JointJs拖拽流程图连接功能问题求助：单向连接等需求未实现

针对你遇到的三个问题，修改后的代码及对应解决逻辑如下：

paper.current.on("element:pointerclick", (elementView) => {
  // 移除已存在的工具
  paper.current.removeTools();

  const toolsView = new joint.dia.ToolsView({
    tools: [
      new joint.elementTools.Boundary({
        useModelGeometry: true,
        attrs: {
          rect: {
            stroke: '#000',
            strokeWidth: 2,
            fill: 'transparent'
          },
          text: {
            fill: '#000'
          },
        }
      }),

      new joint.elementTools.Connect({
        magnet: 'body',
        padding: 5,
        x: 15,
        y: 15,
        link: {
          type: 'link',
          // 配置柔性曲线连接器
          connector: {
            name: 'smooth', // 平滑曲线，也可替换为 'rounded' 生成圆角折线
            args: {
              radius: 20 // 调整该值可改变曲线弯曲程度
            }
          },
          attrs: {
            line: {
              stroke: 'black',
              strokeWidth: 2,
              sourceMarker: { type: 'none' }, // 隐藏源端箭头
              targetMarker: {
                type: 'path',
                d: 'M 10 -5 0 0 10 5 Z',
                fill: '#007bff',
                stroke: 'none'
              }
            }
          },
          // 禁止源端重新连接/分离
          reconnect: {
            source: false
          }
        },
        // 强制当前元素为链接源，避免反向连接
        pointerdown(evt, x, y) {
          joint.elementTools.Connect.prototype.pointerdown.call(this, evt, x, y);
          if (this.linkPreview) {
            this.linkPreview.model.set('source', { id: elementView.model.id });
          }
        }
      }),

      new joint.elementTools.Remove({
        useModelGeometry: true,
        x: -10,
        y: -10
      })
    ]
  });

  elementView.addTools(toolsView);
});

问题1：链接双向改为仅指向目标 #

• 保留sourceMarker: { type: 'none' }隐藏源端箭头，仅显示目标端箭头
• 重写pointerdown方法，强制链接预览的源为当前点击元素，避免拖拽时出现反向连接
• 设置reconnect.source: false，禁止源端被重新连接到其他元素，确保链接单向性

问题2：禁止链接从源端分离 #

• 通过链接配置中的reconnect: { source: false }锁定源端，无法拖动源端断开或重新连接
• 若需允许从目标端分离，保持reconnect.target: true（默认值）即可，仅锁定源端

问题3：固定直线改为柔性线条 #

• 在链接的connector属性中指定柔性连接器：
  • name: 'smooth'：生成平滑贝塞尔曲线，适合自然弯曲场景
  • 可选name: 'rounded'：生成带圆角的折线，适合规整的弯曲效果
  • 通过args.radius调整弯曲程度，数值越大曲线越平缓

内容的提问来源于stack exchange，提问作者Muhammad Hadi