small stage change

Author: ChristianEdwardPadilla

src/components/KonvaStage.jsx

@@ -1,18 +1,11 @@
-import React, { Component, createRef, Fragment } from "react";
-import Button from "@material-ui/core/Button";
+import React, { Component, createRef, Fragment } from 'react';
+import Button from '@material-ui/core/Button';
 
 // 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) {
@@ -22,7 +15,7 @@ class KonvaStage extends Component {
       stageHeight: 1000,
       blockSnapSize: 7,
       grid: [],
-      gridStroke: 1
+      gridStroke: 1,
     };
   }
 
@@ -31,36 +24,31 @@ 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();
   }
 
   getDirectChildrenCopy(focusComponent) {
-    const component = this.props.components.find(
-      comp => comp.id === focusComponent.id
-    );
+    const component = this.props.components.find(comp => comp.id === focusComponent.id);
 
-    const childrenArr = component.childrenArray.filter(
-      child => child.childId !== "-1"
-    );
+    const childrenArr = component.childrenArray.filter(child => child.childId !== '-1');
 
     let childrenArrCopy = this.cloneDeep(childrenArr);
 
     const pseudoChild = {
-      childId: "-1",
+      childId: '-1',
       childComponentId: component.id,
       componentName: component.title,
       position: {
         x: component.position.x,
         y: component.position.y,
         width: component.position.width,
-        height: component.position.height
+        height: component.position.height,
       },
       draggable: true,
-      color: component.color
+      color: component.color,
     };
-    // console.log('getDirectChildrenCopy, pseudoChild.position: ', pseudoChild.position);
-    childrenArrCopy = childrenArrCopy.concat(pseudoChild);
+    childrenArrCopy = childrenArrCopy.concat(pseudoChild); // could just use push here, concat needlessly generate new array
     return childrenArrCopy;
   }
 
@@ -69,19 +57,19 @@ class KonvaStage extends Component {
 
     if (Array.isArray(value)) {
       result = [];
-      value.forEach(elm => {
-        if (typeof elm === "object") {
+      value.forEach((elm) => {
+        if (typeof elm === 'object') {
           result.push(this.cloneDeep(elm));
         } else {
           result.push(elm);
         }
       });
       return result;
     }
-    if (typeof value === "object" && value !== null) {
+    if (typeof value === 'object' && value !== null) {
       result = {};
-      Object.keys(value).forEach(key => {
-        if (typeof value[key] === "object") {
+      Object.keys(value).forEach((key) => {
+        if (typeof value[key] === 'object') {
           result[key] = this.cloneDeep(value[key]);
         } else {
           result[key] = value[key];
@@ -93,40 +81,39 @@ class KonvaStage extends Component {
   }
 
   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');
       return;
     }
 
     // find clicked rect by its name
     const rectChildId = e.target.attrs.childId;
-    console.log("user clicked on child rectangle with childId: ", 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,
     });
   };
 
@@ -139,81 +126,73 @@ class KonvaStage extends Component {
             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`}
-        />
+        />,
       );
     }
-    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`}
-        />
+        />,
       );
     }
-    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,
-      deleteChild
+      components, handleTransform, focusComponent, focusChild, deleteChild,
     } = this.props;
 
     return (
       <div
         style={{
-          width: "100%",
-          height: "100%"
+          width: '100%',
+          height: '100%',
         }}
-        ref={node => {
+        ref={(node) => {
           this.container = node;
         }}
       >
         <Button
           onClick={deleteChild}
           style={{
-            width: "150px",
-            position: "relative",
-            float: "right",
-            background: "#dbdbdb",
-            zIndex: 2
+            width: '150px',
+            position: 'relative',
+            float: 'right',
+            background: '#dbdbdb',
+            zIndex: 2,
           }}
         >
           delete child
         </Button>
         <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;
             }}
           >
@@ -242,9 +221,7 @@ 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