trying to pull

Author: Tolga Mizrakci

src/components/GrandchildRectangle.jsx

@@ -0,0 +1,11 @@
+import React, { Component, Fragment } from 'react';
+import { Rect } from 'react-konva';
+// import PropTypes from 'prop-types';
+
+class GrandchildRectangle extends Component {
+  render() {
+    return <Rect />;
+  }
+}
+
+export default GrandchildRectangle;

src/components/KonvaStage.jsx

@@ -1,6 +1,6 @@
-import React, { Component, createRef } from "react";
+import React, { Component, createRef, Fragment } from "react";
 // import PropTypes from 'prop-types';
-import { Stage, Layer, Image, Group } from "react-konva";
+import { Stage, Layer, Group, Label, Text } from "react-konva";
 import TransformerComponent from "./TransformerComponent.jsx";
 import Rectangle from "./Rectangle.jsx";
 
@@ -63,38 +63,26 @@ class KonvaStage extends Component {
         height={window.innerHeight}
       >
         <Layer>
-          <Group
-            scaleX={scaleX}
-            scaleY={scaleY}
-            ref={node => {
-              this.group = node;
-            }}
-            draggable={draggable}
-          >
-            {components
-              .find(comp => comp.title === focusComponent.title)
-              .childrenArray.map((child, i) => (
-                <Rectangle
-                  draggable={child.draggable}
-                  selectedShapeName={selectedShapeName}
-                  key={`${i}${child.componentName}`}
-                  childId={child.childId}
-                  componentId={focusComponent.id}
-                  x={child.position.x}
-                  y={child.position.y}
-                  width={child.position.width}
-                  height={child.position.height}
-                  title={child.childId + child.componentName}
-                  color={child.color}
-                  handleTransform={handleTransform}
-                />
-              ))}
-            <TransformerComponent
-              focusComponent={focusComponent}
-              focusChild={focusChild}
-              selectedShapeName={selectedShapeName}
-            />
-          </Group>
+          {components
+            .find(comp => comp.title === focusComponent.title)
+            .childrenArray.map((child, i) => (
+              <Rectangle
+                key={`${i}${child.componentName}`}
+                draggable={false}
+                selectedShapeName={selectedShapeName}
+                childId={child.childId}
+                focusChild={focusChild}
+                focusComponent={focusComponent}
+                componentId={focusComponent.id}
+                x={child.position.x}
+                y={child.position.y}
+                width={child.position.width}
+                height={child.position.height}
+                title={child.componentName + child.childId}
+                color={child.color}
+                handleTransform={handleTransform}
+              />
+            ))}
         </Layer>
       </Stage>
     );

src/components/LeftColExpansionPanel.jsx

@@ -33,7 +33,7 @@ const LeftColExpansionPanel = (props) => {
     return focusComponent.title === title ? 'focused' : '';
   }
 
