made minor changes: made the app logo show up on linux, also fixed some methods in BottomPannel

Author: sean1292

main.js

@@ -20,9 +20,9 @@ function openFile() {
     filters: [
       {
         name: 'Images',
-        extensions: ['jpeg', 'jpg', 'png', 'gif', 'pdf'],
-      },
-    ],
+        extensions: ['jpeg', 'jpg', 'png', 'gif', 'pdf']
+      }
+    ]
   });
 
   // if no files
@@ -37,7 +37,7 @@ function openFile() {
 ipcMain.on('choose_app_dir', event => {
   const directory = dialog.showOpenDialog(mainWindow, {
     properties: ['openDirectory'],
-    buttonLabel: 'Export',
+    buttonLabel: 'Export'
   });
 
   if (!directory) return;
@@ -62,14 +62,14 @@ const createWindow = () => {
     height,
     webPreferences: {
       zoomFactor: 0.7,
-      'node-Integration': false,
+      'node-Integration': false
     },
     show: false,
-    icon: path.join(__dirname, '/src/public/icons/mac/icon.icns'),
+    icon: path.join(__dirname, '/src/public/icons/png/256x256.png'),
     win: {
       icon: path.join(__dirname, '/src/public/icons/win/icon.ico'),
-      target: ['portable'],
-    },
+      target: ['portable']
+    }
   });
 
   // and load the index.html of the app.
@@ -88,9 +88,9 @@ const createWindow = () => {
           accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+Shift+O',
           click() {
             openFile();
-          },
-        },
-      ],
+          }
+        }
+      ]
     },
     // {
     //   label: 'Edit',
@@ -116,12 +116,12 @@ const createWindow = () => {
         { role: 'zoomin' },
         { role: 'zoomout' },
         { type: 'separator' },
-        { role: 'togglefullscreen' },
-      ],
+        { role: 'togglefullscreen' }
+      ]
     },
     {
       role: 'window',
-      submenu: [{ role: 'minimize' }, { role: 'close' }],
+      submenu: [{ role: 'minimize' }, { role: 'close' }]
     },
     {
       role: 'help',
@@ -130,9 +130,9 @@ const createWindow = () => {
           label: 'Learn More',
           click() {
             shell.openExternal('https://electronjs.org');
-          },
-        },
-      ],
+          }
+        }
+      ]
     },
     {
       label: 'Developer',
@@ -142,10 +142,10 @@ const createWindow = () => {
           accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
           click() {
             mainWindow.webContents.toggleDevTools();
-          },
-        },
-      ],
-    },
+          }
+        }
+      ]
+    }
   ];
 
   if (process.platform === 'darwin') {
@@ -160,19 +160,19 @@ const createWindow = () => {
         { role: 'hideothers' },
         { role: 'unhide' },
         { type: 'separator' },
-        { role: 'quit' },
-      ],
+        { role: 'quit' }
+      ]
     });
 
     // Edit menu
     template[2].submenu.push(
       {
-        type: 'separator',
+        type: 'separator'
       },
       {
         label: 'Speech',
-        submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }],
-      },
+        submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }]
+      }
     );
 
     // Window menu
@@ -181,7 +181,7 @@ const createWindow = () => {
       { role: 'minimize' },
       { role: 'zoom' },
       { type: 'separator' },
-      { role: 'front' },
+      { role: 'front' }
     ];
   }
 
