Merge pull request #76 from tolgamizrakci/development

Development

Author: tolgamizrakci

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/containers/MainContainer.tsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Button from '@material-ui/core/Button';
 import { MuiThemeProvider } from '@material-ui/core/styles';
-import BottomPanel from '../components/BottomPanel.jsx';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -51,7 +50,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 const mapStateToProps = store => ({
- // totalComponents: store.workspace.totalComponents,
+  // totalComponents: store.workspace.totalComponents,
   focusComponent: store.workspace.focusComponent,
   focusChild: store.workspace.focusChild,
   stateComponents: store.workspace.components,
@@ -140,15 +139,6 @@ class MainContainer extends Component {
   //   });
   // };
 
-  // deleteImage = () => {
-  //   this.props.changeImagePath('');
-  //   this.setState({ image: '' });
-  // };
-
-  closeModal = () => this.setState({ modal: null });
-
-  chooseAppDir = () => IPC.send('choose_app_dir');
-
   chooseGenOptions = genOption => {
     // set option
     this.setState({ genOption });
@@ -169,7 +159,11 @@ class MainContainer extends Component {
             key={i}
             button
             onClick={() => chooseGenOptions(i)}
-            style={{ border: '1px solid #3f51b5', marginBottom: '2%', marginTop: '5%' }}
+            style={{
+              border: '1px solid #3f51b5',
+              marginBottom: '2%',
+              marginTop: '5%',
+            }}
           >
             <ListItemText primary={option} style={{ textAlign: 'center' }} />
           </ListItem>
@@ -198,6 +192,7 @@ class MainContainer extends Component {
       deleteChild,
       deleteComponent,
       stateComponents,
+      classes,
     } = this.props;
     const { main, showGenerateAppModal } = this;
     const cursor = this.state.draggable ? 'move' : 'default';
@@ -232,6 +227,7 @@ class MainContainer extends Component {
               changeFocusChild={changeFocusChild}
               changeComponentFocusChild={changeComponentFocusChild}
               deleteChild={deleteChild}
+              classes={classes}
             />
           </div>
 

src/public/styles/style.css

@@ -12,7 +12,7 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Open sans', sans-serif;
+  font-family: "Open sans", sans-serif;
   font-weight: 400;
 }
 
@@ -72,6 +72,7 @@ LEFT COLUMN
 .left {
   padding: 20px;
   width: 20%;
+  /* min-width: 50px; */
   display: flex;
   flex-direction: column;
   position: relative;