-  function isAncestor() {
+  function isAncestorOfFocused() {
     // add logic for determining if given component is an ancestor of focusedComponent
     return false;
   }
@@ -47,7 +47,6 @@ const LeftColExpansionPanel = (props) => {
             component="a"
             style={{ color: 'red' }}
             onClick={() => {
-              console.log({ title });
               changeFocusComponent({ title });
             }}
           >
@@ -63,17 +62,14 @@ const LeftColExpansionPanel = (props) => {
               style={{ color }}
             />
             <ListItemSecondaryAction>
-              {isFocused() || isAncestor() ? (
+              {isFocused() || isAncestorOfFocused() ? (
                 <div />
               ) : (
                 <IconButton aria-label="Add">
                   <AddIcon
                     style={{ color, float: 'right' }}
                     onClick={() => {
-                      console.log(title);
                       addChild({ title });
-                      // get childId somewhere, or call changeFocusChild within addChild (better idea)
-                      // changeFocusChild({ title });
                     }}
                   />
                 </IconButton>

src/components/Rectangle.jsx

@@ -1,56 +1,95 @@
 import React, { Component } from 'react';
-import { Rect } from 'react-konva';
+import {
+  Rect, Group, Label, Text,
+} from 'react-konva';
+import TransformerComponent from './TransformerComponent.jsx';
 // import PropTypes from 'prop-types';
 
 class Rectangle extends Component {
-  extractPositionInfo(componentId, childId, target) {
-    console.log('extracting position info, Rectanlge.jsx');
+  handleResize(componentId, childId, target) {
     const transformation = {
-      x: target.x(),
-      y: target.y(),
       width: target.width() * target.scaleX(),
       height: target.height() * target.scaleY(),
     };
+    this.props.handleTransform(componentId, childId, transformation);
+  }
 
+  handleDrag(componentId, childId, target) {
+    const transformation = {
+      x: target.x(),
+      y: target.y(),
+    };
     this.props.handleTransform(componentId, childId, transformation);
   }
 
   render() {
     const {
-      color, x, y, childId, componentId, draggable, width, height, title,
+      color,
+      x,
+      y,
+      childId,
+      componentId,
+      draggable,
+      width,
+      height,
+      title,
+      focusChild,
+      focusComponent,
     } = this.props;
-    console.log('childId in rectangle:', childId);
+
+    // the Group is responsible for dragging of all children
+    // the Rect emits changes to child width and height with help from Transformer
     return (
-      <Rect
-        name={`${childId}`}
+      <Group
+        draggable={true}
         x={x}
         y={y}
-        childId={childId}
-        componentId={componentId}
-        title={title}
         scaleX={1}
         scaleY={1}
         width={width}
         height={height}
-        stroke={color}
-        strokeWidth={6}
-        strokeScaleEnabled={false}
-        onTransformEnd={event => this.extractPositionInfo(componentId, childId, event.target)}
-        onDragEnd={event => this.extractPositionInfo(componentId, childId, event.target)}
-        draggable={draggable}
-        color={color}
-        // use dragBoundFunc to bind children within parents
-        // (but if only children are rendered/movable, and parent is size of canvas, won't need this anyways )
-        // 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,
-        //   };
-        // }}
-      />
+        onDragEnd={event => this.handleDrag(componentId, childId, event.target)}
+      >
+        <Rect
+          name={`${childId}`}
+          // x={0}
+          // y={0}
+          childId={childId}
+          componentId={componentId}
+          title={title}
+          scaleX={1}
+          scaleY={1}
+          width={width}
+          height={height}
+          stroke={color}
+          color={color}
+          // fill={color}
+          // opacity={0.8}
+          onTransformEnd={event => this.handleResize(componentId, childId, event.target)}
+          strokeWidth={4}
+          strokeScaleEnabled={false}
+          draggable={false}
+        />
+        <Label>
+          <Text text={title} fill={'white'} />
+        </Label>
+        <Rect
+          // replace with grandchildren rectangles
+          scaleX={0.2}
+          scaleY={0.2}
+          width={width}
+          height={height}
+          stroke={color}
+          color={color}
+          strokeWidth={4}
+          draggable={false}
+        />
+        {focusChild.childId === childId ? (
+          <TransformerComponent focusComponent={focusComponent} focusChild={focusChild} />
+        ) : (
+          <Label />
+        )}
+      </Group>
     );
   }
 }

src/components/TransformerComponent.jsx

@@ -11,13 +11,12 @@ export default class TransformerComponent extends Component {
     this.checkNode();
   }
 
+  // this function makes sure the transformer follows along with the focusChild
   checkNode() {
     const stage = this.transformer.getStage();
     const { focusChild } = this.props;
     const selectedNode = stage.findOne(`.${focusChild.childId}`);
-    // console.log('selected node from within TransformerComponent: ', selectedNode);
-    // console.log('stage: ', stage);
-    // console.log('focusChild: ', focusChild, focusChild.childId, typeof focusChild.childId);
+
     if (selectedNode === this.transformer.node()) {
       return;
     }

src/containers/MainContainer.jsx

@@ -58,19 +58,19 @@ class MainContainer extends Component {
 
   componentDidMount() {}
 
-  increaseHeight = () => {
-    this.setState({
-      scaleX: this.state.scaleX * 1.5,
-      scaleY: this.state.scaleY * 1.5,
-    });
-  };
+  // increaseHeight = () => {
+  //   this.setState({
+  //     scaleX: this.state.scaleX * 1.5,
+  //     scaleY: this.state.scaleY * 1.5,
+  //   });
+  // };
 
-  decreaseHeight = () => {
-    this.setState({
-      scaleX: this.state.scaleX * 0.75,
-      scaleY: this.state.scaleY * 0.75,
-    });
-  };
+  // decreaseHeight = () => {
+  //   this.setState({
+  //     scaleX: this.state.scaleX * 0.75,
+  //     scaleY: this.state.scaleY * 0.75,
+  //   });
+  // };
 
   toggleDrag = () => {
     this.props.toggleComponentDragging(this.state.draggable);
@@ -111,22 +111,18 @@ class MainContainer extends Component {
       <MuiThemeProvider theme={theme}>
         <div className="main-container" style={{ cursor }}>
           <div className="main" ref={main}>
-            {components.length > 0 ? (
-              <KonvaStage
-                scaleX={scaleX}
-                scaleY={scaleY}
-                image={image}
-                draggable={draggable}
-                components={components}
-                handleTransform={handleTransformation}
-                openExpansionPanel={openPanel}
-                focusComponent={focusComponent}
-                focusChild={focusChild}
-                changeFocusChild={changeFocusChild}
-              />
-            ) : (
-              <p>Add some components</p>
-            )}
+            <KonvaStage
+              scaleX={scaleX}
+              scaleY={scaleY}
+              image={image}
+              draggable={draggable}
+              components={components}
+              handleTransform={handleTransformation}
+              openExpansionPanel={openPanel}
+              focusComponent={focusComponent}
+              focusChild={focusChild}
+              changeFocusChild={changeFocusChild}
+            />
           </div>
         </div>
       </MuiThemeProvider>

src/containers/RightContainer.jsx

@@ -1,11 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 // import PropTypes from 'prop-types';
-import {
-  handleClose,
-  deleteCompProp,
-  addCompProp,
-} from '../actions/components';
+import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
 // import Snackbars from '../components/Snackbars.jsx';
 // import RightTabs from '../components/RightTabs.jsx';
 
@@ -27,11 +23,11 @@ class RightContainer extends Component {
   state = {
     successOpen: false,
     errorOpen: false,
-  }
+  };
 
   viewAppDir = () => {
     IPC.send('view_app_dir', this.props.appDir);
-  }
+  };
 
   render() {
     const {
@@ -47,7 +43,7 @@ class RightContainer extends Component {
     } = this.props;
 
     return (
-      <div className='column-right' style={{ width: `${this.props.width}%` }} >
+      <div className="column-right" style={{ width: `${this.props.width}%` }}>
         {/* <RightTabs
           components={components}
           focusComponent={focusComponent}
@@ -80,5 +76,7 @@ class RightContainer extends Component {
 //   rightColumnOpen: PropTypes.bool.isRequired,
 // };
 
-
-export default connect(mapStateToProps, mapDispatchToProps)(RightContainer);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(RightContainer);

src/store.js

@@ -10,17 +10,14 @@ let composer;
 
 if (process.env.NODE_ENV === 'development') {
   composer = compose(
-    applyMiddleware(logger, thunk),
+    applyMiddleware(thunk), // re-add logger if you want redux log messages
     composeWithDevTools(),
   );
 } else {
   composer = compose(applyMiddleware(thunk));
 }
 
-const store = createStore(
-  reducers,
-  composer,
-);
+const store = createStore(reducers, composer);
 
 store.subscribe(throttle(() => saveState(store.getState()), 1000));