colors of recursive children are correct now

Author: ChristianEdwardPadilla

src/components/GrandchildRectangle.jsx

@@ -3,6 +3,14 @@ import { Rect, Group } from 'react-konva';
 // import PropTypes from 'prop-types';
 
 class GrandchildRectangle extends Component {
+  getComponentColor(componentId) {
+    console.log('siodfbsldfk', componentId);
+    const color = this.props.components.find(comp => comp.id == componentId).color;
+    console.log(color);
+
+    return color;
+  }
+
   render() {
     const {
       color,
@@ -12,12 +20,12 @@ class GrandchildRectangle extends Component {
       scaleY,
       childId,
       componentId,
-      componentName,
+      childComponentName,
+      childComponentId,
       width,
       height,
       focusChild,
       components,
-      draggable,
     } = this.props;
 
     // the Group is responsible for dragging of all children
@@ -44,21 +52,22 @@ class GrandchildRectangle extends Component {
           width={width}
           height={height}
           stroke={color}
-          color={color}
+          color={this.getComponentColor(childComponentId)}
           // fill={color}
           // opacity={0.8}
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
         />
         {components
-          .find(comp => comp.title === componentName)
+          .find(comp => comp.title === childComponentName)
           .childrenArray.map((grandchild, i) => (
             <GrandchildRectangle
               key={i}
               components={components}
               componentId={componentId}
-              componentName={grandchild.componentName}
+              childComponentName={grandchild.componentName}
+              childComponentId={grandchild.childComponentId}
               focusChild={focusChild}
               // childId={grandchild.childId}
               x={grandchild.position.x * (width / (window.innerWidth / 2))}

src/components/KonvaStage.jsx

@@ -59,6 +59,7 @@ class KonvaStage extends Component {
     const rectChildId = e.target.attrs.childId;
     console.log('e.target : ', rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
+    //  put individual component's focus child logic here
   };
 
   render() {
@@ -96,13 +97,14 @@ class KonvaStage extends Component {
         >
           <Layer>
             {components
-              .find(comp => comp.title === focusComponent.title)
+              .find(comp => comp.id === focusComponent.id)
               .childrenArray.map((child, i) => (
                 <Rectangle
                   key={`${i}${child.componentName}`}
                   components={components}
                   componentId={focusComponent.id}
-                  componentName={child.componentName}
+                  childComponentName={child.componentName}
+                  childComponentId={child.childComponentId}
                   focusChild={focusChild}
                   childId={child.childId}
                   x={child.position.x}

src/components/Rectangle.jsx

@@ -7,6 +7,14 @@ import GrandchildRectangle from './GrandchildRectangle.jsx';
 // import PropTypes from 'prop-types';
 
 class Rectangle extends Component {
+  getComponentColor(componentId) {
+    console.log('siodfbsldfk', componentId);
+    const color = this.props.components.find(comp => comp.id == componentId).color;
+    console.log(color);
+
+    return color;
+  }
+
   handleResize(componentId, childId, target) {
     const focChild = this.props.components
       .find(comp => comp.id === componentId)
@@ -32,14 +40,6 @@ class Rectangle extends Component {
     this.props.handleTransform(componentId, childId, transformation);
   }
 
-  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,
@@ -49,7 +49,8 @@ class Rectangle extends Component {
       scaleY,
       childId,
       componentId,
-      componentName,
+      childComponentName,
+      childComponentId,
       width,
       height,
       title,
@@ -84,7 +85,7 @@ class Rectangle extends Component {
           width={width}
           height={height}
           stroke={color}
-          color={color}
+          color={this.getComponentColor(childComponentId)}
           // fill={color}
           // opacity={0.8}
           onTransformEnd={event => this.handleResize(componentId, childId, event.target)}
@@ -96,24 +97,24 @@ class Rectangle extends Component {
           <Text text={title} fill={'white'} />
         </Label>
         {components
-          .find(comp => comp.title === componentName)
+          .find(comp => comp.title === childComponentName)
           .childrenArray.map((grandchild, i) => (
             <GrandchildRectangle
               key={i}
               components={components}
               componentId={componentId}
-              componentName={grandchild.componentName}
+              childComponentName={grandchild.componentName}
+              childComponentId={grandchild.childComponentId}
               focusChild={focusChild}
               // childId={childId}
               x={grandchild.position.x * (width / (window.innerWidth / 2))}
-              y={grandchild.position.y * (height / (window.innerHeight))}
+              y={grandchild.position.y * (height / window.innerHeight)}
               scaleX={1}
               scaleY={1}
               width={grandchild.position.width * (width / (window.innerWidth / 2))}
-              height={grandchild.position.height * (height / (window.innerHeight))}
+              height={grandchild.position.height * (height / window.innerHeight)}
               // title={child.componentName + child.childId}
-              color={color}
-              draggable={false}
+              color={grandchild.color}
             />
           ))}
         {focusChild.childId === childId && draggable ? (

src/utils/componentReducer.util.js

@@ -20,10 +20,9 @@ const initialComponentState = {
     width: 50,
     height: 50,
   },
-
   childrenArray: [],
   nextChildId: 1,
-  focusChild: null,
+  focusChildId: 0,
 };
 
 export const addComponent = (state, { title }) => {