recursive rendering changes, and new children are offset

Author: ChristianEdwardPadilla

src/components/GrandchildRectangle.jsx

@@ -1,10 +1,77 @@
-import React, { Component, Fragment } from 'react';
-import { Rect } from 'react-konva';
+import React, { Component } from 'react';
+import { Rect, Group } from 'react-konva';
 // import PropTypes from 'prop-types';
 
 class GrandchildRectangle extends Component {
   render() {
-    return <Rect />;
+    const {
+      color,
+      x,
+      y,
+      scaleX,
+      scaleY,
+      childId,
+      componentId,
+      componentName,
+      width,
+      height,
+      focusChild,
+      components,
+      draggable,
+    } = this.props;
+
+    // the Group is responsible for dragging of all children
+    // the Rect emits changes to child width and height with help from Transformer
+    return (
+      <Group
+        draggable={false}
+        x={x}
+        y={y}
+        scaleX={scaleX}
+        scaleY={scaleY}
+        width={width}
+        height={height}
+      >
+        <Rect
+          name={`${childId}`}
+          x={0}
+          y={0}
+          // absolutePosition={{ x, y }}
+          // childId={childId}
+          componentId={componentId}
+          scaleX={1}
+          scaleY={1}
+          width={width}
+          height={height}
+          stroke={color}
+          color={color}
+          // fill={color}
+          // opacity={0.8}
+          strokeWidth={4}
+          strokeScaleEnabled={false}
+          draggable={false}
+        />
+        {components
+          .find(comp => comp.title === componentName)
+          .childrenArray.map((grandchild, i) => (
+            <GrandchildRectangle
+              key={i}
+              components={components}
+              componentId={componentId}
+              componentName={grandchild.componentName}
+              focusChild={focusChild}
+              // childId={grandchild.childId}
+              x={grandchild.position.x}
+              y={grandchild.position.y}
+              scaleX={0.8}
+              scaleY={0.8}
+              width={grandchild.position.width}
+              height={grandchild.position.height}
+              color={color}
+            />
+          ))}
+      </Group>
+    );
   }
 }
 

src/components/KonvaStage.jsx

@@ -22,6 +22,7 @@ class KonvaStage extends Component {
     // // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
       // add functionality for allowing no focusChild
+      console.log(e.target.getStage(), this.main, this.group);
       return;
     }
     // // clicked on transformer - do nothing
@@ -56,9 +57,9 @@ class KonvaStage extends Component {
 
     return (
       <Stage
-        ref={(node) => {
-          this.stage = node;
-        }}
+        // ref={(node) => {
+        //   this.stage = node;
+        // }}
         onMouseDown={this.handleStageMouseDown}
         width={window.innerWidth}
         height={window.innerHeight}

src/components/Rectangle.jsx

@@ -3,6 +3,7 @@ import {
   Rect, Group, Label, Text,
 } from 'react-konva';
 import TransformerComponent from './TransformerComponent.jsx';
+import GrandchildRectangle from './GrandchildRectangle.jsx';
 // import PropTypes from 'prop-types';
 
 class Rectangle extends Component {
@@ -97,36 +98,24 @@ class Rectangle extends Component {
         {components
           .find(comp => comp.title === componentName)
           .childrenArray.map((grandchild, i) => (
-            <Rectangle
+            <GrandchildRectangle
               key={i}
               components={components}
               componentId={componentId}
               componentName={grandchild.componentName}
               focusChild={focusChild}
-              childId={grandchild.childId}
-              x={grandchild.position.x}
-              y={grandchild.position.y}
+              // childId={childId}
+              x={grandchild.position.x * 0.8 + 10}
+              y={grandchild.position.y * 0.8 + 10}
               scaleX={0.8}
               scaleY={0.8}
               width={grandchild.position.width}
               height={grandchild.position.height}
               // title={child.componentName + child.childId}
               color={color}
-              handleTransform={() => {}}
               draggable={false}
             />
           ))}
-        {/* <Rect
-          // replace with grandchildren rectangles
-          scaleX={0.2}
-          scaleY={0.2}
-          width={width}
-          height={height}
-          stroke={color}
-          color={color}
-          strokeWidth={4}
-          draggable={false}
-        /> */}
         {focusChild.childId === childId && draggable ? (
           <TransformerComponent focusChild={focusChild} />
         ) : (