React Diagrams
Search…
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.
Last modified 6mo ago
Copy link