Development

main.js

@@ -7,6 +7,8 @@ const {
   ipcMain,
 } = require('electron');
 
+require('electron-reload')(__dirname);
+
 // const isDev = true;
 const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 

package.json

@@ -85,6 +85,7 @@
     "cli-spinner": "^0.2.8",
     "commander": "^2.17.1",
     "electron": "^2.0.7",
+    "electron-reload": "^1.4.0",
     "enzyme": "^3.4.1",
     "konva": "^2.1.7",
     "localforage": "^1.7.2",

src/actionTypes/index.js

@@ -3,6 +3,7 @@ export const ADD_COMPONENT = 'ADD_COMPONENT';
 export const ADD_CHILD = 'ADD_CHILD';
 export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
 export const DELETE_COMPONENT = 'DELETE_COMPONENT';
+export const CHANGE_FOCUS_COMPONENT = 'CHANGE_FOCUS_COMPONENT';
 export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';
 export const REASSIGN_PARENT = 'REASSIGN_PARENT';
 export const SET_SELECTABLE_PARENTS = 'SET_SELECTABLE_PARENTS';

src/actions/components.js

@@ -4,6 +4,7 @@ import {
   ADD_CHILD,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
+  CHANGE_FOCUS_COMPONENT,
   UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
@@ -97,6 +98,10 @@ export const updateComponent = ({
   dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
+export const changeFocusComponent = ({ title }) => (dispatch) => {
+  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
+};
+
 // export const exportFiles = ({ components, path }) => (dispatch) => {
 //   dispatch({
 //     type: EXPORT_FILES,

src/components/KonvaStage.jsx

@@ -1,12 +1,12 @@
-import React, { Component, createRef, Fragment } from 'react';
+import React, { Component, createRef } from 'react';
 // import PropTypes from 'prop-types';
 import {
-  Stage, Layer, Image, Group, Label, Text, Tag,
+  Stage, Layer, Image, Group,
 } from 'react-konva';
-import Konva from 'konva';
 import TransformerComponent from './TransformerComponent.jsx';
 import Rectangle from './Rectangle.jsx';
 
+
 class KonvaStage extends Component {
   state = {
     x: undefined,
@@ -19,10 +19,6 @@ class KonvaStage extends Component {
     this.group = createRef();
   }
 
-  // Christian - this function causes the expansionPanel of the clicked rect to open
-  // (and focusedComponent to change, which we don't want)
-  // could reuse this logic for affecting state of children array
-  // ADD FOCUS CHILD FUNCTIONALITY HERE
   handleStageMouseDown = (e) => {
     // clicked on stage - cler selection
     if (e.target === e.target.getStage()) {
@@ -46,11 +42,27 @@ class KonvaStage extends Component {
     }
   };
 
+  //  WAS ALREADY COMMENTED OUT
+  // handleStageDrag = () => {
+  //   // const mainWindowHeight = this.main.current.clientHeight;
+  //   // const mainWindowWidth = this.main.current.clientWidth;
+  //   // const groupX = this.refs.group.attrs.x;
+  //   // const groupY = this.refs.group.attrs.y;
+
+  //   // const componentX = (mainWindowWidth / 2) - groupX;
+  //   // const componentY = (mainWindowHeight / 2) - groupY;
+  //   // console.log(componentX, componentY);
+  // }
+
+  componentDidMount() {
+    // this.props.setImage();
+  }
+
   render() {
     const {
-      components, handleTransform, draggable, scaleX, scaleY, focusComponent,
+      components, handleTransform, image, draggable, scaleX, scaleY, focusComponent,
     } = this.props;
-    // const { selectedShapeName } = this.state;
+    const { selectedShapeName } = this.state;
 
     return (
       <Stage
@@ -68,41 +80,45 @@ class KonvaStage extends Component {
             ref={(node) => {
               this.group = node;
             }}
-            draggable={draggable}
-          >
-            {components.map((comp, i) => (
-              <Fragment key={i}>
-                <Rectangle
-                  draggable={comp.draggable}
-                  key={i}
-                  componentId={comp.id}
-                  x={comp.position.x}
-                  y={comp.position.y}
-                  width={comp.position.width}
-                  height={comp.position.height}
-                  title={comp.title}
-                  color={comp.color}
-                  handleTransform={handleTransform}
-                />
-                <Label x={comp.position.x} y={comp.position.y}>
-                  <Text
-                    text={`${comp.title},${comp.position.x.toPrecision(
-                      3,
-                    )},${comp.position.y.toPrecision(3)}`}
-                    fontFamily="Calibri"
-                    fontSize={12}
-                    padding={5}
-                    fill="green"
-                  />
-                </Label>
-              </Fragment>
-            ))}
-            <TransformerComponent focusComponent={focusComponent} />
+            draggable={draggable}>
+            <Image image={image} />
+            {components.map((comp, i) => <Rectangle
+              draggable={comp.draggable}
+              selectedShapeName={selectedShapeName}
+              key={i}
+              componentId={comp.id}
+              x={comp.position.x}
+              y={comp.position.y}
+              width={comp.position.width}
+              height={comp.position.height}
+              title={comp.title}
+              color={comp.color}
+              handleTransform={handleTransform}
+            />)}
+            <TransformerComponent
+              focusComponent={focusComponent}
+              selectedShapeName={selectedShapeName}
+            />
           </Group>
         </Layer>
       </Stage>
     );
   }
 }
 
+// KonvaStage.propTypes = {
+//   draggable: PropTypes.bool.isRequired,
+//   components: PropTypes.array.isRequired,
+//   handleTransform: PropTypes.func.isRequired,
+//   image: PropTypes.oneOfType([
+//     PropTypes.string,
+//     PropTypes.object,
+//   ]),
+//   scaleX: PropTypes.number.isRequired,
+//   scaleY: PropTypes.number.isRequired,
+//   openExpansionPanel: PropTypes.func.isRequired,
+//   setImage: PropTypes.func.isRequired,
+//   focusComponent: PropTypes.object.isRequired,
+// };
+
 export default KonvaStage;

src/components/LeftColExpansionPanel.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 // import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 // import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
@@ -14,18 +14,32 @@ import ListItemText from '@material-ui/core/ListItemText';
 import IconButton from '@material-ui/core/IconButton';
 import Grid from '@material-ui/core/Grid';
 import AddIcon from '@material-ui/icons/Add';
+import { openExpansionPanel } from '../utils/componentReducer.util';
+import { changeFocusChild } from '../actions/components';
 
 const LeftColExpansionPanel = (props) => {
   const {
     index, classes, focusComponent, component, deleteComponent, addChild,
-  } = props;
+    changeFocusComponent } = props;
   const { title, id, color } = component;
 
   return (
     <div className={classes.root}>
-      <Grid item xs={12} md={6}>
-        <List>
-          <ListItem button component="a">
+      <Grid item xs={12} md={6} style={{color: 'red'}}>
+        <List
+          style={{color: 'red'}}
+        >
+          <ListItem button component="a"
+              // style={
+              //   if (components.find(comp => comp.title === focusComponent.title))
+              // }
+              style={{color: 'red'}}
+              onClick={()=> {
+                console.log({ title })                
+                changeFocusComponent({ title })
+
+              }}
+            >
             <ListItemText
               disableTypography
               className={classes.light}
@@ -44,6 +58,7 @@ const LeftColExpansionPanel = (props) => {
                   onClick={() => {
                     console.log(title);
                     addChild( { title } );
+                    changeFocusChild( { title } );
                   }}
                 />
               </IconButton>
@@ -90,15 +105,15 @@ export default withStyles(styles)(LeftColExpansionPanel);
 </div>
 */
 
-LeftColExpansionPanel.propTypes = {
-  classes: PropTypes.object.isRequired,
-  component: PropTypes.object,
-  index: PropTypes.number,
-  focusComponent: PropTypes.object.isRequired,
-  onExpansionPanelChange: PropTypes.func,
-  updateComponent: PropTypes.func,
-  deleteComponent: PropTypes.func,
-};
+// LeftColExpansionPanel.propTypes = {
+//   classes: PropTypes.object.isRequired,
+//   component: PropTypes.object,
+//   index: PropTypes.number,
+//   focusComponent: PropTypes.object.isRequired,
+//   onExpansionPanelChange: PropTypes.func,
+//   updateComponent: PropTypes.func,
+//   deleteComponent: PropTypes.func,
+// };
 
 function styles(theme) {
   return {

src/containers/LeftContainer.jsx

@@ -31,6 +31,8 @@ const mapDispatchToProps = dispatch => ({
   // openExpansionPanel: component => dispatch(actions.openExpansionPanel(component)),
   // deleteAllData: () => dispatch(actions.deleteAllData()),
   addChild: ({ title }) => dispatch(actions.addChild({ title })),
+  changeFocusComponent: ({ title }) => dispatch(actions.changeFocusComponent({ title })),
+  changeFocusChild: ({ title }) => dispatch(actions.changeFocusChild({ title })),
 });
 
 class LeftContainer extends Component {
@@ -46,6 +48,7 @@ class LeftContainer extends Component {
 
   handleAddComponent = () => {
     this.props.addComponent({ title: this.state.componentName });
+    this.props.changeFocusChild({ title: this.state.componentName })
     this.setState({
       componentName: '',
     });
@@ -60,6 +63,7 @@ class LeftContainer extends Component {
       totalComponents,
       classes,
       addChild,
+      changeFocusComponent,
     } = this.props;
     const { componentName } = this.state;
 
@@ -72,6 +76,7 @@ class LeftContainer extends Component {
         component={component}
         focusComponent={focusComponent}
         addChild={addChild}
+        changeFocusComponent={changeFocusComponent}
       />
     ));
 

src/reducers/componentReducer.js

@@ -4,6 +4,7 @@ import {
   ADD_CHILD,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
+  CHANGE_FOCUS_COMPONENT,
   UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
@@ -29,6 +30,7 @@ import {
   addChild,
   updateComponent,
   deleteComponent,
+  changeFocusComponent,
   updateChildren,
   reassignParent,
   setSelectableP,
@@ -114,6 +116,8 @@ const componentReducer = (state = initialApplicationState, action) => {
       return updateComponent(state, action.payload);
     case DELETE_COMPONENT:
       return deleteComponent(state, action.payload);
+    case CHANGE_FOCUS_COMPONENT:
+      return changeFocusComponent(state, action.payload);
     case UPDATE_CHILDREN:
       return updateChildren(state, action.payload);
     case REASSIGN_PARENT:

src/utils/componentReducer.util.js

@@ -159,6 +159,16 @@ export const deleteComponent = (state, { index, id }) => {
   };
 };
 
+export const changeFocusComponent = (state, { title }) => {
+
+  let focusComp = state.components.filter((comp) => {if (comp.title === title) return comp})[0]
+
+  return {
+    ...state,
+    focusComponent: focusComp,
+  };
+};
+
 // Add or remove children
 export const updateChildren = (state, { parentIds, childId }) => {
   const components = state.components.map((component) => {