canvas snap grid & styling update

src/components/KonvaStage.jsx

@@ -1,16 +1,26 @@
-import React, { Component, createRef, Fragment } from 'react';
+import React, { Component, createRef, Fragment } from "react";
 // import PropTypes from 'prop-types';
 import {
-  Stage, Layer, 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) {
     super(props);
     this.state = {
       stageWidth: 1000,
       stageHeight: 1000,
+      blockSnapSize: 5,
+      grid: [],
+      gridStroke: 1
     };
   }
 
@@ -19,70 +29,124 @@ 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("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 Id: ", rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
     this.props.changeComponentFocusChild({
       componentId: this.props.focusComponent.id,
-      childId: rectChildId,
+      childId: rectChildId
+    });
+  };
+
+  createGrid = () => {
+    let 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
+          ]}
+          stroke={"#ddd"}
+          strokeWidth={this.state.gridStroke}
+          key={i + "vertical"}
+        />
+      );
+    }
+    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)
+          ]}
+          stroke={"#ddd"}
+          strokeWidth={this.state.gridStroke}
+          key={j + "horizontal"}
+        />
+      );
+    }
+    console.log("calling function to render grid");
+    this.setState({
+      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
-          ref={(node) => {
+          className={"canvasStage"}
+          ref={node => {
             this.stage = node;
           }}
           onMouseDown={this.handleStageMouseDown}
           width={this.state.stageWidth}
           height={this.state.stageHeight}
         >
-          <Layer>
+          <Layer
+            ref={node => {
+              this.layer = node;
+            }}
+          >
+            {this.state.grid}
             {components
               .find(comp => comp.id === focusComponent.id)
               .childrenArray.map((child, i) => (
@@ -103,10 +167,13 @@ class KonvaStage extends Component {
                   title={child.componentName + child.childId}
                   handleTransform={handleTransform}
                   draggable={true}
+                  blockSnapSize={this.state.blockSnapSize}
                 />
               ))
               .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
               )
             // reasoning for the sort:
             // Konva determines zIndex (which rect is clicked on if rects overlap) based on rendering order

src/components/Rectangle.jsx

@@ -1,38 +1,54 @@
-import React, { Component } from 'react';
-import {
-  Rect, Group, Label, Text,
-} from 'react-konva';
-import TransformerComponent from './TransformerComponent.jsx';
-import GrandchildRectangle from './GrandchildRectangle.jsx';
+import React, { Component } from "react";
+import { Rect, Group, Label, Text } from "react-konva";
+import TransformerComponent from "./TransformerComponent.jsx";
+import GrandchildRectangle from "./GrandchildRectangle.jsx";
 
 class Rectangle extends Component {
   getComponentColor(componentId) {
-    const color = this.props.components.find(comp => comp.id == componentId).color;
+    const color = this.props.components.find(comp => comp.id == componentId)
+      .color;
     return color;
   }
 
-  handleResize(componentId, childId, target) {
+  handleResize(componentId, childId, target, blockSnapSize) {
     const focChild = this.props.components
       .find(comp => comp.id === componentId)
       .childrenArray.find(child => child.childId === childId);
 
     const transformation = {
-      width: target.width() * target.scaleX(),
-      height: target.height() * target.scaleY(),
+      // 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
+
+      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,
+      y: target.y() + focChild.position.y
     };
 
     this.props.handleTransform(componentId, childId, transformation);
   }
 
-  handleDrag(componentId, childId, target) {
+  handleDrag(componentId, childId, target, blockSnapSize) {
     console.log(target);
+    console.log("blockSnapSize", blockSnapSize);
 
     const transformation = {
-      x: target.x(),
-      y: target.y(),
+      // x: target.x(),
+      // y: target.y()
+      x: Math.round(target.x() / blockSnapSize) * blockSnapSize,
+      y: Math.round(target.y() / blockSnapSize) * blockSnapSize
     };
+    console.log(transformation);
     this.props.handleTransform(componentId, childId, transformation);
   }
 
@@ -52,6 +68,7 @@ class Rectangle extends Component {
       focusChild,
       components,
       draggable,
+      blockSnapSize
     } = this.props;
 
     // the Group is responsible for dragging of all children
@@ -65,11 +82,13 @@ class Rectangle extends Component {
         scaleY={scaleY}
         width={width}
         height={height}
-        onDragEnd={event => this.handleDrag(componentId, childId, event.target)}
+        onDragEnd={event =>
+          this.handleDrag(componentId, childId, event.target, blockSnapSize)
+        }
       >
         <Rect
           name={`${childId}`}
-          className={'childRect'}
+          className={"childRect"}
           x={0}
           y={0}
           childId={childId}
@@ -82,39 +101,47 @@ class Rectangle extends Component {
           stroke={this.getComponentColor(childComponentId)}
           // fill={color}
           // opacity={0.8}
-          onTransformEnd={event => this.handleResize(componentId, childId, event.target)}
+          onTransformEnd={event =>
+            this.handleResize(componentId, childId, event.target, blockSnapSize)
+          }
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
-          dashEnabled={childId === '-1'} // dash line only enabled for pseudochild
-          dash={[10, 3]} // 10px dashes with 3px gaps
+          fill={childId === "-1" ? "white" : null}
+          shadowBlur={childId === "-1" ? 6 : null}
+          // dashEnabled={childId === "-1"} // dash line only enabled for pseudochild
+          // dash={[10, 3]} // 10px dashes with 3px gaps
         />
         <Label>
           <Text
-            fontStyle={'bold'}
-            fontVariant={'small-caps'}
+            fontStyle={"bold"}
+            fontVariant={"small-caps"}
             // pseudochild's label should look different than normal children:
-            text={childId === '-1' ? title.slice(0, title.length - 2) : title}
-            fill={childId === '-1' ? this.getComponentColor(childComponentId) : 'white'}
-            fontSize={childId === '-1' ? 15 : 10}
+            text={childId === "-1" ? title.slice(0, title.length - 2) : title}
+            fill={
+              childId === "-1"
+                ? this.getComponentColor(childComponentId)
+                : "black"
+            }
+            fontSize={childId === "-1" ? 15 : 10}
             x={4}
-            y={childId === '-1' ? -15 : 5}
+            y={childId === "-1" ? -15 : 5}
           />
         </Label>
-        {focusChild
-          && focusChild.childId === childId
-          && draggable && (
+        {focusChild &&
+          focusChild.childId === childId &&
+          draggable && (
             <TransformerComponent
               focusChild={focusChild}
-              rectClass={'childRect'}
+              rectClass={"childRect"}
               anchorSize={8}
-              color={'grey'}
+              color={"grey"}
             />
-        )}
-        {childId !== '-1'
-          && components
+          )}
+        {childId !== "-1" &&
+          components
             .find(comp => comp.title === childComponentName)
-            .childrenArray.filter(child => child.childId !== '-1')
+            .childrenArray.filter(child => child.childId !== "-1")
             .map((grandchild, i) => (
               <GrandchildRectangle
                 key={i}
@@ -128,8 +155,12 @@ class Rectangle extends Component {
                 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)}
+                width={
+                  grandchild.position.width * (width / (window.innerWidth / 2))
+                }
+                height={
+                  grandchild.position.height * (height / window.innerHeight)
+                }
                 // title={child.componentName + child.childId}
               />
             ))}