Link style customization

[ivokst92]

Hello,
Is there any way to make different style of the link between the different vertices?
For example:

I want to have dashed line with different width between particular vertices.

[kumilingus]

You need to define a link with an extra SVGPath (or SVGPolyline) and then:

1. Set the points of the SVGPolyline whenever vertices changes.
   Example: https://jsfiddle.net/kumilingus/5npeku14/
   Note: Styling is limited as the polyline is rendered on top of the original path

2. Define a custom SVG Attribute
   Example: https://jsfiddle.net/kumilingus/378e9vcL/
   Note: using an internal mechanism to define an SVG Attributes
   Available also via decorators - https://changelog.jointjs.com/rappid/docs/decorators#SVGAttribute

[ivokst92]

Thank you!

Is there any way to use the SVG Attribute approach without appyling it between every vertices, but only between particular, for example:

[ivokst92]

You have to change the logic of connectionPart attribute in this demo not to look at all vertices but just a subset.

Since I'm using typescript to achieve this, I'm not able to access "this" (the current instance) inside the static attributes

static attributes = {
        connectionPart: {
            set: function(type) {
                const vertices =  <this>.model.vertices();
                if (type === 'inner') {
                    const path = new g.Path(new g.Polyline(vertices));
                    return { d: path.serialize() };
                } else {
                    if (vertices.length < 2) {
                        return { d: <this>.getSerializedConnection() };
                    } else {
                        const { sourcePoint: s, targetPoint: t } = this;
                        const v1 = vertices[0];
                        const v2 = vertices[vertices.length - 1];
                        return { d: `M ${s.x} ${s.y} ${v1.x} ${v1.y} M ${v2.x} ${v2.y} ${t.x} ${t.y}` };
                    }
                }
            }
        }
    };

Removing the "static" does nothing.
Any suggestions on how to workaround this?

[kumilingus]

You have to ignore the error with // @ts-ignore for now.

We should be passing the cellView instance as the last argument to the set() method (and others). Feel free to create a PR.

• https://github.com/clientIO/joint/blob/master/src/dia/CellView.mjs#L610
• https://github.com/clientIO/joint/blob/master/src/dia/CellView.mjs#L652
• https://github.com/clientIO/joint/blob/master/src/dia/CellView.mjs#L675
• https://github.com/clientIO/joint/blob/master/src/dia/CellView.mjs#L550

[ivokst92]

Ignoring the error didn't worked as expected, the code compiled successfully but at runtime "this" wasn't returning the instance of the cellView/link.

A PR was created.

[kumilingus]

The context of the set() method is a cellView (see code).

1. please make to use a valid syntax (I don't think this is correct <this>.getSerializedConnection())
2. do not use fat arrow function to define set()

[ivokst92]

Using the regular function instead of fat arrow function did the trick!
I'll ignore the error until the next release.

Thank you!