@@ -202,7 +202,11 @@ const createWindow = () => {
 // Some APIs can only be used after this event occurs.
 app.on('ready', () => {
   if (isDev) {
-    const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');
+    const {
+      default: installExtension,
+      REACT_DEVELOPER_TOOLS,
+      REDUX_DEVTOOLS
+    } = require('electron-devtools-installer');
 
     installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
       .then(() => {

src/components/BottomPanel.tsx

@@ -1,20 +1,15 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import {
-  handleClose,
-  deleteCompProp,
-  addCompProp
-} from "../actions/components.ts";
-import BottomTabs from "./BottomTabs.tsx";
-import { ComponentInt, ComponentsInt, ChildInt } from "../utils/Interfaces.ts";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { handleClose, deleteProp, addProp } from '../actions/components';
+import BottomTabs from './BottomTabs';
+import { ComponentInt, ComponentsInt, ChildInt } from '../utils/Interfaces';
 
-const IPC = require("electron").ipcRenderer;
+const IPC = require('electron').ipcRenderer;
 
 const mapDispatchToProps = (dispatch: any) => ({
   handleNotificationClose: () => dispatch(handleClose()),
-  deleteProp: ({ id, index }: { id: number; index: number }) =>
-    dispatch(deleteCompProp({ id, index })),
-  addProp: (prop: any) => dispatch(addCompProp(prop))
+  deleteProp: (id: number) => dispatch(deleteProp(id)),
+  addProp: (prop: any) => dispatch(addProp(prop))
 });
 
 const mapStateToProps = (store: any) => ({
@@ -32,16 +27,10 @@ interface PropsInt {
 
 class BottomPanel extends Component<PropsInt> {
   render() {
-    const {
-      components,
-      focusComponent,
-      deleteProp,
-      addProp,
-      focusChild
-    } = this.props;
+    const { components, focusComponent, deleteProp, addProp, focusChild } = this.props;
 
     return (
-      <div className="bottom-panel" style={{ width: "100%" }}>
+      <div className="bottom-panel" style={{ width: '100%' }}>
         <BottomTabs
           components={components}
           focusComponent={focusComponent}
@@ -54,7 +43,4 @@ class BottomPanel extends Component<PropsInt> {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(BottomPanel);
+export default connect(mapStateToProps, mapDispatchToProps)(BottomPanel);

src/components/Props.tsx

@@ -8,9 +8,9 @@ import Button from '@material-ui/core/Button';
 import Select from '@material-ui/core/Select';
 import Switch from '@material-ui/core/Switch';
 import InputLabel from '@material-ui/core/InputLabel';
-import { addProp, deleteProp } from '../actions/components.ts';
-import DataTable from './DataTable.tsx';
-import { ComponentInt } from '../utils/Interfaces.ts';
+import { addProp, deleteProp } from '../actions/components';
+import DataTable from './DataTable';
+import { ComponentInt } from '../utils/Interfaces';
 
 const styles = theme => ({
   root: {
@@ -93,8 +93,8 @@ const availablePropTypes = {
   boolean: 'BOOL',
   function: 'FUNC',
   // symbol: 'SYM',
-  node: 'NODE',
-  element: 'ELEM',
+  // node: 'NODE',
+  // element: 'ELEM',
   any: 'ANY',
   tuple: 'TUP',
   enum: 'ENUM'

src/containers/MainContainer.tsx

@@ -1,19 +1,19 @@
-//The main container includes both the Konva stage for creating component wireframes and 
-//the bottom panel. 
+//The main container includes both the Konva stage for creating component wireframes and
+//the bottom panel.
 
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { MuiThemeProvider } from "@material-ui/core/styles";
-import BottomPanel from "../components/BottomPanel";
-import theme from "../components/theme";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import BottomPanel from '../components/BottomPanel';
+import theme from '../components/theme';
 import {
   handleTransform,
   changeFocusChild,
   changeComponentFocusChild,
   deleteChild
-} from "../actions/components";
-import KonvaStage from "../components/KonvaStage";
-import { ComponentInt, ComponentsInt } from "../utils/Interfaces";
+} from '../actions/components';
+import KonvaStage from '../components/KonvaStage';
+import { ComponentInt, ComponentsInt } from '../utils/Interfaces';
 import * as actions from '../actions/components';
 
 interface PropsInt {
@@ -46,18 +46,13 @@ interface StateInt {
   modal: any;
 }
 
-const IPC = require("electron").ipcRenderer;
+const IPC = require('electron').ipcRenderer;
 
 const mapDispatchToProps = (dispatch: any) => ({
   handleTransformation: (
     componentId: number,
     childId: number,
-    {
-      x,
-      y,
-      width,
-      height
-    }: { x: number; y: number; width: number; height: number }
+    { x, y, width, height }: { x: number; y: number; width: number; height: number }
   ) =>
     dispatch(
       handleTransform(componentId, childId, {
@@ -69,15 +64,9 @@ const mapDispatchToProps = (dispatch: any) => ({
     ),
   changeImagePath: (imageSource: string) => dispatch(actions.changeImagePath(imageSource)),
 
-  changeFocusChild: ({ childId }: { childId: number }) =>
-    dispatch(changeFocusChild({ childId })),
-  changeComponentFocusChild: ({
-    componentId,
-    childId
-  }: {
-    componentId: number;
-    childId: number;
-  }) => dispatch(changeComponentFocusChild({ componentId, childId })),
+  changeFocusChild: ({ childId }: { childId: number }) => dispatch(changeFocusChild({ childId })),
+  changeComponentFocusChild: ({ componentId, childId }: { componentId: number; childId: number }) =>
+    dispatch(changeComponentFocusChild({ componentId, childId })),
   deleteChild: ({}) => dispatch(deleteChild({})) // if u send no prms, function will delete focus child.
 });
 
@@ -95,7 +84,7 @@ class MainContainer extends Component<PropsInt, StateInt> {
     scaleY: 1,
     x: 0,
     y: 0,
-    modal: ""
+    modal: ''
   };
 
   render() {
@@ -141,7 +130,4 @@ class MainContainer extends Component<PropsInt, StateInt> {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(MainContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(MainContainer);