Canvas MVP

src/components/GrandchildRectangle.jsx

@@ -7,6 +7,10 @@ class GrandchildRectangle extends Component {
     return color;
   }
 
+  getPseudoChild() {
+    return this.props.components.find(comp => comp.id === this.props.childComponentId);
+  }
+
   render() {
     const {
       x,
@@ -64,12 +68,20 @@ class GrandchildRectangle extends Component {
               childComponentId={grandchild.childComponentId}
               focusChild={focusChild}
               childId={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)}
+              // x={grandchild.position.x * (width / window.innerWidth)}
+              // y={grandchild.position.y * (height / window.innerHeight)}
+              // width={grandchild.position.width * (width / window.innerWidth)}
+              // height={grandchild.position.height * (height / window.innerHeight)}
+              width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
+              height={grandchild.position.height * (height / this.getPseudoChild().position.height)}
+              x={
+                (grandchild.position.x - this.getPseudoChild().position.x)
+                * (width / this.getPseudoChild().position.width)
+              }
+              y={
+                (grandchild.position.y - this.getPseudoChild().position.y)
+                * (height / this.getPseudoChild().position.height)
+              }
             />
           ))}
       </Group>

src/components/KonvaStage.jsx

@@ -1,16 +1,9 @@
-import React, { Component, createRef, Fragment } from "react";
+import React, { Component, createRef, Fragment } from 'react';
 // import PropTypes from 'prop-types';
 import {
-  Stage,
-  Layer,
-  Line,
-  Group,
-  Label,
-  Text,
-  Rect,
-  Transformer
-} from "react-konva";
-import Rectangle from "./Rectangle.jsx";
+  Stage, Layer, Line, Group, Label, Text, Rect, Transformer,
+} from 'react-konva';
+import Rectangle from './Rectangle.jsx';
 
 class KonvaStage extends Component {
   constructor(props) {
@@ -20,7 +13,7 @@ class KonvaStage extends Component {
       stageHeight: 1000,
       blockSnapSize: 5,
       grid: [],
-      gridStroke: 1
+      gridStroke: 1,
     };
   }
 
@@ -29,120 +22,112 @@ class KonvaStage extends Component {
     // here we should add listener for "container" resize
     // take a look here https://developers.google.com/web/updates/2016/10/resizeobserver
     // for simplicity I will just listen window resize
-    window.addEventListener("resize", this.checkSize);
+    window.addEventListener('resize', this.checkSize);
     this.createGrid();
   }
 
   componentWillUnmount() {
-    window.removeEventListener("resize", this.checkSize);
+    window.removeEventListener('resize', this.checkSize);
   }
 
   checkSize = () => {
     const width = this.container.offsetWidth;
     const height = this.container.offsetHeight;
     this.setState({
       stageWidth: width,
-      stageHeight: height
+      stageHeight: height,
     });
   };
 
-  handleStageMouseDown = e => {
+  handleStageMouseDown = (e) => {
     // // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
       // add functionality for allowing no focusChild
-      console.log("user clicked on canvas:");
+      console.log('user clicked on canvas:');
       return;
     }
     // // clicked on transformer - do nothing
-    const clickedOnTransformer =
-      e.target.getParent().className === "Transformer";
+    const clickedOnTransformer = e.target.getParent().className === 'Transformer';
     if (clickedOnTransformer) {
-      console.log("user clicked on transformer");
-      console.log("HELLOOOO", e.target.getParent().className);
+      console.log('user clicked on transformer');
+      console.log('HELLOOOO', e.target.getParent().className);
       return;
     }
 
     // find clicked rect by its name
     const rectChildId = e.target.attrs.childId;
-    console.log("user clicked on child rectangle with Id: ", rectChildId);
+    console.log('user clicked on child rectangle with childId: ', rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
     this.props.changeComponentFocusChild({
       componentId: this.props.focusComponent.id,
-      childId: rectChildId
+      childId: rectChildId,
     });
   };
 
   createGrid = () => {
-    let output = [];
+    const output = [];
     for (let i = 0; i < this.state.stageWidth / this.state.blockSnapSize; i++) {
       output.push(
         <Line
           points={[
             Math.round(i * this.state.blockSnapSize) + 0.5,
             0,
             Math.round(i * this.state.blockSnapSize) + 0.5,
-            this.state.stageHeight
+            this.state.stageHeight,
           ]}
-          stroke={"#ddd"}
+          stroke={'#ddd'}
           strokeWidth={this.state.gridStroke}
-          key={i + "vertical"}
-        />
+          key={`${i}vertical`}
+        />,
       );
     }
-    for (
-      let j = 0;
-      j < this.state.stageHeight / this.state.blockSnapSize;
-      j++
-    ) {
+    for (let j = 0; j < this.state.stageHeight / this.state.blockSnapSize; j++) {
       output.push(
         <Line
           points={[
             0,
             Math.round(j * this.state.blockSnapSize),
             this.state.stageWidth,
-            Math.round(j * this.state.blockSnapSize)
+            Math.round(j * this.state.blockSnapSize),
           ]}
-          stroke={"#ddd"}
+          stroke={'#ddd'}
           strokeWidth={this.state.gridStroke}
-          key={j + "horizontal"}
-        />
+          key={`${j}horizontal`}
+        />,
       );
     }
-    console.log("calling function to render grid");
+    console.log('calling function to render grid');
     this.setState({
-      grid: output
+      grid: output,
     });
   };
 
   render() {
     const {
-      components,
-      handleTransform,
-      focusComponent,
-      focusChild
+      components, handleTransform, focusComponent, focusChild,
     } = this.props;
 
     return (
       <div
         style={{
-          width: "100%",
-          height: "100%"
+          width: '100%',
+          height: '100%',
         }}
-        ref={node => {
+        ref={(node) => {
           this.container = node;
         }}
       >
         <Stage
-          className={"canvasStage"}
-          ref={node => {
+          className={'canvasStage'}
+          ref={(node) => {
             this.stage = node;
           }}
           onMouseDown={this.handleStageMouseDown}
           width={this.state.stageWidth}
           height={this.state.stageHeight}
         >
           <Layer
-            ref={node => {
+            ref={(node) => {
               this.layer = node;
             }}
           >
@@ -171,10 +156,8 @@ class KonvaStage extends Component {
                 />
               ))
               .sort(
-                (rectA, rectB) =>
-                  rectA.props.width * rectA.props.height <
-                  rectB.props.width * rectB.props.height
-              )
+                (rectA, rectB) => rectA.props.width * rectA.props.height < rectB.props.width * rectB.props.height,
+              ) // shouldnt this be subtraction instead of < ? see MDN
             // reasoning for the sort:
             // Konva determines zIndex (which rect is clicked on if rects overlap) based on rendering order
             // as long as the smallest components are rendered last they will always be accessible over the big boys