changeFocusChild

src/actionTypes/index.js

@@ -4,6 +4,7 @@ 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 CHANGE_FOCUS_CHILD = 'CHANGE_FOCUS_CHILD';
 export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';
 export const REASSIGN_PARENT = 'REASSIGN_PARENT';
 export const SET_SELECTABLE_PARENTS = 'SET_SELECTABLE_PARENTS';

src/actions/components.js

@@ -5,6 +5,7 @@ import {
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
   CHANGE_FOCUS_COMPONENT,
+  CHANGE_FOCUS_CHILD,
   UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
@@ -109,6 +110,11 @@ export const changeFocusComponent = ({ title }) => (dispatch) => {
   dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
 };
 
+// make sure childId is being sent in
+export const changeFocusChild = ({ title, childId }) => (dispatch) => {
+  dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
+};
+
 // export const exportFiles = ({ components, path }) => (dispatch) => {
 //   dispatch({
 //     type: EXPORT_FILES,

src/components/KonvaStage.jsx

@@ -1,13 +1,15 @@
-import React, { Component, createRef } from "react";
+import React, { Component, createRef } from 'react';
 // import PropTypes from 'prop-types';
-import { Stage, Layer, Image, Group } from "react-konva";
-import TransformerComponent from "./TransformerComponent.jsx";
-import Rectangle from "./Rectangle.jsx";
+import {
+  Stage, Layer, Image, Group,
+} 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) {
@@ -16,46 +18,24 @@ 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 CHANG FOCUS CHILD FUNCTIONALITY HERE
-  handleStageMouseDown = e => {
-    // // clicked on stage - cler selection
-    // if (e.target === e.target.getStage()) {
-    //   this.props.openExpansionPanel({});
-    //   return;
-    // }
+  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';
-    // if (clickedOnTransformer) {
-    //   return;
-    // }
+    const clickedOnTransformer = e.target.getParent().className === 'Transformer';
+    if (clickedOnTransformer) {
+      return;
+    }
 
     // find clicked rect by its name
-    const id = e.target.name();
-    console.log(e.target);
-    const rect = this.props.components.find(r => r.id === id);
-
-    // if (rect) {
-    //   this.props.openExpansionPanel(rect || this.props.focusComponent);
-    // } else {
-    //   this.props.openExpansionPanel(this.props.focusComponent);
-    // }
+    const rectChildId = e.target.attrs.childId;
+    console.log('e.target : ', rectChildId);
+    this.props.changeFocusChild({ childId: rectChildId });
   };
 
-  //  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();
   }
