better recursive rendering, size is relative to canvas size. Shoube redesigned from canvas/component perspective

Author: ChristianEdwardPadilla

src/actions/components.js

@@ -25,56 +25,54 @@ 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 = ({ title }) => dispatch => {
+export const deleteChild = ({ title }) => (dispatch) => {
   dispatch({ type: DELETE_CHILD, payload: { title } });
 };
 
-export const deleteComponent = ({ index, id, parentIds = [] }) => dispatch => {
+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 }));
@@ -91,38 +89,38 @@ 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 } });
 };
 
@@ -144,23 +142,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 = ({
@@ -190,7 +186,7 @@ export const handleTransform = (
 
 export const toggleDragging = status => ({
   type: TOGGLE_DRAGGING,
-  payload: status
+  payload: status,
 });
 
 // export const moveToBottom = componentId => ({
@@ -205,7 +201,7 @@ export const toggleDragging = status => ({
 
 export const openExpansionPanel = component => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component }
+  payload: { component },
 });
 
 // export const deleteAllData = () => ({

src/components/GrandchildRectangle.jsx

@@ -61,12 +61,12 @@ class GrandchildRectangle extends Component {
               componentName={grandchild.componentName}
               focusChild={focusChild}
               // childId={grandchild.childId}
-              x={grandchild.position.x}
-              y={grandchild.position.y}
-              scaleX={0.8}
-              scaleY={0.8}
-              width={grandchild.position.width}
-              height={grandchild.position.height}
+              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}
             />
           ))}

src/components/KonvaStage.jsx

@@ -22,7 +22,7 @@ class KonvaStage extends Component {
     // // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
       // add functionality for allowing no focusChild
-      console.log(e.target.getStage(), this.main, this.group);
+      console.log(e.target.getStage());
       return;
     }
     // // clicked on transformer - do nothing
@@ -61,7 +61,7 @@ class KonvaStage extends Component {
         //   this.stage = node;
         // }}
         onMouseDown={this.handleStageMouseDown}
-        width={window.innerWidth}
+        width={window.innerWidth / 2}
         height={window.innerHeight}
       >
         <Layer>

src/components/Rectangle.jsx

@@ -105,12 +105,12 @@ class Rectangle extends Component {
               componentName={grandchild.componentName}
               focusChild={focusChild}
               // childId={childId}
-              x={grandchild.position.x * 0.8 + 10}
-              y={grandchild.position.y * 0.8 + 10}
-              scaleX={0.8}
-              scaleY={0.8}
-              width={grandchild.position.width}
-              height={grandchild.position.height}
+              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))}
               // title={child.componentName + child.childId}
               color={color}
               draggable={false}