Skip to content

Commit e052683

Browse files
author
john lim
committed
working branch
1 parent 5cb0ddc commit e052683

File tree

2 files changed

+35
-121
lines changed

2 files changed

+35
-121
lines changed

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

Lines changed: 22 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
import React, { useState, useContext } from 'react';
1+
import React, { 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';
128

139
const findNestedChild = (curr, components) => {
1410
components.forEach((comp, i) => {
@@ -17,18 +13,17 @@ const findNestedChild = (curr, components) => {
1713
});
1814
if (comp.children.length !== 0) findNestedChild(curr, comp.children);
1915
});
20-
2116
};
2217

2318
function Canvas() {
24-
const [modal, setModal] = useState(null);
25-
2619
const [state, dispatch] = useContext(StateContext);
2720
// find the current component to render on the canvas
2821
const currentComponent: Component = state.components.find(
2922
(elem: Component) => elem.id === state.canvasFocus.componentId
3023
);
3124

25+
findNestedChild(currentComponent, state.components);
26+
3227
// changes focus of the canvas to a new component / child
3328
const changeFocus = (componentId: number, childId: number | null) => {
3429
dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
@@ -41,48 +36,6 @@ function Canvas() {
4136
changeFocus(state.canvasFocus.componentId, null);
4237
}
4338

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

95-
const runReducers = () => {
96-
if (item.newInstance) {
97-
dispatch({
98-
type: 'ADD CHILD',
99-
payload: {
100-
type: item.instanceType,
101-
typeId: item.instanceTypeId,
102-
childId: null
103-
}
104-
});
105-
}
106-
// if item is not a new instance, change position of element dragged inside div so that the div is the new parent
107-
else {
108-
dispatch({
109-
type: 'CHANGE POSITION',
110-
payload: {
111-
currentChildId: item.childId,
112-
newParentChildId: null
113-
}
114-
});
115-
}
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+
});
11658
}
117-
118-
const addingComponent = state.components.find(elem => elem.id === item.instanceTypeId);
119-
120-
if (item.instanceType === "HTML Element") {
121-
return runReducers();
122-
} else if (item.instanceType === 'Route Link') {
123-
return runReducers();
124-
} else if (checkChildren([addingComponent], currentComponent)) {
125-
triedToNestIncorrectly();
126-
return;
127-
} else {
128-
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
129-
return runReducers();
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+
});
13068
}
13169
},
13270
collect: monitor => ({
@@ -146,12 +84,10 @@ function Canvas() {
14684
// The render children function renders all direct children of a given component
14785
// Direct children are draggable/clickable
14886

149-
15087
const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
15188
return (
15289
<div ref={drop} style={canvasStyle} onClick={onClickHandler}>
15390
{renderChildren(currentComponent.children)}
154-
{modal}
15591
</div>
15692
);
15793
}

‎app/src/reducers/componentReducer.ts‎

Lines changed: 13 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,6 @@ const reducer = (state: State, action: Action) => {
257257

258258
const parentComponentId: number = state.canvasFocus.componentId;
259259
const components = [...state.components];
260-
updateAllIds(components);
261260

262261
// find component that we're adding a child to
263262
const parentComponent = findComponent(components, parentComponentId);
@@ -328,11 +327,7 @@ const reducer = (state: State, action: Action) => {
328327
componentId: state.canvasFocus.componentId,
329328
childId: newChild.childId
330329
};
331-
332-
let nextChildId: number = 1;
333-
for (let i = 0; i < parentComponent.children.length; i+=1) {
334-
nextChildId +=1;
335-
}
330+
const nextChildId = state.nextChildId + 1;
336331
return { ...state, components, nextChildId, canvasFocus };
337332
}
338333
// move an instance from one position in a component to another position in a component
@@ -376,23 +371,17 @@ const reducer = (state: State, action: Action) => {
376371
state.HTMLTypes
377372
);
378373

379-
let nextChildId: number = 1;
380-
for (let i = 0; i < component.children.length; i+=1) {
381-
nextChildId +=1;
382-
}
383-
updateAllIds(components);
384-
return { ...state, components, nextChildId };
374+
return { ...state, components };
385375
}
386376
// Change the focus component and child
387377
case 'CHANGE FOCUS': {
388378
const {
389379
componentId,
390380
childId
391381
}: { componentId: number; childId: number | null } = action.payload;
392-
const canvasFocus = { componentId, childId };
393-
const components = [...state.components];
394-
updateAllIds(components);
395-
return { ...state, canvasFocus, components };
382+
383+
const canvasFocus = { ...state.canvasFocus, componentId, childId };
384+
return { ...state, canvasFocus };
396385
}
397386
case 'UPDATE CSS': {
398387
const { style } = action.payload;
@@ -418,7 +407,7 @@ const reducer = (state: State, action: Action) => {
418407
case 'DELETE CHILD': {
419408
// if in-focus instance is a top-level component and not a child, don't delete anything
420409

421-
// if (!state.canvasFocus.childId) return state;
410+
if (!state.canvasFocus.childId) return state;
422411

423412
// find the current component in focus
424413
const components = [...state.components];
@@ -443,23 +432,15 @@ const reducer = (state: State, action: Action) => {
443432
state.HTMLTypes
444433
);
445434

446-
let nextChildId: number = 1;
447-
for (let i = 0; i < component.children.length; i+=1) {
448-
nextChildId +=1;
449-
}
450-
451-
let childId: null | number = ((state.canvasFocus.childId - 1) === 0) ? null : state.canvasFocus.childId - 1;
452-
const canvasFocus = { ...state.canvasFocus, childId };
453-
updateAllIds(components);
454-
return { ...state, components, canvasFocus, nextChildId };
435+
const canvasFocus = { ...state.canvasFocus, childId: null };
436+
return { ...state, components, canvasFocus };
455437
}
456438

457439
case 'DELETE PAGE': {
458440
const id: number = state.canvasFocus.componentId;
459441
const name: string = state.components[id - 1].name;
460442

461443
const components: Component[] = deleteById(id, name);
462-
463444
// rebuild rootComponents with correct page IDs
464445
const rootComponents = updateRoots(components);
465446
const canvasFocus = { componentId: 1, childId: null };
@@ -474,18 +455,17 @@ const reducer = (state: State, action: Action) => {
474455
const rootComponents: number[] = updateRoots(components);
475456

476457
// iterate over the length of the components array
477-
components.forEach((el, i) => {
458+
for (let i = 0; i < components.length; i++) {
478459
// for each components' code, run the generateCode function to
479460
// update the code preview on the app
480-
el.code = generateCode(
461+
components[i].code = generateCode(
481462
components,
482463
components[i].id,
483464
rootComponents,
484465
state.projectType,
485466
state.HTMLTypes
486467
);
487-
});
488-
468+
}
489469

490470
const canvasFocus = { componentId: 1, childId: null };
491471

@@ -574,14 +554,13 @@ const reducer = (state: State, action: Action) => {
574554

575555
case 'OPEN PROJECT': {
576556
convertToJSX(action.payload.HTMLTypes);
577-
// action.payload.canvasFocus = { ...action.payload.canvasFocus, childId: null}
578557
return {
579558
...action.payload
580559
};
581560
}
582561

583562
case 'ADD ELEMENT': {
584-
const HTMLTypes: HTMLType[] = [...state.HTMLTypes];
563+
const HTMLTypes = [...state.HTMLTypes];
585564
HTMLTypes.push(action.payload);
586565
return {
587566
...state,
@@ -610,8 +589,7 @@ const reducer = (state: State, action: Action) => {
610589
})
611590
return {
612591
...state,
613-
HTMLTypes,
614-
components
592+
HTMLTypes
615593
};
616594
}
617595

0 commit comments

Comments
 (0)