Skip to content

Commit 75e799f

Browse files
ShlomoPorgesShlomoPorges
committed
fixed change focus component
2 parents 737e122 + 88b455b commit 75e799f

File tree

10 files changed

+520
-391
lines changed

10 files changed

+520
-391
lines changed

‎src/actionTypes/index.js

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
export const LOAD_INIT_DATA = "LOAD_INIT_DATA";
2-
export const ADD_COMPONENT = "ADD_COMPONENT";
3-
export const ADD_CHILD = "ADD_CHILD";
4-
export const DELETE_CHILD = "DELETE_CHILD";
5-
export const UPDATE_COMPONENT = "UPDATE_COMPONENT";
6-
export const DELETE_COMPONENT = "DELETE_COMPONENT";
7-
export const CHANGE_FOCUS_COMPONENT = "CHANGE_FOCUS_COMPONENT";
8-
export const CHANGE_FOCUS_CHILD = "CHANGE_FOCUS_CHILD";
9-
export const UPDATE_CHILDREN = "UPDATE_CHILDREN";
10-
export const REASSIGN_PARENT = "REASSIGN_PARENT";
11-
export const SET_SELECTABLE_PARENTS = "SET_SELECTABLE_PARENTS";
12-
export const EXPORT_FILES = "EXPORT_FILES";
13-
export const EXPORT_FILES_SUCCESS = "EXPORT_FILES_SUCCESS";
14-
export const EXPORT_FILES_ERROR = "EXPORT_FILES_ERROR";
15-
export const HANDLE_CLOSE = "HANDLE_CLOSE";
16-
export const HANDLE_TRANSFORM = "HANDLE_TRANSFORM";
17-
export const CREATE_APPLICATION = "CREATE_APPLICATION";
18-
export const CREATE_APPLICATION_SUCCESS = "CREATE_APPLICATION_SUCCESS";
19-
export const CREATE_APPLICATION_ERROR = "CREATE_APPLICATION_ERROR";
20-
export const TOGGLE_DRAGGING = "TOGGLE_DRAGGING";
21-
export const MOVE_TO_BOTTOM = "MOVE_TO_BOTTOM";
22-
export const MOVE_TO_TOP = "MOVE_TO_TOP";
23-
export const OPEN_EXPANSION_PANEL = "OPEN_EXPANSION_PANEL";
24-
export const DELETE_PROP = "DELETE_PROP";
25-
export const ADD_PROP = "ADD_PROP";
26-
export const DELETE_ALL_DATA = "DELETE_ALL_DATA";
27-
export const CHANGE_IMAGE_PATH = "CHANGE_IMAGE_PATH";
1+
export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
2+
export const ADD_COMPONENT = 'ADD_COMPONENT';
3+
export const ADD_CHILD = 'ADD_CHILD';
4+
export const DELETE_CHILD = 'DELETE_CHILD';
5+
export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
6+
export const DELETE_COMPONENT = 'DELETE_COMPONENT';
7+
export const CHANGE_FOCUS_COMPONENT = 'CHANGE_FOCUS_COMPONENT';
8+
export const CHANGE_COMPONENT_FOCUS_CHILD = 'CHANGE_COMPONENT_FOCUS_CHILD';
9+
export const CHANGE_FOCUS_CHILD = 'CHANGE_FOCUS_CHILD';
10+
export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';
11+
export const REASSIGN_PARENT = 'REASSIGN_PARENT';
12+
export const SET_SELECTABLE_PARENTS = 'SET_SELECTABLE_PARENTS';
13+
export const EXPORT_FILES = 'EXPORT_FILES';
14+
export const EXPORT_FILES_SUCCESS = 'EXPORT_FILES_SUCCESS';
15+
export const EXPORT_FILES_ERROR = 'EXPORT_FILES_ERROR';
16+
export const HANDLE_CLOSE = 'HANDLE_CLOSE';
17+
export const HANDLE_TRANSFORM = 'HANDLE_TRANSFORM';
18+
export const CREATE_APPLICATION = 'CREATE_APPLICATION';
19+
export const CREATE_APPLICATION_SUCCESS = 'CREATE_APPLICATION_SUCCESS';
20+
export const CREATE_APPLICATION_ERROR = 'CREATE_APPLICATION_ERROR';
21+
export const TOGGLE_DRAGGING = 'TOGGLE_DRAGGING';
22+
export const MOVE_TO_BOTTOM = 'MOVE_TO_BOTTOM';
23+
export const MOVE_TO_TOP = 'MOVE_TO_TOP';
24+
export const OPEN_EXPANSION_PANEL = 'OPEN_EXPANSION_PANEL';
25+
export const DELETE_PROP = 'DELETE_PROP';
26+
export const ADD_PROP = 'ADD_PROP';
27+
export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
28+
export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';

‎src/actions/components.js

