javascript/react-diagrams
1
0
Fork 0
mirror of https://github.com/projectstorm/react-diagrams.git synced 2025-08-26 16:01:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed some demos, code cleanup

Browse Source
This commit is contained in:
Dylan Vorster
2018-02-18 20:24:52 +02:00
parent 85f97a63fa
commit 76fb35f6d1
3 changed files with 34 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
demos/demo-simple-flow/index.tsx
View File

@ -3,7 +3,6 @@ import {
DiagramModel,
DefaultNodeModel,
LinkModel,
DefaultPortModel,
DiagramWidget
} from "../../src/main";
import * as React from "react";
@ -18,32 +17,24 @@ export default () => {
//3-A) create a default node
var node1 = new DefaultNodeModel("Node 1", "rgb(0,192,255)");
var port1 = node1.addPort(new DefaultPortModel(false, "out-1", "OUT"));
node1.x = 100;
node1.y = 100;
var port1 = node1.addOutPort('Out')
node1.setPosition(100,100);
//3-B) create another default node
var node2 = new DefaultNodeModel("Node 2", "rgb(192,255,0)");
var port2 = node2.addPort(new DefaultPortModel(true, "in-1", "IN"));
node2.x = 400;
node2.y = 100;
var port2 = node2.addInPort('In')
node2.setPosition(400, 100);
//3-C) link the 2 nodes together
var link1 = new LinkModel();
link1.setSourcePort(port1);
link1.setTargetPort(port2);
var link1 = port1.link(port2);
//3-D) create an orphaned node
var node3 = new DefaultNodeModel("Node 3", "rgb(0,192,255)");
var port3 = node3.addPort(new DefaultPortModel(false, "out-1", "OUT"));
node3.x = 100;
node3.y = 200;
node3.addOutPort('Out');
node3.setPosition(100,200);
//4) add the models to the root graph
model.addNode(node1);
model.addNode(node2);
model.addNode(node3);
model.addLink(link1);
model.addAll(node1, node2, node3, link1);
//5) load model into engine
engine.setDiagramModel(model);

40
demos/demo-smart-routing/index.tsx
View File

@ -21,41 +21,27 @@ export default () => {
// create four nodes in a way that straight links wouldn't work
const node1 = new DefaultNodeModel("Node A", "rgb(0,192,255)");
const port1 = node1.addPort(new DefaultPortModel(false, "out-1", "Out"));
node1.x = 340;
node1.y = 350;
node1.setPosition(340, 350);
const node2 = new DefaultNodeModel("Node B", "rgb(255,255,0)");
const port2 = node2.addPort(new DefaultPortModel(false, "out-1", "Out"));
node2.x = 240;
node2.y = 80;
node2.setPosition(240, 80);
const node3 = new DefaultNodeModel("Node C", "rgb(192,255,255)");
const port3 = node3.addPort(new DefaultPortModel(true, "in-1", "In"));
node3.x = 540;
node3.y = 180;
node3.setPosition(540, 180);
const node4 = new DefaultNodeModel("Node D", "rgb(192,0,255)");
const port4 = node4.addPort(new DefaultPortModel(true, "in-1", "In"));
node4.x = 95;
node4.y = 185;
node4.setPosition(95, 185);
const node5 = new DefaultNodeModel("Node E", "rgb(192,255,0)");
const port5 = node5.addPort(new DefaultPortModel(true, "in-1", "In"));
node5.x = 250;
node5.y = 180;
node5.setPosition(250, 180);
// linking things together
const link1 = new LinkModel();
link1.setSourcePort(port1);
link1.setTargetPort(port4);
const link2 = new LinkModel();
link2.setSourcePort(port2);
link2.setTargetPort(port3);
const link1 = port1.link(port4);
const link2 = port2.link(port3);
// add all to the main model
model.addNode(node1);
model.addNode(node2);
model.addNode(node3);
model.addNode(node4);
model.addNode(node5);
model.addLink(link1);
model.addLink(link2);
model.addAll(node1, node2, node3, node4, node5, link1, link2);
// load model into engine and render
engine.setDiagramModel(model);
@ -72,7 +58,11 @@ export default () => {
</button>
}
>
<DiagramWidget diagramEngine={engine} smartRouting={true} maxNumberPointsPerLink={0} />
<DiagramWidget
diagramEngine={engine}
smartRouting={true}
maxNumberPointsPerLink={0}
/>
</DemoWorkspaceWidget>
);
};

21
src/defaults/widgets/DefaultLinkWidget.tsx
View File

@ -47,6 +47,14 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
}
}
componentDidUpdate() {
window.requestAnimationFrame(this.calculateLabelPosition);
}
componentDidMount() {
window.requestAnimationFrame(this.calculateLabelPosition);
}
addPointToLink = (event: MouseEvent, index: number): void => {
if (
!event.shiftKey &&
@ -110,6 +118,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
},
'data-linkid': this.props.link.getID(),
strokeOpacity: this.state.selected ? 0.1 : 0,
strokeWidth: 20,
onContextMenu: () => {
if (!this.props.diagramEngine.isModelLocked(this.props.link)) {
event.preventDefault();
@ -172,16 +181,6 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
this.refLabel.setAttribute("style", `transform: translate(${labelCoordinates.x}px, ${labelCoordinates.y}px);`);
};
componentDidUpdate() {
window.requestAnimationFrame(this.calculateLabelPosition);
}
componentDidMount() {
window.requestAnimationFrame(this.calculateLabelPosition);
}
//HERE
/**
* Smart routing is only applicable when all conditions below are true:
@ -215,9 +214,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
//ensure id is present for all points on the path
var points = this.props.link.points;
var paths = [];
let model = diagramEngine.getDiagramModel();
if (this.isSmartRoutingApplicable()) {
// first step: calculate a direct path between the points being linked