Stable MVP version

src/actionTypes/index.js

@@ -1,26 +1,28 @@
-export const LOAD_INIT_DATA = "LOAD_INIT_DATA";
-export const ADD_COMPONENT = "ADD_COMPONENT";
-export const ADD_CHILD = "ADD_CHILD";
-export const UPDATE_COMPONENT = "UPDATE_COMPONENT";
-export const DELETE_COMPONENT = "DELETE_COMPONENT";
-export const CHANGE_FOCUS_COMPONENT = "CHANGE_FOCUS_COMPONENT";
-export const CHANGE_FOCUS_CHILD = "CHANGE_FOCUS_CHILD";
-export const UPDATE_CHILDREN = "UPDATE_CHILDREN";
-export const REASSIGN_PARENT = "REASSIGN_PARENT";
-export const SET_SELECTABLE_PARENTS = "SET_SELECTABLE_PARENTS";
-export const EXPORT_FILES = "EXPORT_FILES";
-export const EXPORT_FILES_SUCCESS = "EXPORT_FILES_SUCCESS";
-export const EXPORT_FILES_ERROR = "EXPORT_FILES_ERROR";
-export const HANDLE_CLOSE = "HANDLE_CLOSE";
-export const HANDLE_TRANSFORM = "HANDLE_TRANSFORM";
-export const CREATE_APPLICATION = "CREATE_APPLICATION";
-export const CREATE_APPLICATION_SUCCESS = "CREATE_APPLICATION_SUCCESS";
-export const CREATE_APPLICATION_ERROR = "CREATE_APPLICATION_ERROR";
-export const TOGGLE_DRAGGING = "TOGGLE_DRAGGING";
-export const MOVE_TO_BOTTOM = "MOVE_TO_BOTTOM";
-export const MOVE_TO_TOP = "MOVE_TO_TOP";
-export const OPEN_EXPANSION_PANEL = "OPEN_EXPANSION_PANEL";
-export const DELETE_PROP = "DELETE_PROP";
-export const ADD_PROP = "ADD_PROP";
-export const DELETE_ALL_DATA = "DELETE_ALL_DATA";
-export const CHANGE_IMAGE_PATH = "CHANGE_IMAGE_PATH";
+export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
+export const ADD_COMPONENT = 'ADD_COMPONENT';
+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 CHANGE_FOCUS_COMPONENT = 'CHANGE_FOCUS_COMPONENT';
+export const CHANGE_COMPONENT_FOCUS_CHILD = 'CHANGE_COMPONENT_FOCUS_CHILD';
+export const CHANGE_FOCUS_CHILD = 'CHANGE_FOCUS_CHILD';
+export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';
+export const REASSIGN_PARENT = 'REASSIGN_PARENT';
+export const SET_SELECTABLE_PARENTS = 'SET_SELECTABLE_PARENTS';
+export const EXPORT_FILES = 'EXPORT_FILES';
+export const EXPORT_FILES_SUCCESS = 'EXPORT_FILES_SUCCESS';
+export const EXPORT_FILES_ERROR = 'EXPORT_FILES_ERROR';
+export const HANDLE_CLOSE = 'HANDLE_CLOSE';
+export const HANDLE_TRANSFORM = 'HANDLE_TRANSFORM';
+export const CREATE_APPLICATION = 'CREATE_APPLICATION';
+export const CREATE_APPLICATION_SUCCESS = 'CREATE_APPLICATION_SUCCESS';
+export const CREATE_APPLICATION_ERROR = 'CREATE_APPLICATION_ERROR';
+export const TOGGLE_DRAGGING = 'TOGGLE_DRAGGING';
+export const MOVE_TO_BOTTOM = 'MOVE_TO_BOTTOM';
+export const MOVE_TO_TOP = 'MOVE_TO_TOP';
+export const OPEN_EXPANSION_PANEL = 'OPEN_EXPANSION_PANEL';
+export const DELETE_PROP = 'DELETE_PROP';
+export const ADD_PROP = 'ADD_PROP';
+export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
+export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';