Lines changed: 57 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
DELETE_COMPONENT,
88
CHANGE_FOCUS_COMPONENT,
99
CHANGE_FOCUS_CHILD,
10+
CHANGE_COMPONENT_FOCUS_CHILD,
1011
UPDATE_CHILDREN,
1112
REASSIGN_PARENT,
1213
SET_SELECTABLE_PARENTS,
@@ -25,113 +26,118 @@ import {
2526
DELETE_PROP,
2627
ADD_PROP,
2728
DELETE_ALL_DATA,
28-
CHANGE_IMAGE_PATH
29-
} from "../actionTypes/index";
29+
CHANGE_IMAGE_PATH,
30+
} from '../actionTypes/index';
3031

31-
import { loadState } from "../localStorage";
32+
import { loadState } from '../localStorage';
3233

3334
// import createFiles from '../utils/createFiles.util';
3435
// import createApplicationUtil from '../utils/createApplication.util';
3536

36-
export const loadInitData = () => dispatch => {
37-
loadState().then(data =>
38-
dispatch({
39-
type: LOAD_INIT_DATA,
40-
payload: {
41-
data: data ? data.workspace : {}
42-
}
43-
})
44-
);
37+
export const loadInitData = () => (dispatch) => {
38+
loadState().then(data => dispatch({
39+
type: LOAD_INIT_DATA,
40+
payload: {
41+
data: data ? data.workspace : {},
42+
},
43+
}));
4544
};
4645

4746
export const updateChildren = ({ parentIds, childIndex, childId }) => ({
4847
type: UPDATE_CHILDREN,
4948
payload: {
5049
parentIds,
5150
childIndex,
52-
childId
53-
}
51+
childId,
52+
},
5453
});
5554

5655
export const parentReassignment = ({ index, id, parentIds }) => ({
5756
type: REASSIGN_PARENT,
5857
payload: {
5958
index,
6059
id,
61-
parentIds
62-
}
60+
parentIds,
61+
},
6362
});
6463

65-
export const addComponent = ({ title }) => dispatch => {
64+
export const addComponent = ({ title }) => (dispatch) => {
6665
dispatch({ type: ADD_COMPONENT, payload: { title } });
6766
};
6867

69-
export const addChild = ({ title }) => dispatch => {
68+
export const addChild = ({ title }) => (dispatch) => {
7069
dispatch({ type: ADD_CHILD, payload: { title } });
7170
};
7271

73-
export const deleteChild = ({ }) => dispatch => { // with no payload, it will delete focusd child
74-
dispatch({ type: DELETE_CHILD, payload: { } });
72+
export const deleteChild = ({}) => (dispatch) => {
73+
// with no payload, it will delete focusd child
74+
dispatch({ type: DELETE_CHILD, payload: {} });
7575
};
7676

77-
export const deleteComponent = ({ componentId , stateComponents}) => dispatch => {
78-
console.log('Hello from component.js delete component.componentId= ',componentId)
79-
80-
// find all places where the "to be delted" is a child and do what u gotta do
81-
stateComponents.forEach( parent => {
82-
parent.childrenArray.filter(child => child.childComponentId == componentId).forEach( child => {
83-
//console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
84-
dispatch({ type: DELETE_CHILD, payload: { parentId: parent.id, childId: child.childId, calledFromDeleteComponent: true } });
85-
})
86-
})
87-
88-
// change focus to APp
89-
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
90-
// after taking care of the children delete the component
91-
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
77+
export const deleteComponent = ({ componentId, stateComponents }) => (dispatch) => {
78+
console.log('Hello from component.js delete component.componentId= ', componentId);
79+
80+
// find all places where the "to be delted" is a child and do what u gotta do
81+
stateComponents.forEach((parent) => {
82+
parent.childrenArray.filter(child => child.childComponentId == componentId).forEach((child) => {
83+
// console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
84+
dispatch({
85+
type: DELETE_CHILD,
86+
payload: { parentId: parent.id, childId: child.childId, calledFromDeleteComponent: true },
87+
});
88+
});
89+
});
9290

91+
// change focus to APp
92+
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
93+
// after taking care of the children delete the component
94+
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
9395
};
9496

9597
export const updateComponent = ({
9698
id,
9799
index,
98100
newParentId = null,
99101
color = null,
100-
stateful = null
101-
}) => dispatch => {
102+
stateful = null,
103+
}) => (dispatch) => {
102104
dispatch({
103105
type: UPDATE_COMPONENT,
104106
payload: {
105107
id,
106108
index,
107109
newParentId,
108110
color,
109-
stateful
110-
}
111+
stateful,
112+
},
111113
});
112114

113115
if (newParentId) {
114116
dispatch(
115117
updateChildren({
116118
parentIds: [newParentId],
117119
childId: id,
118-
childIndex: index
119-
})
120+
childIndex: index,
121+
}),
120122
);
121123
}
122124

123125
dispatch({ type: SET_SELECTABLE_PARENTS });
124126
};
125127

