Began working on saving annotations to state to keep them persistent between root level components and for readme export purposes. Changed styling of annotation textarea and header. Added requirements for state in Interfaces

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

Author: 5 people

app/src/components/main/Annotation.tsx

@@ -1,12 +1,17 @@
 // Caret Start
-import React, { useRef } from 'react';
+import React, {
+  useRef, useState, useContext, useEffect,
+} from 'react';
 import { Annotations } from '../../interfaces/Interfaces';
 import Modal from '@material-ui/core/Modal';
+import StateContext from '../../context/context';
 
 function Annotation({
   id,
   name,
 }: Annotations) {
+  const [annotations, setAnnotations] = useState('');
+  const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);
 
   // React hook setting the annotation button modal open/close state
@@ -25,20 +30,45 @@ function Annotation({
   // Handles when text exists in the textarea of the modal. If text exists/does not exist, corresponding button changes colors.
   const handleAnnoChange = (event) => {
     const { value } = event.target;
+    const focusIndex = state.canvasFocus.componentId - 1;
+    const childrenArray = state.components[focusIndex].children;
 
     if(value === '') {
       ref.current.style.background = '#3ec1ac';
       ref.current.id = 'btn' + event.target.id;
     } else {
       ref.current.style.background = '#cc99ff';
       ref.current.id = 'btn' + event.target.id;
+      setAnnotations(value);
+
+      let childEle = handleSaveAnno(childrenArray, event.target.id);
+      
+      if(childEle) {
+        childEle.annotations = annotations;
+        setState(childEle.annotations);
+      }
+    }
+  }
+
+
+  const handleSaveAnno = (array, id) => {
+    for(let i = 0; i < array.length; i++) {
+      if(array[i].childId === id) {
+        return array[i];
+      }
+      if(array[i].children.length > 0) {
+        return handleSaveAnno(array[i], id);
+      }
     }
   }
 
   const body = (
-    <div>
-      <p className='annotate-textarea-header'>Notes for: {name} ( {id} )</p>
+    <div className='annotate-position'>
+      <span className='annotate-textarea-header'>Notes for: {name} ( {id} )</span>
       <textarea className='annotate-textarea' id={id.toString()} onChange={handleAnnoChange}></textarea>
+      <span className='annotate-textarea-footer'>
+        <button className='annotate-textarea-savebutton'>Save Notes</button>
+      </span>
     </div>
   )
 
@@ -51,7 +81,6 @@ function Annotation({
         keepMounted={true}
       >
         {body}
-       
       </Modal>
     </div>
   );

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

@@ -68,6 +68,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: {
@@ -79,13 +80,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 }
     }

app/src/interfaces/Interfaces.ts

@@ -23,6 +23,8 @@ export interface ChildElement {
   style: object;
   attributes?: object;
   children?: ChildElement[];
+  // Caret
+  annotations?: string;
 }
 export interface Component {
   id: number;
@@ -36,6 +38,8 @@ export interface Component {
   past: any[];
   future: any[];
   stateProps: StateProp[]; // state: [ { key: value, type }, {key: value, type}, {key: value, type} ]
+  // Caret
+  annotations?: string;
 }
 
 export interface StateProp {

app/src/public/styles/style.css

@@ -4,6 +4,7 @@
   box-sizing: inherit;
 }
 
+@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
 
 html {
@@ -418,27 +419,43 @@ ANNOTATIONS
   float: right;
 }
 
-.annotate-textarea {
-  width: 600px;
-  height: 300px;
+.annotate-position {
+  display: flex;
+  flex-direction: column;
   position: fixed;
-  top: 40%;
+  align-items:flex-start;
+  top: 30%;
   left: 30%;
+}
 
+.annotate-textarea {
+  width: 600px;
+  height: 300px;
   resize: none;
   white-space: pre-line;
+  font-size: 18px;
 }
 
 .annotate-textarea-header {
   font-size: 35px;
-  position: fixed;
-  padding-left: 8px;
   background-color: #4772c7;
   color: rgb(241, 240, 240);
   width: 600px;
-  top: 33%;
-  left: 30%;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.annotate-textarea-footer {
+  background-color: #4772c7;
+  color: rgb(107, 93, 93);
+  width: 600px;
+}
 
+.annotate-textarea-savebutton {
+  float: right;
+  width: 150px;
+  height: 30px;
+  font-size: 20px;
+  margin: 2.5px 2.5px;
 }
 /* Caret End