Skip to content

Commit fb017ac

Browse files
spincycle01spincycle01
committed
Merge branch 'development' of https://github.com/team-reactype/ReacType 
2 parents d39635c + b1e5d7c commit fb017ac

13 files changed

+733
-708
lines changed

‎src/actions/components.js

Lines changed: 51 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,21 @@ import {
2525
DELETE_PROP,
2626
ADD_PROP,
2727
DELETE_ALL_DATA,
28-
CHANGE_IMAGE_PATH
29-
} from "../actionTypes/index";
28+
CHANGE_IMAGE_PATH,
29+
} from '../actionTypes/index';
3030

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

3333
import createFiles from '../utils/createFiles.util';
34-
import createApplicationUtil from '../utils/createApplication.util'
35-
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-
);
34+
import createApplicationUtil from '../utils/createApplication.util';
35+
36+
export const loadInitData = () => (dispatch) => {
37+
loadState().then(data => dispatch({
38+
type: LOAD_INIT_DATA,
39+
payload: {
40+
data: data ? data.workspace : {},
41+
},
42+
}));
4543
};
4644

4745
// export const updateChildren = ({ parentIds, childIndex, childId }) => ({
@@ -62,47 +60,39 @@ export const loadInitData = () => dispatch => {
6260
// },
6361
// });
6462

65-
export const addComponent = ({ title }) => dispatch => {
63+
export const addComponent = ({ title }) => (dispatch) => {
6664
dispatch({ type: ADD_COMPONENT, payload: { title } });
6765
};
6866

69-
export const addChild = ({ title, childType, HTMLInfo }) => dispatch => {
67+
export const addChild = ({ title, childType, HTMLInfo }) => (dispatch) => {
7068
dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
7169
};
7270

73-
export const deleteChild = ({}) => dispatch => {
71+
export const deleteChild = ({}) => (dispatch) => {
7472
// with no payload, it will delete focusd child
7573
dispatch({ type: DELETE_CHILD, payload: {} });
7674
};
7775

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

8779
// find all places where the "to be delted" is a child and do what u gotta do
88-
stateComponents.forEach(parent => {
89-
parent.childrenArray
90-
.filter(child => child.childComponentId == componentId)
91-
.forEach(child => {
92-
// console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
93-
dispatch({
94-
type: DELETE_CHILD,
95-
payload: {
96-
parentId: parent.id,
97-
childId: child.childId,
98-
calledFromDeleteComponent: true
99-
}
100-
});
80+
stateComponents.forEach((parent) => {
81+
parent.childrenArray.filter(child => child.childComponentId == componentId).forEach((child) => {
82+
// console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
83+
dispatch({
84+
type: DELETE_CHILD,
85+
payload: {
86+
parentId: parent.id,
87+
childId: child.childId,
88+
calledFromDeleteComponent: true,
89+
},
10190
});
91+
});
10292
});
10393

10494
// change focus to APp
105-
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
95+
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
10696
// after taking care of the children delete the component
10797
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
10898
};
@@ -138,22 +128,19 @@ export const deleteComponent = ({
138128
// dispatch({ type: SET_SELECTABLE_PARENTS });
139129
// };
140130

141-
export const changeFocusComponent = ({ title }) => dispatch => {
131+
export const changeFocusComponent = ({ title }) => (dispatch) => {
142132
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
143133
};
144134

145135
// make sure childId is being sent in
146-
export const changeFocusChild = ({ title, childId }) => dispatch => {
136+
export const changeFocusChild = ({ title, childId }) => (dispatch) => {
147137
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
148138
};
149139

150-
export const changeComponentFocusChild = ({
151-
componentId,
152-
childId
153-
}) => dispatch => {
140+
export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
154141
dispatch({
155142
type: CHANGE_COMPONENT_FOCUS_CHILD,
156-
payload: { componentId, childId }
143+
payload: { componentId, childId },
157144
});
158145
};
159146

@@ -175,27 +162,29 @@ export const exportFiles = ({ components, path }) => (dispatch) => {
175162

176163
export const handleClose = () => ({
177164
type: HANDLE_CLOSE,
178-
payload: false
165+
payload: false,
179166
});
180167

181-
export const handleTransform = (
182-
componentId,
183-
childId,
184-
{ x, y, width, height }
185-
) => ({
168+
export const handleTransform = (componentId, childId, {
169+
x, y, width, height,
170+
}) => ({
186171
type: HANDLE_TRANSFORM,
187172
payload: {
188173
componentId,
189174
childId,
190175
x,
191176
y,
192177
width,
193-
height
194-
}
178+
height,
179+
},
195180
});
196181

197182
export const createApplication = ({
198-
path, components = [], genOption, appName = 'proto_app', repoUrl,
183+
path,
184+
components = [],
185+
genOption,
186+
appName = 'proto_app',
187+
repoUrl,
199188
}) => (dispatch) => {
200189
if (genOption === 0) {
201190
dispatch(exportFiles({ path, components }));
@@ -204,7 +193,10 @@ export const createApplication = ({
204193
type: CREATE_APPLICATION,
205194
});
206195
createApplicationUtil({
207-
path, appName, genOption, repoUrl,
196+
path,
197+
appName,
198+
genOption,
199+
repoUrl,
208200
})
209201
.then(() => {
210202
dispatch({
@@ -221,18 +213,18 @@ export const createApplication = ({
221213

222214
export const openExpansionPanel = component => ({
223215
type: OPEN_EXPANSION_PANEL,
224-
payload: { component }
216+
payload: { component },
225217
});
226218

227219
// export const deleteAllData = () => ({
228220
// type: DELETE_ALL_DATA,
229221
// });
230222

231-
export const deleteProp = propId => dispatch => {
223+
export const deleteProp = propId => (dispatch) => {
232224
dispatch({ type: DELETE_PROP, payload: propId });
233225
};
234226

235227
export const addProp = prop => ({
236228
type: ADD_PROP,
237-
payload: { ...prop }
229+
payload: { ...prop },
238230
});

‎src/components/DataTable.jsx

Lines changed: 30 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import TableRow from '@material-ui/core/TableRow';
99
import Paper from '@material-ui/core/Paper';
1010
import Button from '@material-ui/core/Button';
1111

12-
13-
1412
const styles = theme => ({
1513
root: {
1614
width: '100%',
@@ -22,62 +20,46 @@ const styles = theme => ({
2220
},
2321
});
2422

25-
26-
/****************************
27-
* cannot have a row header or a key in the data called "key"
28-
* ,ust have unique id
23+
/** **************************
24+
* cannot have a row header or a key in the data called "key"
25+
* ,ust have unique id
2926
* ****************************** */
3027

3128
function dataTable(props) {
32-
const { classes , rowData, rowHeader , deletePropHandler } = props;
33-
34-
// console.log(classes)
35-
// console.log(`rowHeader`)
36-
// console.log(rowHeader)
37-
// console.log(`rowData`)
38-
// console.log(rowData)
29+
const {
30+
classes, rowData, rowHeader, deletePropHandler,
31+
} = props;
32+
33+
const renderHeader = rowHeader.map((col, idx) => (
34+
<TableCell key={`head_+${idx}`}>{col}</TableCell>
35+
));
3936

40-
const renderHeader = rowHeader.map( (col,idx) => {
41-
return <TableCell key={`head_+${idx}`}>{col}</TableCell>
42-
})
37+
function renderRowCells(row) {
38+
if (!row) return;
39+
// for some reason we must put each value in a div.
40+
return rowHeader.map((header, idx) => (
41+
<TableCell key={`td_${idx}`}>
42+
<div>{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div>
43+
</TableCell>
44+
));
45+
}
4346

44-
function renderRowCells (row) {
45-
if(!row) return;
46-
// for some reason we must put each value in a div.
47-
return (
48-
rowHeader.map( (header,idx) =>
49-
<TableCell key={'td_'+ idx}>
50-
<div>
51-
{ typeof row[header] == 'string' ? row[header] : row[header].toString() }
52-
</div>
53-
</TableCell>
54-
)
55-
)
56-
}
57-
58-
const renderRows =
59-
rowData.map((row) =>
60-
<TableRow key={`row-${row.id}`}>
61-
{renderRowCells(row)}
62-
<TableCell>
63-
<Button onClick={ ()=>deletePropHandler(row.id) } >
64-
Delete
65-
</Button>
66-
</TableCell>
67-
</TableRow>
68-
)
47+
const renderRows = rowData.map(row => (
48+
<TableRow key={`row-${row.id}`}>
49+
{renderRowCells(row)}
50+
<TableCell>
51+
<Button onClick={() => deletePropHandler(row.id)}>Delete</Button>
52+
</TableCell>
53+
</TableRow>
54+
));
6955

7056
return (
7157
<Paper className={classes.root}>
7258
<Table className={classes.table}>
7359
<TableHead>
74-
<TableRow>
75-
{renderHeader}
76-
</TableRow>
60+
<TableRow>{renderHeader}</TableRow>
7761
</TableHead>
78-
<TableBody>
79-
{renderRows}
80-
</TableBody>
62+
<TableBody>{renderRows}</TableBody>
8163
</Table>
8264
</Paper>
8365
);
@@ -87,4 +69,4 @@ function dataTable(props) {
8769
// classes: PropTypes.object.isRequired,
8870
// };
8971

90-
export default withStyles(styles)(dataTable);
72+
export default withStyles(styles)(dataTable);

‎src/components/GrandchildRectangle.jsx

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ class GrandchildRectangle extends Component {
1919
scaleY,
2020
childId,
2121
componentId,
22+
childType,
2223
childComponentName,
2324
childComponentId,
2425
width,
@@ -45,45 +46,46 @@ class GrandchildRectangle extends Component {
4546
y={0}
4647
childId={childId}
4748
componentId={componentId}
49+
childType={childType}
4850
scaleX={1}
4951
scaleY={1}
5052
width={width}
5153
height={height}
52-
stroke={this.getComponentColor(childComponentId)}
54+
stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
5355
// fill={color}
5456
// opacity={0.8}
5557
strokeWidth={4}
5658
strokeScaleEnabled={false}
5759
draggable={false}
5860
/>
59-
{components
60-
.find(comp => comp.title === childComponentName)
61-
.childrenArray.filter(child => child.childId !== '-1')
62-
.map((grandchild, i) => (
63-
<GrandchildRectangle
64-
key={i}
65-
components={components}
66-
componentId={componentId}
67-
childComponentName={grandchild.componentName}
68-
childComponentId={grandchild.childComponentId}
69-
focusChild={focusChild}
70-
childId={childId}
71-
// x={grandchild.position.x * (width / window.innerWidth)}
72-
// y={grandchild.position.y * (height / window.innerHeight)}
73-
// width={grandchild.position.width * (width / window.innerWidth)}
74-
// height={grandchild.position.height * (height / window.innerHeight)}
75-
width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
76-
height={grandchild.position.height * (height / this.getPseudoChild().position.height)}
77-
x={
78-
(grandchild.position.x - this.getPseudoChild().position.x)
79-
* (width / this.getPseudoChild().position.width)
80-
}
81-
y={
82-
(grandchild.position.y - this.getPseudoChild().position.y)
83-
* (height / this.getPseudoChild().position.height)
84-
}
85-
/>
86-
))}
61+
{childType === 'COMP'
62+
&& components
63+
.find(comp => comp.title === childComponentName)
64+
.childrenArray.filter(child => child.childId !== '-1')
65+
.map((grandchild, i) => (
66+
<GrandchildRectangle
67+
key={i}
68+
components={components}
69+
componentId={componentId}
70+
childType={grandchild.childType}
71+
childComponentName={grandchild.componentName}
72+
childComponentId={grandchild.childComponentId}
73+
focusChild={focusChild}
74+
childId={childId}
75+
width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
76+
height={
77+
grandchild.position.height * (height / this.getPseudoChild().position.height)
78+
}
79+
x={
80+
(grandchild.position.x - this.getPseudoChild().position.x)
81+
* (width / this.getPseudoChild().position.width)
82+
}
83+
y={
84+
(grandchild.position.y - this.getPseudoChild().position.y)
85+
* (height / this.getPseudoChild().position.height)
86+
}
87+
/>
88+
))}
8789
</Group>
8890
);
8991
}

0 commit comments

Comments
 (0)