Skip to content

Commit 2bdb1aa

Browse files
jonocrjonocr
authored
Merge pull request #27 from MadinventorZero/annobug2
Annobug2 + ComponentNestingBug
2 parents 8250068 + 709ee99 commit 2bdb1aa

File tree

8 files changed

+72
-159
lines changed

8 files changed

+72
-159
lines changed

‎app/src/components/App.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,10 @@ export const App = (): JSX.Element => {
6060

6161
// Caret Start Updated save cycle
6262
useEffect(() => {
63-
console.log('Legacy state', state);
6463
// provide config properties to legacy projects so new edits can be auto saved
6564
if (state.config === undefined) {
6665
state.config = {saveFlag:true, saveTimer:false};
6766
};
68-
console.log('Updated state for legacy projects', state);
6967
// New project save configuration to optimize server load and minimize Ajax requests
7068
if (state.config.saveFlag) {
7169
state.config.saveFlag = false;

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

Lines changed: 2 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import { useDrag } from 'react-dnd';
88
import { ItemTypes } from '../../constants/ItemTypes';
99
import StateContext from '../../context/context';
1010
import { combineStyles } from '../../helperFunctions/combineStyles';
11-
import IndirectChild from './IndirectChild';
1211
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
12+
import renderChildren from '../../helperFunctions/renderChildren'
1313

1414
function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
1515
const [state, dispatch] = useContext(StateContext);
@@ -64,115 +64,13 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
6464
interactiveStyle
6565
);
6666

67-
// helper function to render children of direct child components
68-
// all children of direct child components will be indirect components
69-
// indirect child components are not interactive with the exception of route links which, when clicked, will change the canvas focus
70-
const renderIndirectChildren = (
71-
referencedComponent: Component | ChildElement
72-
) => {
73-
// iterate through all children of referenced
74-
return referencedComponent.children.map(child => {
75-
if (child.type === 'Component') {
76-
// If indirect child of referenced component is a component, find the top level component referenced by the child
77-
const childReferencedComponent: Component = state.components.find(
78-
(elem: Component) => elem.id === child.typeId
79-
);
80-
// combine the styles of the child with the reference component but give higher priority to the child's styles
81-
82-
const combinedStyle = combineStyles(
83-
childReferencedComponent.style,
84-
child.style
85-
);
86-
87-
// render an IndirectChild component, and also call renderIndirectChildren recursively to render any of the child Component's children
88-
return (
89-
<IndirectChild
90-
// combine styles of instance and referenced component. instance styles have higher priority
91-
key={
92-
'indChild' + child.childId.toString() + child.typeId.toString()
93-
}
94-
style={combinedStyle}
95-
placeHolder=""
96-
linkId={null}
97-
>
98-
{renderIndirectChildren(childReferencedComponent)}
99-
</IndirectChild>
100-
);
101-
} else if (child.type === 'HTML Element') {
102-
// if indirect child is an HTML element, render an IndirectChild component with no children
103-
// if the HTML element has children, then also render its children
104-
// get the default style/placeholder value for that type of HTML element
105-
// combine the default style of that HTML element and combine in with the custom styles applied to that element
106-
const HTMLType: HTMLType = state.HTMLTypes.find(
107-
(type: HTMLType) => type.id === child.typeId
108-
);
109-
const HTMLDefaultStyle = HTMLType.style;
110-
const HTMLDefaultPlaceholder = HTMLType.placeHolderShort;
111-
const combinedStyle = combineStyles(HTMLDefaultStyle, child.style);
112-
return (
113-
<React.Fragment
114-
key={
115-
'indChildFrag' +
116-
child.childId.toString() +
117-
child.typeId.toString()
118-
}
119-
>
120-
{child.children.length === 0 ? (
121-
<IndirectChild
122-
style={combinedStyle}
123-
placeHolder={HTMLDefaultPlaceholder}
124-
linkId={null}
125-
key={
126-
'indChildHTML' +
127-
child.childId.toString() +
128-
child.typeId.toString()
129-
}
130-
>
131-
{''}
132-
</IndirectChild>
133-
) : (
134-
<IndirectChild
135-
style={combinedStyle}
136-
placeHolder={HTMLDefaultPlaceholder}
137-
linkId={null}
138-
key={
139-
'indChildNest' +
140-
child.childId.toString() +
141-
child.typeId.toString()
142-
}
143-
>
144-
{renderIndirectChildren(child)}
145-
</IndirectChild>
146-
)}
147-
</React.Fragment>
148-
);
149-
} else if (child.type === 'Route Link') {
150-
// Render a next.js route link
151-
// pass the component id of the component referenced in the link as a prop
152-
// IndirectChild will render the referenced component name as a clickable link
153-
return (
154-
<IndirectChild
155-
key={
156-
'RouteLink' + child.childId.toString() + child.typeId.toString()
157-
}
158-
style={combinedStyle}
159-
placeHolder=""
160-
linkId={child.typeId}
161-
>
162-
{''}
163-
</IndirectChild>
164-
);
165-
}
166-
});
167-
};
16867
return (
16968
<div
17069
onClick={onClickHandler}
171-
// key={'childComp' + childId}
17270
style={combinedStyle}
17371
ref={drag}
17472
>
175-
{renderIndirectChildren(referencedComponent)}
73+
{renderChildren(referencedComponent.children)}
17674
</div>
17775
);
17876
}

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import renderChildren from '../../helperFunctions/renderChildren';
99
// Caret
1010
import Annotation from './Annotation'
1111
import validateNewParent from '../../helperFunctions/changePositionValidation'
12+
import componentNest from '../../helperFunctions/componentNestValidation'
1213

1314
function DirectChildHTMLNestable({
1415
childId,
@@ -70,14 +71,16 @@ const snapShotFunc = () => {
7071
// updates state with new instance
7172
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
7273
if (item.newInstance) {
73-
dispatch({
74-
type: 'ADD CHILD',
75-
payload: {
76-
type: item.instanceType,
77-
typeId: item.instanceTypeId,
78-
childId: childId,
79-
}
80-
});
74+
if ((item.instanceType === 'Component' && componentNest(state.components[item.instanceTypeId - 1].children, childId)) || item.instanceType !== 'Component') {
75+
dispatch({
76+
type: 'ADD CHILD',
77+
payload: {
78+
type: item.instanceType,
79+
typeId: item.instanceTypeId,
80+
childId: childId,
81+
}
82+
});
83+
}
8184
}
8285
// if item is not a new instance, change position of element dragged inside div so that the div is the new parent
8386
else {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,6 @@ function IndirectChild({ style, children, placeHolder, linkId, childId, name, an
2828

2929
return (
3030
<div style={combinedStyle}>
31-
{linkId ? (
32-
<div onClick={onClickHandlerRoute}>{linkName}</div>
33-
) : (
34-
placeHolder
35-
)}
36-
{children}
3731
{/* Caret start */}
3832
{` ( ${childId} )`}
3933
<Annotation
@@ -42,6 +36,12 @@ function IndirectChild({ style, children, placeHolder, linkId, childId, name, an
4236
annotations={annotations}
4337
/>
4438
{/* Caret end */}
39+
{linkId ? (
40+
<div onClick={onClickHandlerRoute}>{linkName}</div>
41+
) : (
42+
placeHolder
43+
)}
44+
{children}
4545
</div>
4646
);
4747
}

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
88
import renderChildren from '../../helperFunctions/renderChildren';
99
import validateNewParent from '../../helperFunctions/changePositionValidation'
10+
import componentNest from '../../helperFunctions/componentNestValidation'
1011

1112
function DirectChildHTMLNestable({
1213
childId,
@@ -54,14 +55,16 @@ function DirectChildHTMLNestable({
5455
// updates state with new instance
5556
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
5657
if (item.newInstance) {
57-
dispatch({
58-
type: 'ADD CHILD',
59-
payload: {
60-
type: item.instanceType,
61-
typeId: item.instanceTypeId,
62-
childId: childId
63-
}
64-
});
58+
if ((item.instanceType === 'Component' && componentNest(state.components[item.instanceTypeId - 1].children, childId)) || item.instanceType !== 'Component') {
59+
dispatch({
60+
type: 'ADD CHILD',
61+
payload: {
62+
type: item.instanceType,
63+
typeId: item.instanceTypeId,
64+
childId: childId,
65+
}
66+
});
67+
}
6568
}
6669
// if item is not a new instance, change position of element dragged inside separator so that separator is new parent (until replacement)
6770
else {

0 commit comments

Comments
 (0)