minop1205
commented
1 year ago @developergunny Thank you for your report. It would be helpful if you could provide me with the node data so I can check it.
Closed developergunny closed 1 year ago
minop1205
commented
1 year ago @developergunny Thank you for your report. It would be helpful if you could provide me with the node data so I can check it.
developergunny
commented
1 year ago @minop1205
Here it is. JSON is long,I will send it as a text file.
DndTree.js
<Box className={treeviewStyles.wrapper} sx={{ p: `0px 0px 20px ${isComposite ? 0 : 10}px` }}>
<Tree
ref={ref}
tree={treeDatas}
rootId="root"
classes={{
root: treeviewStyles.treeRoot,
placeholder: treeviewStyles.placeholder,
dropTarget: treeviewStyles.dropTarget,
listItem: treeviewStyles.listItem,
}}
extraAcceptTypes={[NativeTypes.TEXT]}
placeholderRender={(node, { depth }) => <Placeholder node={node} depth={depth} />}
render={(node, { depth, isOpen, isDropTarget }) => {
return (
<Node
getPipeHeight={getPipeHeight}
node={node}
depth={depth}
isOpen={isOpen}
onClick={() => {
if (node.droppable) {
toggle(node?.id);
}
}}
isDropTarget={isDropTarget}
treeData={treeDatas}
/>
);
}}
dragPreviewRender={(monitorProps) => {
return <DragPreview monitorProps={monitorProps} />;
}}
canDrop={handleCanDrop}
onDrop={handleDrop}
enableAnimateExpand
sort={false}
insertDroppableFirst={false}
dropTargetOffset={5}
/>
</Box>Node.js
<Box
className={`${treeviewStyles.nodeWrapper} tree-node ${
node.droppable && isDropTarget ? treeviewStyles.dropTarget : ''
}`}
sx={{
marginInlineStart: `${indent}px`,
paddingInlineStart: () => {
return !node.droppable ? '26px !important' : '0px';
},
}}
onClick={() => handleSelectedNode(node)}
>
{node.droppable && (
<Box
className={`${treeviewStyles.expandIconWrapper} ${
isOpen ? treeviewStyles.open : treeviewStyles.close
}`}
onClick={handleToggle}
>
<CardMedia component="img" image={RightArrowIcon} sx={{ width: 24, height: 24 }} />
</Box>
)}
<NodeIcon node={node} />
{/* node.droppable ? (isOpen ? 'folder-open' : 'folder') : null */}
<Box
className={treeviewStyles.pipeX}
sx={{
width: () => {
if (depth > 0) {
if (node.droppable) {
return `${TREE_X_OFFSET - 9}px`;
} else {
return `${TREE_X_OFFSET + 3}px`;
}
} else {
return `0px`;
}
},
}}
/>
{getDescendants(treeData, node.parent)[0].id === node.id && (
<Box
className={treeviewStyles.pipeY}
style={{
height: Math.max(0, getPipeHeight(node.parent, treeData) - 16),
}}
/>
)}
<Box className={treeviewStyles.labelGridItem}>{node.text}</Box>
</Box>Sorry for the inconvenience.
This is a problem caused by duplicate node ids.
I solved this.
Close the issue.
minop1205
commented
1 year ago Yes, I have. I just checked too. I found a circular reference with the following IDs
I'm glad you solved it.
'Maximum call stack size exceeded' error when trying to add a small number of nodes
I am creating a tree by transforming dynamic json data into node form. In fact, it works well when transformed and rendered with about 200 nodes, but an error occurs in the tree library after binding 38 node data.
Node data can be provided if desired.