naive recursive rendering working

Author: ChristianEdwardPadilla

src/components/KonvaStage.jsx

@@ -69,20 +69,21 @@ class KonvaStage extends Component {
             .childrenArray.map((child, i) => (
               <Rectangle
                 key={`${i}${child.componentName}`}
-                draggable={false}
-                selectedShapeName={selectedShapeName}
                 components={components}
-                childId={child.childId}
-                focusChild={focusChild}
-                focusComponent={focusComponent}
                 componentId={focusComponent.id}
+                componentName={child.componentName}
+                focusChild={focusChild}
+                childId={child.childId}
                 x={child.position.x}
                 y={child.position.y}
+                scaleX={1}
+                scaleY={1}
                 width={child.position.width}
                 height={child.position.height}
                 title={child.componentName + child.childId}
                 color={child.color}
                 handleTransform={handleTransform}
+                draggable={true}
               />
             ))}
         </Layer>

src/components/Rectangle.jsx

@@ -6,8 +6,8 @@ import TransformerComponent from './TransformerComponent.jsx';
 // import PropTypes from 'prop-types';
 
 class Rectangle extends Component {
-  handleResize(componentId, childId, target, components) {
-    const focChild = components
+  handleResize(componentId, childId, target) {
+    const focChild = this.props.components
       .find(comp => comp.id === componentId)
       .childrenArray.find(child => child.childId === childId);
 
@@ -31,42 +31,41 @@ class Rectangle extends Component {
     this.props.handleTransform(componentId, childId, transformation);
   }
 
-  findDescendants(component, components, descendants = []) {
-    // fix this stuff Adam
-    if (!component) return;
-    component.childrenArray.forEach((child) => {
-      descendants.push(child);
-      const childComponent = components.find(comp => comp.title === child.componentName);
-      this.findDescendants(childComponent, components, descendants);
-    });
-    return descendants;
+  getComponentOfThisChild() {
+    console.log('title of this child: ', componentName);
+    console.log(
+      'component of this child: ',
+      this.props.components.find(comp => comp.title === componentName),
+    );
   }
 
   render() {
     const {
       color,
       x,
       y,
+      scaleX,
+      scaleY,
       childId,
       componentId,
-      draggable,
+      componentName,
       width,
       height,
       title,
       focusChild,
-      focusComponent,
       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={true}
+        draggable={draggable}
         x={x}
         y={y}
-        scaleX={1}
-        scaleY={1}
+        scaleX={scaleX}
+        scaleY={scaleY}
         width={width}
         height={height}
         onDragEnd={event => this.handleDrag(componentId, childId, event.target)}
@@ -87,17 +86,37 @@ class Rectangle extends Component {
           color={color}
           // fill={color}
           // opacity={0.8}
-          onTransformEnd={event => this.handleResize(componentId, childId, event.target, components)
-          }
+          onTransformEnd={event => this.handleResize(componentId, childId, event.target)}
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
         />
         <Label>
           <Text text={title} fill={'white'} />
         </Label>
-        {/* {this.findDescendants().map} */}
-        <Rect
+        {components
+          .find(comp => comp.title === componentName)
+          .childrenArray.map((grandchild, i) => (
+            <Rectangle
+              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}
+              // title={child.componentName + child.childId}
+              color={color}
+              handleTransform={() => {}}
+              draggable={false}
+            />
+          ))}
+        {/* <Rect
           // replace with grandchildren rectangles
           scaleX={0.2}
           scaleY={0.2}
@@ -107,9 +126,9 @@ class Rectangle extends Component {
           color={color}
           strokeWidth={4}
           draggable={false}
-        />
-        {focusChild.childId === childId ? (
-          <TransformerComponent focusComponent={focusComponent} focusChild={focusChild} />
+        /> */}
+        {focusChild.childId === childId && draggable ? (
+          <TransformerComponent focusChild={focusChild} />
         ) : (
           <Label />
         )}