Big fix. Annotations needed some of the keys without random numbers, restricted that back to separators only so Annotations didn't break. Fixed a major bug where components broke on trying to nest inside themselves. Wrote a new function to validate nesting at the component level. Cleaned up DirectChild Render as it was duplicating the renderChildren helperfunction. This also cleaned up the annotations for components when they are dragged and dropped.

MadinventorZero · jonocr · buddhajjigae · MadinventorZero · commit 709ee99616c8 · 2021-05-11T04:01:17.000-07:00
Co-authored-by: jonocr &lt;jonocr@users.noreply.github.com&gt;
Co-authored-by: buddhajjigae &lt;buddhajjigae@users.noreply.github.com&gt;
Co-authored-by: xkevinpark &lt;xkevinpark@users.noreply.github.com&gt;
Co-authored-by: williamdyoon &lt;williamdyoon@users.noreply.github.com&gt;
diff --git a/app/src/components/main/DirectChildComponent.tsx b/app/src/components/main/DirectChildComponent.tsx
@@ -8,8 +8,8 @@ import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
-import IndirectChild from './IndirectChild';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
+import renderChildren from '../../helperFunctions/renderChildren'
 
 function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
@@ -64,119 +64,13 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
     interactiveStyle
   );
 
-  // helper function to render children of direct child components
-  // all children of direct child components will be indirect components
-  // indirect child components are not interactive with the exception of route links which, when clicked, will change the canvas focus
-  const renderIndirectChildren = (
-    referencedComponent: Component | ChildElement
-  ) => {
-    // iterate through all children of referenced
-    return referencedComponent.children.map(child => {
-      if (child.type === 'Component') {
-        // If indirect child of referenced component is a component, find the top level component referenced by the child
-        const childReferencedComponent: Component = state.components.find(
-          (elem: Component) => elem.id === child.typeId
-        );
-        // combine the styles of the child with the reference component but give higher priority to the child's styles
-
-        const combinedStyle = combineStyles(
-          childReferencedComponent.style,
-          child.style
-        );
-
-        // render an IndirectChild component, and also call renderIndirectChildren recursively to render any of the child Component's children
-        return (
-          <IndirectChild
-            // combine styles of instance and referenced component. instance styles have higher priority
-            key={
-              'indChild' + child.childId.toString() + child.typeId.toString()
-            }
-            style={combinedStyle}
-            placeHolder=""
-            linkId={null}
-            childId={childId}
-          >
-            {renderIndirectChildren(childReferencedComponent)}
-          </IndirectChild>
-        );
-      } else if (child.type === 'HTML Element') {
-        // if indirect child is an HTML element, render an IndirectChild component with no children
-        // if the HTML element has children, then also render its children
-        // get the default style/placeholder value for that type of HTML element
-        // combine the default style of that HTML element and combine in with the custom styles applied to that element
-        const HTMLType: HTMLType = state.HTMLTypes.find(
-          (type: HTMLType) => type.id === child.typeId
-        );
-        const HTMLDefaultStyle = HTMLType.style;
-        const HTMLDefaultPlaceholder = HTMLType.placeHolderShort;
-        const combinedStyle = combineStyles(HTMLDefaultStyle, child.style);
-        return (
-          <React.Fragment
-            key={
-              'indChildFrag' +
-              child.childId.toString() +
-              child.typeId.toString()
-            }
-          >
-            {child.children.length === 0 ? (
-              <IndirectChild
-                style={combinedStyle}
-                placeHolder={HTMLDefaultPlaceholder}
-                linkId={null}
-                childId={childId}
-                key={
-                  'indChildHTML' +
-                  child.childId.toString() +
-                  child.typeId.toString()
-                }
-              >
-                {''}
-              </IndirectChild>
-            ) : (
-              <IndirectChild
-                style={combinedStyle}
-                placeHolder={HTMLDefaultPlaceholder}
-                linkId={null}
-                childId={childId}
-                key={
-                  'indChildNest' +
-                  child.childId.toString() +
-                  child.typeId.toString()
-                }
-              >
-                {renderIndirectChildren(child)}
-              </IndirectChild>
-            )}
-          </React.Fragment>
-        );
-      } else if (child.type === 'Route Link') {
-        // Render a next.js route link
-        // pass the component id of the component referenced in the link as a prop
-        // IndirectChild will render the referenced component name as a clickable link
-        return (
-          <IndirectChild
-            key={
-              'RouteLink' + child.childId.toString() + child.typeId.toString()
-            }
-            style={combinedStyle}
-            placeHolder=""
-            linkId={child.typeId}
-            childId={childId}
-          >
-            {''}
-          </IndirectChild>
-        );
-      }
-    });
-  };
   return (
     <div
       onClick={onClickHandler}
-      // key={'childComp' + childId}
       style={combinedStyle}
       ref={drag}
     >
-      {renderIndirectChildren(referencedComponent)}
+      {renderChildren(referencedComponent.children)}
     </div>
   );
 }
