can move and resize single child rect

src/actions/components.js

@@ -32,32 +32,31 @@ import { loadState } from '../localStorage';
 // import createApplicationUtil from '../utils/createApplication.util';
 
 export const loadInitData = () => (dispatch) => {
-  loadState()
-    .then(data => dispatch({
-      type: LOAD_INIT_DATA,
-      payload: {
-        data: data ? data.workspace : {},
-      },
-    }));
+  loadState().then(data => dispatch({
+    type: LOAD_INIT_DATA,
+    payload: {
+      data: data ? data.workspace : {},
+    },
+  }));
 };
 
-export const updateChildren = (({
-  parentIds, childIndex, childId,
-}) => ({
+export const updateChildren = ({ parentIds, childIndex, childId }) => ({
   type: UPDATE_CHILDREN,
   payload: {
-    parentIds, childIndex, childId,
+    parentIds,
+    childIndex,
+    childId,
   },
-}));
+});
 
-export const parentReassignment = (({ index, id, parentIds }) => ({
+export const parentReassignment = ({ index, id, parentIds }) => ({
   type: REASSIGN_PARENT,
   payload: {
     index,
     id,
     parentIds,
   },
-}));
+});
 
 export const addComponent = ({ title }) => (dispatch) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
@@ -82,12 +81,20 @@ export const deleteComponent = ({ index, id, parentIds = [] }) => (dispatch) =>
 };
 
 export const updateComponent = ({
-  id, index, newParentId = null, color = null, stateful = null,
+  id,
+  index,
+  newParentId = null,
+  color = null,
+  stateful = null,
 }) => (dispatch) => {
   dispatch({
     type: UPDATE_COMPONENT,
     payload: {
-      id, index, newParentId, color, stateful,
+      id,
+      index,
+      newParentId,
+      color,
+      stateful,
     },
   });
 
@@ -123,12 +130,17 @@ export const handleClose = () => ({
   payload: false,
 });
 
-export const handleTransform = (id, {
+export const handleTransform = (componentId, id, {
   x, y, width, height,
 }) => ({
   type: HANDLE_TRANSFORM,
   payload: {
-    id, x, y, width, height,
+    componentId,
+    id,
+    x,
+    y,
+    width,
+    height,
   },
 });
 

src/components/KonvaStage.jsx

@@ -18,6 +18,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()) {
@@ -32,13 +36,14 @@ class KonvaStage extends Component {
 
     // find clicked rect by its name
     const id = e.target.name();
+    console.log(e.target);
     const rect = this.props.components.find(r => r.id === id);
 
-    if (rect) {
-      this.props.openExpansionPanel(rect);
-    } else {
-      this.props.openExpansionPanel({});
-    }
+    // if (rect) {
+    //   this.props.openExpansionPanel(rect || this.props.focusComponent);
+    // } else {
+    //   this.props.openExpansionPanel(this.props.focusComponent);
+    // }
   };
 
   //  WAS ALREADY COMMENTED OUT
@@ -88,36 +93,24 @@ class KonvaStage extends Component {
             }}
             draggable={draggable}
           >
-            {/* {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}
-              />
-            ))} */}
-            {components.find((comp) => comp.title === focusComponent.title)
-              .childrenArray.map((child, i) => <Rectangle
-              draggable={child.draggable}
-              selectedShapeName={selectedShapeName}
-              key={i + child.componentName}
-              componentId={child.id}
-              x={child.position.x}
-              y={child.position.y}
-              width={child.position.width}
-              height={child.position.height}
-              title={child.childId + child.componentName}
-              color={'red'}
-              handleTransform={handleTransform}
-            />)}
-            {/* )} */}
+            {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}

src/components/LeftColExpansionPanel.jsx

@@ -39,9 +39,6 @@ const LeftColExpansionPanel = (props) => {
           <ListItem
             button
             component="a"
-            // style={
-            //   if (components.find(comp => comp.title === focusComponent.title))
-            // }
             style={{ color: 'red' }}
             onClick={() => {
               console.log({ title });

src/components/Rectangle.jsx

@@ -3,47 +3,53 @@ import { Rect } from 'react-konva';
 // import PropTypes from 'prop-types';
 
 class Rectangle extends Component {
-  extractPositionInfo(componentId, target) {
+  extractPositionInfo(componentId, childId, target) {
+    console.log('extracting position info, Rectanlge.jsx');
     const transformation = {
       x: target.x(),
       y: target.y(),
       width: target.width() * target.scaleX(),
       height: target.height() * target.scaleY(),
     };
 
-    this.props.handleTransform(componentId, transformation);
+    this.props.handleTransform(componentId, childId, transformation);
   }
 
   render() {
     const {
-      color, x, y, componentId, draggable, width, height, title,
+      color, x, y, childId, componentId, draggable, width, height, title,
     } = this.props;
-
+    console.log('childId in rectangle:', childId);
     return (
       <Rect
-        name={componentId}
+        name={`${childId}`}
         x={x}
         y={y}
-        componentid={componentId}
+        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, event.target)}
-        onDragEnd={event => this.extractPositionInfo(componentId, event.target)}
+        onTransformEnd={event => this.extractPositionInfo(componentId, childId, event.target)}
+        onDragEnd={event => this.extractPositionInfo(componentId, childId, 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,
-          };
-        }}
+        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,
+        //   };
+        // }}
       />
     );
   }

src/components/TransformerComponent.jsx

@@ -15,7 +15,9 @@ export default class TransformerComponent extends Component {
     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

@@ -16,10 +16,10 @@ import KonvaStage from '../components/KonvaStage.jsx';
 const IPC = require('electron').ipcRenderer;
 
 const mapDispatchToProps = dispatch => ({
-  handleTransformation: (id, {
+  handleTransformation: (componentId, childId, {
     x, y, width, height,
   }) => dispatch(
-    handleTransform(id, {
+    handleTransform(componentId, childId, {
       x,
       y,
       width,

src/utils/componentReducer.util.js

@@ -70,11 +70,13 @@ export const addChild = (state, { title }) => {
     .replace(/[a-z]+/gi, word => word[0].toUpperCase() + word.slice(1))
     .replace(/[-_\s0-9\W]+/gi, '');
 
-  const view = state.components.filter((comp) => {
-    if (comp.title === state.focusComponent.title) return comp;
-  })[0];
+  // view represents the component that this child will live (and be rendered) in
+  const view = state.components.find(comp => comp.title === state.focusComponent.title);
+
+  // parentComponent is the component this child is generated from (ex. instance of Box has comp of Box)
+  const parentComponent = state.components.find(comp => comp.title === title);
 
-  console.log(view);
+  console.log('view from addChild: ', view);
 
   const newChild = {
     childId: view.nextChildId.toString(),
@@ -85,6 +87,8 @@ export const addChild = (state, { title }) => {
       width: 50,
       height: 50,
     },
+    draggable: true,
+    color: parentComponent.color,
   };
 
   const compsChildrenArr = [...view.childrenArray, newChild];
@@ -162,8 +166,9 @@ export const deleteComponent = (state, { index, id }) => {
 };
 
 export const changeFocusComponent = (state, { title }) => {
-
-  let focusComp = state.components.filter((comp) => {if (comp.title === title) return comp})[0]
+  const focusComp = state.components.filter((comp) => {
+    if (comp.title === title) return comp;
+  })[0];
 
   return {
     ...state,
@@ -312,25 +317,27 @@ export const updatePosition = (state, { id, x, y }) => {
  */
 
 export const handleTransform = (state, {
-  id, x, y, width, height,
+  componentId, childId, x, y, width, height,
 }) => {
-  const components = state.components.map((component) => {
-    if (component.id === id) {
-      return {
-        ...component,
-        position: {
-          x,
-          y,
-          width,
-          height,
-        },
-      };
-    }
-    return component;
-  });
+  console.log('componentId and childId: ', componentId, childId);
+  console.log('state.focuscomponent: ', state.focusComponent);
+  // const components = state.components.map((component) => {
+  //   if (component.id === id) {
+  //     return {
+  //       ...component,
+  //       position: {
+  //         x,
+  //         y,
+  //         width,
+  //         height,
+  //       },
+  //     };
+  //   }
+  //   return component;
+  // });
   return {
     ...state,
-    components,
+    // components,
   };
 };
 
@@ -380,7 +387,7 @@ export const moveToBottom = (state, componentId) => {
 
 export const openExpansionPanel = (state, { component }) => ({
   ...state,
-  focusComponent: component,
+  // focusComponent: component,
 });
 
 export const addProp = (state, {