@ifc-lite/viewer 1.14.3 → 1.15.0

package/src/components/viewer/MainToolbar.tsx

@@ -36,7 +36,9 @@ import {
   ClipboardCheck,
   Palette,
   Orbit,
+  Layout,
   LayoutTemplate,
+  FileCode2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -70,6 +72,7 @@ import { ThemeSwitch } from './ThemeSwitch';
 import { toast } from '@/components/ui/toast';
 
 type Tool = 'select' | 'pan' | 'orbit' | 'walk' | 'measure' | 'section';
+type WorkspacePanel = 'script' | 'list' | 'bcf' | 'ids' | 'lens';
 
 // #region FIX: Move ToolButton OUTSIDE MainToolbar to prevent recreation on every render
 // This fixes Radix UI Tooltip's asChild prop becoming stale during re-renders
@@ -176,13 +179,11 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const toggleTypeVisibility = useViewerStore((state) => state.toggleTypeVisibility);
   const resetViewerState = useViewerStore((state) => state.resetViewerState);
   const bcfPanelVisible = useViewerStore((state) => state.bcfPanelVisible);
-  const toggleBcfPanel = useViewerStore((state) => state.toggleBcfPanel);
   const setBcfPanelVisible = useViewerStore((state) => state.setBcfPanelVisible);
   const idsPanelVisible = useViewerStore((state) => state.idsPanelVisible);
-  const toggleIdsPanel = useViewerStore((state) => state.toggleIdsPanel);
   const setIdsPanelVisible = useViewerStore((state) => state.setIdsPanelVisible);
   const listPanelVisible = useViewerStore((state) => state.listPanelVisible);
-  const toggleListPanel = useViewerStore((state) => state.toggleListPanel);
+  const setListPanelVisible = useViewerStore((state) => state.setListPanelVisible);
   const setRightPanelCollapsed = useViewerStore((state) => state.setRightPanelCollapsed);
   const projectionMode = useViewerStore((state) => state.projectionMode);
   const toggleProjectionMode = useViewerStore((state) => state.toggleProjectionMode);
@@ -193,8 +194,9 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const toggleBasketPresentationVisible = useViewerStore((state) => state.toggleBasketPresentationVisible);
   // Lens state
   const lensPanelVisible = useViewerStore((state) => state.lensPanelVisible);
-  const toggleLensPanel = useViewerStore((state) => state.toggleLensPanel);
   const setLensPanelVisible = useViewerStore((state) => state.setLensPanelVisible);
+  const scriptPanelVisible = useViewerStore((state) => state.scriptPanelVisible);
+  const setScriptPanelVisible = useViewerStore((state) => state.setScriptPanelVisible);
 
   // Check which type geometries exist across ALL loaded models (federation-aware).
   // PERF: Use meshes.length as dep proxy instead of full geometryResult, and
@@ -361,6 +363,61 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     goHomeFromStore();
   }, []);
 
