components in canvas aligned to center

Author: lillwimberly

app/src/components/App.tsx

@@ -83,6 +83,8 @@ export const App = (): JSX.Element => {
       }, 15000);
     }
   }, [state]);
+  // uncomment below to log state
+  // console.log('STATE!!!!: ', state);
   return (
     <div className="app">
       <DndProvider backend={HTML5Backend}>

app/src/components/main/Canvas.tsx

@@ -17,7 +17,7 @@ function Canvas(props): JSX.Element {
 
   useEffect(()=> {
     if (newComp) {
-      //find updated comp
+      // find updated comp
       const copy = state.components.find(comp => comp.name === copiedComp.name)
       // make a array of copied children from the copied component
       if (copy.children.length){
@@ -181,6 +181,11 @@ function Canvas(props): JSX.Element {
     backgroundColor: isOver ? '#FAFED1' : '#FBFBFB',
     border: '1px solid #FBFBF2',
     borderStyle: isOver ? 'dotted' : 'solid',
+    userSelect: 'none',
+    aspectRatio: 'auto 774 / 1200',
+    boxSizing: 'border-box',
+    // width: '100vw',
+    // height: '100vh'
   };
 
   const darkCanvasStyle = {
@@ -197,8 +202,9 @@ function Canvas(props): JSX.Element {
   // const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
+  // console.log('CURRENTCOMPONENT children: ', currentComponent.children, 'CURRCOMPONENT STYLE: ', currentComponent.style);
   return (
-    <div ref={drop} style={props.isThemeLight ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
+    <div className={'componentContainer'} ref={drop} style={props.isThemeLight ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
        {renderChildren(currentComponent.children)}
     </div>
   );

app/src/components/main/DirectChildComponent.tsx

@@ -67,7 +67,6 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
       ref={drag}
     >
       <strong>{name}</strong>
-      {`  (${childId})`}
     </div>
   );
 }

app/src/components/main/DirectChildHTML.tsx

@@ -70,14 +70,12 @@ function DirectChildHTML({
 
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={drag} id={`canv${childId}`}>
-      <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>      
-      {/* {`  (${childId})`} */}
-      <span style={ {color: isThemeLight ? 'black' : 'white'} }>{`  ( ${childId} )`}</span>
-      <Annotation
-        id={childId}
-        name={name}
-        annotations={annotations}
-      />
+    <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>      
+    <Annotation
+      id={childId}
+      name={name}
+      annotations={annotations}
+    />
     </div>
   );
 }

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -149,16 +149,16 @@ function DirectChildHTMLNestable({
 
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
-      <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
-      {/* {`  ( ${childId} )`} */}
-      <span style={ {color: isThemeLight ? 'black' : 'white'} }>{`  ( ${childId} )`}</span>
-      <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
-      {routeButton}
-      <Annotation
-        id={childId}
-        name={name}
-        annotations={annotations}
-      />
+      <span>
+        <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
+        <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
+        {routeButton}
+        <Annotation
+          id={childId}
+          name={name}
+          annotations={annotations}
+          />
+      </span>
       {renderChildren(children)}
     </div>
   );

app/src/helperFunctions/renderChildren.tsx

@@ -20,7 +20,7 @@ const renderChildren = (children: ChildElement[]) => {
     // A DirectChildComponent is an instance of a top level component
     // This component will render IndirectChild components (div/components rendered inside a child component)
     // Removed style from prop drills so that styling isn't applied to canvas items.
-    // Also added keys & removed an unnecessary div around DirChildNestables that were causing errors.
+    // Also added keys & removed an unnecessary div around DirChildNestables that was causing errors.
     if (type === 'Component') {
       return (
         <DirectChildComponent

app/src/public/styles/globalDefaultStyles.ts

@@ -1,10 +1,17 @@
+import { autoUpdater } from "electron";
+
 const globalDefaultStyle: Object = {
-  padding: '10px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  boxSizing: 'border-box',
+  padding: '10px 20px 10px 20px',
   margin: '10px',
   borderRadius: '5px',
-  border: '1px Solid grey',
+  border: '10px Solid grey',
   fontFamily: 'Helvetica Neue',
-  textAlign: 'left'
+  maxWidth: 'fit-content',
+  minWidth: '250px',
 };
 
 export default globalDefaultStyle;

app/src/public/styles/style.css

@@ -281,8 +281,8 @@ h1 {
 //////////////////////////////////////////////////
 RIGHT COLUMN
 /////////////////////////////////////////////////
+// RIGHT NOW, I'M NOT SURE WHAT RIGHT COL IS REFERING TO 
 */
-
 #rightContainer {
   overflow-y: scroll;
   overflow-x: hidden;
@@ -530,11 +530,11 @@ a.nav_link:hover {
 
 /* Additional styling for ReacType X */
 .componentDefault {
-  width: 100%;
+  width: auto;
   border: 2px solid gray;
   min-height: 150px;
   padding: 10px;
-  background-color: lightgray;
+  background-color: rgb(213, 80, 164);
   opacity: 0.75;
 }
 .inputName {
@@ -600,4 +600,11 @@ a.nav_link:hover {
   display: flex;
   flex-direction: column;
   align-items: center;
+}
+
+/* My Changes to canvas instances container */
+.componentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }