Merge pull request #41 from tonyito/mvp

React Native mode Konva stage function implementation

Author: jzuniga206

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

main.js

@@ -85,8 +85,8 @@ const createWindow = () => {
   // eslint-disable-next-line
   const { width, height } = require('electron').screen.getPrimaryDisplay().size;
   mainWindow = new BrowserWindow({
-    width,
-    height,
+    width: 1920,
+    height: 1080,
     webPreferences: {
       zoomFactor: 0.7,
       'node-Integration': false

package.json

@@ -110,7 +110,7 @@
     "d3": "^5.9.2",
     "electron-reload": "^1.4.0",
     "enzyme": "^3.4.1",
-    "konva": "^4.1.6",
+    "konva": "^4.2.0",
     "localforage": "^1.7.2",
     "lodash.throttle": "^4.1.1",
     "material-table": "^1.25.2",

prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

src/actionTypes/index.ts

@@ -32,6 +32,7 @@ export const REASSIGN_PARENT: string = 'REASSIGN_PARENT';
 export const REDO: string = 'REDO';
 export const SET_SELECTABLE_PARENTS: string = 'SET_SELECTABLE_PARENTS';
 export const TOGGLE_CLASS: string = 'TOGGLE_CLASS';
+export const TOGGLE_NATIVE: string = 'TOGGLE_NATIVE';
 export const TOGGLE_STATE: string = 'TOGGLE_STATE';
 export const UNDO: string = 'UNDO';
 export const UPDATE_COMPONENT: string = 'UPDATE_COMPONENT';

src/actions/actionCreators.ts

@@ -34,6 +34,7 @@ import {
   LOAD_INIT_DATA,
   REDO,
   TOGGLE_CLASS,
+  TOGGLE_NATIVE,
   TOGGLE_STATE,
   UNDO,
   UPDATE_HTML_ATTR,
@@ -81,35 +82,6 @@ export const deleteChild = ({}) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: DELETE_CHILD, payload: {} });
 };
 
-export const deleteComponent = ({
-  componentId,
-  stateComponents
-}: {
-  componentId: number;
-  stateComponents: ComponentsInt;
-}) => (dispatch: (arg: Action) => void) => {
-  // find all places where the "to be deleted" is a child and do what u gotta do
-  stateComponents.forEach((parent: ComponentInt) => {
-    parent.childrenArray
-      .filter((child: ChildInt) => child.childComponentId === componentId)
-      .forEach((child: ChildInt) => {
-        dispatch({
-          type: DELETE_CHILD,
-          payload: {
-            parentId: parent.id,
-            childId: child.childId,
-            calledFromDeleteComponent: true
-          }
-        });
-      });
-  });
-
-  // change focus to app
-  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
-  // after taking care of the children delete the component
-  dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
-};
-
 export const changeComponentFocusChild = ({
   componentId,
   childId
@@ -130,6 +102,7 @@ export const changeFocusChild = ({ childId }: { childId: number }) => (
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
 };
 
+
 export const changeFocusComponent = ({ title }: { title: string }) => (
   dispatch: (arg: Action) => void
 ) => {
@@ -195,6 +168,36 @@ export const deleteAllData = () => ({
   type: DELETE_ALL_DATA
 });
 
+
+export const deleteComponent = ({
+  componentId,
+  stateComponents
+}: {
+  componentId: number;
+  stateComponents: ComponentsInt;
+}) => (dispatch: (arg: Action) => void) => {
+  // find all places where the "to be deleted" is a child and do what u gotta do
+  stateComponents.forEach((parent: ComponentInt) => {
+    parent.childrenArray
+      .filter((child: ChildInt) => child.childComponentId === componentId)
+      .forEach((child: ChildInt) => {
+        dispatch({
+          type: DELETE_CHILD,
+          payload: {
+            parentId: parent.id,
+            childId: child.childId,
+            calledFromDeleteComponent: true
+          }
+        });
+      });
+  });
+
+  // change focus to app
+  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
+  // after taking care of the children delete the component
+  dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
+};
+
 export const deleteImage = () => ({
   type: DELETE_IMAGE
 });
@@ -301,7 +304,11 @@ export const toggleEditMode = ({ id }: { id: number }) => (
 ) => {
   dispatch({ type: EDIT_MODE, payload: { id } });
 };
-//action creators for undo and redo
+
+export const toggleNative = () => ({
+  type: TOGGLE_NATIVE,
+});
+
 export const undo = () => ({
   type: UNDO
 });

src/components/bottom/BottomPanel.tsx

@@ -1,22 +1,24 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { handleClose, deleteProp, addProp } from '../../actions/actionCreators';
+import { handleClose, deleteProp, addProp, toggleNative, changeComponentFocusChild } 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)),
-  toggleCodeEdit: () => dispatch(toggleCodeEdit())
+  deleteProp: (id: number) => dispatch(deleteProp(id)),
+  handleNotificationClose: () => dispatch(handleClose()),
+  toggleNative: () => dispatch(toggleNative()),
+  toggleCodeEdit: () => dispatch(toggleCodeEdit()),
 });
 
 const mapStateToProps = (store: any) => ({
   focusChild: store.workspace.focusChild,
   components: store.workspace.components,
+  native: store.workspace.native,
   codeReadOnly: store.workspace.codeReadOnly
 });
 
@@ -25,8 +27,14 @@ interface BottomPanelPropsInt extends PropsInt {
   addProp(prop: PropInt): void;
   changeFocusComponent(arg: { title: string }): void;
   updateCode(arg: { componentId: number; code: string }): void;
+  toggleNative(): void;
+  native: boolean;
   toggleCodeEdit(): void;
   codeReadOnly: boolean;
+  changeComponentFocusChild(arg: {
+    componentId: number;
+    childId: number;
+  }): void;
 }
 
 class BottomPanel extends Component<BottomPanelPropsInt> {
@@ -39,8 +47,11 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
       focusChild,
       changeFocusComponent,
       updateCode,
+      toggleNative,
+      native,
       toggleCodeEdit,
-      codeReadOnly
+      codeReadOnly,
+      changeComponentFocusChild
     } = this.props;
 
     return (
@@ -53,6 +64,8 @@ class BottomPanel extends Component<BottomPanelPropsInt> {
           focusChild={focusChild}
           changeFocusComponent={changeFocusComponent}
           updateCode={updateCode}
+          toggleNative={toggleNative}
+          native={native}
           toggleCodeEdit={toggleCodeEdit}
           codeReadOnly={codeReadOnly}
         />