Extending DefaultLinkModel

🖌

React Diagrams

Search…

🖌

Custom Nodes

Custom Ports

About the project

Extending DefaultLinkModel

Extending the DefaultLinkModel
Much like extending nodes, custom links can also be created. In the below example, we have created a link that renders a circle animating from the source port to the target port.
In this specific example, we extended the DefaultLinkModel because we wanted to retain a lot of the functionality that it provides in the base class:
1
export class AdvancedLinkModel extends DefaultLinkModel {
2
    constructor() {
3
        super({
4
            type: 'advanced', // <-- here we give it a new type
5
            width: 10 // we specifically want this to also be width 10
6
        });
7
    }
8
}
Copied!
Now we need to create a new link factory to tell the system how our new link model fits into the core system. We specifically are going to extend the DefaultLinkFactory because we still want to render a DefaultLinkWidget. The only difference is that we want each path segment to be a red line with an animating circle. Fortunately, the DefaultLinkWidget already uses the generateLinkSegment() method defined in the DefaultLinkFactory to accomplish this. The only thing we need to do, is provide a different type of segment:
1
export class AdvancedLinkFactory extends DefaultLinkFactory {
2
    constructor() {
3
        super('advanced'); // <-- this matches with the link model above
4
    }
5
​
6
    generateModel(): AdvancedLinkModel {
7
        return new AdvancedLinkModel(); // <-- this is how we get new instances
8
    }
9
​
10
    /**
11
     * @override the DefaultLinkWidget makes use of this, and it normally renders that
12
     * familiar gray line, so in this case we simply make it return a new advanced segment.
13
     */
14
    generateLinkSegment(model: AdvancedLinkModel, selected: boolean, path: string) {
15
        return (
16
            <g>
17
                <AdvancedLinkSegment model={model} path={path} />
18
            </g>
19
        );
20
    }
21
}
Copied!
The actual code for the AdvancedLinkSegment can be found here (it is in the demo-custom-link1 folder in the demo gallery).
This is the easiest and most simple way to get started with custom links.

Customizing

Custom Nodes

Last modified 3mo ago

Copy link