Skip to content

Commit 88e60d4

Browse files
tonyitotonyito
authored
Merge branch 'staging' into mvp
2 parents 2c76b4a + 5b06f95 commit 88e60d4

File tree

4 files changed

+246
-151
lines changed

4 files changed

+246
-151
lines changed

‎src/components/CodePreview.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
22
import { format } from 'prettier';
3-
import componentRender from '../utils/componentRender.util.ts';
4-
import { ComponentInt, ComponentsInt } from '../utils/Interfaces.ts';
3+
import componentRender from '../utils/componentRender.util';
4+
import { ComponentInt, ComponentsInt } from '../utils/Interfaces';
55
/** ** SortCHildren will be fixed , dont XXX the file *** */
66
// import SortChildren from './SortChildren.jsx';
77
import SyntaxHighlighter from 'react-syntax-highlighter';

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 104 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
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";
13-
import { ComponentInt, ComponentsInt, ChildInt } from "../utils/Interfaces.ts";
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';
13+
import Switch from '@material-ui/core/Switch'; // for state toggling
14+
import InputLabel from '@material-ui/core/InputLabel'; // labeling of state/class toggles
15+
import Select from '@material-ui/core/Select'; // for Class/Functional drop down
16+
import MenuItem from '@material-ui/core/MenuItem'; // for drop down item selections
17+
18+
// import { ComponentInt, ComponentsInt, ChildInt } from '../utils/Interfaces'; // unused
1419

