diff --git a/src/components/JSONViewer/FileChoosing.tsx b/src/components/JSONViewer/FileChoosing.tsx index f66ececc..623f5aea 100644 --- a/src/components/JSONViewer/FileChoosing.tsx +++ b/src/components/JSONViewer/FileChoosing.tsx @@ -108,7 +108,6 @@ const FileChoosing = ({ id: nanoid(), parentIds: [], key: filePath, - height: 22, failed: false, viewInstruction: '', simpleFields: [], diff --git a/src/components/JSONViewer/TreeLeaf.tsx b/src/components/JSONViewer/TreeLeaf.tsx index 0d8450ef..d943c9b5 100644 --- a/src/components/JSONViewer/TreeLeaf.tsx +++ b/src/components/JSONViewer/TreeLeaf.tsx @@ -74,15 +74,14 @@ const TreeLeaf = ({ treeNode, type }: { treeNode: TreeNode; type: PanelType }) = useEffect(() => { const observer = new ResizeObserver(entries => { - if (chunk) - JSONViewerStore.setChunkElement( - chunk, - treeNode.id, - entries[0].borderBoxSize?.length > 0 - ? entries[0].borderBoxSize[0].blockSize - : entries[0].contentRect.height, - type, - ); + JSONViewerStore.setChunkElement( + chunk, + treeNode.id, + entries[0].borderBoxSize?.length > 0 + ? entries[0].borderBoxSize[0].blockSize + : entries[0].contentRect.height, + type, + ); }); if (leafRef.current) { observer.observe(leafRef.current); @@ -92,6 +91,11 @@ const TreeLeaf = ({ treeNode, type }: { treeNode: TreeNode; type: PanelType }) = }; }, []); + useEffect(() => { + if (leafRef.current) + JSONViewerStore.setChunkElement(chunk, treeNode.id, leafRef.current.offsetHeight, type); + }, [leafRef.current]); + const toggleNode = () => { if (open) { setOpen(false); diff --git a/src/components/JSONViewer/TreeList.tsx b/src/components/JSONViewer/TreeList.tsx index 376dec70..d0dce495 100644 --- a/src/components/JSONViewer/TreeList.tsx +++ b/src/components/JSONViewer/TreeList.tsx @@ -22,7 +22,7 @@ const TreeList = ({ type }: { type: PanelType }) => { dataNode.id, )}` : 'lastElement' in dataNode - ? `${dataNode.chunk}-${dataNode.firstElement}-${dataNode.lastElement}` + ? `${dataNode.chunk}-${dataNode.firstElement}-${dataNode.lastElement}-${dataNode.height}` : dataNode.name }`, [], diff --git a/src/stores/JSONViewer/JSONViewerStore.ts b/src/stores/JSONViewer/JSONViewerStore.ts index aac4da55..bb1f9d1e 100644 --- a/src/stores/JSONViewer/JSONViewerStore.ts +++ b/src/stores/JSONViewer/JSONViewerStore.ts @@ -61,14 +61,14 @@ export class JSONViewerStore { () => this.openTreeNodes.default.values(), () => { this.initChunksData('default'); - this.initChunksData('compare'); + this.initChunksData('compare', false); }, ); reaction( () => this.openTreeNodes.compare.values(), () => { - this.initChunksData('default'); + this.initChunksData('default', false); this.initChunksData('compare'); }, ); @@ -341,8 +341,8 @@ export class JSONViewerStore { } } - @action initChunksData(type: PanelType) { - this.clearChunksData(type); + @action initChunksData(type: PanelType, clear = true) { + if (clear) this.clearChunksData(type); this.treeNodes[type] .filter(node => node.parentIds.every(parentId => this.openTreeNodes[type].has(parentId))) .forEach(node => { @@ -497,10 +497,15 @@ export class JSONViewerStore { ) .flatMap(node => [ ...this.chunksHeights.default.filter( - chunkData => chunkData.lastElement === '' && chunkData.firstElement === node.id, + chunkData => + chunkData.height > 0 && + chunkData.lastElement === '' && + chunkData.firstElement === node.id, ), node, - ...this.chunksHeights.default.filter(chunkData => chunkData.lastElement === node.id), + ...this.chunksHeights.default.filter( + chunkData => chunkData.height > 0 && chunkData.lastElement === node.id, + ), ]), ], compare: [ @@ -511,10 +516,15 @@ export class JSONViewerStore { ) .flatMap(node => [ ...this.chunksHeights.compare.filter( - chunkData => chunkData.lastElement === '' && chunkData.firstElement === node.id, + chunkData => + chunkData.height > 0 && + chunkData.lastElement === '' && + chunkData.firstElement === node.id, ), node, - ...this.chunksHeights.compare.filter(chunkData => chunkData.lastElement === node.id), + ...this.chunksHeights.compare.filter( + chunkData => chunkData.height > 0 && chunkData.lastElement === node.id, + ), ]), ], }; @@ -569,15 +579,8 @@ export class JSONViewerStore { ); for (let i = 0; i < newKeys.length; i++) { const lastExisting = - sameKeys - .concat(exclusiveKeys) - .sort() - .findLast(key => key <= newKeys[i]) || ''; - const firstExisting = - sameKeys - .concat(exclusiveKeys) - .sort() - .find(key => key >= newKeys[i]) || ''; + [...keys1].reverse().find(key => Number(key) <= Number(newKeys[i])) || ''; + const firstExisting = keys1.find(key => Number(key) >= Number(newKeys[i])) || ''; chunkFixed.push({ chunk: Number(newKeys[i]), firstElement: chunks1[firstExisting]?.firstElement || '',