@selvajs/ui 6.1.2 → 6.3.0

package/dist/components/viewer/SceneManager.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-	import * as THREE from 'three';
-	import { Eye, EyeOff, ChevronRight, Search, X } from '@lucide/svelte';
 	import {
-		getObjectLabel,
-		getTrackingKey,
+		Eye,
+		EyeOff,
+		ChevronRight,
+		ChevronsDownUp,
+		ChevronsUpDown,
+		Search,
+		X
+	} from '@lucide/svelte';
+	import {
+		getMemberKeys,
 		getTypeLabel,
+		type SceneEntry,
 		type SceneOutliner
 	} from '@selvajs/visualization/scene';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
@@ -20,20 +27,46 @@
 		 */
 		outliner: SceneOutliner;
 		sceneVersion?: number;
+		/**
+		 * Request a viewer repaint. Toggling `.visible` mutates three objects directly, and the
+		 * render loop is on-demand — without this the canvas only catches up on its ~500ms idle
+		 * repaint, so the row updates instantly and the geometry lags behind.
+		 */
+		onVisibilityChange?: () => void;
 	}
 
-	let { outliner, sceneVersion = 0 }: Props = $props();
+	let { outliner, sceneVersion = 0, onVisibilityChange }: Props = $props();
+
+	// A partially hidden layer hides the rest; only a fully hidden one comes back — the same rule
+	// `visibility.toggleLayer` applies to objects, restated over entries because a layer's rows are
+	// now members, not necessarily whole objects.
+	const toggleLayer = (entries: SceneEntry[]) => {
+		const show = entries.length > 0 && entries.every((entry) => isEntryHidden(entry));
+		for (const entry of entries) outliner.visibility.setEntryVisible(entry, show);
+		onVisibilityChange?.();
+	};
+
+	const toggleEntry = (entry: SceneEntry) => {
+		outliner.toggleEntry(entry);
+		onVisibilityChange?.();
+	};
 
 	// Derived, not destructured: the prop is reassignable, and these must follow it.
 	const hidden = $derived(outliner.visibility.hidden);
 	const selected = $derived(outliner.selection.selected);
 	const collapsed = $derived(outliner.collapsed);
 
-	// Mirrored into runes because the outliner holds these as plain fields, not sets. Both are panel
-	// state, so reopening clears them — unlike hiding and collapse, which the outliner outlives.
+	// Panel state, so reopening clears it — unlike hiding and collapse, which the outliner outlives.
+	// Owned here rather than on the outliner: writing it back from the derived below is what the
+	// Svelte 5 `state_unsafe_mutation` rule forbids.
 	let searchQuery = $state('');
 	let anchor = $state<string | null>(null);
 
+	// Layers start collapsed: a solve can produce dozens, and an all-expanded list buries the
+	// layer names it exists to show. Only for the first batch of content — after that the user's
+	// collapse state is theirs, and re-collapsing on every solve would fight them.
+	let collapsedOnLoad = false;
+
 	$effect(() => outliner.onAnchorChange((next) => (anchor = next)));
 
 	// `scene.children` is a plain array the render layer mutates in place, so a solve bumping
@@ -43,29 +76,135 @@
 		return outliner.objects();
 	});
 
