merge with changeFocusChild functionality and save child position functionality

Author: ChristianEdwardPadilla

src/components/KonvaStage.jsx

@@ -18,12 +18,8 @@ class KonvaStage extends Component {
     this.group = createRef();
   }
 
-  // Christian - this function causes the expansionPanel of the clicked rect to open
-  // (and focusedComponent to change, which we don't want)
-  // could reuse this logic for affecting state of children array
-  // ADD CHANG FOCUS CHILD FUNCTIONALITY HERE
   handleStageMouseDown = (e) => {
-    // // clicked on stage - cler selection
+    // // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
       // add functionality for allowing no focusChild
       return;
@@ -38,25 +34,8 @@ class KonvaStage extends Component {
     const rectChildId = e.target.attrs.childId;
     console.log('e.target : ', rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
-    // if (rect) {
-    //   this.props.openExpansionPanel(rect || this.props.focusComponent);
-    // } else {
-    //   this.props.openExpansionPanel(this.props.focusComponent);
-    // }
   };
 
-  //  WAS ALREADY COMMENTED OUT
-  // handleStageDrag = () => {
-  //   // const mainWindowHeight = this.main.current.clientHeight;
-  //   // const mainWindowWidth = this.main.current.clientWidth;
-  //   // const groupX = this.refs.group.attrs.x;
-  //   // const groupY = this.refs.group.attrs.y;
-
-  //   // const componentX = (mainWindowWidth / 2) - groupX;
-  //   // const componentY = (mainWindowHeight / 2) - groupY;
-  //   // console.log(componentX, componentY);
-  // }
-
   componentDidMount() {
     // this.props.setImage();
   }
@@ -99,7 +78,7 @@ class KonvaStage extends Component {
                 <Rectangle
                   draggable={child.draggable}
                   selectedShapeName={selectedShapeName}
-                  key={i + child.componentName}
+                  key={`${i}${child.componentName}`}
                   childId={child.childId}
                   componentId={focusComponent.id}
                   x={child.position.x}

src/utils/componentReducer.util.js

@@ -113,6 +113,51 @@ export const addChild = (state, { title }) => {
   };
 };
 
+export const handleTransform = (state, {
+  componentId, childId, x, y, width, height,
+}) => {
+  console.log('componentId and childId: ', componentId, childId);
+  console.log('state.focuscomponent: ', state.focusComponent);
+
+  const child = state.components
+    .find(comp => comp.id === componentId)
+    .childrenArray.find(child => child.childId === childId);
+
+  const transformedChild = {
+    ...child,
+    position: {
+      x,
+      y,
+      width,
+      height,
+    },
+  };
+
+  const children = [
+    ...state.components.find(comp => comp.id === componentId).childrenArray.filter((child) => {
+      if (child.childId !== childId) return child;
+    }),
+    transformedChild,
+  ];
+
+  const component = {
+    ...state.components.find(comp => comp.id === componentId),
+    childrenArray: children,
+  };
+
+  const components = [
+    ...state.components.filter((comp) => {
+      if (comp.id !== componentId) return comp;
+    }),
+    component,
+  ];
+
+  return {
+    ...state,
+    components,
+  };
+};
+
 export const updateComponent = (
   state,
   {
@@ -255,7 +300,10 @@ export const reassignParent = (state, { index, id, parentIds = [] }) => {
     // Give the parent all children of it's to be deleted child
     if (parentIds.includes(comp.id)) {
       const prevChildrenIds = comp.childrenIds;
-      return { ...comp, childrenIds: [...new Set(prevChildrenIds.concat(childrenIds))] };
+      return {
+        ...comp,
+        childrenIds: [...new Set(prevChildrenIds.concat(childrenIds))],
+      };
     }
     return comp;
   });
@@ -291,26 +339,26 @@ export const handleClose = (state, status) => ({
   successOpen: status,
 });
 
-export const updatePosition = (state, { id, x, y }) => {
-  const components = state.components.map((component) => {
-    if (component.id === id) {
-      return {
-        ...component,
-        position: {
-          x,
-          y,
-          width: component.position.width,
-          height: component.position.height,
-        },
-      };
-    }
-    return component;
-  });
-  return {
-    ...state,
-    components,
-  };
-};
+// export const updatePosition = (state, { id, x, y }) => {
+//   const components = state.components.map(component => {
+//     if (component.id === id) {
+//       return {
+//         ...component,
+//         position: {
+//           x,
+//           y,
+//           width: component.position.width,
+//           height: component.position.height
+//         }
+//       };
+//     }
+//     return component;
+//   });
+//   return {
+//     ...state,
+//     components
+//   };
+// };
 
 /**
  * Applies the new x and y coordinates, as well as, the new width
@@ -326,32 +374,7 @@ export const updatePosition = (state, { id, x, y }) => {
  * @param {number} height - updated height
  */
 
-export const handleTransform = (state, {
-  componentId, childId, x, y, width, height,
-}) => {
-  console.log('componentId and childId: ', componentId, childId);
-  console.log('state.focuscomponent: ', state.focusComponent);
-  // const components = state.components
-  //   .find(comp => comp.id === componentId)
-  //   .childrenArray.map((child) => {
-  //     if (child.childId === childId) {
-  //       return {
-  //         ...child,
-  //         position: {
-  //           x,
-  //           y,
-  //           width,
-  //           height,
-  //         },
-  //       };
-  //     }
-  //     return child;
-  //   });
-  return {
-    ...state,
-    // components,
-  };
-};
+// handleTransform used to be here
 
 /**
  * Toggles the drag of the group, as well as all components. If the group is draggable the