Merge branch 'main' into organization

Author: MadinventorZero

app/src/components/main/Arrow.tsx

@@ -0,0 +1,104 @@
+const Arrow = {};
+
+Arrow.renderArrow = (id : number) => {
+  console.log("RENDER ARROW ID: ", id)
+  if(id != null) {
+    let canvasEle = document.getElementById(`canv${id}`)//.offsetHeight;
+    let renderEle = document.getElementById(`rend${id}`)
+    if( canvasEle === null || renderEle === null) {
+      return;
+    } else {
+      console.log("CANVAS ELE *******", canvasEle)
+      let canvasElePosition = canvasEle.getBoundingClientRect();
+      let renderElePosition = renderEle.getBoundingClientRect();
+      console.log("POSITION *******" ,canvasElePosition)
+      const canvasEleX =  canvasElePosition.left + canvasElePosition.width;
+      const canvasEleY =  canvasElePosition.top + (canvasElePosition.height / 2);
+      const renderEleX =  renderElePosition.left;
+      const renderEleY =  renderElePosition.top;
+      Arrow.lineDraw(canvasEleX, canvasEleY, renderEleX, renderEleY);
+    }
+  }
+}
+
+
+Arrow.createLineElement = (x, y, length, angle) => {
+  let line = document.createElement("div");
+  line.setAttribute("class", "line");
+  let styles = 'border: 1px solid black;'
+             + 'width: ' + length + 'px;'
+             + 'height: 0px;'
+             + 'z-index: 9999999999;'
+             + '-moz-transform: rotate(' + angle + 'rad);'
+             + '-webkit-transform: rotate(' + angle + 'rad);'
+             + '-o-transform: rotate(' + angle + 'rad);'  
+             + '-ms-transform: rotate(' + angle + 'rad);'  
+             + 'position: absolute;'
+             + 'top: ' + y + 'px;'
+             + 'left: ' + x + 'px;';
+  line.setAttribute('style', styles);  
+  return line;
+}
+
+Arrow.createHeadElement = (x, y, length, angle) => {
+  let head = document.createElement("div");
+  head.setAttribute("class", "head"); 
+  console.log('length', length)
+  angle = angle;
+  console.log("ANGLE >>>>>", angle)
+  const negative = -angle;
+  let styles = 'width: 14px;'
+             + 'height: 14px;'
+             + 'border: solid 2px;'
+             + 'border-radius: 50%;'
+             + 'z-index: 9999999999;'
+            //  + 'display: inline-block'
+             + 'background-color: #00FFFF;'
+             + 'border-color: #bbb;'
+             //+ '-moz-transform: rotate(' + angle + 'rad);'
+            // + '-webkit-transform: rotate(' + angle + 'rad);'
+             //+ '-o-transform: rotate(' + angle + 'rad);'  
+             + 'rotate: ' + angle + 'rad;'
+            //  + '-ms-transform: rotate(' + angle + 'rad);'  
+             + 'position: absolute;'
+             + 'top: ' + -12 + 'px;'
+             + 'left: ' + 0 + (length - 10) + 'px;';
+  head.setAttribute('style', styles);
+  console.log(head, "<<<<< HEAD")
+  return head;
+}
+
+Arrow.lineDraw = (x1, y1, x2, y2) => {
+  let a = x1 - x2,
+      b = y1 - y2,
+      c = Math.sqrt(a * a + b * b);
+
+  let sx = (x1 + x2) / 2,
+      sy = (y1 + y2) / 2;
+
+  let x = sx - c / 2,
+      y = sy;
+
+  let alpha = Math.PI - Math.atan2(-b, a);
+
+  let line = Arrow.createLineElement(x, y, c, alpha);
+  let head = Arrow.createHeadElement(x, y, c, alpha);
+  console.log("HEAD HERE >>>>>>", head)
+  Arrow.deleteLines();
+  document.getElementsByClassName("main")[0].append(line);
+  document.getElementsByClassName("line")[0].append(head);
+}
+
+Arrow.deleteLines = () => {
+  let lineArray = document.getElementsByClassName("line");
+  let headArray = document.getElementsByClassName("head");
+  console.log("LINE ARRAY" , lineArray);
+  for(const line of lineArray) {
+    line.remove();
+  }
+  for(const head of headArray) {
+    head.remove();
+  }
+}
+
+export default Arrow;

app/src/components/main/Canvas.tsx

@@ -5,9 +5,13 @@ import StateContext from '../../context/context';
 import { Component, DragItem } from '../../interfaces/Interfaces';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
+// Caret start
+import Arrow from './Arrow';
 
 function Canvas() {
   const [state, dispatch] = useContext(StateContext);
+  // Caret start
+  Arrow.deleteLines();
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
@@ -32,7 +36,7 @@ function Canvas() {
         //pushes the last user action on the canvas into the past array of Component
         state.components[focusIndex].past.push(deepCopiedState.components[focusIndex].children);
     };
-  
+
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
     accept: ItemTypes.INSTANCE,

app/src/components/main/DemoRender.tsx

@@ -31,10 +31,10 @@ const DemoRender = (props): JSX.Element => {
         if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
           renderedChildren = componentBuilder(element.children);
         }
-        if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}></Box>);
-        else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={childId}></Box>);
-        else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href={activeLink} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}</Box>);
-        else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}{renderedChildren}</Box>);
+        if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
+        else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
+        else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);
+        else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>);
         key += 1;
       }
     }

app/src/components/main/DirectChildHTML.tsx

@@ -69,7 +69,7 @@ function DirectChildHTML({
   );
 
   return (
-    <div onClick={onClickHandler} style={combinedStyle} ref={drag}>
+    <div onClick={onClickHandler} style={combinedStyle} ref={drag} id={`canv${childId}`}>
       <strong>{HTMLType.placeHolderShort}</strong>      
       {/* Caret start */}
       {`  (${childId})`}

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -134,7 +134,7 @@ const snapShotFunc = () => {
   drag(drop(ref));
 
   return (
-    <div onClick={onClickHandler} style={combinedStyle} ref={ref}>
+    <div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
       <strong>{HTMLType.placeHolderShort}</strong>
       {/* Caret start */}
       {`  ( ${childId} )`}

app/src/components/main/renderDemo.css

@@ -4,7 +4,7 @@
 .tst-btn {
   height: 20px;
   width: 100px;
-  background-color: #ffffff
+  background-color: #ffffff;
 }
 
 

app/src/containers/CustomizationPanel.tsx

@@ -28,6 +28,9 @@ import ErrorMessages from '../constants/ErrorMessages';
 import ProjectManager from '../components/right/ProjectManager';
 import StateContext from '../context/context';
 import FormSelector from '../components/form/Selector';
+// Caret
+import Arrow from '../components/main/Arrow';
+import { config } from 'ace-builds';
 
 // need to pass in props to use the useHistory feature of react router
 const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
@@ -183,6 +186,11 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     state.canvasFocus.componentId
   ]);
 
+  console.log("CONFIG TARGET ****************: " , state.canvasFocus.childId);
+  Arrow.renderArrow(state.canvasFocus.childId);
+  
+
+
   const isPage = (configTarget): boolean => {
     const { components, rootComponents } = state;
     return components

app/src/interfaces/Interfaces.ts

@@ -43,7 +43,6 @@ export interface Component {
   // Caret
   annotations?: string;
   useStateCodes: string[];
-
 }
 
 export interface StateProp {