final canvas version

Author: ChristianEdwardPadilla

src/components/DataTable.jsx

@@ -30,12 +30,6 @@ function dataTable(props) {
     classes, rowData, rowHeader, deletePropHandler,
   } = props;
 
-  // console.log(classes)
-  // console.log('rowHeader');
-  // console.log(rowHeader);
-  // console.log('rowData');
-  // console.log(rowData);
-
   const renderHeader = rowHeader.map((col, idx) => (
     <TableCell key={`head_+${idx}`}>{col}</TableCell>
   ));

src/components/GrandchildRectangle.jsx

@@ -3,7 +3,6 @@ import { Rect, Group } from 'react-konva';
 
 class GrandchildRectangle extends Component {
   getComponentColor(componentId) {
-    console.log(componentId);
     const color = this.props.components.find(comp => comp.id == componentId).color;
     return color;
   }

src/components/KonvaStage.jsx

@@ -46,8 +46,8 @@ class KonvaStage extends Component {
       draggable: true,
       color: component.color,
     };
+    // console.log('getDirectChildrenCopy, pseudoChild.position: ', pseudoChild.position);
     childrenArrCopy = childrenArrCopy.concat(pseudoChild);
-    console.log('arr copy: ', childrenArrCopy);
     return childrenArrCopy;
   }
 

src/components/Rectangle.jsx

@@ -19,17 +19,24 @@ class Rectangle extends Component {
   }
 
   handleResize(componentId, childId, target, blockSnapSize) {
-    const focChild = this.props.focusChild;
-    // const focChild = this.props.components.find(comp => comp.id === componentId).focusChild;
-    // .childrenArray.find(child => child.childId === childId);
+    // focusChild is not being reliably updated (similar problem with focusComponent sometimes)
+    // so, grab the position of the focusChild manually from the children array
+    let focChild = this.props.components
+      .find(comp => comp.id === this.props.componentId)
+      .childrenArray.find(child => child.childId === childId);
 
+    if (childId == '-1') {
+      focChild = this.props.components.find(comp => comp.id === this.props.componentId);
+    }
     const transformation = {
       width: Math.round((target.width() * target.scaleX()) / blockSnapSize) * blockSnapSize,
       height: Math.round((target.height() * target.scaleY()) / blockSnapSize) * blockSnapSize,
       x: target.x() + focChild.position.x,
       y: target.y() + focChild.position.y,
     };
 
+    console.log(transformation);
+
     this.props.handleTransform(componentId, childId, transformation);
   }
 

src/utils/componentReducer.util.js

@@ -278,7 +278,7 @@ export const handleTransform = (state, {
       }),
       transformedComponent,
     ];
-    console.log('trans pos: ', transformedComponent.position);
+    // console.log('trans pos: ', transformedComponent.position);
     return { ...state, components };
   }
 
@@ -423,6 +423,7 @@ export const changeFocusComponent = (state, { title = state.focusComponent.title
 export const changeFocusChild = (state, { title, childId }) => {
   // just finds first child with given title, need to pass in specific childId somehow
   // maybe default to title if childId is unknown
+  console.log('change foc comp reducer: childId: ', childId);
   const focComp = state.components.find(comp => comp.title === state.focusComponent.title);
   let newFocusChild = focComp.childrenArray.find(child => child.childId === childId);