Skip to content

Commit 695b81a

Browse files
brianjshanbrianjshan
committed
Merge branch 'master' into typescript
2 parents f31086c + 7718220 commit 695b81a

File tree

14 files changed

+308
-92
lines changed

14 files changed

+308
-92
lines changed

‎app/electron/main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -396,3 +396,5 @@ ipcMain.on('github', event => {
396396
}
397397
});
398398
});
399+
400+
//module.exports = dialog;

‎app/src/components/left/ComponentPanel.tsx

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,6 @@ const ComponentPanel = (): JSX.Element => {
8686
if (!compName.charAt(0).match(letters)) {
8787
triggerError('letters');
8888
return;
89-
// }
90-
// let firstChar = compName.charAt(0);
91-
// if (firstChar <= '9' && firstChar >= '0') {
92-
// triggerError('number');
93-
// return;
9489
} else if (compName.trim() === '') {
9590
triggerError('empty');
9691
return;
@@ -106,6 +101,12 @@ const ComponentPanel = (): JSX.Element => {
106101
return state.canvasFocus.componentId === targetId ? true : false;
107102
};
108103

104+
const deleteReusableComponent = (id) => {
105+
// reducer to modify state.components
106+
// make sure the component is not a root
107+
//
108+
}
109+
109110
return (
110111
<div className={classes.panelWrapper}>
111112
{/* Add a new component*/}
@@ -155,30 +156,35 @@ const ComponentPanel = (): JSX.Element => {
155156
<Grid container direction="row" justify="center" alignItems="center">
156157
{state.components
157158
.filter(comp => state.rootComponents.includes(comp.id))
158-
.map(comp => (
159+
.map(comp => {
160+
//console.log('root comp', comp.name)
161+
return (
159162
<ComponentPanelItem
160163
isFocus={isFocus(comp.id)}
161164
key={`comp-${comp.id}`}
162165
name={comp.name}
163166
id={comp.id}
164167
root={true}
165168
/>
166-
))}
169+
)})}
167170
</Grid>
168171
{/* Display all reusable components */}
169172
<h4>Reusable components</h4>
170173
<Grid container direction="row" justify="center" alignItems="center">
171174
{state.components
172175
.filter(comp => !state.rootComponents.includes(comp.id))
173-
.map(comp => (
176+
.map(comp => {
177+
//console.log('all root comps', state.rootComponents);
178+
//console.log('all reusable comps', state.components);
179+
return (
174180
<ComponentPanelItem
175181
isFocus={isFocus(comp.id)}
176182
key={`comp-${comp.id}`}
177183
name={comp.name}
178184
id={comp.id}
179185
root={false}
180186
/>
181-
))}
187+
)})}
182188
</Grid>
183189
{/* Display navigation components - (only applies to next.js which has routing built in) */}
184190
{state.projectType === 'Next.js' ? (

‎app/src/components/left/HTMLItem.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import { useDrag } from 'react-dnd';
3+
import { ItemTypes } from '../../constants/ItemTypes';
4+
import Grid from '@material-ui/core/Grid';
5+
import { makeStyles } from '@material-ui/core/styles';
6+
7+
8+
const useStyles = makeStyles({
9+
HTMLPanelItem: {
10+
color: 'white',
11+
// this is experimental for version: BLADERUNNER THEME
12+
backgroundColor: 'transparent',
13+
// minWidth: '340px',
14+
minHeight: '60px',
15+
marginBottom: '10px',
16+
marginRight: '5px',
17+
marginLeft: '5px',
18+
border: '2px dotted rgba(255,255,255, 0.45)',
19+
borderRadius: '8px',
20+
cursor: 'grab',
21+
'& > h3': {
22+
display: 'inline-block',
23+
paddingTop: '18px'
24+
}
25+
}
26+
});
27+
28+
const HTMLItem: React.FC<{
29+
name: string;
30+
id: number;
31+
Icon: any;
32+
}> = ({ name, id, Icon }) => {
33+
const classes = useStyles();
34+
35+
const [{ isDragging }, drag] = useDrag({
36+
item: {
37+
type: ItemTypes.INSTANCE,
38+
newInstance: true,
39+
instanceType: 'HTML Element',
40+
name,
41+
instanceTypeId: id
42+
},
43+
collect: (monitor: any) => ({
44+
isDragging: !!monitor.isDragging()
45+
})
46+
});
47+
48+
return (
49+
<Grid item xs={5} key={`html-${name}`}>
50+
<div ref={drag} className={classes.HTMLPanelItem}>
51+
<h3>{name}</h3>
52+
<span
53+
style={{
54+
verticalAlign: 'middle',
55+
display: 'inline-block',
56+
marginLeft: '5px'
57+
}}
58+
>
59+
{Icon && <Icon />}
60+
</span>
61+
</div>
62+
</Grid>
63+
);
64+
}
65+
66+
export default HTMLItem;

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 56 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,75 @@
1-
import React from 'react';
1+
import React, { useState, useContext } from 'react';
22
import Grid from '@material-ui/core/Grid';
3-
import { useDrag } from 'react-dnd';
4-
import { ItemTypes } from '../../constants/ItemTypes';
5-
import HTMLTypes from '../../context/HTMLTypes';
6-
import { makeStyles } from '@material-ui/core/styles';
3+
import { stateContext } from '../../context/context';
4+
import HTMLItem from './HTMLItem';
75

8-
const useStyles = makeStyles({
9-
HTMLPanelItem: {
10-
color: 'white',
11-
// this is experimental for version: BLADERUNNER THEME
12-
backgroundColor: 'transparent',
13-
// minWidth: '340px',
14-
minHeight: '60px',
15-
marginBottom: '10px',
16-
marginRight: '5px',
17-
marginLeft: '5px',
18-
border: '2px dotted rgba(255,255,255, 0.45)',
19-
borderRadius: '8px',
20-
cursor: 'grab',
21-
'& > h3': {
22-
display: 'inline-block',
23-
paddingTop: '18px'
24-
}
6+
const HTMLPanel = (): JSX.Element => {
7+
const [tag, setTag] = useState('');
8+
const [name, setName] = useState('');
9+
const [currentID, setCurrentID] = useState(12);
10+
const [state, dispatch] = useContext(stateContext);
11+
12+
const handleTagChange = (e: React.ChangeEvent<HTMLInputElement>) => {
13+
setTag(e.target.value);
2514
}
26-
});
2715

28-
const HTMLPanel = (): JSX.Element => {
29-
const classes = useStyles();
30-
const options = HTMLTypes.map(option => {
31-
const [{ isDragging }, drag] = useDrag({
32-
item: {
33-
type: ItemTypes.INSTANCE,
34-
newInstance: true,
35-
instanceType: 'HTML Element',
36-
name: option.name,
37-
instanceTypeId: option.id
38-
},
39-
collect: (monitor: any) => ({
40-
isDragging: !!monitor.isDragging()
41-
})
16+
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
17+
setName(e.target.value);
18+
}
19+
20+
const handleSubmit = (e) => {
21+
e.preventDefault();
22+
const newElement = {
23+
id: currentID,
24+
tag,
25+
name,
26+
style: {},
27+
placeHolderShort: name,
28+
placeHolderLong: '',
29+
icon: null
30+
};
31+
dispatch({
32+
type: 'ADD ELEMENT',
33+
payload: newElement
4234
});
43-
return (
44-
<Grid item xs={5} key={`html-${option.name}`}>
45-
<div ref={drag} className={classes.HTMLPanelItem}>
46-
<h3>{option.name}</h3>
47-
<span
48-
style={{
49-
verticalAlign: 'middle',
50-
display: 'inline-block',
51-
marginLeft: '5px'
52-
}}
53-
>
54-
{<option.icon />}
55-
</span>
56-
</div>
57-
</Grid>
58-
);
59-
});
35+
setCurrentID(currentID + 1);
36+
setTag('');
37+
setName('');
38+
console.log("SUBMIT BUTTON CLICKED: ", newElement);
39+
}
6040

6141
return (
6242
<div>
6343
<h4> HTML Elements</h4>
44+
<div>
45+
<form onSubmit={handleSubmit}>
46+
<h4>Create New Element: </h4>
47+
<label>
48+
Tag:
49+
<input type="text" name="Tag" value={tag} onChange={handleTagChange} />
50+
</label>
51+
<label>
52+
Tag Name:
53+
<input type="text" name="Tag Name" value={name} onChange={handleNameChange} />
54+
</label>
55+
<input type="submit" value="Add Element" />
56+
</form>
57+
</div>
6458
<Grid
6559
container
6660
spacing={1}
6761
direction="row"
6862
justify="center"
6963
alignItems="center"
7064
>
71-
{options}
65+
{state.HTMLTypes.map(option => (
66+
<HTMLItem
67+
name={option.name}
68+
key={`html-${option.name}`}
69+
id={option.id}
70+
Icon={option.icon}
71+
/>
72+
))}
7273
</Grid>
7374
</div>
7475
);

‎app/src/components/main/Canvas.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ function Canvas() {
3030
const [{ isOver }, drop] = useDrop({
3131
accept: ItemTypes.INSTANCE,
3232
drop: (item: DragItem, monitor: DropTargetMonitor) => {
33+
//console.log(isOver);
3334
const didDrop = monitor.didDrop(); // returns false for direct drop target
3435
if (didDrop) {
3536
return;
@@ -48,6 +49,7 @@ function Canvas() {
4849
}
4950
// if item is not a new instance, change position of element dragged inside div so that the div is the new parent
5051
else {
52+
console.log('dispatch change position')
5153
dispatch({
5254
type: 'CHANGE POSITION',
5355
payload: {
@@ -73,6 +75,8 @@ function Canvas() {
7375
// Combine the default styles of the canvas with the custom styles set by the user for that component
7476
// The render children function renders all direct children of a given component
7577
// Direct children are draggable/clickable
78+
//console.log('curr comp =>', currentComponent);
79+
//console.log('curr comp style', currentComponent.style);
7680
const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
7781
return (
7882
<div ref={drop} style={canvasStyle} onClick={onClickHandler}>

‎app/src/components/main/DirectChildComponent.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
7272
const renderIndirectChildren = (
7373
referencedComponent: Component | ChildElement
7474
) => {
75+
console.log('referenced comp => ', referencedComponent);
7576
// iterate through all children of referenced
7677
return referencedComponent.children.map(child => {
7778
if (child.type === 'Component') {

‎app/src/components/main/DirectChildHTML.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { ItemTypes } from '../../constants/ItemTypes';
1010
import { stateContext } from '../../context/context';
1111
import { combineStyles } from '../../helperFunctions/combineStyles';
1212
import IndirectChild from './IndirectChild';
13-
import HTMLTypes from '../../context/HTMLTypes';
1413
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
1514

1615
function DirectChildHTML({
@@ -24,7 +23,7 @@ function DirectChildHTML({
2423

2524
// find the HTML element corresponding with this instance of an HTML element
2625
// find the current component to render on the canvas
27-
const HTMLType: HTMLType = HTMLTypes.find(
26+
const HTMLType: HTMLType = state.HTMLTypes.find(
2827
(type: HTMLType) => type.id === typeId
2928
);
3029

0 commit comments

Comments
 (0)