@ifc-lite/viewer 1.7.0 → 1.8.0

package/src/components/viewer/TextAnnotationEditor.tsx

@@ -0,0 +1,112 @@
+/* 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/. */
+
+/**
+ * Inline text editor overlay for text annotations on the 2D drawing.
+ * Positioned absolutely over the canvas at the annotation's screen coordinates.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { TextAnnotation2D } from '@/store/slices/drawing2DSlice';
+
+interface TextAnnotationEditorProps {
+  /** The text annotation being edited */
+  annotation: TextAnnotation2D;
+  /** Screen position (top-left of the editor) */
+  screenX: number;
+  screenY: number;
+  /** Called with the new text when user confirms (Enter) */
+  onConfirm: (id: string, text: string) => void;
+  /** Called when user cancels (Escape) or submits empty text */
+  onCancel: (id: string) => void;
+}
+
+export function TextAnnotationEditor({
+  annotation,
+  screenX,
+  screenY,
+  onConfirm,
+  onCancel,
+}: TextAnnotationEditorProps): React.ReactElement {
+  const [text, setText] = useState(annotation.text);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  // Guard against blur firing during the initial click that created this editor.
+  // Without this, the mouseup from the placement click can steal focus from the
+  // textarea before the user has a chance to type, causing an immediate cancel.
+  const readyRef = useRef(false);
+
+  // Auto-focus on mount, but defer slightly so the originating mouseup
+  // from the placement click doesn't immediately steal focus / trigger blur.
+  useEffect(() => {
+    const timer = requestAnimationFrame(() => {
+      textareaRef.current?.focus();
+      // Mark ready after focus is established so blur handler is enabled
+      readyRef.current = true;
+    });
+    return () => cancelAnimationFrame(timer);
+  }, []);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const trimmed = text.trim();
+      if (trimmed) {
+        onConfirm(annotation.id, trimmed);
+      } else {
+        onCancel(annotation.id);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel(annotation.id);
+    }
+    // Stop propagation so the canvas doesn't receive these events
+    e.stopPropagation();
+  }, [text, annotation.id, onConfirm, onCancel]);
+
+  const handleBlur = useCallback(() => {
+    // Ignore blur events that fire before the editor is fully ready
+    // (e.g. from the originating click's mouseup stealing focus)
+    if (!readyRef.current) return;
+
+    const trimmed = text.trim();
+    if (trimmed) {
+      onConfirm(annotation.id, trimmed);
+    } else {
+      onCancel(annotation.id);
+    }
+  }, [text, annotation.id, onConfirm, onCancel]);
+
+  return (
+    <div
+      className="absolute z-20 pointer-events-auto"
+      style={{
+        left: screenX,
+        top: screenY,
+      }}
+      // Prevent mousedown from propagating to canvas (which would place another annotation)
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <textarea
+        ref={textareaRef}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        placeholder="Type annotation text..."
+        className="min-w-[120px] max-w-[300px] min-h-[32px] px-2 py-1 text-sm border-2 border-blue-500 rounded resize shadow-lg outline-none"
+        rows={2}
+        style={{
+          fontSize: annotation.fontSize,
+          backgroundColor: '#ffffff',
+          color: '#000000',
+          caretColor: '#000000',
+        }}
+      />
+      <div className="text-[10px] text-muted-foreground mt-0.5 bg-white/80 px-1 rounded">
+        Enter to confirm · Shift+Enter for newline · Esc to cancel
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/Viewport.tsx

@@ -9,7 +9,7 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { Renderer } from '@ifc-lite/renderer';
 import type { MeshData, CoordinateInfo } from '@ifc-lite/geometry';
-import { useViewerStore, type MeasurePoint, type SnapVisualization } from '@/store';
+import { useViewerStore, resolveEntityRef, type MeasurePoint, type SnapVisualization } from '@/store';
 import {
   useSelectionState,
   useVisibilityState,
@@ -53,8 +53,8 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
   // Selection state
   const { selectedEntityId, selectedEntityIds, setSelectedEntityId, setSelectedEntity, toggleSelection, models } = useSelectionState();
   const selectedEntity = useViewerStore((s) => s.selectedEntity);
-  // Get the bulletproof store-based resolver (more reliable than singleton)
-  const resolveGlobalIdFromModels = useViewerStore((s) => s.resolveGlobalIdFromModels);
+  const addEntityToSelection = useViewerStore((s) => s.addEntityToSelection);
+  const toggleEntitySelection = useViewerStore((s) => s.toggleEntitySelection);
 
   // Sync selectedEntityId with model-aware selectedEntity for PropertiesPanel
   useModelSelection();
@@ -76,9 +76,14 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
 
   // Helper to handle pick result and set selection properly
   // IMPORTANT: pickResult.expressId is now a globalId (transformed at load time)
-  // We use the store-based resolver to find (modelId, originalExpressId)
-  // This is more reliable than the singleton registry which can have bundling issues
+  // resolveEntityRef is the single source of truth for globalId → EntityRef
   const handlePickForSelection = useCallback((pickResult: import('@ifc-lite/renderer').PickResult | null) => {
+    // Normal click clears multi-select set (fresh single-selection)
+    const currentState = useViewerStore.getState();
+    if (currentState.selectedEntitiesSet.size > 0) {
+      useViewerStore.setState({ selectedEntitiesSet: new Set(), selectedEntityIds: new Set() });
+    }
+
     if (!pickResult) {
       setSelectedEntityId(null);
       return;
@@ -89,29 +94,58 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
     // Set globalId for renderer (highlighting uses globalIds directly)
     setSelectedEntityId(globalId);
 
-    // Resolve globalId -> (modelId, originalExpressId) for property panel
-    // Use store-based resolver instead of singleton for reliability
-    const resolved = resolveGlobalIdFromModels(globalId);
-    if (resolved) {
-      // Set the EntityRef with ORIGINAL expressId (for property lookup in IfcDataStore)
-      setSelectedEntity({ modelId: resolved.modelId, expressId: resolved.expressId });
-    } else {
-      // Fallback for single-model mode (offset = 0, globalId = expressId)
-      // Try to find model from the old modelIndex if available
-      if (pickResult.modelIndex !== undefined && modelIndexToId) {
-        const modelId = modelIndexToId.get(pickResult.modelIndex);
-        if (modelId) {
-          setSelectedEntity({ modelId, expressId: globalId });
-        }
-      }
-    }
-  }, [setSelectedEntityId, setSelectedEntity, resolveGlobalIdFromModels, modelIndexToId]);
+    // Resolve globalId → EntityRef for property panel (single source of truth, never null)
+    setSelectedEntity(resolveEntityRef(globalId));
+  }, [setSelectedEntityId, setSelectedEntity]);
 
   // Ref to always access latest handlePickForSelection from event handlers
   // (useMouseControls/useTouchControls capture this at effect setup time)
   const handlePickForSelectionRef = useRef(handlePickForSelection);
   useEffect(() => { handlePickForSelectionRef.current = handlePickForSelection; }, [handlePickForSelection]);
 
+  // Multi-select handler: Ctrl+Click adds/removes from multi-selection
+  // Properly populates both selectedEntitiesSet (multi-model) and selectedEntityIds (legacy)
+  const handleMultiSelect = useCallback((globalId: number) => {
+    // Resolve globalId → EntityRef (single source of truth, never null)
+    const entityRef = resolveEntityRef(globalId);
+
+    // If this is the first Ctrl+click and there's already a single-selected entity,
+    // add it to the multi-select set first (so it's not lost)
+    const state = useViewerStore.getState();
+    if (state.selectedEntitiesSet.size === 0 && state.selectedEntity) {
+      addEntityToSelection(state.selectedEntity);
+      // Also seed legacy selectedEntityIds with previous entity's globalId
+      // so the renderer highlights both the old and new entity
+      if (state.selectedEntityId !== null) {
+        toggleSelection(state.selectedEntityId);
+      }
+    }
+
+    // Toggle the clicked entity in multi-select
+    toggleEntitySelection(entityRef);
+
+    // Also sync legacy selectedEntityIds and selectedEntityId
+    toggleSelection(globalId);
+
+    // Read post-toggle state to keep renderer highlighting in sync:
+    // If the entity was toggled OFF, don't force-highlight it.
+    const updated = useViewerStore.getState();
+    if (updated.selectedEntityIds.has(globalId)) {
+      // Entity was toggled ON — highlight it
+      setSelectedEntityId(globalId);
+    } else if (updated.selectedEntityIds.size > 0) {
+      // Entity was toggled OFF but others remain — highlight the last remaining
+      const remaining = Array.from(updated.selectedEntityIds);
+      setSelectedEntityId(remaining[remaining.length - 1]);
+    } else {
+      // Nothing left selected
+      setSelectedEntityId(null);
+    }
+  }, [addEntityToSelection, toggleEntitySelection, toggleSelection, setSelectedEntityId]);
+
+  const handleMultiSelectRef = useRef(handleMultiSelect);
+  useEffect(() => { handleMultiSelectRef.current = handleMultiSelect; }, [handleMultiSelect]);
+
   // Visibility state - use computedIsolatedIds from parent (includes storey selection)
   // Fall back to store isolation if computedIsolatedIds is not provided
   const { hiddenEntities, isolatedEntities: storeIsolatedEntities } = useVisibilityState();
@@ -668,7 +702,7 @@ export function Viewport({ geometry, coordinateInfo, computedIsolatedIds, modelI
     updateConstraintActiveAxis,
     updateMeasurementScreenCoords,
     updateCameraRotationRealtime,
-    toggleSelection,
+    toggleSelection: (entityId: number) => handleMultiSelectRef.current(entityId),
     calculateScale,
     getPickOptions,
     hasPendingMeasurements,

package/src/components/viewer/ViewportContainer.tsx

@@ -317,6 +317,7 @@ export function ViewportContainer() {
     return (
       <div
         className="relative h-full w-full bg-white dark:bg-black text-zinc-900 dark:text-zinc-50 overflow-hidden"
+        data-viewport
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
@@ -556,6 +557,7 @@ export function ViewportContainer() {
   return (
     <div
       className="relative h-full w-full bg-zinc-50 dark:bg-black overflow-hidden"
+      data-viewport
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}

package/src/components/viewer/hierarchy/HierarchyNode.tsx

@@ -267,7 +267,7 @@ export function HierarchyNode({
         {/* Name */}
         <span className={cn(
           'flex-1 text-sm truncate ml-1.5',
-          isSpatialContainer(node.type)
+          isSpatialContainer(node.type) || node.type === 'IfcBuildingStorey' || node.type === 'unified-storey' || node.type === 'type-group'
             ? 'font-medium text-zinc-900 dark:text-zinc-100'
             : 'text-zinc-700 dark:text-zinc-300',
           nodeHidden && 'line-through decoration-zinc-400 dark:decoration-zinc-600'

package/src/components/viewer/hierarchy/types.ts

@@ -10,7 +10,7 @@ export type NodeType =
   | 'IfcSite'             // Site node
   | 'IfcBuilding'         // Building node
   | 'IfcBuildingStorey'   // Storey node
-  | 'type-group'          // IFC type grouping header (e.g., "IfcWall (47)")
+  | 'type-group'          // IFC class grouping header (e.g., "IfcWall (47)")
   | 'element';            // Individual element
 
 export interface TreeNode {

package/src/components/viewer/lists/ListResultsTable.tsx

@@ -12,11 +12,13 @@
 
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { ArrowUp, ArrowDown, Search } from 'lucide-react';
+import { ArrowUp, ArrowDown, Search, Palette } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { useViewerStore } from '@/store';
-import type { ListResult, ListRow, CellValue } from '@ifc-lite/lists';
+import type { ListResult, ListRow, CellValue, ColumnDefinition } from '@ifc-lite/lists';
 import { cn } from '@/lib/utils';
+import { columnToAutoColor } from '@/lib/lists/columnToAutoColor';
+import { AUTO_COLOR_FROM_LIST_ID } from '@/store/slices/lensSlice';
 
 interface ListResultsTableProps {
   result: ListResult;
@@ -31,6 +33,9 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
   const setSelectedEntity = useViewerStore((s) => s.setSelectedEntity);
   const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
+  const activateAutoColorFromColumn = useViewerStore((s) => s.activateAutoColorFromColumn);
+  const activeLensId = useViewerStore((s) => s.activeLensId);
+  const [colorByColIdx, setColorByColIdx] = useState<number | null>(null);
 
   // Filter rows by search query
   const filteredRows = useMemo(() => {
@@ -62,6 +67,13 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
     }
   }, [sortCol]);
 
+  const handleColorByColumn = useCallback((col: ColumnDefinition, colIdx: number) => {
+    const spec = columnToAutoColor(col);
+    const label = col.label ?? col.propertyName;
+    activateAutoColorFromColumn(spec, label);
+    setColorByColIdx(colIdx);
+  }, [activateAutoColorFromColumn]);
+
   const handleRowClick = useCallback((row: ListRow) => {
     setSelectedEntity({ modelId: row.modelId, expressId: row.entityId });
     // For single-model, selectedEntityId is the expressId
@@ -108,23 +120,45 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
         <div style={{ minWidth: totalWidth }}>
           {/* Header */}
           <div className="flex sticky top-0 bg-muted/80 backdrop-blur-sm border-b z-10">
-            {result.columns.map((col, colIdx) => (
-              <button
-                key={col.id}
-                className="flex items-center gap-1 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground border-r border-border/50 shrink-0"
-                style={{ width: columnWidths[colIdx] }}
-                onClick={() => handleHeaderClick(colIdx)}
-              >
-                <span className="truncate">
-                  {col.label ?? col.propertyName}
-                </span>
-                {sortCol === colIdx && (
-                  sortDir === 'asc'
-                    ? <ArrowUp className="h-3 w-3 shrink-0" />
-                    : <ArrowDown className="h-3 w-3 shrink-0" />
-                )}
-              </button>
-            ))}
+            {result.columns.map((col, colIdx) => {
+              const isColoredCol = activeLensId === AUTO_COLOR_FROM_LIST_ID && colorByColIdx === colIdx;
+              return (
+                <div
+                  key={col.id}
+                  className={cn(
+                    'flex items-center gap-0.5 px-2 py-1.5 text-xs font-medium text-muted-foreground border-r border-border/50 shrink-0 group/col',
+                    isColoredCol && 'bg-primary/10',
+                  )}
+                  style={{ width: columnWidths[colIdx] }}
+                >
+                  <button
+                    className="flex items-center gap-1 flex-1 min-w-0 hover:text-foreground"
+                    onClick={() => handleHeaderClick(colIdx)}
+                  >
+                    <span className="truncate">
+                      {col.label ?? col.propertyName}
+                    </span>
+                    {sortCol === colIdx && (
+                      sortDir === 'asc'
+                        ? <ArrowUp className="h-3 w-3 shrink-0" />
+                        : <ArrowDown className="h-3 w-3 shrink-0" />
+                    )}
+                  </button>
+                  <button
+                    className={cn(
+                      'shrink-0 p-0.5 rounded-sm transition-opacity',
+                      isColoredCol
+                        ? 'text-primary opacity-100'
+                        : 'opacity-0 group-hover/col:opacity-100 text-muted-foreground hover:text-primary',
+                    )}
+                    onClick={(e) => { e.stopPropagation(); handleColorByColumn(col, colIdx); }}
+                    title={`Color by ${col.label ?? col.propertyName}`}
+                  >
+                    <Palette className="h-3 w-3" />
+                  </button>
+                </div>
+              );
+            })}
           </div>
 
           {/* Virtualized rows */}

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

@@ -0,0 +1,118 @@
+/* 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 { generateCloudArcs, generateCloudSVGPath } from './cloudPathGenerator.js';
+
+describe('generateCloudArcs', () => {
+  it('generates arcs for a simple rectangle', () => {
+    const arcs = generateCloudArcs(
+      { x: 0, y: 0 },
+      { x: 4, y: 2 },
+      0.5 // arcRadius
+    );
+    // Should produce arcs along all 4 edges
+    assert.ok(arcs.length > 0, 'Should generate at least some arcs');
+  });
+
+  it('produces arcs proportional to edge length', () => {
+    // A 4x2 rectangle with arcRadius=1 (diameter=2)
+    // Top edge (4 units): ~2 arcs
+    // Right edge (2 units): ~1 arc
+    // Bottom edge (4 units): ~2 arcs
+    // Left edge (2 units): ~1 arc
+    // Total: ~6 arcs
+    const arcs = generateCloudArcs(
+      { x: 0, y: 0 },
+      { x: 4, y: 2 },
+      1.0
+    );
+    assert.strictEqual(arcs.length, 6);
+  });
+
+  it('handles equal corners (zero-size rectangle) gracefully', () => {
+    const arcs = generateCloudArcs(
+      { x: 1, y: 1 },
+      { x: 1, y: 1 },
+      0.5
+    );
+    // All edges are zero-length, should skip them
+    assert.strictEqual(arcs.length, 0);
+  });
+
+  it('handles reversed corner order', () => {
+    const arcs1 = generateCloudArcs({ x: 0, y: 0 }, { x: 4, y: 2 }, 1.0);
+    const arcs2 = generateCloudArcs({ x: 4, y: 2 }, { x: 0, y: 0 }, 1.0);
+    // Should produce same number of arcs regardless of corner order
+    assert.strictEqual(arcs1.length, arcs2.length);
+  });
+
+  it('each arc has valid start, end, center, and radius', () => {
+    const arcs = generateCloudArcs({ x: 0, y: 0 }, { x: 2, y: 2 }, 0.5);
+    for (const arc of arcs) {
+      assert.ok(isFinite(arc.start.x) && isFinite(arc.start.y), 'Start should be finite');
+      assert.ok(isFinite(arc.end.x) && isFinite(arc.end.y), 'End should be finite');
+      assert.ok(isFinite(arc.center.x) && isFinite(arc.center.y), 'Center should be finite');
+      assert.ok(arc.radius > 0, 'Radius should be positive');
+      assert.ok(isFinite(arc.startAngle), 'Start angle should be finite');
+      assert.ok(isFinite(arc.endAngle), 'End angle should be finite');
+    }
+  });
+});
+
+describe('generateCloudSVGPath', () => {
+  it('generates a valid SVG path string', () => {
+    const path = generateCloudSVGPath(
+      { x: 0, y: 0 },
+      { x: 4, y: 2 },
+      1.0,
+      (x) => x,
+      (y) => y,
+    );
+    assert.ok(path.startsWith('M'), 'Path should start with M command');
+    assert.ok(path.includes('A'), 'Path should contain arc commands');
+    assert.ok(path.endsWith('Z'), 'Path should end with Z (close)');
+  });
+
+  it('uses clockwise sweep flag (1) for outward-bulging arcs', () => {
+    const path = generateCloudSVGPath(
+      { x: 0, y: 0 },
+      { x: 4, y: 2 },
+      1.0,
+      (x) => x,
+      (y) => y,
+    );
+    // All arcs should use sweep-flag=1 (clockwise = outward bulge)
+    const arcMatches = path.match(/A\s+[\d.]+\s+[\d.]+\s+0\s+0\s+(\d)/g);
+    assert.ok(arcMatches && arcMatches.length > 0, 'Should have arc commands');
+    for (const match of arcMatches!) {
+      assert.ok(match.endsWith('1'), `Arc sweep flag should be 1 (clockwise/outward), got: ${match}`);
+    }
+  });
+
+  it('applies coordinate transforms', () => {
+    // Flip X
+    const path = generateCloudSVGPath(
+      { x: 1, y: 0 },
+      { x: 3, y: 2 },
+      0.5,
+      (x) => -x,
+      (y) => y,
+    );
+    assert.ok(path.includes('-'), 'Flipped X should produce negative coordinates');
+  });
+
+  it('handles small rectangles', () => {
+    const path = generateCloudSVGPath(
+      { x: 0, y: 0 },
+      { x: 0.1, y: 0.1 },
+      0.02,
+      (x) => x,
+      (y) => y,
+    );
+    assert.ok(path.length > 0, 'Should produce a non-empty path');
+    assert.ok(path.endsWith('Z'), 'Path should be closed');
+  });
+});