@ifc-lite/viewer 1.19.0 → 1.21.0

package/src/components/viewer/PointCloudClasses.tsx

@@ -0,0 +1,111 @@
+/* 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/. */
+
+/**
+ * Per-ASPRS-class visibility toggles. Renders an inline list of every
+ * known LAS 1.4 standard class with a checkbox bound to the
+ * `pointCloudClassMask` bitmask. Hidden classes are pushed behind the
+ * near plane in the splat shader (`flags.w` cull).
+ *
+ * The colour swatches mirror `point-shader.wgsl.ts` so the UI stays
+ * in sync with what the user actually sees on screen.
+ */
+
+import { useViewerStore } from '@/store';
+
+interface ClassEntry {
+  id: number;
+  label: string;
+  rgb: [number, number, number];
+}
+
+const CLASSES: ClassEntry[] = [
+  { id: 0,  label: 'Never classified',   rgb: [0.65, 0.65, 0.65] },
+  { id: 1,  label: 'Unclassified',       rgb: [0.65, 0.65, 0.65] },
+  { id: 2,  label: 'Ground',             rgb: [0.55, 0.40, 0.25] },
+  { id: 3,  label: 'Low vegetation',     rgb: [0.55, 0.85, 0.45] },
+  { id: 4,  label: 'Medium vegetation',  rgb: [0.30, 0.75, 0.30] },
+  { id: 5,  label: 'High vegetation',    rgb: [0.10, 0.45, 0.15] },
+  { id: 6,  label: 'Building',           rgb: [0.95, 0.55, 0.20] },
+  { id: 7,  label: 'Low point (noise)',  rgb: [0.95, 0.20, 0.20] },
+  { id: 9,  label: 'Water',              rgb: [0.20, 0.40, 0.95] },
+  { id: 10, label: 'Rail',               rgb: [0.55, 0.20, 0.85] },
+  { id: 11, label: 'Road surface',       rgb: [0.30, 0.30, 0.30] },
+  { id: 13, label: 'Wire — guard',       rgb: [0.95, 0.85, 0.20] },
+  { id: 14, label: 'Wire — conductor',   rgb: [0.95, 0.95, 0.50] },
+  { id: 15, label: 'Transmission tower', rgb: [0.20, 0.20, 0.55] },
+  { id: 16, label: 'Wire-structure',     rgb: [0.30, 0.65, 0.65] },
+  { id: 17, label: 'Bridge deck',        rgb: [0.85, 0.70, 0.50] },
+  { id: 18, label: 'High noise',         rgb: [0.95, 0.20, 0.20] },
+];
+
+const ALL_VISIBLE = 0xFFFFFFFF;
+
+export function PointCloudClasses() {
+  const mask = useViewerStore((s) => s.pointCloudClassMask);
+  const toggle = useViewerStore((s) => s.togglePointCloudClass);
+  const setMask = useViewerStore((s) => s.setPointCloudClassMask);
+  const allOn = (mask >>> 0) === ALL_VISIBLE;
+  return (
+    <details className="flex flex-col gap-0.5">
+      <summary className="text-[9px] uppercase text-muted-foreground tracking-wider cursor-pointer select-none">
+        Classes {!allOn && (
+          <span className="text-[9px] normal-case text-amber-500"> · {countSet(mask)} of 32 visible</span>
+        )}
+      </summary>
+      <div className="flex flex-col gap-0.5 mt-1 max-h-40 overflow-y-auto pr-1">
+        <button
+          type="button"
+          onClick={() => setMask(ALL_VISIBLE)}
+          className="text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted px-1 py-0.5 rounded text-left"
+        >
+          Show all
+        </button>
+        {CLASSES.map((c) => {
+          const visible = ((mask >>> c.id) & 1) !== 0;
+          return (
+            <label
+              key={c.id}
+              className="flex items-center gap-1.5 text-[10px] cursor-pointer hover:bg-muted/40 rounded px-1 py-0.5"
+            >
+              <input
+                type="checkbox"
+                checked={visible}
+                onChange={() => toggle(c.id)}
+                className="accent-teal-600"
+                aria-label={`Toggle ${c.label}`}
+              />
+              <span
+                className="inline-block h-3 w-3 rounded-sm shrink-0 border border-foreground/10"
+                style={{ backgroundColor: rgbCss(c.rgb) }}
+                aria-hidden="true"
+              />
+              <span className="text-muted-foreground tabular-nums w-4 shrink-0">{c.id}</span>
+              <span className={visible ? 'text-foreground truncate' : 'text-muted-foreground line-through truncate'}>
+                {c.label}
+              </span>
+            </label>
+          );
+        })}
+      </div>
+    </details>
+  );
+}
+
+function countSet(mask: number): number {
+  // Hamming weight via Brian Kernighan's algorithm. JS bitwise ops
+  // are 32-bit so we naturally cover the full ASPRS range.
+  let n = mask >>> 0;
+  let count = 0;
+  while (n !== 0) {
+    n &= n - 1;
+    count++;
+  }
+  return count;
+}
+
+function rgbCss([r, g, b]: [number, number, number]): string {
+  const c = (v: number) => Math.max(0, Math.min(255, Math.round(v * 255)));
+  return `rgb(${c(r)},${c(g)},${c(b)})`;
+}

