canvas ratios first working draft

Author: ChristianEdwardPadilla

src/components/KonvaStage.jsx

@@ -109,7 +109,7 @@ class KonvaStage extends Component {
               ))
               .sort(
                 (rectA, rectB) => rectA.props.width * rectA.props.height < rectB.props.width * rectB.props.height,
-              )
+              ) // shouldnt this be subtraction instead of < ? see MDN
             // reasoning for the sort:
             // Konva determines zIndex (which rect is clicked on if rects overlap) based on rendering order
             // as long as the smallest components are rendered last they will always be accessible over the big boys

src/components/Rectangle.jsx

@@ -11,40 +11,24 @@ class Rectangle extends Component {
     return color;
   }
 
-  getGrandchildRatio(grandchild) {
-    // const childInstance = pseudoChildComp.childrenArray.find()
-    const pseudoParent = this.props.components.find(
-      comp => comp.title === this.props.childComponentName,
-    );
-    const childInstance = pseudoParent.childrenArray.find(
-      child => child.childId === grandchild.childId,
-    );
-    // console.log(
-    //   this.props.childId,
-    //   this.props.componentId,
-    //   this.props.childComponentName,
-    //   this.props.childComponentId,
-    // );
-    console.log(grandchild, pseudoParent, childInstance);
-    // console.log(childInstance.position.width / pseudoParent.position.width);
-    // console.log(childInstance.position.height / pseudoParent.position.height);
+  getPseudoChild(grandchild) {
+    // example: Board with direct child Row (where Row has a child Box)
+    // grandchild is a reference to the Box child of Row
+    // pseudoParent is a reference to Row itself (whose size is determined by its pseudoChild)
+    // directParent refers to the instance of Row
+    return this.props.components.find(comp => comp.id === this.props.childComponentId);
 
-    console.log(childInstance.position.x, pseudoParent.position.x);
-    console.log(childInstance.position.y, pseudoParent.position.y);
-    const ratioObj = {
-      // x:
-      //   grandchild.position.x
-      //   - (pseudoParent.position.x * childInstance.position.width) / pseudoParent.position.width,
-      // y:
-      //   grandchild.position.y
-      //   - (pseudoParent.position.y * childInstance.position.height) / pseudoParent.position.height,
-      x: childInstance.position.x - pseudoParent.position.x,
-      y: childInstance.position.y - pseudoParent.position.y,
-      width: childInstance.position.width / pseudoParent.position.width,
-      height: childInstance.position.height / pseudoParent.position.height,
-    };
-    // console.log('ratioObj', ratioObj);
-    return ratioObj;
+    // const ratioObj = {
+    //   x:
+    //     ((grandchild.position.x - pseudoParent.position.x) * directParent.position.width)
+    //     / pseudoParent.position.width,
+    //   y:
+    //     ((grandchild.position.y - pseudoParent.position.y) * directParent.position.height)
+    //     / pseudoParent.position.height,
+    //   width: grandchild.position.width / pseudoParent.position.width,
+    //   height: grandchild.position.height / pseudoParent.position.height,
+    // };
+    // return ratioObj;
   }
 
   handleResize(componentId, childId, target) {
@@ -104,6 +88,7 @@ class Rectangle extends Component {
         onDragEnd={event => this.handleDrag(componentId, childId, event.target)}
       >
         <Rect
+          // a Konva Rect is generated for each child of the focusComponent (including the pseudochild, representing the focusComponent itself)
           name={`${childId}`}
           className={'childRect'}
           x={0}
@@ -137,44 +122,51 @@ class Rectangle extends Component {
             y={childId === '-1' ? -15 : 5}
           />
         </Label>
-        {focusChild
-          && focusChild.childId === childId
-          && draggable && (
-            <TransformerComponent
-              focusChild={focusChild}
-              rectClass={'childRect'}
-              anchorSize={8}
-              color={'grey'}
-            />
-        )}
-        {childId !== '-1'
+        {// for all children other than the pseudoChild, find their component's children array and recursively render the children found there
+        childId !== '-1'
           && components
             .find(comp => comp.title === childComponentName)
             .childrenArray.filter(child => child.childId !== '-1')
+            // .sort((a, b) => parseInt(a.childId) - parseInt(b.childId)) // using i within map below, sorting by childId might be necessary
             .map((grandchild, i) => (
               <GrandchildRectangle
                 key={i}
                 components={components}
                 componentId={componentId}
+                directParentName={childComponentName}
                 childComponentName={grandchild.componentName}
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
                 childId={childId} // scary addition, grandchildren rects default to childId of "direct" children
-                // x={grandchild.position.x * (width / window.innerWidth)}
-                // y={grandchild.position.y * (height / window.innerHeight)}
+                // x={this.getPseudoChild().position.x}
+                // y={}
+                width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
+                height={
+                  grandchild.position.height * (height / this.getPseudoChild().position.height)
+                }
+                x={
+                  (grandchild.position.x - this.getPseudoChild().position.x)
+                  * (width / this.getPseudoChild().position.width)
+                }
+                y={
+                  (grandchild.position.y - this.getPseudoChild().position.y)
+                  * (height / this.getPseudoChild().position.height)
+                }
                 // width={grandchild.position.width * (width / window.innerWidth)}
                 // height={grandchild.position.height * (height / window.innerHeight)}
-                x={this.getGrandchildRatio(grandchild).x}
-                y={this.getGrandchildRatio(grandchild).y}
-                width={width * this.getGrandchildRatio(grandchild).width}
-                height={height * this.getGrandchildRatio(grandchild).height}
-                // x={grandchild.position.x}
-                // y={grandchild.position.y}
-                // width={grandchild.position.width}
-                // height={grandchild.position.height}
                 // title={child.componentName + child.childId}
               />
             ))}
+        {focusChild
+          && focusChild.childId === childId
+          && draggable && (
+            <TransformerComponent
+              focusChild={focusChild}
+              rectClass={'childRect'}
+              anchorSize={8}
+              color={'grey'}
+            />
+        )}
       </Group>
     );
   }