addChild button not visible when focused

Author: ChristianEdwardPadilla

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,9 +1,8 @@
-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';
 
@@ -19,10 +18,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 +41,33 @@ 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
@@ -71,38 +88,44 @@ class KonvaStage extends Component {
             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>
+              <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} />
+            <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,10 +14,18 @@ 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,
+    index,
+    classes,
+    focusComponent,
+    component,
+    deleteComponent,
+    addChild,
+    changeFocusComponent,
   } = props;
   const { title, id, color } = component;
 
@@ -27,9 +35,20 @@ const LeftColExpansionPanel = (props) => {
 
   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}
@@ -42,15 +61,20 @@ const LeftColExpansionPanel = (props) => {
               style={{ color }}
             />
             <ListItemSecondaryAction>
-              <IconButton aria-label="Add">
-                <AddIcon
-                  style={{ color, float: 'right' }}
-                  onClick={() => {
-                    console.log(title);
-                    addChild({ title });
-                  }}
-                />
-              </IconButton>
+              {isFocused() ? (
+                <div />
+              ) : (
+                <IconButton aria-label="Add">
+                  <AddIcon
+                    style={{ color, float: 'right' }}
+                    onClick={() => {
+                      console.log(title);
+                      addChild({ title });
+                      changeFocusChild({ title });
+                    }}
+                  />
+                </IconButton>
+              )}
             </ListItemSecondaryAction>
           </ListItem>
         </List>
@@ -94,15 +118,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) => {