Open piincher opened 1 year ago
I'm trying to add a new some additional functionality to my react app, I'm using storm-react-diagrams , I would like to console.log every change on the canvas like drag component connect ,disconnect.... How can I can achieve that ? here is my code
import { useState } from "react"; import { DefaultNodeModel, DiagramEngine, DiagramModel, DiagramWidget } from "storm-react-diagrams"; export const BasicConnection = () => { const [nodes, setNodes] = useState([ { name: "Node 1", color: "rgb(0, 192, 255", port: "Out" }, { name: "Node 2", color: "rgb(192,255,0)", port: "In" }, ]); const [links, setLinks] = useState<any>([{ start: "Node 1", end: "Node 2" }]); const engine = new DiagramEngine(); engine.installDefaultFactories(); const model = new DiagramModel(); const node1 = new DefaultNodeModel("Source", "rgb(0,192,255)"); const createNodes = nodes.map(({ name, color }) => { return new DefaultNodeModel(name, color); }); let port1 = node1.addOutPort(" "); node1.setPosition(100, 100); const node2 = new DefaultNodeModel("Destination", "rgb(192,255,0)"); let port2 = node2.addInPort("Model"); node2.setPosition(400, 100); let link1 = port1.link(port2); model.addAll(node1, node2, link1); engine.setDiagramModel(model); return ( <> <DiagramWidget className='srd-demo-canvas' diagramEngine={engine} />; </> ); };
Have a look at the different events this project makes available for you to hook into.
Maybe this can help you on your way. https://github.com/projectstorm/react-diagrams/issues/164
I'm trying to add a new some additional functionality to my react app, I'm using storm-react-diagrams , I would like to console.log every change on the canvas like drag component connect ,disconnect.... How can I can achieve that ? here is my code