diff --git a/app/src/components/main/DirectChildHTMLNestable.tsx b/app/src/components/main/DirectChildHTMLNestable.tsx
@@ -9,6 +9,7 @@ import renderChildren from '../../helperFunctions/renderChildren';
 // Caret
 import Annotation from './Annotation'
 import validateNewParent from '../../helperFunctions/changePositionValidation'
+import componentNest from '../../helperFunctions/componentNestValidation'
 
 function DirectChildHTMLNestable({
   childId,
@@ -70,14 +71,16 @@ const snapShotFunc = () => {
       // updates state with new instance
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
       if (item.newInstance) {
-        dispatch({
-          type: 'ADD CHILD',
-          payload: {
-            type: item.instanceType,
-            typeId: item.instanceTypeId,
-            childId: childId,
-          }
-        });
+        if ((item.instanceType === 'Component' && componentNest(state.components[item.instanceTypeId - 1].children, childId)) || item.instanceType !== 'Component') {
+          dispatch({
+            type: 'ADD CHILD',
+            payload: {
+              type: item.instanceType,
+              typeId: item.instanceTypeId,
+              childId: childId,
+            }
+          });
+        } 
       }
       // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
       else {
diff --git a/app/src/components/main/SeparatorChild.tsx b/app/src/components/main/SeparatorChild.tsx
@@ -7,6 +7,7 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 import validateNewParent from '../../helperFunctions/changePositionValidation'
+import componentNest from '../../helperFunctions/componentNestValidation'
 
 function DirectChildHTMLNestable({
   childId,
@@ -54,14 +55,16 @@ function DirectChildHTMLNestable({
       // updates state with new instance
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
       if (item.newInstance) {
-        dispatch({
-          type: 'ADD CHILD',
-          payload: {
-            type: item.instanceType,
-            typeId: item.instanceTypeId,
-            childId: childId
-          }
-        });
+        if ((item.instanceType === 'Component' && componentNest(state.components[item.instanceTypeId - 1].children, childId)) || item.instanceType !== 'Component') {
+          dispatch({
+            type: 'ADD CHILD',
+            payload: {
+              type: item.instanceType,
+              typeId: item.instanceTypeId,
+              childId: childId,
+            }
+          });
+        } 
       }
       // if item is not a new instance, change position of element dragged inside separator so that separator is new parent (until replacement)
       else {
diff --git a/app/src/components/main/renderDemo.css b/app/src/components/main/renderDemo.css
@@ -1,7 +1,7 @@
-.text-color { 
+.tst-text-color { 
   color: #cc0707;
 }
-.btn {
+.tst-btn {
   height: 20px;
   width: 100px;
   background-color: #ffffff
@@ -10,12 +10,12 @@
 
 @import url(https://fonts.googleapis.com/css?family=Roboto:300);
 
-.login-page {
+.tst-login-page {
   width: 360px;
   padding: 8% 0 0;
   margin: auto;
 }
-.form {
+.tst-form {
   position: relative;
   z-index: 1;
   background: #000000;
@@ -25,7 +25,7 @@
   text-align: center;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
 }
-.form input {
+.tst-form input {
   font-family: "Roboto", sans-serif;
   outline: 0;
   background: #f2f2f2;
@@ -36,7 +36,7 @@
   box-sizing: border-box;
   font-size: 14px;
 }
-.form button {
+.tst-form button {
   font-family: "Roboto", sans-serif;
   text-transform: uppercase;
   outline: 0;
@@ -50,55 +50,55 @@
   transition: all 0.3 ease;
   cursor: pointer;
 }
-.form button:hover,.form button:active,.form button:focus {
+.tst-form button:hover,.form button:active,.form button:focus {
   background: #43A047;
 }
-.form .message {
+.tst-form .message {
   margin: 15px 0 0;
   color: #b3b3b3;
   font-size: 12px;
 }
-.form .message-a {
+.tst-form .message-a {
   color: #4CAF50;
   text-decoration: none;
 }
-.form .register-form {
+.tst-form .register-form {
   display: none;
 }
-.container {
+.tst-container {
   position: relative;
   z-index: 1;
   max-width: 300px;
   margin: 0 auto;
 }
-.container:before, .container:after {
+.tst-container:before, .container:after {
   content: "";
   display: block;
   clear: both;
 }
-.container .info {
+.tst-container .info {
   margin: 50px auto;
   text-align: center;
 }
-.container .info h1 {
+.tst-container .info h1 {
   margin: 0 0 15px;
   padding: 0;
   font-size: 36px;
   font-weight: 300;
   color: #1a1a1a;
 }
-.container .info span {
+.tst-container .info span {
   color: #4d4d4d;
   font-size: 12px;
 }
-.container .info span a {
+.tst-container .info span a {
   color: #000000;
   text-decoration: none;
 }
-.container .info span .fa {
+.tst-container .info span .fa {
   color: #EF3B3A;
 }
-.container-body {
+.tst-container-body {
   height: 100vh;
   background: #76b852; /* fallback for old browsers */
   background: -webkit-linear-gradient(right, #76b852, #8DC26F);
@@ -111,7 +111,7 @@
 }
 
 
-.list-example .body-container {
+.tst-list-example .body-container {
     margin: 0;
     height: 100vh;
     display: flex;
@@ -120,12 +120,12 @@
     background-color: #333;
 }
 
-.list-example ul {
+.tst-list-example ul {
     padding: 0;
     list-style-type: none;
 }
 
-.list-example li {
+.tst-list-example li {
     font-size: 25px;
     width: 8em;
     height: 2em;
@@ -136,8 +136,8 @@
     cursor: pointer;
 }
 
-.list-example li::before,
-.list-example li::after
+.tst-list-example li::before,
+.tst-list-example li::after
  {
     content: '';
     position: absolute;
@@ -146,21 +146,21 @@
     z-index: -1;
 }
 
-.list-example li::before {
+.tst-list-example li::before {
     height: 80%;
     top: 10%;
     left: calc(-0.15em - 0.08em * 2);
     filter: brightness(0.8);
 }
 
-.list-example li::after {
+.tst-list-example li::after {
     height: 60%;
     top: 20%;
     left: calc(-0.15em * 2 - 0.08em * 3);
     filter: brightness(0.6);
 }
 
-.list-example li span {
+.tst-list-example li span {
     position: relative;
     height: 120%;
     top: -10%;
@@ -176,7 +176,7 @@
     transition: 0.3s;
 }
 
-.list-example li:hover span {
+.tst-list-example li:hover span {
     transform: translateX(0.15em);
 }
 
diff --git a/app/src/helperFunctions/componentNestValidation.ts b/app/src/helperFunctions/componentNestValidation.ts
@@ -0,0 +1,11 @@
+const componentNest = (children: any, nestId: Number) => {
+  console.log('Made it to this point')
+  let notNested = true;
+  for (const element of children) {
+    if (element.childId === nestId) return false;
+    else if (element.children.length > 0) notNested = componentNest(element.children, nestId);
+  }
+  return notNested
+}
+
+export default componentNest;
diff --git a/app/src/helperFunctions/renderChildren.tsx b/app/src/helperFunctions/renderChildren.tsx
