Merge pull request #387 from DanieLazarLDAPPS/features/labview-style-of-routes

Features/labview style of routes

Author: dylanvorster

packages/diagrams-demo-gallery/demos/demo-right-angles-routing/index.tsx

@@ -0,0 +1,68 @@
+import createEngine, {
+	DiagramModel,
+	DefaultNodeModel,
+	DefaultPortModel,
+	RightAngleLinkFactory, LinkModel, RightAngleLinkModel,
+} from '@projectstorm/react-diagrams';
+import * as React from 'react';
+import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
+import { action } from '@storybook/addon-actions';
+import {AbstractModelFactory, CanvasWidget} from '@projectstorm/react-canvas-core';
+import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
+
+// When new link is created by clicking on port the RightAngleLinkModel needs to be returned.
+export class RightAnglePortModel extends DefaultPortModel {
+	createLinkModel(factory?: AbstractModelFactory<LinkModel>) {
+		return new RightAngleLinkModel();
+	}
+}
+
+export default () => {
+	// setup the diagram engine
+	const engine = createEngine();
+	engine.getLinkFactories().registerFactory(new RightAngleLinkFactory());
+
+	// setup the diagram model
+	const model = new DiagramModel();
+
+	// create four nodes in a way that straight links wouldn't work
+	const node1 = new DefaultNodeModel("Node A", "rgb(0,192,255)");
+	const port1 = node1.addPort(new RightAnglePortModel(false, "out-1", "Out"));
+	node1.setPosition(340, 350);
+
+	const node2 = new DefaultNodeModel("Node B", "rgb(255,255,0)");
+	const port2 = node2.addPort(new RightAnglePortModel(false, "out-1", "Out"));
+	node2.setPosition(240, 80);
+	const node3 = new DefaultNodeModel("Node C", "rgb(192,255,255)");
+	const port3 = node3.addPort(new RightAnglePortModel(true, "in-1", "In"));
+	node3.setPosition(540, 180);
+	const node4 = new DefaultNodeModel("Node D", "rgb(192,0,255)");
+	const port4 = node4.addPort(new RightAnglePortModel(true, "in-1", "In"));
+	node4.setPosition(95, 185);
+
+	// linking things together
+	const link1 = port1.link(port4);
+	const link2 = port2.link(port3);
+
+	// add all to the main model
+	model.addAll(node1, node2, node3, node4, link1, link2);
+
+	// load model into engine and render
+	engine.setModel(model);
+
+	return (
+		<DemoWorkspaceWidget
+			buttons={
+				<DemoButton
+					onClick={() => {
+						action('Serialized Graph')(JSON.stringify(model.serialize(), null, 2));
+					}}>
+					Serialize Graph
+				</DemoButton>
+			}>
+			<DemoCanvasWidget>
+				<CanvasWidget engine={engine} />
+			</DemoCanvasWidget>
+		</DemoWorkspaceWidget>
+	);
+};

packages/diagrams-demo-gallery/index.tsx

@@ -50,13 +50,15 @@ import demo_adv_ser_des from './demos/demo-serializing';
 import demo_adv_prog from './demos/demo-mutate-graph';
 import demo_adv_dnd from './demos/demo-drag-and-drop';
 import demo_smart_routing from './demos/demo-smart-routing';
+import demo_right_angles_routing from './demos/demo-right-angles-routing';
 
 storiesOf('Advanced Techniques', module)
 	.add('Clone Selected', demo_adv_clone_selected)
 	.add('Serializing and de-serializing', demo_adv_ser_des)
 	.add('Programatically modifying graph', demo_adv_prog)
 	.add('Drag and drop', demo_adv_dnd)
-	.add('Smart routing', demo_smart_routing);
+	.add('Smart routing', demo_smart_routing)
+	.add('Right angles routing', demo_right_angles_routing);
 
 import demo_cust_nodes from './demos/demo-custom-node1';
 import demo_cust_links from './demos/demo-custom-link1';

packages/react-diagrams-routing/index.ts

@@ -1,6 +1,9 @@
 export * from './src/link/PathFindingLinkFactory';
 export * from './src/link/PathFindingLinkModel';
 export * from './src/link/PathFindingLinkWidget';
+export * from './src/link/RightAngleLinkWidget';
+export * from './src/link/RightAngleLinkFactory';
+export * from './src/link/RightAngleLinkModel';
 
 export * from './src/engine/PathFinding';
 export * from './src/dagre/DagreEngine';

packages/react-diagrams-routing/src/engine/PathFinding.ts

@@ -59,14 +59,22 @@ export default class PathFinding {
 		pathToStart: number[][];
 		pathToEnd: number[][];
 	} {
-		const startIndex = path.findIndex(point => matrix[point[1]][point[0]] === 0);
+		const startIndex = path.findIndex(point => {
+			if (matrix[point[1]])
+				return matrix[point[1]][point[0]] === 0;
+			else return false;
+		});
 		const endIndex =
 			path.length -
 			1 -
 			path
 				.slice()
 				.reverse()
-				.findIndex(point => matrix[point[1]][point[0]] === 0);
+				.findIndex(point => {
+					if (matrix[point[1]])
+						return matrix[point[1]][point[0]] === 0;
+					else return false;
+				});
 
 		// are we trying to create a path exclusively through blocked areas?
 		// if so, let's fallback to the linear routing

packages/react-diagrams-routing/src/link/RightAngleLinkFactory.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { RightAngleLinkWidget } from "./RightAngleLinkWidget";
+import { DiagramEngine } from '@projectstorm/react-diagrams-core';
+import { DefaultLinkFactory, DefaultLinkModel } from '@projectstorm/react-diagrams-defaults';
+import {RightAngleLinkModel} from "./RightAngleLinkModel";
+
+/**
+ * @author Daniel Lazar
+ */
+export class RightAngleLinkFactory extends DefaultLinkFactory<RightAngleLinkModel> {
+
+	static NAME = 'rightAngle';
+
+	constructor() {
+		super(RightAngleLinkFactory.NAME);
+	}
+
+	generateModel(event): RightAngleLinkModel {
+		return new RightAngleLinkModel();
+	}
+
+	generateReactWidget(event): JSX.Element {
+		return <RightAngleLinkWidget  diagramEngine={this.engine} link={event.model} factory={this}/>
+	}
+}

packages/react-diagrams-routing/src/link/RightAngleLinkModel.ts

@@ -0,0 +1,15 @@
+import { DefaultLinkModel, DefaultLinkModelOptions } from '@projectstorm/react-diagrams-defaults';
+import {RightAngleLinkFactory} from "./RightAngleLinkFactory";
+
+export class RightAngleLinkModel extends DefaultLinkModel {
+	constructor(options: DefaultLinkModelOptions = {}) {
+		super({
+			type: RightAngleLinkFactory.NAME,
+			...options
+		});
+	}
+
+	performanceTune() {
+		return false;
+	}
+}