Skip to content

Commit a14137c

Browse files
aw2934aw2934
committed
tree chart no longer shows separators for components other than index
1 parent c9a6525 commit a14137c

File tree

3 files changed

+62
-66
lines changed

3 files changed

+62
-66
lines changed

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ function DirectChildHTMLNestable({
3131
newInstance: false,
3232
childId: childId,
3333
instanceType: type,
34-
instanceTypeId: typeId,
34+
instanceTypeId: typeId
3535
},
3636
canDrag: HTMLType.id !== 1000, // dragging not permitted if element is separator
3737
collect: (monitor: any) => {
38-
return ({
39-
isDragging: !!monitor.isDragging()
40-
})
41-
}
38+
return {
39+
isDragging: !!monitor.isDragging()
40+
};
41+
}
4242
});
4343

4444
// both useDrop and useDrag used here to allow canvas components to be both a drop target and drag source
@@ -73,12 +73,12 @@ function DirectChildHTMLNestable({
7373
});
7474
}
7575
},
76-
76+
7777
collect: (monitor: any) => {
78-
79-
return ({
80-
isOver: !!monitor.isOver({ shallow: true })
81-
})}
78+
return {
79+
isOver: !!monitor.isOver({ shallow: true })
80+
};
81+
}
8282
});
8383

8484
const changeFocus = (componentId: number, childId: number | null) => {
@@ -104,7 +104,7 @@ function DirectChildHTMLNestable({
104104
};
105105

106106
defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : 'white';
107-
107+
108108
const combinedStyle = combineStyles(
109109
combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
110110
interactiveStyle

‎app/src/reducers/componentReducer.ts

Lines changed: 47 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import {
32
State,
43
Action,
@@ -8,15 +7,9 @@ import {
87
} from '../interfaces/Interfaces';
98
import initialState from '../context/initialState';
109
import generateCode from '../helperFunctions/generateCode';
11-
import cloneDeep from '../helperFunctions/cloneDeep';
12-
import { isValueObject } from 'immutable';
13-
import Canvas from '../components/main/Canvas';
14-
import { LensTwoTone } from '@material-ui/icons';
10+
import manageSeparators from '../helperFunctions/manageSeparators';
1511

1612
let separator = initialState.HTMLTypes[1];
17-
// const manageSeparator = (arr) => {
18-
// //input: components children array
19-
2013

2114
// }
2215
const reducer = (state: State, action: Action) => {
@@ -338,62 +331,62 @@ const reducer = (state: State, action: Action) => {
338331

339332
// components[0].children = components[0].children.map(child => (child.name === 'separator' && child.children.length) ? child.children[1] : child)
340333

341-
const mergeSeparator = (arr) => {
342-
return arr.map((child) => {
343-
if (child.name === 'div' && child.children.length) {
344-
const divContents = mergeSeparator(child.children);
345-
return { ...child, children: divContents }
346-
}
347-
else if (child.name === 'separator' && child.children.length) {
348-
return child.children[1];
349-
}
350-
else return child;
351-
});
352-
};
334+
// const mergeSeparator = (arr) => {
335+
// return arr.map((child) => {
336+
// if (child.name === 'div' && child.children.length) {
337+
// const divContents = mergeSeparator(child.children);
338+
// return { ...child, children: divContents }
339+
// }
340+
// else if (child.name === 'separator' && child.children.length) {
341+
// return child.children[1];
342+
// }
343+
// else return child;
344+
// });
345+
// };
353346

354-
const handleSeparators = (arr) => {
347+
// const handleSeparators = (arr) => {
355348

356-
for (let index = 0; index < arr.length; index++) {
349+
// for (let index = 0; index < arr.length; index++) {
357350

358-
if (arr[index].name === 'separator' && arr[index + 1].name === 'separator') {
351+
// if (arr[index].name === 'separator' && arr[index + 1].name === 'separator') {
359352

360-
arr.splice(index, 1); // removes extra separator from array
361-
}
362-
// check for duplicaed separator at the end of array and remove it if separator is at the last index
363-
if (arr[arr.length-1].name === 'separator') arr.splice(arr.length-1, 1);
353+
// arr.splice(index, 1); // removes extra separator from array
354+
// }
355+
// // check for duplicaed separator at the end of array and remove it if separator is at the last index
356+
// if (arr[arr.length-1].name === 'separator') arr.splice(arr.length-1, 1);
364357

365-
// check for missing separators
366-
if (arr[index].name !== 'separator' && (index === 0|| arr[index - 1].name !== 'separator')) {
358+
// // check for missing separators
359+
// if (arr[index].name !== 'separator' && (index === 0|| arr[index - 1].name !== 'separator')) {
367360

368-
// initialize topSeparator inside the if condition so that every time this condition evaluated to true, a new topSeparator with incremented id will be created
369-
const topSeparator: ChildElement = {
370-
type: 'HTML Element',
371-
typeId: separator.id,
372-
name: 'separator',
373-
childId: nextTopSeparatorId,
374-
style: separator.style,
375-
children: []
376-
};
377-
// add a topSeparator before the element that does not have one
378-
arr.splice(index, 0, topSeparator)
379-
// update this value in state
380-
nextTopSeparatorId +=1;
381-
}
382-
// check is length is > 0 or it is a nested element
383-
if (arr[index].children.length) {
384-
// recursive call if children array
385-
handleSeparators(arr[index].children)
386-
}
387-
}
388-
return arr;
389-
}
361+
// // initialize topSeparator inside the if condition so that every time this condition evaluated to true, a new topSeparator with incremented id will be created
362+
// const topSeparator: ChildElement = {
363+
// type: 'HTML Element',
364+
// typeId: separator.id,
365+
// name: 'separator',
366+
// childId: nextTopSeparatorId,
367+
// style: separator.style,
368+
// children: []
369+
// };
370+
// // add a topSeparator before the element that does not have one
371+
// arr.splice(index, 0, topSeparator)
372+
// // update this value in state
373+
// nextTopSeparatorId +=1;
374+
// }
375+
// // check is length is > 0 or it is a nested element
376+
// if (arr[index].children.length) {
377+
// // recursive call if children array
378+
// handleSeparators(arr[index].children)
379+
// }
380+
// }
381+
// return arr;
382+
// }
390383

391384
let addChildArray = components[0].children;
392-
addChildArray = mergeSeparator(addChildArray);
393-
if (directParent && directParent.name === 'separator') handleSeparators(addChildArray)
385+
addChildArray = manageSeparators.mergeSeparator(addChildArray);
386+
if (directParent && directParent.name === 'separator') nextTopSeparatorId = manageSeparators.handleSeparators(addChildArray);
394387
components[0].children = addChildArray;
395388

396-
return { ...state, components, nextChildId, canvasFocus, nextTopSeparatorId};
389+
return { ...state, components, nextChildId, canvasFocus, nextTopSeparatorId };
397390
}
398391
// move an instance from one position in a component to another position in a component
399392
case 'CHANGE POSITION': {

‎app/src/tree/TreeChart.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,11 @@ function TreeChart({ data }) {
4242

4343
// create a deep clone of data to avoid mutating the actual children array in removing separators
4444
const dataDeepClone = cloneDeep(data);
45+
dataDeepClone.forEach((component) => {
46+
removeSeparators(component.children);
47+
});
4548

46-
removeSeparators(dataDeepClone[0].children);
49+
// removeSeparators(dataDeepClone[0].children);
4750

4851
// will be called initially and on every data change
4952
useEffect(() => {

0 commit comments

Comments
 (0)