@ifc-lite/viewer 1.6.0 → 1.7.0

package/src/components/viewer/useRenderUpdates.ts

@@ -0,0 +1,165 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Render updates hook for the 3D viewport
+ * Handles visibility/selection/section/hover state re-render effects
+ */
+
+import { useEffect, type MutableRefObject } from 'react';
+import type { Renderer, CutPolygon2D, DrawingLine2D } from '@ifc-lite/renderer';
+import type { CoordinateInfo } from '@ifc-lite/geometry';
+import type { Drawing2D } from '@ifc-lite/drawing-2d';
+import type { SectionPlane } from '@/store';
+import { getThemeClearColor } from '../../utils/viewportUtils.js';
+
+export interface UseRenderUpdatesParams {
+  rendererRef: MutableRefObject<Renderer | null>;
+  isInitialized: boolean;
+
+  // Theme
+  theme: string;
+  clearColorRef: MutableRefObject<[number, number, number, number]>;
+
+  // Visibility/selection state (reactive values, not refs)
+  hiddenEntities: Set<number>;
+  isolatedEntities: Set<number> | null;
+  selectedEntityId: number | null;
+  selectedEntityIds: Set<number> | undefined;
+  selectedModelIndex: number | undefined;
+  activeTool: string;
+  sectionPlane: SectionPlane;
+  sectionRange: { min: number; max: number } | null;
+  coordinateInfo?: CoordinateInfo;
+
+  // Refs for theme re-render
+  hiddenEntitiesRef: MutableRefObject<Set<number>>;
+  isolatedEntitiesRef: MutableRefObject<Set<number> | null>;
+  selectedEntityIdRef: MutableRefObject<number | null>;
+  selectedModelIndexRef: MutableRefObject<number | undefined>;
+  selectedEntityIdsRef: MutableRefObject<Set<number> | undefined>;
+  sectionPlaneRef: MutableRefObject<SectionPlane>;
+  sectionRangeRef: MutableRefObject<{ min: number; max: number } | null>;
+  activeToolRef: MutableRefObject<string>;
+
+  // Drawing 2D
+  drawing2D: Drawing2D | null;
+  show3DOverlay: boolean;
+}
+
+export function useRenderUpdates(params: UseRenderUpdatesParams): void {
+  const {
+    rendererRef,
+    isInitialized,
+    theme,
+    clearColorRef,
+    hiddenEntities,
+    isolatedEntities,
+    selectedEntityId,
+    selectedEntityIds,
+    selectedModelIndex,
+    activeTool,
+    sectionPlane,
+    sectionRange,
+    coordinateInfo,
+    hiddenEntitiesRef,
+    isolatedEntitiesRef,
+    selectedEntityIdRef,
+    selectedModelIndexRef,
+    selectedEntityIdsRef,
+    sectionPlaneRef,
+    sectionRangeRef,
+    activeToolRef,
+    drawing2D,
+    show3DOverlay,
+  } = params;
+
+  // Theme-aware clear color update
+  useEffect(() => {
+    // Update clear color when theme changes
+    clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark');
+    // Re-render with new clear color
+    const renderer = rendererRef.current;
+    if (renderer && isInitialized) {
+      renderer.render({
+        hiddenIds: hiddenEntitiesRef.current,
+        isolatedIds: isolatedEntitiesRef.current,
+        selectedId: selectedEntityIdRef.current,
+        selectedModelIndex: selectedModelIndexRef.current,
+        clearColor: clearColorRef.current,
+      });
+    }
+  }, [theme, isInitialized]);
+
+  // 2D section overlay: upload drawing data to renderer when available
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    if (!renderer || !isInitialized) return;
+
+    // Only show overlay when section tool is active, we have a drawing, AND 3D overlay is enabled
+    if (activeTool === 'section' && drawing2D && drawing2D.cutPolygons.length > 0 && show3DOverlay) {
+      // Convert Drawing2D format to renderer format
+      const polygons: CutPolygon2D[] = drawing2D.cutPolygons.map((cp) => ({
+        polygon: cp.polygon,
+        ifcType: cp.ifcType,
+        expressId: cp.entityId,  // DrawingPolygon uses entityId
+      }));
+
+      // No hatching lines for 3D overlay (too dense)
+      const lines: DrawingLine2D[] = [];
+
+      // Upload to renderer - will be drawn on the section plane
+      // Pass sectionRange to match exactly what render() uses for section plane position
+      renderer.uploadSection2DOverlay(
+        polygons,
+        lines,
+        sectionPlane.axis,
+        sectionPlane.position,
+        sectionRangeRef.current ?? undefined,  // Same range as section plane
+        sectionPlane.flipped
+      );
+    } else {
+      // Clear overlay when not in section mode, no drawing, or overlay disabled
+      renderer.clearSection2DOverlay();
+    }
+
+    // Re-render to show/hide overlay
+    renderer.render({
+      hiddenIds: hiddenEntitiesRef.current,
+      isolatedIds: isolatedEntitiesRef.current,
+      selectedId: selectedEntityIdRef.current,
+      selectedIds: selectedEntityIdsRef.current,
+      selectedModelIndex: selectedModelIndexRef.current,
+      clearColor: clearColorRef.current,
+      sectionPlane: activeTool === 'section' ? {
+        ...sectionPlane,
+        min: sectionRangeRef.current?.min,
+        max: sectionRangeRef.current?.max,
+      } : undefined,
+    });
+  }, [drawing2D, activeTool, sectionPlane, isInitialized, coordinateInfo, show3DOverlay]);
+
+  // Re-render when visibility, selection, or section plane changes
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    if (!renderer || !isInitialized) return;
+
+    renderer.render({
+      hiddenIds: hiddenEntities,
+      isolatedIds: isolatedEntities,
+      selectedId: selectedEntityId,
+      selectedIds: selectedEntityIds,
+      selectedModelIndex,
+      clearColor: clearColorRef.current,
+      sectionPlane: activeTool === 'section' ? {
+        ...sectionPlane,
+        min: sectionRange?.min,
+        max: sectionRange?.max,
+      } : undefined,
+      buildingRotation: coordinateInfo?.buildingRotation,
+    });
+  }, [hiddenEntities, isolatedEntities, selectedEntityId, selectedEntityIds, selectedModelIndex, isInitialized, sectionPlane, activeTool, sectionRange, coordinateInfo?.buildingRotation]);
+}
+
+export default useRenderUpdates;

