added placeholder componentRect, changed styling of transformer

ChristianEdwardPadilla · ChristianEdwardPadilla · commit 39f7705676ad · 2019-04-25T09:19:53.000-04:00
diff --git a/src/components/GrandchildRectangle.jsx b/src/components/GrandchildRectangle.jsx
@@ -4,16 +4,12 @@ import { Rect, Group } from 'react-konva';
 
 class GrandchildRectangle extends Component {
   getComponentColor(componentId) {
-    console.log('siodfbsldfk', componentId);
     const color = this.props.components.find(comp => comp.id == componentId).color;
-    console.log(color);
-
     return color;
   }
 
   render() {
     const {
-      color,
       x,
       y,
       scaleX,
@@ -51,8 +47,7 @@ class GrandchildRectangle extends Component {
           scaleY={1}
           width={width}
           height={height}
-          stroke={color}
-          color={this.getComponentColor(childComponentId)}
+          stroke={this.getComponentColor(childComponentId)}
           // fill={color}
           // opacity={0.8}
           strokeWidth={4}
@@ -76,7 +71,6 @@ class GrandchildRectangle extends Component {
               scaleY={1}
               width={grandchild.position.width * (width / (window.innerWidth / 2))}
               height={grandchild.position.height * (height / window.innerHeight)}
-              color={color}
             />
           ))}
       </Group>
diff --git a/src/components/KonvaStage.jsx b/src/components/KonvaStage.jsx
@@ -1,9 +1,8 @@
 import React, { Component, createRef, Fragment } from 'react';
 // import PropTypes from 'prop-types';
 import {
-  Stage, Layer, Group, Label, Text,
+  Stage, Layer, Group, Label, Text, Rect, Transformer,
 } from 'react-konva';
-import TransformerComponent from './TransformerComponent.jsx';
 import Rectangle from './Rectangle.jsx';
 
 class KonvaStage extends Component {
@@ -34,8 +33,6 @@ class KonvaStage extends Component {
   checkSize = () => {
     const width = this.container.offsetWidth;
     const height = this.container.offsetHeight;
-    console.log('setting width: ', this.state.stageWidth, width);
-    console.log('setting height: ', this.state.heightWidth, height);
     this.setState({
       stageWidth: width,
       stageHeight: height,
@@ -46,24 +43,28 @@ class KonvaStage extends Component {
     // // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
       // add functionality for allowing no focusChild
-      console.log(e.target.getStage());
+      console.log('user clicked on canvas:');
       return;
     }
     // // clicked on transformer - do nothing
     const clickedOnTransformer = e.target.getParent().className === 'Transformer';
     if (clickedOnTransformer) {
+      console.log('user clicked on transformer');
       return;
     }
 
+    if (e.target.attrs.className === 'componentRect') {
+      console.log('user clicked on componentRect');
+    }
+
     // find clicked rect by its name
     const rectChildId = e.target.attrs.childId;
-    console.log('e.target : ', 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,
     });
-    //  put individual component's focus child logic here
   };
 
   render() {
@@ -101,6 +102,36 @@ class KonvaStage extends Component {
           height={this.state.stageHeight - 10}
         >
           <Layer>
+            {focusComponent.title !== 'App' && (
+              <Group
+                draggable={true}
+                x={focusComponent.position.x}
+                y={focusComponent.position.y}
+                width={focusComponent.position.width}
+                height={focusComponent.position.height}
+              >
+                <Rect
+                  className={'componentRect'}
+                  stroke={focusComponent.color}
+                  x={0}
+                  y={0}
+                  width={focusComponent.position.width}
+                  height={focusComponent.position.height}
+                  strokeWidth={2}
+                  strokeScaleEnabled={false}
+                />
+                <Label>
+                  <Text
+                    text={focusComponent.title}
+                    fill={focusComponent.color}
+                    fontStyle={'bold'}
+                    fontVariant={'small-caps'}
+                    fontSize={14}
+                    y={-15}
+                  />
+                </Label>
+              </Group>
+            )}
             {components
               .find(comp => comp.id === focusComponent.id)
               .childrenArray.map((child, i) => (
@@ -119,7 +150,6 @@ class KonvaStage extends Component {
                   width={child.position.width}
                   height={child.position.height}
                   title={child.componentName + child.childId}
-                  color={child.color}
                   handleTransform={handleTransform}
                   draggable={true}
                 />
diff --git a/src/components/Rectangle.jsx b/src/components/Rectangle.jsx
@@ -8,10 +8,7 @@ import GrandchildRectangle from './GrandchildRectangle.jsx';
 
 class Rectangle extends Component {
   getComponentColor(componentId) {
-    console.log('siodfbsldfk', componentId);
     const color = this.props.components.find(comp => comp.id == componentId).color;
-    console.log(color);
-
     return color;
   }
 
@@ -42,7 +39,6 @@ class Rectangle extends Component {
 
   render() {
     const {
-      color,
       x,
       y,
       scaleX,
@@ -84,8 +80,7 @@ class Rectangle extends Component {
           scaleY={1}
           width={width}
           height={height}
-          stroke={color}
-          color={this.getComponentColor(childComponentId)}
+          stroke={this.getComponentColor(childComponentId)}
           // fill={color}
           // opacity={0.8}
           onTransformEnd={event => this.handleResize(componentId, childId, event.target)}
@@ -94,7 +89,15 @@ class Rectangle extends Component {
           draggable={false}
         />
         <Label>
-          <Text text={title} fill={'white'} />
+          <Text
+            text={title}
+            fill={'white'}
+            fontStyle={'bold'}
+            fontVariant={'small-caps'}
+            fontSize={10}
+            x={4}
+            y={4}
+          />
         </Label>
         {components
           .find(comp => comp.title === childComponentName)
@@ -114,14 +117,11 @@ class Rectangle extends Component {
               width={grandchild.position.width * (width / (window.innerWidth / 2))}
               height={grandchild.position.height * (height / window.innerHeight)}
               // title={child.componentName + child.childId}
-              color={grandchild.color}
             />
           ))}
-        {focusChild && focusChild.childId === childId && draggable ? (
-          <TransformerComponent focusChild={focusChild} />
-        ) : (
-          <Label />
-        )}
+        {focusChild
+          && focusChild.childId === childId
+          && draggable && <TransformerComponent focusChild={focusChild} />}
       </Group>
     );
   }
diff --git a/src/components/TransformerComponent.jsx b/src/components/TransformerComponent.jsx
@@ -36,6 +36,11 @@ export default class TransformerComponent extends Component {
         ref={(node) => {
           this.transformer = node;
         }}
+        borderEnabled={false}
+        anchorFill={'grey'}
+        anchorStroke={'grey'}
+        anchorSize={8}
+        keepRatio={false}
       />
     );
   }
diff --git a/src/utils/componentReducer.util.js b/src/utils/componentReducer.util.js
@@ -15,10 +15,10 @@ const initialComponentState = {
   props: [],
   nextPropId: 0,
   position: {
-    x: 110,
-    y: 120,
-    width: 50,
-    height: 50,
+    x: 50,
+    y: 50,
+    width: 600,
+    height: 600,
   },
   childrenArray: [],
   nextChildId: 1,
@@ -170,9 +170,6 @@ export const deleteChild = (
 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('incoming x and y: ', x, y);
   const child = state.components
     .find(comp => comp.id === componentId)
     .childrenArray.find(child => child.childId === childId);
@@ -285,10 +282,10 @@ export const deleteComponent = (state, { componentId }) => {
 
 export const changeFocusComponent = (state, { title }) => {
   const newFocusComp = state.components.find(comp => comp.title === title);
-  // set the "focus child" to the focus child of this particular component . 
-  const newFocusChildId = newFocusComp.focusChildId ; 
+  // set the "focus child" to the focus child of this particular component .
+  const newFocusChildId = newFocusComp.focusChildId;
 
-  const newFocusChild = newFocusComp.childrenArray.find( child => child.childId == newFocusChildId) ; 
+  const newFocusChild = newFocusComp.childrenArray.find(child => child.childId == newFocusChildId);
 
   const result = getSelectable(newFocusComp, state.components);
 
