reformat code

demos/demo-custom-link1/index.tsx

@@ -16,7 +16,6 @@ import {DefaultLinkModel} from "../../src/defaults/models/DefaultLinkModel";
 import { DefaultLinkFactory } from "../../src/defaults/factories/DefaultLinkFactory";
 
 export class AdvancedLinkModel extends DefaultLinkModel {
-
 	constructor() {
 		super("advanced");
 		this.width = 10;
@@ -24,14 +23,12 @@ export class AdvancedLinkModel extends DefaultLinkModel {
 }
 
 export class AdvancedPortModel extends DefaultPortModel {
-
 	createLinkModel(): AdvancedLinkModel | null {
 		return new AdvancedLinkModel();
 	}
 }
 
-export class AdvancedLinkSegment extends React.Component<{model: AdvancedLinkModel, path: string}>{
-
+export class AdvancedLinkSegment extends React.Component<{ model: AdvancedLinkModel; path: string }> {
 	path: SVGPathElement;
 	circle: SVGCircleElement;
 	callback: () => any;
@@ -56,16 +53,15 @@ export class AdvancedLinkSegment extends React.Component<{model: AdvancedLinkMod
 				this.percent = 0;
 			}
 
-
 			let point = this.path.getPointAtLength(this.path.getTotalLength() * (this.percent / 100.0));
 
-			this.circle.setAttribute('cx', ""+point.x);
-			this.circle.setAttribute('cy', ""+point.y);
+			this.circle.setAttribute("cx", "" + point.x);
+			this.circle.setAttribute("cy", "" + point.y);
 
 			if (this.mounted) {
 				requestAnimationFrame(this.callback);
 			}
-		}
+		};
 		requestAnimationFrame(this.callback);
 	}
 
@@ -73,12 +69,11 @@ export class AdvancedLinkSegment extends React.Component<{model: AdvancedLinkMod
 		this.mounted = false;
 	}
 
-
 	render() {
 		return (
 			<>
 				<path
-					ref={(ref) => {
+					ref={ref => {
 						this.path = ref;
 					}}
 					strokeWidth={this.props.model.width}
@@ -86,10 +81,11 @@ export class AdvancedLinkSegment extends React.Component<{model: AdvancedLinkMod
 					d={this.props.path}
 				/>
 				<circle
-					ref={(ref) => {
+					ref={ref => {
 						this.circle = ref;
 					}}
-					r={10} fill="orange"
+					r={10}
+					fill="orange"
 				/>
 			</>
 		);
@@ -97,10 +93,9 @@ export class AdvancedLinkSegment extends React.Component<{model: AdvancedLinkMod
 }
 
 export class AdvancedLinkFactory extends DefaultLinkFactory {
-
 	constructor() {
 		super();
-		this.type = "advanced"
+		this.type = "advanced";
 	}
 
 	getNewInstance(initialConfig?: any): AdvancedLinkModel {
@@ -108,9 +103,12 @@ export class AdvancedLinkFactory extends DefaultLinkFactory {
 	}
 
 	generateLinkSegment(model: AdvancedLinkModel, selected: boolean, path: string) {
-		return <g><AdvancedLinkSegment model={model} path={path} /></g>;
+		return (
+			<g>
+				<AdvancedLinkSegment model={model} path={path} />
+			</g>
+		);
 	}
-
 }
 /**
  *

demos/demo-custom-node1/DiamondNodeFactory.tsx

@@ -9,7 +9,7 @@ export class DiamondNodeFactory extends SRD.NodeFactory {
 	}
 
 	generateReactWidget(diagramEngine: SRD.DiagramEngine, node: SRD.NodeModel): JSX.Element {
-		return <DiamonNodeWidget node={node} />
+		return <DiamonNodeWidget node={node} />;
 	}
 
 	getNewInstance() {

demos/demo-custom-node1/DiamondNodeModel.ts

@@ -2,7 +2,6 @@ import * as SRD from "../../src/main";
 import { DiamondPortModel } from "./DiamondPortModel";
 
 export class DiamondNodeModel extends SRD.NodeModel {
-
 	constructor() {
 		super("diamond");
 		this.addPort(new DiamondPortModel("top"));

demos/demo-custom-node1/index.tsx

@@ -31,7 +31,7 @@ export default () => {
 
 	//3-A) create a default node
 	var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
-	var port1 = node1.addOutPort("Out")
+	var port1 = node1.addOutPort("Out");
 	node1.setPosition(100, 150);
 
 	//3-B) create our new custom node
@@ -39,12 +39,12 @@ export default () => {
 	node2.setPosition(250, 108);
 
 	var node3 = new DefaultNodeModel("Node 3", "red");
-	var port3 = node3.addInPort("In")
+	var port3 = node3.addInPort("In");
 	node3.setPosition(500, 150);
 
 	//3-C) link the 2 nodes together
-	var link1 = port1.link(node2.getPort('left'));
-	var link2 = port3.link(node2.getPort('right'));
+	var link1 = port1.link(node2.getPort("left"));
+	var link2 = port3.link(node2.getPort("right"));
 
 	//4) add the models to the root graph
 	model.addAll(node1, node2, node3, link1, link2);

demos/demo-dagre/index.tsx

@@ -30,7 +30,6 @@ function connectNodes(nodeFrom, nodeTo) {
  * Tests auto distribution
  */
 class Demo8Widget extends React.Component<any, any> {
-
 	constructor(props) {
 		super(props);
 		this.state = {};

demos/demo-drag-and-drop/components/BodyWidget.tsx

@@ -3,10 +3,7 @@ import * as _ from "lodash";
 import { TrayWidget } from "./TrayWidget";
 import { Application } from "../Application";
 import { TrayItemWidget } from "./TrayItemWidget";
-import {
-	DefaultNodeModel,
-	DiagramWidget
-} from "../../../src/main";
+import { DefaultNodeModel, DiagramWidget } from "../../../src/main";
 
 export interface BodyWidgetProps {
 	app: Application;
@@ -48,10 +45,10 @@ export class BodyWidget extends React.Component<BodyWidgetProps, BodyWidgetState
 							var node = null;
 							if (data.type === "in") {
 								node = new DefaultNodeModel("Node " + (nodesCount + 1), "rgb(192,255,0)");
-								node.addInPort('In');
+								node.addInPort("In");
 							} else {
 								node = new DefaultNodeModel("Node " + (nodesCount + 1), "rgb(0,192,255)");
-								node.addOutPort('Out')
+								node.addOutPort("Out");
 							}
 							var points = this.props.app.getDiagramEngine().getRelativeMousePoint(event);
 							node.x = points.x;

demos/demo-grid/index.tsx

@@ -1,10 +1,4 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget
-} from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
 import * as React from "react";
 
 /**

demos/demo-listeners/index.tsx

@@ -19,11 +19,11 @@ export default () => {
 	node1.setPosition(100, 100);
 
 	var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
-	var port2 = node2.addInPort('In');
+	var port2 = node2.addInPort("In");
 	node2.setPosition(400, 40);
 
 	var node3 = new DefaultNodeModel("Node 3", "rgb(128,99,255)");
-	var port3 = node3.addInPort('In');
+	var port3 = node3.addInPort("In");
 	node3.setPosition(300, 160);
 
 	//link the nodes

demos/demo-locks/index.tsx

@@ -1,8 +1,6 @@
 import * as SRD from "../../src/main";
 import * as React from "react";
-import {
-	DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, PointModel, DiagramWidget
-} from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, PointModel, DiagramWidget } from "../../src/main";
 
 /**
  *
@@ -19,11 +17,11 @@ export default () => {
 
 	// sample for link with simple line (no additional points)
 	var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
-	var port1 = node1.addOutPort('Out');
+	var port1 = node1.addOutPort("Out");
 	node1.setPosition(100, 100);
 
 	var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
-	var port2 = node2.addInPort('In');
+	var port2 = node2.addInPort("In");
 	node2.setPosition(400, 100);
 
 	let link1 = port1.link(port2);
@@ -32,11 +30,11 @@ export default () => {
 
 	// sample for link with complex line (additional points)
 	var node3 = new DefaultNodeModel("Node 3", "rgb(0,192,255)");
-	var port3 = node3.addOutPort('Out');
+	var port3 = node3.addOutPort("Out");
 	node3.setPosition(100, 250);
 
 	var node4 = new DefaultNodeModel("Node 4", "rgb(192,255,0)");
-	var port4 = node4.addInPort('In');
+	var port4 = node4.addInPort("In");
 	node4.setPosition(400, 250);
 
 	var link2 = port3.link(port4);

demos/demo-mutate-graph/index.tsx

@@ -1,10 +1,4 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget
-} from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
 import * as React from "react";
 import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
 
@@ -46,8 +40,12 @@ class NodeDelayedPosition extends React.Component<any, any> {
 		return (
 			<DemoWorkspaceWidget
 				buttons={[
-					<button key={1} onClick={this.updatePosition}>Update position</button>,
-					<button key={2} onClick={this.updatePositionViaSerialize}>Update position via serialize</button>
+					<button key={1} onClick={this.updatePosition}>
+						Update position
+					</button>,
+					<button key={2} onClick={this.updatePositionViaSerialize}>
+						Update position via serialize
+					</button>
 				]}
 			>
 				<DiagramWidget diagramEngine={engine} />

demos/demo-performance/index.tsx

@@ -1,10 +1,4 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget
-} from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
 import * as React from "react";
 
 /**
@@ -23,7 +17,7 @@ export default () => {
 		//3-A) create a default node
 		var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
 		var port1 = node1.addOutPort("Out");
-		node1.setPosition(100 + offsetX, 100 + offsetY)
+		node1.setPosition(100 + offsetX, 100 + offsetY);
 
 		//3-B) create another default node
 		var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");

demos/demo-serializing/index.tsx

@@ -1,10 +1,4 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget
-} from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
 import * as React from "react";
 import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
 import { action } from "@storybook/addon-actions";

demos/demo-simple-flow/index.tsx

@@ -1,10 +1,4 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget
-} from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
 import * as React from "react";
 
 export default () => {
@@ -17,12 +11,12 @@ export default () => {
 
 	//3-A) create a default node
 	var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
-	var port1 = node1.addOutPort('Out')
+	var port1 = node1.addOutPort("Out");
 	node1.setPosition(100, 100);
 
 	//3-B) create another default node
 	var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
-	var port2 = node2.addInPort('In')
+	var port2 = node2.addInPort("In");
 	node2.setPosition(400, 100);
 
 	//3-C) link the 2 nodes together
@@ -30,7 +24,7 @@ export default () => {
 
 	//3-D) create an orphaned node
 	var node3 = new DefaultNodeModel("Node 3", "rgb(0,192,255)");
-	node3.addOutPort('Out');
+	node3.addOutPort("Out");
 	node3.setPosition(100, 200);
 
 	//4) add the models to the root graph

demos/demo-simple/index.tsx

@@ -1,10 +1,4 @@
-import {
-	DiagramEngine,
-	DiagramModel,
-	DefaultNodeModel,
-	LinkModel,
-	DiagramWidget
-} from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
 import * as React from "react";
 import { DefaultLinkModel } from "../../src/defaults/models/DefaultLinkModel";
 
@@ -36,7 +30,6 @@ export default () => {
 	//5) load model into engine
 	engine.setDiagramModel(model);
 
-
 	//6) render the diagram!
 	return <DiagramWidget diagramEngine={engine} />;
 };

demos/demo-smart-routing/index.tsx

@@ -35,7 +35,6 @@ export default () => {
 	const node5 = new DefaultNodeModel("Node E", "rgb(192,255,0)");
 	node5.setPosition(250, 180);
 
-
 	// linking things together
 	const link1 = port1.link(port4);
 	const link2 = port2.link(port3);
@@ -58,11 +57,7 @@ export default () => {
 				</button>
 			}
 		>
-			<DiagramWidget
-				diagramEngine={engine}
-				smartRouting={true}
-				maxNumberPointsPerLink={0}
-			/>
+			<DiagramWidget diagramEngine={engine} smartRouting={true} maxNumberPointsPerLink={0} />
 		</DemoWorkspaceWidget>
 	);
 };

src/AbstractFactory.ts

@@ -25,18 +25,14 @@ export abstract class NodeFactory<T extends NodeModel = NodeModel> extends Abstr
 }
 
 export abstract class LinkFactory<T extends LinkModel = LinkModel> extends AbstractFactory<T> {
-
 	abstract generateReactWidget(diagramEngine: DiagramEngine, link: T): JSX.Element;
-
 }
 
 export abstract class LabelFactory<T extends LabelModel = LabelModel> extends AbstractFactory<T> {
-
 	abstract generateReactWidget(diagramEngine: DiagramEngine, label: T): JSX.Element;
 }
 
-export abstract class PortFactory<T extends PortModel = PortModel> extends AbstractFactory<T> {
-}
+export abstract class PortFactory<T extends PortModel = PortModel> extends AbstractFactory<T> {}
 
 export class SimplePortFactory extends PortFactory {
 	cb: (initialConfig?: any) => PortModel;

src/BaseEntity.ts

@@ -33,8 +33,7 @@ export class BaseEntity< T extends BaseListener = BaseListener> {
 		return this.id;
 	}
 
-	doClone(lookupTable = {}, clone) {
-	}
+	doClone(lookupTable = {}, clone) {}
 
 	clone(lookupTable = {}) {
 		// try and use an existing clone first

src/DiagramEngine.ts

@@ -68,7 +68,7 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
 
 			//pop it onto the window so our E2E helpers can find it
 			if (window) {
-				(window as any)['diagram_instance'] = this;
+				(window as any)["diagram_instance"] = this;
 			}
 		}
 	}
@@ -150,7 +150,6 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
 		return this.diagramModel;
 	}
 
-
 	//!-------------- FACTORIES ------------
 
 	getNodeFactories(): { [s: string]: NodeFactory } {
@@ -345,7 +344,7 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
 	 * Determine the width and height of the node passed in.
 	 * It currently assumes nodes have a rectangular shape, can be overriden for customised shapes.
 	 */
-	getNodeDimensions(node: NodeModel): { width: number; height: number; } {
+	getNodeDimensions(node: NodeModel): { width: number; height: number } {
 		if (!this.canvas) {
 			return {
 				width: 0,

src/Toolkit.ts

@@ -16,7 +16,7 @@ export class Toolkit {
 	public static UID(): string {
 		if (Toolkit.TESTING) {
 			Toolkit.TESTING_UID++;
-			return ''+Toolkit.TESTING_UID;
+			return "" + Toolkit.TESTING_UID;
 		}
 		return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
 			var r = (Math.random() * 16) | 0,
@@ -42,13 +42,10 @@ export class Toolkit {
 		return `M${firstPoint.x},${firstPoint.y} L ${lastPoint.x},${lastPoint.y}`;
 	}
 
-	public static generateCurvePath(
-		firstPoint: PointModel,
-		lastPoint: PointModel,
-		curvy: number = 0,
-	): string {
-		return `M${firstPoint.x},${firstPoint.y} C ${firstPoint.x + curvy},${firstPoint.y} ${lastPoint.x +
-		-curvy},${lastPoint.y} ${lastPoint.x},${lastPoint.y}`;
+	public static generateCurvePath(firstPoint: PointModel, lastPoint: PointModel, curvy: number = 0): string {
+		return `M${firstPoint.x},${firstPoint.y} C ${firstPoint.x + curvy},${firstPoint.y} ${lastPoint.x + -curvy},${
+			lastPoint.y
+		} ${lastPoint.x},${lastPoint.y}`;
 	}
 
 	public static generateDynamicPath(pathCoords: number[][]) {

src/defaults/factories/DefaultLinkFactory.tsx

@@ -23,16 +23,7 @@ export class DefaultLinkFactory extends LinkFactory<DefaultLinkModel> {
 		return new DefaultLinkModel();
 	}
 
-
 	generateLinkSegment(model: DefaultLinkModel, selected: boolean, path: string) {
-		return (
-			<path
-				className={selected ? "selected" : ''}
-				strokeWidth={model.width}
-				stroke={model.color}
-				d={path}
-			/>
-		);
+		return <path className={selected ? "selected" : ""} strokeWidth={model.width} stroke={model.color} d={path} />;
 	}
-
 }

src/defaults/models/DefaultLinkModel.ts

@@ -10,19 +10,17 @@ import {DefaultLabelModel} from "./DefaultLabelModel";
 import { LabelModel } from "../../models/LabelModel";
 
 export interface DefaultLinkModelListener extends LinkModelListener {
-
 	colorChanged?(event: BaseEvent<DefaultLinkModel> & { color: null | string });
 
 	widthChanged?(event: BaseEvent<DefaultLinkModel> & { width: 0 | number });
 }
 
 export class DefaultLinkModel extends LinkModel<DefaultLinkModelListener> {
-
 	width: number;
 	color: string;
 	curvyness: number;
 
-	constructor(type: string = 'default'){
+	constructor(type: string = "default") {
 		super(type);
 		this.color = "rgba(255,255,255,0.5)";
 		this.width = 3;
@@ -66,5 +64,4 @@ export class DefaultLinkModel extends LinkModel<DefaultLinkModelListener>{
 			listener.colorChanged && listener.colorChanged({ ...event, color: color });
 		});
 	}
-
 }

src/defaults/models/DefaultPortModel.ts

@@ -5,7 +5,6 @@ import {DefaultLinkModel} from "./DefaultLinkModel";
 import { LinkModel } from "../../models/LinkModel";
 
 export class DefaultPortModel extends PortModel {
-
 	in: boolean;
 	label: string;
 	links: { [id: string]: DefaultLinkModel };

src/defaults/widgets/DefaultLabelWidget.tsx

@@ -6,10 +6,7 @@ export interface DefaultLabelWidgetProps{
 }
 
 export class DefaultLabelWidget extends React.Component<DefaultLabelWidgetProps> {
-
 	render() {
-		return (
-			<div className="default-label">{this.props.model.label}</div>
-		);
+		return <div className="default-label">{this.props.model.label}</div>;
 	}
 }

src/defaults/widgets/DefaultLinkWidget.tsx

@@ -28,7 +28,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 		link: null,
 		engine: null,
 		smooth: false,
-		diagramEngine: null,
+		diagramEngine: null
 	};
 
 	// DOM references to the label and paths (if label is given), used to calculate dynamic positioning
@@ -54,7 +54,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 	calculateAllLabelPosition() {
 		_.forEach(this.props.link.labels, (label, index) => {
 			this.calculateLabelPosition(label, index + 1);
-		})
+		});
 	}
 
 	componentDidUpdate() {
@@ -113,9 +113,16 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 	generateLabel(label: LabelModel) {
 		const canvas = this.props.diagramEngine.canvas as HTMLElement;
 		return (
-			<foreignObject key={label.id} className="link-label" width={canvas.offsetWidth} height={canvas.offsetHeight}>
+			<foreignObject
+				key={label.id}
+				className="link-label"
+				width={canvas.offsetWidth}
+				height={canvas.offsetHeight}
+			>
 				<div ref={ref => (this.refLabels[label.id] = ref)}>
-					{this.props.diagramEngine.getFactoryForLabel(label).generateReactWidget(this.props.diagramEngine, label)}
+					{this.props.diagramEngine
+						.getFactoryForLabel(label)
+						.generateReactWidget(this.props.diagramEngine, label)}
 				</div>
 			</foreignObject>
 		);
@@ -124,11 +131,16 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 	generateLink(path: string, extraProps: any, id: string | number): JSX.Element {
 		var props = this.props;
 
-		var Bottom = React.cloneElement((props.diagramEngine.getFactoryForLink(this.props.link) as DefaultLinkFactory)
-			.generateLinkSegment(this.props.link, this.state.selected || this.props.link.isSelected(), path), {
-			ref:ref => ref && this.refPaths.push(ref),
-		});
-
+		var Bottom = React.cloneElement(
+			(props.diagramEngine.getFactoryForLink(this.props.link) as DefaultLinkFactory).generateLinkSegment(
+				this.props.link,
+				this.state.selected || this.props.link.isSelected(),
+				path
+			),
+			{
+				ref: ref => ref && this.refPaths.push(ref)
+			}
+		);
 
 		var Top = React.cloneElement(Bottom, {
 			...extraProps,
@@ -140,7 +152,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 				this.setState({ selected: true });
 			},
 			ref: null,
-			'data-linkid': this.props.link.getID(),
+			"data-linkid": this.props.link.getID(),
 			strokeOpacity: this.state.selected ? 0.1 : 0,
 			strokeWidth: 20,
 			onContextMenu: () => {
@@ -159,12 +171,14 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 		);
 	}
 
-	findPathAndRelativePositionToRenderLabel = (index: number): { path: any; position: number; } => {
+	findPathAndRelativePositionToRenderLabel = (index: number): { path: any; position: number } => {
 		// an array to hold all path lengths, making sure we hit the DOM only once to fetch this information
 		const lengths = this.refPaths.map(path => path.getTotalLength());
 
 		// calculate the point where we want to display the label
-		let labelPosition = lengths.reduce((previousValue, currentValue) => previousValue + currentValue, 0) * (index / (this.props.link.labels.length + 1));
+		let labelPosition =
+			lengths.reduce((previousValue, currentValue) => previousValue + currentValue, 0) *
+			(index / (this.props.link.labels.length + 1));
 
 		// find the path where the label will be rendered and calculate the relative position
 		let pathIndex = 0;
@@ -198,13 +212,15 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 		const pathCentre = path.getPointAtLength(position);
 
 		const labelCoordinates = {
-			x: (pathCentre.x - labelDimensions.width / 2) + label.offsetX,
-			y: (pathCentre.y - labelDimensions.height / 2) + label.offsetY
+			x: pathCentre.x - labelDimensions.width / 2 + label.offsetX,
+			y: pathCentre.y - labelDimensions.height / 2 + label.offsetY
 		};
-		this.refLabels[label.id].setAttribute("style", `transform: translate(${labelCoordinates.x}px, ${labelCoordinates.y}px);`);
+		this.refLabels[label.id].setAttribute(
+			"style",
+			`transform: translate(${labelCoordinates.x}px, ${labelCoordinates.y}px);`
+		);
 	};
 
-
 	/**
 	 * Smart routing is only applicable when all conditions below are true:
 	 * - smart routing is set to true on the engine
@@ -267,7 +283,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 						{
 							onMouseDown: event => {
 								this.addPointToLink(event, 1);
-							},
+							}
 						},
 						"0"
 					)
@@ -302,9 +318,9 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 						{
 							onMouseDown: event => {
 								this.addPointToLink(event, 1);
+							}
 						},
-						},
-						"0",
+						"0"
 					)
 				);
 
@@ -315,19 +331,20 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 			} else {
 				//draw the multiple anchors and complex line instead
 				for (let i = 0; i < points.length - 1; i++) {
-					paths.push(this.generateLink(
+					paths.push(
+						this.generateLink(
 							Toolkit.generateLinePath(points[i], points[i + 1]),
 							{
 								"data-linkid": this.props.link.id,
 								"data-point": i,
 								onMouseDown: (event: MouseEvent) => {
 									this.addPointToLink(event, i + 1);
-							},
-						},
-						i,
-					));
 								}
-
+							},
+							i
+						)
+					);
+				}
 
 				//render the circles
 				for (var i = 1; i < points.length - 1; i++) {
@@ -345,11 +362,9 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 		return (
 			<g>
 				{paths}
-				{
-					_.map(this.props.link.labels, (labelModel) => {
+				{_.map(this.props.link.labels, labelModel => {
 					return this.generateLabel(labelModel);
-					})
-				}
+				})}
 			</g>
 		);
 	}

src/models/BaseModel.ts

@@ -12,7 +12,10 @@ export interface BaseModelListener extends BaseListener {
 /**
  * @author Dylan Vorster
  */
-export class BaseModel<X extends BaseEntity = BaseEntity,T extends BaseModelListener = BaseModelListener> extends BaseEntity<BaseModelListener> {
+export class BaseModel<
+	X extends BaseEntity = BaseEntity,
+	T extends BaseModelListener = BaseModelListener
+> extends BaseEntity<BaseModelListener> {
 	type: string;
 	selected: boolean;
 	parent: X;

src/models/DiagramModel.ts

@@ -229,7 +229,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
 	}
 
 	addAll(...models: BaseModel[]): BaseModel[] {
-		_.forEach(models, (model) =>{
+		_.forEach(models, model => {
 			if (model instanceof LinkModel) {
 				this.addLink(model);
 			} else if (model instanceof NodeModel) {

src/models/LabelModel.ts

@@ -2,7 +2,6 @@ import {BaseModel} from "./BaseModel";
 import { LinkModel } from "./LinkModel";
 
 export class LabelModel extends BaseModel<LinkModel> {
-
 	offsetX: number;
 	offsetY: number;
 

src/models/LinkModel.ts

@@ -14,7 +14,6 @@ export interface LinkModelListener extends BaseModelListener {
 }
 
 export class LinkModel<T extends LinkModelListener = LinkModelListener> extends BaseModel<DiagramModel, T> {
-
 	sourcePort: PortModel | null;
 	targetPort: PortModel | null;
 	labels: LabelModel[];
@@ -42,13 +41,20 @@ export class LinkModel<T extends LinkModelListener = LinkModelListener> extends
 		this.labels = ob.label || null;
 
 		if (ob.target) {
-			this.setTargetPort(this.getParent().getNode(ob.target).getPortFromID(ob.targetPort));
+			this.setTargetPort(
+				this.getParent()
+					.getNode(ob.target)
+					.getPortFromID(ob.targetPort)
+			);
 		}
 
 		if (ob.source) {
-			this.setSourcePort(this.getParent().getNode(ob.source).getPortFromID(ob.sourcePort));
+			this.setSourcePort(
+				this.getParent()
+					.getNode(ob.source)
+					.getPortFromID(ob.sourcePort)
+			);
 		}
-
 	}
 
 	serialize() {
@@ -63,7 +69,7 @@ export class LinkModel<T extends LinkModelListener = LinkModelListener> extends
 			extras: this.extras,
 			labels: _.map(this.labels, label => {
 				return label.serialize();
-			}),
+			})
 		});
 	}
 

src/models/PortModel.ts

@@ -95,7 +95,6 @@ export class PortModel extends BaseModel<NodeModel, BaseModelListener> {
 		return true;
 	}
 
-
 	isLocked() {
 		return super.isLocked() || this.getParent().isLocked();
 	}

src/widgets/NodeWidget.tsx

@@ -25,7 +25,6 @@ export class NodeWidget extends React.Component<NodeProps, NodeState> {
 	}
 
 	render() {
-
 		return (
 			<div
 				data-nodeid={this.props.node.id}