Image upload full functionality

Author: tonyito

src/components/KonvaStage.tsx

@@ -1,3 +1,6 @@
+//This component includes a component for the background image to be uploaded as reference for drawing components
+//and also the parent rectangle components.
+
 import React, { Component } from "react";
 import { Stage, Layer, Line, Image } from "react-konva";
 import Rectangle from "./Rectangle.tsx";
@@ -104,6 +107,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     }
   };
 
+  //event handler to handle mouse click
   handleStageMouseDown = (e: any) => {
     // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
@@ -120,7 +124,6 @@ class KonvaStage extends Component<PropsInt, StateInt> {
 
     // find clicked rect by its name
     const rectChildId = e.target.attrs.childId;
-    // console.log("user clicked on child rectangle with childId: ", rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
     this.props.changeComponentFocusChild({
       componentId: this.props.focusComponent.id,
@@ -207,7 +210,9 @@ class KonvaStage extends Component<PropsInt, StateInt> {
             }}
           >
             {this.state.grid}
-            <Image image={image} draggable width={this.state.stageWidth*0.8} height={this.state.stageHeight*0.9}/>
+            <Image image={this.props.focusComponent.id === 1 ? image : null //only display background image if the focused component is <App>
+            } draggable width={this.state.stageWidth*0.8} height={this.state.stageHeight*0.9 } //for background image uploaded, fix to fit screen
+            />
             {!isEmpty(focusComponent) && this.getDirectChildrenCopy(focusComponent) 
               .map((child: ChildInt, i: number) => (
                 <Rectangle

src/components/Rectangle.tsx

@@ -62,7 +62,6 @@ class Rectangle extends Component<PropsInt, StateInt> {
       x: target.x() + focChild.position.x,
       y: target.y() + focChild.position.y
     };
-    console.log('width:', transformation.width, 'height:', transformation.height, 'x', transformation.x, 'y', transformation.y);
     this.props.handleTransform(componentId, childId, transformation);
   }
 
@@ -144,7 +143,7 @@ class Rectangle extends Component<PropsInt, StateInt> {
           strokeWidth={childType === 'COMP' ? 4 : 2}
           strokeScaleEnabled={false}
           draggable={false}
-          fill={childId === -1 ? 'white' : null}
+          fill={null}
           shadowBlur={childId === -1 ? 6 : null}
           fillPatternImage={this.state.image ? this.state.image : null}
           fillPatternScaleX={this.state.image ? width / this.state.image.width : 1}

src/containers/MainContainer.tsx

@@ -1,3 +1,6 @@
+//The main container includes both the Konva stage for creating component wireframes and 
+//the bottom panel. 
+
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { MuiThemeProvider } from "@material-ui/core/styles";
@@ -64,7 +67,6 @@ const mapDispatchToProps = (dispatch: any) => ({
         height
       })
     ),
-  // openPanel: component => dispatch(openExpansionPanel(component)),
   changeImagePath: (imageSource: string) => dispatch(actions.changeImagePath(imageSource)),
 
   changeFocusChild: ({ childId }: { childId: number }) =>

src/reducers/componentReducer.ts

@@ -129,7 +129,6 @@ const componentReducer = (state = initialApplicationState, action: any) => {
       return changeComponentFocusChild(state, action.payload);
     case CHANGE_IMAGE_SOURCE:
       return changeImageSource(state, action.payload);
-    // case CREATE_APPLICATION:
     case EXPORT_FILES:
       return { ...state, loading: true };
     case EXPORT_FILES_SUCCESS:

src/utils/componentReducer.util.ts

@@ -310,15 +310,14 @@ export const handleTransform = (
   };
 };
 
+//change image source
 export const changeImageSource = (state: ApplicationStateInt,  src :string) => {
   return {
     ...state, 
     imageSource: src
   }
 }
 
-
-
 //Reducer that deletes the component selected
 export const deleteComponent = (state: ApplicationStateInt, { componentId }: { componentId: number }) => {
   //select the component from list of components