merge adam styling

Author: ChristianEdwardPadilla

electron-builder.yml

@@ -2,7 +2,7 @@ directories:
   output: dist
   buildResources: build
 appId: reactype
-copyright: Copyright © 2019
+copyright: Copyright © 2018
 linux:
   target:
     - AppImage
@@ -20,7 +20,7 @@ win:
 files:
   - main.js
   - build
-productName: reactype
+productName: ReacType
 dmg:
   contents:
     - x: 110

main.js

@@ -1,13 +1,8 @@
 const {
-  app,
-  BrowserWindow,
-  Menu,
-  shell,
-  dialog,
-  ipcMain,
+  app, BrowserWindow, Menu, shell, dialog, ipcMain,
 } = require('electron');
 
-
+// Uncomment below for hot reloading during development
 require('electron-reload')(__dirname);
 
 // const isDev = true;
@@ -22,9 +17,12 @@ function openFile() {
   // Opens file dialog looking for markdown
   const files = dialog.showOpenDialog(mainWindow, {
     properties: ['openFile'],
-    filters: [{
-      name: 'Images', extensions: ['jpeg', 'jpg', 'png', 'gif', 'pdf'],
-    }],
+    filters: [
+      {
+        name: 'Images',
+        extensions: ['jpeg', 'jpg', 'png', 'gif', 'pdf'],
+      },
+    ],
   });
 
   // if no files
@@ -77,77 +75,81 @@ const createWindow = () => {
     mainWindow.show();
   });
 
-  const template = [{
-    label: 'File',
-    submenu: [{
-      label: 'Open File',
-      accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+Shift+O',
-      click() {
-        openFile();
-      },
+  const template = [
+    {
+      label: 'File',
+      submenu: [
+        {
+          label: 'Open File',
+          accelerator: process.platform === 'darwin' ? 'Cmd+O' : 'Ctrl+Shift+O',
+          click() {
+            openFile();
+          },
+        },
+        {
+          label: 'Export Components',
+          accelerator: process.platform === 'darwin' ? 'Cmd+E' : 'Ctrl+Shift+E',
+          click() {
+            exportComponents();
+          },
+        },
+      ],
     },
     {
-      label: 'Export Components',
-      accelerator: process.platform === 'darwin' ? 'Cmd+E' : 'Ctrl+Shift+E',
-      click() {
-        exportComponents();
-      },
-    }],
-  },
-  {
-    label: 'Edit',
-    submenu: [
-      { role: 'undo' },
-      { role: 'redo' },
-      { type: 'separator' },
-      { role: 'cut' },
-      { role: 'copy' },
-      { role: 'paste' },
-      { role: 'pasteandmatchstyle' },
-      { role: 'delete' },
-      { role: 'selectall' },
-    ],
-  },
-  {
-    label: 'View',
-    submenu: [
-      { role: 'reload' },
-      { role: 'forcereload' },
-      { role: 'toggledevtools' },
-      { type: 'separator' },
-      { role: 'resetzoom' },
-      { role: 'zoomin' },
-      { role: 'zoomout' },
-      { type: 'separator' },
-      { role: 'togglefullscreen' },
-    ],
-  },
-  {
-    role: 'window',
-    submenu: [
-      { role: 'minimize' },
-      { role: 'close' },
-    ],
-  },
-  {
-    role: 'help',
-    submenu: [{
-      label: 'Learn More',
-      click() {
-        shell.openExternal('https://electronjs.org');
-      },
-    }],
-  },
-  {
-    label: 'Developer',
-    submenu: [{
-      label: 'Toggle Developer Tools',
-      accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
-      click() {
-        mainWindow.webContents.toggleDevTools();
-      },
-    }],
-  },
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' },
+        { role: 'redo' },
+        { type: 'separator' },
+        { role: 'cut' },
+        { role: 'copy' },
+        { role: 'paste' },
+        { role: 'pasteandmatchstyle' },
+        { role: 'delete' },
+        { role: 'selectall' },
+      ],
+    },
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' },
+        { role: 'forcereload' },
+        { role: 'toggledevtools' },
+        { type: 'separator' },
+        { role: 'resetzoom' },
+        { role: 'zoomin' },
+        { role: 'zoomout' },
+        { type: 'separator' },
+        { role: 'togglefullscreen' },
+      ],
+    },
+    {
+      role: 'window',
+      submenu: [{ role: 'minimize' }, { role: 'close' }],
+    },
+    {
+      role: 'help',
+      submenu: [
+        {
+          label: 'Learn More',
+          click() {
+            shell.openExternal('https://electronjs.org');
+          },
+        },
+      ],
+    },
+    {
+      label: 'Developer',
+      submenu: [
+        {
+          label: 'Toggle Developer Tools',
+          accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
+          click() {
+            mainWindow.webContents.toggleDevTools();
+          },
+        },
+      ],
+    },
   ];
 
   if (process.platform === 'darwin') {
@@ -167,12 +169,15 @@ const createWindow = () => {
     });
 
     // Edit menu
