Custom link

[YongheeMinnovation]

Hi there,
I'm trying to create custom link because I don't like the default link with arrow.

Here is my code.

    let graph = new joint.dia.Graph({}, {cellNamespace: joint.shape});
    let paper = new joint.dia.Paper({model: graph, cellViewNamespace: joint.shapes});

    paper = new joint.dia.Paper({
        el: document.getElementById('paper'),
        model: graph,
        width: 1500,
        drawGrid: true
    });

    var port = {
        label: {
            position: {
                name: 'left'
            },
            markup: [{
                tagName: 'text',
                selector: 'label'
            }]
        },
        attrs: { 
            portBody: { 
                magnet: true,
                width: 6,
                height: 6
            }
        },
        markup: [{
            tagName: 'rect',
            selector: 'portBody'
        }]
    };



   function drawText() {
        let inputText = document.getElementById('hmiTextBox').value;
        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(70, 25);
        rect.attr({
            body: {
                fill: 'none',
                strokeWidth: 0
            },
            label: {
                text: inputText,
                fontSize: 16
            }
        });
        rect.addPort(port);
        rect.addTo(graph);
    }

When I draw element and link using port, it draw like below picture. And I want to remove arrows and black circles in the middle.

I saw the tutorial link below, but it only explain change link manually. But I need to change the link from port. Which mean setting the link and create it when I use port.
https://resources.jointjs.com/tutorial/custom-links

Thank you all

[jamesgeorgewilliams]

Hi,

when drawing a link from an active magnet/port, the default link is new joint.dia.Link(). It contains linkTools which you can see in the photo you provided.

It is possible to change the default link using the defaultLink option on the paper.
https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#dia.Paper.prototype.options.defaultLink

You could change it to joint.shapes.standard.Link(doesn't contain the linkTools) as follows:

new joint.dia.Paper({ 
        el: document.getElementById('paper'),
        model: graph,
        width: 1500,
        drawGrid: true,
        defaultLink: () => new joint.shapes.standard.Link(),
});

If you create a custom link yourself, you can also provide it here as the defaultLink option.

We will update our ports documentation and tutorials to make this more clear.

Thanks,

James

[YongheeMinnovation]

Hi james,

Thanks for you reply, and that works for me well.

And I can get this smaller arrow now, but I want to delete the whole arrow.
How can I add 'remove arrow' in defaultLInk option? The documentation doesn't have enough information and example.
Also, want to make it removable and changeable for target and source.

Thanks

[jamesgeorgewilliams]

Hi,

it seems like maybe, you want to use some linkTools after all, but just edit how they look if I understand correctly.
https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#linkTools

It is possible to add a Remove button via linkTools for example. You can also add SourceArrowhead and TargetArrowhead which allow you to change target and source.

You can take advantage of events to add or remove the linkTools:
https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#dia.Paper.events

 // Register events
paper.on('link:mouseenter', (linkView) => {
    showLinkTools(linkView);
});

paper.on('link:mouseleave', (linkView) => {
    linkView.removeTools();
});

// Actions
function showLinkTools(linkView) {
  const tools = new joint.dia.ToolsView({
      tools: [
          new joint.linkTools.Remove({
              distance: '50%',
              markup: [{
                  tagName: 'circle',
                  selector: 'button',
                  attributes: {
                      'r': 7,
                      'fill': '#f6f6f6',
                      'stroke': '#ff5148',
                      'stroke-width': 2,
                      'cursor': 'pointer'
                  }
              }, {
                  tagName: 'path',
                  selector: 'icon',
                  attributes: {
                      'd': 'M -3 -3 3 3 M -3 3 3 -3',
                      'fill': 'none',
                      'stroke': '#ff5148',
                      'stroke-width': 2,
                      'pointer-events': 'none'
                  }
              }]
          }),
          new joint.linkTools.SourceArrowhead(),
          new joint.linkTools.TargetArrowhead()
      ]
  });
  linkView.addTools(tools);
}

You could then style the SourceArrowhead and TargetArrowhead in CSS:

<style>
        path.target-arrowhead {
            d: path('M -10 -5 0 0 -10 5 Z');
            cursor: move;
            stroke: black;
            stroke-width: 1;
            fill: black;
        }
        path.source-arrowhead {
            d: path('M 10 -5 0 0 10 5 Z');
            cursor: move;
            stroke: black;
            stroke-width: 1;
            fill: black;
        }
</style>

Of course, you can edit the attributes and styles to get your desired look.

Thanks,

James

[YongheeMinnovation]

Thanks for your answer, This was exactly what I wanted. But still have some following questions

1. Is it possible to add a function which draw multiple links from one port? Also get multiple links from target link.
2. Also I want to draw link without source and target element, following picture is the example. Is it possible to draw link without source?
   

Thanks always!

[jamesgeorgewilliams]

Regarding :2

When creating a link, you will need to provide source and target attributes.

It doesn't have to be an element, you can provide a Point too.

In this instance, think of the source and target as a start and end point for the link.

const link = new joint.shapes.standard.Link({
    source: { x: 10, y: 100 },
    target: { x: 100, y: 100 }
});

Regarding :1

It is possible to draw more links from a port, but I'm not sure I fully understand each part of the question.

Could you clarify what you mean? Or describe it in more detail?

If you have tried to achieve these ideas yourself, could you provide some code examples where you have attempted too?

That would be a big help.

Thanks,
James