Skip to content

Commit 321e4d3

Browse files
tolgamizrakciChristianEdwardPadilla
tolgamizrakci
authored and
ChristianEdwardPadilla
committed
ts changes to components almost complete
2 parents 2be278a + a09fcce commit 321e4d3

File tree

12 files changed

+188
-201
lines changed

12 files changed

+188
-201
lines changed

‎src/components/CodePreview.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { Component, Fragment } from "react";
2-
import { withStyles } from "@material-ui/core/styles";
3-
import { format } from "prettier";
4-
import componentRender from "../utils/componentRender.util.ts";
5-
import { ComponentInt, ComponentsInt } from "../utils/interfaces";
6-
import SortChildren from "./SortChildren.jsx";
1+
import React, { Component, Fragment } from 'react';
2+
import { withStyles } from '@material-ui/core/styles';
3+
import { format } from 'prettier';
4+
import componentRender from '../utils/componentRender.util.ts';
5+
import { ComponentInt, ComponentsInt } from '../utils/interfaces';
6+
import SortChildren from './SortChildren.jsx';
77

88
type Props = {
99
focusComponent: ComponentInt;
@@ -17,25 +17,25 @@ class CodePreview extends Component<Props> {
1717

1818
return (
1919
<Fragment>
20-
<SortChildren />
20+
{/* <SortChildren /> */}
2121
<div
2222
style={{
23-
width: "500px",
24-
height: "290px",
25-
direction: "rtl",
26-
paddingLeft: "20px",
27-
color: "#D3D3D3",
23+
width: '800px',
24+
height: '290px',
25+
direction: 'rtl',
26+
paddingLeft: '20px',
27+
color: '#D3D3D3',
2828
fontSize: 16,
29-
overflow: "auto"
29+
overflow: 'auto',
3030
}}
3131
>
32-
<pre style={{ direction: "ltr" }}>
32+
<pre style={{ direction: 'ltr' }}>
3333
{format(componentRender(focusComponent, components), {
3434
singleQuote: true,
35-
trailingComma: "es5",
35+
trailingComma: 'es5',
3636
bracketSpacing: true,
3737
jsxBracketSameLine: true,
38-
parser: "typescript"
38+
parser: 'typescript',
3939
})}
4040
</pre>
4141
</div>

‎src/components/HTMLComponentPanel.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ class HTMLComponentPanel extends Component<PropsInt, StateInt> {
4949
disableRipple
5050
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
5151
label="Add HTML elements"
52+
style={{ cursor: 'default' }}
5253
/>
5354
<Grid container spacing={8} alignItems="baseline" align="stretch">
5455
<Grid item xs={4}>
@@ -80,6 +81,9 @@ class HTMLComponentPanel extends Component<PropsInt, StateInt> {
8081
margin: 0,
8182
padding: 0
8283
}}
84+
onClick={() => {
85+
this.handleCreateHTMLChild('Image');
86+
}}
8387
/>
8488
</div>
8589
</Grid>
@@ -105,6 +109,9 @@ class HTMLComponentPanel extends Component<PropsInt, StateInt> {
105109
color: "white",
106110
fontSize: "80%"
107111
}}
112+
onClick={() => {
113+
this.handleCreateHTMLChild('Form');
114+
}}
108115
/>
109116
</Grid>
110117
<Grid item xs={4}>
@@ -129,6 +136,9 @@ class HTMLComponentPanel extends Component<PropsInt, StateInt> {
129136
color: "white",
130137
fontSize: "80%"
131138
}}
139+
onClick={() => {
140+
this.handleCreateHTMLChild('Button');
141+
}}
132142
/>
133143
</Grid>
134144
<Grid item xs={4}>
@@ -153,6 +163,9 @@ class HTMLComponentPanel extends Component<PropsInt, StateInt> {
153163
color: "white",
154164
fontSize: "80%"
155165
}}
166+
onClick={() => {
167+
this.handleCreateHTMLChild('Link');
168+
}}
156169
/>
157170
</Grid>
158171
<Grid item xs={4}>
@@ -177,6 +190,9 @@ class HTMLComponentPanel extends Component<PropsInt, StateInt> {
177190
color: "white",
178191
fontSize: "80%"
179192
}}
193+
onClick={() => {
194+
this.handleCreateHTMLChild('List');
195+
}}
180196
/>
181197
</Grid>
182198
<Grid
@@ -216,6 +232,9 @@ class HTMLComponentPanel extends Component<PropsInt, StateInt> {
216232
padding: "0px",
217233
margin: "0px"
218234
}}
235+
onClick={() => {
236+
this.handleCreateHTMLChild('Paragraph');
237+
}}
219238
/>
220239
</Grid>
221240
</Grid>

‎src/components/HtmlAttr.jsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ const styles = theme => ({
1919
},
2020
cssLabel: {
2121
color: 'white',
22-
'&$cssFocused': {
23-
color: 'green',
24-
},
22+
},
23+
cssFocused: {
24+
color: 'green',
2525
},
2626
input: {
2727
color: '#fff',
2828
opacity: '0.7',
29-
marginBottom: '10px',
29+
marginBottom: '15px',
3030
},
3131
});
3232

