#9 chore: Add group movement

dist/react-diagrams/MetaNodeModel.d.ts

@@ -1,4 +1,7 @@
 import { NodeModel } from '@projectstorm/react-diagrams';
+import { Position } from "../models/Position";
 export declare class MetaNodeModel extends NodeModel {
     constructor(options?: {});
+    getLocalPosition(nodes: MetaNodeModel[]): Position;
+    updateLocalPosition(nodes: MetaNodeModel[]): void;
 }

example/index.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles(_ => ({
 const App = () => {
     const classes = useStyles();
 
-    const grandparent = new MetaNode('group2', 'grandparent', 'default', new Position(0, 0),
+    const grandparent = new MetaNode('group2', 'grandparent', 'default', new Position(130, 105),
         null, new Map(Object.entries({color: 'rgb(0,255,0)'})))
 
     const parent = new MetaNode('group', 'parent', 'default', new Position(130, 105),
@@ -43,7 +43,7 @@ const App = () => {
 
     return (
         <div className={classes.main}>
-            <MetaDiagram metaNodes={[node1, node2, parent, grandparent]} metaLinks={[link3]} componentsMap={componentsMap}
+            <MetaDiagram metaNodes={[node1, node2, parent, grandparent]} metaLinks={[]} componentsMap={componentsMap}
                 metaTheme={{
                     customThemeVariables: {},
                     canvasClassName: classes.canvasBG,

src/helpers/engineHelper.ts

@@ -0,0 +1,16 @@
+import {MetaNodeModel} from "../react-diagrams/MetaNodeModel";
+
+export function updateChildrenPosition(nodes: MetaNodeModel[], parent: MetaNodeModel): void {
+    // @ts-ignore
+    const children = nodes.filter(n => n.options['parentId'] == parent.options['id']);
+    children.forEach(n => {
+        // @ts-ignore
+        n.setPosition(parent.getX() + n.options['position'].x, parent.getY() + n.options['position'].y)
+        // TODO: Fix nested position update
+        // updateChildrenPosition(nodes, n)
+    })
+}
+
+export function updateNodeLocalPosition(nodes: MetaNodeModel[], node: MetaNodeModel): void {
+    node.updateLocalPosition(nodes)
+}

src/helpers/nodesHelper.ts

@@ -10,15 +10,14 @@ export function getNode(
   return nodes.find(n => n.getOptions().id === id);
 }
 
-// @ts-ignore
 export function processNodes(metaNodes: MetaNode[], callback: { (event: any): void; (arg0: BaseEntityEvent<NodeModel<NodeModelGenerics>>): void; }) : MetaNodeModel[] {
   const metaNodeModels = []
   for(const mn of metaNodes){
     const metaNodeModel = mn.toModel()
     const position = mn.getWorldPosition()
     metaNodeModel.setPosition(position.x, position.y)
     // @ts-ignore
-    //metaNodeModel.registerListener({positionChanged: (event => callback(event))})
+    metaNodeModel.registerListener({positionChanged: (event => callback(event))})
     metaNodeModels.push(metaNodeModel)
   }
   return metaNodeModels

src/index.tsx

@@ -15,6 +15,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import theme from './theme';
 import { Box } from '@mui/material';
 import {processNodes} from "./helpers/nodesHelper";
+import {updateChildrenPosition} from "./helpers/engineHelper";
 
 const useStyles = makeStyles(_ => ({
   container: {
@@ -62,10 +63,22 @@ const MetaDiagram = ({
     // @ts-ignore
     .registerFactory(new MetaLinkFactory(componentsMap.links));
 
+  // @ts-ignore
+  const repaintCanvas = (event: any) => {
+    let model = engine.getModel();
+    const node = event.entity
+    const nodes = model.getNodes()
+    // @ts-ignore
+    updateChildrenPosition(nodes, node)
+    // @ts-ignore
+    // updateNodeLocalPosition(nodes, node)
+    engine.repaintCanvas();
+  }
+
   // set up the diagram model
 
   const model = new DiagramModel();
-  const nodes = processNodes(metaNodes, () => console.log("repaint canvas"))
+  const nodes = processNodes(metaNodes, repaintCanvas)
 
   const links = metaLinks
     .map(ml => getLinkModel(ml, nodes))