@ifc-lite/viewer 1.6.1 → 1.8.0

package/src/components/viewer/tools/computePolygonArea.test.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/. */
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import {
+  computePolygonArea,
+  computePolygonPerimeter,
+  computePolygonCentroid,
+  formatArea,
+} from './computePolygonArea.js';
+
+describe('computePolygonArea', () => {
+  it('returns 0 for fewer than 3 points', () => {
+    assert.strictEqual(computePolygonArea([]), 0);
+    assert.strictEqual(computePolygonArea([{ x: 0, y: 0 }]), 0);
+    assert.strictEqual(computePolygonArea([{ x: 0, y: 0 }, { x: 1, y: 0 }]), 0);
+  });
+
+  it('computes area of a unit square', () => {
+    const square = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 1, y: 1 },
+      { x: 0, y: 1 },
+    ];
+    assert.strictEqual(computePolygonArea(square), 1);
+  });
+
+  it('computes area of a right triangle', () => {
+    const triangle = [
+      { x: 0, y: 0 },
+      { x: 4, y: 0 },
+      { x: 0, y: 3 },
+    ];
+    assert.strictEqual(computePolygonArea(triangle), 6);
+  });
+
+  it('computes area of a rectangle', () => {
+    const rect = [
+      { x: 0, y: 0 },
+      { x: 5, y: 0 },
+      { x: 5, y: 3 },
+      { x: 0, y: 3 },
+    ];
+    assert.strictEqual(computePolygonArea(rect), 15);
+  });
+
+  it('returns positive area regardless of winding direction', () => {
+    // Counter-clockwise
+    const ccw = [
+      { x: 0, y: 0 },
+      { x: 0, y: 2 },
+      { x: 2, y: 2 },
+      { x: 2, y: 0 },
+    ];
+    assert.strictEqual(computePolygonArea(ccw), 4);
+  });
+
+  it('computes area of an irregular polygon', () => {
+    // L-shaped polygon (6 vertices)
+    const lShape = [
+      { x: 0, y: 0 },
+      { x: 3, y: 0 },
+      { x: 3, y: 1 },
+      { x: 1, y: 1 },
+      { x: 1, y: 2 },
+      { x: 0, y: 2 },
+    ];
+    // Area: 3*1 + 1*1 = 4
+    assert.strictEqual(computePolygonArea(lShape), 4);
+  });
+});
+
+describe('computePolygonPerimeter', () => {
+  it('returns 0 for fewer than 2 points', () => {
+    assert.strictEqual(computePolygonPerimeter([]), 0);
+    assert.strictEqual(computePolygonPerimeter([{ x: 0, y: 0 }]), 0);
+  });
+
+  it('computes perimeter of a unit square', () => {
+    const square = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 1, y: 1 },
+      { x: 0, y: 1 },
+    ];
+    assert.strictEqual(computePolygonPerimeter(square), 4);
+  });
+
+  it('computes perimeter of a 3-4-5 right triangle', () => {
+    const triangle = [
+      { x: 0, y: 0 },
+      { x: 4, y: 0 },
+      { x: 0, y: 3 },
+    ];
+    assert.strictEqual(computePolygonPerimeter(triangle), 12);
+  });
+
+  it('computes perimeter of a rectangle', () => {
+    const rect = [
+      { x: 0, y: 0 },
+      { x: 5, y: 0 },
+      { x: 5, y: 3 },
+      { x: 0, y: 3 },
+    ];
+    assert.strictEqual(computePolygonPerimeter(rect), 16);
+  });
+});
+
+describe('computePolygonCentroid', () => {
+  it('returns origin for empty polygon', () => {
+    const c = computePolygonCentroid([]);
+    assert.strictEqual(c.x, 0);
+    assert.strictEqual(c.y, 0);
+  });
+
+  it('returns the point for a single point', () => {
+    const c = computePolygonCentroid([{ x: 3, y: 7 }]);
+    assert.strictEqual(c.x, 3);
+    assert.strictEqual(c.y, 7);
+  });
+
+  it('computes centroid of a unit square at origin', () => {
+    const square = [
+      { x: 0, y: 0 },
+      { x: 2, y: 0 },
+      { x: 2, y: 2 },
+      { x: 0, y: 2 },
+    ];
+    const c = computePolygonCentroid(square);
+    assert.strictEqual(c.x, 1);
+    assert.strictEqual(c.y, 1);
+  });
+
+  it('computes centroid of a triangle', () => {
+    const triangle = [
+      { x: 0, y: 0 },
+      { x: 6, y: 0 },
+      { x: 0, y: 6 },
+    ];
+    const c = computePolygonCentroid(triangle);
+    assert.strictEqual(c.x, 2);
+    assert.strictEqual(c.y, 2);
+  });
+});
+
+describe('formatArea', () => {
+  it('formats small areas in cm²', () => {
+    assert.strictEqual(formatArea(0.005), '50.0 cm²');
+    assert.strictEqual(formatArea(0.001), '10.0 cm²');
+  });
+
+  it('formats medium areas in m²', () => {
+    assert.strictEqual(formatArea(1), '1.00 m²');
+    assert.strictEqual(formatArea(25.5), '25.50 m²');
+    assert.strictEqual(formatArea(100), '100.00 m²');
+  });
+
+  it('formats large areas in hectares', () => {
+    assert.strictEqual(formatArea(10000), '1.00 ha');
+    assert.strictEqual(formatArea(50000), '5.00 ha');
+  });
+});

