Merge pull request #7 from buddhajjigae/annotation-feature

Annotation feature update

Author: jonocr

app/src/components/main/Annotation.tsx

@@ -0,0 +1,82 @@
+import React, { useContext, useRef } from 'react';
+import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
+import { ItemTypes } from '../../constants/ItemTypes';
+import StateContext from '../../context/context';
+import { combineStyles } from '../../helperFunctions/combineStyles';
+import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
+import Modal from '@material-ui/core/Modal';
+
+function Annotation({
+  childId,
+  type,
+  typeId,
+  style,
+  children
+}: ChildElement) {
+  const [state, dispatch] = useContext(StateContext);
+  const ref = useRef(null);
+
+  // find the HTML element corresponding with this instance of an HTML element
+  // find the current component to render on the canvas
+  const HTMLType: HTMLType = state.HTMLTypes.find(
+    (type: HTMLType) => type.id === typeId
+  );
+
+  // hook that allows component to be draggable
+
+  // combine all styles so that higher priority style specifications overrule lower priority style specifications
+  // priority order is 1) style directly set for this child (style), 2) style of the referenced HTML element, and 3) default styling
+  const defaultNestableStyle = { ...globalDefaultStyle };
+  const separatorStyle = {
+    padding: '5px 10px',
+    margin: '1px 10px',
+  };
+
+
+  const combinedStyle = combineStyles(
+    combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
+    separatorStyle
+  );
+
+  const [open, setOpen] = React.useState(false);
+
+  const handleAnnoOpen = (id) => {
+    setOpen(true);
+    //annotateOpen(id);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleAnnoChange = (event) => {
+    const { value } = event.target;
+
+    console.log("ID ", event.target.id)
+    console.log(event.target);
+    if(value === '') {
+      document.getElementById("btn" + event.target.id).style.background = '#3ec1ac';
+      document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
+    } else {
+      document.getElementById("btn" + event.target.id).style.background = '#cc99ff';
+      document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
+    }
+  }
+
+  return (
+    <div>
+      {/* Caret start */}
+      <button className='annotate-button-empty' id={"btn" + childId} onClick={() => handleAnnoOpen(childId)}>DIRECT CHILD HTML NESTABLE HERE</button>
+      <Modal 
+        open={open}
+        onClose={handleClose}
+        keepMounted={true}
+      >
+        <textarea className='annotate-textarea' id={state.canvasFocus.childId} onChange={handleAnnoChange}></textarea>
+      </Modal>
+      {/* Caret end */}
+    </div>
+  );
+}
+
+export default Annotation;

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -1,11 +1,18 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
+import Modal from '@material-ui/core/Modal';
+import Annotation from './Annotation'
+// Caret
+import { makeStyles } from '@material-ui/core';
+// Caret
+import TextField from '@material-ui/core/TextField';
+import uniqid from 'uniqid';
 
 function DirectChildHTMLNestable({
   childId,
@@ -26,6 +33,7 @@ const snapShotFunc = () => {
   //pushes the last user action on the canvas into the past array of Component
   state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
 };
+
   // find the HTML element corresponding with this instance of an HTML element
   // find the current component to render on the canvas
   const HTMLType: HTMLType = state.HTMLTypes.find(
@@ -103,6 +111,30 @@ const snapShotFunc = () => {
     changeFocus(state.canvasFocus.componentId, childId);
   }
 
+  // Caret Start
+  const [open, setOpen] = React.useState(false);
+
+  const handleAnnoOpen = (id) => {
+    setOpen(true);
+    //annotateOpen(id);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleAnnoChange = (event) => {
+    const { value } = event.target;
+    if(value === '') {
+      document.getElementById("btn" + event.target.id).style.background = '#3ec1ac';
+      document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
+    } else {
+      document.getElementById("btn" + event.target.id).style.background = '#cc99ff';
+      document.getElementById("btn" + event.target.id).id = 'btn' + event.target.id;
+    }
+  }
+  // Caret End
+
   // combine all styles so that higher priority style specifications overrule lower priority style specifications
   // priority order is 1) style directly set for this child (style), 2) style of the referenced HTML element, and 3) default styling
   const defaultNestableStyle = { ...globalDefaultStyle };
@@ -119,12 +151,21 @@ const snapShotFunc = () => {
     combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
     interactiveStyle
   );
-
   drag(drop(ref));
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={ref}>
       {HTMLType.placeHolderShort}
       {renderChildren(children)}
+      {/* Caret start */}
+      <Annotation
+        childId={childId}
+        typeId={typeId}
+        type={type}
+        name={name}
+        style={style}
+      >
+      </Annotation>  
+      {/* Caret end */}
     </div>
   );
 }

app/src/helperFunctions/renderChildren.tsx

@@ -45,7 +45,7 @@ const renderChildren = (children: ChildElement[]) => {
     }
     // child is a nestable type of HTML element (divs and forms)
     else if (type === 'HTML Element' && (typeId === 11 || typeId === 2)) {
-      return (
+      return (        <div>
         <DirectChildHTMLNestable
           childId={childId}
           type={type}
@@ -55,6 +55,7 @@ const renderChildren = (children: ChildElement[]) => {
           key={'DirChildHTMLNest' + childId.toString() + name}
           name={child.name}
         />
+        </div>
       );
     }
     else if (type === 'HTML Element' && typeId === 1000 ) {

app/src/public/styles/style.css

@@ -403,6 +403,32 @@ NAVBAR
   width: 16%;
 }
 
+/* Caret Start
+/////////////////////////////////////////////////
+ANNOTATIONS
+/////////////////////////////////////////////////
+*/
+
+.annotate-button-empty {
+  float: right;
+  background-color: #3ec1ac;
+}
+
+.annotate-button-filled {
+  float: right;
+}
+
+.annotate-textarea {
+  width: 400px;
+  height: 250px;
+  display: block;
+  position: relative;
+  margin-left: 35%;
+  margin-right: auto;
+  white-space: pre-wrap;
+}
+/* Caret End
+
 /* Material-UI */
 
 /* Sortable tree sorting */

package.json

@@ -161,6 +161,7 @@
     "seamless-immutable": "^7.1.4",
     "source-map-support": "^0.5.19",
     "spectron": "^11.1.0",
+    "uniqid": "^5.3.0",
     "uuid": "^8.2.0"
   },
   "devDependencies": {