@selvajs/ui 6.1.2 → 6.3.0

package/src/lib/components/viewer/Viewer.svelte

@@ -5,6 +5,7 @@
 		initThree,
 		updateScene,
 		LOOKS,
+		LOOK_PRESETS,
 		type Look,
 		type ThreeInitializerOptions,
 		type CameraController,
@@ -118,11 +119,13 @@
 	let cameraController: CameraController | null = null;
 	let measureTool: MeasureTool | null = null;
 	let grid: Grid | null = null;
-	let applyEdges: ((root: THREE.Object3D) => void) | null = null;
-	let clearEdges: ((root: THREE.Object3D) => void) | null = null;
+	let applyEdges: ThreeViewer['applyEdges'] | null = null;
+	let clearEdges: ThreeViewer['clearEdges'] | null = null;
 	let invalidate: (() => void) | null = null;
+	let captureImage: ThreeViewer['captureImage'] | null = null;
 	let setLook: ((look: Look) => void) | null = null;
 	let updateGridScale: (() => void) | null = null;
+	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
@@ -144,10 +147,15 @@
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
-	// Derived from LOOKS so adding a look in @selvajs/visualization shows up here with no edit.
+	// Derived from LOOKS so adding a look in @selvajs/visualization shows up here with no edit; the
+	// map only overrides the names that don't survive capitalisation ('xray' → 'X-Ray').
+	const LOOK_LABELS: Partial<Record<Look, string>> = {
+		xray: 'X-Ray',
+		lineart: 'Line Art'
+	};
 	const STYLE_OPTIONS: { look: Look; label: string }[] = LOOKS.map((look) => ({
 		look,
-		label: look.charAt(0).toUpperCase() + look.slice(1)
+		label: LOOK_LABELS[look] ?? look.charAt(0).toUpperCase() + look.slice(1)
 	}));
 
 	const VIEW_PRESETS: { preset: ViewPreset; label: () => string }[] = [
@@ -175,12 +183,11 @@
 	onMount(() => {
 		if (!canvas) return;
 
-		// Only what differs from the library defaults. The sun and shadows are off because the
-		// technical look doesn't need them — flat ambient plus the HDR environment carry it.
+		// Only what differs from the library defaults. Sunlight, shadows and AO are left ON (the
+		// library default) and their strength comes from the look — with IBL alone every face of a
+		// box lights nearly equally and the model reads as a flat white silhouette.
 		const opts: ThreeInitializerOptions = {
 			look: renderStyle,
-			lighting: { enableSunlight: false },
-			render: { enableShadows: false },
 			environment: { backgroundColor: config.backgroundColor },
 			grid: { enabled: config.showToolsMenu && config.showGridToggle },
 			measure: { enabled: config.showToolsMenu },
@@ -210,8 +217,10 @@
 		applyEdges = init.applyEdges;
 		clearEdges = init.clearEdges;
 		invalidate = init.invalidate;
+		captureImage = init.captureImage;
 		setLook = init.setLook;
 		updateGridScale = init.updateGridScale;
+		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
 		projection = init.cameraController.getProjection();
 
@@ -253,22 +262,84 @@
 		invalidate?.();
 	}
 
+	// Edges the lineart look switched on, so leaving it can put the user's own choice back rather
+	// than stranding them with overlays they never asked for.
+	let edgesBeforeLineDrawing: boolean | null = null;
+
 	function setRenderStyle(look: Look) {
 		if (!setLook || look === renderStyle) return;
+		const wasLineDrawing = LOOK_PRESETS[renderStyle].requiresEdges === true;
 		renderStyle = look;
 		setLook(look);
+
+		// A look never drives the overlay itself; honouring `requiresEdges` is the host's call. Without
+		// edges lineart is blank white shapes, so entering it forces them on.
+		if (LOOK_PRESETS[look].requiresEdges) {
+			if (!wasLineDrawing) edgesBeforeLineDrawing = edgesVisible;
+			if (!edgesVisible) {
+				edgesVisible = true;
+			} else if (!wasLineDrawing && scene) {
+				// Already-attached overlays carry the old fade setting, and addEdges skips a mesh that
+				// has one — so they have to go before the un-faded pass can replace them.
+				clearEdges?.(scene);
+			}
+			applyEdgeState();
+		} else if (wasLineDrawing && edgesBeforeLineDrawing !== null) {
+			edgesVisible = edgesBeforeLineDrawing;
+			// Rebuild either way: staying on means swapping the un-faded overlays back for faded ones.
+			if (edgesVisible && scene) clearEdges?.(scene);
+			applyEdgeState();
+			edgesBeforeLineDrawing = null;
+		} else if (edgesVisible && scene) {
+			// Neither look is a line drawing, but an overlay's colour is derived from its mesh's
+			// material — which `setLook` just repainted. addEdges skips meshes that already have an
+			// overlay, so without a rebuild the edges keep the previous look's colour.
+			clearEdges?.(scene);
+			applyEdgeState();
+		}
+	}
+
+	// Meshes past the overlay budget get the screen-space fallback instead, and that pass thresholds
+	// a depth/normal discontinuity to decide what is an edge — so a shallow crease sitting near the
+	// cutoff flips on and off as the camera turns a degree. Tolerable as a hint over a shaded model;
+	// in a line drawing it is the picture itself flickering. Raised far enough that a building model
+	// gets real overlays throughout: they cost draw calls, but they are stable under orbit.
+	const LINE_ART_MAX_OVERLAYS = 20_000;
+
+	// Edge colour is normally derived per mesh from that mesh's own material, darkened. lineart
+	// repaints every material near-white, so a derived edge lands at rgb(62,62,62) or lighter — and
+	// worse, `setLook` and `applyEdges` are independent, so whether the derivation sees the white
+	// override or the model's original colours depends on which ran last. That is the real source of
+	// the "edges look different every time" behaviour. Forcing a colour makes it deterministic.
+	const LINE_ART_EDGE_COLOR = 0x1a1d21;
+
+	// The density fade sets opacity per overlay, so a finely-detailed mesh fades as a whole and its
+	// long silhouette edges go with it — in a line drawing that erases the only thing on screen, and
+	// it recomputes per frame, so edges pop while orbiting. Shaded looks keep it: there it just
+	// softens outlines on a model you can still see.
+	function edgeOverrides() {
+		return LOOK_PRESETS[renderStyle].requiresEdges
+			? {
+					distanceFade: false,
+					maxOverlays: LINE_ART_MAX_OVERLAYS,
+					color: LINE_ART_EDGE_COLOR
+				}
+			: undefined;
 	}
 
 	// `applyEdges` is idempotent per mesh, so the repeated calls after each solve add no duplicate
 	// overlays; `clearEdges` is its inverse.
 	function applyEdgeState() {
 		if (!scene) return;
-		if (edgesVisible) applyEdges?.(scene);
+		if (edgesVisible) applyEdges?.(scene, edgeOverrides());
 		else clearEdges?.(scene);
 	}
 
 	function toggleEdges() {
 		edgesVisible = !edgesVisible;
+		// Toggling by hand inside lineart overrides what that look forced, so the pre-look value is
+		// stale — leaving the look must not undo the user's more recent explicit choice.
+		if (LOOK_PRESETS[renderStyle].requiresEdges) edgesBeforeLineDrawing = null;
 		applyEdgeState();
 	}
 
@@ -278,10 +349,16 @@
 			// Untracked because toggleEdges() already handles the toggle directly — reading
 			// `edgesVisible` tracked here would re-trigger a full solve.
 			untrack(() => {
+				// The new meshes carry the materials the parser built, so a look that overrides them
+				// (arctic, x-ray) has to be re-applied or the solve silently reverts to shaded.
+				setLook?.(renderStyle);
 				// updateScene discarded the previous solve's overlays along with its content.
-				if (edgesVisible) applyEdges?.(scene!);
+				if (edgesVisible) applyEdges?.(scene!, edgeOverrides());
 				// Rescale the grid so cells and fade match the new content's extent.
 				updateGridScale?.();
+				// The shadow frustum is sized to scene content, so it has to follow the new geometry —
+				// left at the old extent, shadows go blocky or fall outside the map entirely.
+				updateShadowBounds?.();
 				// The rebuild un-hid everything; the outliner keys hidden state on Grasshopper
 				// identity, not on the instances just discarded, so it can re-hide it.
 				outliner?.applyTo();
@@ -311,8 +388,7 @@
 		const EXCLUDED_KEYS = new Set([
 			'name',
 			'layer',
-			'originalIndex',
-			'sourceComponentId',
+			'id',
 			'vertexCount',
 			'faceCount',
 			'vertexOffset',
@@ -322,23 +398,19 @@
 		return usefulEntries.length > 0;
 	}
 
-	function downloadScreenshot() {
-		if (!canvas) return;
-
-		requestAnimationFrame(() => {
-			canvas.toBlob((blob) => {
-				if (!blob) return;
-				const url = URL.createObjectURL(blob);
-				const link = document.createElement('a');
-				const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
-				link.href = url;
-				link.download = `viewer-${timestamp}.png`;
-				document.body.appendChild(link);
-				link.click();
-				document.body.removeChild(link);
-				URL.revokeObjectURL(url);
-			});
-		});
+	async function downloadScreenshot() {
+		const blob = await captureImage?.();
+		if (!blob) return;
+
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+		link.href = url;
+		link.download = `viewer-${timestamp}.png`;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
 	}
 </script>
 
@@ -422,10 +494,10 @@
 									<DropdownMenu.Item class={itemClass} onSelect={toggleProjection}>
 										{#if projection === 'perspective'}
 											<Square class="h-4 w-4" />
-											{t.switchTo2D}
+											{t.switchToOrthographic}
 										{:else}
 											<Box class="h-4 w-4" />
-											{t.switchTo3D}
+											{t.switchToPerspective}
 										{/if}
 									</DropdownMenu.Item>
 
@@ -569,7 +641,7 @@
 		{#if sceneManagerOpen && scene && outliner}
 			<Resizable.Handle withHandle />
 			<Resizable.Pane id="scene-manager" order={2} defaultSize={15} minSize={8} maxSize={30}>
-				<SceneManager {outliner} {sceneVersion} />
+				<SceneManager {outliner} {sceneVersion} onVisibilityChange={() => invalidate?.()} />
 			</Resizable.Pane>
 		{/if}
 	</Resizable.PaneGroup>

package/src/lib/i18n/messages.ts

@@ -11,8 +11,8 @@ export type Locale = 'en' | 'de';
 export interface ViewerMessages {
 	// Tools menu
 	toolsMenu: string;
-	switchTo2D: string;
-	switchTo3D: string;
+	switchToOrthographic: string;
+	switchToPerspective: string;
 	fitToView: string;
 	views: string;
 	measure: string;
@@ -38,6 +38,8 @@ export interface ViewerMessages {
 	clearSearch: string;
 	expandLayer: string;
 	collapseLayer: string;
+	expandAll: string;
+	collapseAll: string;
 	showLayer: string;
 	hideLayer: string;
 	showObject: string;
@@ -73,8 +75,8 @@ export interface ViewerMessages {
 
 const en: ViewerMessages = {
 	toolsMenu: 'Viewer tools',
-	switchTo2D: 'Switch to 2D',
-	switchTo3D: 'Switch to 3D',
+	switchToOrthographic: 'Orthographic camera',
+	switchToPerspective: 'Perspective camera',
 	fitToView: 'Fit to view',
 	views: 'Views',
 	measure: 'Measure',
@@ -98,6 +100,8 @@ const en: ViewerMessages = {
 	clearSearch: 'Clear search',
 	expandLayer: 'Expand layer',
 	collapseLayer: 'Collapse layer',
+	expandAll: 'Expand all',
+	collapseAll: 'Collapse all',
 	showLayer: 'Show layer',
 	hideLayer: 'Hide layer',
 	showObject: 'Show object',
@@ -128,8 +132,8 @@ const en: ViewerMessages = {
 
 const de: ViewerMessages = {
 	toolsMenu: 'Viewer-Werkzeuge',
-	switchTo2D: 'Zu 2D wechseln',
-	switchTo3D: 'Zu 3D wechseln',
+	switchToOrthographic: 'Orthografische Kamera',
+	switchToPerspective: 'Perspektivische Kamera',
 	fitToView: 'Ansicht anpassen',
 	views: 'Ansichten',
 	measure: 'Messen',
@@ -153,6 +157,8 @@ const de: ViewerMessages = {
 	clearSearch: 'Suche löschen',
 	expandLayer: 'Ebene aufklappen',
 	collapseLayer: 'Ebene zuklappen',
+	expandAll: 'Alle aufklappen',
+	collapseAll: 'Alle zuklappen',
 	showLayer: 'Ebene einblenden',
 	hideLayer: 'Ebene ausblenden',
 	showObject: 'Objekt einblenden',