diff --git a/demos/Helper.tsx b/demos/Helper.tsx index ce10d63..5013a2e 100644 --- a/demos/Helper.tsx +++ b/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'); - element.style.position = 'absolute'; - element.style.top = '0px'; - element.style.left = '0px'; - element.style.bottom = '0px'; - element.style.right = '0px'; - element.style.zIndex = '10'; + let element = window.parent.document.createElement("mouse-position"); + element.style.position = "absolute"; + element.style.top = "0px"; + element.style.left = "0px"; + element.style.bottom = "0px"; + element.style.right = "0px"; + 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); }); } -} \ No newline at end of file +} diff --git a/demos/demo-dagre/dagre-utils.ts b/demos/demo-dagre/dagre-utils.ts index ca98643..57588b4 100644 --- a/demos/demo-dagre/dagre-utils.ts +++ b/demos/demo-dagre/dagre-utils.ts @@ -1,5 +1,5 @@ -import * as dagre from 'dagre'; -import * as _ from 'lodash'; +import * as dagre from "dagre"; +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 => ({ - from: link.source, - to: link.target - })) - .filter(item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to)); -} \ No newline at end of file + 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) + ); +} diff --git a/demos/demo-dagre/index.tsx b/demos/demo-dagre/index.tsx index 880c083..c4a5471 100644 --- a/demos/demo-dagre/index.tsx +++ b/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 { - constructor(props) { super(props); this.state = {}; @@ -44,7 +42,7 @@ class Demo8Widget extends React.Component { } 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 { } render() { - const {engine} = this.props; + const { engine } = this.props; return (
- +
); @@ -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-2')); - nodesFrom.push(createNode('from-3')); + nodesFrom.push(createNode("from-1")); + nodesFrom.push(createNode("from-2")); + nodesFrom.push(createNode("from-3")); - nodesTo.push(createNode('to-1')); - nodesTo.push(createNode('to-2')); - nodesTo.push(createNode('to-3')); + nodesTo.push(createNode("to-1")); + nodesTo.push(createNode("to-2")); + 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 + return ; }; diff --git a/demos/demo10/index.tsx b/demos/demo10/index.tsx index 7971ba1..88968ea 100644 --- a/demos/demo10/index.tsx +++ b/demos/demo10/index.tsx @@ -24,16 +24,16 @@ class NodeDelayedPosition extends React.Component { } updatePosition() { - const {engine} = this.props; + const { engine } = this.props; let model = engine.getDiagramModel(); const nodes = model.getNodes(); - let node = nodes[Object.keys(nodes)[0]]; - node.setPosition(node.x + 30, node.y + 30); + let node = nodes[Object.keys(nodes)[0]]; + 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 { 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 (
- +
@@ -98,5 +98,5 @@ export default () => { engine.registerInstanceFactory(new LinkInstanceFactory()); //6) render the diagram! - return ; -}; \ No newline at end of file + return ; +}; diff --git a/demos/demo12/index.tsx b/demos/demo12/index.tsx index 196d418..7dee22c 100644 --- a/demos/demo12/index.tsx +++ b/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() { - super(); + constructor() { + super(); this.linkType = "advanced"; - this.color = 'green'; + this.color = "green"; this.size = 6; - } + } } -export class AdvancedPortModel extends DefaultPortModel -{ - constructor(isInput: boolean, name: string, label: string = null, id?: string) { - super(isInput, name, label, id); - } +export class AdvancedPortModel extends DefaultPortModel { + constructor(isInput: boolean, name: string, label: string = null, id?: string) { + super(isInput, name, label, id); + } - createLinkModel(): LinkModel | null { - var link = new AdvancedLinkModel(); + createLinkModel(): LinkModel | null { + 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(node3); - model.addNode(node4); + model.addNode(node2); + model.addNode(node3); + model.addNode(node4); var link1 = node1.getOutPorts()[0].createLinkModel(); link1.setTargetPort(port3); diff --git a/demos/demo8/index.tsx b/demos/demo8/index.tsx index 8a89b8f..8b40719 100644 --- a/demos/demo8/index.tsx +++ b/demos/demo8/index.tsx @@ -36,7 +36,7 @@ export default () => { var props = { diagramEngine: engine, - maxNumberPointsPerLink: 5, + maxNumberPointsPerLink: 5 } as SRD.DiagramProps; return ( diff --git a/demos/demo9/index.tsx b/demos/demo9/index.tsx index 8960d96..ff87916 100644 --- a/demos/demo9/index.tsx +++ b/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 ( diff --git a/demos/index.tsx b/demos/index.tsx index 553e560..c15cf08 100644 --- a/demos/index.tsx +++ b/demos/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import {storiesOf} from "@storybook/react"; -import {action} from "@storybook/addon-actions"; -import {Toolkit} from "../src/Toolkit"; +import { storiesOf } from "@storybook/react"; +import { action } from "@storybook/addon-actions"; +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() \ No newline at end of file +//Helper.logMousePosition() diff --git a/package.json b/package.json index 89a2854..98566ae 100644 --- a/package.json +++ b/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", diff --git a/src/BaseEntity.ts b/src/BaseEntity.ts index f842e39..cf1277d 100644 --- a/src/BaseEntity.ts +++ b/src/BaseEntity.ts @@ -1,6 +1,5 @@ import { Toolkit } from "./Toolkit"; - /** * @author Dylan Vorster */ @@ -11,11 +10,8 @@ export interface BaseEvent { id: string; } - export interface BaseListener { - - lockChanged?(event: BaseEvent & {locked: boolean} ): void; - + lockChanged?(event: BaseEvent & { locked: boolean }): void; } export class BaseEntity { @@ -58,7 +54,7 @@ export class BaseEntity { }; 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 { this.locked = locked; this.iterateListeners((listener, event) => { if (listener.lockChanged) { - listener.lockChanged({...event, locked: locked}); + listener.lockChanged({ ...event, locked: locked }); } }); } diff --git a/src/CanvasActions.ts b/src/CanvasActions.ts index ef9f3fb..bb7675f 100644 --- a/src/CanvasActions.ts +++ b/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 {NodeModel} from "./models/NodeModel"; +import { PointModel } from "./models/PointModel"; +import { NodeModel } from "./models/NodeModel"; export class BaseAction { mouseX: number; diff --git a/src/DiagramEngine.ts b/src/DiagramEngine.ts index ef38e26..5719a56 100644 --- a/src/DiagramEngine.ts +++ b/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 {NodeModel} from "./models/NodeModel"; -import {PointModel} from "./models/PointModel"; -import {PortModel} from "./models/PortModel"; -import {LinkModel} from "./models/LinkModel"; +import { BaseModel, BaseModelListener } from "./models/BaseModel"; +import { NodeModel } from "./models/NodeModel"; +import { PointModel } from "./models/PointModel"; +import { PortModel } from "./models/PortModel"; +import { LinkModel } from "./models/LinkModel"; /** * @author Dylan Vorster */ @@ -48,7 +48,7 @@ export class DiagramEngine extends BaseEntity { } repaintCanvas() { - this.iterateListeners((listener) => { + this.iterateListeners(listener => { listener.repaintCanvas && listener.repaintCanvas(); }); } @@ -59,11 +59,11 @@ export class DiagramEngine extends BaseEntity { enableRepaintEntities(entities: BaseModel[]) { 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(port.getLinks(), (link) => { + _.forEach(entity.getPorts(), port => { + _.forEach(port.getLinks(), link => { this.paintableWidgets[link.getID()] = true; }); }); @@ -104,7 +104,7 @@ export class DiagramEngine extends BaseEntity { return model.isLocked(); } - recalculatePortsVisually(){ + recalculatePortsVisually() { this.nodesRendered = false; this.linksThatHaveInitiallyRendered = {}; } @@ -149,15 +149,19 @@ export class DiagramEngine extends BaseEntity { registerNodeFactory(factory: NodeWidgetFactory) { this.nodeFactories[factory.getType()] = factory; - this.iterateListeners((listener) => { - if (listener.nodeFactoriesUpdated) { listener.nodeFactoriesUpdated(); } + this.iterateListeners(listener => { + if (listener.nodeFactoriesUpdated) { + listener.nodeFactoriesUpdated(); + } }); } registerLinkFactory(factory: LinkWidgetFactory) { this.linkFactories[factory.getType()] = factory; - this.iterateListeners((listener) => { - if (listener.linkFactoriesUpdated) { listener.linkFactoriesUpdated(); } + this.iterateListeners(listener => { + if (listener.linkFactoriesUpdated) { + listener.linkFactoriesUpdated(); + } }); } @@ -211,11 +215,13 @@ export class DiagramEngine extends BaseEntity { '.port[data-name="' + port.getName() + '"][data-nodeid="' + port.getParent().getID() + '"]' ); if (selector === null) { - throw new Error("Cannot find Node Port element with nodeID: [" + - port.getParent().getID() + - "] and name: [" + - port.getName() + - "]"); + throw new Error( + "Cannot find Node Port element with nodeID: [" + + port.getParent().getID() + + "] and name: [" + + port.getName() + + "]" + ); } return selector; } @@ -246,7 +252,7 @@ export class DiagramEngine extends BaseEntity { 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); diff --git a/src/LinkInstanceFactory.ts b/src/LinkInstanceFactory.ts index 5291c72..d84c825 100644 --- a/src/LinkInstanceFactory.ts +++ b/src/LinkInstanceFactory.ts @@ -1,5 +1,5 @@ import { AbstractInstanceFactory } from "./AbstractInstanceFactory"; -import {LinkModel} from "./models/LinkModel"; +import { LinkModel } from "./models/LinkModel"; /** * @author Dylan Vorster */ diff --git a/src/Toolkit.ts b/src/Toolkit.ts index 8271895..a4c67b7 100644 --- a/src/Toolkit.ts +++ b/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) - * @returns {String} - */ + * Generats a unique ID (thanks Stack overflow :3) + * @returns {String} + */ public static UID(): string { - if(Toolkit.TESTING_MODE){ - Toolkit.TESTING_MODE_ID ++; - return "test-uid-"+Toolkit.TESTING_MODE_ID; + if (Toolkit.TESTING_MODE) { + 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, diff --git a/src/WidgetFactories.ts b/src/WidgetFactories.ts index 01186a8..c67eff8 100644 --- a/src/WidgetFactories.ts +++ b/src/WidgetFactories.ts @@ -1,6 +1,6 @@ import { DiagramEngine } from "./DiagramEngine"; -import {NodeModel} from "./models/NodeModel"; -import {LinkModel} from "./models/LinkModel"; +import { NodeModel } from "./models/NodeModel"; +import { LinkModel } from "./models/LinkModel"; /** * @author Dylan Vorster */ diff --git a/src/defaults/DefaultLinkFactory.ts b/src/defaults/DefaultLinkFactory.ts index b17570c..2ac08f5 100644 --- a/src/defaults/DefaultLinkFactory.ts +++ b/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 */ diff --git a/src/defaults/DefaultLinkWidget.tsx b/src/defaults/DefaultLinkWidget.tsx index 9f41d52..1d96af4 100644 --- a/src/defaults/DefaultLinkWidget.tsx +++ b/src/defaults/DefaultLinkWidget.tsx @@ -1,12 +1,12 @@ import * as React from "react"; import { DiagramEngine } from "../DiagramEngine"; -import {LinkModel} from "../models/LinkModel"; -import {PointModel} from "../models/PointModel"; +import { LinkModel } from "../models/LinkModel"; +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 { + onMouseDown: event => { this.addPointToLink(event, 1); }, d: this.generateCurvePath(pointLeft, pointRight, margin, -margin) @@ -197,10 +197,10 @@ export class DefaultLinkWidget extends React.Component { + onMouseDown: (event: MouseEvent) => { this.addPointToLink(event, index + 1); }, - "d": data + d: data }, index ); diff --git a/src/defaults/DefaultNodeModel.ts b/src/defaults/DefaultNodeModel.ts index f5ca988..e758de8 100644 --- a/src/defaults/DefaultNodeModel.ts +++ b/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 { constructor() { diff --git a/src/defaults/DefaultPortModel.ts b/src/defaults/DefaultPortModel.ts index 2fee800..fd6fb75 100644 --- a/src/defaults/DefaultPortModel.ts +++ b/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 { constructor() { diff --git a/src/models/BaseModel.ts b/src/models/BaseModel.ts index 505930f..906e96d 100644 --- a/src/models/BaseModel.ts +++ b/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 & {isSelected: boolean}): void; + selectionChanged?(event: BaseEvent & { isSelected: boolean }): void; entityRemoved?(event: BaseEvent): void; } @@ -13,7 +12,6 @@ export interface BaseModelListener extends BaseListener { * @author Dylan Vorster */ export class BaseModel extends BaseEntity { - selected: boolean; class: string; @@ -54,7 +52,7 @@ export class BaseModel extends this.selected = selected; this.iterateListeners((listener, event) => { if (listener.selectionChanged) { - listener.selectionChanged({...event, isSelected: selected}); + listener.selectionChanged({ ...event, isSelected: selected }); } }); } diff --git a/src/models/DiagramModel.ts b/src/models/DiagramModel.ts index a5fdaa7..e85297e 100644 --- a/src/models/DiagramModel.ts +++ b/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 {NodeModel} from "./NodeModel"; -import {PortModel} from "./PortModel"; -import {BaseModel, BaseModelListener} from "./BaseModel"; +import { LinkModel } from "./LinkModel"; +import { NodeModel } from "./NodeModel"; +import { PortModel } from "./PortModel"; +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 & { offsetX: number, offsetY: number}): void; + offsetUpdated?(event: BaseEvent & { offsetX: number; offsetY: number }): void; zoomUpdated?(event: BaseEvent & { zoom: number }): void; gridUpdated?(event: BaseEvent & { size: number }): void; - - } /** * @@ -54,7 +51,7 @@ export class DiagramModel extends BaseEntity { 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 { 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 { 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 { }); 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 { }); 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 { 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 { 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 }); }); } diff --git a/src/models/LinkModel.ts b/src/models/LinkModel.ts index 42ce5a7..c0a251a 100644 --- a/src/models/LinkModel.ts +++ b/src/models/LinkModel.ts @@ -1,14 +1,13 @@ -import {BaseModel, BaseModelListener} from "./BaseModel"; -import {PortModel} from "./PortModel"; -import {PointModel} from "./PointModel"; +import { BaseModel, BaseModelListener } from "./BaseModel"; +import { PortModel } from "./PortModel"; +import { PointModel } from "./PointModel"; import * as _ from "lodash"; -import {BaseEvent} from "../BaseEntity"; +import { BaseEvent } from "../BaseEntity"; export interface LinkModelListener extends BaseModelListener { + sourcePortChanged?(event: BaseEvent & { port: null | PortModel }): void; - sourcePortChanged?(event: BaseEvent & {port: null | PortModel}): void; - - targetPortChanged?(event: BaseEvent & {port: null | PortModel}): void; + targetPortChanged?(event: BaseEvent & { port: null | PortModel }): void; } export class LinkModel extends BaseModel { @@ -112,7 +111,7 @@ export class LinkModel extends BaseModel { 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 { 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 }); }); } diff --git a/src/models/NodeModel.ts b/src/models/NodeModel.ts index 754e012..cd78060 100644 --- a/src/models/NodeModel.ts +++ b/src/models/NodeModel.ts @@ -1,5 +1,5 @@ -import {BaseModel, BaseModelListener} from "./BaseModel"; -import {PortModel} from "./PortModel"; +import { BaseModel, BaseModelListener } from "./BaseModel"; +import { PortModel } from "./PortModel"; import * as _ from "lodash"; export class NodeModel extends BaseModel { @@ -18,17 +18,17 @@ export class NodeModel extends BaseModel { this.ports = {}; } - setPosition(x, y){ + setPosition(x, y) { //store position let oldX = this.x; let oldY = this.y; - for(let port in this.ports){ - _.forEach(this.ports[port].getLinks(), (link) => { + for (let port in this.ports) { + _.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; diff --git a/src/models/PointModel.ts b/src/models/PointModel.ts index 8c7ebbc..fe1d37a 100644 --- a/src/models/PointModel.ts +++ b/src/models/PointModel.ts @@ -1,5 +1,5 @@ -import {BaseModel, BaseModelListener} from "./BaseModel"; -import {LinkModel} from "./LinkModel"; +import { BaseModel, BaseModelListener } from "./BaseModel"; +import { LinkModel } from "./LinkModel"; import * as _ from "lodash"; export class PointModel extends BaseModel { @@ -62,4 +62,4 @@ export class PointModel extends BaseModel { getLink(): LinkModel { return this.link; } -} \ No newline at end of file +} diff --git a/src/models/PortModel.ts b/src/models/PortModel.ts index 9b3cdd7..8202615 100644 --- a/src/models/PortModel.ts +++ b/src/models/PortModel.ts @@ -1,6 +1,6 @@ -import {BaseModel, BaseModelListener} from "./BaseModel"; -import {NodeModel} from "./NodeModel"; -import {LinkModel} from "./LinkModel"; +import { BaseModel, BaseModelListener } from "./BaseModel"; +import { NodeModel } from "./NodeModel"; +import { LinkModel } from "./LinkModel"; import * as _ from "lodash"; export class PortModel extends BaseModel { @@ -59,4 +59,4 @@ export class PortModel extends BaseModel { linkModel.setSourcePort(this); return linkModel; } -} \ No newline at end of file +} diff --git a/src/widgets/DiagramWidget.tsx b/src/widgets/DiagramWidget.tsx index 23a04b0..1ef4972 100644 --- a/src/widgets/DiagramWidget.tsx +++ b/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 {PointModel} from "../models/PointModel"; -import {PortModel} from "../models/PortModel"; -import {LinkModel} from "../models/LinkModel"; -import {BaseModel, BaseModelListener} from "../models/BaseModel"; +import { NodeModel } from "../models/NodeModel"; +import { PointModel } from "../models/PointModel"; +import { PortModel } from "../models/PortModel"; +import { LinkModel } from "../models/LinkModel"; +import { BaseModel, BaseModelListener } from "../models/BaseModel"; export interface SelectionModel { model: BaseModel; @@ -80,15 +80,15 @@ export class DiagramWidget extends React.Component { window.removeEventListener("mouseMove", this.onMouseMove); } - componentWillReceiveProps(nextProps: DiagramProps) { - if (this.props.diagramEngine !== nextProps.diagramEngine) { - this.props.diagramEngine.removeListener(this.state.diagramEngineListener); - const diagramEngineListener = nextProps.diagramEngine.addListener({ - repaintCanvas: () => this.forceUpdate() - }); - this.setState({diagramEngineListener}); - } - } + componentWillReceiveProps(nextProps: DiagramProps) { + if (this.props.diagramEngine !== nextProps.diagramEngine) { + this.props.diagramEngine.removeListener(this.state.diagramEngineListener); + const diagramEngineListener = nextProps.diagramEngine.addListener({ + repaintCanvas: () => this.forceUpdate() + }); + 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 { 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 { 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 { 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 { 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 { 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 { 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 { //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 { return (
{ + 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 { this.forceUpdate(); } }} - onMouseDown={(event) => { + onMouseDown={event => { this.setState({ ...this.state, wasMoved: false }); diagramEngine.clearRepaintEntities(); diff --git a/src/widgets/LinkLayerWidget.tsx b/src/widgets/LinkLayerWidget.tsx index 0a35f0d..1dd2ba5 100644 --- a/src/widgets/LinkLayerWidget.tsx +++ b/src/widgets/LinkLayerWidget.tsx @@ -1,17 +1,15 @@ import * as React from "react"; -import {DiagramEngine} from "../DiagramEngine"; -import {LinkWidget} from "./LinkWidget"; +import { DiagramEngine } from "../DiagramEngine"; +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 {//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) {} } } diff --git a/src/widgets/LinkWidget.tsx b/src/widgets/LinkWidget.tsx index 956c1f5..7ed1707 100644 --- a/src/widgets/LinkWidget.tsx +++ b/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; diff --git a/src/widgets/NodeLayerWidget.tsx b/src/widgets/NodeLayerWidget.tsx index d9ff442..59dcfdd 100644 --- a/src/widgets/NodeLayerWidget.tsx +++ b/src/widgets/NodeLayerWidget.tsx @@ -19,7 +19,7 @@ export class NodeLayerWidget extends React.Component