+  const handleToggleBottomPanel = useCallback((panel: 'script' | 'list') => {
+    const isScriptPanel = panel === 'script';
+    const nextScriptVisible = isScriptPanel ? !scriptPanelVisible : false;
+    const nextListVisible = isScriptPanel ? false : !listPanelVisible;
+
+    setScriptPanelVisible(nextScriptVisible);
+    setListPanelVisible(nextListVisible);
+
+    if (nextScriptVisible || nextListVisible) {
+      setRightPanelCollapsed(false);
+    }
+  }, [listPanelVisible, scriptPanelVisible, setListPanelVisible, setRightPanelCollapsed, setScriptPanelVisible]);
+
+  const handleToggleRightPanel = useCallback((panel: 'bcf' | 'ids' | 'lens') => {
+    const nextBcfVisible = panel === 'bcf' ? !bcfPanelVisible : false;
+    const nextIdsVisible = panel === 'ids' ? !idsPanelVisible : false;
+    const nextLensVisible = panel === 'lens' ? !lensPanelVisible : false;
+
+    setBcfPanelVisible(nextBcfVisible);
+    setIdsPanelVisible(nextIdsVisible);
+    setLensPanelVisible(nextLensVisible);
+
+    if (nextBcfVisible || nextIdsVisible || nextLensVisible) {
+      setRightPanelCollapsed(false);
+    }
+  }, [
+    bcfPanelVisible,
+    idsPanelVisible,
+    lensPanelVisible,
+    setBcfPanelVisible,
+    setIdsPanelVisible,
+    setLensPanelVisible,
+    setRightPanelCollapsed,
+  ]);
+
+  const activeWorkspacePanels = useMemo(() => {
+    const panels = new Set<WorkspacePanel>();
+    if (scriptPanelVisible) panels.add('script');
+    if (listPanelVisible) panels.add('list');
+    if (bcfPanelVisible) panels.add('bcf');
+    if (idsPanelVisible) panels.add('ids');
+    if (lensPanelVisible) panels.add('lens');
+    return panels;
+  }, [bcfPanelVisible, idsPanelVisible, lensPanelVisible, listPanelVisible, scriptPanelVisible]);
+
+  const workspacePanelLabel = useMemo(() => {
+    if (activeWorkspacePanels.size === 0) return null;
+    if (activeWorkspacePanels.size > 1) return 'Multiple Panels';
+    if (activeWorkspacePanels.has('script')) return 'Script Editor';
+    if (activeWorkspacePanels.has('list')) return 'Lists';
+    if (activeWorkspacePanels.has('bcf')) return 'BCF Issues';
+    if (activeWorkspacePanels.has('ids')) return 'IDS Validation';
+    return 'Lens Rules';
+  }, [activeWorkspacePanels]);
+
   const handleExportGLB = useCallback(() => {
     if (!geometryResult) return;
     try {
@@ -624,76 +681,61 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       <ExportChangesButton />
 
       {/* ── Panels ── */}
-      {/* BCF Issues Button */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={bcfPanelVisible ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              if (!bcfPanelVisible) {
-                // Close other right-panel content first, then expand
-                setIdsPanelVisible(false);
-                setLensPanelVisible(false);
-                setRightPanelCollapsed(false);
-              }
-              toggleBcfPanel();
-            }}
-            className={cn(bcfPanelVisible && 'bg-primary text-primary-foreground')}
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant={activeWorkspacePanels.size > 0 ? 'default' : 'ghost'}
+                size="icon-sm"
+                aria-label={workspacePanelLabel ? `Panels: ${workspacePanelLabel}` : 'Panels'}
+                className={cn(activeWorkspacePanels.size > 0 && 'bg-primary text-primary-foreground')}
+              >
+                <Layout className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>{workspacePanelLabel ? `Panels: ${workspacePanelLabel}` : 'Panels'}</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent align="start" className="w-56">
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('script')}
+            onCheckedChange={() => handleToggleBottomPanel('script')}
           >
-            <MessageSquare className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>BCF Issues</TooltipContent>
-      </Tooltip>
-
-      {/* IDS Validation Button */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={idsPanelVisible ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              if (!idsPanelVisible) {
-                // Close other right-panel content first, then expand
-                setBcfPanelVisible(false);
-                setLensPanelVisible(false);
-                setRightPanelCollapsed(false);
-              }
-              toggleIdsPanel();
-            }}
-            className={cn(idsPanelVisible && 'bg-primary text-primary-foreground')}
+            <FileCode2 className="h-4 w-4 mr-2" />
+            Script Editor
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('list')}
+            onCheckedChange={() => handleToggleBottomPanel('list')}
           >
-            <ClipboardCheck className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>IDS Validation</TooltipContent>
-      </Tooltip>
-
-      {/* Lists Button */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={listPanelVisible ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              // Close other bottom panels (bottom-panel exclusivity)
-              useViewerStore.getState().setScriptPanelVisible(false);
-              if (!listPanelVisible) {
-                setRightPanelCollapsed(false);
-              }
-              toggleListPanel();
-            }}
-            className={cn(listPanelVisible && 'bg-primary text-primary-foreground')}
+            <FileSpreadsheet className="h-4 w-4 mr-2" />
+            Lists
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('bcf')}
+            onCheckedChange={() => handleToggleRightPanel('bcf')}
           >
-            <FileSpreadsheet className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>Lists</TooltipContent>
-      </Tooltip>
+            <MessageSquare className="h-4 w-4 mr-2" />
+            BCF Issues
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('ids')}
+            onCheckedChange={() => handleToggleRightPanel('ids')}
+          >
+            <ClipboardCheck className="h-4 w-4 mr-2" />
+            IDS Validation
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('lens')}
+            onCheckedChange={() => handleToggleRightPanel('lens')}
+          >
+            <Palette className="h-4 w-4 mr-2" />
+            Lens Rules
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       <Separator orientation="vertical" className="h-6 mx-1" />
 
