childcompid merged with canvas resizing fix

Author: Tolga Mizrakci

src/components/KonvaStage.jsx

@@ -70,6 +70,7 @@ class KonvaStage extends Component {
                 key={`${i}${child.componentName}`}
                 draggable={false}
                 selectedShapeName={selectedShapeName}
+                components={components}
                 childId={child.childId}
                 focusChild={focusChild}
                 focusComponent={focusComponent}

src/components/Rectangle.jsx

@@ -6,22 +6,35 @@ import TransformerComponent from './TransformerComponent.jsx';
 // import PropTypes from 'prop-types';
 
 class Rectangle extends Component {
-  handleResize(componentId, childId, target) {
+  handleResize(componentId, childId, target, components) {
+    const focChild = components
+      .find(comp => comp.id === componentId)
+      .childrenArray.find(child => child.childId === childId);
+
     const transformation = {
       width: target.width() * target.scaleX(),
       height: target.height() * target.scaleY(),
+      x: target.x() + focChild.position.x,
+      y: target.y() + focChild.position.y,
     };
+
     this.props.handleTransform(componentId, childId, transformation);
   }
 
   handleDrag(componentId, childId, target) {
+    console.log(target);
+
     const transformation = {
       x: target.x(),
       y: target.y(),
     };
     this.props.handleTransform(componentId, childId, transformation);
   }
 
+  findDescendants(component) {
+
+  }
+
   render() {
     const {
       color,
@@ -35,6 +48,7 @@ class Rectangle extends Component {
       title,
       focusChild,
       focusComponent,
+      components,
     } = this.props;
 
     // the Group is responsible for dragging of all children
@@ -52,8 +66,9 @@ class Rectangle extends Component {
       >
         <Rect
           name={`${childId}`}
-          // x={0}
-          // y={0}
+          x={0}
+          y={0}
+          // absolutePosition={{ x, y }}
           childId={childId}
           componentId={componentId}
           title={title}
@@ -65,14 +80,16 @@ class Rectangle extends Component {
           color={color}
           // fill={color}
           // opacity={0.8}
-          onTransformEnd={event => this.handleResize(componentId, childId, event.target)}
+          onTransformEnd={event => this.handleResize(componentId, childId, event.target, components)
+          }
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
         />
         <Label>
           <Text text={title} fill={'white'} />
         </Label>
+        {}
         <Rect
           // replace with grandchildren rectangles
           scaleX={0.2}

src/utils/componentReducer.util.js

@@ -116,9 +116,9 @@ export const handleTransform = (
   state,
   { componentId, childId, x, y, width, height }
 ) => {
-  console.log("componentId and childId: ", componentId, childId);
-  console.log("state.focuscomponent: ", state.focusComponent);
-
+  // console.log('componentId and childId: ', componentId, childId);
+  // console.log('state.focuscomponent: ', state.focusComponent);
+  console.log("incoming x and y: ", x, y);
   const child = state.components
     .find(comp => comp.id === componentId)
     .childrenArray.find(child => child.childId === childId);