@ifc-lite/viewer 1.7.0 → 1.9.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/useGeometryStreaming.ts

@@ -20,6 +20,8 @@ export interface UseGeometryStreamingParams {
   geometryBoundsRef: MutableRefObject<{ min: { x: number; y: number; z: number }; max: { x: number; y: number; z: number } }>;
   pendingColorUpdates: Map<number, [number, number, number, number]> | null;
   clearPendingColorUpdates: () => void;
+  // Clear color ref — color update renders must preserve theme background
+  clearColorRef: MutableRefObject<[number, number, number, number]>;
 }
 
 export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
@@ -32,6 +34,7 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
     geometryBoundsRef,
     pendingColorUpdates,
     clearPendingColorUpdates,
+    clearColorRef,
   } = params;
 
   // Track processed meshes for incremental updates
@@ -372,10 +375,12 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
     prevIsStreamingRef.current = isStreaming;
   }, [isStreaming, isInitialized]);
 
-  // Apply pending color updates to WebGPU scene
-  // Note: Color updates may arrive before viewport is initialized, so we wait
+  // Apply pending color updates as overlay batches (lens coloring).
+  // Uses scene.setColorOverrides() which builds overlay batches rendered on top
+  // of original geometry via depthCompare 'equal'. Original batches are NEVER
+  // modified, so clearing lens is instant (no batch rebuild).
   useEffect(() => {
-    if (!pendingColorUpdates || pendingColorUpdates.size === 0) return;
+    if (pendingColorUpdates === null) return;
 
     // Wait until viewport is initialized before applying color updates
     if (!isInitialized) return;
@@ -388,8 +393,23 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
     const scene = renderer.getScene();
 
     if (device && pipeline) {
-      scene.updateMeshColors(pendingColorUpdates, device, pipeline);
-      renderer.render();
+      if (pendingColorUpdates.size === 0) {
+        // Empty map = clear overrides (lens deactivated)
+        scene.clearColorOverrides();
+      } else {
+        // Non-empty map = set color overrides
+        scene.setColorOverrides(pendingColorUpdates, device, pipeline);
+      }
+      // Re-render with current theme background — render() without options
+      // defaults to black background.  Do NOT pass hiddenIds/isolatedIds here:
+      // visibility filtering causes partial batches which write depth only for
+      // visible elements, but overlay batches cover all geometry.  Without
+      // filtering, all original batches write depth for every entity, ensuring
+      // depthCompare 'equal' matches exactly for the overlay pass.
+      // The next render from useRenderUpdates will apply the correct visibility.
+      renderer.render({
+        clearColor: clearColorRef.current,
+      });
       clearPendingColorUpdates();
     }
   }, [pendingColorUpdates, isInitialized, clearPendingColorUpdates]);

package/src/hooks/ids/idsExportService.ts

@@ -331,7 +331,7 @@ export function buildReportHTML(report: IDSValidationReport, locale: SupportedLo
           <thead>
             <tr>
               <th class="col-status" onclick="sortTable(${i}, 0)">Status <span class="sort-icon">&#x25B4;&#x25BE;</span></th>
-              <th class="col-type" onclick="sortTable(${i}, 1)">IFC Type <span class="sort-icon">&#x25B4;&#x25BE;</span></th>
+              <th class="col-type" onclick="sortTable(${i}, 1)">IFC Class <span class="sort-icon">&#x25B4;&#x25BE;</span></th>
               <th class="col-name" onclick="sortTable(${i}, 2)">Name <span class="sort-icon">&#x25B4;&#x25BE;</span></th>
               <th class="col-globalid" onclick="sortTable(${i}, 3)">GlobalId <span class="sort-icon">&#x25B4;&#x25BE;</span></th>
               <th class="col-expressid" onclick="sortTable(${i}, 4)">ID <span class="sort-icon">&#x25B4;&#x25BE;</span></th>