made paths visible on canvas for react router links and routes

Co-Authored-By Chris Tang [email protected]

Author: crlim

app/src/components/main/Canvas.tsx

@@ -25,7 +25,7 @@ function Canvas() {
     function onClickHandler(event) {
       event.stopPropagation();
       // note: a null value for the child id means that we are focusing on the top-level component rather than any child
-      console.log(state.canvasFocus); 
+      console.log(state.canvasFocus);
       changeFocus(state.canvasFocus.componentId, null);
     };
 
@@ -51,7 +51,6 @@ function Canvas() {
       }
       // 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('Canvas first dispatch')
         dispatch({
           type: 'ADD CHILD',
           payload: {

app/src/components/main/DirectChildComponent.tsx

@@ -9,9 +9,8 @@ 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'
 
-function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
+function DirectChildComponent({ childId, type, typeId, style, name }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
 
   // find the top-level component corresponding to this instance of the component
@@ -64,13 +63,17 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
     interactiveStyle
   );
 
-  return (
+
+  // Renders name and not children of subcomponents to clean up Canvas view when dragging components
+  // into the main canvas.  To render html elements on canvas, import and invoke renderChildren
+  return  (
     <div
       onClick={onClickHandler}
       style={combinedStyle}
       ref={drag}
     >
-      {renderChildren(referencedComponent.children)}
+      <strong>{name}</strong>
+      {`  (${childId})`}
     </div>
   );
 }

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -20,6 +20,7 @@ function DirectChildHTMLNestable({
   children,
   name,
   annotations,
+  attributes
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);
@@ -143,6 +144,7 @@ const snapShotFunc = () => {
     <div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
       <strong>{HTMLType.placeHolderShort}</strong>
       {`  ( ${childId} )`}
+      <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
       {routeButton}
       <Annotation
         id={childId}

app/src/helperFunctions/renderChildren.tsx

@@ -58,6 +58,7 @@ const renderChildren = (children: ChildElement[]) => {
           key={'DirChildHTMLNest' + childId.toString() + name}
           name={name}
           annotations={annotations}
+          attributes={attributes}
         />
       );
     }