package/src/components/viewer/tools/computePolygonArea.ts

@@ -0,0 +1,72 @@
+/* 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/. */
+
+/**
+ * Polygon area and perimeter computation utilities for 2D annotations.
+ * Uses the shoelace formula for area calculation.
+ */
+
+interface Point2D {
+  x: number;
+  y: number;
+}
+
+/**
+ * Compute the signed area of a simple polygon using the shoelace formula.
+ * Returns absolute value (always positive).
+ */
+export function computePolygonArea(points: Point2D[]): number {
+  if (points.length < 3) return 0;
+  let area = 0;
+  const n = points.length;
+  for (let i = 0; i < n; i++) {
+    const j = (i + 1) % n;
+    area += points[i].x * points[j].y;
+    area -= points[j].x * points[i].y;
+  }
+  return Math.abs(area) / 2;
+}
+
+/**
+ * Compute the perimeter of a closed polygon.
+ */
+export function computePolygonPerimeter(points: Point2D[]): number {
+  if (points.length < 2) return 0;
+  let perimeter = 0;
+  const n = points.length;
+  for (let i = 0; i < n; i++) {
+    const j = (i + 1) % n;
+    const dx = points[j].x - points[i].x;
+    const dy = points[j].y - points[i].y;
+    perimeter += Math.sqrt(dx * dx + dy * dy);
+  }
+  return perimeter;
+}
+
+/**
+ * Compute the centroid (geometric center) of a polygon.
+ */
+export function computePolygonCentroid(points: Point2D[]): Point2D {
+  if (points.length === 0) return { x: 0, y: 0 };
+  let cx = 0;
+  let cy = 0;
+  for (const p of points) {
+    cx += p.x;
+    cy += p.y;
+  }
+  return { x: cx / points.length, y: cy / points.length };
+}
+
+/**
+ * Format an area value for display with appropriate units.
+ */
+export function formatArea(squareMeters: number): string {
+  if (squareMeters < 0.01) {
+    return `${(squareMeters * 10000).toFixed(1)} cm²`;
+  } else if (squareMeters < 10000) {
+    return `${squareMeters.toFixed(2)} m²`;
+  } else {
+    return `${(squareMeters / 10000).toFixed(2)} ha`;
+  }
+}

package/src/components/viewer/tools/formatDistance.ts

@@ -0,0 +1,18 @@
+/* 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/. */
+
+/**
+ * Format a distance in meters to a human-readable string with appropriate units
+ */
+export function formatDistance(meters: number): string {
+  if (meters < 0.01) {
+    return `${(meters * 1000).toFixed(1)} mm`;
+  } else if (meters < 1) {
+    return `${(meters * 100).toFixed(1)} cm`;
+  } else if (meters < 1000) {
+    return `${meters.toFixed(3)} m`;
+  } else {
+    return `${(meters / 1000).toFixed(2)} km`;
+  }
+}