@@ -821,30 +863,6 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         </DropdownMenuContent>
       </DropdownMenu>
 
-      {/* Lens (rule-based filtering) */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={lensPanelVisible ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={(e) => {
-              (e.currentTarget as HTMLButtonElement).blur();
-              if (!lensPanelVisible) {
-                // Close other right-panel content first, then expand
-                setBcfPanelVisible(false);
-                setIdsPanelVisible(false);
-                setRightPanelCollapsed(false);
-              }
-              toggleLensPanel();
-            }}
-            className={cn(lensPanelVisible && 'bg-primary text-primary-foreground')}
-          >
-            <Palette className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>Lens (Color Rules)</TooltipContent>
-      </Tooltip>
-
       <Separator orientation="vertical" className="h-6 mx-1" />
 
       {/* ── Camera & View ── */}

package/src/components/viewer/ViewportContainer.tsx

@@ -9,6 +9,7 @@ import { ToolOverlays } from './ToolOverlays';
 import { Section2DPanel } from './Section2DPanel';
 import { BasketPresentationDock } from './BasketPresentationDock';
 import { useViewerStore } from '@/store';
+import { collectIfcBuildingStoreyElementsWithIfcSpace } from '@/store/basketVisibleSet';
 import { useIfc } from '@/hooks/useIfc';
 import { useWebGPU } from '@/hooks/useWebGPU';
 import { Upload, MousePointer, Layers, Info, Command, AlertTriangle, ChevronDown, ExternalLink, Plus } from 'lucide-react';
@@ -27,6 +28,7 @@ export function ViewportContainer() {
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
   const typeVisibility = useViewerStore((s) => s.typeVisibility);
   const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
+  const classFilter = useViewerStore((s) => s.classFilter);
   // Multi-model support: get all loaded models from store (for merged geometry)
   const storeModels = useViewerStore((s) => s.models);
   const resetViewerState = useViewerStore((s) => s.resetViewerState);
@@ -251,15 +253,8 @@ export function ViewportContainer() {
   // Now supports multi-model: aggregates elements from all models for selected storeys
   // IMPORTANT: Returns globalIds (meshes use globalIds after federation registry transformation)
   const computedIsolatedIds = useMemo(() => {
-    // If manual isolation is active, use that (already contains globalIds)
-    if (isolatedEntities !== null) {
-      return isolatedEntities;
-    }
-
-    // If storeys are selected, compute combined element IDs from all selected storeys
-    // across ALL models (multi-model support)
-    // NOTE: Storey hierarchy uses original expressIds, but meshes use globalIds
-    // We must transform expressIds -> globalIds using the model's offset
+    // Compute storey isolation if storeys are selected
+    let storeyIsolation: Set<number> | null = null;
     if (selectedStoreys.size > 0) {
       const combinedGlobalIds = new Set<number>();
 
@@ -268,46 +263,56 @@ export function ViewportContainer() {
         const hierarchy = model.ifcDataStore?.spatialHierarchy;
         if (!hierarchy) continue;
 
-        // Get this model's offset directly from the model (no need for registry)
         const offset = model.idOffset ?? 0;
 
         for (const storeyId of selectedStoreys) {
-          // Note: storeyId itself might be a globalId if the user selected via mesh click,
-          // or an original ID if selected via hierarchy panel. The byStorey map uses original IDs.
-          // For now, try both the storeyId and storeyId - offset
-          const storeyElementIds = hierarchy.byStorey.get(storeyId) || hierarchy.byStorey.get(storeyId - offset);
+          const localStoreyId = hierarchy.byStorey.has(storeyId) ? storeyId : storeyId - offset;
+          const storeyElementIds = collectIfcBuildingStoreyElementsWithIfcSpace(hierarchy, localStoreyId);
           if (storeyElementIds) {
             for (const originalExpressId of storeyElementIds) {
-              // Transform to globalId
-              const globalId = originalExpressId + offset;
-              combinedGlobalIds.add(globalId);
+              combinedGlobalIds.add(originalExpressId + offset);
             }
           }
         }
       }
 
-      // Also check legacy ifcDataStore (for single-model mode without federation)
-      // In this case, offset is 0, so globalId = expressId
+      // Legacy single-model mode (offset = 0)
       if (ifcDataStore?.spatialHierarchy && storeModels.size === 0) {
         const hierarchy = ifcDataStore.spatialHierarchy;
         for (const storeyId of selectedStoreys) {
-          const storeyElementIds = hierarchy.byStorey.get(storeyId);
+          const storeyElementIds = collectIfcBuildingStoreyElementsWithIfcSpace(hierarchy, storeyId);
           if (storeyElementIds) {
             for (const id of storeyElementIds) {
-              combinedGlobalIds.add(id); // offset = 0 for legacy single-model
+              combinedGlobalIds.add(id);
             }
           }
         }
       }
 
       if (combinedGlobalIds.size > 0) {
-        return combinedGlobalIds;
+        storeyIsolation = combinedGlobalIds;
       }
     }
 
-    // No isolation active
-    return null;
-  }, [storeModels, ifcDataStore, selectedStoreys, isolatedEntities]);
+    // Collect all active filters and intersect them
+    const filters: Set<number>[] = [];
+    if (storeyIsolation !== null) filters.push(storeyIsolation);
+    if (classFilter !== null) filters.push(classFilter.ids);
+    if (isolatedEntities !== null) filters.push(isolatedEntities);
+
+    if (filters.length === 0) return null;
+    if (filters.length === 1) return filters[0];
+
+    // Intersect all active filters — start from smallest for efficiency
+    const sorted = filters.sort((a, b) => a.size - b.size);
+    const intersection = new Set<number>();
+    for (const id of sorted[0]) {
+      if (sorted.every(s => s.has(id))) {
+        intersection.add(id);
+      }
+    }
+    return intersection;
+  }, [storeModels, ifcDataStore, selectedStoreys, isolatedEntities, classFilter]);
 
   // Grid Pattern
   const GridPattern = () => (

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

@@ -68,7 +68,8 @@ export function HierarchyNode({
   onRemoveModel,
   onModelHeaderClick,
 }: HierarchyNodeProps) {
-  const Icon = TYPE_ICONS[node.type] || TYPE_ICONS.default;
+  const resolvedType = node.ifcType || node.type;
+  const Icon = TYPE_ICONS[resolvedType] || TYPE_ICONS[node.type] || TYPE_ICONS.default;
 
   // Model header nodes (for visibility control and expansion)
   if (node.type === 'model-header' && node.id.startsWith('model-')) {
@@ -261,19 +262,25 @@ export function HierarchyNode({
             <Icon className="h-3.5 w-3.5 shrink-0 text-zinc-500 dark:text-zinc-400" />
           </TooltipTrigger>
           <TooltipContent>
-            <p className="text-xs">{node.type}</p>
+            <p className="text-xs">{resolvedType}</p>
           </TooltipContent>
         </Tooltip>
 
         {/* Name */}
         <span className={cn(
           'flex-1 text-sm truncate ml-1.5',
-          isSpatialContainer(node.type) || node.type === 'IfcBuildingStorey' || node.type === 'unified-storey' || node.type === 'type-group'
+          isSpatialContainer(node.type) || node.type === 'IfcBuildingStorey' || node.type === 'IfcSpace' || 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'
         )}>{node.name}</span>
 
+        {node.ifcType && node.type === 'element' && (
+          <span className="text-[10px] font-mono text-zinc-400 dark:text-zinc-500 truncate max-w-[90px]">
+            {node.ifcType}
+          </span>
+        )}
+
         {/* Storey Elevation */}
         {node.storeyElevation !== undefined && (
           <Tooltip>

package/src/components/viewer/hierarchy/treeDataBuilder.test.ts

@@ -0,0 +1,126 @@
+/* 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 { IfcTypeEnum, type SpatialHierarchy, type SpatialNode } from '@ifc-lite/data';
+import type { IfcDataStore } from '@ifc-lite/parser';
+import { useViewerStore, type FederatedModel } from '@/store';
+import { buildTreeData } from './treeDataBuilder';
+
+function createSpatialNode(
+  expressId: number,
+  type: IfcTypeEnum,
+  name: string,
+  children: SpatialNode[] = [],
+): SpatialNode {
+  return {
+    expressId,
+    type,
+    name,
+    children,
+    elements: [],
+  };
+}
+
+function createDataStore(): IfcDataStore {
+  const spaceNode = createSpatialNode(5, IfcTypeEnum.IfcSpace, 'e3035b71');
+  const storeyNode = createSpatialNode(4, IfcTypeEnum.IfcBuildingStorey, 'MY_STOREY', [spaceNode]);
+  const buildingNode = createSpatialNode(3, IfcTypeEnum.IfcBuilding, 'MY_BUILDING', [storeyNode]);
+  const siteNode = createSpatialNode(2, IfcTypeEnum.IfcSite, 'MY_SITE', [buildingNode]);
+  const projectNode = createSpatialNode(1, IfcTypeEnum.IfcProject, 'MY_PROJECT', [siteNode]);
+
+  const spatialHierarchy: SpatialHierarchy = {
+    project: projectNode,
+    byStorey: new Map([[4, [6, 7]]]),
+    byBuilding: new Map(),
+    bySite: new Map(),
+    bySpace: new Map([[5, [7]]]),
+    storeyElevations: new Map(),
+    storeyHeights: new Map(),
+    elementToStorey: new Map([[6, 4], [7, 4]]),
+    getStoreyElements: () => [],
+    getStoreyByElevation: () => null,
+    getContainingSpace: (elementId: number) => (elementId === 7 ? 5 : null),
+    getPath: () => [],
+  };
+
+  return {
+    spatialHierarchy,
+    entities: {
+      count: 0,
+      getName: (id: number) => {
+        if (id === 6) return 'Wall';
+        if (id === 7) return '';
+        return '';
+      },
+      getTypeName: (id: number) => {
+        if (id === 6) return 'IfcWall';
+        if (id === 7) return 'IfcWindow';
+        if (id === 5) return 'IfcSpace';
+        return 'Unknown';
+      },
+    },
+  } as unknown as IfcDataStore;
+}
+
+function createModel(idOffset: number): FederatedModel {
+  return {
+    id: 'model-1',
+    name: 'Model 1',
+    ifcDataStore: createDataStore(),
+    geometryResult: { meshes: [], totalVertices: 0, totalTriangles: 0, coordinateInfo: null as never },
+    visible: true,
+    collapsed: false,
+    schemaVersion: 'IFC4',
+    loadedAt: 1,
+    fileSize: 1,
+    idOffset,
+    maxExpressId: 7,
+  };
+}
+
+describe('buildTreeData', () => {
+  it('keeps IfcSpace as a spatial node, expands bySpace children, and avoids storey duplicates', () => {
+    useViewerStore.setState({ models: new Map() });
+    useViewerStore.getState().registerModelOffset('tree-test-padding', 99);
+    const idOffset = useViewerStore.getState().registerModelOffset('model-1', 7);
+    const model = createModel(idOffset);
+    useViewerStore.setState({ models: new Map([['model-1', model]]) });
+
+    const models = new Map<string, FederatedModel>([['model-1', model]]);
+    const expandedNodes = new Set([
+      'root-1',
+      'root-1-2',
+      'root-1-2-3',
+      'root-1-2-3-4',
+      'root-1-2-3-4-5',
+    ]);
+
+    const nodes = buildTreeData(models, null, expandedNodes, false, []);
+
+    const storeyNode = nodes.find((node) => node.id === 'root-1-2-3-4');
+    assert.ok(storeyNode);
+    assert.strictEqual(storeyNode.elementCount, 1);
+
+    const spaceNode = nodes.find((node) => node.id === 'root-1-2-3-4-5');
+    assert.ok(spaceNode);
+    assert.strictEqual(spaceNode.type, 'IfcSpace');
+    assert.deepStrictEqual(spaceNode.expressIds, [5]);
+    assert.deepStrictEqual(spaceNode.globalIds, [105]);
+    assert.strictEqual(spaceNode.elementCount, 1);
+    assert.strictEqual(spaceNode.hasChildren, true);
+
+    const windowNode = nodes.find((node) => node.id === 'element-model-1-7');
+    assert.ok(windowNode);
+    assert.strictEqual(windowNode.type, 'element');
+    assert.strictEqual(windowNode.ifcType, 'IfcWindow');
+    assert.deepStrictEqual(windowNode.expressIds, [7]);
+    assert.deepStrictEqual(windowNode.globalIds, [107]);
+    assert.strictEqual(windowNode.name, 'IfcWindow #7');
+
+    assert.strictEqual(nodes.filter((node) => node.id === 'element-model-1-6').length, 1);
+    assert.strictEqual(nodes.filter((node) => node.id === 'element-model-1-7').length, 1);
+  });
+});