Fixed Arrow's not displaying when in Customization Panel. Fixed arrow circle head to be centered on arrow line. Made drastic changes to styling in light mode (color scheme). Removed non-minimize and uglify in production for debugging purposes.

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/electron/main.js

@@ -73,7 +73,7 @@ async function createWindow() {
     webPreferences: {
       zoomFactor: 0.7,
       // enable devtools when in development mode
-      devTools: isDev,
+      devTools: true,
       // crucial security feature - blocks rendering process from having access to node modules
       nodeIntegration: false,
       // web workers will not have access to node
@@ -91,6 +91,7 @@ async function createWindow() {
       nativeWindowOpen: true,
     },
   });
+  win.webContents.openDevTools();
 
   // Splash screen that appears while loading
   const hideSplashscreen = initSplashScreen({

app/src/Dashboard/styles.css

@@ -76,7 +76,7 @@
 }
 
 .header {
-  background-color: #186BB4;
+  background-color: #0099E6;
   color: rgba(255, 255, 255, 0.897);
   width: 100%;
   position: relative;

app/src/components/bottom/BottomTabs.tsx

@@ -15,6 +15,7 @@ import FormControl from '@material-ui/core/FormControl';
 import { styleContext } from '../../containers/AppContainer';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
+import Arrow from '../main/Arrow';
 
 const BottomTabs = (props): JSX.Element => {
   // state that controls which tab the user is on
@@ -25,12 +26,11 @@ const BottomTabs = (props): JSX.Element => {
   const [theme, setTheme] = useState('solarized_light');
   const { style } = useContext(styleContext);
 
-  
   // breaks if handleChange is commented out
   const handleChange = (event: React.ChangeEvent, value: number) => {
     setTab(value);
   };
- // Allows users to toggle project between "next.js" and "Classic React"
+  // Allows users to toggle project between "next.js" and "Classic React"
   // When a user changes the project type, the code of all components is rerendered
   const handleProjectChange = event => {
     const projectType = event.target.value;
@@ -42,7 +42,8 @@ const BottomTabs = (props): JSX.Element => {
     setTheme(e.target.value);
   };
 
-  // console.log("Editor Theme: ", theme);
+  // Render's the highliting arrow feature that draws an arrow from the Canvas to the DemoRender
+  Arrow.renderArrow(state.canvasFocus.childId);
 
   return (
     <div className={classes.root} style={style}>
@@ -110,7 +111,7 @@ const BottomTabs = (props): JSX.Element => {
 const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
-    backgroundColor: '#186BB4',
+    backgroundColor: '#003366',
     height: '100%',
     color: '#E8E8E8',
     boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
@@ -174,7 +175,7 @@ const useStyles = makeStyles(theme => ({
     marginBotton: '10px'
   },
   projectSelector: {
-    backgroundColor: 'rgba(255,255,255,0.15)',
+    backgroundColor: '#0099E6',
     color: 'white'
   }
 }));

app/src/components/bottom/CodePreview.tsx

@@ -7,6 +7,7 @@ import 'ace-builds/src-noconflict/theme-monokai';
 import 'ace-builds/src-noconflict/theme-github';
 import 'ace-builds/src-noconflict/theme-solarized_dark';
 import 'ace-builds/src-noconflict/theme-solarized_light';
+import 'ace-builds/src-noconflict/theme-monokai';
 import 'ace-builds/src-noconflict/theme-terminal';
 import { Component } from '../../interfaces/Interfaces';
 import useResizeObserver from '../../tree/useResizeObserver';
@@ -45,7 +46,7 @@ const CodePreview: React.FC<{
     >
       <AceEditor
         mode="javascript"
-        theme="solarized_dark"
+        theme="monokai"
         width="100%"
         height="100%"
         onChange={handleCodeSnipChange}

app/src/components/bottom/StylesEditor.tsx

@@ -7,6 +7,7 @@ import 'ace-builds/src-noconflict/theme-github';
 import 'ace-builds/src-noconflict/theme-solarized_dark';
 import 'ace-builds/src-noconflict/theme-solarized_light';
 import 'ace-builds/src-noconflict/theme-terminal';
+import 'ace-builds/src-noconflict/theme-monokai';
 import 'ace-builds/src-min-noconflict/ext-searchbox';
 import { Component } from '../../interfaces/Interfaces';
 import useResizeObserver from '../../tree/useResizeObserver';
@@ -77,7 +78,7 @@ const StylesEditor: React.FC<{
     >
       <AceEditor
         mode="css"
-        theme={'solarized_dark'}
+        theme={'monokai'}
         width="100%"
         height="100%"
         onChange={handleChange}

app/src/components/left/HTMLItem.tsx

@@ -30,7 +30,7 @@ const useStyles = makeStyles({
     }
   },
   lightThemeFontColor: {
-    color: '#186BB4'
+    color: '#292929'
   },
   darkThemeFontColor: {
     color: '#fff'

app/src/components/left/HTMLPanel.tsx

@@ -268,7 +268,7 @@ const useStyles = makeStyles({
     borderRadius: '4px',
   },
   lightThemeFontColor: {
-    color: '#186BB4'
+    color: '#155084'
   },
   darkThemeFontColor: {
     color: '#ffffff'
@@ -288,10 +288,10 @@ const useStyles = makeStyles({
 });
 
 const AddElementButton = styled(Button)({
-  background: "#297ac2",
+  background: "#0099E6",
   border: 0,
   borderRadius: 3,
-  boxShadow: "0 2px 2px 2px #297ac2",
+  boxShadow: "0 0px 0px 2px #1a1a1a",
   color: "white",
   height: 24,
   width: 160,

app/src/components/main/Annotation.tsx

@@ -43,9 +43,9 @@ function Annotation({
   const handleAnnoChange = (event) => {
     const { value } = event.target;
     if (value === '' || value === undefined) {
-      ref.current.style.background = '#3ec1ac';
+      ref.current.style.background = '#0CD34C';
     } else {
-      ref.current.style.background = '#cc99ff';
+      ref.current.style.background = '#D59DFF';
     }
     if (value != annotation) {
       setAnnotations(value);
@@ -87,7 +87,7 @@ function Annotation({
 
   const body = (
     <div className='annotate-position'>
-      <span className='annotate-textarea-header'>Notes for: {name} ( {id} )</span>
+      <span className='annotate-textarea-header'> Notes for: {name} ( {id} )</span>
       <textarea className='annotate-textarea' id={id.toString()} onChange={handleAnnoChange}>{annotations}</textarea>
     </div>
   )

app/src/components/main/Arrow.tsx

@@ -1,17 +1,14 @@
 const Arrow = {};
 
 Arrow.renderArrow = (id : number) => {
-  console.log("RENDER ARROW ID: ", id)
   if(id != null) {
-    let canvasEle = document.getElementById(`canv${id}`)//.offsetHeight;
+    let canvasEle = document.getElementById(`canv${id}`)
     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;
@@ -21,10 +18,7 @@ Arrow.renderArrow = (id : number) => {
   }
 }
 
-
 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;'
@@ -36,54 +30,41 @@ Arrow.createLineElement = (x, y, length, angle) => {
              + 'position: absolute;'
              + 'top: ' + y + 'px;'
              + 'left: ' + x + 'px;';
+  let line = document.createElement("div");
+  line.setAttribute("class", "line");
   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;'
+  let styles = 'width: 13px;'
+             + 'height: 13px;'
              + '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);'  
+             + 'border-color: #bbb;' 
              + 'rotate: ' + angle + 'rad;'
-            //  + '-ms-transform: rotate(' + angle + 'rad);'  
              + 'position: absolute;'
-             + 'top: ' + -12 + 'px;'
-             + 'left: ' + 0 + (length - 10) + 'px;';
+             + 'top: ' + -6.5 + 'px;'
+             + 'left: ' + 0 + (length - 12) + 'px;';
+  let head = document.createElement("div");
+  head.setAttribute("class", "head"); 
   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);
@@ -92,7 +73,6 @@ Arrow.lineDraw = (x1, y1, x2, y2) => {
 Arrow.deleteLines = () => {
   let lineArray = document.getElementsByClassName("line");
   let headArray = document.getElementsByClassName("head");
-  console.log("LINE ARRAY" , lineArray);
   for(const line of lineArray) {
     line.remove();
   }
@@ -101,4 +81,4 @@ Arrow.deleteLines = () => {
   }
 }
 
-export default Arrow;
+export default Arrow;

app/src/components/main/Canvas.tsx

@@ -85,10 +85,10 @@ function Canvas() {
   const defaultCanvasStyle = {
     width: '100%',
     minHeight: '100%',
-    backgroundColor: isOver ? 'lightyellow' : '#F5F5F5',
-    backgroundImage: "url('https://www.transparenttextures.com/patterns/diagonal-noise.png')",
+    backgroundColor: isOver ? '#FAFED1' : '#FBFBFB',
+    //backgroundImage: "url('https://www.transparenttextures.com/patterns/diagonal-noise.png')",
     border: '1px solid #FBFBF2',
-    borderStyle: isOver ? 'dotted' : 'solid'
+    borderStyle: isOver ? 'dotted' : 'solid',
   };
   // Combine the default styles of the canvas with the custom styles set by the user for that component
   // The render children function renders all direct children of a given component

app/src/components/main/DemoRender.tsx

@@ -12,7 +12,7 @@ const DemoRender = (props): JSX.Element => {
   const [state, dispatch] = useContext(StateContext);
   const demoContainerStyle = {
     width: '100%',
-    backgroundColor: 'lightgrey',
+    backgroundColor: '#FBFBFB',
     border: '2px Solid grey',
   };
 

app/src/components/main/DirectChildComponent.tsx

@@ -50,7 +50,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
   const interactiveStyle = {
     border:
       state.canvasFocus.childId === childId
-        ? '3px solid #a7cced'
+        ? '3px solid #186BB4'
         : '1px Solid grey',
     boxShadow:
       state.canvasFocus.childId === childId ? '1px 1px 3px #a7cced' : ''

app/src/components/main/DirectChildHTML.tsx

@@ -59,7 +59,7 @@ function DirectChildHTML({
   const interactiveStyle = {
     border:
       state.canvasFocus.childId === childId
-        ? '3px solid #a7cced'
+        ? '3px solid #186BB4'
         : '1px solid grey'
   };
 

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -120,7 +120,7 @@ const snapShotFunc = () => {
   const interactiveStyle = {
     border:
       state.canvasFocus.childId === childId
-        ? '1px solid #186BB4'
+        ? '3px solid #186BB4'
         : '1px solid grey',
   };
 

app/src/components/right/ComponentDrag.tsx

@@ -97,7 +97,7 @@ const useStyles = makeStyles({
     wordWrap: 'break-word',
   },
   lightThemeFontColor: {
-    color: '#186BB4'
+    color: '#155084'
   },
   darkThemeFontColor: {
     color: '#fff'

app/src/components/right/ComponentPanel.tsx

@@ -179,13 +179,16 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
               />
             </div>
           </div>
-          <CreateButton
-            className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
-            id="addComponentButton"
-            onClick={handleNameSubmit}
-          >
-            Create
-          </CreateButton>
+          <div>
+            <br/>
+            <CreateButton
+              className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
+              id="addComponentButton"
+              onClick={handleNameSubmit}
+            >
+              Create
+            </CreateButton>
+          </div>
       </div>
     </div>
   );
@@ -218,7 +221,7 @@ const useStyles = makeStyles({
     flexDirection:'column',
     alignItems:'center',
     flexGrow : 1,
-    backgroundColor: '#fafaf6',
+    backgroundColor: '#F9F9F9',
     color: '#000000',
   },
   addComponentWrapper: {
@@ -264,18 +267,18 @@ const useStyles = makeStyles({
     fontSize: '0.85rem'
   },
   lightThemeFontColor: {
-    color: '#186BB4'
+    color: '#155084'
   },
   darkThemeFontColor: {
     color: '#fff'
   }
 });
 
 const CreateButton = styled(Button)({
-  background: "#297ac2",
+  background: "#0099E6",
   border: 0,
   borderRadius: 3,
-  boxShadow: "0 2px 2px 2px #297ac2",
+  boxShadow: "0 0px 0px 2px #1a1a1a",
   color: "white",
   height: 24,
   width: 60,

app/src/components/right/ComponentPanelItem.tsx

@@ -71,12 +71,13 @@ const ComponentPanelItem: React.FC<{
       ref={drag}
       xs={8}
       style={{
-        color: '#186BB4',
+        color: '#262626',
         backgroundColor: 'transparent',
         border: root
           ? '2px dotted #186BB4'
           : '2px solid #186BB4',
         borderRadius: '4px',
+        borderColor: '#000000',
       }}
     >
       <div className="compPanelItem" onClick={handleClick}>