Open
Description
Does anyone know how to label the link with data that sits inside the node data (node data was attached upon creation of node)? When the node is created, I attach a JSON object to the node for hopes of being able to access later for purposes of posting an API call. When the node event for onDrop is called, I can see the data being logged in the event.dataTrasfer.getData() call, but on the linksUpdated event, I can't find said data?
I can't seem to dig through linksUpdated event to find the node data?
diagramEngine.getModel().registerListener({
linksUpdated: (event) => {console.log(event)}
});
Full BodyWidget Code:
import * as React from 'react';
import PropTypes from 'prop-types';
import * as _ from 'lodash';
import '../styles/App.css';
import createEngine, {
DiagramModel,
DefaultNodeModel,
DefaultLinkModel,
} from '@projectstorm/react-diagrams';
import { CanvasWidget } from '@projectstorm/react-canvas-core';
import styled from '@emotion/styled';
import TrayWidget from './TrayWidget';
export default function BodyWidget() {
const diagramEngine = createEngine();
const activeModel = new DiagramModel();
diagramEngine.setModel(activeModel);
const [engine, setEngine] = React.useState(diagramEngine);
const handleUpdateEngine = (engine) => {
setEngine(engine);
};
const style = {
Body: {
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
minHeight: '100%',
},
Header: {
display: 'flex',
background: 'rgb(30, 30, 30)',
flexGrow: 0,
flexShrink: 0,
color: 'white',
fontFamily: 'Helvetica, Arial, sans-serif',
padding: '10px',
alignItems: 'center',
},
Content: {
display: 'flex',
flexGrow: 1,
},
Layer: {
position: 'relative',
flexGrow: 1,
height: '100vh',
width: '100%',
background: 'rgb(30, 30, 30)',
},
};
return (
<div style={style.Body}>
<div style={style.Header}>
<div className="title">DnD demo</div>
</div>
<div style={style.Content}>
<TrayWidget applications={applicationDefinition} />
<div
style={style.Layer}
onDrop={(event) => {
const data = JSON.parse(
event.dataTransfer.getData('storm-diagram-node')
);
const nodesCount = _.keys(diagramEngine.getModel().getNodes())
.length;
let node = null;
console.log(data);
if (data.nodeType === 'in') {
node = new DefaultNodeModel(
data.name,
'rgb(192,255,0)'
);
node.addInPort('In');
} else {
node = new DefaultNodeModel(
data.name,
'rgb(0,192,255)'
);
node.addOutPort('Out');
}
const point = diagramEngine.getRelativeMousePoint(event);
node.setPosition(point);
diagramEngine.getModel().addNode(node);
diagramEngine.getModel().registerListener({
linksUpdated: (event2) => {console.log(event2)}
});
handleUpdateEngine(diagramEngine);
diagramEngine.repaintCanvas();
}}
onDragOver={(event) => {
console.log(event)
event.preventDefault();
}}
>
<CanvasWidget className="canvas" engine={engine} />
</div>
</div>
</div>
);
}