transformer changes

Author: ChristianEdwardPadilla

src/components/KonvaStage.jsx

@@ -4,6 +4,7 @@ import {
   Stage, Layer, Group, Label, Text, Rect, Transformer,
 } from 'react-konva';
 import Rectangle from './Rectangle.jsx';
+import TransformerComponent from './TransformerComponent.jsx';
 
 class KonvaStage extends Component {
   constructor(props) {
@@ -115,6 +116,7 @@ class KonvaStage extends Component {
                   stroke={focusComponent.color}
                   x={0}
                   y={0}
+                  name={'-1'}
                   width={focusComponent.position.width}
                   height={focusComponent.position.height}
                   strokeWidth={2}
@@ -130,6 +132,7 @@ class KonvaStage extends Component {
                     y={-15}
                   />
                 </Label>
+                <TransformerComponent rectClass={'componentRect'} />
               </Group>
             )}
             {components

src/components/Rectangle.jsx

@@ -70,6 +70,7 @@ class Rectangle extends Component {
       >
         <Rect
           name={`${childId}`}
+          className={'childRect'}
           x={0}
           y={0}
           // absolutePosition={{ x, y }}
@@ -121,7 +122,7 @@ class Rectangle extends Component {
           ))}
         {focusChild
           && focusChild.childId === childId
-          && draggable && <TransformerComponent focusChild={focusChild} />}
+          && draggable && <TransformerComponent focusChild={focusChild} rectClass={'childRect'} />}
       </Group>
     );
   }

src/components/TransformerComponent.jsx

@@ -4,18 +4,28 @@ import { Transformer } from 'react-konva';
 
 export default class TransformerComponent extends Component {
   componentDidMount() {
-    this.checkNode();
+    this.checkNode(this.props.rectClass);
   }
 
   componentDidUpdate() {
-    this.checkNode();
+    this.checkNode(this.props.rectClass);
   }
 
   // this function makes sure the transformer follows along with the focusChild
-  checkNode() {
+  checkNode(rectClass) {
     const stage = this.transformer.getStage();
     const { focusChild } = this.props;
-    const selectedNode = stage.findOne(`.${focusChild.childId}`);
+
+    // depending on the rectClass prop, this transformer is either attached to
+    // a childRect or the focused component's componentRect
+    let selectedNode;
+    if (rectClass === 'componentRect') {
+      selectedNode = stage.findOne(`.${-1}`);
+    } else if (rectClass === 'childRect') {
+      selectedNode = stage.findOne(`.${focusChild.childId}`);
+    } else {
+      return;
+    }
 
     if (selectedNode === this.transformer.node()) {
       return;
@@ -32,7 +42,6 @@ export default class TransformerComponent extends Component {
     return (
       <Transformer
         rotateEnabled={false}
-        onMouseUp={this.handleMouseUp}
         ref={(node) => {
           this.transformer = node;
         }}