fixed grandchildren HTML issues

Author: ChristianEdwardPadilla

src/components/GrandchildRectangle.jsx

@@ -20,6 +20,7 @@ class GrandchildRectangle extends Component {
       scaleY,
       childId,
       componentId,
+      childType,
       childComponentName,
       childComponentId,
       width,
@@ -46,41 +47,46 @@ class GrandchildRectangle extends Component {
           y={0}
           childId={childId}
           componentId={componentId}
+          childType={childType}
           scaleX={1}
           scaleY={1}
           width={width}
           height={height}
-          stroke={this.getComponentColor(childComponentId)}
+          stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
           // fill={color}
           // opacity={0.8}
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
         />
-        {components
-          .find(comp => comp.title === childComponentName)
-          .childrenArray.filter(child => child.childId !== '-1')
-          .map((grandchild, i) => (
-            <GrandchildRectangle
-              key={i}
-              components={components}
-              componentId={componentId}
-              childComponentName={grandchild.componentName}
-              childComponentId={grandchild.childComponentId}
-              focusChild={focusChild}
-              childId={childId}
-              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)
-              }
-            />
-          ))}
+        {childType === 'COMP'
+          && components
+            .find(comp => comp.title === childComponentName)
+            .childrenArray.filter(child => child.childId !== '-1')
+            .map((grandchild, i) => (
+              <GrandchildRectangle
+                key={i}
+                components={components}
+                componentId={componentId}
+                childType={grandchild.childType}
+                childComponentName={grandchild.componentName}
+                childComponentId={grandchild.childComponentId}
+                focusChild={focusChild}
+                childId={childId}
+                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)
+                }
+              />
+            ))}
       </Group>
     );
   }

src/components/Rectangle.jsx

@@ -126,6 +126,7 @@ class Rectangle extends Component {
                 components={components}
                 componentId={componentId}
                 directParentName={childComponentName}
+                childType={grandchild.childType}
                 childComponentName={grandchild.componentName}
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}