Skip to content

Commit e21eecc

Browse files
tolgamizrakcitolgamizrakci
authored
Merge pull request #39 from team-reactype/development
Stable MVP version
2 parents a3380e5 + b30c641 commit e21eecc

16 files changed

+1058
-586
lines changed

‎src/actionTypes/index.js

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +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 UPDATE_COMPONENT = "UPDATE_COMPONENT";
5-
export const DELETE_COMPONENT = "DELETE_COMPONENT";
6-
export const CHANGE_FOCUS_COMPONENT = "CHANGE_FOCUS_COMPONENT";
7-
export const CHANGE_FOCUS_CHILD = "CHANGE_FOCUS_CHILD";
8-
export const UPDATE_CHILDREN = "UPDATE_CHILDREN";
9-
export const REASSIGN_PARENT = "REASSIGN_PARENT";
10-
export const SET_SELECTABLE_PARENTS = "SET_SELECTABLE_PARENTS";
11-
export const EXPORT_FILES = "EXPORT_FILES";
12-
export const EXPORT_FILES_SUCCESS = "EXPORT_FILES_SUCCESS";
13-
export const EXPORT_FILES_ERROR = "EXPORT_FILES_ERROR";
14-
export const HANDLE_CLOSE = "HANDLE_CLOSE";
15-
export const HANDLE_TRANSFORM = "HANDLE_TRANSFORM";
16-
export const CREATE_APPLICATION = "CREATE_APPLICATION";
17-
export const CREATE_APPLICATION_SUCCESS = "CREATE_APPLICATION_SUCCESS";
18-
export const CREATE_APPLICATION_ERROR = "CREATE_APPLICATION_ERROR";
19-
export const TOGGLE_DRAGGING = "TOGGLE_DRAGGING";
20-
export const MOVE_TO_BOTTOM = "MOVE_TO_BOTTOM";
21-
export const MOVE_TO_TOP = "MOVE_TO_TOP";
22-
export const OPEN_EXPANSION_PANEL = "OPEN_EXPANSION_PANEL";
23-
export const DELETE_PROP = "DELETE_PROP";
24-
export const ADD_PROP = "ADD_PROP";
25-
export const DELETE_ALL_DATA = "DELETE_ALL_DATA";
26-
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: 54 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import {
22
LOAD_INIT_DATA,
33
ADD_COMPONENT,
44
ADD_CHILD,
5+
DELETE_CHILD,
56
UPDATE_COMPONENT,
67
DELETE_COMPONENT,
78
CHANGE_FOCUS_COMPONENT,
89
CHANGE_FOCUS_CHILD,
10+
CHANGE_COMPONENT_FOCUS_CHILD,
911
UPDATE_CHILDREN,
1012
REASSIGN_PARENT,
1113
SET_SELECTABLE_PARENTS,
@@ -63,24 +65,47 @@ export const parentReassignment = ({ index, id, parentIds }) => ({
6365

6466
export const addComponent = ({ title }) => dispatch => {
6567
dispatch({ type: ADD_COMPONENT, payload: { title } });
66-
// dispatch({ type: SET_SELECTABLE_PARENTS });
6768
};
6869

6970
export const addChild = ({ title }) => dispatch => {
7071
dispatch({ type: ADD_CHILD, payload: { title } });
71-
// dispatch({ type: SET_SELECTABLE_PARENTS });
7272
};
7373

74-
export const deleteComponent = ({ index, id, parentIds = [] }) => dispatch => {
75-
if (parentIds.length) {
76-
// Delete Component from its parent if it has a parent.
77-
dispatch(updateChildren({ parentIds, childId: id, childIndex: index }));
78-
}
79-
// Reassign Component's children to its parent if it has one or make them orphans
80-
dispatch(parentReassignment({ index, id, parentIds }));
74+
export const deleteChild = ({}) => dispatch => {
75+
// with no payload, it will delete focusd child
76+
dispatch({ type: DELETE_CHILD, payload: {} });
77+
};
8178

82-
dispatch({ type: DELETE_COMPONENT, payload: { index, id } });
83-
dispatch({ type: SET_SELECTABLE_PARENTS });
79+
export const deleteComponent = ({
80+
componentId,
81+
stateComponents
82+
}) => dispatch => {
83+
console.log(
84+
"Hello from component.js delete component.componentId= ",
85+
componentId
86+
);
87+
88+
// find all places where the "to be delted" is a child and do what u gotta do
89+
stateComponents.forEach(parent => {
90+
parent.childrenArray
91+
.filter(child => child.childComponentId == componentId)
92+
.forEach(child => {
93+
// console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
94+
dispatch({
95+
type: DELETE_CHILD,
96+
payload: {
97+
parentId: parent.id,
98+
childId: child.childId,
99+
calledFromDeleteComponent: true
100+
}
101+
});
102+
});
103+
});
104+
105+
// change focus to APp
106+
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
107+
// after taking care of the children delete the component
108+
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
84109
};
85110

86111
export const updateComponent = ({
@@ -123,6 +148,16 @@ export const changeFocusChild = ({ title, childId }) => dispatch => {
123148
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
124149
};
125150

151+
export const changeComponentFocusChild = ({
152+
componentId,
153+
childId
154+
}) => dispatch => {
155+
dispatch({
156+
type: CHANGE_COMPONENT_FOCUS_CHILD,
157+
payload: { componentId, childId }
158+
});
159+
};
160+
126161
// export const exportFiles = ({ components, path }) => (dispatch) => {
127162
// dispatch({
128163
// type: EXPORT_FILES,
@@ -214,12 +249,12 @@ export const openExpansionPanel = component => ({
214249
// payload: path,
215250
// });
216251

217-
// export const deleteCompProp = ({ id, index }) => ({
218-
// type: DELETE_PROP,
219-
// payload: { id, index },
220-
// });
252+
export const deleteProp = ({ id, index }) => ({
253+
type: DELETE_PROP,
254+
payload: { id, index }
255+
});
221256

222-
// export const addCompProp = prop => ({
223-
// type: ADD_PROP,
224-
// payload: { ...prop },
225-
// });
257+
export const addProp = prop => ({
258+
type: ADD_PROP,
259+
payload: { ...prop }
260+
});

‎src/components/BottomPanel.jsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
// import PropTypes from 'prop-types';
4+
import {
5+
handleClose,
6+
deleteCompProp,
7+
addCompProp
8+
} from "../actions/components";
9+
// import Snackbars from '../components/Snackbars.jsx';
10+
import RightTabs from "./RightTabs.jsx";
11+
12+
const IPC = require("electron").ipcRenderer;
13+
14+
const mapDispatchToProps = dispatch => ({
15+
handleNotificationClose: () => dispatch(handleClose()),
16+
deleteProp: ({ id, index }) => dispatch(deleteCompProp({ id, index })),
17+
addProp: prop => dispatch(addCompProp(prop))
18+
});
19+
20+
const mapStateToProps = store => ({
21+
successOpen: store.workspace.successOpen,
22+
errorOpen: store.workspace.errorOpen,
23+
appDir: store.workspace.appDir
24+
});
25+
26+
class BottomPanel extends Component {
27+
state = {
28+
successOpen: false,
29+
errorOpen: false
30+
};
31+
32+
viewAppDir = () => {
33+
IPC.send("view_app_dir", this.props.appDir);
34+
};
35+
36+
render() {
37+
const {
38+
components,
39+
successOpen,
40+
errorOpen,
41+
handleNotificationClose,
42+
appDir,
43+
focusComponent,
44+
deleteProp,
45+
addProp
46+
// rightColumnOpen
47+
} = this.props;
48+
49+
return (
50+
<div className="bottom-panel" style={{ width: "100%" }}>
51+
<RightTabs
52+
components={components}
53+
focusComponent={focusComponent}
54+
deleteProp={deleteProp}
55+
addProp={addProp}
56+
// rightColumnOpen={rightColumnOpen}
57+
/>
58+
{/* <Snackbars
59+
successOpen={successOpen}
60+
errorOpen={errorOpen}
61+
handleNotificationClose={handleNotificationClose}
62+
msg={appDir}
63+
viewAppDir={this.viewAppDir}
64+
/> */}
65+
</div>
66+
);
67+
}
68+
}
69+
70+
// RightContainer.propTypes = {
71+
// components: PropTypes.array.isRequired,
72+
// successOpen: PropTypes.bool.isRequired,
73+
// appDir: PropTypes.string,
74+
// errorOpen: PropTypes.bool.isRequired,
75+
// focusComponent: PropTypes.object.isRequired,
76+
// handleNotificationClose: PropTypes.func.isRequired,
77+
// deleteProp: PropTypes.func.isRequired,
78+
// addProp: PropTypes.func.isRequired,
79+
// width: PropTypes.number.isRequired,
80+
// rightColumnOpen: PropTypes.bool.isRequired,
81+
// };
82+
83+
export default connect(
84+
mapStateToProps,
85+
mapDispatchToProps
86+
)(BottomPanel);

‎src/components/GrandchildRectangle.jsx

Lines changed: 73 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,80 @@
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+
const color = this.props.components.find(comp => comp.id == componentId).color;
8+
return color;
9+
}
10+
611
render() {
7-
return <Rect />;
12+
const {
13+
x,
14+
y,
15+
scaleX,
16+
scaleY,
17+
childId,
18+
componentId,
19+
childComponentName,
20+
childComponentId,
21+
width,
22+
height,
23+
focusChild,
24+
components,
25+
} = this.props;
26+
27+
// the Group is responsible for dragging of all children
28+
// the Rect emits changes to child width and height with help from Transformer
29+
return (
30+
<Group
31+
draggable={false}
32+
x={x}
33+
y={y}
34+
scaleX={scaleX}
35+
scaleY={scaleY}
36+
width={width}
37+
height={height}
38+
>
39+
<Rect
40+
name={`${childId}`}
41+
x={0}
42+
y={0}
43+
// absolutePosition={{ x, y }}
44+
// childId={childId}
45+
componentId={componentId}
46+
scaleX={1}
47+
scaleY={1}
48+
width={width}
49+
height={height}
50+
stroke={this.getComponentColor(childComponentId)}
51+
// fill={color}
52+
// opacity={0.8}
53+
strokeWidth={4}
54+
strokeScaleEnabled={false}
55+
draggable={false}
56+
/>
57+
{components
58+
.find(comp => comp.title === childComponentName)
59+
.childrenArray.map((grandchild, i) => (
60+
<GrandchildRectangle
61+
key={i}
62+
components={components}
63+
componentId={componentId}
64+
childComponentName={grandchild.componentName}
65+
childComponentId={grandchild.childComponentId}
66+
focusChild={focusChild}
67+
// childId={grandchild.childId}
68+
x={grandchild.position.x * (width / (window.innerWidth / 2))}
69+
y={grandchild.position.y * (height / window.innerHeight)}
70+
scaleX={1}
71+
scaleY={1}
72+
width={grandchild.position.width * (width / (window.innerWidth / 2))}
73+
height={grandchild.position.height * (height / window.innerHeight)}
74+
/>
75+
))}
76+
</Group>
77+
);
878
}
979
}
1080

0 commit comments

Comments
 (0)