Skip to content

Commit 16b9688

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
committed
fully-featured canvas, working version
2 parents 27378bd + 50a4d24 commit 16b9688

15 files changed

+459
-16818
lines changed

‎package-lock.json

Lines changed: 0 additions & 16635 deletions
This file was deleted.

‎src/actions/components.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -213,10 +213,11 @@ export const openExpansionPanel = component => ({
213213
// type: DELETE_ALL_DATA,
214214
// });
215215

216-
export const deleteProp = ({ id, index }) => ({
217-
type: DELETE_PROP,
218-
payload: { id, index },
219-
});
216+
217+
218+
export const deleteProp = ( propId ) => (dispatch) => {
219+
; dispatch({ type: DELETE_PROP, payload: propId });
220+
};
220221

221222
export const addProp = prop => ({
222223
type: ADD_PROP,

‎src/components/BottomPanel.jsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ const mapDispatchToProps = dispatch => ({
1212
});
1313

1414
const mapStateToProps = store => ({
15-
successOpen: store.workspace.successOpen,
16-
errorOpen: store.workspace.errorOpen,
17-
appDir: store.workspace.appDir,
15+
// successOpen: store.workspace.successOpen,
16+
// errorOpen: store.workspace.errorOpen,
17+
// appDir: store.workspace.appDir,
1818
});
1919

2020
class BottomPanel extends Component {
21-
state = {
22-
successOpen: false,
23-
errorOpen: false,
24-
};
21+
// state = {
22+
// successOpen: false,
23+
// errorOpen: false,
24+
// };
2525

2626
viewAppDir = () => {
2727
IPC.send('view_app_dir', this.props.appDir);

‎src/components/DataTable.jsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react';
2+
// 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+
12+
13+
14+
const styles = theme => ({
15+
root: {
16+
width: '100%',
17+
marginTop: theme.spacing.unit * 3,
18+
overflowX: 'auto',
19+
},
20+
table: {
21+
minWidth: 700,
22+
},
23+
});
24+
25+
26+
/****************************
27+
* cannot have a row header or a key in the data called "key"
28+
* ,ust have unique id
29+
* ****************************** */
30+
31+
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)
39+
40+
const renderHeader = rowHeader.map( (col,idx) => {
41+
return <TableCell key={`head_+${idx}`}>{col}</TableCell>
42+
})
43+
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+
)
69+
70+
return (
71+
<Paper className={classes.root}>
72+
<Table className={classes.table}>
73+
<TableHead>
74+
<TableRow>
75+
{renderHeader}
76+
</TableRow>
77+
</TableHead>
78+
<TableBody>
79+
{renderRows}
80+
</TableBody>
81+
</Table>
82+
</Paper>
83+
);
84+
}
85+
86+
// dataTable.propTypes = {
87+
// classes: PropTypes.object.isRequired,
88+
// };
89+
90+
export default withStyles(styles)(dataTable);

‎src/components/GrandchildRectangle.jsx

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ class GrandchildRectangle extends Component {
77
return color;
88
}
99

10+
getPseudoChild() {
11+
return this.props.components.find(comp => comp.id === this.props.childComponentId);
12+
}
13+
1014
render() {
1115
const {
1216
x,
@@ -64,14 +68,20 @@ class GrandchildRectangle extends Component {
6468
childComponentId={grandchild.childComponentId}
6569
focusChild={focusChild}
6670
childId={childId}
67-
x={grandchild.position.x * (width / window.innerWidth)}
68-
y={grandchild.position.y * (height / window.innerHeight)}
69-
width={grandchild.position.width * (width / window.innerWidth)}
70-
height={grandchild.position.height * (height / window.innerHeight)}
71-
// x={grandchild.position.x}
72-
// y={grandchild.position.y}
73-
// width={grandchild.position.width}
74-
// height={grandchild.position.height}
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+
}
7585
/>
7686
))}
7787
</Group>

‎src/components/KonvaStage.jsx

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React, { Component, createRef, Fragment } from 'react';
22
// import PropTypes from 'prop-types';
33
import {
4-
Stage, Layer, Group, Label, Text, Rect, Transformer,
4+
Stage, Layer, Line, Group, Label, Text, Rect, Transformer,
55
} from 'react-konva';
6-
import TransformerComponent from './TransformerComponent.jsx';
76
import Rectangle from './Rectangle.jsx';
87

98
class KonvaStage extends Component {
@@ -12,7 +11,9 @@ class KonvaStage extends Component {
1211
this.state = {
1312
stageWidth: 1000,
1413
stageHeight: 1000,
15-
stage: null,
14+
blockSnapSize: 5,
15+
grid: [],
16+
gridStroke: 1,
1617
};
1718
}
1819

@@ -22,6 +23,7 @@ class KonvaStage extends Component {
2223
// take a look here https://developers.google.com/web/updates/2016/10/resizeobserver
2324
// for simplicity I will just listen window resize
2425
window.addEventListener('resize', this.checkSize);
26+
this.createGrid();
2527
}
2628

2729
componentWillUnmount() {
@@ -48,6 +50,7 @@ class KonvaStage extends Component {
4850
const clickedOnTransformer = e.target.getParent().className === 'Transformer';
4951
if (clickedOnTransformer) {
5052
console.log('user clicked on transformer');
53+
console.log('HELLOOOO', e.target.getParent().className);
5154
return;
5255
}
5356

@@ -61,6 +64,44 @@ class KonvaStage extends Component {
6164
});
6265
};
6366

67+
createGrid = () => {
68+
const output = [];
69+
for (let i = 0; i < this.state.stageWidth / this.state.blockSnapSize; i++) {
70+
output.push(
71+
<Line
72+
points={[
73+
Math.round(i * this.state.blockSnapSize) + 0.5,
74+
0,
75+
Math.round(i * this.state.blockSnapSize) + 0.5,
76+
this.state.stageHeight,
77+
]}
78+
stroke={'#ddd'}
79+
strokeWidth={this.state.gridStroke}
80+
key={`${i}vertical`}
81+
/>,
82+
);
83+
}
84+
for (let j = 0; j < this.state.stageHeight / this.state.blockSnapSize; j++) {
85+
output.push(
86+
<Line
87+
points={[
88+
0,
89+
Math.round(j * this.state.blockSnapSize),
90+
this.state.stageWidth,
91+
Math.round(j * this.state.blockSnapSize),
92+
]}
93+
stroke={'#ddd'}
94+
strokeWidth={this.state.gridStroke}
95+
key={`${j}horizontal`}
96+
/>,
97+
);
98+
}
99+
console.log('calling function to render grid');
100+
this.setState({
101+
grid: output,
102+
});
103+
};
104+
64105
render() {
65106
const {
66107
components, handleTransform, focusComponent, focusChild,
@@ -77,14 +118,20 @@ class KonvaStage extends Component {
77118
}}
78119
>
79120
<Stage
121+
className={'canvasStage'}
80122
ref={(node) => {
81123
this.stage = node;
82124
}}
83125
onMouseDown={this.handleStageMouseDown}
84126
width={this.state.stageWidth}
85127
height={this.state.stageHeight}
86128
>
87-
<Layer>
129+
<Layer
130+
ref={(node) => {
131+
this.layer = node;
132+
}}
133+
>
134+
{this.state.grid}
88135
{components
89136
.find(comp => comp.id === focusComponent.id)
90137
.childrenArray.map((child, i) => (
@@ -105,6 +152,7 @@ class KonvaStage extends Component {
105152
title={child.componentName + child.childId}
106153
handleTransform={handleTransform}
107154
draggable={true}
155+
blockSnapSize={this.state.blockSnapSize}
108156
/>
109157
))
110158
.sort(

‎src/components/LeftColExpansionPanel.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const LeftColExpansionPanel = (props) => {
4949
style={{ color }}
5050
/>
5151
<ListItemSecondaryAction>
52-
{isFocused() || !selectableChildren.includes(id) ? (
52+
{ id == 1 || isFocused() || !selectableChildren.includes(id) ? (
5353
<div />
5454
) : (
5555
<IconButton aria-label="Add">

0 commit comments

Comments
 (0)