cleanup

.prettierignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+.out

lib-core/src/DiagramEngine.ts

@@ -1,16 +1,16 @@
-import * as _ from "lodash";
-import { BaseEntity } from "./core-models/BaseEntity";
-import { DiagramModel } from "./models/DiagramModel";
-import { BaseModel } from "./core-models/BaseModel";
-import { NodeModel } from "./models/NodeModel";
-import { PointModel } from "./models/PointModel";
-import { PortModel } from "./models/PortModel";
-import { LinkModel } from "./models/LinkModel";
-import { LabelModel } from "./models/LabelModel";
-import { FactoryBank } from "./core/FactoryBank";
-import { AbstractFactory } from "./core/AbstractFactory";
-import { AbstractReactFactory } from "./core/AbstractReactFactory";
-import { BaseListener, BaseObserver } from "./core/BaseObserver";
+import * as _ from 'lodash';
+import { BaseEntity } from './core-models/BaseEntity';
+import { DiagramModel } from './models/DiagramModel';
+import { BaseModel } from './core-models/BaseModel';
+import { NodeModel } from './models/NodeModel';
+import { PointModel } from './models/PointModel';
+import { PortModel } from './models/PortModel';
+import { LinkModel } from './models/LinkModel';
+import { LabelModel } from './models/LabelModel';
+import { FactoryBank } from './core/FactoryBank';
+import { AbstractFactory } from './core/AbstractFactory';
+import { AbstractReactFactory } from './core/AbstractReactFactory';
+import { BaseListener, BaseObserver } from './core/BaseObserver';
 
 export interface DiagramEngineListener extends BaseListener {
 	repaintCanvas?(): void;
@@ -195,7 +195,7 @@ export class DiagramEngine extends BaseObserver<DiagramEngineListener> {
 	getNodeElement(node: NodeModel): Element {
 		const selector = this.canvas.querySelector(`.node[data-nodeid="${node.getID()}"]`);
 		if (selector === null) {
-			throw new Error("Cannot find Node element with nodeID: [" + node.getID() + "]");
+			throw new Error('Cannot find Node element with nodeID: [' + node.getID() + ']');
 		}
 		return selector;
 	}
@@ -206,11 +206,11 @@ export class DiagramEngine extends BaseObserver<DiagramEngineListener> {
 		);
 		if (selector === null) {
 			throw new Error(
-				"Cannot find Node Port element with nodeID: [" +
-				port.getParent().getID() +
-				"] and name: [" +
-				port.getName() +
-				"]"
+				'Cannot find Node Port element with nodeID: [' +
+					port.getParent().getID() +
+					'] and name: [' +
+					port.getName() +
+					']'
 			);
 		}
 		return selector;

lib-core/src/core-models/BaseEntity.ts

@@ -1,7 +1,7 @@
 import { Toolkit } from '../Toolkit';
 import * as _ from 'lodash';
 import { DiagramEngine } from '../DiagramEngine';
-import { BaseEvent, BaseListener, BaseObserver } from "../core/BaseObserver";
+import { BaseEvent, BaseListener, BaseObserver } from '../core/BaseObserver';
 
 export interface BaseEntityEvent<T extends BaseEntity = BaseEntity> extends BaseEvent {
 	entity: T;
@@ -22,21 +22,20 @@ export interface BaseEntityOptions {
 export type BaseEntityGenerics = {
 	LISTENER: BaseEntityListener;
 	OPTIONS: BaseEntityOptions;
-}
+};
 
 export class BaseEntity<T extends BaseEntityGenerics = BaseEntityGenerics> extends BaseObserver<T['LISTENER']> {
-
 	protected options: T['OPTIONS'];
 
 	constructor(options: T['OPTIONS'] = {}) {
 		super();
 		this.options = {
 			id: Toolkit.UID(),
-			...options,
+			...options
 		};
 	}
 
-	getOptions(){
+	getOptions() {
 		return this.options;
 	}
 

lib-core/src/core-models/BaseModel.ts

@@ -1,11 +1,5 @@
-import {
-	BaseEntity,
-	BaseEntityEvent,
-	BaseEntityGenerics,
-	BaseEntityListener,
-	BaseEntityOptions
-} from "./BaseEntity";
-import { DiagramEngine } from "../DiagramEngine";
+import { BaseEntity, BaseEntityEvent, BaseEntityGenerics, BaseEntityListener, BaseEntityOptions } from './BaseEntity';
+import { DiagramEngine } from '../DiagramEngine';
 
 export interface BaseModelListener extends BaseEntityListener {
 	selectionChanged?(event: BaseEntityEvent<BaseModel> & { isSelected: boolean }): void;
@@ -19,14 +13,13 @@ export interface BaseModelOptions extends BaseEntityOptions {
 	extras?: any;
 }
 
-export interface BaseModelGenerics extends BaseEntityGenerics{
-	LISTENER: BaseModelListener
+export interface BaseModelGenerics extends BaseEntityGenerics {
+	LISTENER: BaseModelListener;
 	PARENT: BaseEntity;
 	OPTIONS: BaseModelOptions;
 }
 
 export class BaseModel<G extends BaseModelGenerics = BaseModelGenerics> extends BaseEntity<G> {
-
 	protected parent: G['PARENT'];
 
 	constructor(options: G['OPTIONS']) {
@@ -75,11 +68,11 @@ export class BaseModel<G extends BaseModelGenerics = BaseModelGenerics> extends
 			{
 				isSelected: selected
 			},
-			"selectionChanged"
+			'selectionChanged'
 		);
 	}
 
 	remove() {
-		this.fireEvent({}, "entityRemoved");
+		this.fireEvent({}, 'entityRemoved');
 	}
 }

lib-core/src/core-models/BasePositionModel.ts

@@ -1,17 +1,16 @@
-import { BaseModel, BaseModelGenerics, BaseModelListener } from "./BaseModel";
-import { DiagramEngine } from "../DiagramEngine";
-import { BaseEntityEvent } from "./BaseEntity";
+import { BaseModel, BaseModelGenerics, BaseModelListener } from './BaseModel';
+import { DiagramEngine } from '../DiagramEngine';
+import { BaseEntityEvent } from './BaseEntity';
 
-export interface BasePositionModelListener extends BaseModelListener{
+export interface BasePositionModelListener extends BaseModelListener {
 	positionChanged?(event: BaseEntityEvent<BasePositionModel>): void;
 }
 
-export interface BasePositionModelGenerics extends BaseModelGenerics{
+export interface BasePositionModelGenerics extends BaseModelGenerics {
 	LISTENER: BasePositionModelListener;
 }
 
-export class BasePositionModel<G extends BasePositionModelGenerics = BasePositionModelGenerics> extends BaseModel<G>{
-
+export class BasePositionModel<G extends BasePositionModelGenerics = BasePositionModelGenerics> extends BaseModel<G> {
 	protected x: number;
 	protected y: number;
 
@@ -32,15 +31,14 @@ export class BasePositionModel<G extends BasePositionModelGenerics = BasePositio
 			...super.serialize(),
 			x: this.x,
 			y: this.y
-		}
+		};
 	}
 
 	getX() {
 		return this.x;
 	}
 
-	getY(){
+	getY() {
 		return this.y;
 	}
-
 }

lib-core/src/core/BaseObserver.ts

@@ -1,4 +1,4 @@
-import { Toolkit } from "../Toolkit";
+import { Toolkit } from '../Toolkit';
 
 export interface BaseEvent {
 	firing: boolean;
@@ -25,7 +25,7 @@ export type BaseListener = {
 	/**
 	 * Type for other events that will fire
 	 */
-	[key: string]: (event: BaseEvent) => any
+	[key: string]: (event: BaseEvent) => any;
 };
 
 /**
@@ -38,7 +38,7 @@ export class BaseObserver<L extends BaseListener = BaseListener> {
 		this.listeners = {};
 	}
 
-	private fireEventInternal(fire: boolean, k: keyof L, event: BaseEvent, ) {
+	private fireEventInternal(fire: boolean, k: keyof L, event: BaseEvent) {
 		this.iterateListeners(listener => {
 			// returning false here will instruct itteration to stop
 			if (!fire && !event.firing) {
@@ -61,16 +61,16 @@ export class BaseObserver<L extends BaseListener = BaseListener> {
 		};
 
 		// fire pre
-		this.fireEventInternal( true, "eventWillFire", {
+		this.fireEventInternal(true, 'eventWillFire', {
 			...event,
 			function: k
 		} as BaseEventProxy);
 
 		// fire main event
-		this.fireEventInternal( false, k, event as BaseEvent);
+		this.fireEventInternal(false, k, event as BaseEvent);
 
 		// fire post
-		this.fireEventInternal( true, "eventDidFire", {
+		this.fireEventInternal(true, 'eventDidFire', {
 			...event,
 			function: k
 		} as BaseEventProxy);

lib-core/src/models/DiagramModel.ts

@@ -2,9 +2,10 @@ import {
 	BaseEntity,
 	BaseEntityEvent,
 	BaseEntityGenerics,
-	BaseEntityListener, BaseEntityOptions,
+	BaseEntityListener,
+	BaseEntityOptions,
 	BaseEntityType
-} from "../core-models/BaseEntity";
+} from '../core-models/BaseEntity';
 import * as _ from 'lodash';
 import { DiagramEngine } from '../DiagramEngine';
 import { LinkModel } from './LinkModel';
@@ -25,14 +26,14 @@ export interface DiagramListener extends BaseEntityListener {
 	gridUpdated?(event: BaseEntityEvent<DiagramModel> & { size: number }): void;
 }
 
-export interface DiagramModelOptions extends BaseEntityOptions{
+export interface DiagramModelOptions extends BaseEntityOptions {
 	offsetX?: number;
 	offsetY?: number;
 	zoom?: number;
 	gridSize?: number;
 }
 
-export interface DiagramModelGenerics extends BaseEntityGenerics{
+export interface DiagramModelGenerics extends BaseEntityGenerics {
 	LISTENER: DiagramListener;
 	OPTIONS: DiagramModelOptions;
 }
@@ -50,7 +51,7 @@ export class DiagramModel<G extends DiagramModelGenerics = DiagramModelGenerics>
 			gridSize: 0,
 			offsetX: 0,
 			offsetY: 0,
-			...options,
+			...options
 		});
 
 		this.links = {};

lib-core/src/models/LabelModel.ts

@@ -1,9 +1,8 @@
-import { BaseModel, BaseModelGenerics } from "../core-models/BaseModel";
+import { BaseModel, BaseModelGenerics } from '../core-models/BaseModel';
 import * as _ from 'lodash';
 import { DiagramEngine } from '../DiagramEngine';
 
 export class LabelModel<G extends BaseModelGenerics = BaseModelGenerics> extends BaseModel<G> {
-
 	offsetX: number;
 	offsetY: number;
 

lib-core/src/models/LinkModel.ts

@@ -1,11 +1,11 @@
-import { BaseModel, BaseModelGenerics, BaseModelListener } from "../core-models/BaseModel";
-import { PortModel } from "./PortModel";
-import { PointModel } from "./PointModel";
-import * as _ from "lodash";
-import { LabelModel } from "./LabelModel";
-import { DiagramEngine } from "../DiagramEngine";
-import { BaseEntityEvent } from "../core-models/BaseEntity";
-import { DiagramModel } from "./DiagramModel";
+import { BaseModel, BaseModelGenerics, BaseModelListener } from '../core-models/BaseModel';
+import { PortModel } from './PortModel';
+import { PointModel } from './PointModel';
+import * as _ from 'lodash';
+import { LabelModel } from './LabelModel';
+import { DiagramEngine } from '../DiagramEngine';
+import { BaseEntityEvent } from '../core-models/BaseEntity';
+import { DiagramModel } from './DiagramModel';
 
 export interface LinkModelListener extends BaseModelListener {
 	sourcePortChanged?(event: BaseEntityEvent<LinkModel> & { port: null | PortModel }): void;
@@ -19,14 +19,13 @@ export interface LinkModelGenerics extends BaseModelGenerics {
 }
 
 export class LinkModel<G extends LinkModelGenerics = LinkModelGenerics> extends BaseModel<G> {
-
 	protected sourcePort: PortModel | null;
 	protected targetPort: PortModel | null;
 
 	protected labels: LabelModel[];
 	protected points: PointModel[];
 
-	constructor(options: G["OPTIONS"]) {
+	constructor(options: G['OPTIONS']) {
 		super(options);
 		this.points = [
 			new PointModel({
@@ -171,7 +170,7 @@ export class LinkModel<G extends LinkModelGenerics = LinkModelGenerics> extends
 			this.sourcePort.removeLink(this);
 		}
 		this.sourcePort = port;
-		this.fireEvent({ port }, "sourcePortChanged");
+		this.fireEvent({ port }, 'sourcePortChanged');
 	}
 
 	getSourcePort(): PortModel {
@@ -190,7 +189,7 @@ export class LinkModel<G extends LinkModelGenerics = LinkModelGenerics> extends
 			this.targetPort.removeLink(this);
 		}
 		this.targetPort = port;
-		this.fireEvent({ port }, "targetPortChanged");
+		this.fireEvent({ port }, 'targetPortChanged');
 	}
 
 	point(x: number, y: number): PointModel {
@@ -206,7 +205,7 @@ export class LinkModel<G extends LinkModelGenerics = LinkModelGenerics> extends
 		return this.points;
 	}
 
-	getLabels(){
+	getLabels() {
 		return this.labels;
 	}
 

lib-core/src/models/NodeModel.ts

@@ -1,23 +1,22 @@
-import { BaseModelListener } from "../core-models/BaseModel";
+import { BaseModelListener } from '../core-models/BaseModel';
 import * as _ from 'lodash';
 import { DiagramEngine } from '../DiagramEngine';
 import { BaseEntityEvent } from '../core-models/BaseEntity';
-import { BasePositionModel, BasePositionModelGenerics } from "../core-models/BasePositionModel";
-import { DiagramModel } from "./DiagramModel";
-import { PortModel } from "./PortModel";
+import { BasePositionModel, BasePositionModelGenerics } from '../core-models/BasePositionModel';
+import { DiagramModel } from './DiagramModel';
+import { PortModel } from './PortModel';
 
 export interface NodeModelListener extends BaseModelListener {
 	positionChanged?(event: BaseEntityEvent<NodeModel>): void;
 }
 
-export interface NodeModelGenerics extends BasePositionModelGenerics{
+export interface NodeModelGenerics extends BasePositionModelGenerics {
 	LISTENER: NodeModelListener;
 	PARENT: DiagramModel;
 	PORT: PortModel;
 }
 
 export class NodeModel<G extends NodeModelGenerics = NodeModelGenerics> extends BasePositionModel<G> {
-
 	ports: { [s: string]: G['PORT'] };
 
 	// calculated post rendering so routing can be done correctly
@@ -81,7 +80,7 @@ export class NodeModel<G extends NodeModelGenerics = NodeModelGenerics> extends
 			ports: _.map(this.ports, port => {
 				return port.serialize();
 			})
-		}
+		};
 	}
 
 	doClone(lookupTable = {}, clone) {

lib-core/src/models/PointModel.ts

@@ -1,22 +1,23 @@
-import { BaseModel, BaseModelListener, BaseModelOptions } from "../core-models/BaseModel";
+import { BaseModel, BaseModelListener, BaseModelOptions } from '../core-models/BaseModel';
 import { LinkModel } from './LinkModel';
 import * as _ from 'lodash';
 import { DiagramEngine } from '../DiagramEngine';
-import { BasePositionModel } from "../core-models/BasePositionModel";
+import { BasePositionModel } from '../core-models/BasePositionModel';
 
-export interface PointModelOptions extends Omit<PointModelOptions, 'type'>{
+export interface PointModelOptions extends Omit<PointModelOptions, 'type'> {
 	link: LinkModel;
 	points: { x: number; y: number };
 }
 
-export interface PointModelGenerics{
+export interface PointModelGenerics {
 	PARENT: LinkModel;
 	OPTIONS: PointModelOptions;
 	LISTENER: BaseModelListener;
 }
 
-export class PointModel<G extends PointModelGenerics = PointModelGenerics> extends BasePositionModel<G & {OPTIONS: BaseModelOptions}> {
-
+export class PointModel<G extends PointModelGenerics = PointModelGenerics> extends BasePositionModel<
+	G & { OPTIONS: BaseModelOptions }
+> {
 	constructor(options: G['OPTIONS']) {
 		super({
 			...options,

lib-core/src/models/PortModel.ts

@@ -1,30 +1,29 @@
-import { BaseModel, BaseModelGenerics, BaseModelOptions } from "../core-models/BaseModel";
+import { BaseModel, BaseModelGenerics, BaseModelOptions } from '../core-models/BaseModel';
 import { NodeModel } from './NodeModel';
 import { LinkModel } from './LinkModel';
 import * as _ from 'lodash';
 import { DiagramEngine } from '../DiagramEngine';
-import { BasePositionModel } from "../core-models/BasePositionModel";
+import { BasePositionModel } from '../core-models/BasePositionModel';
 
-export enum PortModelAlignment{
-	TOP='top',
-	LEFT='left',
-	BOTTOM='bottom',
-	RIGHT='right'
+export enum PortModelAlignment {
+	TOP = 'top',
+	LEFT = 'left',
+	BOTTOM = 'bottom',
+	RIGHT = 'right'
 }
 
-export interface PortModelOptions extends BaseModelOptions{
+export interface PortModelOptions extends BaseModelOptions {
 	alignment?: PortModelAlignment;
 	maximumLinks?: number;
 	name: string;
 }
 
-export interface PortModelGenerics extends BaseModelGenerics{
+export interface PortModelGenerics extends BaseModelGenerics {
 	OPTIONS: PortModelOptions;
 	PARENT: NodeModel;
 }
 
 export class PortModel<G extends PortModelGenerics = PortModelGenerics> extends BasePositionModel<G> {
-
 	links: { [id: string]: LinkModel };
 
 	// calculated post rendering so routing can be done correctly
@@ -46,7 +45,7 @@ export class PortModel<G extends PortModelGenerics = PortModelGenerics> extends
 			parentNode: this.parent.getID(),
 			links: _.map(this.links, link => {
 				return link.getID;
-			}),
+			})
 		};
 	}
 

lib-core/src/widgets/DiagramWidget.tsx

@@ -259,7 +259,6 @@ export class DiagramWidget extends BaseWidget<DiagramProps, DiagramState> {
 					);
 
 					if (model.model instanceof NodeModel) {
-
 						// update port coordinates as well
 						_.forEach(model.model.getPorts(), port => {
 							const portCoords = this.props.diagramEngine.getPortCoords(port);

lib-core/src/widgets/layers/LinkLayerWidget.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { DiagramEngine } from "../../DiagramEngine";
-import { LinkWidget } from "../LinkWidget";
-import * as _ from "lodash";
-import { PointModel } from "../../models/PointModel";
-import { BaseWidget, BaseWidgetProps } from "../BaseWidget";
+import * as React from 'react';
+import { DiagramEngine } from '../../DiagramEngine';
+import { LinkWidget } from '../LinkWidget';
+import * as _ from 'lodash';
+import { PointModel } from '../../models/PointModel';
+import { BaseWidget, BaseWidgetProps } from '../BaseWidget';
 
 export interface LinkLayerProps extends BaseWidgetProps {
 	diagramEngine: DiagramEngine;
@@ -12,7 +12,7 @@ export interface LinkLayerProps extends BaseWidgetProps {
 
 export class LinkLayerWidget extends BaseWidget<LinkLayerProps> {
 	constructor(props: LinkLayerProps) {
-		super("srd-link-layer", props);
+		super('srd-link-layer', props);
 	}
 
 	render() {
@@ -22,16 +22,16 @@ export class LinkLayerWidget extends BaseWidget<LinkLayerProps> {
 				{...this.getProps()}
 				style={{
 					transform:
-						"translate(" +
+						'translate(' +
 						diagramModel.getOffsetX() +
-						"px," +
+						'px,' +
 						diagramModel.getOffsetY() +
-						"px) scale(" +
+						'px) scale(' +
 						diagramModel.getZoomLevel() / 100.0 +
-						")"
+						')'
 				}}>
 				{//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 &&

lib-defaults/src/label/DefaultLabelModel.tsx

@@ -1,20 +1,14 @@
-import {
-	BaseModelGenerics,
-	BaseModelOptions,
-	DiagramEngine,
-	LabelModel,
-} from "@projectstorm/react-diagrams-core";
+import { BaseModelGenerics, BaseModelOptions, DiagramEngine, LabelModel } from '@projectstorm/react-diagrams-core';
 
-export interface DefaultLabelModelOptions extends Omit<BaseModelOptions, 'type'>{
+export interface DefaultLabelModelOptions extends Omit<BaseModelOptions, 'type'> {
 	label?: string;
 }
 
-export interface DefaultLabelModelGenerics{
+export interface DefaultLabelModelGenerics {
 	OPTIONS: DefaultLabelModelOptions;
 }
 
 export class DefaultLabelModel extends LabelModel<BaseModelGenerics & DefaultLabelModelGenerics> {
-
 	constructor(options: DefaultLabelModelOptions = {}) {
 		super({
 			...options,

lib-defaults/src/link/DefaultLinkModel.ts

@@ -1,10 +1,12 @@
 import {
-	BaseEntityEvent, BaseModelOptions,
+	BaseEntityEvent,
+	BaseModelOptions,
 	DiagramEngine,
 	LabelModel,
-	LinkModel, LinkModelGenerics,
+	LinkModel,
+	LinkModelGenerics,
 	LinkModelListener
-} from "@projectstorm/react-diagrams-core";
+} from '@projectstorm/react-diagrams-core';
 import { DefaultLabelModel } from '../label/DefaultLabelModel';
 
 export interface DefaultLinkModelListener extends LinkModelListener {
@@ -13,19 +15,18 @@ export interface DefaultLinkModelListener extends LinkModelListener {
 	widthChanged?(event: BaseEntityEvent<DefaultLinkModel> & { width: 0 | number }): void;
 }
 
-export interface DefaultLinkModelOptions extends Omit<BaseModelOptions, 'type'>{
+export interface DefaultLinkModelOptions extends Omit<BaseModelOptions, 'type'> {
 	width?: number;
 	color?: string;
 	curvyness?: number;
 }
 
-export interface DefaultLinkModelGenerics{
+export interface DefaultLinkModelGenerics {
 	LISTENER: DefaultLinkModelListener;
 	OPTIONS: DefaultLinkModelOptions;
 }
 
 export class DefaultLinkModel extends LinkModel<LinkModelGenerics & DefaultLinkModelGenerics> {
-
 	constructor(options: DefaultLinkModelOptions = {}) {
 		super({
 			...options,

lib-defaults/src/link/DefaultLinkWidget.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as _ from "lodash";
+import * as React from 'react';
+import * as _ from 'lodash';
 import {
 	BaseWidget,
 	BaseWidgetProps,
@@ -7,9 +7,9 @@ import {
 	LabelModel,
 	PointModel,
 	Toolkit
-} from "@projectstorm/react-diagrams-core";
-import { DefaultLinkModel } from "./DefaultLinkModel";
-import { DefaultLinkFactory } from "./DefaultLinkFactory";
+} from '@projectstorm/react-diagrams-core';
+import { DefaultLinkModel } from './DefaultLinkModel';
+import { DefaultLinkFactory } from './DefaultLinkFactory';
 
 export interface DefaultLinkProps extends BaseWidgetProps {
 	color?: string;
@@ -26,7 +26,7 @@ export interface DefaultLinkState {
 
 export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkState> {
 	public static defaultProps: DefaultLinkProps = {
-		color: "black",
+		color: 'black',
 		width: 3,
 		link: null,
 		engine: null,
@@ -39,7 +39,7 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 	refPaths: SVGPathElement[];
 
 	constructor(props: DefaultLinkProps) {
-		super("srd-default-link", props);
+		super('srd-default-link', props);
 
 		this.refLabels = {};
 		this.refPaths = [];
@@ -88,15 +88,15 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 		let y = this.props.link.getPoints()[pointIndex].getY();
 
 		return (
-			<g key={"point-" + this.props.link.getPoints()[pointIndex].getID()}>
+			<g key={'point-' + this.props.link.getPoints()[pointIndex].getID()}>
 				<circle
 					cx={x}
 					cy={y}
 					r={5}
 					className={
-						"point " +
-						this.bem("__point") +
-						(this.props.link.getPoints()[pointIndex].isSelected() ? this.bem("--point-selected") : "")
+						'point ' +
+						this.bem('__point') +
+						(this.props.link.getPoints()[pointIndex].isSelected() ? this.bem('--point-selected') : '')
 					}
 				/>
 				<circle
@@ -112,7 +112,7 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 					cy={y}
 					r={15}
 					opacity={0}
-					className={"point " + this.bem("__point")}
+					className={'point ' + this.bem('__point')}
 				/>
 			</g>
 		);
@@ -123,7 +123,7 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 		return (
 			<foreignObject
 				key={label.getID()}
-				className={this.bem("__label")}
+				className={this.bem('__label')}
 				width={canvas.offsetWidth}
 				height={canvas.offsetHeight}>
 				<div ref={ref => (this.refLabels[label.getID()] = ref)}>
@@ -150,7 +150,7 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 
 		var Top = React.cloneElement(Bottom, {
 			...extraProps,
-			strokeLinecap: "round",
+			strokeLinecap: 'round',
 			onMouseLeave: () => {
 				this.setState({ selected: false });
 			},
@@ -158,7 +158,7 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 				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: () => {
@@ -170,7 +170,7 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 		});
 
 		return (
-			<g key={"link-" + id}>
+			<g key={'link-' + id}>
 				{Bottom}
 				{Top}
 			</g>
@@ -222,7 +222,7 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 			y: pathCentre.y - labelDimensions.height / 2 + label.offsetY
 		};
 		this.refLabels[label.id].setAttribute(
-			"style",
+			'style',
 			`transform: translate(${labelCoordinates.x}px, ${labelCoordinates.y}px);`
 		);
 	};
@@ -241,8 +241,9 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 		// See @link{#isSmartRoutingApplicable()}.
 		if (paths.length === 0) {
 			if (points.length === 2) {
-				var isHorizontal = Math.abs(points[0].getX() - points[1].getX()) > Math.abs(points[0].getY() - points[1].getY());
-				var xOrY = isHorizontal ? "x" : "y";
+				var isHorizontal =
+					Math.abs(points[0].getX() - points[1].getX()) > Math.abs(points[0].getY() - points[1].getY());
+				var xOrY = isHorizontal ? 'x' : 'y';
 
 				//draw the smoothing
 				//if the points are too close, just draw a straight line
@@ -262,7 +263,7 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 								this.addPointToLink(event, 1);
 							}
 						},
-						"0"
+						'0'
 					)
 				);
 
@@ -277,8 +278,8 @@ export class DefaultLinkWidget extends BaseWidget<DefaultLinkProps, DefaultLinkS
 						this.generateLink(
 							Toolkit.generateLinePath(points[j], points[j + 1]),
 							{
-								"data-linkid": this.props.link.getID(),
-								"data-point": j,
+								'data-linkid': this.props.link.getID(),
+								'data-point': j,
 								onMouseDown: (event: MouseEvent) => {
 									this.addPointToLink(event, j + 1);
 								}

lib-defaults/src/node/DefaultNodeModel.ts

@@ -1,24 +1,18 @@
 import * as _ from 'lodash';
-import {
-	BaseModelOptions,
-	DiagramEngine,
-	NodeModel,
-	NodeModelGenerics,
-} from "@projectstorm/react-diagrams-core";
+import { BaseModelOptions, DiagramEngine, NodeModel, NodeModelGenerics } from '@projectstorm/react-diagrams-core';
 import { DefaultPortModel } from '../port/DefaultPortModel';
 
-export interface DefaultNodeModelOptions extends Omit<BaseModelOptions, 'type'>{
+export interface DefaultNodeModelOptions extends Omit<BaseModelOptions, 'type'> {
 	name?: string;
 	color?: string;
 }
 
-export interface DefaultNodeModelGenerics{
+export interface DefaultNodeModelGenerics {
 	PORT: DefaultPortModel;
 	OPTIONS: DefaultNodeModelOptions;
 }
 
 export class DefaultNodeModel extends NodeModel<DefaultNodeModelGenerics & NodeModelGenerics> {
-
 	constructor(options: DefaultNodeModelOptions = {}) {
 		super({
 			type: 'default',
@@ -29,19 +23,23 @@ export class DefaultNodeModel extends NodeModel<DefaultNodeModelGenerics & NodeM
 	}
 
 	addInPort(label: string): DefaultPortModel {
-		return this.addPort(new DefaultPortModel({
-			in: true,
-			name: label,
-			label: label
-		}));
+		return this.addPort(
+			new DefaultPortModel({
+				in: true,
+				name: label,
+				label: label
+			})
+		);
 	}
 
 	addOutPort(label: string): DefaultPortModel {
-		return this.addPort(new DefaultPortModel({
-			in: false,
-			name: label,
-			label: label
-		}));
+		return this.addPort(
+			new DefaultPortModel({
+				in: false,
+				name: label,
+				label: label
+			})
+		);
 	}
 
 	deSerialize(object, engine: DiagramEngine) {

lib-defaults/src/node/DefaultNodeWidget.tsx

@@ -49,7 +49,6 @@ export interface DefaultNodeProps extends BaseWidgetProps {
  * for both all the input ports on the left, and the output ports on the right.
  */
 export class DefaultNodeWidget extends BaseWidget<DefaultNodeProps> {
-
 	listener: any;
 
 	generatePort = port => {
@@ -57,9 +56,8 @@ export class DefaultNodeWidget extends BaseWidget<DefaultNodeProps> {
 	};
 
 	componentWillUnmount(): void {
-
 		// release repaint listener
-		if(this.listener){
+		if (this.listener) {
 			this.listener();
 		}
 	}
@@ -67,9 +65,9 @@ export class DefaultNodeWidget extends BaseWidget<DefaultNodeProps> {
 	componentDidMount(): void {
 		this.listener = this.props.node.registerListener({
 			eventDidFire: () => {
-				this.forceUpdate()
+				this.forceUpdate();
 			}
-		})
+		});
 	}
 
 	render() {

lib-defaults/src/port/DefaultPortModel.ts

@@ -3,24 +3,24 @@ import {
 	AbstractFactory,
 	DiagramEngine,
 	LinkModel,
-	PortModel, PortModelGenerics,
+	PortModel,
+	PortModelGenerics,
 	PortModelOptions
-} from "@projectstorm/react-diagrams-core";
+} from '@projectstorm/react-diagrams-core';
 import { DefaultLinkModel } from '../link/DefaultLinkModel';
-import { DefaultNodeModel } from "../node/DefaultNodeModel";
+import { DefaultNodeModel } from '../node/DefaultNodeModel';
 
-export interface DefaultPortModelOptions extends Omit<PortModelOptions, 'type'>{
+export interface DefaultPortModelOptions extends Omit<PortModelOptions, 'type'> {
 	label?: string;
 	in?: boolean;
 }
 
-export interface DefaultPortModelGenerics{
+export interface DefaultPortModelGenerics {
 	OPTIONS: DefaultPortModelOptions;
 	PARENT: DefaultNodeModel;
 }
 
 export class DefaultPortModel extends PortModel<PortModelGenerics & DefaultPortModelGenerics> {
-
 	constructor(options: DefaultPortModelOptions) {
 		super({
 			...options,

lib-demo-gallery/index.tsx

@@ -19,7 +19,7 @@ setOptions({
 	addonPanelInRight: true
 });
 
-addDecorator((fn) => {
+addDecorator(fn => {
 	Toolkit.TESTING_UID = 0;
 	return fn();
 });

lib-routing/src/engine/PathFinding.ts

@@ -1,6 +1,6 @@
 import * as PF from 'pathfinding';
 import { PathFindingLinkFactory } from '../link/PathFindingLinkFactory';
-import { PointModel } from "@projectstorm/react-diagrams-core";
+import { PointModel } from '@projectstorm/react-diagrams-core';
 
 /*
 it can be very expensive to calculate routes when every single pixel on the canvas
@@ -26,10 +26,7 @@ export default class PathFinding {
 	 * Taking as argument a fully unblocked walking matrix, this method
 	 * finds a direct path from point A to B.
 	 */
-	calculateDirectPath(
-		from: PointModel,
-		to: PointModel
-	): number[][] {
+	calculateDirectPath(from: PointModel, to: PointModel): number[][] {
 		const matrix = this.factory.getCanvasMatrix();
 		const grid = new PF.Grid(matrix);
 

lib-routing/src/link/PathFindingLinkWidget.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
-import * as _ from "lodash";
-import { BaseWidget, BaseWidgetProps, DiagramEngine, LabelModel, PointModel } from "@projectstorm/react-diagrams-core";
-import PathFinding from "../engine/PathFinding";
-import { PathFindingLinkFactory } from "./PathFindingLinkFactory";
-import { PathFindingLinkModel } from "./PathFindingLinkModel";
+import * as React from 'react';
+import * as _ from 'lodash';
+import { BaseWidget, BaseWidgetProps, DiagramEngine, LabelModel, PointModel } from '@projectstorm/react-diagrams-core';
+import PathFinding from '../engine/PathFinding';
+import { PathFindingLinkFactory } from './PathFindingLinkFactory';
+import { PathFindingLinkModel } from './PathFindingLinkModel';
 
 export interface PathFindingLinkWidgetProps extends BaseWidgetProps {
 	color?: string;
@@ -21,7 +21,7 @@ export interface PathFindingLinkWidgetState {
 
 export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps, PathFindingLinkWidgetState> {
 	public static defaultProps: PathFindingLinkWidgetProps = {
-		color: "black",
+		color: 'black',
 		width: 3,
 		link: null,
 		engine: null,
@@ -37,7 +37,7 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 	pathFinding: PathFinding; // only set when smart routing is active
 
 	constructor(props: PathFindingLinkWidgetProps) {
-		super("srd-default-link", props);
+		super('srd-default-link', props);
 
 		this.refLabels = {};
 		this.refPaths = [];
@@ -70,15 +70,15 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 		let y = this.props.link.getPoints()[pointIndex].getY();
 
 		return (
-			<g key={"point-" + this.props.link.getPoints()[pointIndex].getID()}>
+			<g key={'point-' + this.props.link.getPoints()[pointIndex].getID()}>
 				<circle
 					cx={x}
 					cy={y}
 					r={5}
 					className={
-						"point " +
-						this.bem("__point") +
-						(this.props.link.getPoints()[pointIndex].isSelected() ? this.bem("--point-selected") : "")
+						'point ' +
+						this.bem('__point') +
+						(this.props.link.getPoints()[pointIndex].isSelected() ? this.bem('--point-selected') : '')
 					}
 				/>
 				<circle
@@ -94,7 +94,7 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 					cy={y}
 					r={15}
 					opacity={0}
-					className={"point " + this.bem("__point")}
+					className={'point ' + this.bem('__point')}
 				/>
 			</g>
 		);
@@ -122,7 +122,7 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 		return (
 			<foreignObject
 				key={label.getID()}
-				className={this.bem("__label")}
+				className={this.bem('__label')}
 				width={canvas.offsetWidth}
 				height={canvas.offsetHeight}>
 				<div ref={ref => (this.refLabels[label.getID()] = ref)}>
@@ -135,7 +135,7 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 	generateLink(path: string, extraProps: any, id: string | number): JSX.Element {
 		let Bottom = (
 			<path
-				className={this.state.selected ? this.bem("--path-selected") : ""}
+				className={this.state.selected ? this.bem('--path-selected') : ''}
 				strokeWidth={this.props.width}
 				stroke={this.props.color}
 				ref={ref => ref && this.refPaths.push(ref)}
@@ -145,7 +145,7 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 
 		var Top = React.cloneElement(Bottom, {
 			...extraProps,
-			strokeLinecap: "round",
+			strokeLinecap: 'round',
 			onMouseLeave: () => {
 				this.setState({ selected: false });
 			},
@@ -153,7 +153,7 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 				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: () => {
@@ -165,7 +165,7 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 		});
 
 		return (
-			<g key={"link-" + id}>
+			<g key={'link-' + id}>
 				{Bottom}
 				{Top}
 			</g>
@@ -217,7 +217,7 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 			y: pathCentre.y - labelDimensions.height / 2 + label.offsetY
 		};
 		this.refLabels[label.id].setAttribute(
-			"style",
+			'style',
 			`transform: translate(${labelCoordinates.x}px, ${labelCoordinates.y}px);`
 		);
 	};
@@ -255,7 +255,7 @@ export class PathFindingLinkWidget extends BaseWidget<PathFindingLinkWidgetProps
 							this.addPointToLink(event, 1);
 						}
 					},
-					"0"
+					'0'
 				)
 			);
 		}