Merge pull request #20 from tonyito/mvp

Dummy Tutorial function and some smaller edits

Author: jzuniga206

main.js

@@ -41,6 +41,10 @@ function openFile() {
   mainWindow.webContents.send('new-file', file);
 }
 
+function toggleTutorial() {
+  mainWindow.webContents.send('tutorial_clicked');
+}
+
 // Choose directory
 ipcMain.on('choose_app_dir', event => {
   const directory = dialog.showOpenDialog(mainWindow, {
@@ -92,28 +96,28 @@ const createWindow = () => {
       label: 'File',
       submenu: [
         {
-          label: 'Open File',
+          label: 'Open Image',
           accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+Shift+O',
           click() {
             openFile();
           }
         }
       ]
     },
-    // {
-    //   label: 'Edit',
-    //   submenu: [
-    //     { role: 'undo' },
-    //     { role: 'redo' },
-    //     { type: 'separator' },
-    //     { role: 'cut' },
-    //     { role: 'copy' },
-    //     { role: 'paste' },
-    //     { role: 'pasteandmatchstyle' },
-    //     { role: 'delete' },
-    //     { role: 'selectall' },
-    //   ],
-    // },
+    {
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' },
+        { role: 'redo' },
+        { type: 'separator' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        { role: 'pasteandmatchstyle' },
+        { role: 'delete' },
+        { role: 'selectall' },
+      ],
+    },
     {
       label: 'View',
       submenu: [
@@ -137,7 +141,13 @@ const createWindow = () => {
         {
           label: 'Learn More',
           click() {
-            shell.openExternal('https://electronjs.org');
+            shell.openExternal('https://reactype.io');
+          }
+        },
+        {
+            label: 'Tutorial',
+            click() {
+              toggleTutorial();
           }
         }
       ]

package.json

@@ -1,26 +1,30 @@
 {
   "name": "reactype",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Prototyping tool for React/Typescript Applications.",
   "main": "main.js",
   "contributors": [
+    "Adam Singer",
+    "Charles Finocchiaro",
     "Chelsey Fewer",
+    "Christian Padilla",
+    "Eliot Nguyen",
+    "Jesse Zuniga",
     "Mitchel Severe",
-    "Sophia Huttner",
-    "Charles Finocchiaro",
     "Natalie Vick",
-    "Christian Padilla",
-    "Tolga Mizrakci",
+    "Sean Sadykoff",
     "Shlomo Porges",
-    "Adam Singer"
-  ],
+    "Sophia Huttner",
+    "Tolga Mizrakci",  
+    "Tony Ito-Cole"
+    ],
   "repository": {
     "type": "git",
     "url": "https://github.com/team-reactype/ReacType"
   },
   "build": {
     "appId": "com.team-reactype.reactype",
-    "copyright": "Copyright © 2018",
+    "copyright": "Copyright © 2020",
     "linux": {
       "target": [
         "AppImage",
@@ -88,6 +92,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^2.0.0",
+    "@material-ui/styles": "^4.9.0",
     "@types/prettier": "^1.19.0",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",

src/components/KonvaStage.tsx

@@ -7,7 +7,10 @@ import Rectangle from "./Rectangle";
 import cloneDeep from "../utils/cloneDeep";
 import { ComponentInt, ComponentsInt, ChildInt } from "../utils/Interfaces";
 import isEmpty from '../utils/isEmpty';
+import Konva from "konva";
 
+
+//TODO check if these types are necessary
 interface PropsInt {
   image: HTMLImageElement;
   components: ComponentsInt;
@@ -34,10 +37,12 @@ interface StateInt {
   stageWidth: number;
   stageHeight: number;
   blockSnapSize: number;
-  grid: [];
+  grid: [] | JSX.Element[];
   gridStroke: number;
 }
 
+
+
 class KonvaStage extends Component<PropsInt, StateInt> {
   constructor(props: PropsInt) {
     super(props);
@@ -52,11 +57,16 @@ class KonvaStage extends Component<PropsInt, StateInt> {
       grid: [],
       gridStroke: 1
     };
+    
   }
+  
+  stage: Stage;
+  layer: Konva.Layer;
+  container: HTMLDivElement;
 
   //makes a copy of the array of children plus the parent component pushed onto it
   getDirectChildrenCopy(focusComponent: ComponentInt) {
-    //assign component to the docused component
+    //assign component to the focused component
     const component = this.props.components.find(
       (comp: ComponentInt) => comp.id === focusComponent.id
     );
@@ -87,13 +97,15 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     return childrenArrCopy;
   }
 
+
   //currently, only the handlekeydown event listener does anything.
   componentDidMount() {
     this.checkSize();
     // here we should add listener for "container" resize
     // take a look here https://developers.google.com/web/updates/2016/10/resizeobserver
     // for simplicity I will just listen window resize
     window.addEventListener("resize", this.checkSize);
+    //TODO: Typing of this.container
     this.container.addEventListener("keydown", this.handleKeyDown);
     this.createGrid();
   }
@@ -105,7 +117,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     this.container.removeEventListener("keydown", this.handleKeyDown);
   }
 
-  //something about the logic here isn't working. Will need to check some other time. 
+  //something about the logic here might not be working. Will need to check some other time. 
   checkSize = () => {
     const width = this.container.offsetWidth;
     const height = this.container.offsetHeight;
@@ -126,6 +138,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
   //event handler to handle mouse click
   handleStageMouseDown = (e: any) => {
     // clicked on stage - clear selection
+    //logic here doesn't seem to be working
     if (e.target === e.target.getStage()) {
       return;
     }
@@ -206,14 +219,14 @@ class KonvaStage extends Component<PropsInt, StateInt> {
           height: "100%"
         }}
         ref={node => {
-          this.container = node;
+          this.container= node;
         }}
-        tabIndex="0" // required for keydown event to be heard by this.container
+        tabIndex= {0} // required for keydown event to be heard by this.container
       >
         <Stage
           className={"canvasStage"}
           ref={node => {
-            this.stage = node;
+            this.stage = node;  
           }}
           onMouseDown={this.handleStageMouseDown}
           width={this.state.stageWidth}
@@ -226,7 +239,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
             }}
           >
             {this.state.grid}
-            {/* {The logic hereis that it creates a new rectangle or each component that belongs to this parent component, plus the parent component.
+            {/* {The logic here is that it creates a new rectangle for each component that belongs to this parent component, plus the parent component.
             The parent component is rendered last. It renders based on the values in the return value of getDirectChildrenCopy. } */}
             {!isEmpty(focusComponent) && this.getDirectChildrenCopy(focusComponent) 
               .map((child: ChildInt, i: number) => (
@@ -239,7 +252,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
                   childComponentName={child.componentName}
                   focusChild={focusChild}
                   childId={child.childId} // -1 for pseudoChild
-                  x={child.position.x}
+                  x={child.position.x} 
                   y={child.position.y}
                   scaleX={1}
                   scaleY={1}
@@ -252,7 +265,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
                   image={this.props.focusComponent.id === 1 ? image : null}
                 />
               ))
-              .sort((rectA, rectB) => {
+              .sort((rectA: Rectangle, rectB: Rectangle) => {
                 if (rectB.props.childId === -1) {
                   return 1;
                 }

src/components/LeftColExpansionPanel.tsx

@@ -76,7 +76,7 @@ const LeftColExpansionPanel = (props: any) => {
                   primary={
                     <div>
                       <Typography
-                        type='body2'
+                        //type='body2'
                         style={{
                           color: '#fff',
                           textShadow: '1px 1px 2px rgba(0, 0, 0, 0.2)',

src/components/Rectangle.tsx

@@ -29,8 +29,8 @@ interface PropsInt {
 }
 
 class Rectangle extends Component<PropsInt> {
-  rect: Konva.Rect;
   group: Konva.Group;
+  rect: Konva.Rect;
 
   //This assigns the color to the Rect based on componentId's color in the state
   getComponentColor(componentId: number) {

src/components/theme.ts

@@ -14,7 +14,7 @@ const theme = createMuiTheme({
       contrastText: '#fff',
     },
     secondary: indigo,
-  },
+  }
 });
 
 export default theme;