canvas snap grid & styling update

Author: Tolga Mizrakci

src/actionTypes/index.js

@@ -18,7 +18,6 @@ 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';

src/actions/components.js

@@ -19,91 +19,80 @@ import {
   CREATE_APPLICATION,
   CREATE_APPLICATION_SUCCESS,
   CREATE_APPLICATION_ERROR,
-  TOGGLE_DRAGGING,
   MOVE_TO_BOTTOM,
   MOVE_TO_TOP,
   OPEN_EXPANSION_PANEL,
   DELETE_PROP,
   ADD_PROP,
   DELETE_ALL_DATA,
-  CHANGE_IMAGE_PATH
-} from "../actionTypes/index";
+  CHANGE_IMAGE_PATH,
+} from '../actionTypes/index';
 
-import { loadState } from "../localStorage";
+import { loadState } from '../localStorage';
 
 // import createFiles from '../utils/createFiles.util';
 // import createApplicationUtil from '../utils/createApplication.util';
 
-export const loadInitData = () => dispatch => {
-  loadState().then(data =>
-    dispatch({
-      type: LOAD_INIT_DATA,
-      payload: {
-        data: data ? data.workspace : {}
-      }
-    })
-  );
+export const loadInitData = () => (dispatch) => {
+  loadState().then(data => dispatch({
+    type: LOAD_INIT_DATA,
+    payload: {
+      data: data ? data.workspace : {},
+    },
+  }));
 };
 
 export const updateChildren = ({ parentIds, childIndex, childId }) => ({
   type: UPDATE_CHILDREN,
   payload: {
     parentIds,
     childIndex,
-    childId
-  }
+    childId,
+  },
 });
 
 export const parentReassignment = ({ index, id, parentIds }) => ({
   type: REASSIGN_PARENT,
   payload: {
     index,
     id,
-    parentIds
-  }
+    parentIds,
+  },
 });
 
-export const addComponent = ({ title }) => dispatch => {
+export const addComponent = ({ title }) => (dispatch) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
-export const addChild = ({ title }) => dispatch => {
+export const addChild = ({ title }) => (dispatch) => {
   dispatch({ type: ADD_CHILD, payload: { title } });
 };
 
-export const deleteChild = ({}) => dispatch => {
+export const deleteChild = ({}) => (dispatch) => {
   // with no payload, it will delete focusd child
   dispatch({ type: DELETE_CHILD, payload: {} });
 };
 
-export const deleteComponent = ({
-  componentId,
-  stateComponents
-}) => dispatch => {
-  console.log(
-    "Hello from component.js delete component.componentId= ",
-    componentId
-  );
+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
-          }
-        });
+  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" } });
+  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
   // after taking care of the children delete the component
   dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
 };
@@ -113,48 +102,45 @@ export const updateComponent = ({
   index,
   newParentId = null,
   color = null,
-  stateful = null
-}) => dispatch => {
+  stateful = null,
+}) => (dispatch) => {
   dispatch({
     type: UPDATE_COMPONENT,
     payload: {
       id,
       index,
       newParentId,
       color,
-      stateful
-    }
+      stateful,
+    },
   });
 
   if (newParentId) {
     dispatch(
       updateChildren({
         parentIds: [newParentId],
         childId: id,
-        childIndex: index
-      })
+        childIndex: index,
+      }),
     );
   }
 
   dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
