#9 chore: Add events example

dist/helpers/nodesHelper.d.ts

@@ -1,2 +1,4 @@
 import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';
+import { MetaNode } from "../models/MetaNode";
 export declare function getNode(id: string, nodes: MetaNodeModel[]): MetaNodeModel | undefined;
+export declare function processNodes(metaNodes: MetaNode[]): MetaNodeModel[];

example/components/widgets/CustomNodeWidget.tsx

@@ -13,7 +13,6 @@ export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
     render() {
         const width = 250
         const height = 200
-        console.log(this.props.model.getOptions())
         // @ts-ignore
         const customNodeStyle = {
             zIndex: 999999999,

src/helpers/nodesHelper.ts

@@ -1,8 +1,19 @@
 import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';
+import {MetaNode} from "../models/MetaNode";
 
 export function getNode(
   id: string,
   nodes: MetaNodeModel[]
 ): MetaNodeModel | undefined {
   return nodes.find(n => n.getOptions().id === id);
 }
+
+export function processNodes(metaNodes: MetaNode[]) : MetaNodeModel[] {
+  const metaNodeModels = []
+  for(const mn of metaNodes){
+    const metaNodeModel = new MetaNodeModel(Object.fromEntries(mn.options.options))
+    metaNodeModel.registerListener({positionChanged: () => { console.log("positionChanged") }})
+    metaNodeModels.push(metaNodeModel)
+  }
+  return metaNodeModels
+}

src/index.tsx

@@ -10,6 +10,7 @@ import { MetaNodeModel } from './react-diagrams/MetaNodeModel';
 import { getLinkModel } from './helpers/linksHelper';
 import { makeStyles } from '@material-ui/core';
 import Sidebar from './components/Sidebar';
+import {processNodes} from "./helpers/nodesHelper";
 
 const useStyles = makeStyles(_ => ({
   container: {
@@ -56,9 +57,7 @@ const MetaDiagram = ({
   // set up the diagram model
 
   const model = new DiagramModel();
-  const nodes = metaNodes.map(
-    mn => new MetaNodeModel(Object.fromEntries(mn.options.options))
-  );
+  const nodes = processNodes(metaNodes)
   const links = metaLinks
     .map(ml => getLinkModel(ml, nodes))
     .filter(mlm => mlm !== undefined);