Merge pull request #24 from sean1292/staging

Change focus component can now be done from component tree graph

Author: jzuniga206

src/components/BottomPanel.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { handleClose, deleteProp, addProp } from '../actions/components';
 import BottomTabs from './BottomTabs';
 import { PropsInt, PropInt } from '../utils/Interfaces';
+import { changeFocusComponent } from '../utils/componentReducer.util';
 
 const IPC = require('electron').ipcRenderer;
 
@@ -20,11 +21,19 @@ const mapStateToProps = (store: any) => ({
 interface BottomPanelPropsInt extends PropsInt {
   deleteProp(id: number): void;
   addProp(prop: PropInt): void;
+  changeFocusComponent(arg: { title: string }): void;
 }
 
 class BottomPanel extends Component<BottomPanelPropsInt> {
   render() {
-    const { components, focusComponent, deleteProp, addProp, focusChild } = this.props;
+    const {
+      components,
+      focusComponent,
+      deleteProp,
+      addProp,
+      focusChild,
+      changeFocusComponent
+    } = this.props;
 
     return (
       <div className="bottom-panel" style={{ width: '100%' }}>
@@ -34,6 +43,7 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
           deleteProp={deleteProp}
           addProp={addProp}
           focusChild={focusChild}
+          changeFocusComponent={changeFocusComponent}
         />
       </div>
     );

src/components/BottomTabs.tsx

@@ -12,6 +12,7 @@ interface BottomTabsPropsInt extends PropsInt {
   deleteProp(id: number): void;
   addProp(prop: PropInt): void;
   classes: any;
+  changeFocusComponent(arg: { title: string }): void;
 }
 
 // interface TreeInt {
@@ -102,6 +103,10 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
     this.setState({ value });
   };
 
+  handleClick = (event: any, node: any) => {
+    this.props.changeFocusComponent({ title: event.name });
+  };
+
   generateComponentTree(componentId: number, components: ComponentsInt) {
     const component = components.find(comp => comp.id === componentId);
     const tree: any = { name: component.title, attributes: {}, children: [] };
@@ -177,6 +182,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
               separation={{ siblings: 0.3, nonSiblings: 0.3 }}
               transitionDuration={0}
               translate={this.state.translate}
+              onClick={this.handleClick}
               styles={{
                 nodes: {
                   node: {

src/containers/MainContainer.tsx

@@ -10,7 +10,8 @@ import {
   handleTransform,
   changeFocusChild,
   changeComponentFocusChild,
-  deleteChild
+  deleteChild,
+  changeFocusComponent
 } from '../actions/components';
 import KonvaStage from '../components/KonvaStage';
 import { PropsInt, ApplicationStateInt } from '../utils/Interfaces';
@@ -24,6 +25,7 @@ interface MainContPropsInt extends PropsInt {
   ): void;
   changeComponentFocusChild(arg: { componentId: number; childId: number }): void;
   deleteChild(obj: object): void;
+  changeFocusComponent(arg: { title: string }): void;
 }
 
 interface StateInt {
@@ -57,6 +59,8 @@ const mapDispatchToProps = (dispatch: any) => ({
   // changeImagePath: (imageSource: string) =>
   //   dispatch(actions.changeImagePath(imageSource)),
 
+  changeFocusComponent: ({ title }: { title: string }) => dispatch(changeFocusComponent({ title })),
+
   //this function changes the focus of the child within the focused component, thereby binding it to the transformer as a node
   changeFocusChild: ({ childId }: { childId: number }) => dispatch(changeFocusChild({ childId })),
 
@@ -94,6 +98,7 @@ class MainContainer extends Component<MainContPropsInt, StateInt> {
       focusComponent,
       focusChild,
       changeFocusChild,
+      changeFocusComponent,
       changeComponentFocusChild,
       deleteChild,
       image
@@ -123,7 +128,10 @@ class MainContainer extends Component<MainContPropsInt, StateInt> {
               /*  classes={classes}  commented out because not used anywhere*/
             />
           </div>
-          <BottomPanel focusComponent={focusComponent} />
+          <BottomPanel
+            focusComponent={focusComponent}
+            changeFocusComponent={changeFocusComponent}
+          />
         </div>
       </MuiThemeProvider>
     );