Question : console.log every change event on canvas(line drag, component connect, disconnect)

[piincher]

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

[thmsbkkr]

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