Skip to content

Commit 5d001ac

Browse files
brett-websterbrett-webster
committed
Canvas delete buttons & delete key now both working w/ Redux, also leveraging newly implemented auto-refresh functionality of CodePreview
1 parent 6221311 commit 5d001ac

File tree

6 files changed

+275
-215
lines changed

6 files changed

+275
-215
lines changed

‎app/src/components/bottom/CodePreview.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const CodePreview: React.FC<{
3838

3939
const [state] = useContext(StateContext);
4040
const [, setDivHeight] = useState(0);
41-
const compontents = state.components;
41+
const components = state.components;
4242
let currentComponent = state.components.find(
4343
(elem: Component) => elem.id === state.canvasFocus.componentId
4444
);
@@ -59,14 +59,14 @@ const CodePreview: React.FC<{
5959
type: 'CODE_PREVIEW_INPUT',
6060
payload: currentComponent.code
6161
});
62-
}, [currentComponent, compontents]); // Lillian added another dependency here to utilize useEffect
62+
}, [currentComponent, components]); // Lillian added another dependency here to utilize useEffect
6363

6464
/**
6565
* Handler thats listens to changes in code editor
6666
* @param {string} data - Code entered by the user
6767
*/
68-
const handleChange = async data => {
69-
console.log('changed');
68+
const handleChange = async (data) => {
69+
// console.log('changed');
7070
setInput(data);
7171
store.dispatch({ type: 'CODE_PREVIEW_INPUT', payload: data });
7272
if (!ref.current) {

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

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Modal from '@material-ui/core/Modal';
44
import StateContext from '../../context/context';
55

66
function Annotation({ id, name, annotations }: Annotations) {
7-
const [state] = useContext(StateContext);
7+
const [state, dispatch] = useContext(StateContext);
88
// const [annotation, setAnnotations] = useState(annotations);
99
// React hook setting the annotation button modal open/close state
1010
// const [open, setOpen] = React.useState(false);
@@ -16,40 +16,42 @@ function Annotation({ id, name, annotations }: Annotations) {
1616

1717
// ---------------------------------------------- NEW CODE for DELETE BUTTONS (start) ---------------------------------------
1818
const deleteHTMLtype = (id: number) => {
19-
console.log(id, childrenArray);
20-
let arrIndex: number = -1;
19+
dispatch({
20+
type: 'DELETE CHILD',
21+
payload: { id }
22+
});
2123

22-
let arrOfAllChildIDs: number[] = [];
23-
recurseAllChildren(childrenArray);
24-
25-
function recurseAllChildren(childArray) {
26-
// console.log('Full Array: ', childArray, arrOfAllChildIDs);
27-
for (let index in childArray) {
28-
// console.log(index);
29-
30-
if (childArray[index].children.length) {
31-
// console.log('In Recurse - non-endpoint: ', childArray[index].childId);
32-
arrOfAllChildIDs.push(childArray[index].childId); // Use this only to pull all non-endpoint childIds, document out breaks
33-
if (childArray[index].childId === id) {
34-
arrIndex = Number(index);
35-
// Remove BOTH element & preceding separator spacing objects from array if NOT nested
36-
childArray.splice(arrIndex - 1, 2);
37-
break;
38-
}
39-
recurseAllChildren(childArray[index].children);
40-
} else if (childArray[index].childId < 1000)
41-
// FILTER OUT separators...
42-
// console.log('In Recurse - endpoint: ', childArray[index].childId);
43-
arrOfAllChildIDs.push(childArray[index].childId); // Use this only to pull all endpoint childIds, document out breaks
44-
if (childArray[index].childId === id) {
45-
arrIndex = Number(index);
46-
// Remove BOTH element & preceding separator spacing objects from array if NOT nested
47-
childArray.splice(arrIndex - 1, 2);
48-
// console.log(index, arrIndex, 'ultimate', childArray[index]);
49-
break;
50-
}
51-
}
52-
}
24+
// console.log(id, childrenArray);
25+
// let arrIndex: number = -1;
26+
// let arrOfAllChildIDs: number[] = [];
27+
// recurseAllChildren(childrenArray);
28+
// function recurseAllChildren(childArray) {
29+
// // console.log('Full Array: ', childArray, arrOfAllChildIDs);
30+
// for (let index in childArray) {
31+
// // console.log(index);
32+
// if (childArray[index].children.length) {
33+
// // console.log('In Recurse - non-endpoint: ', childArray[index].childId);
34+
// arrOfAllChildIDs.push(childArray[index].childId); // Use this only to pull all non-endpoint childIds, document out breaks
35+
// if (childArray[index].childId === id) {
36+
// arrIndex = Number(index);
37+
// // Remove BOTH element & preceding separator spacing objects from array if NOT nested
38+
// childArray.splice(arrIndex - 1, 2);
39+
// break;
40+
// }
41+
// recurseAllChildren(childArray[index].children);
42+
// } else if (childArray[index].childId < 1000)
43+
// // FILTER OUT separators...
44+
// // console.log('In Recurse - endpoint: ', childArray[index].childId);
45+
// arrOfAllChildIDs.push(childArray[index].childId); // Use this only to pull all endpoint childIds, document out breaks
46+
// if (childArray[index].childId === id) {
47+
// arrIndex = Number(index);
48+
// // Remove BOTH element & preceding separator spacing objects from array if NOT nested
49+
// childArray.splice(arrIndex - 1, 2);
50+
// // console.log(index, arrIndex, 'ultimate', childArray[index]);
51+
// break;
52+
// }
53+
// }
54+
// }
5355
// console.log(arrIndex);
5456
// console.log('arrOfAllChildIDs: ', arrOfAllChildIDs);
5557
};

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const DemoRender = (): JSX.Element => {
2323
width: '100%',
2424
backgroundColor: '#FBFBFB',
2525
border: '2px Solid grey',
26-
overflow: 'auto',
26+
overflow: 'auto'
2727
};
2828

2929
const html = `
@@ -56,13 +56,13 @@ const DemoRender = (): JSX.Element => {
5656
`;
5757

5858
//Switch between components when clicking on a link in the live render
59-
window.onmessage = event => {
59+
window.onmessage = (event) => {
6060
if (event.data === undefined) return;
61-
console.log('event: ', event);
61+
// console.log('event: ', event);
6262
const component: string = event.data?.split('/').at(-1);
6363
const componentId =
6464
component &&
65-
state.components?.find(el => {
65+
state.components?.find((el) => {
6666
return el.name.toLowerCase() === component.toLowerCase();
6767
}).id;
6868
componentId &&
@@ -168,10 +168,10 @@ const DemoRender = (): JSX.Element => {
168168

169169
let code = '';
170170
const currComponent = state.components.find(
171-
element => element.id === state.canvasFocus.componentId
171+
(element) => element.id === state.canvasFocus.componentId
172172
);
173173

174-
componentBuilder(currComponent.children).forEach(element => {
174+
componentBuilder(currComponent.children).forEach((element) => {
175175
try {
176176
code += ReactDOMServer.renderToString(element);
177177
} catch {

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

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
import React, { useContext } from 'react';
2-
import {
3-
ChildElement,
4-
HTMLType
5-
} from '../../interfaces/Interfaces';
1+
import React, { useContext } from 'react';
2+
import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
63
import { useDrag } from 'react-dnd';
74
import { ItemTypes } from '../../constants/ItemTypes';
85
import StateContext from '../../context/context';
96
import { combineStyles } from '../../helperFunctions/combineStyles';
107
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
11-
import Annotation from './Annotation'
8+
import Annotation from './Annotation';
129

1310
import { styleContext } from '../../containers/AppContainer';
1411

@@ -18,7 +15,7 @@ function DirectChildHTML({
1815
type,
1916
typeId,
2017
style,
21-
annotations,
18+
annotations
2219
}: ChildElement) {
2320
const [state, dispatch] = useContext(StateContext);
2421
const { isThemeLight } = useContext(styleContext);
@@ -36,7 +33,7 @@ function DirectChildHTML({
3633
newInstance: false,
3734
childId: childId,
3835
instanceType: type,
39-
instanceTypeId: typeId,
36+
instanceTypeId: typeId
4037
},
4138
collect: (monitor: any) => ({
4239
isDragging: !!monitor.isDragging()
@@ -85,18 +82,25 @@ function DirectChildHTML({
8582
// })
8683
// });
8784

88-
console.log(name[0].toLowerCase() + name.slice(1))
85+
// console.log(name[0].toLowerCase() + name.slice(1))
8986

9087
return (
91-
<div onClick={onClickHandler} style={combinedStyle} ref={drag} id={`canv${childId}`}>
88+
<div
89+
onClick={onClickHandler}
90+
style={combinedStyle}
91+
ref={drag}
92+
id={`canv${childId}`}
93+
>
9294
<span>
93-
<strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort + ' nonNestable'}</strong>
95+
<strong style={{ color: isThemeLight ? 'black' : 'white' }}>
96+
{HTMLType.placeHolderShort + ' nonNestable'}
97+
</strong>
9498
<Annotation
9599
id={childId}
96100
name={name[0].toLowerCase() + name.slice(1)}
97101
annotations={annotations}
98102
/>
99-
</span>
103+
</span>
100104
</div>
101105
);
102106
}

0 commit comments

Comments
 (0)