adding component and child works but can't be dragged

Author: Tolga Mizrakci

src/components/KonvaStage.jsx

@@ -19,16 +19,16 @@ class KonvaStage extends Component {
   }
 
   handleStageMouseDown = (e) => {
-    // clicked on stage - cler selection
-    if (e.target === e.target.getStage()) {
-      this.props.openExpansionPanel({});
-      return;
-    }
-    // clicked on transformer - do nothing
-    const clickedOnTransformer = e.target.getParent().className === 'Transformer';
-    if (clickedOnTransformer) {
-      return;
-    }
+    // // clicked on stage - cler selection
+    // if (e.target === e.target.getStage()) {
+    //   this.props.openExpansionPanel({});
+    //   return;
+    // }
+    // // clicked on transformer - do nothing
+    // const clickedOnTransformer = e.target.getParent().className === 'Transformer';
+    // if (clickedOnTransformer) {
+    //   return;
+    // }
 
     // find clicked rect by its name
     const id = e.target.name();
@@ -66,6 +66,7 @@ class KonvaStage extends Component {
       scaleX,
       scaleY,
       focusComponent,
+      focusChild,
     } = this.props;
     const { selectedShapeName } = this.state;
 
@@ -87,7 +88,7 @@ class KonvaStage extends Component {
             }}
             draggable={draggable}
           >
-            {components.map((comp, i) => (
+            {/* {components.map((comp, i) => (
               <Rectangle
                 draggable={comp.draggable}
                 selectedShapeName={selectedShapeName}
@@ -101,9 +102,25 @@ class KonvaStage extends Component {
                 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}
+            />)}
+            {/* )} */}
             <TransformerComponent
               focusComponent={focusComponent}
+              focusChild={focusChild}
               selectedShapeName={selectedShapeName}
             />
           </Group>

src/components/LeftColExpansionPanel.jsx

@@ -15,7 +15,6 @@ import IconButton from '@material-ui/core/IconButton';
 import Grid from '@material-ui/core/Grid';
 import AddIcon from '@material-ui/icons/Add';
 import { openExpansionPanel } from '../utils/componentReducer.util';
-import { changeFocusChild } from '../actions/components';
 
 const LeftColExpansionPanel = (props) => {
   const {
@@ -70,7 +69,6 @@ const LeftColExpansionPanel = (props) => {
                     onClick={() => {
                       console.log(title);
                       addChild({ title });
-                      changeFocusChild({ title });
                     }}
                   />
                 </IconButton>

src/components/TransformerComponent.jsx

@@ -13,8 +13,8 @@ export default class TransformerComponent extends Component {
 
   checkNode() {
     const stage = this.transformer.getStage();
-    const { focusComponent } = this.props;
-    const selectedNode = stage.findOne(`.${focusComponent.id}`);
+    const { focusChild } = this.props;
+    const selectedNode = stage.findOne(`.${focusChild.childId}`);
 
     if (selectedNode === this.transformer.node()) {
       return;

src/containers/LeftContainer.jsx

@@ -32,7 +32,6 @@ const mapDispatchToProps = dispatch => ({
   // deleteAllData: () => dispatch(actions.deleteAllData()),
   addChild: ({ title }) => dispatch(actions.addChild({ title })),
   changeFocusComponent: ({ title }) => dispatch(actions.changeFocusComponent({ title })),
-  changeFocusChild: ({ title }) => dispatch(actions.changeFocusChild({ title })),
 });
 
 class LeftContainer extends Component {
@@ -48,7 +47,6 @@ class LeftContainer extends Component {
 
   handleAddComponent = () => {
     this.props.addComponent({ title: this.state.componentName });
-    this.props.changeFocusChild({ title: this.state.componentName })
     this.setState({
       componentName: '',
     });

src/containers/MainContainer.jsx

@@ -33,6 +33,7 @@ const mapDispatchToProps = dispatch => ({
 const mapStateToProps = store => ({
   totalComponents: store.workspace.totalComponents,
   focusComponent: store.workspace.focusComponent,
+  focusChild: store.workspace.focusChild,
 });
 
 class MainContainer extends Component {
@@ -85,6 +86,7 @@ class MainContainer extends Component {
       collapseColumn,
       rightColumnOpen,
       focusComponent,
+      focusChild,
     } = this.props;
     const {
       increaseHeight,
@@ -112,6 +114,7 @@ class MainContainer extends Component {
                 handleTransform={handleTransformation}
                 openExpansionPanel={openPanel}
                 focusComponent={focusComponent}
+                focusChild={focusChild}
               />
             ) : (
               <p>Add some components</p>

src/reducers/componentReducer.js

@@ -91,7 +91,18 @@ const initialApplicationState = {
   // imagePath: '',
   successOpen: false,
   errorOpen: false,
-  focusComponent: {},
+  focusComponent: appComponent,
+  focusChild: {  
+    childId: 0,
+    componentName: null,
+    position: {
+      x: 110,
+      y: 120,
+      width: 50,
+      height: 50,
+    },
+    draggable: true,
+  },
   components: [appComponent],
   appDir: '',
   loading: false,

src/utils/componentReducer.util.js

@@ -34,6 +34,7 @@ const initialChildState = {
     width: 50,
     height: 50,
   },
+  draggable: true,
 };
 
 export const addComponent = (state, { title }) => {
@@ -104,6 +105,7 @@ export const addChild = (state, { title }) => {
   return {
     ...state,
     components,
+    focusChild: newChild,
   };
 };