e.stopPropagation()}
+ onkeydown={(e) => e.stopPropagation()}
+ role="menu"
+ tabindex="-1"
+ >
+ {#each options as { value: val, label }}
+ {@const isSelected = val === value}
+
select(val)}
+ onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && select(val)}
+ >
+ {#if value !== null}
+ ✓
+ {/if}
+ {label}
+
+ {/each}
+
diff --git a/webviews/viewer/src/components/viewer/ZoomWidget.svelte b/webviews/viewer/src/components/viewer/ZoomWidget.svelte
new file mode 100644
index 0000000..0206a30
--- /dev/null
+++ b/webviews/viewer/src/components/viewer/ZoomWidget.svelte
@@ -0,0 +1,55 @@
+
+
+
diff --git a/webviews/viewer/src/lib/Controller.ts b/webviews/viewer/src/lib/Controller.ts
index fe7c124..22daf27 100644
--- a/webviews/viewer/src/lib/Controller.ts
+++ b/webviews/viewer/src/lib/Controller.ts
@@ -2,7 +2,7 @@ import { VtkApp } from './core/VtkApp';
import { CreateGroups } from './data/CreateGroups';
import { VisibilityManager } from './commands/VisibilityManager';
import { CameraManager } from './interaction/CameraManager';
-import { groupHierarchy as groupHierarchyStore } from './state';
+import { groupHierarchy as groupHierarchyStore, loadingProgress, loadingMessage } from './state';
import type { Group } from './data/Group';
export class Controller {
@@ -33,20 +33,41 @@ export class Controller {
return this._vsCodeApi;
}
- loadFiles(fileContexts: string[], fileNames: string[]): void {
+ async loadFiles(fileContexts: string[], fileNames: string[]): Promise
{
+ if (this._groups) {
+ return;
+ }
+ loadingProgress.set(0);
+ loadingMessage.set('');
const lfr = new CreateGroups(fileContexts, fileNames);
- lfr.do();
+ await lfr.do(
+ (progress) => loadingProgress.set(progress),
+ (message) => loadingMessage.set(message)
+ );
this._vsCodeApi.postMessage({
type: 'groups',
groupList: this.getGroupNames(),
+ objectList: this.getObjectNames(),
});
}
saveGroups(groups: Record, groupHierarchy: Record): void {
this._groups = groups;
- this._groupHierarchy = groupHierarchy;
- groupHierarchyStore.set(groupHierarchy);
+ const naturalSort = (a: string, b: string) =>
+ a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+
+ const sortedHierarchy: Record = {};
+ for (const key of Object.keys(groupHierarchy).sort(naturalSort)) {
+ sortedHierarchy[key] = {
+ ...groupHierarchy[key],
+ faces: [...groupHierarchy[key].faces].sort(naturalSort),
+ nodes: [...groupHierarchy[key].nodes].sort(naturalSort),
+ };
+ }
+
+ this._groupHierarchy = sortedHierarchy;
+ groupHierarchyStore.set(sortedHierarchy);
this.initManagers();
@@ -75,4 +96,11 @@ export class Controller {
}
return Object.keys(this._groups).filter((key) => key.includes('::'));
}
+
+ getObjectNames(): string[] {
+ if (!this._groupHierarchy) {
+ return [];
+ }
+ return Object.keys(this._groupHierarchy);
+ }
}
diff --git a/webviews/viewer/src/lib/commands/VisibilityManager.ts b/webviews/viewer/src/lib/commands/VisibilityManager.ts
index afb7f3d..39c0cb9 100644
--- a/webviews/viewer/src/lib/commands/VisibilityManager.ts
+++ b/webviews/viewer/src/lib/commands/VisibilityManager.ts
@@ -156,6 +156,19 @@ export class VisibilityManager {
VtkApp.Instance.getRenderWindow().render();
}
+ showOnlyObjects(objects: string[]): void {
+ const objectSet = new Set(objects);
+ for (const key in this.hiddenObjects) {
+ const shouldBeVisible = objects.length === 0 || objectSet.has(key);
+ const isCurrentlyHidden = this.hiddenObjects[key];
+ if (shouldBeVisible && isCurrentlyHidden) {
+ this.toggleObjectVisibility(key);
+ } else if (!shouldBeVisible && !isCurrentlyHidden) {
+ this.toggleObjectVisibility(key);
+ }
+ }
+ }
+
hideAllOthers(object: string): void {
for (const key in this.hiddenObjects) {
if (key === object) continue;
diff --git a/webviews/viewer/src/lib/data/CreateGroups.ts b/webviews/viewer/src/lib/data/CreateGroups.ts
index 9b51c7c..a30e108 100644
--- a/webviews/viewer/src/lib/data/CreateGroups.ts
+++ b/webviews/viewer/src/lib/data/CreateGroups.ts
@@ -16,8 +16,16 @@ export class CreateGroups {
this.fileNames = fileNames;
}
- do(): void {
- const result = ObjLoader.loadFiles(this.fileContexts, this.fileNames);
+ async do(
+ onProgress: (progress: number) => void,
+ onMessage: (message: string) => void
+ ): Promise {
+ const result = await ObjLoader.loadFiles(
+ this.fileContexts,
+ this.fileNames,
+ onProgress,
+ onMessage
+ );
const post = (text: string) => {
Controller.Instance.getVSCodeAPI().postMessage({ type: 'debugPanel', text });
};
@@ -40,7 +48,12 @@ export class CreateGroups {
const faceActorCreator = new FaceActorCreator(vertices, cells, cellIndexToGroup);
const nodeActorCreator = new NodeActorCreator(vertices, nodes, nodeIndexToGroup);
- for (const fileGroup in groupHierarchy) {
+ const groupKeys = Object.keys(groupHierarchy);
+ const yield_ = () => new Promise((r) => setTimeout(r, 0));
+
+ onMessage('Building scene...');
+ for (let gi = 0; gi < groupKeys.length; gi++) {
+ const fileGroup = groupKeys[gi];
const groupId = faceGroups.indexOf(fileGroup);
const _oc = GlobalSettings.Instance.objectColors;
@@ -104,6 +117,9 @@ export class CreateGroups {
);
this.groups[`${fileGroup}::${nodeGroup}::node`] = subGroup;
}
+
+ onProgress(0.9 + ((gi + 1) / groupKeys.length) * 0.1);
+ await yield_();
}
VtkApp.Instance.getRenderer().resetCamera();
diff --git a/webviews/viewer/src/lib/data/ObjLoader.ts b/webviews/viewer/src/lib/data/ObjLoader.ts
index ee3d42f..866fb4b 100644
--- a/webviews/viewer/src/lib/data/ObjLoader.ts
+++ b/webviews/viewer/src/lib/data/ObjLoader.ts
@@ -11,8 +11,15 @@ export interface ObjLoaderResult {
groupHierarchy: Record;
}
+const YIELD_EVERY_LINES = 5_000;
+
export class ObjLoader {
- static loadFiles(fileContexts: string[], fileNames: string[]): ObjLoaderResult {
+ static async loadFiles(
+ fileContexts: string[],
+ fileNames: string[],
+ onProgress: (progress: number) => void,
+ onMessage: (message: string) => void
+ ): Promise {
const vertices: { x: number; y: number; z: number }[] = [];
const cells: number[][] = [];
const cellIndexToGroup: number[] = [];
@@ -26,6 +33,8 @@ export class ObjLoader {
let groupId = -1;
let nodeGroupId = -1;
+ const yield_ = () => new Promise((r) => setTimeout(r, 0));
+
for (let i = 0; i < fileContexts.length; i++) {
try {
groupId++;
@@ -35,9 +44,17 @@ export class ObjLoader {
faceGroups.push(skinName);
nbVertices = vertices.length;
+ onMessage(`Parsing ${fileNames[i]}...`);
const lines = fileContexts[i].split('\n').map((l) => l.replace('\r', ''));
+ const totalLines = lines.length;
+
+ for (let lineIdx = 0; lineIdx < totalLines; lineIdx++) {
+ if (lineIdx % YIELD_EVERY_LINES === 0 && lineIdx > 0) {
+ const fileProgress = (i + lineIdx / totalLines) / fileContexts.length;
+ onProgress(fileProgress * 0.9);
+ await yield_();
+ }
- for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
const line = lines[lineIdx];
const ss = line.split(' ').filter((p) => p.length !== 0);
if (ss.length === 0) {
@@ -84,6 +101,9 @@ export class ObjLoader {
}
}
}
+
+ onProgress(((i + 1) / fileContexts.length) * 0.9);
+ await yield_();
} catch (fileError: any) {
Controller.Instance.getVSCodeAPI().postMessage({
type: 'debugPanel',
diff --git a/webviews/viewer/src/lib/state.ts b/webviews/viewer/src/lib/state.ts
index f1cc5f5..ce95f2b 100644
--- a/webviews/viewer/src/lib/state.ts
+++ b/webviews/viewer/src/lib/state.ts
@@ -1,4 +1,6 @@
import { writable } from 'svelte/store';
+import { tweened } from 'svelte/motion';
+import { cubicOut } from 'svelte/easing';
export type GroupHierarchy = Record;
export type HighlightedGroups = Map;
@@ -29,3 +31,6 @@ export const settings = writable({
// Map> — groups NOT shown in sidebar (hidden)
export const sidebarHiddenGroups = writable>>(new Map());
+
+export const loadingProgress = tweened(0, { duration: 300, easing: cubicOut });
+export const loadingMessage = writable('');
diff --git a/webviews/viewer/src/lib/ui/CustomDropdown.ts b/webviews/viewer/src/lib/ui/CustomDropdown.ts
deleted file mode 100644
index 5134a2c..0000000
--- a/webviews/viewer/src/lib/ui/CustomDropdown.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-export interface DropdownOption {
- value: string;
- label: string;
-}
-
-export class CustomDropdown {
- private _trigger: HTMLElement;
- private _options: DropdownOption[];
- private _onSelect: (value: string) => void;
- private _getValue: (() => string | null) | null;
- private _align: 'left' | 'right';
- private _panel: HTMLElement | null = null;
-
- constructor(
- trigger: HTMLElement,
- options: DropdownOption[],
- onSelect: (value: string) => void,
- getValue: (() => string | null) | null = null,
- opts: { align?: 'left' | 'right' } = {}
- ) {
- this._trigger = trigger;
- this._options = options;
- this._onSelect = onSelect;
- this._getValue = getValue;
- this._align = opts.align ?? 'left';
-
- trigger.addEventListener('click', (e) => {
- e.stopPropagation();
- this._panel ? this.close() : this._open();
- });
- document.addEventListener('click', () => this.close());
- }
-
- private _open(): void {
- const currentValue = this._getValue?.();
- const showCheckmarks = this._getValue != null;
-
- const panel = document.createElement('div');
- panel.style.cssText = `
- position: fixed;
- z-index: 9999;
- background: var(--ui-popup-bg);
- border: 1px solid var(--ui-border);
- border-radius: 4px;
- box-shadow: 0 4px 16px rgba(0,0,0,0.25);
- padding: 3px 0;
- overflow: hidden;
- `;
- panel.addEventListener('click', (e) => e.stopPropagation());
-
- for (const { value, label } of this._options) {
- const isSelected = value === currentValue;
- const item = document.createElement('div');
- item.style.cssText = `
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 5px 10px;
- font-size: 0.75rem;
- cursor: pointer;
- color: var(--ui-fg);
- white-space: nowrap;
- ${this._align === 'right' ? 'justify-content: flex-end;' : ''}
- ${isSelected ? 'font-weight: 600;' : ''}
- `;
-
- if (showCheckmarks) {
- const check = document.createElement('span');
- check.textContent = '✓';
- check.style.cssText = `font-size: 0.6rem; flex-shrink: 0; width: 10px; opacity: ${isSelected ? 1 : 0};`;
- item.appendChild(check);
- }
-
- const labelEl = document.createElement('span');
- labelEl.textContent = label;
- item.appendChild(labelEl);
-
- item.addEventListener('mouseenter', () => {
- item.style.background = 'var(--ui-element-bg-hover)';
- });
- item.addEventListener('mouseleave', () => {
- item.style.background = '';
- });
- item.addEventListener('click', () => {
- this._onSelect(value);
- this.close();
- });
-
- panel.appendChild(item);
- }
-
- document.body.appendChild(panel);
-
- const rect = this._trigger.getBoundingClientRect();
- const panelW = Math.max(panel.offsetWidth, rect.width);
- const panelH = panel.offsetHeight;
- panel.style.minWidth = `${panelW}px`;
-
- let left = rect.left + rect.width / 2 - panelW / 2;
- left = Math.max(4, Math.min(left, window.innerWidth - panelW - 4));
- panel.style.left = `${left}px`;
-
- const openUp = window.innerHeight - rect.bottom < panelH + 8;
- panel.style.top = openUp ? `${rect.top - panelH - 4}px` : `${rect.bottom + 4}px`;
-
- this._panel = panel;
- }
-
- close(): void {
- this._panel?.remove();
- this._panel = null;
- }
-}
diff --git a/webviews/viewer/src/main.ts b/webviews/viewer/src/main.ts
index 08f6f9e..b7fd10f 100644
--- a/webviews/viewer/src/main.ts
+++ b/webviews/viewer/src/main.ts
@@ -1,5 +1,5 @@
import { mount } from 'svelte';
-import App from './components/App.svelte';
+import App from './components/layout/App.svelte';
import { Controller } from './lib/Controller';
import { VisibilityManager } from './lib/commands/VisibilityManager';
import { CameraManager } from './lib/interaction/CameraManager';
@@ -57,6 +57,10 @@ window.addEventListener('message', async (e) => {
case 'displayGroup':
VisibilityManager.Instance.setVisibility(body.group, body.visible);
break;
+
+ case 'showOnlyObjects':
+ VisibilityManager.Instance.showOnlyObjects(body.objects);
+ break;
}
});