package/src/components/viewer/PointCloudLegend.tsx

@@ -0,0 +1,119 @@
+/* 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/. */
+
+/**
+ * Per-mode legend for the point-cloud panel.
+ *
+ * Renders only when the active colour mode benefits from a legend
+ * (classification / intensity / height); RGB and Solid don't need one.
+ * The palettes here MUST stay in sync with `point-shader.wgsl.ts` —
+ * any colour change in the shader has to come back to this file.
+ */
+
+import type { PointColorModeUi } from '@/store/slices/pointCloudSlice';
+
+interface ClassificationEntry {
+  id: number;
+  label: string;
+  rgb: [number, number, number];
+}
+
+// ASPRS LAS 1.4 standard classes — ids that don't appear here all
+// fall back to the shader's "default" entry (0.65 grey) and are
+// shown collectively at the bottom of the legend.
+const CLASSIFICATION: ClassificationEntry[] = [
+  { id: 0,  label: 'Never classified',  rgb: [0.65, 0.65, 0.65] },
+  { id: 1,  label: 'Unclassified',      rgb: [0.65, 0.65, 0.65] },
+  { id: 2,  label: 'Ground',            rgb: [0.55, 0.40, 0.25] },
+  { id: 3,  label: 'Low vegetation',    rgb: [0.55, 0.85, 0.45] },
+  { id: 4,  label: 'Medium vegetation', rgb: [0.30, 0.75, 0.30] },
+  { id: 5,  label: 'High vegetation',   rgb: [0.10, 0.45, 0.15] },
+  { id: 6,  label: 'Building',          rgb: [0.95, 0.55, 0.20] },
+  { id: 7,  label: 'Low point (noise)', rgb: [0.95, 0.20, 0.20] },
+  { id: 9,  label: 'Water',             rgb: [0.20, 0.40, 0.95] },
+  { id: 10, label: 'Rail',              rgb: [0.55, 0.20, 0.85] },
+  { id: 11, label: 'Road surface',      rgb: [0.30, 0.30, 0.30] },
+  { id: 13, label: 'Wire — guard',      rgb: [0.95, 0.85, 0.20] },
+  { id: 14, label: 'Wire — conductor',  rgb: [0.95, 0.95, 0.50] },
+  { id: 15, label: 'Transmission tower', rgb: [0.20, 0.20, 0.55] },
+  { id: 16, label: 'Wire-structure',    rgb: [0.30, 0.65, 0.65] },
+  { id: 17, label: 'Bridge deck',       rgb: [0.85, 0.70, 0.50] },
+  { id: 18, label: 'High noise',        rgb: [0.95, 0.20, 0.20] },
+];
+
+const HEIGHT_GRADIENT =
+  'linear-gradient(to right, '
+  + 'rgb(26,51,217), '   // 0.10, 0.20, 0.85
+  + 'rgb(26,217,217), '  // 0.10, 0.85, 0.85
+  + 'rgb(51,217,51), '   // 0.20, 0.85, 0.20
+  + 'rgb(242,242,51), '  // 0.95, 0.95, 0.20
+  + 'rgb(242,51,26))';   // 0.95, 0.20, 0.10
+
+export interface PointCloudLegendProps {
+  colorMode: PointColorModeUi;
+}
+
+export function PointCloudLegend({ colorMode }: PointCloudLegendProps) {
+  if (colorMode === 'classification') {
+    return (
+      <div className="flex flex-col gap-0.5 mt-1 max-h-40 overflow-y-auto">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider sticky top-0 bg-background/95 py-0.5">
+          Classes (ASPRS LAS 1.4)
+        </span>
+        {CLASSIFICATION.map((c) => (
+          <div key={c.id} className="flex items-center gap-1.5 text-[10px]">
+            <span
+              className="inline-block h-3 w-3 rounded-sm shrink-0 border border-foreground/10"
+              style={{ backgroundColor: rgbCss(c.rgb) }}
+              aria-hidden="true"
+            />
+            <span className="text-muted-foreground tabular-nums w-4 shrink-0">{c.id}</span>
+            <span className="text-foreground truncate">{c.label}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (colorMode === 'intensity') {
+    return (
+      <div className="flex flex-col gap-0.5 mt-1">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Intensity</span>
+        <div
+          className="h-2 rounded-sm border border-foreground/10"
+          style={{ background: 'linear-gradient(to right, rgb(0,0,0), rgb(255,255,255))' }}
+          aria-label="Intensity ramp from low (black) to high (white)"
+        />
+        <div className="flex justify-between text-[9px] text-muted-foreground">
+          <span>low</span>
+          <span>high</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (colorMode === 'height') {
+    return (
+      <div className="flex flex-col gap-0.5 mt-1">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Height (Y-up)</span>
+        <div
+          className="h-2 rounded-sm border border-foreground/10"
+          style={{ background: HEIGHT_GRADIENT }}
+          aria-label="Height ramp from low (blue) to high (red)"
+        />
+        <div className="flex justify-between text-[9px] text-muted-foreground">
+          <span>low</span>
+          <span>high</span>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+function rgbCss([r, g, b]: [number, number, number]): string {
+  const c = (v: number) => Math.max(0, Math.min(255, Math.round(v * 255)));
+  return `rgb(${c(r)},${c(g)},${c(b)})`;
+}

package/src/components/viewer/PointCloudPanel.tsx

@@ -12,6 +12,9 @@
 import { useViewerStore } from '@/store';
 import type { PointColorModeUi, PointSizeModeUi } from '@/store/slices/pointCloudSlice';
 import { cn } from '@/lib/utils';
+import { PointCloudLegend } from './PointCloudLegend';
+import { PointCloudClasses } from './PointCloudClasses';
+import { DeviationPanel } from './DeviationPanel';
 
 const COLOR_MODES: Array<{ value: PointColorModeUi; label: string; hint: string }> = [
   { value: 'rgb',            label: 'RGB',            hint: 'Per-point colour from the source' },
@@ -19,6 +22,7 @@ const COLOR_MODES: Array<{ value: PointColorModeUi; label: string; hint: string
   { value: 'intensity',      label: 'Intensity',      hint: 'Greyscale ramp from per-point intensity' },
   { value: 'height',         label: 'Height',         hint: 'Cool-warm ramp by Y-up world height' },
   { value: 'fixed',          label: 'Solid',          hint: 'Single colour override' },
+  { value: 'deviation',      label: 'Deviation',      hint: 'Signed distance to nearest BIM surface (compute below)' },
 ];
 
 const SIZE_MODES: Array<{ value: PointSizeModeUi; label: string; hint: string }> = [
@@ -30,9 +34,12 @@ const SIZE_MODES: Array<{ value: PointSizeModeUi; label: string; hint: string }>
 export interface PointCloudPanelProps {
   /** Number of currently-loaded point cloud assets — panel hides when 0. */
   assetCount: number;
+  /** Total triangle count across the scene (gates the BIM↔scan deviation
+   *  compute button — useless without a BIM model loaded). */
+  triangleCount: number;
 }
 
-export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
+export function PointCloudPanel({ assetCount, triangleCount }: PointCloudPanelProps) {
   const colorMode = useViewerStore((s) => s.pointCloudColorMode);
   const setColorMode = useViewerStore((s) => s.setPointCloudColorMode);
   const sizeMode = useViewerStore((s) => s.pointCloudSizeMode);
@@ -45,6 +52,8 @@ export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
   const setEdlEnabled = useViewerStore((s) => s.setPointCloudEdlEnabled);
   const edlStrength = useViewerStore((s) => s.pointCloudEdlStrength);
   const setEdlStrength = useViewerStore((s) => s.setPointCloudEdlStrength);
+  const fixedColor = useViewerStore((s) => s.pointCloudFixedColor);
+  const setFixedColor = useViewerStore((s) => s.setPointCloudFixedColor);
 
   if (assetCount <= 0) return null;
 
@@ -81,8 +90,31 @@ export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
             </button>
           );
         })}
+        <PointCloudLegend colorMode={colorMode} />
+        {colorMode === 'fixed' && (
+          // Native colour input — keeps the panel dependency-free.
+          // Hex round-trips through float[0..1]: parse `#rrggbb` to a
+          // [r,g,b,1] tuple on input, format the active rgb back to hex
+          // on display. Alpha stays 1 since fixed-mode opacity is
+          // controlled by the splat shape, not the colour swatch.
+          <label className="flex items-center justify-between gap-2 mt-1 px-2 py-1 rounded bg-muted/40">
+            <span className="text-[10px] text-muted-foreground">Solid colour</span>
+            <input
+              type="color"
+              value={rgbToHex(fixedColor)}
+              onChange={(e) => setFixedColor(hexToRgba(e.target.value, fixedColor[3]))}
+              aria-label="Pick the solid colour applied in fixed mode"
+              className="h-6 w-10 rounded border-0 cursor-pointer bg-transparent"
+            />
+          </label>
+        )}
       </div>
 
+      {/* Per-ASPRS-class visibility — toggles the splat shader's
+          class-mask uniform; works in any colour mode but most
+          discoverable when colorMode === 'classification'. */}
+      <PointCloudClasses />
+
       {/* Size mode */}
       <div className="flex flex-col gap-0.5">
         <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Size</span>
@@ -169,6 +201,25 @@ export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
           </label>
         )}
       </div>
+
+      {/* BIM↔scan deviation heatmap — only useful when both meshes
+          and points are loaded. The panel renders nothing when there
+          are no triangles in the scene. */}
+      <DeviationPanel triangleCount={triangleCount} />
     </div>
   );
 }
+
+function rgbToHex([r, g, b]: [number, number, number, number]): string {
+  const c = (v: number) => Math.max(0, Math.min(255, Math.round(v * 255))).toString(16).padStart(2, '0');
+  return `#${c(r)}${c(g)}${c(b)}`;
+}
+
+function hexToRgba(hex: string, alpha: number): [number, number, number, number] {
+  // Browsers always emit "#rrggbb" from <input type="color">, so we
+  // can skip the 3-char shorthand path. Parse byte-by-byte and divide.
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  return [r, g, b, alpha];
+}

package/src/components/viewer/PropertiesPanel.tsx

@@ -11,6 +11,7 @@ import {
   Eye,
   Building2,
   Layers,
+  Layers2,
   FileText,
   Calculator,
   Tag,
@@ -20,6 +21,7 @@ import {
   PenLine,
   Crosshair,
 } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
 import { EditToolbar } from './PropertyEditor';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -134,6 +136,10 @@ export function PropertiesPanel() {
   const cameraCallbacks = useViewerStore((s) => s.cameraCallbacks);
   const toggleEntityVisibility = useViewerStore((s) => s.toggleEntityVisibility);
   const isEntityVisible = useViewerStore((s) => s.isEntityVisible);
+  // Issue #540: surface a small "Layers merged" badge on walls when
+  // the user has the merge-layers load setting active so they
+  // understand the displayed solid is the aggregated representation.
+  const mergeLayersActive = useViewerStore((s) => s.mergeLayers);
   const { query, ifcDataStore, geometryResult, models, getQueryForModel } = useIfc();
 
   // Get model-aware query based on selectedEntity
@@ -1108,9 +1114,33 @@ export function PropertiesPanel() {
             <Building2 className="h-5 w-5 text-zinc-700 dark:text-zinc-300" />
           </div>
           <div className="flex-1 min-w-0 pt-0.5">
-            <h3 className="font-bold text-sm truncate uppercase tracking-tight text-zinc-900 dark:text-zinc-100">
-              {entityName || `${entityType}`}
-            </h3>
+            <div className="flex items-start gap-2">
+              <h3 className="font-bold text-sm truncate uppercase tracking-tight text-zinc-900 dark:text-zinc-100 min-w-0">
+                {entityName || `${entityType}`}
+              </h3>
+              {/* Issue #540: indicate that the wall solid the user is
+                  looking at represents aggregated multilayer parts. We
+                  over-trigger on any IfcWall* class instead of probing
+                  the aggregation graph — the chip is cheap and
+                  informative, and walls that aren't actually layered
+                  simply confirm the user's selection is the parent. */}
+              {mergeLayersActive && entityType?.toLowerCase().startsWith('ifcwall') && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Badge
+                      variant="secondary"
+                      className="shrink-0 rounded-sm px-1.5 py-0 text-[9px] font-semibold uppercase tracking-wider gap-1 leading-none h-[18px] mt-0.5"
+                    >
+                      <Layers2 className="h-2.5 w-2.5" />
+                      Layers merged
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Multilayer wall parts have been merged into the parent solid.
+                  </TooltipContent>
+                </Tooltip>
+              )}
+            </div>
             <p className="text-xs font-mono text-zinc-500 dark:text-zinc-400">{entityType}</p>
             {/* Show associated type entity for occurrences */}
             {!renderedIsTypeEntity && renderedTypeProperties && (
@@ -1309,6 +1339,7 @@ export function PropertiesPanel() {
                 coordinateInfo={(model?.geometryResult ?? geometryResult)?.coordinateInfo}
                 geometryResult={model?.geometryResult ?? geometryResult}
                 lengthUnitScale={lengthUnitScale}
+                storeyElevations={activeDataStore?.spatialHierarchy?.storeyElevations}
               />
             </CollapsibleContent>
           </Collapsible>
@@ -1342,12 +1373,12 @@ export function PropertiesPanel() {
                       modelId={selectedEntity.modelId}
                       entityId={selectedEntity.expressId}
                       attrName={attr.name}
-                      currentValue={attr.value}
+                      currentValue={String(attr.value)}
                     />
                   ) : (
                     <div className="overflow-x-auto scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-700 min-w-0">
-                      <span className="font-medium whitespace-nowrap" title={attr.value}>
-                        {attr.value}
+                      <span className="font-medium whitespace-nowrap" title={String(attr.value)}>
+                        {String(attr.value)}
                       </span>
                     </div>
                   )}

package/src/components/viewer/RectSelectionOverlay.tsx

@@ -0,0 +1,48 @@
+/* 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/. */
+
+/**
+ * Visual overlay for the GPU rectangle-select drag (Ctrl/⌘ + LMB
+ * over the canvas in select mode). Renders an SVG outline whenever
+ * `rect` is non-null; the parent supplies / clears the prop in step
+ * with the mouse handler.
+ */
+
+export interface RectSelectionRect {
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+}
+
+export interface RectSelectionOverlayProps {
+  rect: RectSelectionRect | null;
+}
+
+export function RectSelectionOverlay({ rect }: RectSelectionOverlayProps) {
+  if (!rect) return null;
+  const left = Math.min(rect.x0, rect.x1);
+  const top = Math.min(rect.y0, rect.y1);
+  const width = Math.abs(rect.x1 - rect.x0);
+  const height = Math.abs(rect.y1 - rect.y0);
+  if (width < 1 || height < 1) return null;
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none"
+      style={{ width: '100%', height: '100%' }}
+      aria-hidden="true"
+    >
+      <rect
+        x={left}
+        y={top}
+        width={width}
+        height={height}
+        fill="rgba(20, 184, 166, 0.10)"
+        stroke="rgb(20, 184, 166)"
+        strokeWidth={1}
+        strokeDasharray="4 3"
+      />
+    </svg>
+  );
+}

package/src/components/viewer/StatusBar.tsx

@@ -15,6 +15,7 @@ export function StatusBar() {
   const progress = useViewerStore((s) => s.progress);
   const error = useViewerStore((s) => s.error);
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
+  const activeStreamCanceller = useViewerStore((s) => s.activeStreamCanceller);
   const webgpu = useWebGPU();
 
   const [fps, setFps] = useState(60);
@@ -108,6 +109,19 @@ export function StatusBar() {
         ) : (
           <span>Ready</span>
         )}
+        {/* Cancel button — only visible while a long-running stream
+            (LAS/LAZ/PLY/PCD/E57) is in flight. The loader hooks
+            register/clear the canceller around `await ingest.done`. */}
+        {activeStreamCanceller && (
+          <button
+            type="button"
+            onClick={() => activeStreamCanceller()}
+            className="px-2 py-0.5 rounded border border-destructive/40 text-destructive text-[10px] uppercase tracking-wider hover:bg-destructive hover:text-destructive-foreground transition-colors"
+            title="Cancel the active point cloud stream"
+          >
+            Cancel
+          </button>
+        )}
       </div>
 
       {/* Center: Model Stats */}