forked from community/device-mgt-core
Jayasanka
5 years ago
parent
7f70dd96e0
commit
abee848e2b
@ -1,98 +1,101 @@
|
||||
import React from "react";
|
||||
import * as SRD from "storm-react-diagrams";
|
||||
import "storm-react-diagrams/dist/style.min.css";
|
||||
import "./LifeCycle.css";
|
||||
import {distributeElements} from "../../../js/utils/dagre-utils.ts";
|
||||
import {Graph} from 'react-d3-graph';
|
||||
|
||||
|
||||
// the graph configuration, you only need to pass down properties
|
||||
// that you want to override, otherwise default ones will be used
|
||||
const myConfig = {
|
||||
nodeHighlightBehavior: true,
|
||||
directed: true,
|
||||
height: 400,
|
||||
d3: {
|
||||
alphaTarget: 0.05,
|
||||
gravity: -200,
|
||||
linkLength: 200,
|
||||
linkStrength: 1
|
||||
},
|
||||
node: {
|
||||
color: "#d3d3d3",
|
||||
fontColor: "black",
|
||||
fontSize: 12,
|
||||
fontWeight: "normal",
|
||||
highlightFontSize: 12,
|
||||
highlightFontWeight: "bold",
|
||||
highlightStrokeColor: "SAME",
|
||||
highlightStrokeWidth: 1.5,
|
||||
labelProperty: "id",
|
||||
mouseCursor: "pointer",
|
||||
opacity: 1,
|
||||
strokeColor: "none",
|
||||
strokeWidth: 1.5,
|
||||
svg: "",
|
||||
symbolType: "circle",
|
||||
},
|
||||
link: {
|
||||
highlightColor: 'lightblue'
|
||||
}
|
||||
};
|
||||
|
||||
const inPortName = "IN";
|
||||
const outPortName = "OUT";
|
||||
const onClickNode = function(nodeId) {
|
||||
window.alert(`Clicked node ${nodeId}`);
|
||||
};
|
||||
|
||||
class LifeCycleGraph extends React.Component {
|
||||
|
||||
render() {
|
||||
// graph payload (with minimalist structure)
|
||||
|
||||
const lifecycle = this.props.lifecycle;
|
||||
const nodes = [];
|
||||
const links = [];
|
||||
|
||||
const engine = new SRD.DiagramEngine();
|
||||
engine.installDefaultFactories();
|
||||
|
||||
const model = new SRD.DiagramModel();
|
||||
const nextStates = lifecycle[this.props.currentStatus].proceedingStates;
|
||||
|
||||
|
||||
Object.keys(lifecycle).forEach((stateName) => {
|
||||
const state = lifecycle[stateName];
|
||||
let color = "rgb(83, 92, 104)";
|
||||
if (stateName === this.props.currentStatus) {
|
||||
color = "rgb(192,255,0)";
|
||||
color = "rgb(39, 174, 96)";
|
||||
} else if (nextStates.includes(stateName)) {
|
||||
color = "rgb(0,192,255)";
|
||||
}
|
||||
const node = createNode(stateName, color);
|
||||
let node = {
|
||||
id: stateName,
|
||||
color: color
|
||||
};
|
||||
nodes.push(node);
|
||||
lifecycle[stateName].node = node;
|
||||
});
|
||||
|
||||
Object.keys(lifecycle).forEach((stateName) => {
|
||||
const state = lifecycle[stateName];
|
||||
//todo: remove checking property
|
||||
if (state.hasOwnProperty("proceedingStates")) {
|
||||
|
||||
state.proceedingStates.forEach((proceedingState) => {
|
||||
links.push(connectNodes(state.node, lifecycle[proceedingState].node));
|
||||
let link = {
|
||||
source: stateName,
|
||||
target: proceedingState
|
||||
};
|
||||
links.push(link);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
nodes.forEach((node) => {
|
||||
model.addNode(node);
|
||||
// node.addListener({
|
||||
// selectionChanged: (node, isSelected) => {
|
||||
// console.log(isSelected);
|
||||
// }
|
||||
// });
|
||||
});
|
||||
links.forEach((link) => {
|
||||
model.addLink(link);
|
||||
});
|
||||
|
||||
const data = {
|
||||
nodes: nodes,
|
||||
links: links
|
||||
};
|
||||
|
||||
let distributedModel = getDistributedModel(engine, model);
|
||||
engine.setDiagramModel(distributedModel);
|
||||
|
||||
return (
|
||||
<div style={{height: 500}}>
|
||||
<SRD.DiagramWidget diagramEngine={engine} maxNumberPointsPerLink={10} smartRouting={true}/>
|
||||
<div>
|
||||
<Graph
|
||||
id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
|
||||
data={data}
|
||||
config={myConfig}
|
||||
onClickNode={onClickNode}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getDistributedModel(engine, model) {
|
||||
const serialized = model.serializeDiagram();
|
||||
const distributedSerializedDiagram = distributeElements(serialized);
|
||||
|
||||
//deserialize the model
|
||||
let deSerializedModel = new SRD.DiagramModel();
|
||||
deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine);
|
||||
return deSerializedModel;
|
||||
}
|
||||
|
||||
function createNode(name, color) {
|
||||
const node = new SRD.DefaultNodeModel(name, color);
|
||||
node.addPort(new SRD.DefaultPortModel(true, inPortName, " "));
|
||||
node.addPort(new SRD.DefaultPortModel(false, outPortName, " "));
|
||||
return node;
|
||||
}
|
||||
|
||||
let count = 0;
|
||||
|
||||
function connectNodes(nodeFrom, nodeTo) {
|
||||
return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName));
|
||||
}
|
||||
|
||||
function f() {
|
||||
console.log(1);
|
||||
}
|
||||
|
||||
export default LifeCycleGraph;
|
||||
@ -0,0 +1,21 @@
|
||||
|
||||
/* --- Shape for the nodes --- */
|
||||
|
||||
.node {
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
border-radius: 20% 20% 20% 20%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.node .name {
|
||||
padding: 5%;
|
||||
font-size: 0.5rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
|
||||
import "./CustomNode.css";
|
||||
|
||||
|
||||
/**
|
||||
* Component that renders a person's name and gender, along with icons
|
||||
* representing if they have a driver license for bike and / or car.
|
||||
* @param {Object} props component props to render.
|
||||
*/
|
||||
function CustomNode({ node }) {
|
||||
|
||||
return (
|
||||
<div className="node" style={{backgroundColor: node.color}}>
|
||||
<div className="name">{node.id}</div>
|
||||
|
||||
{/*<div className="flex-container fill-space flex-container-row">*/}
|
||||
{/*<div className="fill-space">*/}
|
||||
{/*<div*/}
|
||||
{/*className="icon"*/}
|
||||
{/*style={{ backgroundImage: `url('${isMale ? ICON_TYPES.MAN : ICON_TYPES.WOMAN}')` }}*/}
|
||||
{/*/>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*<div className="icon-bar">*/}
|
||||
{/*{person.hasBike && (*/}
|
||||
{/*<div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.BIKE}')` }} />*/}
|
||||
{/*)}*/}
|
||||
{/*{person.hasCar && <div className="icon" style={{ backgroundImage: `url('${ICON_TYPES.CAR}')` }} />}*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CustomNode;
|
||||
@ -0,0 +1,98 @@
|
||||
import React from "react";
|
||||
import * as SRD from "storm-react-diagrams";
|
||||
import "storm-react-diagrams/dist/style.min.css";
|
||||
import "./LifeCycle.css";
|
||||
import {distributeElements} from "../../../js/utils/dagre-utils.ts";
|
||||
|
||||
const inPortName = "IN";
|
||||
const outPortName = "OUT";
|
||||
|
||||
class LifeCycleGraph extends React.Component {
|
||||
render() {
|
||||
|
||||
const lifecycle = this.props.lifecycle;
|
||||
const nodes = [];
|
||||
const links = [];
|
||||
|
||||
const engine = new SRD.DiagramEngine();
|
||||
engine.installDefaultFactories();
|
||||
|
||||
const model = new SRD.DiagramModel();
|
||||
const nextStates = lifecycle[this.props.currentStatus].proceedingStates;
|
||||
|
||||
|
||||
Object.keys(lifecycle).forEach((stateName) => {
|
||||
let color = "rgb(83, 92, 104)";
|
||||
if (stateName === this.props.currentStatus) {
|
||||
color = "rgb(192,255,0)";
|
||||
} else if (nextStates.includes(stateName)) {
|
||||
color = "rgb(0,192,255)";
|
||||
}
|
||||
const node = createNode(stateName, color);
|
||||
nodes.push(node);
|
||||
lifecycle[stateName].node = node;
|
||||
});
|
||||
|
||||
Object.keys(lifecycle).forEach((stateName) => {
|
||||
const state = lifecycle[stateName];
|
||||
//todo: remove checking property
|
||||
if (state.hasOwnProperty("proceedingStates")) {
|
||||
|
||||
state.proceedingStates.forEach((proceedingState) => {
|
||||
links.push(connectNodes(state.node, lifecycle[proceedingState].node));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
nodes.forEach((node) => {
|
||||
model.addNode(node);
|
||||
// node.addListener({
|
||||
// selectionChanged: (node, isSelected) => {
|
||||
// console.log(isSelected);
|
||||
// }
|
||||
// });
|
||||
});
|
||||
links.forEach((link) => {
|
||||
model.addLink(link);
|
||||
});
|
||||
|
||||
|
||||
let distributedModel = getDistributedModel(engine, model);
|
||||
engine.setDiagramModel(distributedModel);
|
||||
|
||||
return (
|
||||
<div style={{height: 500}}>
|
||||
<SRD.DiagramWidget diagramEngine={engine} maxNumberPointsPerLink={10} smartRouting={true}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getDistributedModel(engine, model) {
|
||||
const serialized = model.serializeDiagram();
|
||||
const distributedSerializedDiagram = distributeElements(serialized);
|
||||
|
||||
//deserialize the model
|
||||
let deSerializedModel = new SRD.DiagramModel();
|
||||
deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine);
|
||||
return deSerializedModel;
|
||||
}
|
||||
|
||||
function createNode(name, color) {
|
||||
const node = new SRD.DefaultNodeModel(name, color);
|
||||
node.addPort(new SRD.DefaultPortModel(true, inPortName, " "));
|
||||
node.addPort(new SRD.DefaultPortModel(false, outPortName, " "));
|
||||
return node;
|
||||
}
|
||||
|
||||
let count = 0;
|
||||
|
||||
function connectNodes(nodeFrom, nodeTo) {
|
||||
return nodeFrom.getPort(outPortName).link(nodeTo.getPort(inPortName));
|
||||
}
|
||||
|
||||
function f() {
|
||||
console.log(1);
|
||||
}
|
||||
|
||||
export default LifeCycleGraph;
|
||||
Loading…
Reference in new issue