#9 chore: Update local position option on node movement

MetaCell · Jul 25, 2022 · 28f0f30 · 28f0f30
1 parent c5cd9ff
commit 28f0f30
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 38 deletions.
diff --git a/dist/helpers/nodesHelper.d.ts b/dist/helpers/nodesHelper.d.ts
@@ -2,8 +2,10 @@ import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';
 import { MetaNode } from "../models/MetaNode";
 import { BaseEntityEvent } from '@projectstorm/react-canvas-core';
 import { NodeModel, NodeModelGenerics } from '@projectstorm/react-diagrams';
+import { Position } from "../models/Position";
 export declare function getNode(id: string, nodes: MetaNodeModel[]): MetaNodeModel | undefined;
 export declare function processNodes(metaNodes: MetaNode[], callback: {
     (event: any): void;
     (arg0: BaseEntityEvent<NodeModel<NodeModelGenerics>>): void;
 }): MetaNodeModel[];
+export declare function getLocalPosition(nodes: MetaNodeModel[], metaNodeModel: MetaNodeModel): Position;
diff --git a/dist/meta-diagram.cjs.development.js b/dist/meta-diagram.cjs.development.js
diff --git a/dist/meta-diagram.cjs.development.js.map b/dist/meta-diagram.cjs.development.js.map
diff --git a/dist/meta-diagram.cjs.production.min.js b/dist/meta-diagram.cjs.production.min.js
diff --git a/dist/meta-diagram.cjs.production.min.js.map b/dist/meta-diagram.cjs.production.min.js.map
diff --git a/dist/meta-diagram.esm.js b/dist/meta-diagram.esm.js
diff --git a/dist/meta-diagram.esm.js.map b/dist/meta-diagram.esm.js.map
diff --git a/dist/models/Position.d.ts b/dist/models/Position.d.ts
@@ -3,4 +3,5 @@ export declare class Position {
     y: number;
     constructor(x: number, y: number);
     add(otherPosition: Position): Position;
+    sub(otherPosition: Position): Position;
 }
diff --git a/src/helpers/nodesHelper.ts b/src/helpers/nodesHelper.ts
@@ -2,6 +2,7 @@ import { MetaNodeModel } from '../react-diagrams/MetaNodeModel';
 import {MetaNode} from "../models/MetaNode";
 import { BaseEntityEvent } from '@projectstorm/react-canvas-core';
 import { NodeModel, NodeModelGenerics } from '@projectstorm/react-diagrams';
+import {Position} from "../models/Position";
 
 export function getNode(
     id: string,
@@ -21,4 +22,14 @@ export function processNodes(metaNodes: MetaNode[], callback: { (event: any): vo
     metaNodeModels.push(metaNodeModel)
   }
   return metaNodeModels
-}
+}
+
+export function getLocalPosition(nodes: MetaNodeModel[], metaNodeModel: MetaNodeModel) : Position {
+  const worldPosition = new Position(metaNodeModel.getX(), metaNodeModel.getY())
+  // @ts-ignore
+  const parentId = metaNodeModel.options['parentId']
+  const parent = getNode(parentId, nodes)
+  return parent ? worldPosition.sub(getLocalPosition(nodes, parent)) : worldPosition
+}
+
+
diff --git a/src/index.tsx b/src/index.tsx
@@ -10,7 +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";
+import {getLocalPosition, processNodes} from "./helpers/nodesHelper";
 
 const useStyles = makeStyles(_ => ({
   container: {
@@ -58,10 +58,12 @@ const MetaDiagram = ({
   const repaintCanvas = (event: any) => {
     let model = engine.getModel();
     const node = event.entity
+    const nodes = model.getNodes()
     // @ts-ignore
-    const nodes = model.getNodes().filter(n => n.options['parentId'] == node.options['id']);
+    const children = nodes.filter(n => n.options['parentId'] == node.options['id']);
     // @ts-ignore
-    nodes.forEach(n => n.setPosition(node.getX() + n.options['position'].x, node.getY() + n.options['position'].y))
+    children.forEach(n => n.setPosition(node.getX() + n.options['position'].x, node.getY() + n.options['position'].y))
+    node.options['position'] = getLocalPosition(nodes, node)
     engine.repaintCanvas();
   }
 

diff --git a/src/models/Position.ts b/src/models/Position.ts
@@ -10,4 +10,8 @@ export class Position {
   add(otherPosition: Position) : Position {
     return new Position(this.x+ otherPosition.x, this.y + otherPosition.y)
   }
+
+  sub(otherPosition: Position) : Position {
+    return new Position(this.x - otherPosition.x, this.y - otherPosition.y)
+  }
 }