clean up code style

demos/Helper.tsx

@@ -4,18 +4,18 @@ export class Helper {
 	 * since the actual story book stories are rendered as an iFrame.
 	 */
 	static logMousePosition() {
-		let element = window.parent.document.createElement('mouse-position');
+		let element = window.parent.document.createElement("mouse-position");
-		element.style.position = 'absolute';
+		element.style.position = "absolute";
-		element.style.top = '0px';
+		element.style.top = "0px";
-		element.style.left = '0px';
+		element.style.left = "0px";
-		element.style.bottom = '0px';
+		element.style.bottom = "0px";
-		element.style.right = '0px';
+		element.style.right = "0px";
-		element.style.zIndex = '10';
+		element.style.zIndex = "10";
 		window.parent.document.body.appendChild(element);
 
-		window.parent.window.addEventListener('mousemove', (event) => {
+		window.parent.window.addEventListener("mousemove", event => {
 			console.clear();
 			console.log(event.clientX, event.clientY);
 		});
 	}
-}
+}

demos/demo-dagre/dagre-utils.ts

@@ -1,5 +1,5 @@
-import * as dagre from 'dagre';
+import * as dagre from "dagre";
-import * as _ from 'lodash';
+import * as _ from "lodash";
 
 const size = {
 	width: 60,
@@ -22,7 +22,7 @@ function distributeGraph(model) {
 	let edges = mapEdges(model);
 	let graph = new dagre.graphlib.Graph();
 	graph.setGraph({});
-	graph.setDefaultEdgeLabel(function () {
+	graph.setDefaultEdgeLabel(function() {
 		return {};
 	});
 	//add elements to dagre graph
@@ -41,15 +41,18 @@ function distributeGraph(model) {
 
 function mapElements(model) {
 	// dagre compatible format
-	return model.nodes.map(node => ({id: node.id, metadata: {...size, id: node.id}}));
+	return model.nodes.map(node => ({ id: node.id, metadata: { ...size, id: node.id } }));
 }
 
 function mapEdges(model) {
 	// returns links which connects nodes
 	// we check are there both from and to nodes in the model. Sometimes links can be detached
-	return model.links.map(link => ({
+	return model.links
-		from: link.source,
+		.map(link => ({
-		to: link.target
+			from: link.source,
-	}))
+			to: link.target
-		.filter(item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to));
+		}))
-}
+		.filter(
+			item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to)
+		);
+}

demos/demo-dagre/index.tsx

@@ -11,10 +11,9 @@ import {
 	DefaultPortInstanceFactory,
 	LinkInstanceFactory
 } from "../../src/main";
-import {distributeElements} from './dagre-utils';
+import { distributeElements } from "./dagre-utils";
 import * as React from "react";
 
-
 function createNode(name) {
 	return new DefaultNodeModel(name, "rgb(0,192,255)");
 }
@@ -36,7 +35,6 @@ function connectNodes(nodeFrom, nodeTo) {
  * Tests auto distribution
  */
 class Demo8Widget extends React.Component<any, any> {
-
 	constructor(props) {
 		super(props);
 		this.state = {};
@@ -44,7 +42,7 @@ class Demo8Widget extends React.Component<any, any> {
 	}
 
 	autoDistribute() {
-		const {engine} = this.props;
+		const { engine } = this.props;
 		const model = engine.getDiagramModel();
 		let distributedModel = getDistributedModel(engine, model);
 		engine.setDiagramModel(distributedModel);
@@ -52,11 +50,11 @@ class Demo8Widget extends React.Component<any, any> {
 	}
 
 	render() {
-		const {engine} = this.props;
+		const { engine } = this.props;
 
 		return (
 			<div>
-				<DiagramWidget diagramEngine={engine}/>
+				<DiagramWidget diagramEngine={engine} />
 				<button onClick={this.autoDistribute}>Re-distribute</button>
 			</div>
 		);
@@ -78,7 +76,6 @@ export default () => {
 	engine.registerNodeFactory(new DefaultNodeFactory());
 	engine.registerLinkFactory(new DefaultLinkFactory());
 
-
 	//2) setup the diagram model
 	let model = new DiagramModel();
 
@@ -87,13 +84,13 @@ export default () => {
 	let nodesFrom = [];
 	let nodesTo = [];
 
-	nodesFrom.push(createNode('from-1'));
+	nodesFrom.push(createNode("from-1"));
-	nodesFrom.push(createNode('from-2'));
+	nodesFrom.push(createNode("from-2"));
-	nodesFrom.push(createNode('from-3'));
+	nodesFrom.push(createNode("from-3"));
 
-	nodesTo.push(createNode('to-1'));
+	nodesTo.push(createNode("to-1"));
-	nodesTo.push(createNode('to-2'));
+	nodesTo.push(createNode("to-2"));
-	nodesTo.push(createNode('to-3'));
+	nodesTo.push(createNode("to-3"));
 	//4) link nodes together
 	let links = nodesFrom.map((node, index) => {
 		return connectNodes(node, nodesTo[index]);
@@ -112,7 +109,7 @@ export default () => {
 		node.y = 100;
 		model.addNode(node);
 	});
-	links.forEach((link) => {
+	links.forEach(link => {
 		model.addLink(link);
 	});
 	//5) load model into engine
@@ -123,5 +120,5 @@ export default () => {
 	let model2 = getDistributedModel(engine, model);
 	engine.setDiagramModel(model2);
 
-	return <Demo8Widget engine={engine}/>
+	return <Demo8Widget engine={engine} />;
 };

demos/demo10/index.tsx

@@ -24,16 +24,16 @@ class NodeDelayedPosition extends React.Component<any, any> {
 	}
 
 	updatePosition() {
-		const {engine} = this.props;
+		const { engine } = this.props;
 		let model = engine.getDiagramModel();
 		const nodes = model.getNodes();
-        let node = nodes[Object.keys(nodes)[0]];
+		let node = nodes[Object.keys(nodes)[0]];
-        node.setPosition(node.x + 30, node.y + 30);
+		node.setPosition(node.x + 30, node.y + 30);
 		this.forceUpdate();
 	}
 
 	updatePositionViaSerialize() {
-		let {engine} = this.props;
+		let { engine } = this.props;
 		let model = engine.getDiagramModel();
 		let str = JSON.stringify(model.serializeDiagram());
 		let model2 = new DiagramModel();
@@ -42,15 +42,15 @@ class NodeDelayedPosition extends React.Component<any, any> {
 		node.x += 30;
 		node.y += 30;
 		model2.deSerializeDiagram(obj, engine);
-        engine.setDiagramModel(model2);
+		engine.setDiagramModel(model2);
 		this.forceUpdate();
 	}
 
 	render() {
-		const {engine} = this.props;
+		const { engine } = this.props;
 		return (
 			<div>
-				<DiagramWidget diagramEngine={engine}/>
+				<DiagramWidget diagramEngine={engine} />
 				<button onClick={this.updatePosition}>Update position</button>
 				<button onClick={this.updatePositionViaSerialize}>Update position via serialize</button>
 			</div>
@@ -98,5 +98,5 @@ export default () => {
 	engine.registerInstanceFactory(new LinkInstanceFactory());
 
 	//6) render the diagram!
-	return <NodeDelayedPosition engine={engine} model={model}/>;
+	return <NodeDelayedPosition engine={engine} model={model} />;
-};
+};

demos/demo12/index.tsx

@@ -8,7 +8,7 @@ import {
 	DefaultPortModel,
 	DiagramWidget,
 	LinkWidget,
-	LinkProps,	
+	LinkProps,
 	DefaultLinkWidget
 } from "../../src/main";
 import { action } from "@storybook/addon-actions";
@@ -19,22 +19,21 @@ export class AdvancedLinkModel extends LinkModel {
 	size: number;
 	color: string;
 
-    constructor() {
+	constructor() {
-        super();
+		super();
 		this.linkType = "advanced";
-		this.color = 'green';
+		this.color = "green";
 		this.size = 6;
-    }
+	}
 }
 
-export class AdvancedPortModel extends DefaultPortModel
+export class AdvancedPortModel extends DefaultPortModel {
-{
+	constructor(isInput: boolean, name: string, label: string = null, id?: string) {
-    constructor(isInput: boolean, name: string, label: string = null, id?: string) {
+		super(isInput, name, label, id);
-        super(isInput, name, label, id);
+	}
-    }
 
-    createLinkModel(): LinkModel | null {
+	createLinkModel(): LinkModel | null {
-		var link = new AdvancedLinkModel();		
+		var link = new AdvancedLinkModel();
 		link.setSourcePort(this);
 		return link;
 	}
@@ -93,9 +92,9 @@ export default () => {
 	var model = new DiagramModel();
 
 	model.addNode(node1);
-	model.addNode(node2); 
+	model.addNode(node2);
-	model.addNode(node3); 
+	model.addNode(node3);
-	model.addNode(node4); 
+	model.addNode(node4);
 
 	var link1 = node1.getOutPorts()[0].createLinkModel();
 	link1.setTargetPort(port3);

demos/demo8/index.tsx

@@ -36,7 +36,7 @@ export default () => {
 
 	var props = {
 		diagramEngine: engine,
-		maxNumberPointsPerLink: 5,
+		maxNumberPointsPerLink: 5
 	} as SRD.DiagramProps;
 
 	return (

demos/demo9/index.tsx

@@ -43,9 +43,9 @@ export default () => {
 	model.addLink(link1);
 	model.addLink(link2);
 
-	[node1, node2, link1, link2].forEach((item) => {
+	[node1, node2, link1, link2].forEach(item => {
 		item.addListener({
-			selectionChanged: action('selectionChanged')
+			selectionChanged: action("selectionChanged")
 		});
 	});
 
@@ -53,7 +53,7 @@ export default () => {
 
 	var props = {
 		diagramEngine: engine,
-		maxNumberPointsPerLink: 0, // no extra points so link selection is fired straight away
+		maxNumberPointsPerLink: 0 // no extra points so link selection is fired straight away
 	} as SRD.DiagramProps;
 
 	return (

demos/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import {storiesOf} from "@storybook/react";
+import { storiesOf } from "@storybook/react";
-import {action} from "@storybook/addon-actions";
+import { action } from "@storybook/addon-actions";
-import {Toolkit} from "../src/Toolkit";
+import { Toolkit } from "../src/Toolkit";
 
 import demo1 from "./demo1/index";
 import demo2 from "./demo2/index";
@@ -16,11 +16,10 @@ import demo10 from "./demo10/index";
 import demo11 from "./demo11/index";
 import demo12 from "./demo12/index";
 import demoDagre from "./demo-dagre/index";
-import {Helper} from "./Helper";
+import { Helper } from "./Helper";
 
 require("./test.scss");
 
-
 // make tests deterministic
 Toolkit.TESTING_MODE = true;
 
@@ -48,7 +47,7 @@ storiesOf("React Diagrams", module)
 	})
 	.add("Auto distribute", () => {
 		return demoDagre();
-  	})
+	})
 	.add("Limiting number of points", () => {
 		return demo8();
 	})
@@ -66,4 +65,4 @@ storiesOf("React Diagrams", module)
 	});
 
 // enable this to log mouse location when writing new puppeteer tests
-//Helper.logMousePosition()
+//Helper.logMousePosition()

package.json

@@ -25,7 +25,7 @@
 		"storybook:build": "build-storybook -c .storybook -o .out",
 		"storybook:github": "storybook-to-ghpages",
 		"prepublishOnly": "export NODE_ENV=production && webpack && ./node_modules/node-sass/bin/node-sass --output-style compressed ./src/sass.scss > ./dist/style.min.css",
-		"lintjs": "prettier --use-tabs --write \"{src,demos}/**/*.{ts,tsx}\" --print-width 120"
+		"pretty": "prettier --use-tabs --write \"{src,demos}/**/*.{ts,tsx}\" --print-width 120"
 	},
 	"dependencies": {
 		"closest": "^0.0.1",

src/BaseEntity.ts

@@ -1,6 +1,5 @@
 import { Toolkit } from "./Toolkit";
 
-
 /**
  * @author Dylan Vorster
  */
@@ -11,11 +10,8 @@ export interface BaseEvent<T extends BaseEntity = any> {
 	id: string;
 }
 
-
 export interface BaseListener<T extends BaseEntity = any> {
-
+	lockChanged?(event: BaseEvent<T> & { locked: boolean }): void;
-	lockChanged?(event: BaseEvent<T> & {locked: boolean} ): void;
-
 }
 
 export class BaseEntity<T extends BaseListener = {}> {
@@ -58,7 +54,7 @@ export class BaseEntity<T extends BaseListener = {}> {
 		};
 		for (var i in this.listeners) {
 			// propagation stopped
-			if(!event.firing){
+			if (!event.firing) {
 				return;
 			}
 			cb(this.listeners[i], event);
@@ -87,7 +83,7 @@ export class BaseEntity<T extends BaseListener = {}> {
 		this.locked = locked;
 		this.iterateListeners((listener, event) => {
 			if (listener.lockChanged) {
-				listener.lockChanged({...event, locked: locked});
+				listener.lockChanged({ ...event, locked: locked });
 			}
 		});
 	}

src/CanvasActions.ts

@@ -1,8 +1,8 @@
 import { DiagramModel } from "./models/DiagramModel";
 import { DiagramEngine } from "./DiagramEngine";
 import { SelectionModel } from "./widgets/DiagramWidget";
-import {PointModel} from "./models/PointModel";
+import { PointModel } from "./models/PointModel";
-import {NodeModel} from "./models/NodeModel";
+import { NodeModel } from "./models/NodeModel";
 
 export class BaseAction {
 	mouseX: number;

src/DiagramEngine.ts

@@ -3,11 +3,11 @@ import { BaseEntity, BaseListener } from "./BaseEntity";
 import { DiagramModel } from "./models/DiagramModel";
 import { AbstractInstanceFactory } from "./AbstractInstanceFactory";
 import * as _ from "lodash";
-import {BaseModel, BaseModelListener} from "./models/BaseModel";
+import { BaseModel, BaseModelListener } from "./models/BaseModel";
-import {NodeModel} from "./models/NodeModel";
+import { NodeModel } from "./models/NodeModel";
-import {PointModel} from "./models/PointModel";
+import { PointModel } from "./models/PointModel";
-import {PortModel} from "./models/PortModel";
+import { PortModel } from "./models/PortModel";
-import {LinkModel} from "./models/LinkModel";
+import { LinkModel } from "./models/LinkModel";
 /**
  * @author Dylan Vorster
  */
@@ -48,7 +48,7 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
 	}
 
 	repaintCanvas() {
-		this.iterateListeners((listener) => {
+		this.iterateListeners(listener => {
 			listener.repaintCanvas && listener.repaintCanvas();
 		});
 	}
@@ -59,11 +59,11 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
 
 	enableRepaintEntities(entities: BaseModel<BaseModelListener>[]) {
 		this.paintableWidgets = {};
-		entities.forEach((entity) => {
+		entities.forEach(entity => {
 			//if a node is requested to repaint, add all of its links
 			if (entity instanceof NodeModel) {
-				_.forEach(entity.getPorts(), (port) => {
+				_.forEach(entity.getPorts(), port => {
-					_.forEach(port.getLinks(), (link) => {
+					_.forEach(port.getLinks(), link => {
 						this.paintableWidgets[link.getID()] = true;
 					});
 				});
@@ -104,7 +104,7 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
 		return model.isLocked();
 	}
 
-	recalculatePortsVisually(){
+	recalculatePortsVisually() {
 		this.nodesRendered = false;
 		this.linksThatHaveInitiallyRendered = {};
 	}
@@ -149,15 +149,19 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
 
 	registerNodeFactory(factory: NodeWidgetFactory) {
 		this.nodeFactories[factory.getType()] = factory;
-		this.iterateListeners((listener) => {
+		this.iterateListeners(listener => {
-			if (listener.nodeFactoriesUpdated) { listener.nodeFactoriesUpdated(); }
+			if (listener.nodeFactoriesUpdated) {
+				listener.nodeFactoriesUpdated();
+			}
 		});
 	}
 
 	registerLinkFactory(factory: LinkWidgetFactory) {
 		this.linkFactories[factory.getType()] = factory;
-		this.iterateListeners((listener) => {
+		this.iterateListeners(listener => {
-			if (listener.linkFactoriesUpdated) { listener.linkFactoriesUpdated(); }
+			if (listener.linkFactoriesUpdated) {
+				listener.linkFactoriesUpdated();
+			}
 		});
 	}
 
@@ -211,11 +215,13 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
 			'.port[data-name="' + port.getName() + '"][data-nodeid="' + port.getParent().getID() + '"]'
 		);
 		if (selector === null) {
-			throw new Error("Cannot find Node Port element with nodeID: [" +
+			throw new Error(
-				port.getParent().getID() +
+				"Cannot find Node Port element with nodeID: [" +
-				"] and name: [" +
+					port.getParent().getID() +
-				port.getName() +
+					"] and name: [" +
-				"]");
+					port.getName() +
+					"]"
+			);
 		}
 		return selector;
 	}
@@ -246,7 +252,7 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
 	zoomToFit() {
 		const xFactor = this.canvas.clientWidth / this.canvas.scrollWidth;
 		const yFactor = this.canvas.clientHeight / this.canvas.scrollHeight;
-		const zoomFactor = xFactor < yFactor ? xFactor: yFactor;
+		const zoomFactor = xFactor < yFactor ? xFactor : yFactor;
 
 		this.diagramModel.setZoomLevel(this.diagramModel.getZoomLevel() * zoomFactor);
 		this.diagramModel.setOffset(0, 0);

src/LinkInstanceFactory.ts

@@ -1,5 +1,5 @@
 import { AbstractInstanceFactory } from "./AbstractInstanceFactory";
-import {LinkModel} from "./models/LinkModel";
+import { LinkModel } from "./models/LinkModel";
 /**
  * @author Dylan Vorster
  */

src/Toolkit.ts

@@ -3,18 +3,17 @@ import closest = require("closest");
  * @author Dylan Vorster
  */
 export class Toolkit {
-
 	static TESTING_MODE = false;
 	static TESTING_MODE_ID = 1;
 
 	/**
-   * Generats a unique ID (thanks Stack overflow :3)
+	 * Generats a unique ID (thanks Stack overflow :3)
-   * @returns {String}
+	 * @returns {String}
-   */
+	 */
 	public static UID(): string {
-		if(Toolkit.TESTING_MODE){
+		if (Toolkit.TESTING_MODE) {
-			Toolkit.TESTING_MODE_ID ++;
+			Toolkit.TESTING_MODE_ID++;
-			return "test-uid-"+Toolkit.TESTING_MODE_ID;
+			return "test-uid-" + Toolkit.TESTING_MODE_ID;
 		}
 		return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
 			var r = (Math.random() * 16) | 0,

src/WidgetFactories.ts

@@ -1,6 +1,6 @@
 import { DiagramEngine } from "./DiagramEngine";
-import {NodeModel} from "./models/NodeModel";
+import { NodeModel } from "./models/NodeModel";
-import {LinkModel} from "./models/LinkModel";
+import { LinkModel } from "./models/LinkModel";
 /**
  * @author Dylan Vorster
  */

src/defaults/DefaultLinkFactory.ts

@@ -2,7 +2,7 @@ import { LinkWidgetFactory } from "../WidgetFactories";
 import * as React from "react";
 import { DefaultLinkWidget } from "./DefaultLinkWidget";
 import { DiagramEngine } from "../DiagramEngine";
-import {LinkModel} from "../models/LinkModel";
+import { LinkModel } from "../models/LinkModel";
 /**
  * @author Dylan Vorster
  */

src/defaults/DefaultLinkWidget.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { DiagramEngine } from "../DiagramEngine";
-import {LinkModel} from "../models/LinkModel";
+import { LinkModel } from "../models/LinkModel";
-import {PointModel} from "../models/PointModel";
+import { PointModel } from "../models/PointModel";
 
 export interface DefaultLinkProps {
 	color?: string;
 	width?: number;
-	smooth?: boolean;	
+	smooth?: boolean;
 	link: LinkModel;
 	diagramEngine: DiagramEngine;
 	pointAdded?: (point: PointModel, event) => any;
@@ -48,7 +48,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 			this.props.link.addPoint(point, index);
 			this.props.pointAdded(point, event);
 		}
-	}
+	};
 
 	generatePoint(pointIndex: number): JSX.Element {
 		let x = this.props.link.points[pointIndex].x;
@@ -165,7 +165,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 			paths.push(
 				this.generateLink(
 					{
-						onMouseDown: (event) => {
+						onMouseDown: event => {
 							this.addPointToLink(event, 1);
 						},
 						d: this.generateCurvePath(pointLeft, pointRight, margin, -margin)
@@ -197,10 +197,10 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 					{
 						"data-linkid": this.props.link.id,
 						"data-point": index,
-						"onMouseDown": (event: MouseEvent) => {
+						onMouseDown: (event: MouseEvent) => {
 							this.addPointToLink(event, index + 1);
 						},
-						"d": data
+						d: data
 					},
 					index
 				);

src/defaults/DefaultNodeModel.ts

@@ -2,7 +2,7 @@ import { DefaultPortModel } from "./DefaultPortModel";
 import * as _ from "lodash";
 
 import { AbstractInstanceFactory } from "../AbstractInstanceFactory";
-import {NodeModel} from "../models/NodeModel";
+import { NodeModel } from "../models/NodeModel";
 
 export class DefaultNodeInstanceFactory extends AbstractInstanceFactory<DefaultNodeModel> {
 	constructor() {

src/defaults/DefaultPortModel.ts

@@ -1,6 +1,6 @@
 import * as _ from "lodash";
 import { AbstractInstanceFactory } from "../AbstractInstanceFactory";
-import {PortModel} from "../models/PortModel";
+import { PortModel } from "../models/PortModel";
 
 export class DefaultPortInstanceFactory extends AbstractInstanceFactory<DefaultPortModel> {
 	constructor() {

src/models/BaseModel.ts

@@ -1,10 +1,9 @@
 import { BaseEntity, BaseListener } from "../BaseEntity";
 import * as _ from "lodash";
-import {BaseEvent} from "../BaseEntity";
+import { BaseEvent } from "../BaseEntity";
 
 export interface BaseModelListener extends BaseListener {
-
+	selectionChanged?(event: BaseEvent<BaseModel> & { isSelected: boolean }): void;
-	selectionChanged?(event: BaseEvent<BaseModel> & {isSelected: boolean}): void;
 
 	entityRemoved?(event: BaseEvent<BaseModel>): void;
 }
@@ -13,7 +12,6 @@ export interface BaseModelListener extends BaseListener {
  * @author Dylan Vorster
  */
 export class BaseModel<T extends BaseModelListener = BaseModelListener> extends BaseEntity<BaseModelListener> {
-
 	selected: boolean;
 	class: string;
 
@@ -54,7 +52,7 @@ export class BaseModel<T extends BaseModelListener = BaseModelListener> extends
 		this.selected = selected;
 		this.iterateListeners((listener, event) => {
 			if (listener.selectionChanged) {
-				listener.selectionChanged({...event, isSelected: selected});
+				listener.selectionChanged({ ...event, isSelected: selected });
 			}
 		});
 	}

src/models/DiagramModel.ts

@@ -1,27 +1,24 @@
-import {BaseListener, BaseEntity, BaseEvent} from "../BaseEntity";
+import { BaseListener, BaseEntity, BaseEvent } from "../BaseEntity";
 import * as _ from "lodash";
 import { DiagramEngine } from "../DiagramEngine";
-import {LinkModel} from "./LinkModel";
+import { LinkModel } from "./LinkModel";
-import {NodeModel} from "./NodeModel";
+import { NodeModel } from "./NodeModel";
-import {PortModel} from "./PortModel";
+import { PortModel } from "./PortModel";
-import {BaseModel, BaseModelListener} from "./BaseModel";
+import { BaseModel, BaseModelListener } from "./BaseModel";
 /**
  * @author Dylan Vorster
  *
  */
 export interface DiagramListener extends BaseListener {
+	nodesUpdated?(event: BaseEvent & { node: NodeModel; isCreated: boolean }): void;
 
-	nodesUpdated?(event: BaseEvent & { node: NodeModel, isCreated: boolean }): void;
+	linksUpdated?(event: BaseEvent & { link: LinkModel; isCreated: boolean }): void;
 
-	linksUpdated?(event: BaseEvent & { link: LinkModel, isCreated: boolean }): void;
+	offsetUpdated?(event: BaseEvent<DiagramModel> & { offsetX: number; offsetY: number }): void;
-
-	offsetUpdated?(event: BaseEvent<DiagramModel> & { offsetX: number, offsetY: number}): void;
 
 	zoomUpdated?(event: BaseEvent<DiagramModel> & { zoom: number }): void;
 
 	gridUpdated?(event: BaseEvent<DiagramModel> & { size: number }): void;
-
-
 }
 /**
  *
@@ -54,7 +51,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
 	setGridSize(size: number = 0) {
 		this.gridSize = size;
 		this.iterateListeners((listener, event) => {
-			listener.gridUpdated && listener.gridUpdated({...event, size: size});
+			listener.gridUpdated && listener.gridUpdated({ ...event, size: size });
 		});
 	}
 
@@ -160,7 +157,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
 		this.zoom = zoom;
 
 		this.iterateListeners((listener, event) => {
-			listener.zoomUpdated && listener.zoomUpdated({...event, zoom: zoom});
+			listener.zoomUpdated && listener.zoomUpdated({ ...event, zoom: zoom });
 		});
 	}
 
@@ -168,21 +165,22 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
 		this.offsetX = offsetX;
 		this.offsetY = offsetY;
 		this.iterateListeners((listener, event) => {
-			listener.offsetUpdated && listener.offsetUpdated({...event, offsetX: offsetX, offsetY: offsetY});
+			listener.offsetUpdated && listener.offsetUpdated({ ...event, offsetX: offsetX, offsetY: offsetY });
 		});
 	}
 
 	setOffsetX(offsetX: number) {
 		this.offsetX = offsetX;
 		this.iterateListeners((listener, event) => {
-			listener.offsetUpdated && listener.offsetUpdated({...event, offsetX: offsetX, offsetY: this.offsetY});
+			listener.offsetUpdated && listener.offsetUpdated({ ...event, offsetX: offsetX, offsetY: this.offsetY });
 		});
 	}
 	setOffsetY(offsetY: number) {
 		this.offsetY = offsetY;
 
 		this.iterateListeners((listener, event) => {
-			listener.offsetUpdated && listener.offsetUpdated({...event, offsetX: this.offsetX, offsetY: this.offsetY});
+			listener.offsetUpdated &&
+				listener.offsetUpdated({ ...event, offsetX: this.offsetX, offsetY: this.offsetY });
 		});
 	}
 
@@ -226,7 +224,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
 		});
 		this.links[link.getID()] = link;
 		this.iterateListeners((listener, event) => {
-			listener.linksUpdated && listener.linksUpdated({...event,link: link, isCreated: true});
+			listener.linksUpdated && listener.linksUpdated({ ...event, link: link, isCreated: true });
 		});
 		return link;
 	}
@@ -239,7 +237,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
 		});
 		this.nodes[node.getID()] = node;
 		this.iterateListeners((listener, event) => {
-			listener.nodesUpdated && listener.nodesUpdated({...event,node: node, isCreated: true});
+			listener.nodesUpdated && listener.nodesUpdated({ ...event, node: node, isCreated: true });
 		});
 		return node;
 	}
@@ -248,7 +246,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
 		link = this.getLink(link);
 		delete this.links[link.getID()];
 		this.iterateListeners((listener, event) => {
-			listener.linksUpdated && listener.linksUpdated({...event, link: link as LinkModel, isCreated: false});
+			listener.linksUpdated && listener.linksUpdated({ ...event, link: link as LinkModel, isCreated: false });
 		});
 	}
 
@@ -256,7 +254,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
 		node = this.getNode(node);
 		delete this.nodes[node.getID()];
 		this.iterateListeners((listener, event) => {
-			listener.nodesUpdated && listener.nodesUpdated({...event, node: node as NodeModel, isCreated: false});
+			listener.nodesUpdated && listener.nodesUpdated({ ...event, node: node as NodeModel, isCreated: false });
 		});
 	}
 

src/models/LinkModel.ts

@@ -1,14 +1,13 @@
-import {BaseModel, BaseModelListener} from "./BaseModel";
+import { BaseModel, BaseModelListener } from "./BaseModel";
-import {PortModel} from "./PortModel";
+import { PortModel } from "./PortModel";
-import {PointModel} from "./PointModel";
+import { PointModel } from "./PointModel";
 import * as _ from "lodash";
-import {BaseEvent} from "../BaseEntity";
+import { BaseEvent } from "../BaseEntity";
 
 export interface LinkModelListener extends BaseModelListener {
+	sourcePortChanged?(event: BaseEvent<LinkModel> & { port: null | PortModel }): void;
 
-	sourcePortChanged?(event: BaseEvent<LinkModel> & {port: null | PortModel}): void;
+	targetPortChanged?(event: BaseEvent<LinkModel> & { port: null | PortModel }): void;
-
-	targetPortChanged?(event: BaseEvent<LinkModel> & {port: null | PortModel}): void;
 }
 
 export class LinkModel extends BaseModel<LinkModelListener> {
@@ -112,7 +111,7 @@ export class LinkModel extends BaseModel<LinkModelListener> {
 		port.addLink(this);
 		this.sourcePort = port;
 		this.iterateListeners((listener: LinkModelListener, event) => {
-			listener.sourcePortChanged && listener.sourcePortChanged({...event, port: port});
+			listener.sourcePortChanged && listener.sourcePortChanged({ ...event, port: port });
 		});
 	}
 
@@ -128,7 +127,7 @@ export class LinkModel extends BaseModel<LinkModelListener> {
 		port.addLink(this);
 		this.targetPort = port;
 		this.iterateListeners((listener: LinkModelListener, event) => {
-			listener.targetPortChanged && listener.targetPortChanged({...event, port: port});
+			listener.targetPortChanged && listener.targetPortChanged({ ...event, port: port });
 		});
 	}
 

src/models/NodeModel.ts

@@ -1,5 +1,5 @@
-import {BaseModel, BaseModelListener} from "./BaseModel";
+import { BaseModel, BaseModelListener } from "./BaseModel";
-import {PortModel} from "./PortModel";
+import { PortModel } from "./PortModel";
 import * as _ from "lodash";
 
 export class NodeModel extends BaseModel<BaseModelListener> {
@@ -18,17 +18,17 @@ export class NodeModel extends BaseModel<BaseModelListener> {
 		this.ports = {};
 	}
 
-	setPosition(x, y){
+	setPosition(x, y) {
 		//store position
 		let oldX = this.x;
 		let oldY = this.y;
 
-		for(let port in this.ports){
+		for (let port in this.ports) {
-			_.forEach(this.ports[port].getLinks(), (link) => {
+			_.forEach(this.ports[port].getLinks(), link => {
 				let point = link.getPointForPort(this.ports[port]);
 				point.x = point.x + x - oldX;
 				point.y = point.y + y - oldY;
-			})
+			});
 		}
 
 		this.x = x;

src/models/PointModel.ts

@@ -1,5 +1,5 @@
-import {BaseModel, BaseModelListener} from "./BaseModel";
+import { BaseModel, BaseModelListener } from "./BaseModel";
-import {LinkModel} from "./LinkModel";
+import { LinkModel } from "./LinkModel";
 import * as _ from "lodash";
 
 export class PointModel extends BaseModel<BaseModelListener> {
@@ -62,4 +62,4 @@ export class PointModel extends BaseModel<BaseModelListener> {
 	getLink(): LinkModel {
 		return this.link;
 	}
-}
+}

src/models/PortModel.ts

@@ -1,6 +1,6 @@
-import {BaseModel, BaseModelListener} from "./BaseModel";
+import { BaseModel, BaseModelListener } from "./BaseModel";
-import {NodeModel} from "./NodeModel";
+import { NodeModel } from "./NodeModel";
-import {LinkModel} from "./LinkModel";
+import { LinkModel } from "./LinkModel";
 import * as _ from "lodash";
 
 export class PortModel extends BaseModel<BaseModelListener> {
@@ -59,4 +59,4 @@ export class PortModel extends BaseModel<BaseModelListener> {
 		linkModel.setSourcePort(this);
 		return linkModel;
 	}
-}
+}

src/widgets/DiagramWidget.tsx

@@ -5,11 +5,11 @@ import { LinkLayerWidget } from "./LinkLayerWidget";
 import { NodeLayerWidget } from "./NodeLayerWidget";
 import { Toolkit } from "../Toolkit";
 import { BaseAction, MoveCanvasAction, MoveItemsAction, SelectingAction } from "../CanvasActions";
-import {NodeModel} from "../models/NodeModel";
+import { NodeModel } from "../models/NodeModel";
-import {PointModel} from "../models/PointModel";
+import { PointModel } from "../models/PointModel";
-import {PortModel} from "../models/PortModel";
+import { PortModel } from "../models/PortModel";
-import {LinkModel} from "../models/LinkModel";
+import { LinkModel } from "../models/LinkModel";
-import {BaseModel, BaseModelListener} from "../models/BaseModel";
+import { BaseModel, BaseModelListener } from "../models/BaseModel";
 
 export interface SelectionModel {
 	model: BaseModel<BaseModelListener>;
@@ -80,15 +80,15 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 		window.removeEventListener("mouseMove", this.onMouseMove);
 	}
 
-  componentWillReceiveProps(nextProps: DiagramProps) {
+	componentWillReceiveProps(nextProps: DiagramProps) {
-    if (this.props.diagramEngine !== nextProps.diagramEngine) {
+		if (this.props.diagramEngine !== nextProps.diagramEngine) {
-      this.props.diagramEngine.removeListener(this.state.diagramEngineListener);
+			this.props.diagramEngine.removeListener(this.state.diagramEngineListener);
-      const diagramEngineListener = nextProps.diagramEngine.addListener({
+			const diagramEngineListener = nextProps.diagramEngine.addListener({
-        repaintCanvas: () => this.forceUpdate()
+				repaintCanvas: () => this.forceUpdate()
-      });
+			});
-      this.setState({diagramEngineListener});
+			this.setState({ diagramEngineListener });
-    }
+		}
-  }
+	}
 
 	componentWillUpdate(nextProps: DiagramProps) {
 		if (this.props.diagramEngine.diagramModel.id !== nextProps.diagramEngine.diagramModel.id) {
@@ -140,7 +140,9 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 		if (element) {
 			var nodeElement = Toolkit.closest(target, ".node[data-nodeid]") as HTMLElement;
 			return {
-				model: diagramModel.getNode(nodeElement.getAttribute("data-nodeid")).getPort(element.getAttribute("data-name")),
+				model: diagramModel
+					.getNode(nodeElement.getAttribute("data-nodeid"))
+					.getPort(element.getAttribute("data-name")),
 				element: element
 			};
 		}
@@ -149,7 +151,9 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 		element = Toolkit.closest(target, ".point[data-id]");
 		if (element) {
 			return {
-				model: diagramModel.getLink(element.getAttribute("data-linkid")).getPointModel(element.getAttribute("data-id")),
+				model: diagramModel
+					.getLink(element.getAttribute("data-linkid"))
+					.getPointModel(element.getAttribute("data-id")),
 				element: element
 			};
 		}
@@ -205,15 +209,15 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 		if (this.state.action instanceof SelectingAction) {
 			var relative = diagramEngine.getRelativePoint(event.clientX, event.clientY);
 
-			_.forEach(diagramModel.getNodes(), (node) => {
+			_.forEach(diagramModel.getNodes(), node => {
 				if ((this.state.action as SelectingAction).containsElement(node.x, node.y, diagramModel)) {
 					node.setSelected(true);
 				}
 			});
 
-			_.forEach(diagramModel.getLinks(), (link) => {
+			_.forEach(diagramModel.getLinks(), link => {
 				var allSelected = true;
-				_.forEach(link.points, (point) => {
+				_.forEach(link.points, point => {
 					if ((this.state.action as SelectingAction).containsElement(point.x, point.y, diagramModel)) {
 						point.setSelected(true);
 					} else {
@@ -237,7 +241,7 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 			let amountY = event.clientY - this.state.action.mouseY;
 			let amountZoom = diagramModel.getZoomLevel() / 100;
 
-			_.forEach(this.state.action.selectionModels, (model) => {
+			_.forEach(this.state.action.selectionModels, model => {
 				// in this case we need to also work out the relative grid position
 				if (
 					model.model instanceof NodeModel ||
@@ -270,7 +274,7 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 	onKeyUp(event) {
 		//delete all selected
 		if (this.props.deleteKeys.indexOf(event.keyCode) !== -1) {
-			_.forEach(this.props.diagramEngine.getDiagramModel().getSelectedItems(), (element) => {
+			_.forEach(this.props.diagramEngine.getDiagramModel().getSelectedItems(), element => {
 				//only delete items which are not locked
 				if (!this.props.diagramEngine.isModelLocked(element)) {
 					element.remove();
@@ -286,7 +290,7 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 		if (this.state.action instanceof MoveItemsAction) {
 			var element = this.getMouseElement(event);
 			var linkConnected = false;
-			_.forEach(this.state.action.selectionModels, (model) => {
+			_.forEach(this.state.action.selectionModels, model => {
 				//only care about points connecting to things
 				if (!(model.model instanceof PointModel)) {
 					return;
@@ -302,7 +306,7 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 
 			//do we want to allow loose links on the diagram model or not
 			if (!linkConnected && !this.props.allowLooseLinks) {
-				_.forEach(this.state.action.selectionModels, (model) => {
+				_.forEach(this.state.action.selectionModels, model => {
 					//only care about points connecting to things
 					if (!(model.model instanceof PointModel)) {
 						return;
@@ -347,13 +351,13 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 
 		return (
 			<div
-				ref={(ref) => {
+				ref={ref => {
 					if (ref) {
 						this.props.diagramEngine.setCanvas(ref);
 					}
 				}}
 				className="storm-diagrams-canvas"
-				onWheel={(event) => {
+				onWheel={event => {
 					if (this.props.allowCanvasZoom) {
 						event.preventDefault();
 						event.stopPropagation();
@@ -398,7 +402,7 @@ export class DiagramWidget extends React.Component<DiagramProps, DiagramState> {
 						this.forceUpdate();
 					}
 				}}
-				onMouseDown={(event) => {
+				onMouseDown={event => {
 					this.setState({ ...this.state, wasMoved: false });
 
 					diagramEngine.clearRepaintEntities();

src/widgets/LinkLayerWidget.tsx

@@ -1,17 +1,15 @@
 import * as React from "react";
-import {DiagramEngine} from "../DiagramEngine";
+import { DiagramEngine } from "../DiagramEngine";
-import {LinkWidget} from "./LinkWidget";
+import { LinkWidget } from "./LinkWidget";
 import * as _ from "lodash";
-import {PointModel} from "../models/PointModel";
+import { PointModel } from "../models/PointModel";
-
 
 export interface LinkLayerProps {
 	diagramEngine: DiagramEngine;
 	pointAdded: (point: PointModel, event) => any;
 }
 
-export interface LinkLayerState {
+export interface LinkLayerState {}
-}
 
 /**
  * @author Dylan Vorster
@@ -28,34 +26,39 @@ export class LinkLayerWidget extends React.Component<LinkLayerProps, LinkLayerSt
 			<svg
 				style={{
 					transform:
-					"translate(" +
+						"translate(" +
-					diagramModel.getOffsetX() +
+						diagramModel.getOffsetX() +
-					"px," +
+						"px," +
-					diagramModel.getOffsetY() +
+						diagramModel.getOffsetY() +
-					"px) scale(" +
+						"px) scale(" +
-					diagramModel.getZoomLevel() / 100.0 +
+						diagramModel.getZoomLevel() / 100.0 +
-					")",
+						")",
 					width: "100%",
 					height: "100%"
 				}}
 			>
 				{//only perform these actions when we have a diagram
-					this.props.diagramEngine.canvas &&
+				this.props.diagramEngine.canvas &&
 					_.map(diagramModel.getLinks(), link => {
-						if (this.props.diagramEngine.nodesRendered && !this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id]) {
+						if (
+							this.props.diagramEngine.nodesRendered &&
+							!this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id]
+						) {
 							if (link.sourcePort !== null) {
 								try {
-									link.points[0].updateLocation(this.props.diagramEngine.getPortCenter(link.sourcePort));
+									link.points[0].updateLocation(
+										this.props.diagramEngine.getPortCenter(link.sourcePort)
+									);
 									this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id] = true;
-								} catch (ex) {
+								} catch (ex) {}
-								}
 							}
 							if (link.targetPort !== null) {
 								try {
-									_.last(link.points).updateLocation(this.props.diagramEngine.getPortCenter(link.targetPort));
+									_.last(link.points).updateLocation(
+										this.props.diagramEngine.getPortCenter(link.targetPort)
+									);
 									this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id] = true;
-								} catch (ex) {
+								} catch (ex) {}
-								}
 							}
 						}
 

src/widgets/LinkWidget.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DiagramEngine } from "../DiagramEngine";
-import {LinkModel} from "../models/LinkModel";
+import { LinkModel } from "../models/LinkModel";
 
 export interface LinkProps {
 	link: LinkModel;

src/widgets/NodeLayerWidget.tsx

@@ -19,7 +19,7 @@ export class NodeLayerWidget extends React.Component<NodeLayerProps, NodeLayerSt
 		this.state = {};
 	}
 
-	componentDidUpdate(){
+	componentDidUpdate() {
 		this.props.diagramEngine.nodesRendered = true;
 	}
 

src/widgets/NodeWidget.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DiagramEngine } from "../DiagramEngine";
-import {NodeModel} from "../models/NodeModel";
+import { NodeModel } from "../models/NodeModel";
 
 export interface NodeProps {
 	node: NodeModel;

src/widgets/PortWidget.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {NodeModel} from "../models/NodeModel";
+import { NodeModel } from "../models/NodeModel";
 
 export interface PortProps {
 	name: string;