Fixed some demos, code cleanup

demos/demo-simple-flow/index.tsx

@@ -3,7 +3,6 @@ import {
 	DiagramModel,
 	DefaultNodeModel,
 	LinkModel,
-	DefaultPortModel,
 	DiagramWidget
 } from "../../src/main";
 import * as React from "react";
@@ -18,32 +17,24 @@ export default () => {
 
 	//3-A) create a default node
 	var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
-	var port1 = node1.addPort(new DefaultPortModel(false, "out-1", "OUT"));
+	var port1 = node1.addOutPort('Out')
-	node1.x = 100;
+	node1.setPosition(100,100);
-	node1.y = 100;
 
 	//3-B) create another default node
 	var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
-	var port2 = node2.addPort(new DefaultPortModel(true, "in-1", "IN"));
+	var port2 = node2.addInPort('In')
-	node2.x = 400;
+	node2.setPosition(400, 100);
-	node2.y = 100;
 
 	//3-C) link the 2 nodes together
-	var link1 = new LinkModel();
+	var link1 = port1.link(port2);
-	link1.setSourcePort(port1);
-	link1.setTargetPort(port2);
 
 	//3-D) create an orphaned node
 	var node3 = new DefaultNodeModel("Node 3", "rgb(0,192,255)");
-	var port3 = node3.addPort(new DefaultPortModel(false, "out-1", "OUT"));
+	node3.addOutPort('Out');
-	node3.x = 100;
+	node3.setPosition(100,200);
-	node3.y = 200;
 
 	//4) add the models to the root graph
-	model.addNode(node1);
+	model.addAll(node1, node2, node3, link1);
-	model.addNode(node2);
-	model.addNode(node3);
-	model.addLink(link1);
 
 	//5) load model into engine
 	engine.setDiagramModel(model);

demos/demo-smart-routing/index.tsx

@@ -7,8 +7,8 @@ import {
 	DiagramWidget
 } from "../../src/main";
 import * as React from "react";
-import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
+import {DemoWorkspaceWidget} from "../.helpers/DemoWorkspaceWidget";
-import { action } from "@storybook/addon-actions";
+import {action} from "@storybook/addon-actions";
 
 export default () => {
 	// setup the diagram engine
@@ -21,41 +21,27 @@ export default () => {
 	// 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 DefaultPortModel(false, "out-1", "Out"));
-	node1.x = 340;
+	node1.setPosition(340, 350);
-	node1.y = 350;
+
 	const node2 = new DefaultNodeModel("Node B", "rgb(255,255,0)");
 	const port2 = node2.addPort(new DefaultPortModel(false, "out-1", "Out"));
-	node2.x = 240;
+	node2.setPosition(240, 80);
-	node2.y = 80;
 	const node3 = new DefaultNodeModel("Node C", "rgb(192,255,255)");
 	const port3 = node3.addPort(new DefaultPortModel(true, "in-1", "In"));
-	node3.x = 540;
+	node3.setPosition(540, 180);
-	node3.y = 180;
 	const node4 = new DefaultNodeModel("Node D", "rgb(192,0,255)");
 	const port4 = node4.addPort(new DefaultPortModel(true, "in-1", "In"));
-	node4.x = 95;
+	node4.setPosition(95, 185);
-	node4.y = 185;
 	const node5 = new DefaultNodeModel("Node E", "rgb(192,255,0)");
-	const port5 = node5.addPort(new DefaultPortModel(true, "in-1", "In"));
+	node5.setPosition(250, 180);
-	node5.x = 250;
+
-	node5.y = 180;
 
 	// linking things together
-	const link1 = new LinkModel();
+	const link1 = port1.link(port4);
-	link1.setSourcePort(port1);
+	const link2 = port2.link(port3);
-	link1.setTargetPort(port4);
-	const link2 = new LinkModel();
-	link2.setSourcePort(port2);
-	link2.setTargetPort(port3);
 
 	// add all to the main model
-	model.addNode(node1);
+	model.addAll(node1, node2, node3, node4, node5, link1, link2);
-	model.addNode(node2);
-	model.addNode(node3);
-	model.addNode(node4);
-	model.addNode(node5);
-	model.addLink(link1);
-	model.addLink(link2);
 
 	// load model into engine and render
 	engine.setDiagramModel(model);
@@ -72,7 +58,11 @@ export default () => {
 				</button>
 			}
 		>
-			<DiagramWidget diagramEngine={engine} smartRouting={true} maxNumberPointsPerLink={0} />
+			<DiagramWidget
+				diagramEngine={engine}
+				smartRouting={true}
+				maxNumberPointsPerLink={0}
+			/>
 		</DemoWorkspaceWidget>
 	);
 };

src/defaults/widgets/DefaultLinkWidget.tsx

@@ -47,6 +47,14 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 		}
 	}
 
+	componentDidUpdate() {
+		window.requestAnimationFrame(this.calculateLabelPosition);
+	}
+
+	componentDidMount() {
+		window.requestAnimationFrame(this.calculateLabelPosition);
+	}
+
 	addPointToLink = (event: MouseEvent, index: number): void => {
 		if (
 			!event.shiftKey &&
@@ -110,6 +118,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 			},
 			'data-linkid': this.props.link.getID(),
 			strokeOpacity: this.state.selected ? 0.1 : 0,
+			strokeWidth: 20,
 			onContextMenu: () => {
 				if (!this.props.diagramEngine.isModelLocked(this.props.link)) {
 					event.preventDefault();
@@ -172,16 +181,6 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 		this.refLabel.setAttribute("style", `transform: translate(${labelCoordinates.x}px, ${labelCoordinates.y}px);`);
 	};
 
-	componentDidUpdate() {
-		window.requestAnimationFrame(this.calculateLabelPosition);
-	}
-
-	componentDidMount() {
-		window.requestAnimationFrame(this.calculateLabelPosition);
-	}
-
-
-	//HERE
 
 	/**
 	 * Smart routing is only applicable when all conditions below are true:
@@ -215,9 +214,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 
 		//ensure id is present for all points on the path
 		var points = this.props.link.points;
-
 		var paths = [];
-		let model = diagramEngine.getDiagramModel();
 
 		if (this.isSmartRoutingApplicable()) {
 			// first step: calculate a direct path between the points being linked