Merge pull request #23 from ChristianEdwardPadilla/development

Features related to components and rendering

Author: ChristianEdwardPadilla

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,7 +1,7 @@
-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, Group, Label, Text,
 } from 'react-konva';
 import TransformerComponent from './TransformerComponent.jsx';
 import Rectangle from './Rectangle.jsx';
@@ -64,38 +64,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

@@ -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/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));
 

src/utils/componentReducer.util.js

@@ -41,6 +41,13 @@ export const addComponent = (state, { title }) => {
   const strippedTitle = title
     .replace(/[a-z]+/gi, word => word[0].toUpperCase() + word.slice(1))
     .replace(/[-_\s0-9\W]+/gi, '');
+
+  if (state.components.find(comp => comp.title === strippedTitle)) {
+    // alert the user that duplicate component names are not allowed
+    return {
+      ...state,
+    };
+  }
   const newComponent = {
     ...initialComponentState,
     title: strippedTitle,
@@ -126,10 +133,10 @@ export const handleTransform = (state, {
   const transformedChild = {
     ...child,
     position: {
-      x,
-      y,
-      width,
-      height,
+      x: x || child.position.x,
+      y: y || child.position.y,
+      width: width || child.position.width,
+      height: height || child.position.height,
     },
   };
 
@@ -222,9 +229,7 @@ export const changeFocusChild = (state, { title, childId }) => {
   // just finds first child with given title, need to pass in specific childId somehow
   // maybe default to title if childId is unknown
   const focComp = state.components.find(comp => comp.title === state.focusComponent.title);
-  console.log('erusbdfd', focComp, childId);
   const newFocusChild = focComp.childrenArray.find(child => child.childId === childId) || state.focusChild;
-  console.log('trying to changeFocusChild', state.focusComponent.childrenArray);
   return {
     ...state,
     focusChild: newFocusChild,