How do I make nodes with flex points on Paper default lines?

[makleo2002]

Introduction

How do I make nodes with flex points on Paper default lines?

Steps to reproduce

None

Restrictions & Constraints

None

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

You can add various link tools to each link. The one you are looking for is called Vertices.

[makleo2002]

In this example, the link has already been initially added to the graph. And for me, the connection takes place via ports. I want to dynamically create ports on the line with a certain interval as the line increases

[kumilingus]

What do you mean a port on the line? Could you provide us with an image?

Here's our tutorial on how to ask technical questions.

[makleo2002]

How do I add these tools to LInk if I don't have a link.addTo(graph) call;
I have a Link added by clicking on the port
It's not working for me:
var linkView = link.findView(paper);
linkView.addTools(toolsView);

var link =  new namespace.standard.Link({
    labels: {
        attrs: {
            text: {
                text: 'Hello, World!'
            }
        }
    },
    
    vertices: [{x: 70, y: 100},{x: 100, y: 100}], // добавляем точку гибкости
    router: { name: 'manhattan' }, // выбор маршрутизатора для гибкости связи
    connector: { name: 'normal' }, // выбор типа коннектора для стрелки
    attrs: {
        line: {
            stroke: 'black', // цвет стрелки
            strokeWidth: 1, // ширина стрелки
            targetMarker: {
                type: 'path',
                d: 'M 10 -5 0 0 10 5  Z', // форма маркера на конце стрелки
            },
        },
    },
    
})

var graph = new joint.dia.Graph({}, { cellNamespace: namespace });

var paper = new joint.dia.Paper({
    el: document.getElementById('canvas'),
    model: graph,
    width: canvas.clientWidth,
    height: canvas.clientHeight,
    gridSize: 10,
    drawGrid: true,
    background: {
        color: 'rgba(0, 255, 0, 0.3)'
    },
    cellViewNamespace: namespace,
    defaultLink: link,
    linkPinning: false,
    
});

[kumilingus]

You can listen for the add event, which fires every time a cell is added to the graph.

graph.on('add', (cell) => {
   if (cell.isElement()) return;
   cell.findView(paper).addTools(/* ... *.);
});