126-
export const changeFocusComponent = ({ title }) => dispatch => {
128+
export const changeFocusComponent = ({ title }) => (dispatch) => {
127129
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
128130
};
129131

130132
// make sure childId is being sent in
131-
export const changeFocusChild = ({ title, childId }) => dispatch => {
133+
export const changeFocusChild = ({ title, childId }) => (dispatch) => {
132134
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
133135
};
134136

137+
export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
138+
dispatch({ type: CHANGE_COMPONENT_FOCUS_CHILD, payload: { componentId, childId } });
139+
};
140+
135141
// export const exportFiles = ({ components, path }) => (dispatch) => {
136142
// dispatch({
137143
// type: EXPORT_FILES,
@@ -150,23 +156,21 @@ export const changeFocusChild = ({ title, childId }) => dispatch => {
150156

151157
export const handleClose = () => ({
152158
type: HANDLE_CLOSE,
153-
payload: false
159+
payload: false,
154160
});
155161

156-
export const handleTransform = (
157-
componentId,
158-
childId,
159-
{ x, y, width, height }
160-
) => ({
162+
export const handleTransform = (componentId, childId, {
163+
x, y, width, height,
164+
}) => ({
161165
type: HANDLE_TRANSFORM,
162166
payload: {
163167
componentId,
164168
childId,
165169
x,
166170
y,
167171
width,
168-
height
169-
}
172+
height,
173+
},
170174
});
171175

172176
// export const createApplication = ({
@@ -196,7 +200,7 @@ export const handleTransform = (
196200

197201
export const toggleDragging = status => ({
198202
type: TOGGLE_DRAGGING,
199-
payload: status
203+
payload: status,
200204
});
201205

202206
// export const moveToBottom = componentId => ({
@@ -211,7 +215,7 @@ export const toggleDragging = status => ({
211215

212216
export const openExpansionPanel = component => ({
213217
type: OPEN_EXPANSION_PANEL,
214-
payload: { component }
218+
payload: { component },
215219
});
216220

217221
// export const deleteAllData = () => ({

‎src/components/GrandchildRectangle.jsx

Lines changed: 79 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,86 @@
1-
import React, { Component, Fragment } from 'react';
2-
import { Rect } from 'react-konva';
1+
import React, { Component } from 'react';
2+
import { Rect, Group } from 'react-konva';
33
// import PropTypes from 'prop-types';
44

55
class GrandchildRectangle extends Component {
6+
getComponentColor(componentId) {
7+
console.log('siodfbsldfk', componentId);
8+
const color = this.props.components.find(comp => comp.id == componentId).color;
9+
console.log(color);
10+
11+
return color;
12+
}
13+
614
render() {
7-
return <Rect />;
15+
const {
16+
color,
17+
x,
18+
y,
19+
scaleX,
20+
scaleY,
21+
childId,
22+
componentId,
23+
childComponentName,
24+
childComponentId,
25+
width,
26+
height,
27+
focusChild,
28+
components,
29+
} = this.props;
30+
31+
// the Group is responsible for dragging of all children
32+
// the Rect emits changes to child width and height with help from Transformer
33+
return (
34+
<Group
35+
draggable={false}
36+
x={x}
37+
y={y}
38+
scaleX={scaleX}
39+
scaleY={scaleY}
40+
width={width}
41+
height={height}
42+
>
43+
<Rect
44+
name={`${childId}`}
45+
x={0}
46+
y={0}
47+
// absolutePosition={{ x, y }}
48+
// childId={childId}
49+
componentId={componentId}
50+
scaleX={1}
51+
scaleY={1}
52+
width={width}
53+
height={height}
54+
stroke={color}
55+
color={this.getComponentColor(childComponentId)}
56+
// fill={color}
57+
// opacity={0.8}
58+
strokeWidth={4}
59+
strokeScaleEnabled={false}
60+
draggable={false}
61+
/>
62+
{components
63+
.find(comp => comp.title === childComponentName)
64+
.childrenArray.map((grandchild, i) => (
65+
<GrandchildRectangle
66+
key={i}
67+
components={components}
68+
componentId={componentId}
69+
childComponentName={grandchild.componentName}
70+
childComponentId={grandchild.childComponentId}
71+
focusChild={focusChild}
72+
// childId={grandchild.childId}
73+
x={grandchild.position.x * (width / (window.innerWidth / 2))}
74+
y={grandchild.position.y * (height / window.innerHeight)}
75+
scaleX={1}
76+
scaleY={1}
77+
width={grandchild.position.width * (width / (window.innerWidth / 2))}
78+
height={grandchild.position.height * (height / window.innerHeight)}
79+
color={color}
80+
/>
81+
))}
82+
</Group>
83+
);
884
}
985
}
1086

0 commit comments

Comments
 (0)