javascript/react-diagrams
1
0
Fork 0
mirror of https://github.com/projectstorm/react-diagrams.git synced 2025-08-18 11:17:58 +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);
});

11
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,
@ -47,9 +47,12 @@ function mapElements(model) {
function mapEdges(model) {
// returns links which connects nodes
// we check are there both from and to nodes in the model. Sometimes links can be detached
return model.links.map(link => ({
return model.links
.map(link => ({
from: link.source,
to: link.target
}))
.filter(item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to));
.filter(
item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to)
);
}

21
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 = {};
@ -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} />;
};

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 (

1
demos/index.tsx
View File

@ -20,7 +20,6 @@ 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",

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

26
src/DiagramEngine.ts
View File

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

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

8
src/defaults/DefaultLinkWidget.tsx
View File

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

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

12
src/models/DiagramModel.ts
View File

@ -10,18 +10,15 @@ import {BaseModel, BaseModelListener} from "./BaseModel";
*
*/
export interface DiagramListener extends BaseListener {
nodesUpdated?(event: BaseEvent & { node: NodeModel; isCreated: boolean }): void;
nodesUpdated?(event: BaseEvent & { node: NodeModel, isCreated: boolean }): void;
linksUpdated?(event: BaseEvent & { link: LinkModel; isCreated: boolean }): void;
linksUpdated?(event: BaseEvent & { link: LinkModel, isCreated: boolean }): void;
offsetUpdated?(event: BaseEvent<DiagramModel> & { offsetX: number, offsetY: number}): void;
offsetUpdated?(event: BaseEvent<DiagramModel> & { offsetX: number; offsetY: number }): void;
zoomUpdated?(event: BaseEvent<DiagramModel> & { zoom: number }): void;
gridUpdated?(event: BaseEvent<DiagramModel> & { size: number }): void;
}
/**
*
@ -182,7 +179,8 @@ export class DiagramModel extends BaseEntity<DiagramListener> {
this.offsetY = offsetY;
this.iterateListeners((listener, event) => {
listener.offsetUpdated && listener.offsetUpdated({...event, offsetX: this.offsetX, offsetY: this.offsetY});
listener.offsetUpdated &&
listener.offsetUpdated({ ...event, offsetX: this.offsetX, offsetY: this.offsetY });
});
}

1
src/models/LinkModel.ts
View File

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

4
src/models/NodeModel.ts
View File

@ -24,11 +24,11 @@ export class NodeModel extends BaseModel<BaseModelListener> {
let oldY = this.y;
for (let port in this.ports) {
_.forEach(this.ports[port].getLinks(), (link) => {
_.forEach(this.ports[port].getLinks(), link => {
let point = link.getPointForPort(this.ports[port]);
point.x = point.x + x - oldX;
point.y = point.y + y - oldY;
})
});
}
this.x = x;

28
src/widgets/DiagramWidget.tsx
View File

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

23
src/widgets/LinkLayerWidget.tsx
View File

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