Skip to content

Commit f0375c2

Browse files
tolgamizrakcitolgamizrakci
authored
Merge pull request #61 from tolgamizrakci/development
 app tree working
2 parents bc92e8d + 17bb341 commit f0375c2

File tree

10 files changed

+960
-189
lines changed

10 files changed

+960
-189
lines changed

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
]
7676
},
7777
"dependencies": {
78-
"@material-ui/core": "^1.4.1",
78+
"@material-ui/core": "^3.9.3",
7979
"@material-ui/icons": "^2.0.0",
8080
"@types/react": "^16.8.14",
8181
"@types/react-dom": "^16.8.4",
@@ -85,6 +85,7 @@
8585
"classnames": "^2.2.6",
8686
"cli-spinner": "^0.2.8",
8787
"commander": "^2.17.1",
88+
"d3": "^5.9.2",
8889
"electron": "^2.0.7",
8990
"electron-reload": "^1.4.0",
9091
"enzyme": "^3.4.1",
@@ -94,6 +95,7 @@
9495
"prettier": "^1.14.2",
9596
"prop-types": "^15.6.2",
9697
"react": "^16.4.1",
98+
"react-d3-tree": "^1.12.3",
9799
"react-dom": "^16.4.1",
98100
"react-draggable": "^3.0.5",
99101
"react-konva": "^1.7.12",

‎src/actions/components.js

Lines changed: 93 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,23 @@ import {
2626
ADD_PROP,
2727
DELETE_ALL_DATA,
2828
CHANGE_IMAGE_PATH,
29-
UPDATE_HTML_ATTR,
30-
} from '../actionTypes/index';
29+
UPDATE_HTML_ATTR
30+
} from "../actionTypes/index";
3131

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

34-
import createFiles from '../utils/createFiles.util';
35-
import createApplicationUtil from '../utils/createApplication.util';
34+
import createFiles from "../utils/createFiles.util";
35+
import createApplicationUtil from "../utils/createApplication.util";
3636

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

4648
// export const updateChildren = ({ parentIds, childIndex, childId }) => ({
@@ -61,39 +63,47 @@ export const loadInitData = () => (dispatch) => {
6163
// },
6264
// });
6365

64-
export const addComponent = ({ title }) => (dispatch) => {
66+
export const addComponent = ({ title }) => dispatch => {
6567
dispatch({ type: ADD_COMPONENT, payload: { title } });
6668
};
6769

68-
export const addChild = ({ title, childType, HTMLInfo }) => (dispatch) => {
70+
export const addChild = ({ title, childType, HTMLInfo }) => dispatch => {
6971
dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
7072
};
7173

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

77-
export const deleteComponent = ({ componentId, stateComponents }) => (dispatch) => {
78-
console.log('Hello from component.js delete component.componentId= ', componentId);
79+
export const deleteComponent = ({
80+
componentId,
81+
stateComponents
82+
}) => dispatch => {
83+
console.log(
84+
"Hello from component.js delete component.componentId= ",
85+
componentId
86+
);
7987

8088
// 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: {
87-
parentId: parent.id,
88-
childId: child.childId,
89-
calledFromDeleteComponent: true,
90-
},
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+
});
91102
});
92-
});
93103
});
94104

95105
// change focus to APp
96-
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
106+
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
97107
// after taking care of the children delete the component
98108
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
99109
};
@@ -129,129 +139,143 @@ export const deleteComponent = ({ componentId, stateComponents }) => (dispatch)
129139
// dispatch({ type: SET_SELECTABLE_PARENTS });
130140
// };
131141

132-
export const changeFocusComponent = ({ title }) => (dispatch) => {
142+
export const changeFocusComponent = ({ title }) => dispatch => {
133143
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
134144
};
135145

136146
// make sure childId is being sent in
137-
export const changeFocusChild = ({ title, childId }) => (dispatch) => {
147+
export const changeFocusChild = ({ title, childId }) => dispatch => {
138148
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
139149
};
140150

141-
export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
151+
export const changeComponentFocusChild = ({
152+
componentId,
153+
childId
154+
}) => dispatch => {
142155
dispatch({
143156
type: CHANGE_COMPONENT_FOCUS_CHILD,
144-
payload: { componentId, childId },
157+
payload: { componentId, childId }
145158
});
146159
};
147160

148161
export const exportFiles = ({
149-
components, path, appName, exportAppBool,
150-
}) => (dispatch) => {
162+
components,
163+
path,
164+
appName,
165+
exportAppBool
166+
}) => dispatch => {
151167
// this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
152168
dispatch({
153-
type: EXPORT_FILES,
169+
type: EXPORT_FILES
154170
});
155171

156172
createFiles(components, path, appName, exportAppBool)
157-
.then(dir => dispatch({
158-
type: EXPORT_FILES_SUCCESS,
159-
payload: { status: true, dir: dir[0] },
160-
}))
161-
.catch(err => dispatch({
162-
type: EXPORT_FILES_ERROR,
163-
payload: { status: true, err },
164-
}));
173+
.then(dir =>
174+
dispatch({
175+
type: EXPORT_FILES_SUCCESS,
176+
payload: { status: true, dir: dir[0] }
177+
})
178+
)
179+
.catch(err =>
180+
dispatch({
181+
type: EXPORT_FILES_ERROR,
182+
payload: { status: true, err }
183+
})
184+
);
165185
};
166186

167187
export const handleClose = () => ({
168188
type: HANDLE_CLOSE,
169-
payload: false,
189+
payload: false
170190
});
171191

172-
export const handleTransform = (componentId, childId, {
173-
x, y, width, height,
174-
}) => ({
192+
export const handleTransform = (
193+
componentId,
194+
childId,
195+
{ x, y, width, height }
196+
) => ({
175197
type: HANDLE_TRANSFORM,
176198
payload: {
177199
componentId,
178200
childId,
179201
x,
180202
y,
181203
width,
182-
height,
183-
},
204+
height
205+
}
184206
});
185207

186208
export const createApplication = ({
187209
path,
188210
components = [],
189211
genOption,
190-
appName = 'reactype_app',
191-
exportAppBool,
192-
}) => (dispatch) => {
212+
appName = "reactype_app",
213+
exportAppBool
214+
}) => dispatch => {
193215
if (genOption === 0) {
194216
exportAppBool = false;
195217
dispatch(
196218
exportFiles({
197219
appName,
198220
path,
199221
components,
200-
exportAppBool,
201-
}),
222+
exportAppBool
223+
})
202224
);
203225
} else if (genOption) {
204226
exportAppBool = true;
205227
dispatch({
206-
type: CREATE_APPLICATION,
228+
type: CREATE_APPLICATION
207229
});
208230
createApplicationUtil({
209231
path,
210232
appName,
211233
genOption,
212-
exportAppBool,
234+
exportAppBool
213235
})
214236
.then(() => {
215237
dispatch({
216-
type: CREATE_APPLICATION_SUCCESS,
238+
type: CREATE_APPLICATION_SUCCESS
217239
});
218240
dispatch(
219241
exportFiles({
220242
appName,
221243
path,
222244
components,
223-
exportAppBool,
224-
}),
245+
exportAppBool
246+
})
225247
);
226248
})
227-
.catch(err => dispatch({
228-
type: CREATE_APPLICATION_ERROR,
229-
payload: { status: true, err },
230-
}));
249+
.catch(err =>
250+
dispatch({
251+
type: CREATE_APPLICATION_ERROR,
252+
payload: { status: true, err }
253+
})
254+
);
231255
}
232256
};
233257

