Merge pull request #15 from ChristianEdwardPadilla/development

labels on boxes, boundRecFunc implemented with hardcoded numbers

Author: ChristianEdwardPadilla

src/components/App.jsx

@@ -4,17 +4,8 @@ import { MuiThemeProvider } from '@material-ui/core/styles';
 import theme from './theme';
 import AppContainer from '../containers/AppContainer.jsx';
 
-// interface Adam {
-//   goodguy: boolean;
-//   haswine: boolean;
-// }
-
 class App extends Component {
   render() {
-    // const adamInstance: Adam = {
-    //   goodguy: true,
-    //   haswine: false,
-    // };
     return (
       <MuiThemeProvider theme={theme}>
         <div className="app">

src/components/KonvaStage.jsx

@@ -1,12 +1,12 @@
-import React, { Component, createRef } from 'react';
+import React, { Component, createRef, Fragment } from 'react';
 // import PropTypes from 'prop-types';
 import {
-  Stage, Layer, Image, Group,
+  Stage, Layer, Image, Group, Label, Text, Tag,
 } from 'react-konva';
+import Konva from 'konva';
 import TransformerComponent from './TransformerComponent.jsx';
 import Rectangle from './Rectangle.jsx';
 
-
 class KonvaStage extends Component {
   state = {
     x: undefined,
@@ -19,6 +19,10 @@ class KonvaStage extends Component {
     this.group = createRef();
   }
 
+  // Christian - this function causes the expansionPanel of the clicked rect to open
+  // (and focusedComponent to change, which we don't want)
+  // could reuse this logic for affecting state of children array
+  // ADD FOCUS CHILD FUNCTIONALITY HERE
   handleStageMouseDown = (e) => {
     // clicked on stage - cler selection
     if (e.target === e.target.getStage()) {
@@ -42,27 +46,11 @@ class KonvaStage extends Component {
     }
   };
 
-  //  WAS ALREADY COMMENTED OUT
-  // handleStageDrag = () => {
-  //   // const mainWindowHeight = this.main.current.clientHeight;
-  //   // const mainWindowWidth = this.main.current.clientWidth;
-  //   // const groupX = this.refs.group.attrs.x;
-  //   // const groupY = this.refs.group.attrs.y;
-
-  //   // const componentX = (mainWindowWidth / 2) - groupX;
-  //   // const componentY = (mainWindowHeight / 2) - groupY;
-  //   // console.log(componentX, componentY);
-  // }
-
-  componentDidMount() {
-    // this.props.setImage();
-  }
-
   render() {
     const {
-      components, handleTransform, image, draggable, scaleX, scaleY, focusComponent,
+      components, handleTransform, draggable, scaleX, scaleY, focusComponent,
     } = this.props;
-    const { selectedShapeName } = this.state;
+    // const { selectedShapeName } = this.state;
 
     return (
       <Stage
@@ -80,45 +68,41 @@ class KonvaStage extends Component {
             ref={(node) => {
               this.group = node;
             }}
-            draggable={draggable}>
-            <Image image={image} />
-            {components.map((comp, i) => <Rectangle
-              draggable={comp.draggable}
-              selectedShapeName={selectedShapeName}
-              key={i}
-              componentId={comp.id}
-              x={comp.position.x}
-              y={comp.position.y}
-              width={comp.position.width}
-              height={comp.position.height}
-              title={comp.title}
-              color={comp.color}
-              handleTransform={handleTransform}
-            />)}
-            <TransformerComponent
-              focusComponent={focusComponent}
-              selectedShapeName={selectedShapeName}
-            />
+            draggable={draggable}
+          >
+            {components.map((comp, i) => (
+              <Fragment key={i}>
+                <Rectangle
+                  draggable={comp.draggable}
+                  key={i}
+                  componentId={comp.id}
+                  x={comp.position.x}
+                  y={comp.position.y}
+                  width={comp.position.width}
+                  height={comp.position.height}
+                  title={comp.title}
+                  color={comp.color}
+                  handleTransform={handleTransform}
+                />
+                <Label x={comp.position.x} y={comp.position.y}>
+                  <Text
+                    text={`${comp.title},${comp.position.x.toPrecision(
+                      3,
+                    )},${comp.position.y.toPrecision(3)}`}
+                    fontFamily="Calibri"
+                    fontSize={12}
+                    padding={5}
+                    fill="green"
+                  />
+                </Label>
+              </Fragment>
+            ))}
+            <TransformerComponent focusComponent={focusComponent} />
           </Group>
         </Layer>
       </Stage>
     );
   }
 }
 
-// KonvaStage.propTypes = {
-//   draggable: PropTypes.bool.isRequired,
-//   components: PropTypes.array.isRequired,
-//   handleTransform: PropTypes.func.isRequired,
-//   image: PropTypes.oneOfType([
-//     PropTypes.string,
-//     PropTypes.object,
-//   ]),
-//   scaleX: PropTypes.number.isRequired,
-//   scaleY: PropTypes.number.isRequired,
-//   openExpansionPanel: PropTypes.func.isRequired,
-//   setImage: PropTypes.func.isRequired,
-//   focusComponent: PropTypes.object.isRequired,
-// };
-
 export default KonvaStage;

src/components/Rectangle.jsx

@@ -16,7 +16,7 @@ class Rectangle extends Component {
 
   render() {
     const {
-      color, x, y, componentId, draggable, width, height,
+      color, x, y, componentId, draggable, width, height, title,
     } = this.props;
 
     return (
@@ -35,21 +35,18 @@ class Rectangle extends Component {
         onTransformEnd={event => this.extractPositionInfo(componentId, event.target)}
         onDragEnd={event => this.extractPositionInfo(componentId, event.target)}
         draggable={draggable}
+        dragBoundFunc={function dragBoundFunc(pos) {
+          console.log('binding');
+          const newY = pos.y < 200 ? 200 : pos.y;
+          const newX = pos.x < 200 ? 200 : pos.x;
+          return {
+            x: newX,
+            y: newY,
+          };
+        }}
       />
     );
   }
 }
 
-// Rectangle.propTypes = {
-//   // title: PropTypes.string.isRequired,
-//   color: PropTypes.string.isRequired,
-//   handleTransform: PropTypes.func.isRequired,
-//   x: PropTypes.number,
-//   y: PropTypes.number,
-//   height: PropTypes.number,
-//   width: PropTypes.number,
-//   componentId: PropTypes.string.isRequired,
-//   draggable: PropTypes.bool.isRequired,
-// };
-
 export default Rectangle;

src/containers/AppContainer.jsx

@@ -48,6 +48,8 @@ class AppContainer extends Component {
       components, totalComponents, focusComponent, loading,
     } = this.props;
     const { width, rightColumnOpen } = this.state;
+
+    // uses component childIds and parentIds arrays (numbers) to build component-filled children and parents arrays
     const updatedComponents = convertIdsToObjs(components);
 
     return (