@ifc-lite/viewer 1.17.4 → 1.17.6

package/src/components/viewer/tools/SectionPanel.tsx

@@ -7,17 +7,19 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { X, Slice, ChevronDown, FileImage } from 'lucide-react';
+import { X, Slice, ChevronDown, FileImage, FlipHorizontal2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useViewerStore } from '@/store';
 import { AXIS_INFO } from './sectionConstants';
 import { SectionPlaneVisualization } from './SectionVisualization';
+import { SectionCapControls } from './SectionCapControls';
 
 export function SectionOverlay() {
   const sectionPlane = useViewerStore((s) => s.sectionPlane);
   const setSectionPlaneAxis = useViewerStore((s) => s.setSectionPlaneAxis);
   const setSectionPlanePosition = useViewerStore((s) => s.setSectionPlanePosition);
   const toggleSectionPlane = useViewerStore((s) => s.toggleSectionPlane);
+  const flipSectionPlane = useViewerStore((s) => s.flipSectionPlane);
   const setActiveTool = useViewerStore((s) => s.setActiveTool);
   const setDrawingPanelVisible = useViewerStore((s) => s.setDrawing2DPanelVisible);
   const drawingPanelVisible = useViewerStore((s) => s.drawing2DPanelVisible);
@@ -83,10 +85,10 @@ export function SectionOverlay() {
 
         {/* Expandable content */}
         {!isPanelCollapsed && (
-          <div className="border-t px-3 pb-3 min-w-64">
+          <div className="border-t px-3 pb-3 min-w-72">
             {/* Direction Selection */}
             <div className="mt-3">
-              <label className="text-xs text-muted-foreground mb-2 block">Direction</label>
+              <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1.5">Direction</div>
               <div className="flex gap-1">
                 {(['down', 'front', 'side'] as const).map((axis) => (
                   <Button
@@ -105,16 +107,29 @@ export function SectionOverlay() {
             {/* Position Slider */}
             <div className="mt-3">
               <div className="flex items-center justify-between mb-1">
-                <label className="text-xs text-muted-foreground">Position</label>
-                <input
-                  type="number"
-                  min="0"
-                  max="100"
-                  step="0.1"
-                  value={sectionPlane.position}
-                  onChange={handlePositionChange}
-                  className="w-16 text-xs font-mono bg-muted px-1.5 py-0.5 rounded border-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                />
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground">Position</div>
+                <div className="flex items-center gap-1">
+                  <Button
+                    variant={sectionPlane.flipped ? 'default' : 'ghost'}
+                    size="icon-sm"
+                    onClick={flipSectionPlane}
+                    aria-pressed={sectionPlane.flipped}
+                    aria-label={sectionPlane.flipped ? 'Unflip cut direction' : 'Flip cut direction'}
+                    title={sectionPlane.flipped ? 'Cut direction is flipped' : 'Flip cut direction'}
+                  >
+                    <FlipHorizontal2 className="h-3 w-3" />
+                  </Button>
+                  <input
+                    type="number"
+                    min="0"
+                    max="100"
+                    step="0.1"
+                    value={sectionPlane.position}
+                    onChange={handlePositionChange}
+                    aria-label="Section plane position percentage"
+                    className="w-16 text-xs font-mono bg-muted px-1.5 py-0.5 rounded border-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  />
+                </div>
               </div>
               <input
                 type="range"
@@ -123,10 +138,14 @@ export function SectionOverlay() {
                 step="0.1"
                 value={sectionPlane.position}
                 onChange={handlePositionChange}
+                aria-label="Section plane position slider"
                 className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
               />
             </div>
 
+            {/* Cap surface controls (hatch, colour, spacing) */}
+            <SectionCapControls />
+
             {/* Show 2D panel button - only when panel is closed */}
             {!drawingPanelVisible && (
               <div className="mt-3 pt-3 border-t">
@@ -156,12 +175,14 @@ export function SectionOverlay() {
       >
         <span className="font-mono text-xs uppercase tracking-wide">
           {sectionPlane.enabled
-            ? `Cutting ${AXIS_INFO[sectionPlane.axis].label.toLowerCase()} at ${sectionPlane.position.toFixed(1)}%`
-            : 'Preview mode'}
+            ? `Cut ${AXIS_INFO[sectionPlane.axis].label.toLowerCase()} at ${sectionPlane.position.toFixed(1)}%${sectionPlane.flipped ? ' (flipped)' : ''}`
+            : 'Clip off — drag slider to cut'}
         </span>
       </div>
 
-      {/* Enable toggle - brutalist style matching Measure tool */}
+      {/* Enable toggle — when OFF the model is not clipped even though the
+          plane visual is shown. Label is explicit so users don't mistake
+          "Preview" for "nothing will happen". */}
       <div className="pointer-events-auto absolute bottom-4 left-1/2 -translate-x-1/2 z-30">
         <button
           onClick={toggleSectionPlane}
@@ -170,9 +191,9 @@ export function SectionOverlay() {
               ? 'bg-primary text-primary-foreground border-primary'
               : 'bg-zinc-100 dark:bg-zinc-900 text-zinc-500 border-zinc-300 dark:border-zinc-700'
           }`}
-          title="Toggle section plane"
+          title={sectionPlane.enabled ? 'Click to disable the cut' : 'Click to enable the cut'}
         >
-          {sectionPlane.enabled ? 'Cutting' : 'Preview'}
+          {sectionPlane.enabled ? 'Clipping' : 'Clip off'}
         </button>
       </div>
 

package/src/components/viewer/useAnimationLoop.ts

@@ -170,7 +170,15 @@ export function useAnimationLoop(params: UseAnimationLoopParams): void {
           isInteracting: isInteractingRef.current || isAnimating,
           buildingRotation: coordinateInfoRef.current?.buildingRotation,
           sectionPlane: activeToolRef.current === 'section' ? {
-            ...sectionPlaneRef.current,
+            axis: sectionPlaneRef.current.axis,
+            position: sectionPlaneRef.current.position,
+            enabled: sectionPlaneRef.current.enabled,
+            flipped: sectionPlaneRef.current.flipped,
+            // Cap rendering settings — the renderer reads these to draw the
+            // filled, hatched cut surfaces.
+            showCap: sectionPlaneRef.current.showCap,
+            showOutlines: sectionPlaneRef.current.showOutlines,
+            capStyle: sectionPlaneRef.current.capStyle,
             min: sectionRangeRef.current?.min,
             max: sectionRangeRef.current?.max,
           } : undefined,

package/src/components/viewer/useRenderUpdates.ts

@@ -77,7 +77,7 @@ export function useRenderUpdates(params: UseRenderUpdatesParams): void {
 
   // Theme-aware clear color update
   useEffect(() => {
-    clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark');
+    clearColorRef.current = getThemeClearColor(theme as 'light' | 'dark' | 'colorful');
     rendererRef.current?.requestRender();
   }, [theme, isInitialized]);
 

package/src/hooks/ids/idsDataAccessor.ts

@@ -19,7 +19,11 @@ import type {
   ParentInfo,
   PartOfRelation,
 } from '@ifc-lite/ids';
-import type { IfcDataStore } from '@ifc-lite/parser';
+import {
+  type IfcDataStore,
+  extractAllEntityAttributes,
+  extractTypeEntityOwnProperties,
+} from '@ifc-lite/parser';
 
 /**
  * Create an IFCDataAccessor from an IfcDataStore
@@ -59,7 +63,26 @@ export function createDataAccessor(
     },
 
     getObjectType(expressId: number): string | undefined {
-      return dataStore.entities?.getObjectType?.(expressId);
+      // Try the pre-computed ObjectType first (works for IfcObject subtypes)
+      const objectType = dataStore.entities?.getObjectType?.(expressId);
+      if (objectType) return objectType;
+
+      // For IfcTypeObject subtypes (IfcWallType, etc.), ObjectType doesn't exist —
+      // we need to extract PredefinedType from entity attributes instead.
+      // Also handles IfcObject subtypes that have PredefinedType at different positions.
+      const allAttrs = extractAllEntityAttributes(dataStore, expressId);
+      const predefinedType = allAttrs.find(a => a.name === 'PredefinedType');
+      if (predefinedType?.value && predefinedType.value !== 'NOTDEFINED') {
+        return predefinedType.value;
+      }
+
+      // If PredefinedType is USERDEFINED or absent, check ObjectType from attributes
+      const objTypeAttr = allAttrs.find(a => a.name === 'ObjectType');
+      if (objTypeAttr?.value) {
+        return objTypeAttr.value;
+      }
+
+      return undefined;
     },
 
     getEntitiesByType(typeName: string): number[] {
@@ -119,29 +142,42 @@ export function createDataAccessor(
 
     getPropertySets(expressId: number): PropertySetInfo[] {
       const propertiesStore = dataStore.properties;
-      if (!propertiesStore) return [];
 
-      // Use getForEntity (returns PropertySet[])
-      const psets = propertiesStore.getForEntity?.(expressId);
-      if (!psets) return [];
-
-      return psets.map((pset) => ({
-        name: pset.name,
-        properties: (pset.properties || []).map((prop) => {
-          // Convert value: ensure it's a primitive type (not array)
-          let value: string | number | boolean | null = null;
-          if (Array.isArray(prop.value)) {
-            value = JSON.stringify(prop.value);
-          } else {
-            value = prop.value as string | number | boolean | null;
-          }
-          return {
-            name: prop.name,
-            value,
-            dataType: String(prop.type || 'IFCLABEL'),
-          };
-        }),
-      }));
+      // Try relationship-based properties first (works for IfcObject instances)
+      const psets = propertiesStore?.getForEntity?.(expressId);
+
+      // Convert property sets to the IDS format
+      const mapPsets = (rawPsets: Array<{ name: string; properties: Array<{ name: string; value: unknown; type: unknown }> }>): PropertySetInfo[] =>
+        rawPsets.map((pset) => ({
+          name: pset.name,
+          properties: (pset.properties || []).map((prop) => {
+            let value: string | number | boolean | null = null;
+            if (Array.isArray(prop.value)) {
+              value = JSON.stringify(prop.value);
+            } else {
+              value = prop.value as string | number | boolean | null;
+            }
+            return {
+              name: prop.name,
+              value,
+              dataType: String(prop.type || 'IFCLABEL'),
+            };
+          }),
+        }));
+
+      if (psets && psets.length > 0) {
+        return mapPsets(psets);
+      }
+
+      // For IfcTypeObject subtypes (IfcWallType, IfcSlabType, etc.),
+      // properties come from the HasPropertySets attribute (index 5),
+      // not from IfcRelDefinesByProperties relationships.
+      const typePsets = extractTypeEntityOwnProperties(dataStore, expressId);
+      if (typePsets.length > 0) {
+        return mapPsets(typePsets);
+      }
+
+      return [];
     },
 
     getClassifications(expressId: number): ClassificationInfo[] {

package/src/hooks/ingest/viewerModelIngest.ts

@@ -3,7 +3,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import { IfcParser, parseIfcx, type IfcDataStore } from '@ifc-lite/parser';
-import { GeometryProcessor, GeometryQuality, type CoordinateInfo, type GeometryResult, type MeshData } from '@ifc-lite/geometry';
+import { GeometryProcessor, GeometryQuality, type CoordinateInfo, type DynamicBatchConfig, type GeometryResult, type MeshData } from '@ifc-lite/geometry';
 import { loadGLBToMeshData } from '@ifc-lite/cache';
 import type { SchemaVersion } from '../../store/types.js';
 import { calculateMeshBounds, calculateStoreyHeights, createCoordinateInfo, normalizeColor } from '../../utils/localParsingUtils.js';
@@ -44,13 +44,17 @@ export interface StepBufferIngestOptions {
   fileName: string;
   buffer: ArrayBuffer;
   fileSizeMB: number;
-  getDynamicBatchSize: (fileSizeMB: number) => number | { initial: number; subsequent: number };
+  getDynamicBatchSize: (fileSizeMB: number) => number | DynamicBatchConfig;
   onProgress?: (progress: { phase: string; percent: number }) => void;
   onBatch?: (event: StepBatchEvent) => void;
   onColorUpdate?: (updates: Map<number, RgbaColor>) => void;
   onSpatialReady?: (dataStore: IfcDataStore) => void;
   onRtcOffset?: (event: StepRtcOffsetEvent) => void;
   shouldAbort?: () => boolean;
+  /** Shared RTC offset from first federated model (IFC Z-up coords).
+   *  When set, this model uses the same RTC as the first model instead of
+   *  computing its own, ensuring all models share the same coordinate space. */
+  sharedRtcOffset?: { x: number; y: number; z: number };
 }
 
 export interface StepBufferIngestResult extends ViewerModelPayload {
@@ -204,6 +208,7 @@ export async function parseStepBufferViewerModel(options: StepBufferIngestOption
   for await (const event of geometryProcessor.processAdaptive(new Uint8Array(options.buffer), {
     sizeThreshold: 2 * 1024 * 1024,
     batchSize: options.getDynamicBatchSize(options.fileSizeMB),
+    sharedRtcOffset: options.sharedRtcOffset,
   })) {
     if (options.shouldAbort?.()) {
       break;