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.
*/
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);
});

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

@ -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 => ({
return model.links
.map(link => ({
from: link.source,
to: link.target
}))
.filter(item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to));
.filter(
item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to)
);
}

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

@ -11,10 +11,9 @@ import {
DefaultPortInstanceFactory,
LinkInstanceFactory
} from "../../src/main";
import {distributeElements} from './dagre-utils';
import { distributeElements } from "./dagre-utils";
import * as React from "react";
function createNode(name) {
return new DefaultNodeModel(name, "rgb(0,192,255)");
}
@ -36,7 +35,6 @@ function connectNodes(nodeFrom, nodeTo) {
* Tests auto distribution
*/
class Demo8Widget extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = {};
@ -44,7 +42,7 @@ class Demo8Widget extends React.Component<any, any> {
}
autoDistribute() {
const {engine} = this.props;
const { engine } = this.props;
const model = engine.getDiagramModel();
let distributedModel = getDistributedModel(engine, model);
engine.setDiagramModel(distributedModel);
@ -52,11 +50,11 @@ class Demo8Widget extends React.Component<any, any> {
}
render() {
const {engine} = this.props;
const { engine } = this.props;
return (
<div>
<DiagramWidget diagramEngine={engine}/>
<DiagramWidget diagramEngine={engine} />
<button onClick={this.autoDistribute}>Re-distribute</button>
</div>
);
@ -78,7 +76,6 @@ export default () => {
engine.registerNodeFactory(new DefaultNodeFactory());
engine.registerLinkFactory(new DefaultLinkFactory());
//2) setup the diagram model
let model = new DiagramModel();
@ -87,13 +84,13 @@ export default () => {
let nodesFrom = [];
let nodesTo = [];
nodesFrom.push(createNode('from-1'));
nodesFrom.push(createNode('from-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 <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() {
const {engine} = this.props;
const { engine } = this.props;
let model = engine.getDiagramModel();
const nodes = model.getNodes();
let node = nodes[Object.keys(nodes)[0]];
@ -33,7 +33,7 @@ class NodeDelayedPosition extends React.Component<any, any> {
}
updatePositionViaSerialize() {
let {engine} = this.props;
let { engine } = this.props;
let model = engine.getDiagramModel();
let str = JSON.stringify(model.serializeDiagram());
let model2 = new DiagramModel();
@ -47,10 +47,10 @@ class NodeDelayedPosition extends React.Component<any, any> {
}
render() {
const {engine} = this.props;
const { engine } = this.props;
return (
<div>
<DiagramWidget diagramEngine={engine}/>
<DiagramWidget diagramEngine={engine} />
<button onClick={this.updatePosition}>Update position</button>
<button onClick={this.updatePositionViaSerialize}>Update position via serialize</button>
</div>
@ -98,5 +98,5 @@ export default () => {
engine.registerInstanceFactory(new LinkInstanceFactory());
//6) render the diagram!
return <NodeDelayedPosition engine={engine} model={model}/>;
return <NodeDelayedPosition engine={engine} model={model} />;
};

5
demos/demo12/index.tsx
View File

@ -22,13 +22,12 @@ export class AdvancedLinkModel extends LinkModel {
constructor() {
super();
this.linkType = "advanced";
this.color = 'green';
this.color = "green";
this.size = 6;
}
}
export class AdvancedPortModel extends DefaultPortModel
{
export class AdvancedPortModel extends DefaultPortModel {
constructor(isInput: boolean, name: string, label: string = null, id?: string) {
super(isInput, name, label, id);
}

2
demos/demo8/index.tsx
View File

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

6
demos/demo9/index.tsx
View File

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

9
demos/index.tsx
View File

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

2
package.json
View File

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

10
src/BaseEntity.ts
View File

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

4
src/CanvasActions.ts
View File

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

40
src/DiagramEngine.ts
View File

@ -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<DiagramEngineListener> {
}
repaintCanvas() {
this.iterateListeners((listener) => {
this.iterateListeners(listener => {
listener.repaintCanvas && listener.repaintCanvas();
});
}
@ -59,11 +59,11 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
enableRepaintEntities(entities: BaseModel<BaseModelListener>[]) {
this.paintableWidgets = {};
entities.forEach((entity) => {
entities.forEach(entity => {
//if a node is requested to repaint, add all of its links
if (entity instanceof NodeModel) {
_.forEach(entity.getPorts(), (port) => {
_.forEach(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<DiagramEngineListener> {
return model.isLocked();
}
recalculatePortsVisually(){
recalculatePortsVisually() {
this.nodesRendered = false;
this.linksThatHaveInitiallyRendered = {};
}
@ -149,15 +149,19 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
registerNodeFactory(factory: NodeWidgetFactory) {
this.nodeFactories[factory.getType()] = factory;
this.iterateListeners((listener) => {
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<DiagramEngineListener> {
'.port[data-name="' + port.getName() + '"][data-nodeid="' + port.getParent().getID() + '"]'
);
if (selector === null) {
throw new Error("Cannot find Node Port element with nodeID: [" +
throw new Error(
"Cannot find Node Port element with nodeID: [" +
port.getParent().getID() +
"] and name: [" +
port.getName() +
"]");
"]"
);
}
return selector;
}
@ -246,7 +252,7 @@ export class DiagramEngine extends BaseEntity<DiagramEngineListener> {
zoomToFit() {
const xFactor = this.canvas.clientWidth / this.canvas.scrollWidth;
const yFactor = this.canvas.clientHeight / this.canvas.scrollHeight;
const zoomFactor = xFactor < yFactor ? xFactor: yFactor;
const zoomFactor = xFactor < yFactor ? xFactor : yFactor;
this.diagramModel.setZoomLevel(this.diagramModel.getZoomLevel() * zoomFactor);
this.diagramModel.setOffset(0, 0);

2
src/LinkInstanceFactory.ts
View File

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

7
src/Toolkit.ts
View File

@ -3,7 +3,6 @@ import closest = require("closest");
* @author Dylan Vorster
*/
export class Toolkit {
static TESTING_MODE = false;
static TESTING_MODE_ID = 1;
@ -12,9 +11,9 @@ export class Toolkit {
* @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,

4
src/WidgetFactories.ts
View File

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

2
src/defaults/DefaultLinkFactory.ts
View File

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

12
src/defaults/DefaultLinkWidget.tsx
View File

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

2
src/defaults/DefaultNodeModel.ts
View File

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

2
src/defaults/DefaultPortModel.ts
View File

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

8
src/models/BaseModel.ts
View File

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

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 { 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<DiagramModel> & { offsetX: number, offsetY: number}): void;
offsetUpdated?(event: BaseEvent<DiagramModel> & { offsetX: number; offsetY: number }): void;
zoomUpdated?(event: BaseEvent<DiagramModel> & { zoom: number }): void;
gridUpdated?(event: BaseEvent<DiagramModel> & { size: number }): void;
}
/**
*
@ -54,7 +51,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
setGridSize(size: number = 0) {
this.gridSize = size;
this.iterateListeners((listener, event) => {
listener.gridUpdated && listener.gridUpdated({...event, size: size});
listener.gridUpdated && listener.gridUpdated({ ...event, size: size });
});
}
@ -160,7 +157,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
this.zoom = zoom;
this.iterateListeners((listener, event) => {
listener.zoomUpdated && listener.zoomUpdated({...event, zoom: zoom});
listener.zoomUpdated && listener.zoomUpdated({ ...event, zoom: zoom });
});
}
@ -168,21 +165,22 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
this.offsetX = offsetX;
this.offsetY = offsetY;
this.iterateListeners((listener, event) => {
listener.offsetUpdated && listener.offsetUpdated({...event, offsetX: offsetX, offsetY: offsetY});
listener.offsetUpdated && listener.offsetUpdated({ ...event, offsetX: offsetX, offsetY: offsetY });
});
}
setOffsetX(offsetX: number) {
this.offsetX = offsetX;
this.iterateListeners((listener, event) => {
listener.offsetUpdated && listener.offsetUpdated({...event, offsetX: offsetX, offsetY: this.offsetY});
listener.offsetUpdated && listener.offsetUpdated({ ...event, offsetX: offsetX, offsetY: this.offsetY });
});
}
setOffsetY(offsetY: number) {
this.offsetY = offsetY;
this.iterateListeners((listener, event) => {
listener.offsetUpdated && listener.offsetUpdated({...event, offsetX: this.offsetX, offsetY: this.offsetY});
listener.offsetUpdated &&
listener.offsetUpdated({ ...event, offsetX: this.offsetX, offsetY: this.offsetY });
});
}
@ -226,7 +224,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
});
this.links[link.getID()] = link;
this.iterateListeners((listener, event) => {
listener.linksUpdated && listener.linksUpdated({...event,link: link, isCreated: true});
listener.linksUpdated && listener.linksUpdated({ ...event, link: link, isCreated: true });
});
return link;
}
@ -239,7 +237,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
});
this.nodes[node.getID()] = node;
this.iterateListeners((listener, event) => {
listener.nodesUpdated && listener.nodesUpdated({...event,node: node, isCreated: true});
listener.nodesUpdated && listener.nodesUpdated({ ...event, node: node, isCreated: true });
});
return node;
}
@ -248,7 +246,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
link = this.getLink(link);
delete this.links[link.getID()];
this.iterateListeners((listener, event) => {
listener.linksUpdated && listener.linksUpdated({...event, link: link as LinkModel, isCreated: false});
listener.linksUpdated && listener.linksUpdated({ ...event, link: link as LinkModel, isCreated: false });
});
}
@ -256,7 +254,7 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
node = this.getNode(node);
delete this.nodes[node.getID()];
this.iterateListeners((listener, event) => {
listener.nodesUpdated && listener.nodesUpdated({...event, node: node as NodeModel, isCreated: false});
listener.nodesUpdated && listener.nodesUpdated({ ...event, node: node as NodeModel, isCreated: false });
});
}

17
src/models/LinkModel.ts
View File

@ -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<LinkModel> & { port: null | PortModel }): void;
sourcePortChanged?(event: BaseEvent<LinkModel> & {port: null | PortModel}): void;
targetPortChanged?(event: BaseEvent<LinkModel> & {port: null | PortModel}): void;
targetPortChanged?(event: BaseEvent<LinkModel> & { port: null | PortModel }): void;
}
export class LinkModel extends BaseModel<LinkModelListener> {
@ -112,7 +111,7 @@ export class LinkModel extends BaseModel<LinkModelListener> {
port.addLink(this);
this.sourcePort = port;
this.iterateListeners((listener: LinkModelListener, event) => {
listener.sourcePortChanged && listener.sourcePortChanged({...event, port: port});
listener.sourcePortChanged && listener.sourcePortChanged({ ...event, port: port });
});
}
@ -128,7 +127,7 @@ export class LinkModel extends BaseModel<LinkModelListener> {
port.addLink(this);
this.targetPort = port;
this.iterateListeners((listener: LinkModelListener, event) => {
listener.targetPortChanged && listener.targetPortChanged({...event, port: port});
listener.targetPortChanged && listener.targetPortChanged({ ...event, port: port });
});
}

12
src/models/NodeModel.ts
View File

@ -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<BaseModelListener> {
@ -18,17 +18,17 @@ export class NodeModel extends BaseModel<BaseModelListener> {
this.ports = {};
}
setPosition(x, y){
setPosition(x, y) {
//store position
let oldX = this.x;
let oldY = this.y;
for(let port in this.ports){
_.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;

4
src/models/PointModel.ts
View File

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

6
src/models/PortModel.ts
View File

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

40
src/widgets/DiagramWidget.tsx
View File

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

29
src/widgets/LinkLayerWidget.tsx
View File

@ -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
@ -42,20 +40,25 @@ export class LinkLayerWidget extends React.Component<LinkLayerProps, LinkLayerSt
{//only perform these actions when we have a diagram
this.props.diagramEngine.canvas &&
_.map(diagramModel.getLinks(), link => {
if (this.props.diagramEngine.nodesRendered && !this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id]) {
if (
this.props.diagramEngine.nodesRendered &&
!this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id]
) {
if (link.sourcePort !== null) {
try {
link.points[0].updateLocation(this.props.diagramEngine.getPortCenter(link.sourcePort));
link.points[0].updateLocation(
this.props.diagramEngine.getPortCenter(link.sourcePort)
);
this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id] = true;
} catch (ex) {
}
} catch (ex) {}
}
if (link.targetPort !== null) {
try {
_.last(link.points).updateLocation(this.props.diagramEngine.getPortCenter(link.targetPort));
_.last(link.points).updateLocation(
this.props.diagramEngine.getPortCenter(link.targetPort)
);
this.props.diagramEngine.linksThatHaveInitiallyRendered[link.id] = true;
} catch (ex) {
}
} catch (ex) {}
}
}

2
src/widgets/LinkWidget.tsx
View File

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

2
src/widgets/NodeLayerWidget.tsx
View File

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

2
src/widgets/NodeWidget.tsx
View File

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

2
src/widgets/PortWidget.tsx
View File

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