Skip to content

Commit c20cbac

Browse files
diegovazqueznydiegovazquezny
authored
Merge pull request #41 from jinsoolim/deleteElements
lots of changes
2 parents ee9a426 + dafee34 commit c20cbac

File tree

9 files changed

+271
-96
lines changed

9 files changed

+271
-96
lines changed

‎app/electron/main.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,9 @@ app.on('web-contents-created', (event, contents) => {
229229
'https://github.com',
230230
'https://nextjs.org',
231231
'https://www.facebook.com',
232-
'https://developer.mozilla.org'
232+
'https://developer.mozilla.org',
233+
'https://www.smashingmagazine.com',
234+
'https://www.html5rocks.com'
233235
];
234236
// Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
235237
if (!validOrigins.includes(parsedUrl.origin)) {
@@ -251,7 +253,9 @@ app.on('web-contents-created', (event, contents) => {
251253
'https://github.com',
252254
'https://nextjs.org',
253255
'https://developer.mozilla.org',
254-
'https://www.facebook.com'
256+
'https://www.facebook.com',
257+
'https://www.smashingmagazine.com',
258+
'https://www.html5rocks.com'
255259
];
256260

257261
// Log and prevent the app from redirecting to a new page
@@ -292,7 +296,9 @@ app.on('web-contents-created', (event, contents) => {
292296
'https://nextjs.org',
293297
'https://developer.mozilla.org',
294298
'https://github.com',
295-
'https://www.facebook.com'
299+
'https://www.facebook.com',
300+
'https://www.smashingmagazine.com',
301+
'https://www.html5rocks.com'
296302
];
297303
// Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
298304
if (!validOrigins.includes(parsedUrl.origin)) {

‎app/electron/menu.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const fs = require('fs');
44
const path = require('path');
55
const isMac = process.platform === 'darwin';
66
const port = 5000;
7+
const Protocol = require('./protocol');
78
const tutorialRoute = `http://localhost:${port}/tutorial`;
89

910
// Create a template for a menu and create menu using that template
@@ -30,7 +31,12 @@ var MenuBuilder = function(mainWindow, appName) {
3031
devTools: false
3132
}
3233
});
33-
tutorial.loadURL(`http://localhost:8080/#/tutorial`);
34+
console.log(process.env.NODE_ENV);
35+
if (process.env.NODE_ENV === 'development') {
36+
tutorial.loadURL(`http://localhost:8080/#/tutorial`);}
37+
else {
38+
tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
39+
}
3440
tutorial.show();
3541
};
3642

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

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { useDrag } from 'react-dnd';
33
import { ItemTypes } from '../../constants/ItemTypes';
44
import Grid from '@material-ui/core/Grid';
55
import { makeStyles } from '@material-ui/core/styles';
6+
import List from '@material-ui/core/List';
7+
import ListItem from '@material-ui/core/ListItem';
8+
import ListItemText from '@material-ui/core/ListItemText';
9+
import createModal from '../right/createModal';
610

711
const buttonClasses =
812
'MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-12 MuiButton-textPrimary';
@@ -34,7 +38,7 @@ const HTMLItem: React.FC<{
3438
handleDelete: (id: number) => void;
3539
}> = ({ name, id, Icon, handleDelete }) => {
3640
const classes = useStyles();
37-
41+
const [modal, setModal] = useState(null);
3842
const [{ isDragging }, drag] = useDrag({
3943
item: {
4044
type: ItemTypes.INSTANCE,
@@ -48,8 +52,66 @@ const HTMLItem: React.FC<{
4852
})
4953
});
5054

55+
const closeModal = () => setModal(null);
56+
57+
// creates modal that asks if user wants to clear workspace
58+
// if user clears their workspace, then their components are removed from state and the modal is closed
59+
const deleteAllInstances = (deleteID: number) => {
60+
// set modal options
61+
const children = (
62+
<List className="export-preference">
63+
<ListItem
64+
key={`clear${deleteID}`}
65+
button
66+
onClick={() => handleDelete(deleteID)}
67+
style={{
68+
border: '1px solid #3f51b5',
69+
marginBottom: '2%',
70+
marginTop: '5%'
71+
}}
72+
>
73+
<ListItemText
74+
primary={'Yes, delete all instances'}
75+
style={{ textAlign: 'center' }}
76+
onClick={closeModal}
77+
/>
78+
</ListItem>
79+
<ListItem
80+
key={`close${deleteID}`}
81+
button
82+
onClick={closeModal}
83+
style={{
84+
border: '1px solid #3f51b5',
85+
marginBottom: '2%',
86+
marginTop: '5%'
87+
}}
88+
>
89+
<ListItemText
90+
primary={'No, do not delete element'}
91+
style={{ textAlign: 'center' }}
92+
onClick={closeModal}
93+
/>
94+
</ListItem>
95+
</List>
96+
);
97+
98+
// create modal
99+
setModal(
100+
createModal({
101+
closeModal,
102+
children,
103+
message: 'Deleting this element will delete all instances of this element within the application.\nDo you still wish to proceed?',
104+
primBtnLabel: null,
105+
primBtnAction: null,
106+
secBtnAction: null,
107+
secBtnLabel: null,
108+
open: true
109+
})
110+
);
111+
};
112+
51113
return (
52-
<Grid item xs={5} key={`html-${name}`}>
114+
<Grid item xs={5} key={`html-g${name}`}>
53115
<div ref={drag} className={classes.HTMLPanelItem}>
54116
<h3>{name}</h3>
55117
<span
@@ -62,8 +124,9 @@ const HTMLItem: React.FC<{
62124
{Icon && <Icon />}
63125
</span>
64126
{id > 11 &&
65-
<button className={buttonClasses} onClick={() => { handleDelete(id) }} > X </button> }
127+
<button className={buttonClasses} onClick={() => deleteAllInstances(id)} > X </button> }
66128
</div>
129+
{modal}
67130
</Grid>
68131
);
69132
}

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

Lines changed: 90 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,38 @@
1-
import React, { useContext } from 'react';
1+
import React, { useState, useContext } from 'react';
22
import { useDrop, DropTargetMonitor } from 'react-dnd';
33
import { ItemTypes } from '../../constants/ItemTypes';
44
import StateContext from '../../context/context';
55
import { Component, DragItem } from '../../interfaces/Interfaces';
66
import { combineStyles } from '../../helperFunctions/combineStyles';
77
import renderChildren from '../../helperFunctions/renderChildren';
8+
import List from '@material-ui/core/List';
9+
import ListItem from '@material-ui/core/ListItem';
10+
import ListItemText from '@material-ui/core/ListItemText';
11+
import createModal from '../right/createModal';
812

9-
const findNestedChild = (curr, components) => {
10-
components.forEach((comp, i) => {
11-
comp.children.forEach(child => {
12-
if (child.name === curr.name) console.log('childname', child.name);
13-
});
14-
if (comp.children.length !== 0) findNestedChild(curr, comp.children);
15-
});
13+
const checkChildren = (child, currentComponent) => {
14+
for (let i = 0; i < child.length; i+=1) {
15+
if (child[i].children.length) {
16+
for (let j = 0; j < child[i].children.length; j+=1) {
17+
if (child[i].children[j].name === currentComponent.name) {
18+
return true;
19+
}
20+
}
21+
return checkChildren(child[i].children, currentComponent);
22+
}
23+
}
24+
return false;
1625
};
1726

1827
function Canvas() {
28+
const [modal, setModal] = useState(null);
29+
1930
const [state, dispatch] = useContext(StateContext);
2031
// find the current component to render on the canvas
2132
const currentComponent: Component = state.components.find(
2233
(elem: Component) => elem.id === state.canvasFocus.componentId
2334
);
2435

25-
findNestedChild(currentComponent, state.components);
26-
2736
// changes focus of the canvas to a new component / child
2837
const changeFocus = (componentId: number, childId: number | null) => {
2938
dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
@@ -36,6 +45,48 @@ function Canvas() {
3645
changeFocus(state.canvasFocus.componentId, null);
3746
}
3847

48+
const closeModal = () => setModal(null);
49+
50+
// creates modal that asks if user wants to clear workspace
51+
// if user clears their workspace, then their components are removed from state and the modal is closed
52+
const triedToNestIncorrectly = () => {
53+
// set modal options
54+
const children = (
55+
<List className="export-preference">
56+
<ListItem
57+
key={`gotIt${state.canvasFocus.componentId}`}
58+
button
59+
onClick={closeModal}
60+
style={{
61+
border: '1px solid #3f51b5',
62+
marginBottom: '2%',
63+
marginTop: '5%'
64+
}}
65+
>
66+
<ListItemText
67+
primary={'Got it'}
68+
style={{ textAlign: 'center' }}
69+
onClick={closeModal}
70+
/>
71+
</ListItem>
72+
</List>
73+
);
74+
75+
// create modal
76+
setModal(
77+
createModal({
78+
closeModal,
79+
children,
80+
message: 'Unable to nest component in another component that contains that component.',
81+
primBtnLabel: null,
82+
primBtnAction: null,
83+
secBtnAction: null,
84+
secBtnLabel: null,
85+
open: true
86+
})
87+
);
88+
};
89+
3990
// This hook will allow the user to drag items from the left panel on to the canvas
4091
const [{ isOver }, drop] = useDrop({
4192
accept: ItemTypes.INSTANCE,
@@ -45,26 +96,33 @@ function Canvas() {
4596
return;
4697
}
4798

48-
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
49-
if (item.newInstance) {
50-
dispatch({
51-
type: 'ADD CHILD',
52-
payload: {
53-
type: item.instanceType,
54-
typeId: item.instanceTypeId,
55-
childId: null
56-
}
57-
});
58-
}
59-
// if item is not a new instance, change position of element dragged inside div so that the div is the new parent
60-
else {
61-
dispatch({
62-
type: 'CHANGE POSITION',
63-
payload: {
64-
currentChildId: item.childId,
65-
newParentChildId: null
66-
}
67-
});
99+
const addingComponent = state.components.find(elem => elem.id === item.instanceTypeId);
100+
101+
if (checkChildren([addingComponent], currentComponent)) {
102+
triedToNestIncorrectly();
103+
} else {
104+
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
105+
if (item.newInstance) {
106+
console.log("still added");
107+
dispatch({
108+
type: 'ADD CHILD',
109+
payload: {
110+
type: item.instanceType,
111+
typeId: item.instanceTypeId,
112+
childId: null
113+
}
114+
});
115+
}
116+
// if item is not a new instance, change position of element dragged inside div so that the div is the new parent
117+
else {
118+
dispatch({
119+
type: 'CHANGE POSITION',
120+
payload: {
121+
currentChildId: item.childId,
122+
newParentChildId: null
123+
}
124+
});
125+
}
68126
}
69127
},
70128
collect: monitor => ({
@@ -84,10 +142,12 @@ function Canvas() {
84142
// The render children function renders all direct children of a given component
85143
// Direct children are draggable/clickable
86144

145+
87146
const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
88147
return (
89148
<div ref={drop} style={canvasStyle} onClick={onClickHandler}>
90149
{renderChildren(currentComponent.children)}
150+
{modal}
91151
</div>
92152
);
93153
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
125125
placeHolder={HTMLDefaultPlaceholder}
126126
linkId={null}
127127
key={
128-
'indChild' +
128+
'indChildHTML' +
129129
child.childId.toString() +
130130
child.typeId.toString()
131131
}
@@ -138,7 +138,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
138138
placeHolder={HTMLDefaultPlaceholder}
139139
linkId={null}
140140
key={
141-
'indChild' +
141+
'indChildNest' +
142142
child.childId.toString() +
143143
child.typeId.toString()
144144
}
@@ -155,7 +155,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
155155
return (
156156
<IndirectChild
157157
key={
158-
'indChild' + child.childId.toString() + child.typeId.toString()
158+
'RouteLink' + child.childId.toString() + child.typeId.toString()
159159
}
160160
style={combinedStyle}
161161
placeHolder=""

‎app/src/context/HTMLTypes.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const HTMLTypes: HTMLType[] = [
6666
tag: 'a',
6767
name: 'Link',
6868
style: { border: 'none' },
69-
placeHolderShort: <a href="">Link</a>,
69+
placeHolderShort: <a href="#">Link</a>,
7070
placeHolderLong: '',
7171
icon: LinkIcon
7272
},

‎app/src/helperFunctions/renderChildren.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const renderChildren = (children: ChildElement[]) => {
2424
type={type}
2525
typeId={typeId}
2626
style={style}
27-
key={'DirChild' + childId.toString()}
27+
key={'DirChildComp' + childId.toString() + name}
2828
name={child.name}
2929
/>
3030
);
@@ -37,7 +37,7 @@ const renderChildren = (children: ChildElement[]) => {
3737
type={type}
3838
typeId={typeId}
3939
style={style}
40-
key={'DirChild' + childId.toString()}
40+
key={'DirChildHTML' + childId.toString() + name}
4141
name={child.name}
4242
/>
4343
);
@@ -51,7 +51,7 @@ const renderChildren = (children: ChildElement[]) => {
5151
typeId={typeId}
5252
style={style}
5353
children={children}
54-
key={'DirChild' + childId.toString()}
54+
key={'DirChildHTMLNest' + childId.toString() + name}
5555
name={child.name}
5656
/>
5757
);
@@ -66,7 +66,7 @@ const renderChildren = (children: ChildElement[]) => {
6666
typeId={typeId}
6767
style={style}
6868
children={children}
69-
key={'DirChild' + childId.toString()}
69+
key={'RouteLink' + childId.toString() + name}
7070
name={child.name}
7171
/>
7272
);

0 commit comments

Comments
 (0)