Fixed several bugs. Details in PR.

Co-authored-by: jonocr <[email protected]>
Co-authored-by: buddhajjigae <[email protected]>
Co-authored-by: xkevinpark <[email protected]>
Co-authored-by: williamdyoon <[email protected]>

Author: 5 people

app/src/components/main/Canvas.tsx

@@ -56,17 +56,22 @@ function Canvas() {
           }
         });
       }
-      // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
-      else {
-        dispatch({
-          type: 'CHANGE POSITION',
-          payload: {
-            // name: item.name,
-            currentChildId: item.childId,
-            newParentChildId: null
-          }
-        });
-      }
+      // Caret Start - This code is never used. Adding a new child element to an existing element
+      // or moving existing element to nest in another element is handled by DirectChildHTMLNestable
+      //
+      //if item is not a new instance, change position of element dragged inside div so that the div is the new parent
+      // else {
+      //   console.log("Changed Position, this is not doing shit");
+      //   dispatch({
+      //     type: 'CHANGE POSITION',
+      //     payload: {
+      //       // name: item.name,
+      //       currentChildId: item.childId,
+      //       newParentChildId: null
+      //     }
+      //   });
+      // }
+      // Caret End
     },
     collect: monitor => ({
       isOver: !!monitor.isOver()

app/src/components/main/DemoRender.tsx

@@ -31,7 +31,7 @@ const DemoRender = (props): JSX.Element => {
         if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
           renderedChildren = componentBuilder(element.children);
         }
-        if (elementType === 'input' || elementType === 'img') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}</Box>);
+        if (elementType === 'input' || elementType === 'img') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}></Box>);
         else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}{renderedChildren}</Box>);
         key += 1;
       }
@@ -40,11 +40,12 @@ const DemoRender = (props): JSX.Element => {
   };
 
   useEffect(() => {
-    const childrenArray = state.components[0].children;
+    const focusIndex = state.canvasFocus.componentId - 1;
+    const childrenArray = state.components[focusIndex].children;
     console.log('Refrenced Children in State!!!', childrenArray);
     const renderedComponents = componentBuilder(childrenArray);
     setComponents(renderedComponents);
-  }, [state.components]);
+  }, [state.components, state.canvasFocus]);
 
   return (
     <div id={'renderFocus'} style={demoContainerStyle}>

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -10,6 +10,7 @@ import Modal from '@material-ui/core/Modal';
 import Annotation from './Annotation'
 // Caret
 import { makeStyles } from '@material-ui/core';
+import validateNewParent from '../../helperFunctions/changePositionValidation'
 // Caret
 import TextField from '@material-ui/core/TextField';
 import uniqid from 'uniqid';
@@ -73,6 +74,7 @@ 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) {
+        console.log("Child added directly to an existing element")
         dispatch({
           type: 'ADD CHILD',
           payload: {
@@ -84,13 +86,16 @@ const snapShotFunc = () => {
       }
       // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
       else {
-        dispatch({
-          type: 'CHANGE POSITION',
-          payload: {
-            currentChildId: item.childId,
-            newParentChildId: childId,
-          }
-        });
+        // Caret check to see if the selected child is trying to nest within itself
+        if (validateNewParent(state, item.childId, childId) === true) {
+          dispatch({
+            type: 'CHANGE POSITION',
+            payload: {
+              currentChildId: item.childId,
+              newParentChildId: childId,
+            }
+          });
+        }
       }
     },
 

app/src/components/main/SeparatorChild.tsx

@@ -6,6 +6,7 @@ import StateContext from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
+import validateNewParent from '../../helperFunctions/changePositionValidation'
 
 function DirectChildHTMLNestable({
   childId,
@@ -64,13 +65,16 @@ function DirectChildHTMLNestable({
       }
       // if item is not a new instance, change position of element dragged inside separator so that separator is new parent (until replacement)
       else {
-        dispatch({
-          type: 'CHANGE POSITION',
-          payload: {
-            currentChildId: item.childId,
-            newParentChildId: childId
-          }
-        });
+        // Caret check to see if the selected child is trying to nest within itself
+        if (validateNewParent(state, item.childId, childId) === true) {
+          dispatch({
+            type: 'CHANGE POSITION',
+            payload: {
+              currentChildId: item.childId,
+              newParentChildId: childId
+            }
+          });
+        }
       }
     },
 

app/src/helperFunctions/changePositionValidation.ts

@@ -0,0 +1,23 @@
+// 100% Caret
+// This function will evaluate the target destination when moving an element on the canvas
+// If the target destination is actually a nested component within its own children array
+// the new target parent is not a valid parent to change position
+const validateNewParent = (state: object, currentChildId: number, toTargetParentId: number) => {
+  const focusIndex = state.canvasFocus.componentId - 1;
+  const childrenArray = state.components[focusIndex].children;
+  // Checks to see if a Parent is trying to nest inside one of its children
+  const selfNestingCheck = (array, nestedChild = false, nestedParent = false) => {
+    for (const element of array) {
+      if (element.childId === toTargetParentId && nestedChild === true) return nestedParent = true;
+      else if (element.childId === currentChildId && element.children.length > 0 && nestedChild === false) nestedParent = selfNestingCheck(element.children, nestedChild = true, nestedParent);
+      else if (element.children.length > 0 && nestedChild === false) nestedParent = selfNestingCheck(element.children, nestedChild, nestedParent);
+    }
+    return nestedParent;
+  }
+  const parentNestingIntoChild = selfNestingCheck(childrenArray);
+  console.log("Is a Parent trying to nest inside one of it's children? True fails, False passes,", parentNestingIntoChild);
+  if (parentNestingIntoChild === true) return false;
+  return true;
+};
+
+export default validateNewParent;

app/src/helperFunctions/manageSeparators.ts

@@ -49,7 +49,7 @@ manageSeparators.handleSeparators = (arr: object[], str: string) => {
 // this function replaces separators onto which an element is dropped with the element itself
 manageSeparators.mergeSeparator = (arr: object[], index: number) => {
   return arr.map((child) => {
-    if (child.name === 'div' || child.name === 'form' && child.children.length) {
+    if ((child.name === 'div' || child.name === 'form') && child.children.length) {
       const divContents = manageSeparators.mergeSeparator(child.children, index);
       return { ...child, children: divContents }
     }