Skip to content

Commit 627e8a4

Browse files
tolgamizrakciChristianEdwardPadilla
tolgamizrakci
authored and
ChristianEdwardPadilla
committed
Merge pull request #100 from tolgamizrakci/development
Development
2 parents 4532d07 + db2bc20 commit 627e8a4

File tree

4 files changed

+159
-106
lines changed

4 files changed

+159
-106
lines changed

‎src/components/HTMLComponentPanel.jsx renamed to ‎src/components/HTMLComponentPanel.tsx

Lines changed: 90 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
1-
import React, { Component } from 'react';
2-
import { connect } from 'react-redux';
3-
import { compose } from 'redux';
4-
import { withStyles } from '@material-ui/core/styles';
5-
import TextField from '@material-ui/core/TextField';
6-
import IconButton from '@material-ui/core/IconButton';
7-
import ImageIcon from '@material-ui/icons/Image';
8-
import FormIcon from '@material-ui/icons/Description';
9-
import ButtonIcon from '@material-ui/icons/EditAttributes';
10-
import LinkIcon from '@material-ui/icons/Link';
11-
import ListIcon from '@material-ui/icons/List';
12-
import ParagraphIcon from '@material-ui/icons/LocalParking';
13-
import Typography from '@material-ui/core/Typography';
14-
import Grid from '@material-ui/core/Grid';
15-
import Paper from '@material-ui/core/Paper';
16-
import Tab from '@material-ui/core/Tab';
17-
import Chip from '@material-ui/core/Chip';
18-
import theme from './theme.ts';
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
import { compose } from "redux";
4+
import { withStyles } from "@material-ui/core/styles";
5+
// import TextField from '@material-ui/core/TextField';
6+
import IconButton from "@material-ui/core/IconButton";
7+
import ImageIcon from "@material-ui/icons/Image";
8+
import FormIcon from "@material-ui/icons/Description";
9+
import ButtonIcon from "@material-ui/icons/EditAttributes";
10+
import LinkIcon from "@material-ui/icons/Link";
11+
import ListIcon from "@material-ui/icons/List";
12+
import ParagraphIcon from "@material-ui/icons/LocalParking";
13+
// import Typography from '@material-ui/core/Typography';
14+
import Grid from "@material-ui/core/Grid";
15+
// import Paper from '@material-ui/core/Paper';
16+
import Tab from "@material-ui/core/Tab";
17+
import Chip from "@material-ui/core/Chip";
18+
// import theme from './theme.ts';
1919

