#36 workin on the child set position event propagation

MetaCell · Oct 28, 2022 · aacde89 · aacde89
1 parent 256d0c8
commit aacde89
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 31 deletions.
diff --git a/src/components/Main.js b/src/components/Main.js
@@ -51,12 +51,12 @@ class Main extends React.Component {
     const node = event.entity;
     switch(event.function) {
       case CallbackTypes.POSITION_CHANGED: {
-        this.metaGraph.updateGraph(node, this.mousePos.x, this.mousePos.y);
-        this.interpreter.updateModel(node);
-        return true;
-      }
-      case CallbackTypes.CHILD_POSITION_CHANGED: {
-        this.metaGraph.handleNodePositionChanged(node);
+        this.metaGraph.updateGraph(
+          node,
+          this.mousePos.x,
+          this.mousePos.y,
+          event?.extraCondition === CallbackTypes.CHILD_POSITION_CHANGED
+        );
         this.interpreter.updateModel(node);
         return true;
       }

diff --git a/src/components/graph/MetaGraph.ts b/src/components/graph/MetaGraph.ts
@@ -1,5 +1,5 @@
 // import {MetaNodeModel} from "../react-diagrams/MetaNodeModel";
-import {MetaLink, MetaNodeModel, MetaLinkModel} from "@metacell/meta-diagram"
+import {MetaLink, MetaNodeModel, MetaLinkModel, CallbackTypes} from "@metacell/meta-diagram"
 import { PNLClasses } from "../../constants";
 
 class Graph {
@@ -183,12 +183,15 @@ export class MetaGraph {
         return this.findNodeGraph(newPath);
     }
 
-    updateGraph(metaNodeModel: MetaNodeModel, cursorX: number, cursorY: number) {
+    updateGraph(metaNodeModel: MetaNodeModel, cursorX: number, cursorY: number, isChild?: boolean) {
+        // update the graph for right parent children relationship
         this.updateNodeContainerBoundingBox(metaNodeModel);
-        let parent: MetaNodeModel|undefined = this.rootContainsNode(metaNodeModel, cursorX, cursorY);
-        let newPath = this.findNewPath(metaNodeModel, parent, cursorX, cursorY);
-        if (metaNodeModel.getGraphPath().join().toString() !== newPath.join().toString()) {
-            this.updateNodeInGraph(metaNodeModel, newPath);
+        if (!isChild) {
+            let parent: MetaNodeModel|undefined = this.rootContainsNode(metaNodeModel, cursorX, cursorY);
+            let newPath = this.findNewPath(metaNodeModel, parent, cursorX, cursorY);
+            if (metaNodeModel.getGraphPath().join().toString() !== newPath.join().toString()) {
+                this.updateNodeInGraph(metaNodeModel, newPath);
+            }
         }
         this.handleNodePositionChanged(metaNodeModel);
     }
@@ -198,8 +201,6 @@ export class MetaGraph {
         //  update node graph path,
         //  bounding boxes of parents
 
-        // update the graph for right parent children relationship
-        this.updateNodeContainerBoundingBox(metaNodeModel);
         // Update children position (children should move the same delta as node)
         this.updateChildrenPosition(metaNodeModel)
         //  Update local position / relative position to the parent
@@ -265,7 +266,7 @@ export class MetaGraph {
              */
             // @ts-ignore
             const localPosition = n.getLocalPosition()
-            n.setNodePosition(metaNodeModel.getX() + localPosition.x, metaNodeModel.getY() + localPosition.y)
+            n.setChildPosition(metaNodeModel.getX() + localPosition.x, metaNodeModel.getY() + localPosition.y)
 
         })
     }

diff --git a/src/components/views/compositions/Composition.js b/src/components/views/compositions/Composition.js
@@ -85,9 +85,22 @@ class Composition extends React.Component {
       height: props.model.options.height,
     }
     this.changeVisibility = this.changeVisibility.bind(this);
+  }
+
+  changeVisibility() {
+    this.setState({expanded: !this.state.expanded});
+  }
 
-    this.rndElement = (
-      <Rnd
+  render() {
+    const { expanded } = this.state;
+    const { classes } = this.props;
+
+    return (
+      <Box
+        style={{width: this.state.width + 'px', height: this.state.height + 'px'}}
+        className={`${classes.root} ${expanded ? classes.selected : ''}`}
+      >
+        <Rnd
           size={{ width: this.state.width, height: this.state.height }}
           position={{ x: this.props.model.options.x, y: this.props.model.options.y }}
           onResizeStop={(e, direction, ref, delta, position) => {
@@ -101,20 +114,6 @@ class Composition extends React.Component {
         >
           <Chip icon={<img src={MORE_OPTION} alt="" />} label="New Comp" color="secondary" />
         </Rnd>
-    );
-  }
-
-  changeVisibility() {
-    this.setState({expanded: !this.state.expanded});
-  }
-
-  render() {
-    const { expanded } = this.state;
-    const { classes } = this.props;
-
-    return (
-      <Box className={`${classes.root} ${expanded ? classes.selected : ''}`}>
-        {this.rndElement}
       </Box>
     );
   }