-export const changeFocusComponent = ({ title }) => dispatch => {
+export const changeFocusComponent = ({ title }) => (dispatch) => {
   dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
 };
 
 // make sure childId is being sent in
-export const changeFocusChild = ({ title, childId }) => dispatch => {
+export const changeFocusChild = ({ title, childId }) => (dispatch) => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
 };
 
-export const changeComponentFocusChild = ({
-  componentId,
-  childId
-}) => dispatch => {
+export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
   dispatch({
     type: CHANGE_COMPONENT_FOCUS_CHILD,
-    payload: { componentId, childId }
+    payload: { componentId, childId },
   });
 };
 
@@ -176,23 +162,21 @@ export const changeComponentFocusChild = ({
 
 export const handleClose = () => ({
   type: HANDLE_CLOSE,
-  payload: false
+  payload: false,
 });
 
-export const handleTransform = (
-  componentId,
-  childId,
-  { x, y, width, height }
-) => ({
+export const handleTransform = (componentId, childId, {
+  x, y, width, height,
+}) => ({
   type: HANDLE_TRANSFORM,
   payload: {
     componentId,
     childId,
     x,
     y,
     width,
-    height
-  }
+    height,
+  },
 });
 
 // export const createApplication = ({
@@ -220,41 +204,21 @@ export const handleTransform = (
 //   }
 // };
 
-export const toggleDragging = status => ({
-  type: TOGGLE_DRAGGING,
-  payload: status
-});
-
-// export const moveToBottom = componentId => ({
-//   type: MOVE_TO_BOTTOM,
-//   payload: componentId,
-// });
-
-// export const moveToTop = componentId => ({
-//   type: MOVE_TO_TOP,
-//   payload: componentId,
-// });
-
 export const openExpansionPanel = component => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component }
+  payload: { component },
 });
 
 // export const deleteAllData = () => ({
 //   type: DELETE_ALL_DATA,
 // });
 
-// export const changeImagePath = path => ({
-//   type: CHANGE_IMAGE_PATH,
-//   payload: path,
-// });
-
 export const deleteProp = ({ id, index }) => ({
   type: DELETE_PROP,
-  payload: { id, index }
+  payload: { id, index },
 });
 
 export const addProp = prop => ({
   type: ADD_PROP,
-  payload: { ...prop }
+  payload: { ...prop },
 });

src/components/BottomPanel.jsx

@@ -1,36 +1,30 @@
-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";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
+import RightTabs from './RightTabs.jsx';
 
-const IPC = require("electron").ipcRenderer;
+const IPC = require('electron').ipcRenderer;
 
 const mapDispatchToProps = dispatch => ({
   handleNotificationClose: () => dispatch(handleClose()),
   deleteProp: ({ id, index }) => dispatch(deleteCompProp({ id, index })),
-  addProp: prop => dispatch(addCompProp(prop))
+  addProp: prop => dispatch(addCompProp(prop)),
 });
 
 const mapStateToProps = store => ({
   successOpen: store.workspace.successOpen,
   errorOpen: store.workspace.errorOpen,
-  appDir: store.workspace.appDir
+  appDir: store.workspace.appDir,
 });
 
 class BottomPanel extends Component {
   state = {
     successOpen: false,
-    errorOpen: false
+    errorOpen: false,
   };
 
   viewAppDir = () => {
-    IPC.send("view_app_dir", this.props.appDir);
+    IPC.send('view_app_dir', this.props.appDir);
   };
 
   render() {
@@ -42,12 +36,12 @@ class BottomPanel extends Component {
       appDir,
       focusComponent,
       deleteProp,
-      addProp
+      addProp,
       // rightColumnOpen
     } = this.props;
 
     return (
-      <div className="bottom-panel" style={{ width: "100%" }}>
+      <div className="bottom-panel" style={{ width: '100%' }}>
         <RightTabs
           components={components}
           focusComponent={focusComponent}
@@ -67,20 +61,7 @@ class BottomPanel extends Component {
   }
 }
 
-// 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
+  mapDispatchToProps,
 )(BottomPanel);

src/components/GrandchildRectangle.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { Rect, Group } from 'react-konva';
-// import PropTypes from 'prop-types';
 
 class GrandchildRectangle extends Component {
   getComponentColor(componentId) {
@@ -40,8 +39,7 @@ class GrandchildRectangle extends Component {
           name={`${childId}`}
           x={0}
           y={0}
-          // absolutePosition={{ x, y }}
-          // childId={childId}
+          childId={childId}
           componentId={componentId}
           scaleX={1}
           scaleY={1}
@@ -56,15 +54,16 @@ class GrandchildRectangle extends Component {
         />
         {components
           .find(comp => comp.title === childComponentName)
-          .childrenArray.map((grandchild, i) => (
+          .childrenArray.filter(child => child.childId !== '-1')
+          .map((grandchild, i) => (
             <GrandchildRectangle
               key={i}
               components={components}
               componentId={componentId}
               childComponentName={grandchild.componentName}
               childComponentId={grandchild.childComponentId}
               focusChild={focusChild}
-              // childId={grandchild.childId}
+              childId={childId}
               x={grandchild.position.x * (width / (window.innerWidth / 2))}
               y={grandchild.position.y * (height / window.innerHeight)}
               scaleX={1}