package/src/components/viewer/tools/sectionConstants.ts

@@ -0,0 +1,14 @@
+/* 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/. */
+
+/**
+ * Shared constants for section tool components
+ */
+
+// Axis display info for semantic names
+export const AXIS_INFO = {
+  down: { label: 'Down', description: 'Horizontal cut (floor plan view)', icon: '\u2193' },
+  front: { label: 'Front', description: 'Vertical cut (elevation view)', icon: '\u2192' },
+  side: { label: 'Side', description: 'Vertical cut (side elevation)', icon: '\u2299' },
+} as const;

package/src/components/viewer/useAnimationLoop.ts

@@ -0,0 +1,166 @@
+/* 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/. */
+
+/**
+ * Animation loop hook for the 3D viewport
+ * Handles requestAnimationFrame loop, camera update, ViewCube sync
+ */
+
+import { useEffect, type MutableRefObject, type RefObject } from 'react';
+import type { Renderer } from '@ifc-lite/renderer';
+import type { SectionPlane } from '@/store';
+
+export interface UseAnimationLoopParams {
+  canvasRef: RefObject<HTMLCanvasElement | null>;
+  rendererRef: MutableRefObject<Renderer | null>;
+  isInitialized: boolean;
+  animationFrameRef: MutableRefObject<number | null>;
+  lastFrameTimeRef: MutableRefObject<number>;
+  mouseIsDraggingRef: MutableRefObject<boolean>;
+  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>;
+  lastCameraStateRef: MutableRefObject<{
+    position: { x: number; y: number; z: number };
+    rotation: { azimuth: number; elevation: number };
+    distance: number;
+    canvasWidth: number;
+    canvasHeight: number;
+  } | null>;
+  updateCameraRotationRealtime: (rotation: { azimuth: number; elevation: number }) => void;
+  calculateScale: () => void;
+  updateMeasurementScreenCoords: (projector: (worldPos: { x: number; y: number; z: number }) => { x: number; y: number } | null) => void;
+  hasPendingMeasurements: () => boolean;
+}
+
+export function useAnimationLoop(params: UseAnimationLoopParams): void {
+  const {
+    canvasRef,
+    rendererRef,
+    isInitialized,
+    animationFrameRef,
+    lastFrameTimeRef,
+    mouseIsDraggingRef,
+    activeToolRef,
+    hiddenEntitiesRef,
+    isolatedEntitiesRef,
+    selectedEntityIdRef,
+    selectedModelIndexRef,
+    clearColorRef,
+    sectionPlaneRef,
+    sectionRangeRef,
+    lastCameraStateRef,
+    updateCameraRotationRealtime,
+    calculateScale,
+    updateMeasurementScreenCoords,
+    hasPendingMeasurements,
+  } = params;
+
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    const canvas = canvasRef.current;
+    if (!renderer || !canvas || !isInitialized) return;
+
+    const camera = renderer.getCamera();
+    let aborted = false;
+
+    // Animation loop - update ViewCube in real-time
+    let lastRotationUpdate = 0;
+    let lastScaleUpdate = 0;
+    const animate = (currentTime: number) => {
+      if (aborted) return;
+
+      const deltaTime = currentTime - lastFrameTimeRef.current;
+      lastFrameTimeRef.current = currentTime;
+
+      const isAnimating = camera.update(deltaTime);
+      if (isAnimating) {
+        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,
+        });
+        // Update ViewCube during camera animation (e.g., preset view transitions)
+        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);
+            });
+          }
+        }
+      }
+
+      animationFrameRef.current = requestAnimationFrame(animate);
+    };
+    lastFrameTimeRef.current = performance.now();
+    animationFrameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      aborted = true;
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+  }, [isInitialized]);
+}
+
+export default useAnimationLoop;