@@ -69,13 +49,14 @@ class KonvaStage extends Component {
       scaleX,
       scaleY,
       focusComponent,
-      focusChild
+      focusChild,
+      changeFocusChild,
     } = this.props;
     const { selectedShapeName } = this.state;
 
     return (
       <Stage
-        ref={node => {
+        ref={(node) => {
           this.stage = node;
         }}
         onMouseDown={this.handleStageMouseDown}
@@ -86,7 +67,7 @@ class KonvaStage extends Component {
           <Group
             scaleX={scaleX}
             scaleY={scaleY}
-            ref={node => {
+            ref={(node) => {
               this.group = node;
             }}
             draggable={draggable}
@@ -97,7 +78,7 @@ class KonvaStage extends Component {
                 <Rectangle
                   draggable={child.draggable}
                   selectedShapeName={selectedShapeName}
-                  key={i + `${child.componentName}`}
+                  key={`${i}${child.componentName}`}
                   childId={child.childId}
                   componentId={focusComponent.id}
                   x={child.position.x}

src/components/LeftColExpansionPanel.jsx

@@ -25,13 +25,19 @@ const LeftColExpansionPanel = (props) => {
     deleteComponent,
     addChild,
     changeFocusComponent,
+    changeFocusChild,
   } = props;
   const { title, id, color } = component;
 
   function isFocused() {
     return focusComponent.title === title ? 'focused' : '';
   }
 
+  function isAncestor() {
+    // add logic for determining if given component is an ancestor of focusedComponent
+    return false;
+  }
+
   return (
     <div className={classes.root}>
       <Grid item xs={12} md={6} style={{ color: 'red' }}>
@@ -57,7 +63,7 @@ const LeftColExpansionPanel = (props) => {
               style={{ color }}
             />
             <ListItemSecondaryAction>
-              {isFocused() ? (
+              {isFocused() || isAncestor() ? (
                 <div />
               ) : (
                 <IconButton aria-label="Add">
@@ -66,6 +72,8 @@ const LeftColExpansionPanel = (props) => {
                     onClick={() => {
                       console.log(title);
                       addChild({ title });
+                      // get childId somewhere, or call changeFocusChild within addChild (better idea)
+                      // changeFocusChild({ title });
                     }}
                   />
                 </IconButton>

src/containers/LeftContainer.jsx

@@ -32,6 +32,7 @@ const mapDispatchToProps = dispatch => ({
   // deleteAllData: () => dispatch(actions.deleteAllData()),
   addChild: ({ title }) => dispatch(actions.addChild({ title })),
   changeFocusComponent: ({ title }) => dispatch(actions.changeFocusComponent({ title })),
+  changeFocusChild: ({ title, childId }) => dispatch(actions.changeFocusChild({ title, childId })),
 });
 
 class LeftContainer extends Component {
@@ -62,6 +63,7 @@ class LeftContainer extends Component {
       classes,
       addChild,
       changeFocusComponent,
+      changeFocusChild,
     } = this.props;
     const { componentName } = this.state;
 
@@ -75,6 +77,7 @@ class LeftContainer extends Component {
         focusComponent={focusComponent}
         addChild={addChild}
         changeFocusComponent={changeFocusComponent}
+        changeFocusChild={changeFocusChild}
       />
     ));
 

src/containers/MainContainer.jsx

@@ -7,7 +7,12 @@ import { connect } from 'react-redux';
 // import TextField from '@material-ui/core/TextField';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import theme from '../components/theme';
-import { toggleDragging, openExpansionPanel, handleTransform } from '../actions/components';
+import {
+  toggleDragging,
+  openExpansionPanel,
+  handleTransform,
+  changeFocusChild,
+} from '../actions/components';
 import KonvaStage from '../components/KonvaStage.jsx';
 // import MainContainerHeader from '../components/MainContainerHeader.jsx';
 // import createModal from '../utils/createModal.util';
@@ -28,6 +33,7 @@ const mapDispatchToProps = dispatch => ({
   ),
   toggleComponentDragging: status => dispatch(toggleDragging(status)),
   openPanel: component => dispatch(openExpansionPanel(component)),
+  changeFocusChild: ({ title, childId }) => dispatch(changeFocusChild({ title, childId })),
 });
 
 const mapStateToProps = store => ({
@@ -87,6 +93,7 @@ class MainContainer extends Component {
       rightColumnOpen,
       focusComponent,
       focusChild,
+      changeFocusChild,
     } = this.props;
     const {
       increaseHeight,
@@ -115,6 +122,7 @@ class MainContainer extends Component {
                 openExpansionPanel={openPanel}
                 focusComponent={focusComponent}
                 focusChild={focusChild}
+                changeFocusChild={changeFocusChild}
               />
             ) : (
               <p>Add some components</p>

src/reducers/componentReducer.js

@@ -5,6 +5,7 @@ import {
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
   CHANGE_FOCUS_COMPONENT,
+  CHANGE_FOCUS_CHILD,
   UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
@@ -31,6 +32,7 @@ import {
   updateComponent,
   deleteComponent,
   changeFocusComponent,
+  changeFocusChild,
   updateChildren,
   reassignParent,
   setSelectableP,
@@ -83,7 +85,7 @@ const appComponent = {
   childrenArray: [],
   nextChildId: 1,
   focusChild: null,
-}
+};
 
 const initialApplicationState = {
   totalComponents: 1,
@@ -92,7 +94,7 @@ const initialApplicationState = {
   successOpen: false,
   errorOpen: false,
   focusComponent: appComponent,
-  focusChild: {  
+  focusChild: {
     childId: 0,
     componentName: null,
     position: {
@@ -129,6 +131,8 @@ const componentReducer = (state = initialApplicationState, action) => {
       return deleteComponent(state, action.payload);
     case CHANGE_FOCUS_COMPONENT:
       return changeFocusComponent(state, action.payload);
+    case CHANGE_FOCUS_CHILD:
+      return changeFocusChild(state, action.payload);
     case UPDATE_CHILDREN:
       return updateChildren(state, action.payload);
     case REASSIGN_PARENT: