@ifc-lite/viewer 1.16.0 → 1.17.0

package/src/components/viewer/selectionHandlers.ts

@@ -0,0 +1,86 @@
+/* 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/. */
+
+/**
+ * Selection handler functions extracted from useMouseControls.
+ * Handles click/double-click selection and context menu interactions.
+ * Pure functions that operate on a MouseHandlerContext — no React dependency.
+ */
+
+import type { MouseHandlerContext } from './mouseHandlerTypes.js';
+
+/**
+ * Handle click event for selection (single click and double click).
+ * Manages click timing for double-click detection and Ctrl/Cmd multi-select.
+ */
+export async function handleSelectionClick(ctx: MouseHandlerContext, e: MouseEvent): Promise<void> {
+  const { canvas, renderer, mouseState } = ctx;
+  const rect = canvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+  const tool = ctx.activeToolRef.current;
+
+  // Skip selection if user was dragging (orbiting/panning)
+  if (mouseState.didDrag) {
+    return;
+  }
+
+  // Skip selection for pan/walk tools - they don't select
+  if (tool === 'pan' || tool === 'walk') {
+    return;
+  }
+
+  // Measure tool now uses drag interaction (see mousedown/mousemove/mouseup)
+  if (tool === 'measure') {
+    return; // Skip click handling for measure tool
+  }
+
+  const now = Date.now();
+  const timeSinceLastClick = now - ctx.lastClickTimeRef.current;
+  const clickPos = { x, y };
+
+  if (ctx.lastClickPosRef.current &&
+    timeSinceLastClick < 300 &&
+    Math.abs(clickPos.x - ctx.lastClickPosRef.current.x) < 5 &&
+    Math.abs(clickPos.y - ctx.lastClickPosRef.current.y) < 5) {
+    // Double-click - isolate element
+    // Uses visibility filtering so only visible elements can be selected
+    const pickResult = await renderer.pick(x, y, ctx.getPickOptions());
+    if (pickResult) {
+      ctx.handlePickForSelection(pickResult);
+    }
+    ctx.lastClickTimeRef.current = 0;
+    ctx.lastClickPosRef.current = null;
+  } else {
+    // Single click - uses visibility filtering so only visible elements can be selected
+    const pickResult = await renderer.pick(x, y, ctx.getPickOptions());
+
+    // Multi-selection with Ctrl/Cmd
+    if (e.ctrlKey || e.metaKey) {
+      if (pickResult) {
+        ctx.toggleSelection(pickResult.expressId);
+      }
+    } else {
+      ctx.handlePickForSelection(pickResult);
+    }
+
+    ctx.lastClickTimeRef.current = now;
+    ctx.lastClickPosRef.current = clickPos;
+  }
+}
+
+/**
+ * Handle context menu event (right-click).
+ * Picks the entity under the cursor and opens the context menu.
+ */
+export async function handleContextMenu(ctx: MouseHandlerContext, e: MouseEvent): Promise<void> {
+  e.preventDefault();
+  const { canvas, renderer } = ctx;
+  const rect = canvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+  // Uses visibility filtering so hidden elements don't appear in context menu
+  const pickResult = await renderer.pick(x, y, ctx.getPickOptions());
+  ctx.openContextMenu(pickResult?.expressId ?? null, e.clientX, e.clientY);
+}

package/src/components/viewer/useAnimationLoop.ts

@@ -3,12 +3,22 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 /**
- * Animation loop hook for the 3D viewport
- * Handles requestAnimationFrame loop, camera update, ViewCube sync
+ * THE render loop for the 3D viewport.
+ *
+ * This is the single place where renderer.render() is called during normal
+ * operation.  Everything else (mouse, touch, keyboard, streaming, visibility
+ * changes, theme, lens) calls renderer.requestRender() to set a dirty flag.
+ *
+ * Each frame:
+ *   1. Drain the scene's mesh queue (streaming uploads with time budget).
+ *   2. Update camera (animation / inertia).
+ *   3. If dirty OR animating → render with current state from refs.
+ *   4. Sync ViewCube, scale bar, measurements.
  */
 
 import { useEffect, type MutableRefObject, type RefObject } from 'react';
 import type { Renderer, VisualEnhancementOptions } from '@ifc-lite/renderer';