-    template[2].submenu.push({
-      type: 'separator',
-    }, {
-      label: 'Speech',
-      submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }],
-    });
+    template[2].submenu.push(
+      {
+        type: 'separator',
+      },
+      {
+        label: 'Speech',
+        submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }],
+      },
+    );
 
     // Window menu
     template[4].submenu = [

package.json

@@ -1,21 +1,27 @@
 {
-  "name": "teamreactype",
+  "name": "reactype",
   "version": "1.0.0",
   "description": "Prototyping tool for React/Typescript Applications.",
   "main": "main.js",
+  "contributors": [
+    "Christian Padilla",
+    "Tolga Mizrakci",
+    "Shlomo Porges",
+    "Adam Singer"
+  ],
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "https://github.com/team-reactype/ReacType"
   },
   "build": {
-    "appId": "",
+    "appId": "com.team-reactype.reactype",
     "copyright": "Copyright © 2018",
     "linux": {
       "target": [
         "AppImage",
         "deb"
       ],
-      "maintainer": "blessingebowe@gmail.com"
+      "maintainer": "spincycle01@yahoo.com"
     },
     "mac": {
       "category": "public.app-category.developer-tools",
@@ -63,7 +69,6 @@
     "reactype": "./index.js"
   },
   "preferGlobal": true,
-  "contributors": [],
   "license": "MIT",
   "jest": {
     "moduleNameMapper": {
@@ -86,9 +91,8 @@
     "cli-spinner": "^0.2.8",
     "commander": "^2.17.1",
     "d3": "^5.9.2",
-    "electron": "^2.0.7",
-    "electron-reload": "^1.4.0",
     "enzyme": "^3.4.1",
+    "electron-reload": "^1.4.0",
     "konva": "^2.1.7",
     "localforage": "^1.7.2",
     "lodash.throttle": "^4.1.1",

src/components/App.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import '../public/styles/style.css';
+import { MuiThemeProvider } from '@material-ui/core/styles';
 import AppContainer from '../containers/AppContainer';
 
 class App extends Component {

src/components/KonvaStage.tsx

@@ -3,6 +3,8 @@ import Button from '@material-ui/core/Button';
 import { Stage, Layer, Line, Group, Label, Text, Rect, Transformer } from 'react-konva';
 import Rectangle from './Rectangle.jsx';
 import cloneDeep from '../utils/cloneDeep.ts';
+import DeleteIcon from '@material-ui/icons/Delete';
+import Fab from '@material-ui/core/Fab';
 
 class KonvaStage extends Component {
   constructor(props) {
@@ -132,7 +134,7 @@ class KonvaStage extends Component {
   };
 
   render() {
-    const { components, handleTransform, focusComponent, focusChild, deleteChild } = this.props;
+    const { components, handleTransform, focusComponent, focusChild, deleteChild, classes } = this.props;
 
     return (
       <div
@@ -145,7 +147,7 @@ class KonvaStage extends Component {
         }}
         tabIndex="0" // required for keydown event to be heard by this.container
       >
-        <Button
+        {/* <Button
           onClick={deleteChild}
           style={{
             width: '150px',
@@ -156,7 +158,30 @@ class KonvaStage extends Component {
           }}
         >
           delete child
-        </Button>
+        </Button> */}
+        <Fab
+          variant="extended"
+          size="small"
+          color="inherit"
+          aria-label="Delete"
+          // className={classes.margin}
+          style={{
+            width: '150px',
+            position: 'relative',
+            float: 'right',
+            marginTop: '10px',
+            marginLeft: '10px',
+            // background: "#dbdbdb",
+            zIndex: 2,
+          }}
+          // style={{ maxWidth: "20px" }}
+          onClick={deleteChild}
+        >
+          <DeleteIcon />
+          Delete Child
+          {/* {`Delete 
+          ${focusChild.}`} */}
+        </Fab>
         <Stage
           className={'canvasStage'}
           ref={node => {

src/components/Rectangle.tsx

@@ -140,7 +140,7 @@ class Rectangle extends Component {
           // fill={color}
           // opacity={0.8}
           onTransformEnd={event => this.handleResize(componentId, childId, event.target, blockSnapSize)}
-          strokeWidth={4}
+          strokeWidth={childType === 'COMP' ? 4 : 1}
           strokeScaleEnabled={false}
           draggable={false}
           fill={childId === -1 ? 'white' : null}

src/components/SortChildren.jsx

@@ -0,0 +1,49 @@
+
+import React, { Component} from "react";
+import { connect } from "react-redux";
+
+const mapStateToProps = store => ({
+  focusComponent: store.workspace.focusComponent,
+});
+
+
+class SortChildren extends Component {
+  // constructor(props) {
+  //   super(props);
+   state = {test: 'myTestValue'};
+  //}
+
+  
+render() {
+  const children = this.props.focusComponent.childrenArray; 
+  const List = children.map( (child,idx) => {
+    console.log(`mappping...... ${idx}   ${child.componentName + child.childId}`)
+      return (
+        <li 
+          Childid={child.Childid}
+          key={idx}
+          draggable='true'
+          // onDragEnd={this.dragEnd.bind(this)}
+          // onDragStart={this.dragStart.bind(this)}>{item}
+        >
+        {child.componentName + child.childId}
+        </li>
+    )})
+    console.log('children')
+        console.log(children)
+        console.log('List')
+        console.log(List)
+  return (
+    <div>
+      <p>Childrens List</p>
+      {/* <List/> */}
+    </div>
+  )
+ 
+}
+
+} 
+
+export default connect(
+  mapStateToProps
+)(SortChildren);