Change vertices shape of a link when using tools

[ivokst92]

Hello,
I'm currently adding linkTools.Vertices() to the link view as mentioned in the documentation
and by default the vertices points are drawn as circles.

var verticesTool = new joint.linkTools.Vertices();
var toolsView = new joint.dia.ToolsView({
    tools: [verticesTool]
});
var linkView = link.findView(paper);
linkView.addTools(toolsView);

Is there any way to change the vertices circles with any other shape(rectangle for example)?

[kumilingus]

You have to override the VertexHandle class.

const VertexHandle = joint.linkTools.Vertices.VertexHandle.extend({
    tagName: 'rect',
    attributes: {
        'x': -6,
        'y': -6,
        'width': 12,
        'height': 12,
        'fill': '#33334F',
        'stroke': '#FFFFFF',
        'stroke-width': 2,
        'cursor': 'move'
    },
});
const vertices = new joint.linkTools.Vertices({ handleClass: VertexHandle });

[ivokst92]

const VertexHandle = joint.linkTools.Vertices.VertexHandle.extend({
    tagName: 'rect',
    attributes: {
        'x': -6,
        'y': -6,
        'width': 12,
        'height': 12,
        'fill': '#33334F',
        'stroke': '#FFFFFF',
        'stroke-width': 2,
        'cursor': 'move'
    },
});
const vertices = new joint.linkTools.Vertices({ handleClass: VertexHandle });

This replaces the circles but stack them all at the same passed x,y coordinates

[kumilingus]

You are right, it works on master branch only (the position method has been changed). For v3.5 use:

const VertexHandle = joint.linkTools.Vertices.VertexHandle.extend({
    tagName: 'rect',
    attributes: {
        'x': -6,
        'y': -6,
        'width': 12,
        'height': 12,
        'fill': '#33334F',
        'stroke': '#FFFFFF',
        'stroke-width': 2,
        'cursor': 'move'
    },
    // For version < 3.5.5
    position: function(x, y) {
        const matrix = V.createSVGMatrix().translate(x, y);
        this.vel.transform(matrix, { absolute: true });
    },
});
const vertices = new joint.linkTools.Vertices({ handleClass: VertexHandle });

[ivokst92]

It works now! Thank you!