src/actions/components.js

@@ -2,10 +2,12 @@ import {
   LOAD_INIT_DATA,
   ADD_COMPONENT,
   ADD_CHILD,
+  DELETE_CHILD,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
   CHANGE_FOCUS_COMPONENT,
   CHANGE_FOCUS_CHILD,
+  CHANGE_COMPONENT_FOCUS_CHILD,
   UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
@@ -63,24 +65,47 @@ export const parentReassignment = ({ index, id, parentIds }) => ({
 
 export const addComponent = ({ title }) => dispatch => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
-  // dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
 export const addChild = ({ title }) => dispatch => {
   dispatch({ type: ADD_CHILD, payload: { title } });
-  // dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
-export const deleteComponent = ({ index, id, parentIds = [] }) => dispatch => {
-  if (parentIds.length) {
-    // Delete Component  from its parent if it has a parent.
-    dispatch(updateChildren({ parentIds, childId: id, childIndex: index }));
-  }
-  // Reassign Component's children to its parent if it has one or make them orphans
-  dispatch(parentReassignment({ index, id, parentIds }));
+export const deleteChild = ({}) => dispatch => {
+  // with no payload, it will delete focusd child
+  dispatch({ type: DELETE_CHILD, payload: {} });
+};
 
-  dispatch({ type: DELETE_COMPONENT, payload: { index, id } });
-  dispatch({ type: SET_SELECTABLE_PARENTS });
+export const deleteComponent = ({
+  componentId,
+  stateComponents
+}) => dispatch => {
+  console.log(
+    "Hello from component.js delete component.componentId= ",
+    componentId
+  );
+
+  // find all places where the "to be delted" is a child and do what u gotta do
+  stateComponents.forEach(parent => {
+    parent.childrenArray
+      .filter(child => child.childComponentId == componentId)
+      .forEach(child => {
+        // console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
+        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 updateComponent = ({
@@ -123,6 +148,16 @@ export const changeFocusChild = ({ title, childId }) => dispatch => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
 };
 
+export const changeComponentFocusChild = ({
+  componentId,
+  childId
+}) => dispatch => {
+  dispatch({
+    type: CHANGE_COMPONENT_FOCUS_CHILD,
+    payload: { componentId, childId }
+  });
+};
+
 // export const exportFiles = ({ components, path }) => (dispatch) => {
 //   dispatch({
 //     type: EXPORT_FILES,
@@ -214,12 +249,12 @@ export const openExpansionPanel = component => ({
 //   payload: path,
 // });
 
-// export const deleteCompProp = ({ id, index }) => ({
-//   type: DELETE_PROP,
-//   payload: { id, index },
-// });
+export const deleteProp = ({ id, index }) => ({
+  type: DELETE_PROP,
+  payload: { id, index }
+});
 
-// export const addCompProp = prop => ({
-//   type: ADD_PROP,
-//   payload: { ...prop },
-// });
+export const addProp = prop => ({
+  type: ADD_PROP,
+  payload: { ...prop }
+});

src/components/BottomPanel.jsx

@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+// import PropTypes from 'prop-types';
+import {
+  handleClose,
+  deleteCompProp,
+  addCompProp
+} from "../actions/components";
+// import Snackbars from '../components/Snackbars.jsx';
+import RightTabs from "./RightTabs.jsx";
+
+const IPC = require("electron").ipcRenderer;
+
+const mapDispatchToProps = dispatch => ({
+  handleNotificationClose: () => dispatch(handleClose()),
+  deleteProp: ({ id, index }) => dispatch(deleteCompProp({ id, index })),
+  addProp: prop => dispatch(addCompProp(prop))
+});
+
+const mapStateToProps = store => ({
+  successOpen: store.workspace.successOpen,
+  errorOpen: store.workspace.errorOpen,
+  appDir: store.workspace.appDir
+});
+
+class BottomPanel extends Component {
+  state = {
+    successOpen: false,
+    errorOpen: false
+  };
+
+  viewAppDir = () => {
+    IPC.send("view_app_dir", this.props.appDir);
+  };
+
+  render() {
+    const {
+      components,
+      successOpen,
+      errorOpen,
+      handleNotificationClose,
+      appDir,
+      focusComponent,
+      deleteProp,
+      addProp
+      // rightColumnOpen
+    } = this.props;
+
+    return (
+      <div className="bottom-panel" style={{ width: "100%" }}>
+        <RightTabs
+          components={components}
+          focusComponent={focusComponent}
+          deleteProp={deleteProp}
+          addProp={addProp}
+          // rightColumnOpen={rightColumnOpen}
+        />
+        {/* <Snackbars
+          successOpen={successOpen}
+          errorOpen={errorOpen}
+          handleNotificationClose={handleNotificationClose}
+          msg={appDir}
+          viewAppDir={this.viewAppDir}
+        /> */}
+      </div>
+    );
+  }
+}
+
+// RightContainer.propTypes = {
+//   components: PropTypes.array.isRequired,
+//   successOpen: PropTypes.bool.isRequired,
+//   appDir: PropTypes.string,
+//   errorOpen: PropTypes.bool.isRequired,
+//   focusComponent: PropTypes.object.isRequired,
+//   handleNotificationClose: PropTypes.func.isRequired,
+//   deleteProp: PropTypes.func.isRequired,
+//   addProp: PropTypes.func.isRequired,
+//   width: PropTypes.number.isRequired,
+//   rightColumnOpen: PropTypes.bool.isRequired,
+// };
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BottomPanel);

src/components/GrandchildRectangle.jsx

@@ -1,10 +1,80 @@
-import React, { Component, Fragment } from 'react';
-import { Rect } from 'react-konva';
+import React, { Component } from 'react';
+import { Rect, Group } from 'react-konva';
 // import PropTypes from 'prop-types';
 
 class GrandchildRectangle extends Component {
+  getComponentColor(componentId) {
+    const color = this.props.components.find(comp => comp.id == componentId).color;
+    return color;
+  }
+
   render() {
-    return <Rect />;
+    const {
+      x,
+      y,
+      scaleX,
+      scaleY,
+      childId,
+      componentId,
+      childComponentName,
+      childComponentId,
+      width,
+      height,
+      focusChild,
+      components,
+    } = this.props;
+
+    // the Group is responsible for dragging of all children
+    // the Rect emits changes to child width and height with help from Transformer
+    return (
+      <Group
+        draggable={false}
+        x={x}
+        y={y}
+        scaleX={scaleX}
+        scaleY={scaleY}
+        width={width}
+        height={height}
+      >
+        <Rect
+          name={`${childId}`}
+          x={0}
+          y={0}
+          // absolutePosition={{ x, y }}
+          // childId={childId}
+          componentId={componentId}
+          scaleX={1}
+          scaleY={1}
+          width={width}
+          height={height}
+          stroke={this.getComponentColor(childComponentId)}
+          // fill={color}
+          // opacity={0.8}
+          strokeWidth={4}
+          strokeScaleEnabled={false}
+          draggable={false}
+        />
+        {components
+          .find(comp => comp.title === childComponentName)
+          .childrenArray.map((grandchild, i) => (
+            <GrandchildRectangle
+              key={i}
+              components={components}
+              componentId={componentId}
+              childComponentName={grandchild.componentName}
+              childComponentId={grandchild.childComponentId}
+              focusChild={focusChild}
+              // childId={grandchild.childId}
+              x={grandchild.position.x * (width / (window.innerWidth / 2))}
+              y={grandchild.position.y * (height / window.innerHeight)}
+              scaleX={1}
+              scaleY={1}
+              width={grandchild.position.width * (width / (window.innerWidth / 2))}
+              height={grandchild.position.height * (height / window.innerHeight)}
+            />
+          ))}
+      </Group>
+    );
   }
 }