changeComponentFocusChild

src/actionTypes/index.js

@@ -1,27 +1,28 @@
-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_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

@@ -7,6 +7,7 @@ import {
   DELETE_COMPONENT,
   CHANGE_FOCUS_COMPONENT,
   CHANGE_FOCUS_CHILD,
+  CHANGE_COMPONENT_FOCUS_CHILD,
   UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
@@ -25,113 +26,118 @@ import {
   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 => { // with no payload, it will delete focusd child 
-  dispatch({ type: DELETE_CHILD, payload: { } });
+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)
-
-  // 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 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 = ({
   id,
   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) => {
+  dispatch({ type: CHANGE_COMPONENT_FOCUS_CHILD, payload: { componentId, childId } });
+};
+
 // export const exportFiles = ({ components, path }) => (dispatch) => {
 //   dispatch({
 //     type: EXPORT_FILES,
@@ -150,23 +156,21 @@ export const changeFocusChild = ({ title, childId }) => dispatch => {
 
 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 = ({
@@ -196,7 +200,7 @@ export const handleTransform = (
 
 export const toggleDragging = status => ({
   type: TOGGLE_DRAGGING,
-  payload: status
+  payload: status,
 });
 
 // export const moveToBottom = componentId => ({
@@ -211,7 +215,7 @@ export const toggleDragging = status => ({
 
 export const openExpansionPanel = component => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component }
+  payload: { component },
 });
 
 // export const deleteAllData = () => ({

src/components/GrandchildRectangle.jsx

@@ -1,10 +1,86 @@
-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) {
+    console.log('siodfbsldfk', componentId);
+    const color = this.props.components.find(comp => comp.id == componentId).color;
+    console.log(color);
+
+    return color;
+  }
+
   render() {
-    return <Rect />;
+    const {
+      color,
+      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={color}
+          color={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)}
+              color={color}
+            />
+          ))}
+      </Group>
+    );
   }
 }