Customize Port Appearance in React Diagram Component
Overview
Ports serve as connection points on diagram nodes where connectors can be attached. The appearance of ports can be customized using the strokeColor, strokeWidth, fill and opacity properties of the port. Customize the port size by using the width and height properties of port. The ports visibility property allows you to define, when the port should be visible.
For more information about port visibility refer PortVisibility
The following code illustrates how to change the appearance of port.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-react-diagrams";
let node = [{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
ports: [{
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible,
//Set the style for the port
style: {
fill: 'red',
strokeWidth: 2,
strokeColor: 'black',
opacity: 0.7,
strokeDashArray: '2 2',
},
width: 12,
height: 12,
// Sets the shape of the port as Circle
shape: 'Circle'
}]
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility, NodeModel } from "@syncfusion/ej2-react-diagrams";
let node: NodeModel[]= [{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
ports: [{
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible,
//Set the style for the port
style: {
fill: 'red',
strokeWidth: 2,
strokeColor: 'black',
opacity: 0.7,
strokeDashArray: '2 2',
},
width: 12,
height: 12,
// Sets the shape of the port as Circle
shape: 'Circle'
}]
}];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Change Appearance of Port at Runtime
The appearance of port can be changed at runtime by customizing the style properties of the port. This is useful when you need to provide visual feedback based on user interactions or application state changes. The following code illustrates how to change the appearance of port at runtime.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance;
let node = [{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
ports: [{
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible,
style: {
fill: 'red',
strokeWidth: 2,
strokeColor: 'black',
opacity: 0.7,
strokeDashArray: '2 2',
},
width: 12,
height: 12,
shape: 'Circle'
}]
}];
// Method to update port appearance through run time
const changeAppearance = () => {
let port = diagramInstance.nodes[0].ports[0];
port.style.fill = 'yellow';
port.style.opacity = 1;
port.width = 25;
port.height = 25;
diagramInstance.dataBind();
}
// initialize Diagram component
function App() {
return (
<div>
<ButtonComponent content="Change Appearance" onClick={changeAppearance} />
<DiagramComponent id="container" width={'100%'} height={'600px'} ref={(diagram) => (diagramInstance = diagram)} nodes={node}/>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility, NodeModel} from "@syncfusion/ej2-react-diagrams";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
let diagramInstance: DiagramComponent;
let node: NodeModel[] = [{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
ports: [{
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible,
style: {
fill: 'red',
strokeWidth: 2,
strokeColor: 'black',
opacity: 0.7,
strokeDashArray: '2 2',
},
width: 12,
height: 12,
shape: 'Circle'
}]
}];
// Method to update port appearance through run time
const changeAppearance = () => {
let port = diagramInstance.nodes[0].ports[0];
port.style.fill = 'yellow';
port.style.opacity = 1;
port.width = 25;
port.height = 25;
diagramInstance.dataBind();
}
// initialize Diagram component
function App() {
return (
<div>
<ButtonComponent content="Change Appearance" onClick={changeAppearance} />
<DiagramComponent id="container" width={'100%'} height={'600px'} ref={(diagram) => (diagramInstance = diagram)} nodes={node}/>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Port Visibility
The visibility of the ports is determined by the visibility property of port using the PortVisibility enum, This enum includes properties such as Connect, Hidden, Hover, and Visible. By default, the port visibility is set to Hidden.
| Property | Definition |
|---|---|
| Hover | Port is visible when mousehover the DiagramElement. |
| Hidden | Port is not visible for the DiagramElement. |
| Connect | The port becomes visible when you hover the connector thumb over the DiagramElement where the port resides. |
| Visible | Port is always visible for the DiagramElement. |
Port Shape
The shape of port can be changed by using its shape property. To explore the different types of port shapes, refer to Port Shapes. By default the port shape is Square. Different shapes help distinguish between different types of connections or data flow directions.
Types of Port Shapes
The following basic built-in PortShapes are available for ports:
- Circle
- Custom
- Square
- X
Customize the Port’s Shape
Custom shape support has been provided for port. You can able to add the custom path data instead of built-in shapes when you need specific visual indicators that match your application’s design requirements or represent particular data types.
If you need to render a custom shape, then you can set shape as Custom and define path using pathData property of port.
The following code illustrates how to set custom shape to the port.
import * as React from "react";
import * as ReactDOM from "react-dom";
import {DiagramComponent,PortVisibility} from "@syncfusion/ej2-react-diagrams";
let nodes = [{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
ports: [
{
offset: {
x: 1,
y: 0.5,
},
visibility: PortVisibility.Visible,
width: 15,
height: 15,
// Sets the shape of the port as Circle
shape: 'Circle',
},
{
offset: {
x: 0,
y: 0.5,
},
visibility: PortVisibility.Visible,
width: 15,
height: 15,
// Sets the shape of the port as Square
shape: 'Square',
},
{
offset: {
x: 0.5,
y: 0,
},
visibility: PortVisibility.Visible,
width: 15,
height: 15,
// Sets the shape of the port as X
shape: 'X',
},
{
offset: {
x: 0.5,
y: 1,
},
visibility: PortVisibility.Visible,
width: 25,
height: 25,
// Sets the shape of the port as Custom
shape: 'Custom',
pathData:
'M50 10 L60 40 L90 40 L65 60 L75 90 L50 70 L25 90 L35 60 L10 40 L40 40 Z',
},
],
}
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,PortVisibility, NodeModel} from "@syncfusion/ej2-react-diagrams";
let nodes: NodeModel[] = [{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
ports: [
{
offset: {
x: 1,
y: 0.5,
},
visibility: PortVisibility.Visible,
width: 15,
height: 15,
// Sets the shape of the port as Circle
shape: 'Circle',
},
{
offset: {
x: 0,
y: 0.5,
},
visibility: PortVisibility.Visible,
width: 15,
height: 15,
// Sets the shape of the port as Square
shape: 'Square',
},
{
offset: {
x: 0.5,
y: 0,
},
visibility: PortVisibility.Visible,
width: 15,
height: 15,
// Sets the shape of the port as X
shape: 'X',
},
{
offset: {
x: 0.5,
y: 1,
},
visibility: PortVisibility.Visible,
width: 25,
height: 25,
// Sets the shape of the port as Custom
shape: 'Custom',
pathData:
'M50 10 L60 40 L90 40 L65 60 L75 90 L50 70 L25 90 L35 60 L10 40 L40 40 Z',
},
],
}
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={nodes}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Constraints
The constraints property allows you to enable or disable certain behaviors of ports, providing fine-grained control over port functionality. For more information about port constraints, refer to PortConstraints.
The PortConstraints may have multiple behaviors like listed below:
| Constraints | Usage |
|---|---|
| None | Disables all behaviors of Port. |
| Draw | Enables or disables to draw a connector. |
| InConnect | Enables or disables connecting to the incoming Connector. |
| OutConnect | Enables or disables connecting the outgoing Connector. |
| ToolTip | Enables or disables the Tooltip for the ports. |
| Drag | Enables or disables dragging of port. |
| InheritTooltip | Enables or disables the Tooltip for the ports. |