Clear image functionality implemented

Author: tonyito

src/actionTypes/index.js

@@ -27,4 +27,5 @@ export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
 export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
 export const UPDATE_HTML_ATTR = 'UPDATE_HTML_ATTR';
 export const UPDATE_CHILDREN_SORT = 'UPDATE_CHILDREN_SORT';
-export const CHANGE_IMAGE_SOURCE = 'CHANGE_IMAGE_SOURCE';
+export const CHANGE_IMAGE_SOURCE = 'CHANGE_IMAGE_SOURCE';
+export const DELETE_IMAGE = 'DELETE_IMAGE';

src/actions/components.ts

@@ -25,7 +25,8 @@ import {
   DELETE_ALL_DATA,
   UPDATE_HTML_ATTR,
   UPDATE_CHILDREN_SORT,
-  CHANGE_IMAGE_SOURCE
+  CHANGE_IMAGE_SOURCE,
+  DELETE_IMAGE
 } from '../actionTypes/index.js';
 
 import { loadState } from '../localStorage';
@@ -118,6 +119,12 @@ childId: number;
   });
 };
 
+export const deleteImage = () => ({
+  type: DELETE_IMAGE,
+  payload: ''
+})
+
+
 export const exportFiles = ({
   components,
   path,

src/containers/AppContainer.tsx

@@ -21,11 +21,13 @@ type Props = {
   selectableChildren: Array<number>;
   loadInitData: any;
   changeImagePath: any;
+  changed: boolean;
 };
 
 type State = {
   image: HTMLImageElement | null;
   width: number;
+  changed: boolean;
 }
 
 const mapStateToProps = (store: any) => ({
@@ -50,6 +52,7 @@ class AppContainer extends Component<Props, State> {
     this.state = {
       image: null,
       width: 25,
+      changed: false
     };
 
     IPC.on('new-file', (event, file: string) => {
@@ -69,25 +72,30 @@ class AppContainer extends Component<Props, State> {
   // };
   componentDidUpdate(prevProps: Props) {
     const { imageSource } = this.props;
-    if (imageSource !== prevProps.imageSource) {
+    const {changed} = this.state;
+    if (imageSource == '' && changed) {
+      this.setState({...this.state, image:null, changed:false});
+
+    }
+    else if (imageSource !== prevProps.imageSource) {
       this.setImage(imageSource);
     }
   }
 
   setImage = (imageSource: string) => {
+    if (imageSource) {
     let image: HTMLImageElement;
     image = new window.Image();
     image.src = imageSource;
     image.onload = () => {
       // setState will redraw layer
       // because "image" property is changed
-      this.setState({ image });
+      this.setState({ image, changed: true });
     };
+  }
   };
 
   clearImage = () => {
-    const { changeImagePath } = this.props;
-    changeImagePath('');
     this.setState({
       image: null
     })
@@ -117,6 +125,7 @@ class AppContainer extends Component<Props, State> {
             focusComponent={focusComponent}
             selectableChildren={selectableChildren}
             setImage={this.setImage}
+            clearImage={this.clearImage}
           />
           <MainContainer components={components} image={this.state.image} 
             imageSource={this.props.imageSource}/>

src/containers/LeftContainer.tsx

@@ -33,6 +33,7 @@ interface PropsInt {
   deleteComponent: any;
   createApp: any;
   deleteAllData: any;
+  deleteImage: any;
 }
 
 interface StateInt {
@@ -42,6 +43,10 @@ interface StateInt {
   genOption: number;
 }
 
+const mapStateToProps = (store: any) => ({
+  imageSource: store.workspace.imageSource
+});
+
 const mapDispatchToProps = (dispatch: any) => ({
   addComponent: ({ title }: { title: string }) =>
     dispatch(actions.addComponent({ title })),
@@ -66,6 +71,7 @@ const mapDispatchToProps = (dispatch: any) => ({
     stateComponents: ComponentsInt;
   }) => dispatch(actions.deleteComponent({ componentId, stateComponents })),
   deleteAllData: () => dispatch(actions.deleteAllData()),
+  deleteImage: () => dispatch(actions.deleteImage()),
   createApp: ({
     path,
     components,
@@ -99,7 +105,8 @@ class LeftContainer extends Component<PropsInt, StateInt> {
         "Export components",
         "Export components with application files"
       ],
-      genOption: 0
+      genOption: 0.,
+      imageSource: this.props.imageSource
     };
 
     IPC.on("app_dir_selected", (event: any, path: string) => {
@@ -204,7 +211,8 @@ class LeftContainer extends Component<PropsInt, StateInt> {
       addChild,
       changeFocusComponent,
       changeFocusChild,
-      selectableChildren
+      selectableChildren,
+      deleteImage
     } = this.props;
     const { componentName, modal } = this.state;
 
@@ -225,7 +233,7 @@ class LeftContainer extends Component<PropsInt, StateInt> {
           components={components}
         />
       ));
-      const { addImage } = this;
+      const { addImage, clearImage } = this;
 
     return (
       <div className="column left">
@@ -302,7 +310,8 @@ class LeftContainer extends Component<PropsInt, StateInt> {
                 aria-label="Remove Image"
                 variant="contained"
                 fullWidth
-                onClick={() => {}}
+                onClick={deleteImage
+                }
                 className={classes.clearButton}
                 style={{ borderRadius: 0, top: 0, backgroundColor: '#dc004e', color: '#fff' }}
               >
@@ -406,7 +415,7 @@ function styles(): any {
 export default compose(
   withStyles(styles),
   connect(
-    null,
+    mapStateToProps,
     mapDispatchToProps
   )
 )(LeftContainer);

src/reducers/componentReducer.ts

@@ -14,6 +14,7 @@ import {
   CHANGE_FOCUS_CHILD,
   CHANGE_COMPONENT_FOCUS_CHILD,
   CHANGE_IMAGE_SOURCE,
+  DELETE_IMAGE,
   EXPORT_FILES,
   CREATE_APPLICATION,
   EXPORT_FILES_SUCCESS,
@@ -35,6 +36,7 @@ import {
   addChild,
   deleteChild,
   deleteComponent,
+  deleteImage,
   changeFocusComponent,
   changeComponentFocusChild,
   changeFocusChild,
@@ -131,6 +133,8 @@ const componentReducer = (state = initialApplicationState, action: any) => {
       return changeImageSource(state, action.payload);
     case EXPORT_FILES:
       return { ...state, loading: true };
+    case DELETE_IMAGE:
+      return deleteImage(state, action.payload);
     case EXPORT_FILES_SUCCESS:
       return exportFilesSuccess(state, action.payload);
     case CREATE_APPLICATION_ERROR:

src/utils/componentReducer.util.ts

@@ -223,6 +223,13 @@ export const deleteChild = (
   };
 };
 
+export const deleteImage = (state: ApplicationStateInt) => {
+  return {
+    ...state,
+    imageSource: ''
+  }
+}
+
 export const handleTransform = (
   state: ApplicationStateInt,
   {

src/utils/isEmpty.ts

@@ -0,0 +1,8 @@
+const isEmpty = (obj: object) => {
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) return false;
+    }
+    return true;
+  }
+
+  export default isEmpty;