changeFocusChild functionality added

Author: ChristianEdwardPadilla

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

@@ -24,21 +24,20 @@ class KonvaStage extends Component {
   // ADD CHANG FOCUS CHILD FUNCTIONALITY HERE
   handleStageMouseDown = (e) => {
     // // clicked on stage - cler selection
-    // if (e.target === e.target.getStage()) {
-    //   this.props.openExpansionPanel({});
-    //   return;
-    // }
+    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);
-
+    const rectChildId = e.target.attrs.childId;
+    console.log('e.target : ', rectChildId);
+    this.props.changeFocusChild({ childId: rectChildId });
     // if (rect) {
     //   this.props.openExpansionPanel(rect || this.props.focusComponent);
     // } else {
@@ -72,6 +71,7 @@ class KonvaStage extends Component {
       scaleY,
       focusComponent,
       focusChild,
+      changeFocusChild,
     } = this.props;
     const { selectedShapeName } = this.state;
 

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:

src/utils/componentReducer.util.js

@@ -166,13 +166,23 @@ export const deleteComponent = (state, { index, id }) => {
 };
 
 export const changeFocusComponent = (state, { title }) => {
-  const focusComp = state.components.filter((comp) => {
-    if (comp.title === title) return comp;
-  })[0];
+  const newFocusComp = state.components.find(comp => comp.title === title);
+  return {
+    ...state,
+    focusComponent: newFocusComp,
+  };
+};
 
+export const changeFocusChild = (state, { title, childId }) => {
+  // just finds first child with given title, need to pass in specific childId somehow
+  // maybe default to title if childId is unknown
+  const focComp = state.components.find(comp => comp.title === state.focusComponent.title);
+  console.log('erusbdfd', focComp, childId);
+  const newFocusChild = focComp.childrenArray.find(child => child.childId === childId) || state.focusChild;
+  console.log('trying to changeFocusChild', state.focusComponent.childrenArray);
   return {
     ...state,
-    focusComponent: focusComp,
+    focusChild: newFocusChild,
   };
 };