@ifc-lite/viewer 1.17.2 → 1.17.3

package/src/components/viewer/PropertiesPanel.tsx

@@ -27,11 +27,12 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useViewerStore } from '@/store';
+import { toGlobalIdFromModels } from '@/store/globalId';
 import { useIfc } from '@/hooks/useIfc';
 import { configureMutationView } from '@/utils/configureMutationView';
 import { IfcQuery } from '@ifc-lite/query';
 import { MutablePropertyView } from '@ifc-lite/mutations';
-import { extractClassificationsOnDemand, extractMaterialsOnDemand, extractTypePropertiesOnDemand, extractTypeEntityOwnProperties, extractDocumentsOnDemand, extractRelationshipsOnDemand, type IfcDataStore } from '@ifc-lite/parser';
+import { extractClassificationsOnDemand, extractMaterialsOnDemand, extractTypePropertiesOnDemand, extractTypeEntityOwnProperties, extractDocumentsOnDemand, extractRelationshipsOnDemand, extractGeoreferencingOnDemand, type IfcDataStore } from '@ifc-lite/parser';
 import { EntityFlags, RelationshipType, isSpatialStructureTypeName, isStoreyLikeSpatialTypeName } from '@ifc-lite/data';
 import type { EntityRef, FederatedModel } from '@/store/types';
 
@@ -45,6 +46,7 @@ import { DocumentCard } from './properties/DocumentCard';
 import { RelationshipsCard } from './properties/RelationshipsCard';
 import type { PropertySet, QuantitySet } from './properties/encodingUtils';
 import { BsddCard } from './properties/BsddCard';