1520
const LeftColExpansionPanel = (props: any) => {
1621
const {
@@ -26,29 +31,29 @@ const LeftColExpansionPanel = (props: any) => {
2631
const { title, id, color } = component;
2732

2833
function isFocused() {
29-
return focusComponent.id === id ? "focused" : "";
34+
return focusComponent.id === id ? 'focused' : '';
3035
}
3136

3237
return (
3338
<Grid
3439
container
3540
spacing={16}
36-
direction="row"
37-
justify="flex-start"
38-
alignItems="center"
41+
direction='row'
42+
justify='flex-start'
43+
alignItems='center'
3944
>
4045
<Grid item xs={9}>
4146
<div
4247
className={classes.root}
4348
style={
44-
!isFocused() ? {} : { boxShadow: "0 10px 10px rgba(0,0,0,0.25)" }
49+
!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.25)' }
4550
}
4651
>
47-
<Grid item xs={12} style={{ color: "red" }}>
48-
<List style={{ color: "red" }}>
52+
<Grid item xs={12} style={{ color: 'red' }}>
53+
<List style={{ color: 'red' }}>
4954
<ListItem
5055
button
51-
style={{ color: "red" }}
56+
style={{ color: 'red' }}
5257
onClick={() => {
5358
changeFocusComponent({ title });
5459
}}
@@ -57,9 +62,63 @@ const LeftColExpansionPanel = (props: any) => {
5762
disableTypography
5863
className={classes.light}
5964
primary={
60-
<Typography type="body2" style={{ color }}>
61-
{title}
62-
</Typography>
65+
<div>
66+
<Typography type='body2' style={{ color }}>
67+
{title}
68+
</Typography>
69+
<InputLabel
70+
htmlFor='stateful'
71+
style={{
72+
color: '#fff',
73+
marginBottom: '10px',
74+
marginTop: '0px',
75+
marginLeft: '11px',
76+
padding: '0px',
77+
fontSize: '18px'
78+
}}
79+
>
80+
State?
81+
</InputLabel>
82+
<Switch
83+
// checked={stateful}
84+
// onChange={e => ONCHANGE FUNCTION PENDING ON STATE REDUCER
85+
// updateComponent(id, { stateful: e.target.checked })
86+
// }
87+
value='stateful'
88+
color='primary'
89+
id='stateful'
90+
/>
91+
<div>
92+
<InputLabel
93+
id='label'
94+
style={{
95+
color: '#fff',
96+
marginBottom: '10px',
97+
marginTop: '0px',
98+
marginLeft: '11px',
99+
padding: '0px',
100+
fontSize: '18px'
101+
}}
102+
>
103+
Component Type
104+
</InputLabel>
105+
<Select
106+
id='select'
107+
value='class'
108+
style={{
109+
color: '#fff',
110+
marginBottom: '10px',
111+
marginTop: '0px',
112+
marginLeft: '11px',
113+
padding: '0px',
114+
fontSize: '18px'
115+
}}
116+
>
117+
<MenuItem value='class'>Class</MenuItem>
118+
<MenuItem value='functional'>Functional</MenuItem>
119+
</Select>
120+
</div>
121+
</div>
63122
}
64123
style={{ color }}
65124
/>
@@ -71,10 +130,10 @@ const LeftColExpansionPanel = (props: any) => {
71130
) : (
72131
<Fragment>
73132
<Button
74-
variant="text"
75-
size="small"
76-
color="default"
77-
aria-label="Delete"
133+
variant='text'
134+
size='small'
135+
color='default'
136+
aria-label='Delete'
78137
className={classes.margin}
79138
onClick={() =>
80139
deleteComponent({
@@ -83,14 +142,14 @@ const LeftColExpansionPanel = (props: any) => {
83142
})
84143
}
85144
style={{
86-
color: "#D3D3D3",
87-
marginBottom: "10px",
88-
marginTop: "0px",
89-
marginLeft: "11px",
90-
padding: "0px"
145+
color: '#D3D3D3',
146+
marginBottom: '10px',
147+
marginTop: '0px',
148+
marginLeft: '11px',
149+
padding: '0px'
91150
}}
92151
>
93-
<DeleteIcon style={{ color: "#D3D3D3" }} />
152+
<DeleteIcon style={{ color: '#D3D3D3' }} />
94153
Delete Component
95154
</Button>
96155
</Fragment>
@@ -103,17 +162,17 @@ const LeftColExpansionPanel = (props: any) => {
103162
<div />
104163
) : (
105164
<Tooltip
106-
title="add as child"
107-
aria-label="add as child"
108-
placement="left"
165+
title='add as child'
166+
aria-label='add as child'
167+
placement='left'
109168
>
110169
<IconButton
111-
aria-label="Add"
170+
aria-label='Add'
112171
onClick={() => {
113-
addChild({ title, childType: "COMP" });
172+
addChild({ title, childType: 'COMP' });
114173
}}
115174
>
116-
<AddIcon style={{ color, float: "right" }} />
175+
<AddIcon style={{ color, float: 'right' }} />
117176
</IconButton>
118177
</Tooltip>
119178
)}
@@ -125,14 +184,14 @@ const LeftColExpansionPanel = (props: any) => {
125184
function styles(): any {
126185
return {
127186
root: {
128-
width: "100%",
187+
width: '100%',
129188
marginTop: 10,
130-
backgroundColor: "#333333"
189+
backgroundColor: '#333333'
131190
},
132191
light: {
133-
color: "#eee",
134-
"&:hover": {
135-
color: "#1de9b6"
192+
color: '#eee',
193+
'&:hover': {
194+
color: '#1de9b6'
136195
}
137196
}
138197
};

‎src/components/Rectangle.tsx

Lines changed: 55 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ class Rectangle extends Component<PropsInt, StateInt> {
3636
};
3737

3838
getComponentColor(componentId: number) {
39-
const color = this.props.components.find((comp: ComponentInt) => comp.id === componentId).color;
39+
const color = this.props.components.find(
40+
(comp: ComponentInt) => comp.id === componentId
41+
).color;
4042
return color;
4143
}
4244

@@ -46,7 +48,12 @@ class Rectangle extends Component<PropsInt, StateInt> {
4648
);
4749
}
4850

49-
handleResize(componentId: number, childId: number, target: any, blockSnapSize: number) {
51+
handleResize(
52+
componentId: number,
53+
childId: number,
54+
target: any,
55+
blockSnapSize: number
56+
) {
5057
let focChild: ChildInt = this.props.components
5158
.find((comp: ComponentInt) => comp.id === this.props.componentId)
5259
.childrenArray.find((child: ChildInt) => child.childId === childId);
@@ -57,15 +64,24 @@ class Rectangle extends Component<PropsInt, StateInt> {
5764
);
5865
}
5966
const transformation = {
60-
width: Math.round((target.width() * target.scaleX()) / blockSnapSize) * blockSnapSize,
61-
height: Math.round((target.height() * target.scaleY()) / blockSnapSize) * blockSnapSize,
67+
width:
68+
Math.round((target.width() * target.scaleX()) / blockSnapSize) *
69+
blockSnapSize,
70+
height:
71+
Math.round((target.height() * target.scaleY()) / blockSnapSize) *
72+
blockSnapSize,
6273
x: target.x() + focChild.position.x,
6374
y: target.y() + focChild.position.y
6475
};
6576
this.props.handleTransform(componentId, childId, transformation);
6677
}
6778

68-
handleDrag(componentId: number, childId: number, target: any, blockSnapSize: any) {
79+
handleDrag(
80+
componentId: number,
81+
childId: number,
82+
target: any,
83+
blockSnapSize: any
84+
) {
6985
const transformation = {
7086
x: Math.round(target.x() / blockSnapSize) * blockSnapSize,
7187
y: Math.round(target.y() / blockSnapSize) * blockSnapSize
@@ -113,18 +129,20 @@ class Rectangle extends Component<PropsInt, StateInt> {
113129
scaleY={scaleY}
114130
width={width}
115131
height={height}
116-
onDragEnd={event => this.handleDrag(componentId, childId, event.target, blockSnapSize)}
132+
onDragEnd={event =>
133+
this.handleDrag(componentId, childId, event.target, blockSnapSize)
134+
}
117135
ref={node => {
118136
this.group = node;
119137
}}
120-
tabIndex="0" // required for keypress event to be heard by this.group
138+
tabIndex='0' // required for keypress event to be heard by this.group
121139
>
122140
<Rect
123141
// a Konva Rect is generated for each child of the focusComponent (including the pseudochild, representing the focusComponent itself)
124142
ref={node => {
125143
this.rect = node;
126144
}}
127-
tabIndex="0" // required for keypress event to be heard by this.group
145+
tabIndex='0' // required for keypress event to be heard by this.group
128146
name={`${childId}`}
129147
className={'childRect'}
130148
x={0}
@@ -136,7 +154,11 @@ class Rectangle extends Component<PropsInt, StateInt> {
136154
scaleY={1}
137155
width={width}
138156
height={height}
139-
stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
157+
stroke={
158+
childType === 'COMP'
159+
? this.getComponentColor(childComponentId)
160+
: '#000000'
161+
}
140162
onTransformEnd={event =>
141163
this.handleResize(componentId, childId, event.target, blockSnapSize)
142164
}
@@ -145,9 +167,11 @@ class Rectangle extends Component<PropsInt, StateInt> {
145167
draggable={false}
146168
fill={null}
147169
shadowBlur={childId === -1 ? 6 : null}
170+
148171
fillPatternImage={this.state.image ? this.state.image : null}
149172
fillPatternScaleX={this.state.image ? width / this.state.image.width : 1}
150173
fillPatternScaleY={this.state.image ? height / this.state.image.height : 1}
174+
151175
_useStrictMode
152176
/>
153177
<Label>
@@ -156,7 +180,11 @@ class Rectangle extends Component<PropsInt, StateInt> {
156180
fontVariant={'small-caps'}
157181
// pseudochild's label should look different than normal children:
158182
text={childId === -1 ? title.slice(0, title.length - 2) : title}
159-
fill={childId === -1 ? this.getComponentColor(childComponentId) : '#000000'}
183+
fill={
184+
childId === -1
185+
? this.getComponentColor(childComponentId)
186+
: '#000000'
187+
}
160188
fontSize={childId === -1 ? 15 : 10}
161189
x={4}
162190
y={childId === -1 ? -20 : -12}
@@ -175,14 +203,20 @@ class Rectangle extends Component<PropsInt, StateInt> {
175203
componentId={componentId}
176204
directParentName={childComponentName}
177205
childType={grandchild.childType}
178-
imageSource={grandchild.htmlElement === 'Image' && grandchild.HTMLInfo.Src}
206+
imageSource={
207+
grandchild.htmlElement === 'Image' && grandchild.HTMLInfo.Src
208+
}
179209
childComponentName={grandchild.componentName}
180210
childComponentId={grandchild.childComponentId}
181211
focusChild={focusChild}
182212
childId={childId} // scary addition, grandchildren rects default to childId of "direct" children
183-
width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
213+
width={
214+
grandchild.position.width *
215+
(width / this.getPseudoChild().position.width)
216+
}
184217
height={
185-
grandchild.position.height * (height / this.getPseudoChild().position.height)
218+
grandchild.position.height *
219+
(height / this.getPseudoChild().position.height)
186220
}
187221
x={
188222
(grandchild.position.x - this.getPseudoChild().position.x) *
@@ -194,16 +228,14 @@ class Rectangle extends Component<PropsInt, StateInt> {
194228
}
195229
/>
196230
))}
197-
{focusChild &&
198-
focusChild.childId === childId &&
199-
draggable && (
200-
<TransformerComponent
201-
focusChild={focusChild}
202-
rectClass={'childRect'}
203-
anchorSize={8}
204-
color={'grey'}
205-
/>
206-
)}
231+
{focusChild && focusChild.childId === childId && draggable && (
232+
<TransformerComponent
233+
focusChild={focusChild}
234+
rectClass={'childRect'}
235+
anchorSize={8}
236+
color={'grey'}
237+
/>
238+
)}
207239
</Group>
208240
);
209241
}

0 commit comments

Comments
 (0)