@ifc-lite/viewer 1.9.0 → 1.10.0

package/src/components/viewer/Viewport.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { Renderer } from '@ifc-lite/renderer';
+import { Renderer, type VisualEnhancementOptions } from '@ifc-lite/renderer';
 import type { MeshData, CoordinateInfo } from '@ifc-lite/geometry';
 import { useViewerStore, resolveEntityRef, type MeasurePoint, type SnapVisualization } from '@/store';
 import {
@@ -158,7 +158,20 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
   const { updateCameraRotationRealtime, updateScaleRealtime, setCameraCallbacks } = useCameraState();
 
   // Theme state
-  const { theme } = useThemeState();
+  const {
+    theme,
+    isMobile,
+    visualEnhancementsEnabled,
+    edgeContrastEnabled,
+    edgeContrastIntensity,
+    contactShadingQuality,
+    contactShadingIntensity,
+    contactShadingRadius,
+    separationLinesEnabled,
+    separationLinesQuality,
+    separationLinesIntensity,
+    separationLinesRadius,
+  } = useThemeState();
 
   // Hover state
   const { hoverTooltipsEnabled, setHoverState, clearHover } = useHoverState();
@@ -215,6 +228,37 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
   // Theme-aware clear color ref (updated when theme changes)
   // Tokyo Night storm: #1a1b26 = rgb(26, 27, 38)
   const clearColorRef = useRef<[number, number, number, number]>([0.102, 0.106, 0.149, 1]);
+  const visualEnhancement = useMemo<VisualEnhancementOptions>(() => ({
+    enabled: visualEnhancementsEnabled,
+    edgeContrast: {
+      enabled: edgeContrastEnabled,
+      intensity: edgeContrastIntensity,
+    },
+    contactShading: {
+      quality: isMobile ? 'off' : contactShadingQuality,
+      intensity: contactShadingIntensity,
+      radius: contactShadingRadius,
+    },
+    separationLines: {
+      enabled: separationLinesEnabled,
+      quality: isMobile ? 'low' : separationLinesQuality,
+      intensity: isMobile ? Math.min(0.4, separationLinesIntensity) : separationLinesIntensity,
+      radius: isMobile ? 1.0 : separationLinesRadius,
+    },
+  }), [
+    visualEnhancementsEnabled,
+    edgeContrastEnabled,
+    edgeContrastIntensity,
+    isMobile,
+    contactShadingQuality,
+    contactShadingIntensity,
+    contactShadingRadius,
+    separationLinesEnabled,
+    separationLinesQuality,
+    separationLinesIntensity,
+    separationLinesRadius,
+  ]);
+  const visualEnhancementRef = useRef<VisualEnhancementOptions>(visualEnhancement);
 
   // Animation frame ref
   const animationFrameRef = useRef<number | null>(null);
@@ -330,6 +374,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
   useEffect(() => { measurementConstraintEdgeRef.current = measurementConstraintEdge; }, [measurementConstraintEdge]);
   useEffect(() => { sectionPlaneRef.current = sectionPlane; }, [sectionPlane]);
   useEffect(() => { sectionRangeRef.current = sectionRange; }, [sectionRange]);
+  useEffect(() => { visualEnhancementRef.current = visualEnhancement; }, [visualEnhancement]);
   useEffect(() => {
     geometryRef.current = geometry;
   }, [geometry]);
@@ -459,6 +504,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
             selectedId: selectedEntityIdRef.current,
             selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
+            visualEnhancement: visualEnhancementRef.current,
             sectionPlane: activeToolRef.current === 'section' ? {
               ...sectionPlaneRef.current,
               min: sectionRangeRef.current?.min,
@@ -485,6 +531,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
             selectedId: selectedEntityIdRef.current,
             selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
+            visualEnhancement: visualEnhancementRef.current,
             sectionPlane: activeToolRef.current === 'section' ? {
               ...sectionPlaneRef.current,
               min: sectionRangeRef.current?.min,
@@ -501,6 +548,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
             selectedId: selectedEntityIdRef.current,
             selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
+            visualEnhancement: visualEnhancementRef.current,
             sectionPlane: activeToolRef.current === 'section' ? {
               ...sectionPlaneRef.current,
               min: sectionRangeRef.current?.min,
@@ -534,6 +582,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
             selectedId: selectedEntityIdRef.current,
             selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
+            visualEnhancement: visualEnhancementRef.current,
             sectionPlane: activeToolRef.current === 'section' ? {
               ...sectionPlaneRef.current,
               min: sectionRangeRef.current?.min,
@@ -557,6 +606,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
             selectedId: selectedEntityIdRef.current,
             selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
+            visualEnhancement: visualEnhancementRef.current,
             sectionPlane: activeToolRef.current === 'section' ? {
               ...sectionPlaneRef.current,
               min: sectionRangeRef.current?.min,
@@ -573,6 +623,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
             selectedId: selectedEntityIdRef.current,
             selectedModelIndex: selectedModelIndexRef.current,
             clearColor: clearColorRef.current,
+            visualEnhancement: visualEnhancementRef.current,
             sectionPlane: activeToolRef.current === 'section' ? {
               ...sectionPlaneRef.current,
               min: sectionRangeRef.current?.min,
@@ -598,6 +649,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
           selectedId: selectedEntityIdRef.current,
           selectedModelIndex: selectedModelIndexRef.current,
           clearColor: clearColorRef.current,
+          visualEnhancement: visualEnhancementRef.current,
           sectionPlane: activeToolRef.current === 'section' ? {
             ...sectionPlaneRef.current,
             min: sectionRangeRef.current?.min,
@@ -614,6 +666,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
         selectedId: selectedEntityIdRef.current,
         selectedModelIndex: selectedModelIndexRef.current,
         clearColor: clearColorRef.current,
+        visualEnhancement: visualEnhancementRef.current,
         sectionPlane: activeToolRef.current === 'section' ? {
           ...sectionPlaneRef.current,
           min: sectionRangeRef.current?.min,
@@ -767,6 +820,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
     clearColorRef,
     sectionPlaneRef,
     sectionRangeRef,
+    visualEnhancementRef,
     lastCameraStateRef,
     updateCameraRotationRealtime,
     calculateScale,
@@ -791,6 +845,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
     isInitialized,
     theme,
     clearColorRef,
+    visualEnhancementRef,
     hiddenEntities,
     isolatedEntities,
     selectedEntityId,

package/src/components/viewer/hierarchy/treeDataBuilder.ts

@@ -132,7 +132,9 @@ function buildSpatialNodes(
     id: nodeId,
     expressIds: [spatialNode.expressId],
     modelIds: [modelId],
-    name: spatialNode.name || `${nodeType} #${spatialNode.expressId}`,
+    name: (spatialNode.name && spatialNode.name.toLowerCase() !== 'unknown')
+      ? spatialNode.name
+      : nodeType,
     type: nodeType,
     depth,
     hasChildren,

package/src/components/viewer/useAnimationLoop.ts

@@ -8,7 +8,7 @@
  */
 
 import { useEffect, type MutableRefObject, type RefObject } from 'react';
-import type { Renderer } from '@ifc-lite/renderer';
+import type { Renderer, VisualEnhancementOptions } from '@ifc-lite/renderer';
 import type { SectionPlane } from '@/store';
 
 export interface UseAnimationLoopParams {
@@ -24,6 +24,7 @@ export interface UseAnimationLoopParams {
   selectedEntityIdRef: MutableRefObject<number | null>;
   selectedModelIndexRef: MutableRefObject<number | undefined>;
   clearColorRef: MutableRefObject<[number, number, number, number]>;
+  visualEnhancementRef: MutableRefObject<VisualEnhancementOptions>;
   sectionPlaneRef: MutableRefObject<SectionPlane>;
   sectionRangeRef: MutableRefObject<{ min: number; max: number } | null>;
   lastCameraStateRef: MutableRefObject<{
@@ -53,6 +54,7 @@ export function useAnimationLoop(params: UseAnimationLoopParams): void {
     selectedEntityIdRef,
     selectedModelIndexRef,
     clearColorRef,
+    visualEnhancementRef,
     sectionPlaneRef,
     sectionRangeRef,
     lastCameraStateRef,
@@ -87,6 +89,7 @@ export function useAnimationLoop(params: UseAnimationLoopParams): void {
           selectedId: selectedEntityIdRef.current,
           selectedModelIndex: selectedModelIndexRef.current,
           clearColor: clearColorRef.current,
+          visualEnhancement: visualEnhancementRef.current,
           sectionPlane: activeToolRef.current === 'section' ? {
             ...sectionPlaneRef.current,
             min: sectionRangeRef.current?.min,

package/src/components/viewer/useRenderUpdates.ts

@@ -8,7 +8,7 @@
  */
 
 import { useEffect, type MutableRefObject } from 'react';
-import type { Renderer, CutPolygon2D, DrawingLine2D } from '@ifc-lite/renderer';
+import type { Renderer, CutPolygon2D, DrawingLine2D, VisualEnhancementOptions } from '@ifc-lite/renderer';
 import type { CoordinateInfo } from '@ifc-lite/geometry';
 import type { Drawing2D } from '@ifc-lite/drawing-2d';
 import type { SectionPlane } from '@/store';
@@ -21,6 +21,7 @@ export interface UseRenderUpdatesParams {
   // Theme
   theme: string;
   clearColorRef: MutableRefObject<[number, number, number, number]>;
+  visualEnhancementRef: MutableRefObject<VisualEnhancementOptions>;
 
   // Visibility/selection state (reactive values, not refs)
   hiddenEntities: Set<number>;
@@ -54,6 +55,7 @@ export function useRenderUpdates(params: UseRenderUpdatesParams): void {
     isInitialized,
     theme,
     clearColorRef,
+    visualEnhancementRef,
     hiddenEntities,
     isolatedEntities,
     selectedEntityId,
@@ -88,6 +90,7 @@ export function useRenderUpdates(params: UseRenderUpdatesParams): void {
         selectedId: selectedEntityIdRef.current,
         selectedModelIndex: selectedModelIndexRef.current,
         clearColor: clearColorRef.current,
+        visualEnhancement: visualEnhancementRef.current,
       });
     }
   }, [theme, isInitialized]);
@@ -132,6 +135,7 @@ export function useRenderUpdates(params: UseRenderUpdatesParams): void {
       selectedIds: selectedEntityIdsRef.current,
       selectedModelIndex: selectedModelIndexRef.current,
       clearColor: clearColorRef.current,
+      visualEnhancement: visualEnhancementRef.current,
       sectionPlane: activeTool === 'section' ? {
         ...sectionPlane,
         min: sectionRangeRef.current?.min,
@@ -152,6 +156,7 @@ export function useRenderUpdates(params: UseRenderUpdatesParams): void {
       selectedIds: selectedEntityIds,
       selectedModelIndex,
       clearColor: clearColorRef.current,
+      visualEnhancement: visualEnhancementRef.current,
       sectionPlane: activeTool === 'section' ? {
         ...sectionPlane,
         min: sectionRange?.min,

package/src/hooks/useViewerSelectors.ts

@@ -157,9 +157,31 @@ export function useHoverState() {
  */
 export function useThemeState() {
   const theme = useViewerStore((state) => state.theme);
+  const isMobile = useViewerStore((state) => state.isMobile);
+  const visualEnhancementsEnabled = useViewerStore((state) => state.visualEnhancementsEnabled);
+  const edgeContrastEnabled = useViewerStore((state) => state.edgeContrastEnabled);
+  const edgeContrastIntensity = useViewerStore((state) => state.edgeContrastIntensity);
+  const contactShadingQuality = useViewerStore((state) => state.contactShadingQuality);
+  const contactShadingIntensity = useViewerStore((state) => state.contactShadingIntensity);
+  const contactShadingRadius = useViewerStore((state) => state.contactShadingRadius);
+  const separationLinesEnabled = useViewerStore((state) => state.separationLinesEnabled);
+  const separationLinesQuality = useViewerStore((state) => state.separationLinesQuality);
+  const separationLinesIntensity = useViewerStore((state) => state.separationLinesIntensity);
+  const separationLinesRadius = useViewerStore((state) => state.separationLinesRadius);
 
   return {
     theme,
+    isMobile,
+    visualEnhancementsEnabled,
+    edgeContrastEnabled,
+    edgeContrastIntensity,
+    contactShadingQuality,
+    contactShadingIntensity,
+    contactShadingRadius,
+    separationLinesEnabled,
+    separationLinesQuality,
+    separationLinesIntensity,
+    separationLinesRadius,
   };
 }
 

package/src/index.css

@@ -4,6 +4,12 @@
 
 @import "tailwindcss";
 
+/* Override Tailwind v4's default media-query dark variant so all dark: utilities
+   respond to the .dark class on <html> instead of prefers-color-scheme.
+   Without this, toggling light mode while the OS is in dark mode leaves all
+   dark: Tailwind utilities active, creating a mixed dark/light UI. */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* ═══════════════════════════════════════════════════════════════════════════
    TOKYO NIGHT THEME - Dark Stormy Cyberpunk Vibes
    ═══════════════════════════════════════════════════════════════════════════ */

package/src/store/constants.ts

@@ -66,6 +66,26 @@ export const UI_DEFAULTS = {
   THEME: getInitialTheme(),
   /** Default hover tooltips state */
   HOVER_TOOLTIPS_ENABLED: false,
+  /** Global visual enhancement kill switch */
+  VISUAL_ENHANCEMENTS_ENABLED: true,
+  /** Edge contrast enhancement default */
+  EDGE_CONTRAST_ENABLED: true,
+  /** Edge contrast intensity */
+  EDGE_CONTRAST_INTENSITY: 1.2,
+  /** Contact shading quality preset */
+  CONTACT_SHADING_QUALITY: 'low' as const,
+  /** Contact shading intensity */
+  CONTACT_SHADING_INTENSITY: 0.35,
+  /** Contact shading radius in pixels */
+  CONTACT_SHADING_RADIUS: 1.5,
+  /** Separation-line overlay default */
+  SEPARATION_LINES_ENABLED: true,
+  /** Separation-line quality preset */
+  SEPARATION_LINES_QUALITY: 'low' as const,
+  /** Separation-line intensity */
+  SEPARATION_LINES_INTENSITY: 0.38,
+  /** Separation-line radius in pixels */
+  SEPARATION_LINES_RADIUS: 1.0,
 } as const;
 
 // ============================================================================

package/src/store/index.ts

@@ -184,6 +184,16 @@ export const useViewerStore = create<ViewerState>()((...args) => ({
 
       // UI
       activeTool: UI_DEFAULTS.ACTIVE_TOOL,
+      visualEnhancementsEnabled: UI_DEFAULTS.VISUAL_ENHANCEMENTS_ENABLED,
+      edgeContrastEnabled: UI_DEFAULTS.EDGE_CONTRAST_ENABLED,
+      edgeContrastIntensity: UI_DEFAULTS.EDGE_CONTRAST_INTENSITY,
+      contactShadingQuality: UI_DEFAULTS.CONTACT_SHADING_QUALITY,
+      contactShadingIntensity: UI_DEFAULTS.CONTACT_SHADING_INTENSITY,
+      contactShadingRadius: UI_DEFAULTS.CONTACT_SHADING_RADIUS,
+      separationLinesEnabled: UI_DEFAULTS.SEPARATION_LINES_ENABLED,
+      separationLinesQuality: UI_DEFAULTS.SEPARATION_LINES_QUALITY,
+      separationLinesIntensity: UI_DEFAULTS.SEPARATION_LINES_INTENSITY,
+      separationLinesRadius: UI_DEFAULTS.SEPARATION_LINES_RADIUS,
 
       // Drawing 2D
       drawing2D: null,

package/src/store/slices/uiSlice.ts

@@ -8,6 +8,7 @@
 
 import type { StateCreator } from 'zustand';
 import { UI_DEFAULTS } from '../constants.js';
+import type { ContactShadingQuality, SeparationLinesQuality } from '@ifc-lite/renderer';
 
 export interface UISlice {
   // State
@@ -17,6 +18,16 @@ export interface UISlice {
   theme: 'light' | 'dark';
   isMobile: boolean;
   hoverTooltipsEnabled: boolean;
+  visualEnhancementsEnabled: boolean;
+  edgeContrastEnabled: boolean;
+  edgeContrastIntensity: number;
+  contactShadingQuality: ContactShadingQuality;
+  contactShadingIntensity: number;
+  contactShadingRadius: number;
+  separationLinesEnabled: boolean;
+  separationLinesQuality: SeparationLinesQuality;
+  separationLinesIntensity: number;
+  separationLinesRadius: number;
 
   // Actions
   setLeftPanelCollapsed: (collapsed: boolean) => void;
@@ -26,6 +37,16 @@ export interface UISlice {
   toggleTheme: () => void;
   setIsMobile: (isMobile: boolean) => void;
   toggleHoverTooltips: () => void;
+  setVisualEnhancementsEnabled: (enabled: boolean) => void;
+  setEdgeContrastEnabled: (enabled: boolean) => void;
+  setEdgeContrastIntensity: (intensity: number) => void;
+  setContactShadingQuality: (quality: ContactShadingQuality) => void;
+  setContactShadingIntensity: (intensity: number) => void;
+  setContactShadingRadius: (radius: number) => void;
+  setSeparationLinesEnabled: (enabled: boolean) => void;
+  setSeparationLinesQuality: (quality: SeparationLinesQuality) => void;
+  setSeparationLinesIntensity: (intensity: number) => void;
+  setSeparationLinesRadius: (radius: number) => void;
 }
 
 export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (set, get) => ({
@@ -36,6 +57,16 @@ export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (set, get)
   theme: UI_DEFAULTS.THEME,
   isMobile: false,
   hoverTooltipsEnabled: UI_DEFAULTS.HOVER_TOOLTIPS_ENABLED,
+  visualEnhancementsEnabled: UI_DEFAULTS.VISUAL_ENHANCEMENTS_ENABLED,
+  edgeContrastEnabled: UI_DEFAULTS.EDGE_CONTRAST_ENABLED,
+  edgeContrastIntensity: UI_DEFAULTS.EDGE_CONTRAST_INTENSITY,
+  contactShadingQuality: UI_DEFAULTS.CONTACT_SHADING_QUALITY,
+  contactShadingIntensity: UI_DEFAULTS.CONTACT_SHADING_INTENSITY,
+  contactShadingRadius: UI_DEFAULTS.CONTACT_SHADING_RADIUS,
+  separationLinesEnabled: UI_DEFAULTS.SEPARATION_LINES_ENABLED,
+  separationLinesQuality: UI_DEFAULTS.SEPARATION_LINES_QUALITY,
+  separationLinesIntensity: UI_DEFAULTS.SEPARATION_LINES_INTENSITY,
+  separationLinesRadius: UI_DEFAULTS.SEPARATION_LINES_RADIUS,
 
   // Actions
   setLeftPanelCollapsed: (leftPanelCollapsed) => set({ leftPanelCollapsed }),
@@ -57,4 +88,14 @@ export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (set, get)
 
   setIsMobile: (isMobile) => set({ isMobile }),
   toggleHoverTooltips: () => set((state) => ({ hoverTooltipsEnabled: !state.hoverTooltipsEnabled })),
+  setVisualEnhancementsEnabled: (visualEnhancementsEnabled) => set({ visualEnhancementsEnabled }),
+  setEdgeContrastEnabled: (edgeContrastEnabled) => set({ edgeContrastEnabled }),
+  setEdgeContrastIntensity: (edgeContrastIntensity) => set({ edgeContrastIntensity }),
+  setContactShadingQuality: (contactShadingQuality) => set({ contactShadingQuality }),
+  setContactShadingIntensity: (contactShadingIntensity) => set({ contactShadingIntensity }),
+  setContactShadingRadius: (contactShadingRadius) => set({ contactShadingRadius }),
+  setSeparationLinesEnabled: (separationLinesEnabled) => set({ separationLinesEnabled }),
+  setSeparationLinesQuality: (separationLinesQuality) => set({ separationLinesQuality }),
+  setSeparationLinesIntensity: (separationLinesIntensity) => set({ separationLinesIntensity }),
+  setSeparationLinesRadius: (separationLinesRadius) => set({ separationLinesRadius }),
 });