Custom Ports

🖌

React Diagrams

Search…

🖌

Extending DefaultLinkModel

Custom Nodes

Custom Ports

About the project

Custom Ports

Ports allow links to connect to your nodes. Each port that is rendered in a node must also have a corresponding PortModel in the corresponding NodeModel (as is the case with essentially all of the models and widgets in this library).
Custom port widgets
If you want to create a custom port that looks entirely different (much like in the image below), then you simply need to create your own widget and wrap it in a PortWidget:
1
<PortWidget
2
    port={this.props.node.getPort("in"}
3
    engine={this.props.engine} >
4
    <div
5
        style={{
6
            width: 40,
7
            height: 40,
8
            background: 'orange'
9
        }}
10
    />
11
</PortWidget>
Copied!
Obviously, you can create the React widgets in any way you like. Whether you use Emotion, BEM or plain old CSS, the only important thing is that your custom port is wrapped inside a PortWidget
Specifying alignment
When links enter ports, depending on the alignment specified, they can help the links render differently. Take the following example:
In the above example, the 4 ports on the diamond node model are setup with different alignment:
1
this.addPort(new DiamondPortModel(PortModelAlignment.TOP));
2
this.addPort(new DiamondPortModel(PortModelAlignment.LEFT));
3
this.addPort(new DiamondPortModel(PortModelAlignment.BOTTOM));
4
this.addPort(new DiamondPortModel(PortModelAlignment.RIGHT));
Copied!
Each of the custom DiamondPortModel models forwards this through to the base PortModel class:
1
export class DiamondPortModel extends PortModel {
2
    ...
3
    constructor(alignment: PortModelAlignment) {
4
        super({
5
            type: 'diamond',
6
            name: alignment,
7
            alignment: alignment // <-- here
8
        });
9
    }
10
    ...
11
}
Copied!
Specifying if a link can be connected
A port is directly responsible for specifying if a link is allowed to connect to it. When you drag an un-connected link end-point to a target port, the target port lets the link know if it is allowed to connect.
1
class PortModel{
2
    ...
3
    canLinkToPort(port: PortModel): boolean;
4
}
Copied!
In the above definition, the port argument is the source port that the incoming link is connected to. By default, the method returns true, but you can extend this and overide this method to do more advanced checks.
The DefaultPortModel provided in the defaults package, makes use of this principle to only allow Out ports to connect to In ports:
1
class DefaultPortModel extends PortModel{
2
    ...
3
    canLinkToPort(port: PortModel): boolean {
4
        if (port instanceof DefaultPortModel) {
5
            return this.options.in !== port.getOptions().in;
6
        }
7
        return true;
8
    }
9
}
Copied!
Specifying what type of link is generated from a port
When a user drags on a port to generate a link, the port is also responsible for specifying what link is created. This happens through the createLinkModel() method:
1
class DefaultPortModel extends PortModel{
2
    ...
3
    createLinkModel(): LinkModel{
4
        return new DefaultLinkModel(); // <-- here we generate a DefaultLinkModel
5
    }
6
}
Copied!

Custom Nodes

About the project

Last modified 2yr ago

Copy link

Contents

Custom port widgets

Specifying alignment

Specifying if a link can be connected

Specifying what type of link is generated from a port