Merge pull request #37 from sean1292/ace

Added Code Edit Mode

Author: ibeeliot

src/actionTypes/index.ts

@@ -1,12 +1,14 @@
 export const ADD_CHILD: string = 'ADD_CHILD';
 export const ADD_COMPONENT: string = 'ADD_COMPONENT';
 export const ADD_PROP: string = 'ADD_PROP';
-export const CHANGE_COMPONENT_FOCUS_CHILD: string = 'CHANGE_COMPONENT_FOCUS_CHILD';
+export const CHANGE_COMPONENT_FOCUS_CHILD: string =
+  'CHANGE_COMPONENT_FOCUS_CHILD';
 export const CHANGE_FOCUS_CHILD: string = 'CHANGE_FOCUS_CHILD';
 export const CHANGE_FOCUS_COMPONENT: string = 'CHANGE_FOCUS_COMPONENT';
 export const CHANGE_IMAGE_PATH: string = 'CHANGE_IMAGE_PATH';
 export const CHANGE_IMAGE_SOURCE: string = 'CHANGE_IMAGE_SOURCE';
 export const CHANGE_TUTORIAL: string = 'CHANGE_TUTORIAL';
+export const CODE_EDIT: string = 'CODE_EDIT';
 export const CREATE_APPLICATION: string = 'CREATE_APPLICATION';
 export const CREATE_APPLICATION_ERROR: string = 'CREATE_APPLICATION_ERROR';
 export const CREATE_APPLICATION_SUCCESS: string = 'CREATE_APPLICATION_SUCCESS';

src/actions/actionCreators.ts

@@ -3,7 +3,7 @@ import {
   ComponentsInt,
   PropInt,
   ChildInt,
-  Action,
+  Action
 } from '../interfaces/Interfaces';
 
 import {
@@ -15,6 +15,7 @@ import {
   CHANGE_FOCUS_COMPONENT,
   CHANGE_IMAGE_SOURCE,
   CHANGE_TUTORIAL,
+  CODE_EDIT,
   CREATE_APPLICATION,
   CREATE_APPLICATION_ERROR,
   CREATE_APPLICATION_SUCCESS,
@@ -36,7 +37,7 @@ import {
   TOGGLE_STATE,
   UNDO,
   UPDATE_HTML_ATTR,
-  UPDATE_CODE,
+  UPDATE_CODE
 } from '../actionTypes/index';
 import { loadState } from '../localStorage';
 import createFiles from '../utils/createFiles.util';
@@ -62,17 +63,17 @@ export const addComponent = ({ title }: { title: string }) => (
 
 export const addProp = (prop: PropInt) => ({
   type: ADD_PROP,
-  payload: { ...prop },
+  payload: { ...prop }
 });
 
 export const changeTutorial = (tutorial: number) => ({
   type: CHANGE_TUTORIAL,
-  payload: { tutorial },
+  payload: { tutorial }
 });
 
 export const changeImagePath = (imageSource: string) => ({
   type: CHANGE_IMAGE_SOURCE,
-  payload: { imageSource },
+  payload: { imageSource }
 });
 
 export const deleteChild = ({}) => (dispatch: (arg: Action) => void) => {
@@ -195,7 +196,7 @@ export const deleteAllData = () => ({
 });
 
 export const deleteImage = () => ({
-  type: DELETE_IMAGE,
+  type: DELETE_IMAGE
 });
 
 export const deleteProp = (propId: number) => (
@@ -214,7 +215,7 @@ export const exportFiles = ({
   components,
   path,
   appName,
-  exportAppBool,
+  exportAppBool
 }: {
   components: ComponentsInt;
   path: string;
@@ -223,26 +224,26 @@ export const exportFiles = ({
 }) => (dispatch: (arg: Action) => void) => {
   // 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: any) =>
       dispatch({
         type: EXPORT_FILES_SUCCESS,
-        payload: { status: true, dir: dir[0] },
+        payload: { status: true, dir: dir[0] }
       })
     )
     .catch((err: string) =>
       dispatch({
         type: EXPORT_FILES_ERROR,
-        payload: { status: true, err },
+        payload: { status: true, err }
       })
     );
 };
 
 export const handleClose = () => ({
   type: HANDLE_CLOSE,
-  payload: false,
+  payload: false
 });
 
 export const handleTransform = (
@@ -252,7 +253,7 @@ export const handleTransform = (
     x,
     y,
     width,
-    height,
+    height
   }: { x: number; y: number; width: number; height: number }
 ) => ({
   type: HANDLE_TRANSFORM,
@@ -262,8 +263,8 @@ export const handleTransform = (
     x,
     y,
     width,
-    height,
-  },
+    height
+  }
 });
 
 export const loadInitData = () => (dispatch: (arg: Action) => void) => {
@@ -273,8 +274,8 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
       payload: {
         data: data
           ? { ...data.workspace, history: [], historyIndex: 0, future: [] } //erase history upon opening app
-          : {},
-      },
+          : {}
+      }
     });
   });
 };
