clean up code style

demos/Helper.tsx

@@ -4,16 +4,16 @@ 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,
@@ -47,9 +47,12 @@ function mapElements(model) {
 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
+		.map(link => ({
 			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 = {};
@@ -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/demo12/index.tsx

@@ -22,13 +22,12 @@ export class AdvancedLinkModel extends LinkModel {
 	constructor() {
 		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) {
 		super(isInput, name, label, id);
 	}

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

@@ -20,7 +20,6 @@ import {Helper} from "./Helper";
 
 require("./test.scss");
 
-
 // make tests deterministic
 Toolkit.TESTING_MODE = true;
 

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;
-
 }
 
 export class BaseEntity<T extends BaseListener = {}> {

src/DiagramEngine.ts

@@ -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;
 					});
 				});
@@ -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(
+				"Cannot find Node Port element with nodeID: [" +
 					port.getParent().getID() +
 					"] and name: [" +
 					port.getName() +
-				"]");
+					"]"
+			);
 		}
 		return selector;
 	}

src/Toolkit.ts

@@ -3,7 +3,6 @@ import closest = require("closest");
  * @author Dylan Vorster
  */
 export class Toolkit {
-
 	static TESTING_MODE = false;
 	static TESTING_MODE_ID = 1;
 

src/defaults/DefaultLinkWidget.tsx

@@ -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/models/BaseModel.ts

@@ -3,7 +3,6 @@ import * as _ from "lodash";
 import { BaseEvent } from "../BaseEntity";
 
 export interface BaseModelListener extends BaseListener {
-
 	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;
 

src/models/DiagramModel.ts

@@ -10,18 +10,15 @@ import {BaseModel, BaseModelListener} from "./BaseModel";
  *
  */
 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;
-
-
 }
 /**
  *
@@ -182,7 +179,8 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
 		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 });
 		});
 	}
 

src/models/LinkModel.ts

@@ -5,7 +5,6 @@ import * as _ from "lodash";
 import { BaseEvent } from "../BaseEntity";
 
 export interface LinkModelListener extends BaseModelListener {
-
 	sourcePortChanged?(event: BaseEvent<LinkModel> & { port: null | PortModel }): void;
 
 	targetPortChanged?(event: BaseEvent<LinkModel> & { port: null | PortModel }): void;

src/models/NodeModel.ts

@@ -24,11 +24,11 @@ export class NodeModel extends BaseModel<BaseModelListener> {
 		let oldY = this.y;
 
 		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/widgets/DiagramWidget.tsx

@@ -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

@@ -4,14 +4,12 @@ import {LinkWidget} from "./LinkWidget";
 import * as _ from "lodash";
 import { PointModel } from "../models/PointModel";
 
-
 export interface LinkLayerProps {
 	diagramEngine: DiagramEngine;
 	pointAdded: (point: PointModel, event) => any;
 }
 
-export interface LinkLayerState {
+export interface LinkLayerState {}
-}
 
 /**
  * @author Dylan Vorster
@@ -42,20 +40,25 @@ export class LinkLayerWidget extends React.Component<LinkLayerProps, LinkLayerSt
 				{//only perform these actions when we have a diagram
 				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) {}
-								}
 							}
 						}