+import { GeoreferencingPanel } from './properties/GeoreferencingPanel';
 
 type DisplayProperty = { name: string; value: unknown; isMutated: boolean };
 type DisplayPropertySet = {
@@ -247,7 +249,7 @@ export function PropertiesPanel() {
     if (!geoResult?.meshes?.length) return null;
 
     // In multi-model mode, meshes use globalIds (originalExpressId + idOffset)
-    const targetExpressId = selectedEntity.expressId + (model?.idOffset ?? 0);
+    const targetExpressId = toGlobalIdFromModels(models, selectedEntity.modelId, selectedEntity.expressId);
 
     // Compute bounding box from matching mesh positions
     let minX = Infinity, minY = Infinity, minZ = Infinity;
@@ -515,6 +517,14 @@ export function PropertiesPanel() {
     return totalCount > 0 ? rels : null;
   }, [selectedEntity, model, ifcDataStore]);
 
+  // Extract georeferencing info for the model (used in coordinates section)
+  const georef = useMemo(() => {
+    const dataStore = model?.ifcDataStore ?? ifcDataStore;
+    if (!dataStore) return null;
+    const info = extractGeoreferencingOnDemand(dataStore as IfcDataStore);
+    return info?.hasGeoreference ? info : null;
+  }, [model, ifcDataStore]);
+
   // Extract type-level properties (e.g., from IfcWallType's HasPropertySets)
   const typeProperties = useMemo(() => {
     if (!selectedEntity) return null;
@@ -644,8 +654,8 @@ export function PropertiesPanel() {
 
   // Separate occurrence (instance) and inherited type properties.
   // Occurrence properties are displayed first, type properties in a separate section.
-  // When a pset exists at both levels, occurrence takes precedence; the type-only
-  // properties (not overridden at instance level) are shown in the inherited section.
+  // All type property sets are always shown in the inherited section so users can see
+  // what the type defines, even when the same pset exists at occurrence level.
   const { occurrenceProperties, inheritedTypeProperties } = useMemo(() => {
     const occ: PropertySet[] = properties.map(p => ({ ...p, source: 'instance' as const }));
 
@@ -653,23 +663,10 @@ export function PropertiesPanel() {
       return { occurrenceProperties: occ, inheritedTypeProperties: [] as PropertySet[] };
     }
 
-    const instanceByName = new Set(properties.map(p => p.name));
-    const inherited: PropertySet[] = [];
-
-    for (const typePset of typeProperties.psets) {
-      if (instanceByName.has(typePset.name)) {
-        // Pset exists at instance level - add type-only props that aren't overridden
-        const instancePset = properties.find(p => p.name === typePset.name)!;
-        const instancePropNames = new Set(instancePset.properties.map(p => p.name));
-        const extraProps = typePset.properties.filter(p => !instancePropNames.has(p.name));
-        if (extraProps.length > 0) {
-          inherited.push({ ...typePset, properties: extraProps, source: 'type' });
-        }
-      } else {
-        // Type-only pset - show fully in inherited section
-        inherited.push({ ...typePset, source: 'type' });
-      }
-    }
+    const inherited: PropertySet[] = typeProperties.psets.map(typePset => ({
+      ...typePset,
+      source: 'type' as const,
+    }));
 
     return { occurrenceProperties: occ, inheritedTypeProperties: inherited };
   }, [properties, typeProperties]);
@@ -770,6 +767,23 @@ export function PropertiesPanel() {
   }
 
   if (!selectedEntityId || !modelQuery || !entityNode) {
+    // Show model metadata when a single legacy model is loaded and nothing selected
+    if (ifcDataStore && models.size === 0 && geometryResult) {
+      const legacyModel: FederatedModel = {
+        id: '__legacy__',
+        name: 'Model',
+        ifcDataStore: ifcDataStore as IfcDataStore,
+        geometryResult,
+        visible: true,
+        collapsed: false,
+        schemaVersion: ((ifcDataStore as IfcDataStore).schemaVersion ?? 'IFC4') as FederatedModel['schemaVersion'],
+        loadedAt: Date.now(),
+        fileSize: (ifcDataStore as IfcDataStore).fileSize ?? 0,
+        idOffset: 0,
+        maxExpressId: (ifcDataStore as IfcDataStore).entityCount ?? 0,
+      };
+      return <ModelMetadataPanel model={legacyModel} />;
+    }
     return (
       <div className="h-full flex flex-col border-l-2 border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-black">
         <div className="p-3 border-b-2 border-zinc-200 dark:border-zinc-800 bg-white dark:bg-black">
@@ -781,7 +795,7 @@ export function PropertiesPanel() {
           </div>
           <p className="font-bold uppercase text-zinc-900 dark:text-zinc-100 mb-2">No Selection</p>
           <p className="text-xs font-mono text-zinc-500 dark:text-zinc-400 max-w-[150px]">
-            Select an element to view details
+            {models.size > 1 ? 'Select a model or element to view details' : 'Select an element to view details'}
           </p>
         </div>
       </div>
@@ -808,6 +822,13 @@ export function PropertiesPanel() {
               {entityName || `${entityType}`}
             </h3>
             <p className="text-xs font-mono text-zinc-500 dark:text-zinc-400">{entityType}</p>
+            {/* Show associated type entity for occurrences */}
+            {!isTypeEntity && typeProperties && (
+              <p className="text-[11px] font-mono text-indigo-500 dark:text-indigo-400 truncate" title={`${activeDataStore?.entities.getTypeName(typeProperties.typeId) || 'Type'}: ${typeProperties.typeName}`}>
+                <Building2 className="inline h-3 w-3 mr-1 -mt-0.5" />
+                {activeDataStore?.entities.getTypeName(typeProperties.typeId) || 'Type'}: {typeProperties.typeName}
+              </p>
+            )}
           </div>
           <div className="flex gap-1 shrink-0">
             <Tooltip>
@@ -932,55 +953,70 @@ export function PropertiesPanel() {
           </div>
         )}
 
-        {/* Entity Position - teal tint to distinguish from emerald storey bar */}
-        {entityCoordinates && (
+        {/* World coordinates + Georeferencing — single consolidated section */}
+        {(entityCoordinates || georef || editMode) && (
           <Collapsible open={coordOpen} onOpenChange={setCoordOpen}>
             <CollapsibleTrigger className="flex items-center gap-2 w-full text-xs border border-teal-500/30 px-2 py-1.5 text-teal-800 dark:text-teal-400 min-w-0 text-left group/coord">
               <Crosshair className="h-3.5 w-3.5 shrink-0" />
               <span className="font-bold uppercase tracking-wide shrink-0">World</span>
               {!coordOpen && (
                 <>
-                  <span className="font-mono text-[10px] text-teal-600/70 dark:text-teal-500/70 truncate min-w-0 flex-1 tabular-nums">
-                    <CoordVal axis="E" value={entityCoordinates.worldZup.center.x} />{' '}
-                    <CoordVal axis="N" value={entityCoordinates.worldZup.center.y} />{' '}
-                    <CoordVal axis="Z" value={entityCoordinates.worldZup.center.z} />
-                  </span>
+                  {entityCoordinates && (
+                    <span className="font-mono text-[10px] text-teal-600/70 dark:text-teal-500/70 truncate min-w-0 flex-1 tabular-nums">
+                      <CoordVal axis="E" value={entityCoordinates.worldZup.center.x} />{' '}
+                      <CoordVal axis="N" value={entityCoordinates.worldZup.center.y} />{' '}
+                      <CoordVal axis="Z" value={entityCoordinates.worldZup.center.z} />
+                    </span>
+                  )}
+                  {georef?.projectedCRS?.name && (
+                    <span className="font-mono text-[9px] text-teal-500/60 shrink-0">{georef.projectedCRS.name}</span>
+                  )}
                   <span className="text-[9px] text-teal-500/0 group-hover/coord:text-teal-500/40 transition-colors shrink-0">details</span>
                 </>
               )}
             </CollapsibleTrigger>
             <CollapsibleContent>
-              <div className="px-2 py-1.5 space-y-0.5">
-                <CoordRow
-                  label=""
-                  values={[
-                    { axis: 'E', value: entityCoordinates.worldZup.center.x },
-                    { axis: 'N', value: entityCoordinates.worldZup.center.y },
-                    { axis: 'Z', value: entityCoordinates.worldZup.center.z },
-                  ]}
-                  primary
-                  copyLabel="world"
-                  coordCopied={coordCopied}
-                  onCopy={copyCoords}
-                />
-                <CoordRow
-                  label="Local"
-                  values={[
-                    { axis: 'X', value: entityCoordinates.local.center.x },
-                    { axis: 'Y', value: entityCoordinates.local.center.y },
-                    { axis: 'Z', value: entityCoordinates.local.center.z },
-                  ]}
-                  copyLabel="local"
-                  coordCopied={coordCopied}
-                  onCopy={copyCoords}
-                />
-                <div className="flex items-start gap-1.5">
-                  <span className="text-[9px] font-medium text-muted-foreground/50 uppercase tracking-wider w-[34px] shrink-0 pt-px">Size</span>
-                  <span className="font-mono text-[10px] text-muted-foreground/50 tabular-nums">
-                    {(entityCoordinates.local.max.x - entityCoordinates.local.min.x).toFixed(2)} x {(entityCoordinates.local.max.y - entityCoordinates.local.min.y).toFixed(2)} x {(entityCoordinates.local.max.z - entityCoordinates.local.min.z).toFixed(2)}
-                  </span>
+              {entityCoordinates && (
+                <div className="px-2 py-1.5 space-y-0.5">
+                  <CoordRow
+                    label=""
+                    values={[
+                      { axis: 'E', value: entityCoordinates.worldZup.center.x },
+                      { axis: 'N', value: entityCoordinates.worldZup.center.y },
+                      { axis: 'Z', value: entityCoordinates.worldZup.center.z },
+                    ]}
+                    primary
+                    copyLabel="world"
+                    coordCopied={coordCopied}
+                    onCopy={copyCoords}
+                  />
+                  <CoordRow
+                    label="Local"
+                    values={[
+                      { axis: 'X', value: entityCoordinates.local.center.x },
+                      { axis: 'Y', value: entityCoordinates.local.center.y },
+                      { axis: 'Z', value: entityCoordinates.local.center.z },
+                    ]}
+                    copyLabel="local"
+                    coordCopied={coordCopied}
+                    onCopy={copyCoords}
+                  />
+                  <div className="flex items-start gap-1.5">
+                    <span className="text-[9px] font-medium text-muted-foreground/50 uppercase tracking-wider w-[34px] shrink-0 pt-px">Size</span>
+                    <span className="font-mono text-[10px] text-muted-foreground/50 tabular-nums">
+                      {(entityCoordinates.local.max.x - entityCoordinates.local.min.x).toFixed(2)} x {(entityCoordinates.local.max.y - entityCoordinates.local.min.y).toFixed(2)} x {(entityCoordinates.local.max.z - entityCoordinates.local.min.z).toFixed(2)}
+                    </span>
+                  </div>
                 </div>
-              </div>
+              )}
+              <GeoreferencingPanel
+                georef={georef}
+                modelId={selectedEntity?.modelId === 'legacy' ? '__legacy__' : (model?.id ?? selectedEntity?.modelId)}
+                enableEditing
+                schemaVersion={activeDataStore?.schemaVersion}
+                coordinateInfo={(model?.geometryResult ?? geometryResult)?.coordinateInfo}
+                geometryResult={model?.geometryResult ?? geometryResult}
+              />
             </CollapsibleContent>
           </Collapsible>
         )}
@@ -1131,7 +1167,7 @@ export function PropertiesPanel() {
                     )}
                     <div className="flex items-center gap-2 px-1 pb-0.5 text-[11px] text-indigo-600/70 dark:text-indigo-400/60 uppercase tracking-wider font-semibold">
                       <Building2 className="h-3 w-3 shrink-0" />
-                      <span className="truncate">Inherited Type Properties</span>
+                      <span className="truncate">Type Properties ({typeProperties.typeName})</span>
                     </div>
                     {inheritedTypeProperties.map((pset: PropertySet) => (
                       <PropertySetCard

package/src/components/viewer/Section2DPanel.tsx

@@ -22,6 +22,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useViewerStore } from '@/store';
+import { toGlobalIdFromModels } from '@/store/globalId';
 import { useIfc } from '@/hooks/useIfc';
 import { GraphicOverrideEngine } from '@ifc-lite/drawing-2d';
 import { type GeometryResult } from '@ifc-lite/geometry';
@@ -224,7 +225,7 @@ export function Section2DPanel({
       const model = models.get(modelId);
       if (model && model.idOffset !== undefined) {
         for (const localId of localHiddenIds) {
-          globalHiddenIds.add(localId + model.idOffset);
+          globalHiddenIds.add(toGlobalIdFromModels(models, model.id, localId));
         }
       }
     }
@@ -245,7 +246,7 @@ export function Section2DPanel({
       const model = models.get(modelId);
       if (model && model.idOffset !== undefined) {
         for (const localId of localIsolatedIds) {
-          globalIsolatedIds.add(localId + model.idOffset);
+          globalIsolatedIds.add(toGlobalIdFromModels(models, model.id, localId));
         }
       }
     }

package/src/components/viewer/ViewportContainer.tsx

@@ -10,6 +10,7 @@ import { Section2DPanel } from './Section2DPanel';
 import { BasketPresentationDock } from './BasketPresentationDock';
 import { BCFOverlay } from './bcf/BCFOverlay';
 import { useViewerStore } from '@/store';
+import { toGlobalIdFromModels } from '@/store/globalId';
 import { collectIfcBuildingStoreyElementsWithIfcSpace } from '@/store/basketVisibleSet';
 import { useIfc } from '@/hooks/useIfc';
 import { useWebGPU } from '@/hooks/useWebGPU';
@@ -265,14 +266,14 @@ export function ViewportContainer() {
         const hierarchy = model.ifcDataStore?.spatialHierarchy;
         if (!hierarchy) continue;
 
-        const offset = model.idOffset ?? 0;
-
         for (const storeyId of selectedStoreys) {
-          const localStoreyId = hierarchy.byStorey.has(storeyId) ? storeyId : storeyId - offset;
+          const localStoreyId = hierarchy.byStorey.has(storeyId)
+            ? storeyId
+            : storeyId - (model.idOffset ?? 0);
           const storeyElementIds = collectIfcBuildingStoreyElementsWithIfcSpace(hierarchy, localStoreyId);
           if (storeyElementIds) {
             for (const originalExpressId of storeyElementIds) {
-              combinedGlobalIds.add(originalExpressId + offset);
+              combinedGlobalIds.add(toGlobalIdFromModels(storeModels, model.id, originalExpressId));
             }
           }
         }

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

@@ -13,6 +13,7 @@ import {
 } from '@ifc-lite/data';
 import type { IfcDataStore } from '@ifc-lite/parser';
 import { useViewerStore, type FederatedModel } from '@/store';
+import { toGlobalIdFromModels } from '@/store/globalId';
 import type { TreeNode, NodeType, StoreyData, UnifiedStorey } from './types';
 
 /** Helper to create elevation key (with 0.5m tolerance for matching) */
@@ -300,7 +301,7 @@ export function buildTreeData(
       nodes.push({
         id: storeyNodeId,
         expressIds: allStoreyIds,
-        globalIds: unified.storeys.map((s) => s.storeyId + (models.get(s.modelId)?.idOffset ?? 0)),
+        globalIds: unified.storeys.map((s) => toGlobalIdFromModels(models, s.modelId, s.storeyId)),
         modelIds: unified.storeys.map(s => s.modelId),
         name: unified.name,
         type: 'unified-storey',