package/src/components/viewer/useTouchControls.ts

@@ -0,0 +1,245 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Touch controls hook for the 3D viewport
+ * Handles multi-touch gesture handling (orbit, pinch-zoom, pan, tap-to-select)
+ */
+
+import { useEffect, type MutableRefObject, type RefObject } from 'react';
+import type { Renderer, PickResult } from '@ifc-lite/renderer';
+import type { MeshData } from '@ifc-lite/geometry';
+import type { SectionPlane } from '@/store';
+import { getEntityCenter } from '../../utils/viewportUtils.js';
+
+export interface TouchState {
+  touches: Touch[];
+  lastDistance: number;
+  lastCenter: { x: number; y: number };
+  tapStartTime: number;
+  tapStartPos: { x: number; y: number };
+  didMove: boolean;
+  multiTouch: boolean;
+}
+
+export interface UseTouchControlsParams {
+  canvasRef: RefObject<HTMLCanvasElement | null>;
+  rendererRef: MutableRefObject<Renderer | null>;
+  isInitialized: boolean;
+  touchStateRef: MutableRefObject<TouchState>;
+  activeToolRef: MutableRefObject<string>;
+  hiddenEntitiesRef: MutableRefObject<Set<number>>;
+  isolatedEntitiesRef: MutableRefObject<Set<number> | null>;
+  selectedEntityIdRef: MutableRefObject<number | null>;
+  selectedModelIndexRef: MutableRefObject<number | undefined>;
+  clearColorRef: MutableRefObject<[number, number, number, number]>;
+  sectionPlaneRef: MutableRefObject<SectionPlane>;
+  sectionRangeRef: MutableRefObject<{ min: number; max: number } | null>;
+  geometryRef: MutableRefObject<MeshData[] | null>;
+  handlePickForSelection: (pickResult: PickResult | null) => void;
+  getPickOptions: () => { isStreaming: boolean; hiddenIds: Set<number>; isolatedIds: Set<number> | null };
+}
+
+export function useTouchControls(params: UseTouchControlsParams): void {
+  const {
+    canvasRef,
+    rendererRef,
+    isInitialized,
+    touchStateRef,
+    activeToolRef,
+    hiddenEntitiesRef,
+    isolatedEntitiesRef,
+    selectedEntityIdRef,
+    selectedModelIndexRef,
+    clearColorRef,
+    sectionPlaneRef,
+    sectionRangeRef,
+    geometryRef,
+    handlePickForSelection,
+    getPickOptions,
+  } = params;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const renderer = rendererRef.current;
+    if (!canvas || !renderer || !isInitialized) return;
+
+    const camera = renderer.getCamera();
+    const touchState = touchStateRef.current;
+
+    const handleTouchStart = async (e: TouchEvent) => {
+      e.preventDefault();
+      touchState.touches = Array.from(e.touches);
+
+      // Track multi-touch to prevent false tap-select after pinch/zoom
+      if (touchState.touches.length > 1) {
+        touchState.multiTouch = true;
+      }
+
+      if (touchState.touches.length === 1 && !touchState.multiTouch) {
+        touchState.lastCenter = {
+          x: touchState.touches[0].clientX,
+          y: touchState.touches[0].clientY,
+        };
+        // Record tap start for tap-to-select detection
+        touchState.tapStartTime = Date.now();
+        touchState.tapStartPos = {
+          x: touchState.touches[0].clientX,
+          y: touchState.touches[0].clientY,
+        };
+        touchState.didMove = false;
+
+        // Set orbit pivot to what user touches (same as mouse click behavior)
+        const rect = canvas.getBoundingClientRect();
+        const x = touchState.touches[0].clientX - rect.left;
+        const y = touchState.touches[0].clientY - rect.top;
+
+        // Uses visibility filtering so hidden elements don't affect orbit pivot
+        const pickResult = await renderer.pick(x, y, getPickOptions());
+        if (pickResult !== null) {
+          const center = getEntityCenter(geometryRef.current, pickResult.expressId);
+          if (center) {
+            camera.setOrbitPivot(center);
+          } else {
+            camera.setOrbitPivot(null);
+          }
+        } else {
+          camera.setOrbitPivot(null);
+        }
+      } else if (touchState.touches.length === 1) {
+        // Single touch after multi-touch - just update center for orbit
+        touchState.lastCenter = {
+          x: touchState.touches[0].clientX,
+          y: touchState.touches[0].clientY,
+        };
+      } else if (touchState.touches.length === 2) {
+        const dx = touchState.touches[1].clientX - touchState.touches[0].clientX;
+        const dy = touchState.touches[1].clientY - touchState.touches[0].clientY;
+        touchState.lastDistance = Math.sqrt(dx * dx + dy * dy);
+        touchState.lastCenter = {
+          x: (touchState.touches[0].clientX + touchState.touches[1].clientX) / 2,
+          y: (touchState.touches[0].clientY + touchState.touches[1].clientY) / 2,
+        };
+      }
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      e.preventDefault();
+      touchState.touches = Array.from(e.touches);
+
+      if (touchState.touches.length === 1) {
+        const dx = touchState.touches[0].clientX - touchState.lastCenter.x;
+        const dy = touchState.touches[0].clientY - touchState.lastCenter.y;
+
+        // Mark as moved if significant movement (prevents tap-select during drag)
+        const totalDx = touchState.touches[0].clientX - touchState.tapStartPos.x;
+        const totalDy = touchState.touches[0].clientY - touchState.tapStartPos.y;
+        if (Math.abs(totalDx) > 10 || Math.abs(totalDy) > 10) {
+          touchState.didMove = true;
+        }
+
+        camera.orbit(dx, dy, false);
+        touchState.lastCenter = {
+          x: touchState.touches[0].clientX,
+          y: touchState.touches[0].clientY,
+        };
+        renderer.render({
+          hiddenIds: hiddenEntitiesRef.current,
+          isolatedIds: isolatedEntitiesRef.current,
+          selectedId: selectedEntityIdRef.current,
+          selectedModelIndex: selectedModelIndexRef.current,
+          clearColor: clearColorRef.current,
+          sectionPlane: activeToolRef.current === 'section' ? {
+            ...sectionPlaneRef.current,
+            min: sectionRangeRef.current?.min,
+            max: sectionRangeRef.current?.max,
+          } : undefined,
+        });
+      } else if (touchState.touches.length === 2) {
+        const dx1 = touchState.touches[1].clientX - touchState.touches[0].clientX;
+        const dy1 = touchState.touches[1].clientY - touchState.touches[0].clientY;
+        const distance = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+
+        const centerX = (touchState.touches[0].clientX + touchState.touches[1].clientX) / 2;
+        const centerY = (touchState.touches[0].clientY + touchState.touches[1].clientY) / 2;
+        const panDx = centerX - touchState.lastCenter.x;
+        const panDy = centerY - touchState.lastCenter.y;
+        camera.pan(panDx, panDy, false);
+
+        const zoomDelta = distance - touchState.lastDistance;
+        const rect = canvas.getBoundingClientRect();
+        camera.zoom(zoomDelta * 10, false, centerX - rect.left, centerY - rect.top, canvas.width, canvas.height);
+
+        touchState.lastDistance = distance;
+        touchState.lastCenter = { x: centerX, y: centerY };
+        renderer.render({
+          hiddenIds: hiddenEntitiesRef.current,
+          isolatedIds: isolatedEntitiesRef.current,
+          selectedId: selectedEntityIdRef.current,
+          selectedModelIndex: selectedModelIndexRef.current,
+          clearColor: clearColorRef.current,
+          sectionPlane: activeToolRef.current === 'section' ? {
+            ...sectionPlaneRef.current,
+            min: sectionRangeRef.current?.min,
+            max: sectionRangeRef.current?.max,
+          } : undefined,
+        });
+      }
+    };
+
+    const handleTouchEnd = async (e: TouchEvent) => {
+      e.preventDefault();
+      const previousTouchCount = touchState.touches.length;
+      const wasMultiTouch = touchState.multiTouch;
+      touchState.touches = Array.from(e.touches);
+
+      if (touchState.touches.length === 0) {
+        camera.stopInertia();
+        camera.setOrbitPivot(null);
+
+        // Tap-to-select: detect quick tap without significant movement
+        const tapDuration = Date.now() - touchState.tapStartTime;
+        const tool = activeToolRef.current;
+
+        // Only select if:
+        // - Was a single-finger touch (not after multi-touch gesture)
+        // - Tap was quick (< 300ms)
+        // - Didn't move significantly
+        // - Tool supports selection (not orbit/pan/walk/measure)
+        if (
+          previousTouchCount === 1 &&
+          !wasMultiTouch &&
+          tapDuration < 300 &&
+          !touchState.didMove &&
+          tool !== 'orbit' &&
+          tool !== 'pan' &&
+          tool !== 'walk' &&
+          tool !== 'measure'
+        ) {
+          const rect = canvas.getBoundingClientRect();
+          const x = touchState.tapStartPos.x - rect.left;
+          const y = touchState.tapStartPos.y - rect.top;
+
+          const pickResult = await renderer.pick(x, y, getPickOptions());
+          handlePickForSelection(pickResult);
+        }
+
+        // Reset multi-touch flag when all touches end
+        touchState.multiTouch = false;
+      }
+    };
+
+    canvas.addEventListener('touchstart', handleTouchStart);
+    canvas.addEventListener('touchmove', handleTouchMove);
+    canvas.addEventListener('touchend', handleTouchEnd);
+
+    return () => {
+      canvas.removeEventListener('touchstart', handleTouchStart);
+      canvas.removeEventListener('touchmove', handleTouchMove);
+      canvas.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [isInitialized]);
+}
+
+export default useTouchControls;

