I am using JointJs to create customized drag and drop flowchart. I want to enable this feature when user clicks an element after dropping, it should have an option to connect that element to any other element. I have achieved this but with some issues;

1. The Link is bi directional, it should only direct towards target

2. The Link is detachable from its source

3. The Link is a straight fixed line , it should be flexible

`paper.current.on(“element:pointerclick”, (elementView) => {
// Remove existing tools
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: {
          attrs: {
            line: {
              stroke: 'black',
              strokeWidth: 2,
              sourceMarker: { type: 'none' }, // Hide source marker
              targetMarker: {
                type: 'path',
                d: 'M 10 -5 0 0 10 5 Z',
                fill: '#007bff',
                stroke: 'none'
              }
            },
          },
        },
        // Override dragstart to ensure unidirectional links
      
      }),


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

  elementView.addTools(toolsView);


});`