fixed toggle state functionality

Author: sean1292

src/actionTypes/index.js

@@ -4,6 +4,7 @@ export const ADD_CHILD = 'ADD_CHILD';
 export const DELETE_CHILD = 'DELETE_CHILD';
 export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
 export const DELETE_COMPONENT = 'DELETE_COMPONENT';
+export const TOGGLE_STATE = 'TOGGLE_STATE';
 export const CHANGE_FOCUS_COMPONENT = 'CHANGE_FOCUS_COMPONENT';
 export const CHANGE_COMPONENT_FOCUS_CHILD = 'CHANGE_COMPONENT_FOCUS_CHILD';
 export const CHANGE_FOCUS_CHILD = 'CHANGE_FOCUS_CHILD';
@@ -26,4 +27,7 @@ export const ADD_PROP = 'ADD_PROP';
 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 UPDATE_CHILDREN_SORT = 'UPDATE_CHILDREN_SORT';
+export const CHANGE_IMAGE_SOURCE = 'CHANGE_IMAGE_SOURCE';
+export const DELETE_IMAGE = 'DELETE_IMAGE';
+

src/actions/components.ts

@@ -1,13 +1,12 @@
-import {
-  ComponentInt, ComponentsInt, PropInt, ChildInt,
-} from '../utils/Interfaces.ts';
+import { ComponentInt, ComponentsInt, PropInt, ChildInt } from '../utils/Interfaces.ts';
 
 import {
   LOAD_INIT_DATA,
   ADD_COMPONENT,
   ADD_CHILD,
   DELETE_CHILD,
   DELETE_COMPONENT,
+  TOGGLE_STATE,
   CHANGE_FOCUS_COMPONENT,
   CHANGE_FOCUS_CHILD,
   CHANGE_COMPONENT_FOCUS_CHILD,
@@ -25,19 +24,28 @@ import {
   DELETE_ALL_DATA,
   UPDATE_HTML_ATTR,
   UPDATE_CHILDREN_SORT,
+  CHANGE_IMAGE_SOURCE,
+  DELETE_IMAGE
 } from '../actionTypes/index.js';
 
 import { loadState } from '../localStorage';
 import createFiles from '../utils/createFiles.util.ts';
 import createApplicationUtil from '../utils/createApplication.util.ts';
 
+export const changeImagePath = (imageSource: string) => ({
+  type: CHANGE_IMAGE_SOURCE,
+  payload: imageSource
+});
+
 export const loadInitData = () => (dispatch: any) => {
-  loadState().then((data: any) => dispatch({
-    type: LOAD_INIT_DATA,
-    payload: {
-      data: data ? data.workspace : {},
-    },
-  }));
+  loadState().then((data: any) =>
+    dispatch({
+      type: LOAD_INIT_DATA,
+      payload: {
+        data: data ? data.workspace : {}
+      }
+    })
+  );
 };
 
 export const addComponent = ({ title }: { title: string }) => (dispatch: any) => {
@@ -47,11 +55,11 @@ export const addComponent = ({ title }: { title: string }) => (dispatch: any) =>
 export const addChild = ({
   title,
   childType,
-  HTMLInfo,
+  HTMLInfo
 }: {
-title: string;
-childType: string;
-HTMLInfo: object;
+  title: string;
+  childType: string;
+  HTMLInfo: object;
 }) => (dispatch: any) => {
   dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
 };
@@ -63,10 +71,10 @@ export const deleteChild = ({}) => (dispatch: any) => {
 
 export const deleteComponent = ({
   componentId,
-  stateComponents,
+  stateComponents
 }: {
-componentId: number;
-stateComponents: ComponentsInt;
+  componentId: number;
+  stateComponents: ComponentsInt;
 }) => (dispatch: any) => {
   // find all places where the "to be deleted" is a child and do what u gotta do
   stateComponents.forEach((parent: ComponentInt) => {
@@ -78,8 +86,8 @@ stateComponents: ComponentsInt;
           payload: {
             parentId: parent.id,
             childId: child.childId,
-            calledFromDeleteComponent: true,
-          },
+            calledFromDeleteComponent: true
+          }
         });
       });
   });