package/src/hooks/ids/idsColorSystem.ts

@@ -0,0 +1,125 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * IDS Color System
+ *
+ * Pure functions that apply and clear validation result color overrides
+ * on renderer meshes. No React dependencies.
+ */
+
+import type { IDSValidationReport } from '@ifc-lite/ids';
+import type { GeometryResult } from '@ifc-lite/geometry';
+
+/** RGBA color tuple in 0-1 range */
+export type ColorTuple = [number, number, number, number];
+
+/** Stable default color constants */
+export const DEFAULT_FAILED_COLOR: ColorTuple = [0.9, 0.2, 0.2, 1.0];
+export const DEFAULT_PASSED_COLOR: ColorTuple = [0.2, 0.8, 0.2, 1.0];
+
+/** Display options controlling which entities get color overrides */
+export interface ColorDisplayOptions {
+  highlightFailed: boolean;
+  highlightPassed: boolean;
+  failedColor: ColorTuple;
+  passedColor: ColorTuple;
+}
+
+/** Model info for resolving express IDs to global IDs */
+export interface ColorModelInfo {
+  idOffset?: number;
+}
+
+/**
+ * Build a map of color overrides from validation results.
+ *
+ * Also captures original colors from geometry (only if originalColors is empty)
+ * so they can be restored later via `buildRestoreColorUpdates`.
+ *
+ * @param report - The IDS validation report
+ * @param models - Map of model ID to model info (for ID offset resolution)
+ * @param displayOptions - Controls which highlights are active and their colors
+ * @param defaultFailedColor - Fallback failed color
+ * @param defaultPassedColor - Fallback passed color
+ * @param geometryResult - Current geometry for capturing original colors (may be null)
+ * @param originalColors - Mutable map to store original colors into (only populated if empty)
+ * @returns Map of globalId to color tuple for updateMeshColors
+ */
+export function buildValidationColorUpdates(
+  report: IDSValidationReport,
+  models: ReadonlyMap<string, ColorModelInfo>,
+  displayOptions: ColorDisplayOptions,
+  defaultFailedColor: ColorTuple,
+  defaultPassedColor: ColorTuple,
+  geometryResult: GeometryResult | null | undefined,
+  originalColors: Map<number, ColorTuple>
+): Map<number, ColorTuple> {
+  const colorUpdates = new Map<number, ColorTuple>();
+
+  // Get color options
+  const failedClr = displayOptions.failedColor ?? defaultFailedColor;
+  const passedClr = displayOptions.passedColor ?? defaultPassedColor;
+
+  // Build a set of globalIds we'll be updating
+  const globalIdsToUpdate = new Set<number>();
+  for (const specResult of report.specificationResults) {
+    for (const entityResult of specResult.entityResults) {
+      const model = models.get(entityResult.modelId);
+      const globalId = model
+        ? entityResult.expressId + (model.idOffset ?? 0)
+        : entityResult.expressId;
+      globalIdsToUpdate.add(globalId);
+    }
+  }
+
+  // Capture original colors before applying overrides (only if not already captured)
+  if (geometryResult?.meshes && originalColors.size === 0) {
+    for (const mesh of geometryResult.meshes) {
+      if (globalIdsToUpdate.has(mesh.expressId)) {
+        originalColors.set(mesh.expressId, [...mesh.color] as ColorTuple);
+      }
+    }
+  }
+
+  // Process all entity results
+  for (const specResult of report.specificationResults) {
+    for (const entityResult of specResult.entityResults) {
+      const model = models.get(entityResult.modelId);
+      const globalId = model
+        ? entityResult.expressId + (model.idOffset ?? 0)
+        : entityResult.expressId;
+
+      if (entityResult.passed && displayOptions.highlightPassed) {
+        colorUpdates.set(globalId, passedClr);
+      } else if (!entityResult.passed && displayOptions.highlightFailed) {
+        colorUpdates.set(globalId, failedClr);
+      }
+    }
+  }
+
+  return colorUpdates;
+}
+
+/**
+ * Build a map of color updates to restore original colors.
+ *
+ * @param originalColors - Map of globalId to original color (will be cleared after building)
+ * @returns Map of globalId to original color tuple for updateMeshColors, or null if nothing to restore
+ */
+export function buildRestoreColorUpdates(
+  originalColors: Map<number, ColorTuple>
+): Map<number, ColorTuple> | null {
+  if (originalColors.size === 0) {
+    return null;
+  }
+
+  // Create a new map with the original colors to restore
+  const colorUpdates = new Map<number, ColorTuple>(originalColors);
+
+  // Clear the stored original colors after building restore map
+  originalColors.clear();
+
+  return colorUpdates;
+}