@ifc-lite/viewer 1.7.0 → 1.8.0

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

@@ -0,0 +1,275 @@
+/* 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/. */
+
+/**
+ * Revision cloud (scalloped border) path generation.
+ * Generates arc data for drawing cloud annotations on a canvas or SVG.
+ */
+
+interface Point2D {
+  x: number;
+  y: number;
+}
+
+/** A single arc segment in the cloud border */
+export interface CloudArc {
+  /** Start point of the arc */
+  start: Point2D;
+  /** End point of the arc */
+  end: Point2D;
+  /** Center of the arc circle */
+  center: Point2D;
+  /** Radius of the arc */
+  radius: number;
+  /** Start angle in radians */
+  startAngle: number;
+  /** End angle in radians */
+  endAngle: number;
+}
+
+/**
+ * Generate cloud arc data from two rectangle corner points.
+ * The two points define opposite corners of the rectangle.
+ * Arcs bulge outward from the rectangle edges.
+ *
+ * @param p1 First corner (e.g. top-left)
+ * @param p2 Second corner (e.g. bottom-right)
+ * @param arcRadius Radius of each scallop arc in drawing coords
+ * @returns Array of arc segments forming the cloud border
+ */
+export function generateCloudArcs(
+  p1: Point2D,
+  p2: Point2D,
+  arcRadius: number
+): CloudArc[] {
+  // Build rectangle corners in clockwise order
+  const minX = Math.min(p1.x, p2.x);
+  const maxX = Math.max(p1.x, p2.x);
+  const minY = Math.min(p1.y, p2.y);
+  const maxY = Math.max(p1.y, p2.y);
+
+  const corners: Point2D[] = [
+    { x: minX, y: minY }, // top-left (in drawing coords, Y increases downward on screen)
+    { x: maxX, y: minY }, // top-right
+    { x: maxX, y: maxY }, // bottom-right
+    { x: minX, y: maxY }, // bottom-left
+  ];
+
+  const arcs: CloudArc[] = [];
+
+  // For each edge, generate scallop arcs
+  for (let i = 0; i < corners.length; i++) {
+    const edgeStart = corners[i];
+    const edgeEnd = corners[(i + 1) % corners.length];
+
+    const dx = edgeEnd.x - edgeStart.x;
+    const dy = edgeEnd.y - edgeStart.y;
+    const edgeLength = Math.sqrt(dx * dx + dy * dy);
+
+    if (edgeLength < 0.001) continue;
+
+    // Number of arcs along this edge
+    const arcDiameter = arcRadius * 2;
+    const arcCount = Math.max(1, Math.round(edgeLength / arcDiameter));
+    const segmentLength = edgeLength / arcCount;
+    const actualRadius = segmentLength / 2;
+
+    // Unit direction along edge
+    const ux = dx / edgeLength;
+    const uy = dy / edgeLength;
+
+    // Outward normal (perpendicular, pointing outward from rectangle)
+    // For clockwise winding, outward normal is to the right of the edge direction
+    const nx = uy;
+    const ny = -ux;
+
+    for (let j = 0; j < arcCount; j++) {
+      const t0 = j / arcCount;
+      const t1 = (j + 1) / arcCount;
+
+      const arcStart: Point2D = {
+        x: edgeStart.x + dx * t0,
+        y: edgeStart.y + dy * t0,
+      };
+      const arcEnd: Point2D = {
+        x: edgeStart.x + dx * t1,
+        y: edgeStart.y + dy * t1,
+      };
+
+      // Center of the arc is offset outward from the midpoint
+      const midX = (arcStart.x + arcEnd.x) / 2;
+      const midY = (arcStart.y + arcEnd.y) / 2;
+
+      // The arc center is at the midpoint of the segment (on the edge)
+      // The arc bulges outward by the radius amount
+      const center: Point2D = {
+        x: midX,
+        y: midY,
+      };
+
+      // Compute angles from center to start and end
+      const startAngle = Math.atan2(arcStart.y - center.y, arcStart.x - center.x);
+      const endAngle = Math.atan2(arcEnd.y - center.y, arcEnd.x - center.x);
+
+      arcs.push({
+        start: arcStart,
+        end: arcEnd,
+        center,
+        radius: actualRadius,
+        startAngle,
+        endAngle,
+      });
+    }
+  }
+
+  return arcs;
+}
+
+/**
+ * Draw cloud arcs on a Canvas 2D context.
+ * Arcs are drawn as semicircular bumps bulging outward.
+ */
+export function drawCloudOnCanvas(
+  ctx: CanvasRenderingContext2D,
+  p1: Point2D,
+  p2: Point2D,
+  arcRadius: number,
+  toScreenX: (x: number) => number,
+  toScreenY: (y: number) => number,
+  screenScale: number
+): void {
+  const minX = Math.min(p1.x, p2.x);
+  const maxX = Math.max(p1.x, p2.x);
+  const minY = Math.min(p1.y, p2.y);
+  const maxY = Math.max(p1.y, p2.y);
+
+  const corners: Point2D[] = [
+    { x: minX, y: minY },
+    { x: maxX, y: minY },
+    { x: maxX, y: maxY },
+    { x: minX, y: maxY },
+  ];
+
+  ctx.beginPath();
+
+  for (let i = 0; i < corners.length; i++) {
+    const edgeStart = corners[i];
+    const edgeEnd = corners[(i + 1) % corners.length];
+
+    const dx = edgeEnd.x - edgeStart.x;
+    const dy = edgeEnd.y - edgeStart.y;
+    const edgeLength = Math.sqrt(dx * dx + dy * dy);
+
+    if (edgeLength < 0.001) continue;
+
+    const arcDiameter = arcRadius * 2;
+    const arcCount = Math.max(1, Math.round(edgeLength / arcDiameter));
+    const actualRadius = (edgeLength / arcCount) / 2;
+
+    // Unit direction along edge
+    const ux = dx / edgeLength;
+    const uy = dy / edgeLength;
+
+    // Outward normal for clockwise winding
+    const nx = uy;
+    const ny = -ux;
+
+    for (let j = 0; j < arcCount; j++) {
+      const t0 = j / arcCount;
+      const t1 = (j + 1) / arcCount;
+
+      const sx = edgeStart.x + dx * t0;
+      const sy = edgeStart.y + dy * t0;
+      const ex = edgeStart.x + dx * t1;
+      const ey = edgeStart.y + dy * t1;
+
+      // Arc center is on the edge at midpoint
+      const cx = (sx + ex) / 2;
+      const cy = (sy + ey) / 2;
+
+      // Convert to screen coords
+      const scx = toScreenX(cx);
+      const scy = toScreenY(cy);
+      const screenRadius = actualRadius * screenScale;
+
+      // Angles in screen space (Y may be flipped)
+      const ssx = toScreenX(sx);
+      const ssy = toScreenY(sy);
+      const sex = toScreenX(ex);
+      const sey = toScreenY(ey);
+
+      const startAngle = Math.atan2(ssy - scy, ssx - scx);
+      const endAngle = Math.atan2(sey - scy, sex - scx);
+
+      // Draw arc clockwise (false) so the semicircle bulges outward from the rectangle
+      ctx.arc(scx, scy, screenRadius, startAngle, endAngle, false);
+    }
+  }
+
+  ctx.closePath();
+}
+
+/**
+ * Generate SVG path data for a cloud annotation.
+ */
+export function generateCloudSVGPath(
+  p1: Point2D,
+  p2: Point2D,
+  arcRadius: number,
+  transformX: (x: number) => number,
+  transformY: (y: number) => number,
+): string {
+  const minX = Math.min(p1.x, p2.x);
+  const maxX = Math.max(p1.x, p2.x);
+  const minY = Math.min(p1.y, p2.y);
+  const maxY = Math.max(p1.y, p2.y);
+
+  const corners: Point2D[] = [
+    { x: minX, y: minY },
+    { x: maxX, y: minY },
+    { x: maxX, y: maxY },
+    { x: minX, y: maxY },
+  ];
+
+  let path = '';
+
+  for (let i = 0; i < corners.length; i++) {
+    const edgeStart = corners[i];
+    const edgeEnd = corners[(i + 1) % corners.length];
+
+    const dx = edgeEnd.x - edgeStart.x;
+    const dy = edgeEnd.y - edgeStart.y;
+    const edgeLength = Math.sqrt(dx * dx + dy * dy);
+
+    if (edgeLength < 0.001) continue;
+
+    const arcDiameter = arcRadius * 2;
+    const arcCount = Math.max(1, Math.round(edgeLength / arcDiameter));
+    const segmentLength = edgeLength / arcCount;
+    const r = segmentLength / 2;
+
+    for (let j = 0; j < arcCount; j++) {
+      const t0 = j / arcCount;
+      const t1 = (j + 1) / arcCount;
+
+      const sx = transformX(edgeStart.x + (edgeEnd.x - edgeStart.x) * t0);
+      const sy = transformY(edgeStart.y + (edgeEnd.y - edgeStart.y) * t0);
+      const ex = transformX(edgeStart.x + (edgeEnd.x - edgeStart.x) * t1);
+      const ey = transformY(edgeStart.y + (edgeEnd.y - edgeStart.y) * t1);
+
+      // Move to start of first arc
+      if (i === 0 && j === 0) {
+        path += `M ${sx.toFixed(4)} ${sy.toFixed(4)}`;
+      }
+
+      // SVG arc: A rx ry x-rotation large-arc-flag sweep-flag x y
+      // sweep-flag=1 for clockwise (outward bulge from rectangle)
+      const trR = Math.sqrt((ex - sx) ** 2 + (ey - sy) ** 2) / 2;
+      path += ` A ${trR.toFixed(4)} ${trR.toFixed(4)} 0 0 1 ${ex.toFixed(4)} ${ey.toFixed(4)}`;
+    }
+  }
+
+  path += ' Z';
+  return path;
+}

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

@@ -372,10 +372,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,7 +390,13 @@ export function useGeometryStreaming(params: UseGeometryStreamingParams): void {
     const scene = renderer.getScene();
 
     if (device && pipeline) {
-      scene.updateMeshColors(pendingColorUpdates, device, pipeline);
+      if (pendingColorUpdates.size === 0) {
+        // Empty map = clear overrides (lens deactivated)
+        scene.clearColorOverrides();
+      } else {
+        // Non-empty map = set color overrides
+        scene.setColorOverrides(pendingColorUpdates, device, pipeline);
+      }
       renderer.render();
       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>