🎨Create custom and triangle link animation

src/components/XircuitsApp.ts

@@ -5,7 +5,8 @@ import { ZoomCanvasAction } from '@projectstorm/react-canvas-core';
 import { CustomActionEvent } from '../commands/CustomActionEvent';
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { CustomDiagramState } from './CustomDiagramState'
-import { DefaultLinkModel } from '@projectstorm/react-diagrams';
+import { CustomLinkModel, TriangleLinkModel } from './link/CustomLinkModel';
+import { CustomLinkFactory, TriangleLinkFactory } from './link/CustomLinkFactory';
 
 export class XircuitsApplication {
 
@@ -18,9 +19,11 @@ export class XircuitsApplication {
                 this.diagramEngine = SRD.default({ registerDefaultZoomCanvasAction: false, registerDefaultDeleteItemsAction: false });
                 this.activeModel = new SRD.DiagramModel();
                 this.diagramEngine.getNodeFactories().registerFactory(new CustomNodeFactory(app));
+                this.diagramEngine.getLinkFactories().registerFactory(new CustomLinkFactory());
+                this.diagramEngine.getLinkFactories().registerFactory(new TriangleLinkFactory());
                 this.diagramEngine.getActionEventBus().registerAction(new ZoomCanvasAction({ inverseZoom: true }))
                 this.diagramEngine.getActionEventBus().registerAction(new CustomActionEvent({ app }));
-                this.diagramEngine.getStateMachine().pushState(new CustomDiagramState()); 
+                this.diagramEngine.getStateMachine().pushState(new CustomDiagramState());
 
                 let startNode = new CustomNodeModel({ name: 'Start', color: 'rgb(255,102,102)', extras: { "type": "Start" } });
                 startNode.addOutPortEnhance('▶', 'out-0');
@@ -83,12 +86,31 @@ export class XircuitsApplication {
 
                         if (link.sourcePort && link.targetPort) {
 
-                                let newLink = new DefaultLinkModel();
-
-                                let sourcePort = tempModel.getNode(link.source).getPortFromID(link.sourcePort);
+                                let newLink = new CustomLinkModel();
+                                const newTriangleLink = new TriangleLinkModel();
+                                const sourceNode = tempModel.getNode(link.source);
+                                const targetNode = tempModel.getNode(link.target);
+
+                                const sourcePort = sourceNode.getPortFromID(link.sourcePort);
+                                const sourcePortName = sourcePort.getOptions()['name'];
+                                const sourcePortTriangleName = 'out-0';
+                                if (sourcePortName == sourcePortTriangleName) {
+                                        if (sourceNode.getPorts()[sourcePortName].getOptions()['label'] == '▶') {
+                                                // When source port is '▶', use triangle animation link
+                                                newLink = newTriangleLink;
+                                        }
+                                }
                                 newLink.setSourcePort(sourcePort);
 
-                                let targetPort = tempModel.getNode(link.target).getPortFromID(link.targetPort);
+                                const targetPort = targetNode.getPortFromID(link.targetPort);
+                                const targetPortName = targetPort.getOptions()['name'];
+                                const targetPortTriangleName = 'in-0';
+                                if (targetPortName == targetPortTriangleName) {
+                                        if (targetNode.getPorts()[targetPortName].getOptions()['label'] == '▶') {
+                                                // When target port is '▶', use triangle animation link
+                                                newLink = newTriangleLink;
+                                        }
+                                }
                                 newLink.setTargetPort(targetPort);
 
                                 tempModel.addAll(newLink);

src/components/link/CustomLinkFactory.tsx

@@ -0,0 +1,70 @@
+import { DefaultLinkFactory } from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { CustomLinkModel, TriangleLinkModel } from './CustomLinkModel';
+import styled from '@emotion/styled';
+import { css, keyframes } from '@emotion/react';
+
+namespace S {
+	export const Keyframes = keyframes`
+		from {
+			stroke-dashoffset: 24;
+		}
+		to {
+			stroke-dashoffset: 0;
+		}
+	`;
+
+	const selected = css`
+		stroke-dasharray: 10, 2;
+		animation: ${Keyframes} 1s linear infinite;
+	`;
+
+	export const Path = styled.path<{ selected: boolean }>`
+		${(p) => p.selected && selected};
+		fill: none;
+		pointer-events: auto;
+	`;
+}
+
+export class CustomLinkFactory extends DefaultLinkFactory {
+	constructor() {
+		super('custom');
+	}
+
+	generateModel(): CustomLinkModel {
+		return new CustomLinkModel();
+	}
+
+	generateLinkSegment(model: CustomLinkModel, selected: boolean, path: string) {
+		return (
+			<S.Path
+				selected={selected}
+				stroke={selected ? 'yellow' : model.getOptions().color}
+				strokeWidth={model.getOptions().width}
+				d={path}
+			/>
+		);
+	}
+}
+
+export class TriangleLinkFactory extends DefaultLinkFactory {
+	constructor() {
+		super('triangle');
+	}
+
+	generateModel(): TriangleLinkModel {
+		return new TriangleLinkModel();
+	}
+
+	generateLinkSegment(model: TriangleLinkModel, selected: boolean, path: string) {
+		return (
+			<S.Path
+				selected={!selected}
+				stroke={!selected ? model.getOptions().selectedColor : 'yellow'}
+				strokeWidth={model.getOptions().width}
+				d={path}
+			/>
+		);
+	}
+}
+

src/components/link/CustomLinkModel.ts

@@ -0,0 +1,35 @@
+import { DefaultLinkModel } from '@projectstorm/react-diagrams';
+import { CustomPortModel } from '../CustomPortModel';
+
+// Custom link
+export class CustomLinkModel extends DefaultLinkModel {
+	constructor() {
+		super({
+			type: 'custom',
+			width: 3
+		});
+	}
+}
+
+export class CustomLinkPortModel extends CustomPortModel {
+	createLinkModel(): CustomLinkModel | null {
+		return new CustomLinkModel();
+	}
+}
+
+// Triangle link
+export class TriangleLinkModel extends DefaultLinkModel {
+	constructor() {
+		super({
+			type: 'triangle',
+			width: 3
+		});
+	}
+}
+
+export class TrianglePortModel extends CustomPortModel {
+	createLinkModel(): TriangleLinkModel | null {
+		return new TriangleLinkModel();
+	}
+}
+