@@ -302,7 +303,11 @@ export const toggleEditMode = ({ id }: { id: number }) => (
 };
 //action creators for undo and redo
 export const undo = () => ({
-  type: UNDO,
+  type: UNDO
+});
+
+export const toggleCodeEdit = () => ({
+  type: CODE_EDIT
 });
 
 export const updateCode = ({

src/components/bottom/BottomPanel.tsx

@@ -3,25 +3,30 @@ import { connect } from 'react-redux';
 import { handleClose, deleteProp, addProp } from '../../actions/actionCreators';
 import BottomTabs from './BottomTabs';
 import { PropsInt, PropInt } from '../../interfaces/Interfaces';
+import { toggleCodeEdit } from '../../actions/actionCreators';
 
 const IPC = require('electron').ipcRenderer;
 
 const mapDispatchToProps = (dispatch: any) => ({
   handleNotificationClose: () => dispatch(handleClose()),
   deleteProp: (id: number) => dispatch(deleteProp(id)),
-  addProp: (prop: PropInt) => dispatch(addProp(prop))
+  addProp: (prop: PropInt) => dispatch(addProp(prop)),
+  toggleCodeEdit: () => dispatch(toggleCodeEdit())
 });
 
 const mapStateToProps = (store: any) => ({
   focusChild: store.workspace.focusChild,
-  components: store.workspace.components
+  components: store.workspace.components,
+  codeReadOnly: store.workspace.codeReadOnly
 });
 
 interface BottomPanelPropsInt extends PropsInt {
   deleteProp(id: number): void;
   addProp(prop: PropInt): void;
   changeFocusComponent(arg: { title: string }): void;
   updateCode(arg: { componentId: number; code: string }): void;
+  toggleCodeEdit(): void;
+  codeReadOnly: boolean;
 }
 
 class BottomPanel extends Component<BottomPanelPropsInt> {
@@ -33,7 +38,9 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
       addProp,
       focusChild,
       changeFocusComponent,
-      updateCode
+      updateCode,
+      toggleCodeEdit,
+      codeReadOnly
     } = this.props;
 
     return (
@@ -46,6 +53,8 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
           focusChild={focusChild}
           changeFocusComponent={changeFocusComponent}
           updateCode={updateCode}
+          toggleCodeEdit={toggleCodeEdit}
+          codeReadOnly={codeReadOnly}
         />
       </div>
     );

src/components/bottom/BottomTabs.tsx

@@ -15,6 +15,8 @@ interface BottomTabsPropsInt extends PropsInt {
   classes: any;
   changeFocusComponent(arg: { title: string }): void;
   updateCode(arg: { componentId: number; code: string }): void;
+  toggleCodeEdit(): void;
+  codeReadOnly: boolean;
 }
 
 // interface TreeInt {
@@ -141,7 +143,9 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
       deleteProp,
       addProp,
       focusChild,
-      updateCode
+      updateCode,
+      toggleCodeEdit,
+      codeReadOnly
     } = this.props;
     const { value } = this.state;
 
@@ -161,12 +165,12 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label='Application Tree'
+            label="Application Tree"
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label='Code Preview'
+            label="Code Preview"
           />
           <Tab
             disableRipple
@@ -183,13 +187,13 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label='Add Child Props'
+            label="Add Child Props"
           />
         </Tabs>
 
         {value === 0 && (
           <div
-            id='treeWrapper'
+            id="treeWrapper"
             style={{
               width: '100%',
               height: '100%'
@@ -229,6 +233,8 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
             updateCode={updateCode}
             components={components}
             changeFocusComponent={this.props.changeFocusComponent}
+            toggleCodeEdit={toggleCodeEdit}
+            codeReadOnly={codeReadOnly}
           />
         )}
         {value === 2 && <Props />}