Development

src/components/KonvaStage.jsx

@@ -1,15 +1,13 @@
-import React, { Component, createRef, Fragment } from 'react';
+import React, { Component, createRef, Fragment } from "react";
 // import PropTypes from 'prop-types';
-import {
-  Stage, Layer, Group, Label, Text,
-} from 'react-konva';
-import TransformerComponent from './TransformerComponent.jsx';
-import Rectangle from './Rectangle.jsx';
+import { Stage, Layer, Group, Label, Text } from "react-konva";
+import TransformerComponent from "./TransformerComponent.jsx";
+import Rectangle from "./Rectangle.jsx";
 
 class KonvaStage extends Component {
   state = {
     x: undefined,
-    y: undefined,
+    y: undefined
   };
 
   constructor(props) {
@@ -18,21 +16,22 @@ class KonvaStage extends Component {
     this.group = createRef();
   }
 
-  handleStageMouseDown = (e) => {
+  handleStageMouseDown = e => {
     // // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
       // add functionality for allowing no focusChild
       return;
     }
     // // clicked on transformer - do nothing
-    const clickedOnTransformer = e.target.getParent().className === 'Transformer';
+    const clickedOnTransformer =
+      e.target.getParent().className === "Transformer";
     if (clickedOnTransformer) {
       return;
     }
 
     // find clicked rect by its name
     const rectChildId = e.target.attrs.childId;
-    console.log('e.target : ', rectChildId);
+    console.log("e.target : ", rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
   };
 
@@ -50,13 +49,13 @@ class KonvaStage extends Component {
       scaleY,
       focusComponent,
       focusChild,
-      changeFocusChild,
+      changeFocusChild
     } = this.props;
     const { selectedShapeName } = this.state;
 
     return (
       <Stage
-        ref={(node) => {
+        ref={node => {
           this.stage = node;
         }}
         onMouseDown={this.handleStageMouseDown}

src/containers/LeftContainer.jsx

@@ -1,55 +1,62 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { compose } from "redux";
 // import PropTypes from 'prop-types';
-import FormControl from '@material-ui/core/FormControl';
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
-import AddIcon from '@material-ui/icons/Add';
-import Grid from '@material-ui/core/Grid';
-import { withStyles } from '@material-ui/core/styles';
-import LeftColExpansionPanel from '../components/LeftColExpansionPanel.jsx';
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import AddIcon from "@material-ui/icons/Add";
+import Grid from "@material-ui/core/Grid";
+import { withStyles } from "@material-ui/core/styles";
+import LeftColExpansionPanel from "../components/LeftColExpansionPanel.jsx";
 // import createModal from '../utils/createModal.util';
-import * as actions from '../actions/components';
+import * as actions from "../actions/components";
 
 const mapDispatchToProps = dispatch => ({
   addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
   updateComponent: ({
-    id, index, newParentId = null, color = null, stateful = null,
-  }) => dispatch(
-    actions.updateComponent({
-      id,
-      index,
-      newParentId,
-      color,
-      stateful,
-    }),
-  ),
-  deleteComponent: ({ index, id, parentIds }) => dispatch(actions.deleteComponent({ index, id, parentIds })),
+    id,
+    index,
+    newParentId = null,
+    color = null,
+    stateful = null
+  }) =>
+    dispatch(
+      actions.updateComponent({
+        id,
+        index,
+        newParentId,
+        color,
+        stateful
+      })
+    ),
+  // deleteComponent: ({ index, id, parentIds }) => dispatch(actions.deleteComponent({ index, id, parentIds })),
   // moveToBottom: componentId => dispatch(actions.moveToBottom(componentId)),
   // moveToTop: componentId => dispatch(actions.moveToTop(componentId)),
   // openExpansionPanel: component => dispatch(actions.openExpansionPanel(component)),
   // deleteAllData: () => dispatch(actions.deleteAllData()),
   addChild: ({ title }) => dispatch(actions.addChild({ title })),
-  changeFocusComponent: ({ title }) => dispatch(actions.changeFocusComponent({ title })),
-  changeFocusChild: ({ title, childId }) => dispatch(actions.changeFocusChild({ title, childId })),
+  changeFocusComponent: ({ title }) =>
+    dispatch(actions.changeFocusComponent({ title })),
+  changeFocusChild: ({ title, childId }) =>
+    dispatch(actions.changeFocusChild({ title, childId }))
 });
 
 class LeftContainer extends Component {
   state = {
-    componentName: '',
+    componentName: ""
   };
 
-  handleChange = (event) => {
+  handleChange = event => {
     this.setState({
-      [event.target.name]: event.target.value,
+      [event.target.name]: event.target.value
     });
   };
 
   handleAddComponent = () => {
     this.props.addComponent({ title: this.state.componentName });
     this.setState({
-      componentName: '',
+      componentName: ""
     });
   };
 
@@ -63,7 +70,7 @@ class LeftContainer extends Component {
       classes,
       addChild,
       changeFocusComponent,
-      changeFocusChild,
+      changeFocusChild
     } = this.props;
     const { componentName } = this.state;
 
@@ -92,8 +99,8 @@ class LeftContainer extends Component {
               margin="normal"
               autoFocus
               onChange={this.handleChange}
-              onKeyPress={(ev) => {
-                if (ev.key === 'Enter') {
+              onKeyPress={ev => {
+                if (ev.key === "Enter") {
                   // Do code here
                   this.handleAddComponent();
                   ev.preventDefault();
@@ -103,10 +110,10 @@ class LeftContainer extends Component {
               name="componentName"
               className={classes.light}
               InputProps={{
-                className: classes.input,
+                className: classes.input
               }}
               InputLabelProps={{
-                className: classes.input,
+                className: classes.input
               }}
             />
           </Grid>
@@ -134,8 +141,8 @@ export default compose(
   withStyles(styles),
   connect(
     null,
-    mapDispatchToProps,
-  ),
+    mapDispatchToProps
+  )
 )(LeftContainer);
 
 // LeftContainer.propTypes = {
@@ -155,40 +162,40 @@ export default compose(
 function styles() {
   return {
     cssLabel: {
-      color: 'white',
+      color: "white",
 
-      '&$cssFocused': {
-        color: 'green',
-      },
+      "&$cssFocused": {
+        color: "green"
+      }
     },
     cssFocused: {},
     input: {
-      color: '#fff',
-      opacity: '0.7',
-      marginBottom: '10px',
+      color: "#fff",
+      opacity: "0.7",
+      marginBottom: "10px"
     },
     underline: {
-      color: 'white',
-      '&::before': {
-        color: 'white',
-      },
+      color: "white",
+      "&::before": {
+        color: "white"
+      }
     },
     button: {
-      color: '#fff',
+      color: "#fff",
 
-      '&:disabled': {
-        color: 'grey',
-      },
+      "&:disabled": {
+        color: "grey"
+      }
     },
     clearButton: {
-      top: '96%',
-      position: 'sticky!important',
-      zIndex: '1',
+      top: "96%",
+      position: "sticky!important",
+      zIndex: "1",
 
-      '&:disabled': {
-        color: 'grey',
-        backgroundColor: '#424242',
-      },
-    },
+      "&:disabled": {
+        color: "grey",
+        backgroundColor: "#424242"
+      }
+    }
   };
 }