+import type { CoordinateInfo } from '@ifc-lite/geometry';
 import type { SectionPlane } from '@/store';
 
 export interface UseAnimationLoopParams {
@@ -27,6 +37,9 @@ export interface UseAnimationLoopParams {
   visualEnhancementRef: MutableRefObject<VisualEnhancementOptions>;
   sectionPlaneRef: MutableRefObject<SectionPlane>;
   sectionRangeRef: MutableRefObject<{ min: number; max: number } | null>;
+  selectedEntityIdsRef: MutableRefObject<Set<number> | undefined>;
+  coordinateInfoRef: MutableRefObject<CoordinateInfo | undefined>;
+  isInteractingRef: MutableRefObject<boolean>;
   lastCameraStateRef: MutableRefObject<{
     position: { x: number; y: number; z: number };
     rotation: { azimuth: number; elevation: number };
@@ -57,6 +70,9 @@ export function useAnimationLoop(params: UseAnimationLoopParams): void {
     visualEnhancementRef,
     sectionPlaneRef,
     sectionRangeRef,
+    selectedEntityIdsRef,
+    coordinateInfoRef,
+    isInteractingRef,
     lastCameraStateRef,
     updateCameraRotationRealtime,
     calculateScale,
@@ -70,89 +86,145 @@ export function useAnimationLoop(params: UseAnimationLoopParams): void {
     if (!renderer || !canvas || !isInitialized) return;
 
     const camera = renderer.getCamera();
+    const scene = renderer.getScene();
     let aborted = false;
 
-    // Animation loop - update ViewCube in real-time
     let lastRotationUpdate = 0;
     let lastScaleUpdate = 0;
+    let lastRenderTime = 0;
+
+    // Adaptive render throttle: large models get fewer FPS during continuous
+    // rendering (interaction + inertia) to prevent the main thread from being
+    // overwhelmed. Model "size" is measured by total triangle count across all
+    // batched geometry — individual mesh count is near 0 for batched models.
+    let continuousThrottleMs = 0; // 0 = no throttle (small models)
+
+    function updateThrottle() {
+      let totalIndices = 0;
+      for (const batch of scene.getBatchedMeshes()) {
+        totalIndices += batch.indexCount;
+      }
+      // Also account for individual meshes
+      totalIndices += scene.getMeshes().reduce((s, m) => s + (m.indexCount ?? 0), 0);
+      const triangles = totalIndices / 3;
+      if (triangles > 5_000_000) {
+        continuousThrottleMs = 33; // ~30 fps — huge models (>5M triangles)
+      } else if (triangles > 1_000_000) {
+        continuousThrottleMs = 25; // ~40 fps — large models (>1M triangles)
+      } else {
+        continuousThrottleMs = 0;
+      }
+    }
+    updateThrottle();
+
     const animate = (currentTime: number) => {
       if (aborted) return;
 
       const deltaTime = currentTime - lastFrameTimeRef.current;
       lastFrameTimeRef.current = currentTime;
 
+      // 1. Drain mesh queue (streaming GPU uploads)
+      let queueFlushed = false;
+      if (scene.hasQueuedMeshes()) {
+        const device = renderer.getGPUDevice();
+        const pipeline = renderer.getPipeline();
+        if (device && pipeline) {
+          queueFlushed = scene.flushPending(device, pipeline);
+          if (queueFlushed) {
+            renderer.clearCaches();
+            updateThrottle();
+          }
+        }
+      }
+
+      // 2. Camera update (animation / inertia)
       const isAnimating = camera.update(deltaTime);
-      if (isAnimating) {
+
+      // 3. Render if anything changed
+      // Peek first — only consume the flag when we actually commit to rendering.
+      // This prevents a throttled frame from eating the dirty flag.
+      const renderRequested = renderer.peekRenderRequest();
+
+      // Throttle render rate during continuous rendering (interaction + inertia)
+      // for large models. Without this, 200K+ mesh models at 60fps overwhelm
+      // the main thread and freeze the tab. Inertia alone can run 60+ frames
+      // after mouseup, each requiring a full GPU render pass.
+      const isContinuousRender = isInteractingRef.current || isAnimating;
+      const throttled = isContinuousRender &&
+        continuousThrottleMs > 0 &&
+        (currentTime - lastRenderTime) < continuousThrottleMs;
+
+      if ((isAnimating || renderRequested || queueFlushed) && !throttled) {
+        renderer.consumeRenderRequest();
         renderer.render({
           hiddenIds: hiddenEntitiesRef.current,
           isolatedIds: isolatedEntitiesRef.current,
           selectedId: selectedEntityIdRef.current,
+          selectedIds: selectedEntityIdsRef.current,
           selectedModelIndex: selectedModelIndexRef.current,
           clearColor: clearColorRef.current,
           visualEnhancement: visualEnhancementRef.current,
+          isInteracting: isInteractingRef.current || isAnimating,
+          buildingRotation: coordinateInfoRef.current?.buildingRotation,
           sectionPlane: activeToolRef.current === 'section' ? {
             ...sectionPlaneRef.current,
             min: sectionRangeRef.current?.min,
             max: sectionRangeRef.current?.max,
           } : undefined,
         });
-        // Update ViewCube during camera animation (e.g., preset view transitions)
+        lastRenderTime = currentTime;
+      }
+
+      // 4. Sync UI widgets
+      if (isAnimating || renderRequested || queueFlushed) {
         updateCameraRotationRealtime(camera.getRotation());
         calculateScale();
       } else if (!mouseIsDraggingRef.current && currentTime - lastRotationUpdate > 500) {
-        // Update camera rotation for ViewCube when not dragging (throttled to every 500ms when idle)
         updateCameraRotationRealtime(camera.getRotation());
         lastRotationUpdate = currentTime;
       }
 
-      // Update scale bar (throttled to every 500ms - scale rarely needs frequent updates)
       if (currentTime - lastScaleUpdate > 500) {
         calculateScale();
         lastScaleUpdate = currentTime;
       }
 
-      // Update measurement screen coordinates only when:
-      // 1. Measure tool is active (not in other modes)
-      // 2. Measurements exist
-      // 3. Camera actually changed
-      // This prevents unnecessary store updates and re-renders when not measuring
-      if (activeToolRef.current === 'measure') {
-        if (hasPendingMeasurements()) {
-          const cameraPos = camera.getPosition();
-          const cameraRot = camera.getRotation();
-          const cameraDist = camera.getDistance();
-          const currentCameraState = {
-            position: cameraPos,
-            rotation: cameraRot,
-            distance: cameraDist,
-            canvasWidth: canvas.width,
-            canvasHeight: canvas.height,
-          };
-
-          // Check if camera state changed
-          const lastState = lastCameraStateRef.current;
-          const cameraChanged =
-            !lastState ||
-            lastState.position.x !== currentCameraState.position.x ||
-            lastState.position.y !== currentCameraState.position.y ||
-            lastState.position.z !== currentCameraState.position.z ||
-            lastState.rotation.azimuth !== currentCameraState.rotation.azimuth ||
-            lastState.rotation.elevation !== currentCameraState.rotation.elevation ||
-            lastState.distance !== currentCameraState.distance ||
-            lastState.canvasWidth !== currentCameraState.canvasWidth ||
-            lastState.canvasHeight !== currentCameraState.canvasHeight;
-
-          if (cameraChanged) {
-            lastCameraStateRef.current = currentCameraState;
-            updateMeasurementScreenCoords((worldPos) => {
-              return camera.projectToScreen(worldPos, canvas.width, canvas.height);
-            });
-          }
+      // 5. Measurement screen coords
+      if (activeToolRef.current === 'measure' && hasPendingMeasurements()) {
+        const cameraPos = camera.getPosition();
+        const cameraRot = camera.getRotation();
+        const cameraDist = camera.getDistance();
+        const currentCameraState = {
+          position: cameraPos,
+          rotation: cameraRot,
+          distance: cameraDist,
+          canvasWidth: canvas.width,
+          canvasHeight: canvas.height,
+        };
+
+        const lastState = lastCameraStateRef.current;
+        const cameraChanged =
+          !lastState ||
+          lastState.position.x !== currentCameraState.position.x ||
+          lastState.position.y !== currentCameraState.position.y ||
+          lastState.position.z !== currentCameraState.position.z ||
+          lastState.rotation.azimuth !== currentCameraState.rotation.azimuth ||
+          lastState.rotation.elevation !== currentCameraState.rotation.elevation ||
+          lastState.distance !== currentCameraState.distance ||
+          lastState.canvasWidth !== currentCameraState.canvasWidth ||
+          lastState.canvasHeight !== currentCameraState.canvasHeight;
+
+        if (cameraChanged) {
+          lastCameraStateRef.current = currentCameraState;
+          updateMeasurementScreenCoords((worldPos) => {
+            return camera.projectToScreen(worldPos, canvas.width, canvas.height);
+          });
         }
       }
 
       animationFrameRef.current = requestAnimationFrame(animate);
     };
+
     lastFrameTimeRef.current = performance.now();
     animationFrameRef.current = requestAnimationFrame(animate);