Skip to content

Commit

Permalink
Add support for viewing nodes that are in the node tree from NodeCoun…
Browse files Browse the repository at this point in the history
…tByTypePage (#579)

Co-authored-by: Brian Leighty <[email protected]>
  • Loading branch information
triwav and triwav authored Jul 2, 2024
1 parent 973d345 commit 0bd91c0
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 22 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,56 @@
<script lang="ts">
import { ArrowLeft } from 'svelte-codicons';
import Chevron from '../../shared/Chevron.svelte';
import type { TreeNodeWithBase } from '../../shared/types';
export let showNodeCountByType: boolean;
export let nodeCountByType = {} as {
[key: string]: number;
};
export let flatTree = [] as TreeNodeWithBase[];
export let inspectNodeTreeNode: TreeNodeWithBase | null;
let nodesByType = {} as {
[key: string]: TreeNodeWithBase[];
};
let nodeCountByTypeNotInTree = {} as {
[key: string]: number;
};
function close() {
showNodeCountByType = false;
}
function toggleShowNodes() {
const nodeSubtype = this.id;
if (nodesByType[nodeSubtype]) {
nodesByType[nodeSubtype] = null;
nodeCountByTypeNotInTree[nodeSubtype] = 0;
} else {
const nodes = [];
for (const treeNode of flatTree) {
// debugger;
if (treeNode.subtype === nodeSubtype) {
nodes.push(treeNode);
}
}
nodeCountByTypeNotInTree[nodeSubtype] = nodeCountByType[nodeSubtype] - nodes.length;;
nodesByType[nodeSubtype] = nodes;
}
}
function onNodeClicked() {
const nodeRef = this.id;
inspectNodeTreeNode = flatTree[nodeRef];
}
function onKeydown(event) {
// Don't handle anything if we're not the top detail view
if (inspectNodeTreeNode) {
return;
}
const key = event.key;
switch (key) {
Expand All @@ -25,6 +68,7 @@
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
}
Expand All @@ -49,38 +93,51 @@
z-index: -1;
}
#closeButton {
font-size: small;
float: right;
cursor: pointer;
padding: 3px 20px 0 0;
}
ul {
#nodesOfTypeContainer {
padding: var(--headerHeight) 0 0;
margin: 5px;
list-style: none;
}
li {
padding: 0 5px 10px;
.nodeOfType {
display: inline-block;
margin: 2px 5px 10px;
}
.nodesOfTypeItem {
cursor: pointer;
padding: 5px;
}
</style>

<svelte:window on:keydown={onKeydown} />
<div id="container">
<div id="background" />
<div id="header">
Node Count By Type
<div id="closeButton" on:click={close}>X</div>
<section style="display: flex; flex-direction:row">
<vscode-button appearance="icon" title="Back" on:click={close}>
<ArrowLeft />
</vscode-button>

Node Count By Type
</section>
</div>

<ul>
<div id="nodesOfTypeContainer">
{#each Object.entries(nodeCountByType) as [key, value]}
<li>
<strong>{key}:</strong>
{value}
</li>
<div id={key} class="nodesOfTypeItem" on:click={toggleShowNodes}>
<Chevron expanded={!!nodesByType[key] || !!nodeCountByTypeNotInTree[key]} />
<div>{key} ({value})</div>
<div style="clear: both" />
</div>

{#each nodesByType[key] ?? [] as node, i}
<vscode-button id={node.ref} class="nodeOfType" appearance="secondary" title={node.keyPath} on:click={onNodeClicked}>{node.id ? `#${node.id}` : `${i}`}</vscode-button>
{/each}

{#if nodeCountByTypeNotInTree[key] > 0}
<div class="nodeOfType">{`${nodeCountByTypeNotInTree[key]} node(s) not in scene tree`}</div>
{/if}
<div style="clear: both" />
{/each}
</ul>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
let showNodeCountByType = false;
let nodeCountByType = {} as Record<string, number>;
let rootTree = [] as TreeNodeWithBase[];
let flatTree = [] as TreeNodeWithBase[];
const globalNode: TreeNodeWithBase = {
id: '',
Expand All @@ -45,13 +46,14 @@
let containerWidth = -1
let shouldDisplaySideBySide = false;
$:{
shouldDisplaySideBySide = (containerWidth > 600);
shouldDisplaySideBySide = (containerWidth > 600) && !showNodeCountByType;
}
intermediary.observeEvent(ViewProviderEvent.onStoredNodeReferencesUpdated, async () => {
loading = true;
const result = await intermediary.getStoredNodeReferences();
rootTree = result.rootTree as TreeNodeWithBase[];
flatTree = result.flatTree as TreeNodeWithBase[];
//insert the global node to the top of the rootNodes list
rootTree.unshift(globalNode);
Expand Down Expand Up @@ -80,6 +82,7 @@
});
utils.debugLog(`Store node references took ${result.timeTaken}ms`);
rootTree = result.rootTree as TreeNodeWithBase[];
flatTree = result.flatTree as TreeNodeWithBase[];
//insert the global node to the top of the rootNodes list
rootTree.unshift(globalNode);
Expand Down Expand Up @@ -267,7 +270,9 @@
<SettingsPage bind:showSettingsPage />
{/if}
{#if showNodeCountByType}
<NodeCountByTypePage bind:showNodeCountByType bind:nodeCountByType />
<span class:hide={inspectNodeTreeNode}>
<NodeCountByTypePage bind:showNodeCountByType bind:nodeCountByType bind:flatTree bind:inspectNodeTreeNode />
</span>
{/if}
{#if loading}
<Loader />
Expand Down Expand Up @@ -298,7 +303,7 @@
<OdcSetManualIpAddress />
</div>
{:else}
<div id="header" class={inspectNodeTreeNode && !shouldDisplaySideBySide ? 'hide' : ''}>
<div id="header" class:hide={inspectNodeTreeNode && !shouldDisplaySideBySide}>
<div id="drop-shadow-blocker" />
<span
class="icon-button"
Expand Down

0 comments on commit 0bd91c0

Please sign in to comment.