Skip to content

Commit 5e9b75e

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
authored
Merge pull request #66 from ChristianEdwardPadilla/development
major object interfaces added, small reducer changes, no more string ids
2 parents 6e21d23 + c532596 commit 5e9b75e

File tree

11 files changed

+204
-182
lines changed

11 files changed

+204
-182
lines changed

‎src/actions/components.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const deleteChild = ({}) => (dispatch) => {
7777
export const deleteComponent = ({ componentId, stateComponents }) => (dispatch) => {
7878
// find all places where the "to be delted" is a child and do what u gotta do
7979
stateComponents.forEach((parent) => {
80-
parent.childrenArray.filter(child => child.childComponentId == componentId).forEach((child) => {
80+
parent.childrenArray.filter(child => child.childComponentId === componentId).forEach((child) => {
8181
dispatch({
8282
type: DELETE_CHILD,
8383
payload: {
@@ -131,8 +131,8 @@ export const changeFocusComponent = ({ title }) => (dispatch) => {
131131
};
132132

133133
// make sure childId is being sent in
134-
export const changeFocusChild = ({ title, childId }) => (dispatch) => {
135-
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
134+
export const changeFocusChild = ({ childId }) => (dispatch) => {
135+
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
136136
};
137137

138138
export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {

‎src/components/DataTable.jsx

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import React from "react";
1+
import React from 'react';
22
// import PropTypes from 'prop-types';
3-
import { withStyles } from "@material-ui/core/styles";
4-
import Table from "@material-ui/core/Table";
5-
import TableBody from "@material-ui/core/TableBody";
6-
import TableCell from "@material-ui/core/TableCell";
7-
import TableHead from "@material-ui/core/TableHead";
8-
import TableRow from "@material-ui/core/TableRow";
9-
import Paper from "@material-ui/core/Paper";
10-
import Button from "@material-ui/core/Button";
11-
import DeleteIcon from "@material-ui/icons/Delete";
12-
import { IconButton } from "@material-ui/core";
3+
import { withStyles } from '@material-ui/core/styles';
4+
import Table from '@material-ui/core/Table';
5+
import TableBody from '@material-ui/core/TableBody';
6+
import TableCell from '@material-ui/core/TableCell';
7+
import TableHead from '@material-ui/core/TableHead';
8+
import TableRow from '@material-ui/core/TableRow';
9+
import Paper from '@material-ui/core/Paper';
10+
import Button from '@material-ui/core/Button';
11+
import DeleteIcon from '@material-ui/icons/Delete';
12+
import { IconButton } from '@material-ui/core';
1313

1414
const styles = theme => ({
1515
root: {
16-
width: "80%",
17-
marginTop: theme.spacing.unit * 3
16+
width: '80%',
17+
marginTop: theme.spacing.unit * 3,
1818
// overflowX: "auto"
1919
},
2020
table: {
21-
minWidth: 500
22-
}
21+
minWidth: 500,
22+
},
2323
});
2424

2525
/** **************************
@@ -28,7 +28,9 @@ const styles = theme => ({
2828
* ****************************** */
2929

3030
function dataTable(props) {
31-
const { classes, rowData, rowHeader, deletePropHandler } = props;
31+
const {
32+
classes, rowData, rowHeader, deletePropHandler,
33+
} = props;
3234

3335
const renderHeader = rowHeader.map((col, idx) => (
3436
<TableCell key={`head_+${idx}`}>{col}</TableCell>
@@ -38,23 +40,19 @@ function dataTable(props) {
3840
if (!row) return;
3941
// for some reason we must put each value in a div.
4042
return rowHeader.map((header, idx) => (
41-
<TableCell align={"center"} key={`td_${idx}`}>
43+
<TableCell align={'center'} key={`td_${idx}`}>
4244
{/* <div align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
4345
{/* {row[header]} */}
44-
{typeof row[header] === "string" ? row[header] : row[header].toString()}
46+
{typeof row[header] === 'string' ? row[header] : row[header].toString()}
4547
</TableCell>
4648
));
4749
}
48-
//style={{height: 30}}
50+
// style={{height: 30}}
4951
const renderRows = rowData.map(row => (
5052
<TableRow key={`row-${row.id}`}>
5153
{renderRowCells(row)}
52-
<TableCell align={"center"} padding={"none"}>
53-
<IconButton
54-
color="default"
55-
fontSize="small"
56-
onClick={() => deletePropHandler(row.id)}
57-
>
54+
<TableCell align={'center'} padding={'none'}>
55+
<IconButton color="default" fontSize="small" onClick={() => deletePropHandler(row.id)}>
5856
<DeleteIcon />
5957
</IconButton>
6058
{/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
@@ -64,7 +62,7 @@ function dataTable(props) {
6462

6563
return (
6664
<Paper className={classes.root}>
67-
<Table className={classes.table} selectable={"true"}>
65+
<Table className={classes.table} selectable={'true'}>
6866
<TableHead>
6967
<TableRow>{renderHeader}</TableRow>
7068
</TableHead>

‎src/components/GrandchildRectangle.jsx

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import React, { Component } from "react";
2-
import { Rect, Group } from "react-konva";
1+
import React, { Component } from 'react';
2+
import { Rect, Group } from 'react-konva';
3+
// import findComponentById from '../utils/findComponentById.ts';
34

45
class GrandchildRectangle extends Component {
56
getComponentColor(componentId) {
6-
const color = this.props.components.find(comp => comp.id == componentId)
7-
.color;
7+
// const color = findComponentById(componentId, this.props.components).color;
8+
const color = this.props.components.find(comp => comp.id === componentId).color;
89
return color;
910
}
1011

1112
getPseudoChild() {
12-
return this.props.components.find(
13-
comp => comp.id === this.props.childComponentId
14-
);
13+
return this.props.components.find(comp => comp.id === this.props.childComponentId);
1514
}
1615

1716
render() {
@@ -28,7 +27,7 @@ class GrandchildRectangle extends Component {
2827
width,
2928
height,
3029
focusChild,
31-
components
30+
components,
3231
} = this.props;
3332

3433
// the Group is responsible for dragging of all children
@@ -54,21 +53,17 @@ class GrandchildRectangle extends Component {
5453
scaleY={1}
5554
width={width}
5655
height={height}
57-
stroke={
58-
childType === "COMP"
59-
? this.getComponentColor(childComponentId)
60-
: "#000000"
61-
}
56+
stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
6257
// fill={color}
6358
// opacity={0.8}
6459
strokeWidth={4}
6560
strokeScaleEnabled={false}
6661
draggable={false}
6762
/>
68-
{childType === "COMP" &&
69-
components
63+
{childType === 'COMP'
64+
&& components
7065
.find(comp => comp.title === childComponentName)
71-
.childrenArray.filter(child => child.childId !== "-1")
66+
.childrenArray.filter(child => child.childId !== -1)
7267
.map((grandchild, i) => (
7368
<GrandchildRectangle
7469
key={i}
@@ -79,21 +74,17 @@ class GrandchildRectangle extends Component {
7974
childComponentId={grandchild.childComponentId}
8075
focusChild={focusChild}
8176
childId={childId}
82-
width={
83-
grandchild.position.width *
84-
(width / this.getPseudoChild().position.width)
85-
}
77+
width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
8678
height={
87-
grandchild.position.height *
88-
(height / this.getPseudoChild().position.height)
79+
grandchild.position.height * (height / this.getPseudoChild().position.height)
8980
}
9081
x={
91-
(grandchild.position.x - this.getPseudoChild().position.x) *
92-
(width / this.getPseudoChild().position.width)
82+
(grandchild.position.x - this.getPseudoChild().position.x)
83+
* (width / this.getPseudoChild().position.width)
9384
}
9485
y={
95-
(grandchild.position.y - this.getPseudoChild().position.y) *
96-
(height / this.getPseudoChild().position.height)
86+
(grandchild.position.y - this.getPseudoChild().position.y)
87+
* (height / this.getPseudoChild().position.height)
9788
}
9889
/>
9990
))}

‎src/components/KonvaStage.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ class KonvaStage extends Component {
2121
getDirectChildrenCopy(focusComponent) {
2222
const component = this.props.components.find(comp => comp.id === focusComponent.id);
2323

24-
const childrenArr = component.childrenArray.filter(child => child.childId !== '-1');
24+
const childrenArr = component.childrenArray.filter(child => child.childId !== -1);
2525

2626
let childrenArrCopy = cloneDeep(childrenArr);
2727

2828
const pseudoChild = {
29-
childId: '-1',
29+
childId: -1,
3030
childComponentId: component.id,
3131
componentName: component.title,
3232
position: {
@@ -186,7 +186,7 @@ class KonvaStage extends Component {
186186
childComponentId={child.childComponentId}
187187
childComponentName={child.componentName}
188188
focusChild={focusChild}
189-
childId={child.childId} // '-1' for pseudoChild
189+
childId={child.childId} // -1 for pseudoChild
190190
x={child.position.x}
191191
y={child.position.y}
192192
scaleX={1}

‎src/components/LeftColExpansionPanel.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ const LeftColExpansionPanel = (props) => {
2828

2929
// show a string of all direct parents. SO the user can gaze at it.
3030
const directParents = components
31-
.filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == id))
31+
.filter(comp => comp.childrenArray.some(child => child.childComponentId === id))
3232
.map(comp => comp.title)
3333
.join(',');
3434

3535
function isFocused() {
36-
return focusComponent.id == id ? 'focused' : '';
36+
return focusComponent.id === id ? 'focused' : '';
3737
}
3838

3939
return (
@@ -67,7 +67,7 @@ const LeftColExpansionPanel = (props) => {
6767
</ListItem>
6868
</List>
6969
</Grid>
70-
{id == 1 || !isFocused() ? (
70+
{id === 1 || !isFocused() ? (
7171
<div />
7272
) : (
7373
<Fragment>
@@ -134,7 +134,7 @@ const LeftColExpansionPanel = (props) => {
134134
</Grid>
135135

136136
<Grid item xs={3}>
137-
{id == 1 || isFocused() || !selectableChildren.includes(id) ? (
137+
{id === 1 || isFocused() || !selectableChildren.includes(id) ? (
138138
<div />
139139
) : (
140140
<IconButton aria-label="Add">

‎src/components/Rectangle.jsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class Rectangle extends Component {
1010
if (componentId === '888') {
1111
return '#000000';
1212
}
13-
const color = this.props.components.find(comp => comp.id == componentId).color;
13+
const color = this.props.components.find(comp => comp.id === componentId).color;
1414
return color;
1515
}
1616

@@ -25,7 +25,7 @@ class Rectangle extends Component {
2525
.find(comp => comp.id === this.props.componentId)
2626
.childrenArray.find(child => child.childId === childId);
2727

28-
if (childId == '-1') {
28+
if (childId === -1) {
2929
focChild = this.props.components.find(comp => comp.id === this.props.componentId);
3030
}
3131
const transformation = {
@@ -108,8 +108,8 @@ class Rectangle extends Component {
108108
strokeWidth={4}
109109
strokeScaleEnabled={false}
110110
draggable={false}
111-
fill={childId === '-1' ? 'white' : null}
112-
shadowBlur={childId === '-1' ? 6 : null}
111+
fill={childId === -1 ? 'white' : null}
112+
shadowBlur={childId === -1 ? 6 : null}
113113
// dashEnabled={childId === "-1"} // dash line only enabled for pseudochild
114114
// dash={[10, 3]} // 10px dashes with 3px gaps
115115
/>
@@ -118,19 +118,19 @@ class Rectangle extends Component {
118118
fontStyle={'bold'}
119119
fontVariant={'small-caps'}
120120
// pseudochild's label should look different than normal children:
121-
text={childId === '-1' ? title.slice(0, title.length - 2) : title}
122-
fill={childId === '-1' ? this.getComponentColor(childComponentId) : '#000000'}
123-
fontSize={childId === '-1' ? 15 : 10}
121+
text={childId === -1 ? title.slice(0, title.length - 2) : title}
122+
fill={childId === -1 ? this.getComponentColor(childComponentId) : '#000000'}
123+
fontSize={childId === -1 ? 15 : 10}
124124
x={4}
125-
y={childId === '-1' ? -20 : -12}
125+
y={childId === -1 ? -20 : -12}
126126
/>
127127
</Label>
128128
{// for all children other than the pseudoChild, find their component's children array and recursively render the children found there
129-
childId !== '-1'
130-
&& childType == 'COMP'
129+
childId !== -1
130+
&& childType === 'COMP'
131131
&& components
132132
.find(comp => comp.title === childComponentName)
133-
.childrenArray.filter(child => child.childId !== '-1')
133+
.childrenArray.filter(child => child.childId !== -1)
134134
// .sort((a, b) => parseInt(a.childId) - parseInt(b.childId)) // using i within map below, sorting by childId might be necessary
135135
.map((grandchild, i) => (
136136
<GrandchildRectangle

0 commit comments

Comments
 (0)