+	// Entries, not objects: a merged mesh renders as one THREE object but lists as one row per
+	// source object, so an imported model shows its building elements instead of the handful of
+	// meshes they were merged into.
 	const layerGroups = $derived.by(() => {
 		void sceneVersion;
-		void searchQuery;
-		outliner.searchQuery = searchQuery;
-		return outliner.layerGroups();
+		return outliner.entryGroups(searchQuery);
+	});
+
+	const collapseAll = () => {
+		for (const layerName of outliner.entryGroups().keys()) collapsed.add(layerName);
+	};
+
+	$effect(() => {
+		void sceneVersion;
+		if (collapsedOnLoad || outliner.entryGroups().size === 0) return;
+		collapsedOnLoad = true;
+		collapseAll();
+	});
+
+	const expandAll = () => collapsed.clear();
+
+	const allCollapsed = $derived(
+		layerGroups.size > 0 && [...layerGroups.keys()].every((name) => collapsed.has(name))
+	);
+
+	// ============================================================================
+	// Windowing
+	// ============================================================================
+	//
+	// A scene can hold thousands of objects. Mounting a row per object makes expanding a layer,
+	// typing in the search box, and scrolling all pay for the whole list, so only the rows
+	// overlapping the viewport are rendered and the rest are replaced by spacer height.
+	//
+	// The two row types have different heights, so the flat model records each row's height and a
+	// running offset rather than assuming a single row size. Keep these in sync with the markup:
+	// a header is `py-1` around a 3.5-unit icon, an object row `py-0.5` around a 3-unit one.
+	const LAYER_ROW_HEIGHT = 30;
+	const OBJECT_ROW_HEIGHT = 24;
+	// Rows rendered beyond each edge of the viewport, so a fast scroll doesn't show blank space.
+	const OVERSCAN = 8;
+
+	type Row =
+		| {
+				kind: 'layer';
+				key: string;
+				top: number;
+				height: number;
+				layerName: string;
+				entries: SceneEntry[];
+		  }
+		| { kind: 'object'; key: string; top: number; height: number; entry: SceneEntry };
+
+	const rows = $derived.by(() => {
+		const flat: Row[] = [];
+		let top = 0;
+		for (const [layerName, entries] of layerGroups) {
+			flat.push({
+				kind: 'layer',
+				key: `layer:${layerName}`,
+				top,
+				height: LAYER_ROW_HEIGHT,
+				layerName,
+				entries
+			});
+			top += LAYER_ROW_HEIGHT;
+			if (collapsed.has(layerName)) continue;
+			for (const entry of entries) {
+				flat.push({
+					kind: 'object',
+					key: entry.key,
+					top,
+					height: OBJECT_ROW_HEIGHT,
+					entry
+				});
+				top += OBJECT_ROW_HEIGHT;
+			}
+		}
+		return flat;
+	});
+
+	const totalHeight = $derived(
+		rows.length === 0 ? 0 : rows[rows.length - 1]!.top + rows[rows.length - 1]!.height
+	);
+
+	let scrollTop = $state(0);
+	let viewportHeight = $state(0);
+
+	/** First row index whose bottom edge is at or past `offset`. Rows are ordered by `top`. */
+	const findRowAt = (offset: number) => {
+		let low = 0;
+		let high = rows.length - 1;
+		while (low < high) {
+			const mid = (low + high) >> 1;
+			if (rows[mid]!.top + rows[mid]!.height <= offset) low = mid + 1;
+			else high = mid;
+		}
+		return low;
+	};
+
+	const visibleRows = $derived.by(() => {
+		if (rows.length === 0) return [];
+		// Before the first measurement `viewportHeight` is 0; render a screenful so the list is
+		// never briefly empty.
+		const height = viewportHeight || 600;
+		const start = Math.max(0, findRowAt(scrollTop) - OVERSCAN);
+		const end = Math.min(rows.length, findRowAt(scrollTop + height) + 1 + OVERSCAN);
+		return rows.slice(start, end);
 	});
 
 	// `SvelteSet.has()` is the reactive read, so go through the set rather than calling
 	// `visibility.isHidden` — that reaches the set through a plain reference inside the outliner
 	// and returns a correct value that never re-renders this row.
-	const isObjectHidden = (object: THREE.Object3D) => hidden.has(getTrackingKey(object));
+	const isEntryHidden = (entry: SceneEntry) =>
+		entry.memberIndex === null
+			? getMemberKeys(entry.object).every((key) => hidden.has(key))
+			: hidden.has(entry.key);
 
-	// Same reason: count through the reactive set so the layer's tri-state eye tracks its objects.
-	const hiddenCount = (objects: THREE.Object3D[]) =>
-		objects.filter((object) => isObjectHidden(object)).length;
+	// Same reason: count through the reactive set so the layer's tri-state eye tracks its entries.
+	const hiddenCount = (entries: SceneEntry[]) =>
+		entries.filter((entry) => isEntryHidden(entry)).length;
 
 	// Reading `anchor` keeps the shift-range dependent on it; the outliner owns the value.
 	const selectObject = (uuid: string, event: MouseEvent) => {
 		void anchor;
-		outliner.select(uuid, {
-			shiftKey: event.shiftKey,
-			toggleKey: event.ctrlKey || event.metaKey
-		});
+		outliner.select(
+			uuid,
+			{ shiftKey: event.shiftKey, toggleKey: event.ctrlKey || event.metaKey },
+			searchQuery
+		);
 	};
 </script>
 
@@ -88,110 +227,142 @@
 				/>
 			</button>
 		{/if}