20-
class HTMLComponentPanel extends Component {
20+
interface PropsInt {
21+
classes: any;
22+
addChild: any;
23+
}
24+
25+
interface StateInt {
26+
HtmlComponentName: string;
27+
}
28+
29+
class HTMLComponentPanel extends Component<PropsInt, StateInt> {
2130
state = {
22-
HtmlComponentName: '',
31+
HtmlComponentName: ""
2332
};
2433

25-
handleChange = (event) => {
34+
handleChange = event => {
2635
this.setState({
27-
HtmlComponentName: event.target.value,
36+
HtmlComponentName: event.target.value
2837
});
2938
};
3039

31-
handleCreateHTMLChild = (type) => {
40+
handleCreateHTMLChild = type => {
3241
this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
3342
};
3443

@@ -49,16 +58,16 @@ class HTMLComponentPanel extends Component {
4958
className="htmlicons"
5059
aria-label="Image"
5160
onClick={() => {
52-
this.handleCreateHTMLChild('Image');
61+
this.handleCreateHTMLChild("Image");
5362
}}
5463
style={{
5564
margin: 0,
56-
padding: 0,
65+
padding: 0
5766
}}
5867
>
5968
<ImageIcon
6069
style={{
61-
color: '#e0e0e0',
70+
color: "#e0e0e0"
6271
}}
6372
/>
6473
</IconButton>
@@ -67,10 +76,10 @@ class HTMLComponentPanel extends Component {
6776
className={classes.chip}
6877
variant="outlined"
6978
style={{
70-
color: 'white',
71-
fontSize: '80%',
79+
color: "white",
80+
fontSize: "80%",
7281
margin: 0,
73-
padding: 0,
82+
padding: 0
7483
}}
7584
onClick={() => {
7685
this.handleCreateHTMLChild('Image');
@@ -83,22 +92,22 @@ class HTMLComponentPanel extends Component {
8392
className="htmlicons"
8493
aria-label="Form"
8594
onClick={() => {
86-
this.handleCreateHTMLChild('Form');
95+
this.handleCreateHTMLChild("Form");
8796
}}
8897
style={{
8998
margin: 0,
90-
padding: 0,
99+
padding: 0
91100
}}
92101
>
93-
<FormIcon style={{ color: '#e0e0e0' }} />
102+
<FormIcon style={{ color: "#e0e0e0" }} />
94103
</IconButton>
95104
<Chip
96105
label="Form"
97106
className={classes.chip}
98107
variant="outlined"
99108
style={{
100-
color: 'white',
101-
fontSize: '80%',
109+
color: "white",
110+
fontSize: "80%"
102111
}}
103112
onClick={() => {
104113
this.handleCreateHTMLChild('Form');
@@ -110,22 +119,22 @@ class HTMLComponentPanel extends Component {
110119
className="htmlicons"
111120
aria-label="Button"
112121
onClick={() => {
113-
this.handleCreateHTMLChild('Button');
122+
this.handleCreateHTMLChild("Button");
114123
}}
115124
style={{
116125
margin: 0,
117-
padding: 0,
126+
padding: 0
118127
}}
119128
>
120-
<ButtonIcon style={{ color: '#e0e0e0' }} />
129+
<ButtonIcon style={{ color: "#e0e0e0" }} />
121130
</IconButton>
122131
<Chip
123132
label="Button"
124133
className={classes.chip}
125134
variant="outlined"
126135
style={{
127-
color: 'white',
128-
fontSize: '80%',
136+
color: "white",
137+
fontSize: "80%"
129138
}}
130139
onClick={() => {
131140
this.handleCreateHTMLChild('Button');
@@ -137,22 +146,22 @@ class HTMLComponentPanel extends Component {
137146
className="htmlicons"
138147
aria-label="Link"
139148
onClick={() => {
140-
this.handleCreateHTMLChild('Link');
149+
this.handleCreateHTMLChild("Link");
141150
}}
142151
style={{
143152
margin: 0,
144-
padding: 0,
153+
padding: 0
145154
}}
146155
>
147-
<LinkIcon style={{ color: '#e0e0e0' }} />
156+
<LinkIcon style={{ color: "#e0e0e0" }} />
148157
</IconButton>
149158
<Chip
150159
label="Link"
151160
className={classes.chip}
152161
variant="outlined"
153162
style={{
154-
color: 'white',
155-
fontSize: '80%',
163+
color: "white",
164+
fontSize: "80%"
156165
}}
157166
onClick={() => {
158167
this.handleCreateHTMLChild('Link');
@@ -164,22 +173,22 @@ class HTMLComponentPanel extends Component {
164173
className="htmlicons"
165174
aria-label="List"
166175
onClick={() => {
167-
this.handleCreateHTMLChild('List');
176+
this.handleCreateHTMLChild("List");
168177
}}
169178
style={{
170179
margin: 0,
171-
padding: 0,
180+
padding: 0
172181
}}
173182
>
174-
<ListIcon style={{ color: '#e0e0e0' }} />
183+
<ListIcon style={{ color: "#e0e0e0" }} />
175184
</IconButton>
176185
<Chip
177186
label="List"
178187
className={classes.chip}
179188
variant="outlined"
180189
style={{
181-
color: 'white',
182-
fontSize: '80%',
190+
color: "white",
191+
fontSize: "80%"
183192
}}
184193
onClick={() => {
185194
this.handleCreateHTMLChild('List');
@@ -191,33 +200,37 @@ class HTMLComponentPanel extends Component {
191200
xs={4}
192201
style={{
193202
margin: 0,
194-
padding: 0,
203+
padding: 0
195204
}}
196205
>
197206
<IconButton
198207
className="htmlicons"
199208
aria-label="Paragraph"
200209
onClick={() => {
201-
this.handleCreateHTMLChild('Paragraph');
210+
this.handleCreateHTMLChild("Paragraph");
202211
}}
203212
style={{
204213
margin: 0,
205-
padding: 0,
214+
padding: 0
206215
}}
207216
>
208217
<ParagraphIcon
209-
style={{ color: '#e0e0e0', paddingRight: '0px', marginRight: '0px' }}
218+
style={{
219+
color: "#e0e0e0",
220+
paddingRight: "0px",
221+
marginRight: "0px"
222+
}}
210223
/>
211224
</IconButton>
212225
<Chip
213226
label="Paragraph"
214227
className={classes.chip}
215228
variant="outlined"
216229
style={{
217-
color: 'white',
218-
fontSize: '62%',
219-
padding: '0px',
220-
margin: '0px',
230+
color: "white",
231+
fontSize: "62%",
232+
padding: "0px",
233+
margin: "0px"
221234
}}
222235
onClick={() => {
223236
this.handleCreateHTMLChild('Paragraph');
@@ -230,40 +243,40 @@ class HTMLComponentPanel extends Component {
230243
}
231244
}
232245

233-
function styles(theme) {
246+
function styles(theme): any {
234247
return {
235248
htmlPanel: {
236-
width: '100%',
237-
height: '30%',
238-
backgroundColor: '#212121',
239-
borderStyle: 'solid',
240-
borderWidth: '0.5px',
241-
borderRadius: '1px',
242-
borderColor: '#424242',
243-
bottom: '0px',
244-
paddingLeft: '10px',
245-
paddingRight: '10px',
246-
paddingBottom: '25px',
247-
paddingTop: '2px',
248-
boxShadow: '0 6px 6px rgba(0,0,0,0.23)',
249+
width: "100%",
250+
height: "30%",
251+
backgroundColor: "#212121",
252+
borderStyle: "solid",
253+
borderWidth: "0.5px",
254+
borderRadius: "1px",
255+
borderColor: "#424242",
256+
bottom: "0px",
257+
paddingLeft: "10px",
258+
paddingRight: "10px",
259+
paddingBottom: "25px",
260+
paddingTop: "2px",
261+
boxShadow: "0 6px 6px rgba(0,0,0,0.23)"
249262
// paddingBottom: "10px"
250263
},
251264
chip: {
252-
color: 'rgba(193, 66, 66, 0)',
265+
color: "rgba(193, 66, 66, 0)"
253266
},
254267
htmliconwrapper: {
255-
verticalAlign: 'baseline',
268+
verticalAlign: "baseline"
256269
},
257270
htmlicons: {
258-
color: '#ffffff',
271+
color: "#ffffff"
259272
},
260273
tabRoot: {
261-
textTransform: 'initial',
274+
textTransform: "initial",
262275
minWidth: 100,
263276
fontWeight: theme.typography.fontWeightRegular,
264277
// marginRight: theme.spacing.unit * 4,
265-
color: '#ffffff',
266-
},
278+
color: "#ffffff"
279+
}
267280
};
268281
}
269282

‎src/components/KonvaStage.tsx

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,39 @@
11
import React, { Component, createRef, Fragment } from 'react';
22
import Button from '@material-ui/core/Button';
33
import { Stage, Layer, Line, Group, Label, Text, Rect, Transformer } from 'react-konva';
4+
// import DeleteIcon from '@material-ui/icons/Delete';
5+
// import Fab from '@material-ui/core/Fab';
46
import Rectangle from './Rectangle.jsx';
57
import cloneDeep from '../utils/cloneDeep.ts';
6-
import DeleteIcon from '@material-ui/icons/Delete';
7-
import Fab from '@material-ui/core/Fab';
8+
import { ComponentInt, ComponentsInt, ChildInt } from '../utils/interfaces';
89

9-
class KonvaStage extends Component {
10+
interface PropsInt {
11+
components: ComponentsInt;
12+
focusComponent: ComponentInt;
13+
selectableChildren: Array<number>;
14+
classes: any;
15+
addComponent: any;
16+
addChild: any;
17+
changeFocusComponent: any;
18+
changeFocusChild: any;
19+
deleteComponent: any;
20+
createApp: any;
21+
deleteAllData: any;
22+
handleTransform: any;
23+
focusChild: any;
24+
changeComponentFocusChild: any;
25+
deleteChild: any;
26+
}
27+
28+
interface StateInt {
29+
stageWidth: number;
30+
stageHeight: number;
31+
blockSnapSize: number;
32+
grid: [];
33+
gridStroke: number;
34+
}
35+
36+
class KonvaStage extends Component<PropsInt, StateInt> {
1037
constructor(props) {
1138
super(props);
1239
this.state = {
@@ -18,7 +45,7 @@ class KonvaStage extends Component {
1845
};
1946
}
2047

21-
getDirectChildrenCopy(focusComponent) {
48+
getDirectChildrenCopy(focusComponent: ComponentInt) {
2249
const component = this.props.components.find(comp => comp.id === focusComponent.id);
2350

2451
const childrenArr = component.childrenArray.filter(child => child.childId !== -1);
@@ -186,9 +213,8 @@ class KonvaStage extends Component {
186213
}}
187214
>
188215
{this.state.grid}
189-
{components
190-
.find(comp => comp.id === focusComponent.id)
191-
.childrenArray.map((child, i) => (
216+
{this.getDirectChildrenCopy(focusComponent)
217+
.map((child: ChildInt, i: number) => (
192218
<Rectangle
193219
key={`${i}${child.componentName}`}
194220
components={components}

0 commit comments

Comments
 (0)