控制台记录画布上的每个更改事件（线拖动，组件连接，断开连接）

Question

我正在尝试向我的反应应用程序添加一些新的附加功能，我正在使用风暴反应图，我想控制台记录 canvas 上的每个更改，例如拖动组件连接，断开连接......如何我能做到吗？ 这是我的代码

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

请问这里有人可以帮忙吗？ 谢谢