+
+		<button
+			class="shrink-0"
+			onclick={() => (allCollapsed ? expandAll() : collapseAll())}
+			title={allCollapsed ? t.expandAll : t.collapseAll}
+			aria-label={allCollapsed ? t.expandAll : t.collapseAll}
+		>
+			{#if allCollapsed}
+				<ChevronsUpDown
+					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+				/>
+			{:else}
+				<ChevronsDownUp
+					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+				/>
+			{/if}
+		</button>
 	</div>
 
-	<div class="py-1 flex-1 overflow-y-auto">
-		{#each [...layerGroups] as [layerName, objects] (layerName)}
-			{@const numHidden = hiddenCount(objects)}
-			{@const layerHidden = objects.length > 0 && numHidden === objects.length}
-			{@const layerPartial = numHidden > 0 && numHidden < objects.length}
-			{@const isCollapsed = collapsed.has(layerName)}
-
-			<div class="gap-1 pl-1 pr-2 py-1 group flex items-center transition-colors hover:bg-muted">
-				<button
-					class="rounded p-0.5 shrink-0 text-muted-foreground transition-colors hover:text-muted-foreground"
-					onclick={() => outliner.toggleCollapsed(layerName)}
-					aria-label={isCollapsed ? t.expandLayer : t.collapseLayer}
-				>
-					<ChevronRight
-						class="h-3.5 w-3.5 transition-transform duration-150 {isCollapsed ? '' : 'rotate-90'}"
-					/>
-				</button>
-
-				<button
-					class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
-					onclick={() => outliner.visibility.toggleLayer(objects)}
-					title={layerHidden ? t.showLayer : t.hideLayer}
-					aria-label={layerHidden ? t.showLayer : t.hideLayer}
-				>
-					{#if layerHidden}
-						<EyeOff class="h-3.5 w-3.5 text-muted-foreground/40" />
-					{:else if layerPartial}
-						<Eye class="h-3.5 w-3.5 text-muted-foreground/60" />
-					{:else}
-						<Eye class="h-3.5 w-3.5 text-muted-foreground" />
-					{/if}
-				</button>
-
-				<span
-					class="min-w-0 text-xs font-medium flex-1 truncate {layerHidden
-						? 'text-muted-foreground/40 line-through'
-						: 'text-foreground'}"
-				>
-					{layerName}
-				</span>
-
-				<span class="shrink-0 text-[10px] text-muted-foreground/50 tabular-nums">
-					{objects.length}
-				</span>
-			</div>
+	<div
+		class="py-1 flex-1 overflow-y-auto"
+		bind:clientHeight={viewportHeight}
+		onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)}
+	>
+		<!-- Spacer sized to the full list; windowed rows are placed into it by offset. The listbox
+		     sits here rather than per layer: windowing renders one flat row list, so every option
+		     shares a single owner. -->
+		<div role="listbox" aria-multiselectable="true" class="relative" style:height="{totalHeight}px">
+			{#each visibleRows as row (row.key)}
+				<div class="inset-x-0 absolute" style:top="{row.top}px" style:height="{row.height}px">
+					{#if row.kind === 'layer'}
+						{@const entries = row.entries}
+						{@const numHidden = hiddenCount(entries)}
+						{@const layerHidden = entries.length > 0 && numHidden === entries.length}
+						{@const layerPartial = numHidden > 0 && numHidden < entries.length}
+						{@const isCollapsed = collapsed.has(row.layerName)}
 
-			{#if !isCollapsed}
-				<div role="listbox" aria-multiselectable="true" class="ml-3 border-l border-border">
-					{#each objects as object (object.uuid)}
-						<!-- Visibility is keyed by Grasshopper identity (so it survives a solve), selection
-						     by uuid (so it does not) — hence the two different lookups. -->
-						{@const isHidden = isObjectHidden(object)}
-						{@const isSelected = selected.has(object.uuid)}
 						<div
-							role="option"
-							aria-selected={isSelected}
-							tabindex="-1"
-							class="gap-1.5 pl-5 pr-2 py-0.5 flex cursor-pointer items-center transition-colors
-								{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
-								{isHidden ? 'opacity-40' : ''}"
-							onmousedown={(e) => {
-								e.stopPropagation();
-								if (e.shiftKey) e.preventDefault();
-							}}
-							onclick={(e) => selectObject(object.uuid, e)}
-							onkeydown={(e) =>
-								e.key === 'Enter' && selectObject(object.uuid, e as unknown as MouseEvent)}
+							class="gap-1 pl-1 pr-2 group flex h-full items-center transition-colors hover:bg-muted"
 						>
+							<button
+								class="rounded p-0.5 shrink-0 text-muted-foreground transition-colors hover:text-muted-foreground"
+								onclick={() => outliner.toggleCollapsed(row.layerName)}
+								aria-label={isCollapsed ? t.expandLayer : t.collapseLayer}
+							>
+								<ChevronRight
+									class="h-3.5 w-3.5 transition-transform duration-150 {isCollapsed
+										? ''
+										: 'rotate-90'}"
+								/>
+							</button>
+
 							<button
 								class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
-								onclick={(e) => {
-									e.stopPropagation();
-									outliner.toggleObject(object);
-								}}
-								title={isHidden ? t.showObject : t.hideObject}
-								aria-label={isHidden ? t.showObject : t.hideObject}
+								onclick={() => toggleLayer(entries)}
+								title={layerHidden ? t.showLayer : t.hideLayer}
+								aria-label={layerHidden ? t.showLayer : t.hideLayer}
 							>
-								{#if isHidden}
-									<EyeOff class="h-3 w-3 text-muted-foreground/60" />
+								{#if layerHidden}
+									<EyeOff class="h-3.5 w-3.5 text-muted-foreground/40" />
+								{:else if layerPartial}
+									<Eye class="h-3.5 w-3.5 text-muted-foreground/60" />
 								{:else}
-									<Eye class="h-3 w-3 text-muted-foreground" />
+									<Eye class="h-3.5 w-3.5 text-muted-foreground" />
 								{/if}
 							</button>
 
 							<span
-								class="min-w-0 text-xs flex-1 truncate {isHidden
-									? 'text-muted-foreground line-through'
-									: 'text-foreground/80'}"
+								class="min-w-0 text-xs font-medium flex-1 truncate {layerHidden
+									? 'text-muted-foreground/40 line-through'
+									: 'text-foreground'}"
 							>
-								{getObjectLabel(object)}
+								{row.layerName}
 							</span>
 
-							<span
-								class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-[9px] text-muted-foreground/70"
-							>
-								{getTypeLabel(object)}
+							<span class="shrink-0 text-[10px] text-muted-foreground/50 tabular-nums">
+								{entries.length}
 							</span>
 						</div>
-					{/each}
+					{:else}
+						{@const entry = row.entry}
+						<!-- Both keyed by the entry's stable identity: a merged mesh holds many entries, so
+						     the object's uuid cannot tell its members apart. -->
+						{@const isHidden = isEntryHidden(entry)}
+						{@const isSelected = selected.has(entry.key)}
+						<div class="ml-3 h-full border-l border-border">
+							<div
+								role="option"
+								aria-selected={isSelected}
+								tabindex="-1"
+								class="gap-1.5 pl-5 pr-2 flex h-full cursor-pointer items-center transition-colors
+									{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
+									{isHidden ? 'opacity-40' : ''}"
+								onmousedown={(e) => {
+									e.stopPropagation();
+									if (e.shiftKey) e.preventDefault();
+								}}
+								onclick={(e) => selectObject(entry.key, e)}
+								onkeydown={(e) =>
+									e.key === 'Enter' && selectObject(entry.key, e as unknown as MouseEvent)}
+							>
+								<button
+									class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
+									onclick={(e) => {
+										e.stopPropagation();
+										toggleEntry(entry);
+									}}
+									title={isHidden ? t.showObject : t.hideObject}
+									aria-label={isHidden ? t.showObject : t.hideObject}
+								>
+									{#if isHidden}
+										<EyeOff class="h-3 w-3 text-muted-foreground/60" />
+									{:else}
+										<Eye class="h-3 w-3 text-muted-foreground" />
+									{/if}
+								</button>
+
+								<span
+									class="min-w-0 text-xs flex-1 truncate {isHidden
+										? 'text-muted-foreground line-through'
+										: 'text-foreground/80'}"
+								>
+									{entry.label}
+								</span>
+
+								<span
+									class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-[9px] text-muted-foreground/70"
+								>
+									{getTypeLabel(entry.object)}
+								</span>
+							</div>
+						</div>
+					{/if}
 				</div>
-			{/if}
-		{/each}
+			{/each}
+		</div>
 
 		{#if sceneObjects.length === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">

package/dist/components/viewer/SceneManager.svelte.d.ts

@@ -7,6 +7,12 @@ interface Props {
      */
     outliner: SceneOutliner;
     sceneVersion?: number;
+    /**
+     * Request a viewer repaint. Toggling `.visible` mutates three objects directly, and the
+     * render loop is on-demand — without this the canvas only catches up on its ~500ms idle
+     * repaint, so the row updates instantly and the geometry lags behind.
+     */
+    onVisibilityChange?: () => void;
 }
 declare const SceneManager: import("svelte").Component<Props, {}, "">;
 type SceneManager = ReturnType<typeof SceneManager>;