234258
export const openExpansionPanel = component => ({
235259
type: OPEN_EXPANSION_PANEL,
236-
payload: { component },
260+
payload: { component }
237261
});
238262

239263
// export const deleteAllData = () => ({
240264
// type: DELETE_ALL_DATA,
241265
// });
242266

243-
export const deleteProp = propId => (dispatch) => {
267+
export const deleteProp = propId => dispatch => {
244268
dispatch({ type: DELETE_PROP, payload: propId });
245269
};
246270

247271
export const addProp = prop => ({
248272
type: ADD_PROP,
249-
payload: { ...prop },
273+
payload: { ...prop }
250274
});
251275

252-
export const updateHtmlAttr = ({ attr, value }) => (dispatch) => {
276+
export const updateHtmlAttr = ({ attr, value }) => dispatch => {
253277
dispatch({
254278
type: UPDATE_HTML_ATTR,
255-
payload: { attr, value },
279+
payload: { attr, value }
256280
});
257281
};

‎src/components/BottomPanel.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ const mapStateToProps = store => ({
2020
// successOpen: store.workspace.successOpen,
2121
// errorOpen: store.workspace.errorOpen,
2222
// appDir: store.workspace.appDir,
23-
focusChild: store.workspace.focusChild
23+
focusChild: store.workspace.focusChild,
24+
components: store.workspace.components
2425
});
2526

2627
class BottomPanel extends Component {
@@ -47,6 +48,8 @@ class BottomPanel extends Component {
4748
// rightColumnOpen
4849
} = this.props;
4950

51+
console.log(components);
52+
5053
return (
5154
<div className="bottom-panel" style={{ width: "100%" }}>
5255
<RightTabs

‎src/components/HTMLComponentPanel.jsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import Chip from "@material-ui/core/Chip";
1919

2020
// import {HTMLelements,getSize} from "../utils/htmlElements.util";
2121

22+
// test
23+
2224
class HTMLComponentPanel extends Component {
2325
state = {
2426
HtmlComponentName: ""
@@ -43,7 +45,7 @@ class HTMLComponentPanel extends Component {
4345
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
4446
label="Add HTML elements"
4547
/>
46-
<Grid container spacing={24} alignItems="baseline" align="stretch">
48+
<Grid container spacing={8} alignItems="baseline" align="stretch">
4749
<Grid item xs={4}>
4850
<div className="htmliconwrapper">
4951
<IconButton
@@ -53,9 +55,8 @@ class HTMLComponentPanel extends Component {
5355
this.handleCreateHTMLChild("Image");
5456
}}
5557
>
56-
<ImageIcon />
58+
<ImageIcon style={{ color: "#e0e0e0" }} />
5759
</IconButton>
58-
<Chip label="Image" className={classes.chip} variant="outlined" />
5960
</div>
6061
</Grid>
6162
<Grid item xs={4}>
@@ -118,13 +119,17 @@ function styles(theme) {
118119
return {
119120
htmlPanel: {
120121
width: "100%",
121-
height: "33%",
122-
backgroundColor: "#333333",
122+
height: "30%",
123+
// backgroundColor: "#333333",
124+
borderStyle: "solid",
125+
borderWidth: "0.5px",
126+
borderRadius: "1px",
127+
borderColor: "#424242",
123128
bottom: "0px",
124129
padding: "20px"
125130
},
126131
chip: {
127-
background: "rgba(193, 66, 66, 0)"
132+
color: "rgba(193, 66, 66, 0)"
128133
},
129134
htmliconwrapper: {
130135
verticalAlign: "baseline"
@@ -136,7 +141,7 @@ function styles(theme) {
136141
textTransform: "initial",
137142
minWidth: 100,
138143
fontWeight: theme.typography.fontWeightRegular,
139-
marginRight: theme.spacing.unit * 4,
144+
// marginRight: theme.spacing.unit * 4,
140145
color: "#ffffff"
141146
}
142147
};

0 commit comments

Comments
 (0)