handletransform working, waiting to merge with Chris

Author: Tolga Mizrakci

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, childId, {
   x, y, width, height,
 }) => ({
   type: HANDLE_TRANSFORM,
   payload: {
-    id, x, y, width, height,
+    componentId,
+    childId,
+    x,
+    y,
+    width,
+    height,
   },
 });
 

src/components/KonvaStage.jsx

@@ -16,6 +16,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 CHANG FOCUS CHILD FUNCTIONALITY HERE
   handleStageMouseDown = e => {
     // // clicked on stage - cler selection
     // if (e.target === e.target.getStage()) {
@@ -30,13 +34,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
@@ -92,14 +97,15 @@ class KonvaStage extends Component {
                 <Rectangle
                   draggable={child.draggable}
                   selectedShapeName={selectedShapeName}
-                  key={i + child.componentName}
-                  componentId={child.id}
+                  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={"red"}
+                  color={child.color}
                   handleTransform={handleTransform}
                 />
               ))}

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,