Created a useEffect to allow annotations to remain persistent between root components (i.e. changing between root components on the right panel)

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

@@ -9,68 +9,85 @@ import StateContext from '../../context/context';
 function Annotation({
   id,
   name,
+  annotations,
 }: Annotations) {
-  const [annotations, setAnnotations] = useState('');
   const [state, dispatch] = useContext(StateContext);
+  const [annotation, setAnnotations] = useState('');
   const ref = useRef(null);
-
   // React hook setting the annotation button modal open/close state
   const [open, setOpen] = React.useState(false);
-
+  const focusIndex = state.canvasFocus.componentId - 1;
+  const childrenArray = state.components[focusIndex].children;
+  
   // For showing the modal
   const handleOpen = (id) => {
+    const childEle = handleFindAnno(childrenArray, id);
     setOpen(true);
   };
 
   // For closing the modal
-  const handleClose = () => {
+  const handleClose = (id) => {
+    const focusIndex = state.canvasFocus.componentId - 1;
+    const childrenArray = state.components[focusIndex].children;
+    const childEle = handleFindAnno(childrenArray, id);
+    
+    if(childEle) {
+      childEle.annotations = annotation;
+    }
+
     setOpen(false);
   };
 
-  // Handles when text exists in the textarea of the modal. If text exists/does not exist, corresponding button changes colors.
+  /**
+   * 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 === '') {
+    if(value === '' || value === undefined) {
       ref.current.style.background = '#3ec1ac';
       ref.current.id = 'btn' + event.target.id;
+      setAnnotations(value);
     } 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) => {
+  /**
+   * This handler will find the specific anno for the corresponding component on the canvas in the childrenArray - 
+   * where the canvas components are placed
+   */
+  const handleFindAnno = (array, id) => {
     for(let i = 0; i < array.length; i++) {
-      if(array[i].childId === id) {
+      if(array[i].childId === Number(id)) {
         return array[i];
       }
+
       if(array[i].children.length > 0) {
-        return handleSaveAnno(array[i], id);
+        return handleFindAnno(array[i], id);
       }
     }
   }
 
-  /*
-  <span className='annotate-textarea-footer'>
-        <button className='annotate-textarea-savebutton'>Save Notes</button>
-  </span>
-  */
+  /**
+   * This useEffect allows the annotations to remain persistent when changing between root level components on the right panel
+   */
+  useEffect(() => {
+    const event = {
+      target : { value: handleFindAnno(childrenArray, id).annotations},
+      id : id,
+    }
+
+    handleAnnoChange(event);
+  }, [state.canvasFocus])
+
   const body = (
     <div className='annotate-position'>
       <span className='annotate-textarea-header'>Notes for: {name} ( {id} )</span>
-      <textarea className='annotate-textarea' id={id.toString()} onChange={handleAnnoChange}></textarea>
+      <textarea className='annotate-textarea' id={id.toString()} onChange={handleAnnoChange}>{handleFindAnno(childrenArray, id).annotations}</textarea>
     </div>
   )
 
@@ -79,7 +96,7 @@ function Annotation({
       <button className='annotate-button-empty' id={"btn" + id} onClick={() => handleOpen(id)} ref={ref}>Notes</button>
       <Modal 
         open={open}
-        onClose={handleClose}
+        onClose={() => handleClose(id)}
         keepMounted={true}
       >
         {body}

app/src/components/main/Canvas.tsx

@@ -52,7 +52,6 @@ function Canvas() {
             type: item.instanceType,
             typeId: item.instanceTypeId,
             childId: null
-            
           }
         });
       }

app/src/components/main/DirectChildHTML.tsx

@@ -17,6 +17,7 @@ function DirectChildHTML({
   type,
   typeId,
   style,
+  annotations,
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);
@@ -75,6 +76,7 @@ function DirectChildHTML({
       <Annotation
         id={childId}
         name={name}
+        annotations={annotations}
       />
       {/* Caret end */}
     </div>

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -8,6 +8,7 @@ import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 // Caret
 import Annotation from './Annotation'
+import validateNewParent from '../../helperFunctions/changePositionValidation'
 
 function DirectChildHTMLNestable({
   childId,
@@ -16,6 +17,7 @@ function DirectChildHTMLNestable({
   style,
   children,
   name,
+  annotations,
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);
@@ -137,6 +139,7 @@ const snapShotFunc = () => {
       <Annotation
         id={childId}
         name={name}
+        annotations={annotations}
       />
       {renderChildren(children)}
       {/* Caret end */}

app/src/components/main/IndirectChild.tsx

@@ -5,7 +5,7 @@ import StateContext from '../../context/context';
 import { Component } from '../../interfaces/Interfaces';
 import Annotation from './Annotation'
 
-function IndirectChild({ style, children, placeHolder, linkId, childId, name }) {
+function IndirectChild({ style, children, placeHolder, linkId, childId, name, annotations }) {
   const [state, dispatch] = useContext(StateContext);
   let combinedStyle = combineStyles(globalDefaultStyle, style);
 
@@ -39,6 +39,7 @@ function IndirectChild({ style, children, placeHolder, linkId, childId, name })
       <Annotation
         id={childId}
         name={name}
+        annotations={annotations}
       />
       {/* Caret end */}
     </div>

app/src/interfaces/Interfaces.ts

@@ -96,5 +96,6 @@ export interface LoginInt {
 export interface Annotations {
   id: number;
   name: string;
+  annotations: string;
 }
 // Caret end