javascript/react-diagrams
1
0
Fork 0
mirror of https://github.com/projectstorm/react-diagrams.git synced 2025-08-18 19:20:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

clean up code style

Browse Source
This commit is contained in:
Dylan Vorster
2017-12-16 23:04:01 +02:00
parent 83f130c013
commit 94388f4aef
31 changed files with 218 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
demos/Helper.tsx
View File

@ -4,16 +4,16 @@ export class Helper {
* since the actual story book stories are rendered as an iFrame. * since the actual story book stories are rendered as an iFrame.
*/ */
static logMousePosition() { 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.document.body.appendChild(element);
window.parent.window.addEventListener('mousemove', (event) => { window.parent.window.addEventListener("mousemove", event => {
console.clear(); console.clear();
console.log(event.clientX, event.clientY); console.log(event.clientX, event.clientY);
}); });

15
demos/demo-dagre/dagre-utils.ts
View File

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

27
demos/demo-dagre/index.tsx
View File

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

10
demos/demo10/index.tsx
View File

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

5
demos/demo12/index.tsx
View File

@ -22,13 +22,12 @@ export class AdvancedLinkModel extends LinkModel {
constructor() { constructor() {
super(); super();
this.linkType = "advanced"; this.linkType = "advanced";
this.color = 'green'; this.color = "green";
this.size = 6; 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);
} }

2
demos/demo8/index.tsx
View File

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

6
demos/demo9/index.tsx
View File

@ -43,9 +43,9 @@ export default () => {
model.addLink(link1); model.addLink(link1);
model.addLink(link2); model.addLink(link2);
[node1, node2, link1, link2].forEach((item) => { [node1, node2, link1, link2].forEach(item => {
item.addListener({ item.addListener({
selectionChanged: action('selectionChanged') selectionChanged: action("selectionChanged")
}); });
}); });
@ -53,7 +53,7 @@ export default () => {
var props = { var props = {
diagramEngine: engine, 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; } as SRD.DiagramProps;
return ( return (

9
demos/index.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react"; 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 demo1 from "./demo1/index";
import demo2 from "./demo2/index"; import demo2 from "./demo2/index";
@ -16,11 +16,10 @@ import demo10 from "./demo10/index";
import demo11 from "./demo11/index"; import demo11 from "./demo11/index";
import demo12 from "./demo12/index"; import demo12 from "./demo12/index";
import demoDagre from "./demo-dagre/index"; import demoDagre from "./demo-dagre/index";
import {Helper} from "./Helper"; import { Helper } from "./Helper";
require("./test.scss"); require("./test.scss");
// make tests deterministic // make tests deterministic
Toolkit.TESTING_MODE = true; Toolkit.TESTING_MODE = true;

2
package.json
View File

@ -25,7 +25,7 @@
"storybook:build": "build-storybook -c .storybook -o .out", "storybook:build": "build-storybook -c .storybook -o .out",
"storybook:github": "storybook-to-ghpages", "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", "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": { "dependencies": {
"closest": "^0.0.1", "closest": "^0.0.1",

10
src/BaseEntity.ts
View File

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

4
src/CanvasActions.ts
View File

@ -1,8 +1,8 @@
import { DiagramModel } from "./models/DiagramModel"; import { DiagramModel } from "./models/DiagramModel";
import { DiagramEngine } from "./DiagramEngine"; import { DiagramEngine } from "./DiagramEngine";
import { SelectionModel } from "./widgets/DiagramWidget"; 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 { export class BaseAction {
mouseX: number; mouseX: number;

40
src/DiagramEngine.ts
View File

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

2
src/LinkInstanceFactory.ts
View File

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

7
src/Toolkit.ts
View File

@ -3,7 +3,6 @@ import closest = require("closest");
* @author Dylan Vorster * @author Dylan Vorster
*/ */
export class Toolkit { export class Toolkit {
static TESTING_MODE = false; static TESTING_MODE = false;
static TESTING_MODE_ID = 1; static TESTING_MODE_ID = 1;
@ -12,9 +11,9 @@ export class Toolkit {
* @returns {String} * @returns {String}
*/ */
public static UID(): 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) { return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
var r = (Math.random() * 16) | 0, var r = (Math.random() * 16) | 0,

4
src/WidgetFactories.ts
View File

@ -1,6 +1,6 @@
import { DiagramEngine } from "./DiagramEngine"; 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 * @author Dylan Vorster
*/ */

2
src/defaults/DefaultLinkFactory.ts
View File

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

12
src/defaults/DefaultLinkWidget.tsx
View File

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

2
src/defaults/DefaultNodeModel.ts
View File

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

2
src/defaults/DefaultPortModel.ts
View File

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

8
src/models/BaseModel.ts
View File

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

38
src/models/DiagramModel.ts
View File

@ -1,27 +1,24 @@
import {BaseListener, BaseEntity, BaseEvent} from "../BaseEntity"; import { BaseListener, BaseEntity, BaseEvent } from "../BaseEntity";
import * as _ from "lodash"; import * as _ from "lodash";
import { DiagramEngine } from "../DiagramEngine"; 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 * @author Dylan Vorster
* *
*/ */
export interface DiagramListener extends BaseListener { 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; zoomUpdated?(event: BaseEvent<DiagramModel> & { zoom: number }): void;
gridUpdated?(event: BaseEvent<DiagramModel> & { size: number }): void; gridUpdated?(event: BaseEvent<DiagramModel> & { size: number }): void;
} }
/** /**
* *
@ -54,7 +51,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
setGridSize(size: number = 0) { setGridSize(size: number = 0) {
this.gridSize = size; this.gridSize = size;
this.iterateListeners((listener, event) => { 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.zoom = zoom;
this.iterateListeners((listener, event) => { 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.offsetX = offsetX;
this.offsetY = offsetY; this.offsetY = offsetY;
this.iterateListeners((listener, event) => { 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) { setOffsetX(offsetX: number) {
this.offsetX = offsetX; this.offsetX = offsetX;
this.iterateListeners((listener, event) => { 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) { setOffsetY(offsetY: number) {
this.offsetY = offsetY; this.offsetY = offsetY;
this.iterateListeners((listener, event) => { 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.links[link.getID()] = link;
this.iterateListeners((listener, event) => { this.iterateListeners((listener, event) => {
listener.linksUpdated && listener.linksUpdated({...event,link: link, isCreated: true}); listener.linksUpdated && listener.linksUpdated({ ...event, link: link, isCreated: true });
}); });
return link; return link;
} }
@ -239,7 +237,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
}); });
this.nodes[node.getID()] = node; this.nodes[node.getID()] = node;
this.iterateListeners((listener, event) => { this.iterateListeners((listener, event) => {
listener.nodesUpdated && listener.nodesUpdated({...event,node: node, isCreated: true}); listener.nodesUpdated && listener.nodesUpdated({ ...event, node: node, isCreated: true });
}); });
return node; return node;
} }
@ -248,7 +246,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
link = this.getLink(link); link = this.getLink(link);
delete this.links[link.getID()]; delete this.links[link.getID()];
this.iterateListeners((listener, event) => { 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); node = this.getNode(node);
delete this.nodes[node.getID()]; delete this.nodes[node.getID()];
this.iterateListeners((listener, event) => { 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 });
}); });
} }

17
src/models/LinkModel.ts
View File

@ -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 * as _ from "lodash";
import {BaseEvent} from "../BaseEntity"; import { BaseEvent } from "../BaseEntity";
export interface LinkModelListener extends BaseModelListener { 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> { export class LinkModel extends BaseModel<LinkModelListener> {
@ -112,7 +111,7 @@ export class LinkModel extends BaseModel<LinkModelListener> {
port.addLink(this); port.addLink(this);
this.sourcePort = port; this.sourcePort = port;
this.iterateListeners((listener: LinkModelListener, event) => { 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); port.addLink(this);
this.targetPort = port; this.targetPort = port;
this.iterateListeners((listener: LinkModelListener, event) => { this.iterateListeners((listener: LinkModelListener, event) => {
listener.targetPortChanged && listener.targetPortChanged({...event, port: port}); listener.targetPortChanged && listener.targetPortChanged({ ...event, port: port });
}); });
} }

12
src/models/NodeModel.ts
View File

@ -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"; import * as _ from "lodash";
export class NodeModel extends BaseModel<BaseModelListener> { export class NodeModel extends BaseModel<BaseModelListener> {
@ -18,17 +18,17 @@ export class NodeModel extends BaseModel<BaseModelListener> {
this.ports = {}; this.ports = {};
} }
setPosition(x, y){ setPosition(x, y) {
//store position //store position
let oldX = this.x; let oldX = this.x;
let oldY = this.y; 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]); let point = link.getPointForPort(this.ports[port]);
point.x = point.x + x - oldX; point.x = point.x + x - oldX;
point.y = point.y + y - oldY; point.y = point.y + y - oldY;
}) });
} }
this.x = x; this.x = x;

4
src/models/PointModel.ts
View File

@ -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"; import * as _ from "lodash";
export class PointModel extends BaseModel<BaseModelListener> { export class PointModel extends BaseModel<BaseModelListener> {

6
src/models/PortModel.ts
View File

@ -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"; import * as _ from "lodash";
export class PortModel extends BaseModel<BaseModelListener> { export class PortModel extends BaseModel<BaseModelListener> {

40
src/widgets/DiagramWidget.tsx
View File

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

29
src/widgets/LinkLayerWidget.tsx
View File

@ -1,17 +1,15 @@
import * as React from "react"; 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 * as _ from "lodash";
import {PointModel} from "../models/PointModel"; import { PointModel } from "../models/PointModel";
export interface LinkLayerProps { export interface LinkLayerProps {
diagramEngine: DiagramEngine; diagramEngine: DiagramEngine;
pointAdded: (point: PointModel, event) => any; pointAdded: (point: PointModel, event) => any;
} }
export interface LinkLayerState { export interface LinkLayerState {}
}
/** /**
* @author Dylan Vorster * @author Dylan Vorster
@ -42,20 +40,25 @@ export class LinkLayerWidget extends React.Component<LinkLayerProps, LinkLayerSt
{//only perform these actions when we have a diagram {//only perform these actions when we have a diagram
this.props.diagramEngine.canvas && this.props.diagramEngine.canvas &&
_.map(diagramModel.getLinks(), link => { _.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) { if (link.sourcePort !== null) {
try { 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; this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id] = true;
} catch (ex) { } catch (ex) {}
}
} }
if (link.targetPort !== null) { if (link.targetPort !== null) {
try { 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; this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id] = true;
} catch (ex) { } catch (ex) {}
}
} }
} }

2
src/widgets/LinkWidget.tsx
View File

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

2
src/widgets/NodeLayerWidget.tsx
View File

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

2
src/widgets/NodeWidget.tsx
View File

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

2
src/widgets/PortWidget.tsx
View File

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