transformer anchors are always selectable

ChristianEdwardPadilla · ChristianEdwardPadilla · commit 011a600b2b7a · 2019-04-29T20:00:27.000-04:00
diff --git a/src/components/GrandchildRectangle.jsx b/src/components/GrandchildRectangle.jsx
@@ -64,12 +64,14 @@ class GrandchildRectangle extends Component {
               childComponentId={grandchild.childComponentId}
               focusChild={focusChild}
               childId={childId}
-              x={grandchild.position.x * (width / (window.innerWidth / 2))}
+              x={grandchild.position.x * (width / window.innerWidth)}
               y={grandchild.position.y * (height / window.innerHeight)}
-              scaleX={1}
-              scaleY={1}
-              width={grandchild.position.width * (width / (window.innerWidth / 2))}
+              width={grandchild.position.width * (width / window.innerWidth)}
               height={grandchild.position.height * (height / window.innerHeight)}
+              // x={grandchild.position.x}
+              // y={grandchild.position.y}
+              // width={grandchild.position.width}
+              // height={grandchild.position.height}
             />
           ))}
       </Group>
diff --git a/src/components/KonvaStage.jsx b/src/components/KonvaStage.jsx
@@ -51,7 +51,7 @@ class KonvaStage extends Component {
 
     // find clicked rect by its name
     const rectChildId = e.target.attrs.childId;
-    console.log('user clicked on child rectangle with Id: ', rectChildId);
+    console.log('user clicked on child rectangle with childId: ', rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
     this.props.changeComponentFocusChild({
       componentId: this.props.focusComponent.id,
diff --git a/src/components/Rectangle.jsx b/src/components/Rectangle.jsx
@@ -11,6 +11,42 @@ class Rectangle extends Component {
     return color;
   }
 
+  getGrandchildRatio(grandchild) {
+    // const childInstance = pseudoChildComp.childrenArray.find()
+    const pseudoParent = this.props.components.find(
+      comp => comp.title === this.props.childComponentName,
+    );
+    const childInstance = pseudoParent.childrenArray.find(
+      child => child.childId === grandchild.childId,
+    );
+    // console.log(
+    //   this.props.childId,
+    //   this.props.componentId,
+    //   this.props.childComponentName,
+    //   this.props.childComponentId,
+    // );
+    console.log(grandchild, pseudoParent, childInstance);
+    // console.log(childInstance.position.width / pseudoParent.position.width);
+    // console.log(childInstance.position.height / pseudoParent.position.height);
+
+    console.log(childInstance.position.x, pseudoParent.position.x);
+    console.log(childInstance.position.y, pseudoParent.position.y);
+    const ratioObj = {
+      // x:
+      //   grandchild.position.x
+      //   - (pseudoParent.position.x * childInstance.position.width) / pseudoParent.position.width,
+      // y:
+      //   grandchild.position.y
+      //   - (pseudoParent.position.y * childInstance.position.height) / pseudoParent.position.height,
+      x: childInstance.position.x - pseudoParent.position.x,
+      y: childInstance.position.y - pseudoParent.position.y,
+      width: childInstance.position.width / pseudoParent.position.width,
+      height: childInstance.position.height / pseudoParent.position.height,
+    };
+    // console.log('ratioObj', ratioObj);
+    return ratioObj;
+  }
+
   handleResize(componentId, childId, target) {
     const focChild = this.props.components
       .find(comp => comp.id === componentId)
@@ -123,13 +159,19 @@ class Rectangle extends Component {
                 childComponentName={grandchild.componentName}
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
-                childId={childId} // scary addition, grandchildren rects should default to childId of "direct" children
-                x={grandchild.position.x * (width / (window.innerWidth / 2))}
-                y={grandchild.position.y * (height / window.innerHeight)}
-                scaleX={1}
-                scaleY={1}
-                width={grandchild.position.width * (width / (window.innerWidth / 2))}
-                height={grandchild.position.height * (height / window.innerHeight)}
+                childId={childId} // scary addition, grandchildren rects default to childId of "direct" children
+                // x={grandchild.position.x * (width / window.innerWidth)}
+                // y={grandchild.position.y * (height / window.innerHeight)}
+                // width={grandchild.position.width * (width / window.innerWidth)}
+                // height={grandchild.position.height * (height / window.innerHeight)}
+                x={this.getGrandchildRatio(grandchild).x}
+                y={this.getGrandchildRatio(grandchild).y}
+                width={width * this.getGrandchildRatio(grandchild).width}
+                height={height * this.getGrandchildRatio(grandchild).height}
+                // x={grandchild.position.x}
+                // y={grandchild.position.y}
+                // width={grandchild.position.width}
+                // height={grandchild.position.height}
                 // title={child.componentName + child.childId}
               />
             ))}
diff --git a/src/components/TransformerComponent.jsx b/src/components/TransformerComponent.jsx
@@ -26,6 +26,7 @@ export default class TransformerComponent extends Component {
     } else {
       this.transformer.detach();
     }
+    this.transformer.moveToTop(); // makes sure the transformer is always selectable
     this.transformer.getLayer().batchDraw();
   }
 
diff --git a/src/containers/AppContainer.jsx b/src/containers/AppContainer.jsx
@@ -1,41 +1,41 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 // import PropTypes from 'prop-types';
-import { MuiThemeProvider } from "@material-ui/core/styles";
-import LinearProgress from "@material-ui/core/LinearProgress";
-import LeftContainer from "./LeftContainer.jsx";
-import MainContainer from "./MainContainer.jsx";
-import RightContainer from "./RightContainer.jsx";
-import convertIdsToObjs from "../utils/convertIdsToObjs.util";
-import theme from "../components/theme";
-import { loadInitData } from "../actions/components";
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import LeftContainer from './LeftContainer.jsx';
+import MainContainer from './MainContainer.jsx';
+import RightContainer from './RightContainer.jsx';
+import convertIdsToObjs from '../utils/convertIdsToObjs.util';
+import theme from '../components/theme';
+import { loadInitData } from '../actions/components';
 
 const mapStateToProps = store => ({
   components: store.workspace.components,
   totalComponents: store.workspace.totalComponents,
   focusComponent: store.workspace.focusComponent,
   loading: store.workspace.loading,
-  selectableChildren: store.workspace.selectableChildren
+  selectableChildren: store.workspace.selectableChildren,
 });
 
 const mapDispatchToProps = { loadInitData };
 
 class AppContainer extends Component {
   state = {
     width: 25,
-    rightColumnOpen: true
+    rightColumnOpen: true,
   };
 
   collapseColumn = () => {
     if (this.state.width === 25) {
       this.setState({
         width: 0,
-        rightColumnOpen: false
+        rightColumnOpen: false,
       });
     } else {
       this.setState({
         width: 25,
-        rightColumnOpen: true
+        rightColumnOpen: true,
       });
     }
   };
@@ -46,11 +46,7 @@ class AppContainer extends Component {
 
   render() {
     const {
-      components,
-      totalComponents,
-      focusComponent,
-      loading,
-      selectableChildren
+      components, totalComponents, focusComponent, loading, selectableChildren,
     } = this.props;
     const { width, rightColumnOpen } = this.state;
 
@@ -82,9 +78,9 @@ class AppContainer extends Component {
           {loading ? (
             <div
               style={{
-                alignSelf: "flex-end",
-                position: "fixed",
-                width: "100%"
+                alignSelf: 'flex-end',
+                position: 'fixed',
+                width: '100%',
               }}
             >
               <LinearProgress color="secondary" />
@@ -98,7 +94,7 @@ class AppContainer extends Component {
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(AppContainer);
 
 // AppContainer.propTypes = {
diff --git a/src/reducers/componentReducer.js b/src/reducers/componentReducer.js
@@ -78,10 +78,10 @@ const appComponent = {
   props: [],
   nextPropId: 1,
   position: {
-    x: 110,
-    y: 120,
-    width: 50,
-    height: 50,
+    x: 25,
+    y: 25,
+    width: 600,
+    height: 400,
   },
 
   childrenArray: [],
@@ -102,10 +102,10 @@ const initialApplicationState = {
     childId: 0,
     componentName: null,
     position: {
-      x: 110,
-      y: 120,
-      width: 50,
-      height: 50,
+      x: 25,
+      y: 25,
+      width: 600,
+      height: 400,
     },
     draggable: true,
   },
diff --git a/src/utils/componentReducer.util.js b/src/utils/componentReducer.util.js
@@ -103,10 +103,10 @@ export const addChild = (state, { title }) => {
     childComponentId: parentComponent.id,
     componentName: strippedTitle,
     position: {
-      x: 110 + view.nextChildId * 5,
-      y: 120 + view.nextChildId * 5,
-      width: 50,
-      height: 50,
+      x: parentComponent.position.x + view.nextChildId * 5, // new children are offset by 5px, x and y
+      y: parentComponent.position.y + view.nextChildId * 5,
+      width: parentComponent.position.width * 0.9, // new children have an initial position of their parentComponent (maybe don't need 90%)
+      height: parentComponent.position.height * 0.9,
     },
     draggable: true,
     color: parentComponent.color,
@@ -214,10 +214,21 @@ export const handleTransform = (state, {
     transformedChild,
   ];
 
-  const component = {
-    ...state.components.find(comp => comp.id === componentId),
-    childrenArray: children,
-  };
+  let component;
+  if (childId === '-1') {
+    console.log('pseudo');
+    component = {
+      ...state.components.find(comp => comp.id === componentId),
+      childrenArray: children,
+      position: { ...transformedChild.position },
+    };
+  } else {
+    console.log('real');
+    component = {
+      ...state.components.find(comp => comp.id === componentId),
+      childrenArray: children,
+    };
+  }
 
   const components = [
     ...state.components.filter((comp) => {

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ export default class TransformerComponent extends Component {`
`26`	`26`	`} else {`
`27`	`27`	`this.transformer.detach();`
`28`	`28`	`}`
	`29`	`+ this.transformer.moveToTop(); // makes sure the transformer is always selectable`
`29`	`30`	`this.transformer.getLayer().batchDraw();`
`30`	`31`	`}`
`31`	`32`