@@ -101,55 +109,62 @@ export const changeFocusChild = ({ childId }: { childId: number }) => (dispatch:
 
 export const changeComponentFocusChild = ({
   componentId,
-  childId,
+  childId
 }: {
-componentId: number;
-childId: number;
+  componentId: number;
+  childId: number;
 }) => (dispatch: any) => {
   dispatch({
     type: CHANGE_COMPONENT_FOCUS_CHILD,
-    payload: { componentId, childId },
+    payload: { componentId, childId }
   });
 };
 
+export const deleteImage = () => ({
+  type: DELETE_IMAGE,
+  payload: ''
+});
+
 export const exportFiles = ({
   components,
   path,
   appName,
-  exportAppBool,
+  exportAppBool
 }: {
-components: ComponentsInt;
-path: string;
-appName: string;
-exportAppBool: boolean;
+  components: ComponentsInt;
+  path: string;
+  appName: string;
+  exportAppBool: boolean;
 }) => (dispatch: any) => {
   // this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
   dispatch({
-    type: EXPORT_FILES,
+    type: EXPORT_FILES
   });
 
   createFiles(components, path, appName, exportAppBool)
-    .then(dir => dispatch({
-      type: EXPORT_FILES_SUCCESS,
-      payload: { status: true, dir: dir[0] },
-    }))
-    .catch(err => dispatch({
-      type: EXPORT_FILES_ERROR,
-      payload: { status: true, err },
-    }));
+    .then(dir =>
+      dispatch({
+        type: EXPORT_FILES_SUCCESS,
+        payload: { status: true, dir: dir[0] }
+      })
+    )
+    .catch(err =>
+      dispatch({
+        type: EXPORT_FILES_ERROR,
+        payload: { status: true, err }
+      })
+    );
 };
 
 export const handleClose = () => ({
   type: HANDLE_CLOSE,
-  payload: false,
+  payload: false
 });
 
 export const handleTransform = (
   componentId: number,
   childId: number,
-  {
-    x, y, width, height,
-  }: { x: number; y: number; width: number; height: number },
+  { x, y, width, height }: { x: number; y: number; width: number; height: number }
 ) => ({
   type: HANDLE_TRANSFORM,
   payload: {
@@ -158,22 +173,22 @@ export const handleTransform = (
     x,
     y,
     width,
-    height,
-  },
+    height
+  }
 });
 
 export const createApplication = ({
   path,
   components = [],
   genOption,
   appName = 'reactype_app',
-  exportAppBool,
+  exportAppBool
 }: {
-path: string;
-components: ComponentsInt;
-genOption: number;
-appName: string;
-exportAppBool: boolean;
+  path: string;
+  components: ComponentsInt;
+  genOption: number;
+  appName: string;
+  exportAppBool: boolean;
 }) => (dispatch: any) => {
   if (genOption === 0) {
     exportAppBool = false;
@@ -182,72 +197,78 @@ exportAppBool: boolean;
         appName,
         path,
         components,
-        exportAppBool,
-      }),
+        exportAppBool
+      })
     );
   } else if (genOption) {
     exportAppBool = true;
     dispatch({
-      type: CREATE_APPLICATION,
+      type: CREATE_APPLICATION
     });
     createApplicationUtil({
       path,
       appName,
-      genOption,
+      genOption
       // exportAppBool
     })
       .then(() => {
         dispatch({
-          type: CREATE_APPLICATION_SUCCESS,
+          type: CREATE_APPLICATION_SUCCESS
         });
         dispatch(
           exportFiles({
             appName,
             path,
             components,
-            exportAppBool,
-          }),
+            exportAppBool
+          })
         );
       })
-      .catch(err => dispatch({
-        type: CREATE_APPLICATION_ERROR,
-        payload: { status: true, err },
-      }));
+      .catch(err =>
+        dispatch({
+          type: CREATE_APPLICATION_ERROR,
+          payload: { status: true, err }
+        })
+      );
   }
 };
 
 export const openExpansionPanel = (component: ComponentInt) => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component },
+  payload: { component }
 });
 
 export const deleteAllData = () => ({
-  type: DELETE_ALL_DATA,
+  type: DELETE_ALL_DATA
 });
 
 export const deleteProp = (propId: number) => (dispatch: any) => {
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
+export const toggleComponentState = (index: string) => (dispatch: any) => {
+  dispatch({ type: TOGGLE_STATE, payload: index });
+};
+
 export const addProp = (prop: PropInt) => ({
   type: ADD_PROP,
-  payload: { ...prop },
+  payload: { ...prop }
 });
 
 export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string }) => (
-  dispatch: any,
+  dispatch: any
 ) => {
   dispatch({
     type: UPDATE_HTML_ATTR,
-    payload: { attr, value },
+    payload: { attr, value }
   });
 };
 
 export const updateChildrenSort = ({ newSortValues }: { newSortValues: any }) => (
-  dispatch: any,
+  dispatch: any
 ) => {
   dispatch({
     type: UPDATE_CHILDREN_SORT,
-    payload: { newSortValues },
+    payload: { newSortValues }
   });
 };

src/components/CodePreview.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { format } from 'prettier';
-import componentRender from '../utils/componentRender.util.ts';
-import { ComponentInt, ComponentsInt } from '../utils/Interfaces.ts';
+import componentRender from '../utils/componentRender.util';
+import { ComponentInt, ComponentsInt } from '../utils/Interfaces';
 /** **   SortCHildren will be fixed , dont XXX the file  *** */
 // import SortChildren from './SortChildren.jsx';
 import SyntaxHighlighter from 'react-syntax-highlighter';

src/components/KonvaStage.tsx

@@ -1,10 +1,15 @@
+//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 } from "react-konva";
+import { Stage, Layer, Line, Image } from "react-konva";
 import Rectangle from "./Rectangle.tsx";
 import cloneDeep from "../utils/cloneDeep.ts";
 import { ComponentInt, ComponentsInt, ChildInt } from "../utils/Interfaces.ts";
+import isEmpty from '../utils/isEmpty';
 
 interface PropsInt {
+  image: HTMLImageElement;
   components: ComponentsInt;
   focusComponent: ComponentInt;
   selectableChildren: Array<number>;
@@ -102,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()) {
@@ -116,7 +122,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,
@@ -167,6 +172,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
 
   render() {
     const {
+      image,
       components,
       handleTransform,
       focusComponent,
@@ -202,7 +208,10 @@ class KonvaStage extends Component<PropsInt, StateInt> {
             }}
           >
             {this.state.grid}
-            {this.getDirectChildrenCopy(focusComponent)
+            <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
                   childType={child.childType}