@@ -66,12 +66,13 @@ class HtmlAttr extends Component {
6666

6767
const HtmlForm = HTMLelements[focusChildType].attributes.map((attr, i) => (
6868
<Grid container spacing={0} key={i} style={{ marginTop: '10px', marginRight: '20px' }}>
69-
<Grid item xs={1.5}>
69+
<Grid item xs={2}>
7070
<TextField
7171
InputLabelProps={{
7272
classes: {
7373
root: classes.cssLabel,
7474
focused: classes.cssFocused,
75+
input: classes.input,
7576
},
7677
}}
7778
InputProps={{

‎src/components/KonvaStage.tsx

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ class KonvaStage extends Component<PropsInt, StateInt> {
3737
constructor(props) {
3838
super(props);
3939
this.state = {
40-
stageWidth: 1000,
41-
stageHeight: 1000,
40+
stageWidth: 1500,
41+
stageHeight: 1500,
4242
blockSnapSize: 10,
4343
grid: [],
4444
gridStroke: 1,
@@ -74,13 +74,13 @@ class KonvaStage extends Component<PropsInt, StateInt> {
7474
// here we should add listener for "container" resize
7575
// take a look here https://developers.google.com/web/updates/2016/10/resizeobserver
7676
// for simplicity I will just listen window resize
77-
window.addEventListener('resize', this.checkSize);
77+
// window.addEventListener('resize', this.checkSize);
7878
this.container.addEventListener('keydown', this.handleKeyDown);
7979
this.createGrid();
8080
}
8181

8282
componentWillUnmount() {
83-
window.removeEventListener('resize', this.checkSize);
83+
// window.removeEventListener('resize', this.checkSize);
8484
this.container.removeEventListener('keydown', this.handleKeyDown);
8585
}
8686

@@ -95,16 +95,16 @@ class KonvaStage extends Component<PropsInt, StateInt> {
9595

9696
handleKeyDown = e => {
9797
// backspace and delete keys are keyCode 8 and 46, respectively
98+
// this function is only used for deleting children atm, could be used for other things
9899
if (e.keyCode === 8 || e.keyCode === 46) {
99-
console.log(e);
100100
this.props.deleteChild({});
101101
}
102102
};
103103

104-
handleStageMouseDown = (e: any) => {
105-
// // clicked on stage - clear selection
104+
handleStageMouseDown = e => {
105+
// clicked on stage - clear selection
106106
if (e.target === e.target.getStage()) {
107-
// add functionality for allowing no focusChild
107+
// TODO add functionality for allowing no focusChild
108108
console.log('user clicked on canvas:');
109109
return;
110110
}
@@ -233,14 +233,20 @@ class KonvaStage extends Component<PropsInt, StateInt> {
233233
handleTransform={handleTransform}
234234
draggable={true}
235235
blockSnapSize={this.state.blockSnapSize}
236-
imageSource={child.htmlElement == 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
236+
imageSource={child.htmlElement === 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
237237
/>
238238
))
239-
.sort((rectA, rectB) => rectB.props.width * rectB.props.height - rectA.props.width * rectA.props.height)
239+
.sort((rectA, rectB) => {
240+
if (rectB.props.childId === -1) {
241+
return 1;
242+
}
243+
return rectB.props.width * rectB.props.height - rectA.props.width * rectA.props.height;
244+
})
240245
// reasoning for the sort:
241246
// Konva determines zIndex (which rect is clicked on if rects overlap) based on rendering order
242247
// as long as the smallest components are rendered last they will always be accessible over the big boys
243248
// to guarantee they are rendered last, sort the array in reverse order by size
249+
// only exception is the pseudochild, which should always be rendered first for UX, regardless of size
244250
// THIS COULD BE A BIG PERFORMANCE PROBLEM (PROBABLY WILL BE!)
245251
// TRY TO REFACTOR TO ONLY CHANGE ORDER OF RENDERING IF A BOX IS RESIZED
246252
}

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 24 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import React, { Fragment } from "react";
2-
import { withStyles } from "@material-ui/core/styles";
3-
import Typography from "@material-ui/core/Typography";
4-
import List from "@material-ui/core/List";
5-
import ListItem from "@material-ui/core/ListItem";
6-
import ListItemText from "@material-ui/core/ListItemText";
7-
import IconButton from "@material-ui/core/IconButton";
8-
import Grid from "@material-ui/core/Grid";
9-
import AddIcon from "@material-ui/icons/Add";
10-
import DeleteIcon from "@material-ui/icons/Delete";
11-
import Button from "@material-ui/core/Button";
12-
import { ComponentInt, ComponentsInt, ChildInt } from "../utils/interfaces";
1+
import React, { Fragment } from 'react';
2+
import { withStyles } from '@material-ui/core/styles';
3+
import Typography from '@material-ui/core/Typography';
4+
import List from '@material-ui/core/List';
5+
import ListItem from '@material-ui/core/ListItem';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import IconButton from '@material-ui/core/IconButton';
8+
import Grid from '@material-ui/core/Grid';
9+
import AddIcon from '@material-ui/icons/Add';
10+
import DeleteIcon from '@material-ui/icons/Delete';
11+
import Button from '@material-ui/core/Button';
12+
import Tooltip from '@material-ui/core/Tooltip';
1313

1414
const LeftColExpansionPanel = (props: any) => {
1515
const {
@@ -49,9 +49,7 @@ const LeftColExpansionPanel = (props: any) => {
4949
<Grid item xs={9}>
5050
<div
5151
className={classes.root}
52-
style={
53-
!isFocused() ? {} : { boxShadow: "0 10px 10px rgba(0,0,0,0.22)" }
54-
}
52+
style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }}
5553
>
5654
<Grid item xs={12} style={{ color: "red" }}>
5755
<List style={{ color: "red" }}>
@@ -81,33 +79,6 @@ const LeftColExpansionPanel = (props: any) => {
8179
<div />
8280
) : (
8381
<Fragment>
84-
<span>
85-
{directParents ? (
86-
<p
87-
style={{
88-
padding: '0px',
89-
marginTop: '0px',
90-
marginLeft: '15px',
91-
color: '#D3D3D3',
92-
fontSize: '12px',
93-
}}
94-
>
95-
Used in: {directParents}
96-
</p>
97-
) : (
98-
<p
99-
style={{
100-
padding: '0px',
101-
marginTop: '0px',
102-
marginLeft: '15px',
103-
color: '#D3D3D3',
104-
fontSize: '12px',
105-
}}
106-
>
107-
Not used
108-
</p>
109-
)}
110-
</span>
11182
<Button
11283
variant="text"
11384
size="small"
@@ -128,7 +99,7 @@ const LeftColExpansionPanel = (props: any) => {
12899
}}
129100
>
130101
<DeleteIcon style={{ color: '#D3D3D3' }} />
131-
Delete
102+
Delete Component
132103
</Button>
133104
{/* <IconButton
134105
style={{ display: "inline-block" }}
@@ -150,14 +121,16 @@ const LeftColExpansionPanel = (props: any) => {
150121
{id === 1 || isFocused() || !selectableChildren.includes(id) ? (
151122
<div />
152123
) : (
153-
<IconButton
154-
aria-label="Add"
155-
onClick={() => {
156-
addChild({ title, childType: "COMP" });
157-
}}
158-
>
159-
<AddIcon style={{ color, float: "right" }} />
160-
</IconButton>
124+
<Tooltip title="add as child" aria-label="add as child" placement="left">
125+
<IconButton
126+
aria-label="Add"
127+
onClick={() => {
128+
addChild({ title, childType: 'COMP' });
129+
}}
130+
>
131+
<AddIcon style={{ color, float: 'right' }} />
132+
</IconButton>
133+
</Tooltip>
161134
)}
162135
</Grid>
163136
</div>

‎src/components/MainContainerHeader.jsx

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const styles = () => ({
4646
},
4747
});
4848

49-
const MainContainerHeader = (props) => {
49+
const MainContainerHeader = props => {
5050
const {
5151
classes,
5252
image,
@@ -63,12 +63,7 @@ const MainContainerHeader = (props) => {
6363
<div className="main-header-buttons">
6464
<Tooltip title="remove image">
6565
<div>
66-
<Button
67-
disabled={!image}
68-
color="default"
69-
className={classes.button}
70-
onClick={showImageDeleteModal}
71-
>
66+
<Button disabled={!image} color="default" className={classes.button} onClick={showImageDeleteModal}>
7267
<DeleteOutlineIcon className={classes.light} />
7368
</Button>
7469
</div>
@@ -79,25 +74,21 @@ const MainContainerHeader = (props) => {
7974
<ImageSearchIcon className={classes.light} />
8075
</Button>
8176
</div>
82-
</Tooltip>
83-
<Tooltip title={'export'}>
84-
<div>
85-
<Button
86-
color="primary"
87-
variant="text"
88-
// variant="outlined"
89-
className={classes.clearButton}
90-
disabled={totalComponents < 1}
91-
onClick={showGenerateAppModal}
92-
>
93-
<GetAppIcon
94-
className={classes.light}
95-
style={{ paddingLeft: '5px', paddingRight: '5px' }}
96-
/>
97-
Export Project
98-
</Button>
99-
</div>
100-
</Tooltip>
77+
</Tooltip>{' '}
78+
*/}
79+
<div>
80+
<Button
81+
color="primary"
82+
variant="text"
83+
// variant="outlined"
84+
className={classes.clearButton}
85+
disabled={totalComponents < 1}
86+
onClick={showGenerateAppModal}
87+
>
88+
<GetAppIcon className={classes.light} style={{ paddingLeft: '5px', paddingRight: '5px' }} />
89+
Export Project
90+
</Button>
91+
</div>
10192
</div>
10293
</div>
10394
);

0 commit comments

Comments
 (0)