@ifc-lite/viewer 1.0.0

package/src/index.css

@@ -0,0 +1,177 @@
+/* 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 "tailwindcss";
+
+/* Custom theme configuration */
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(240 10% 3.9%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(240 10% 3.9%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(240 10% 3.9%);
+  --color-primary: hsl(217 91% 60%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-secondary: hsl(240 4.8% 95.9%);
+  --color-secondary-foreground: hsl(240 5.9% 10%);
+  --color-muted: hsl(240 4.8% 95.9%);
+  --color-muted-foreground: hsl(240 3.8% 46.1%);
+  --color-accent: hsl(240 4.8% 95.9%);
+  --color-accent-foreground: hsl(240 5.9% 10%);
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-border: hsl(240 5.9% 90%);
+  --color-input: hsl(240 5.9% 90%);
+  --color-ring: hsl(217 91% 60%);
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+}
+
+/* Dark mode colors */
+.dark {
+  --color-background: hsl(240 10% 3.9%);
+  --color-foreground: hsl(0 0% 98%);
+  --color-card: hsl(240 10% 3.9%);
+  --color-card-foreground: hsl(0 0% 98%);
+  --color-popover: hsl(240 10% 3.9%);
+  --color-popover-foreground: hsl(0 0% 98%);
+  --color-primary: hsl(217 91% 60%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-secondary: hsl(240 3.7% 15.9%);
+  --color-secondary-foreground: hsl(0 0% 98%);
+  --color-muted: hsl(240 3.7% 15.9%);
+  --color-muted-foreground: hsl(240 5% 64.9%);
+  --color-accent: hsl(240 3.7% 15.9%);
+  --color-accent-foreground: hsl(0 0% 98%);
+  --color-destructive: hsl(0 62.8% 30.6%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-border: hsl(240 3.7% 15.9%);
+  --color-input: hsl(240 3.7% 15.9%);
+  --color-ring: hsl(217 91% 60%);
+}
+
+/* Base styles */
+* {
+  border-color: var(--color-border);
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+/* Custom scrollbar */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--color-muted-foreground) 30%, transparent) transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, var(--color-muted-foreground) 30%, transparent);
+  border-radius: 3px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, var(--color-muted-foreground) 50%, transparent);
+}
+
+/* Panel resize handle */
+.resize-handle {
+  background: transparent;
+  transition: background-color 0.15s;
+}
+
+.resize-handle:hover {
+  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+
+.resize-handle[data-resize-handle-active] {
+  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+}
+
+/* Tree node styles */
+.tree-node {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.25rem;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  border-left: 2px solid transparent;
+  transition: all 0.1s;
+}
+
+.tree-node:hover {
+  background-color: color-mix(in srgb, var(--color-muted) 50%, transparent);
+}
+
+.tree-node.selected {
+  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  border-left-color: var(--color-primary);
+}
+
+.tree-node.filtered {
+  opacity: 0.5;
+}
+
+.tree-node.hidden {
+  text-decoration: line-through;
+  opacity: 0.3;
+}
+
+/* Toolbar button styles */
+.toolbar-button {
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  transition: all 0.15s;
+}
+
+.toolbar-button:hover {
+  background-color: var(--color-muted);
+}
+
+.toolbar-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-ring);
+}
+
+.toolbar-button.active {
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+
+.toolbar-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Loading skeleton animation */
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.skeleton {
+  background-color: var(--color-muted);
+  border-radius: 0.25rem;
+  animation: skeleton-pulse 2s ease-in-out infinite;
+}

package/src/lib/utils.ts

@@ -0,0 +1,45 @@
+/* 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 { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatNumber(num: number): string {
+  if (num >= 1_000_000) {
+    return (num / 1_000_000).toFixed(1) + 'M';
+  }
+  if (num >= 1_000) {
+    return (num / 1_000).toFixed(1) + 'K';
+  }
+  return num.toLocaleString();
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024 * 1024) {
+    return (bytes / (1024 * 1024 * 1024)).toFixed(1) + ' GB';
+  }
+  if (bytes >= 1024 * 1024) {
+    return (bytes / (1024 * 1024)).toFixed(0) + ' MB';
+  }
+  if (bytes >= 1024) {
+    return (bytes / 1024).toFixed(0) + ' KB';
+  }
+  return bytes + ' B';
+}
+
+export function formatDuration(ms: number): string {
+  if (ms < 1000) {
+    return ms + 'ms';
+  }
+  if (ms < 60000) {
+    return (ms / 1000).toFixed(1) + 's';
+  }
+  const minutes = Math.floor(ms / 60000);
+  const seconds = Math.floor((ms % 60000) / 1000);
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}

package/src/main.tsx

@@ -0,0 +1,18 @@
+/* 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/. */
+
+/**
+ * Application entry point
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/store.ts

@@ -0,0 +1,471 @@
+/* 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/. */
+
+/**
+ * Zustand store for viewer state
+ */
+
+import { create } from 'zustand';
+import type { IfcDataStore } from '@ifc-lite/parser';
+import type { GeometryResult, CoordinateInfo } from '@ifc-lite/geometry';
+
+// Measurement types
+export interface MeasurePoint {
+  x: number;
+  y: number;
+  z: number;
+  screenX: number;
+  screenY: number;
+}
+
+export interface Measurement {
+  id: string;
+  start: MeasurePoint;
+  end: MeasurePoint;
+  distance: number;
+}
+
+// Section plane types
+export interface SectionPlane {
+  axis: 'x' | 'y' | 'z';
+  position: number; // 0-100 percentage of model bounds
+  enabled: boolean;
+}
+
+// Hover state
+export interface HoverState {
+  entityId: number | null;
+  screenX: number;
+  screenY: number;
+}
+
+// Context menu state
+export interface ContextMenuState {
+  isOpen: boolean;
+  entityId: number | null;
+  screenX: number;
+  screenY: number;
+}
+
+// Box selection state
+export interface BoxSelectState {
+  isSelecting: boolean;
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+}
+
+interface ViewerState {
+  // Loading state
+  loading: boolean;
+  progress: { phase: string; percent: number } | null;
+  error: string | null;
+
+  // Data
+  ifcDataStore: IfcDataStore | null;
+  geometryResult: GeometryResult | null;
+
+  // Selection
+  selectedEntityId: number | null;
+  selectedEntityIds: Set<number>; // Multi-selection support
+  selectedStorey: number | null;
+
+  // Visibility
+  hiddenEntities: Set<number>;
+  isolatedEntities: Set<number> | null; // null = show all, Set = only show these
+
+  // UI State
+  leftPanelCollapsed: boolean;
+  rightPanelCollapsed: boolean;
+  activeTool: string;
+  theme: 'light' | 'dark';
+  isMobile: boolean;
+  hoverTooltipsEnabled: boolean;
+
+  // Hover state
+  hoverState: HoverState;
+
+  // Context menu state
+  contextMenu: ContextMenuState;
+
+  // Box selection state
+  boxSelect: BoxSelectState;
+
+  // Measurement state
+  measurements: Measurement[];
+  pendingMeasurePoint: MeasurePoint | null;
+
+  // Section plane state
+  sectionPlane: SectionPlane;
+
+  // Camera state (for ViewCube sync)
+  cameraRotation: { azimuth: number; elevation: number };
+  cameraCallbacks: {
+    setPresetView?: (view: 'top' | 'bottom' | 'front' | 'back' | 'left' | 'right') => void;
+    fitAll?: () => void;
+    home?: () => void;  // Reset to isometric view
+    zoomIn?: () => void;
+    zoomOut?: () => void;
+    frameSelection?: () => void;  // Center view on selected element (F key)
+    orbit?: (deltaX: number, deltaY: number) => void;  // Orbit camera by delta
+  };
+  // Direct callback for real-time ViewCube updates (bypasses React state)
+  onCameraRotationChange: ((rotation: { azimuth: number; elevation: number }) => void) | null;
+  // Direct callback for real-time scale bar updates (bypasses React state)
+  onScaleChange: ((scale: number) => void) | null;
+
+  // Actions
+  setLoading: (loading: boolean) => void;
+  setProgress: (progress: { phase: string; percent: number } | null) => void;
+  setError: (error: string | null) => void;
+  setIfcDataStore: (result: IfcDataStore | null) => void;
+  setGeometryResult: (result: GeometryResult | null) => void;
+  appendGeometryBatch: (meshes: GeometryResult['meshes'], coordinateInfo?: CoordinateInfo) => void;
+  updateCoordinateInfo: (coordinateInfo: CoordinateInfo) => void;
+  setSelectedEntityId: (id: number | null) => void;
+  setSelectedStorey: (id: number | null) => void;
+  setLeftPanelCollapsed: (collapsed: boolean) => void;
+  setRightPanelCollapsed: (collapsed: boolean) => void;
+  setActiveTool: (tool: string) => void;
+  setTheme: (theme: 'light' | 'dark') => void;
+  toggleTheme: () => void;
+  setIsMobile: (isMobile: boolean) => void;
+  toggleHoverTooltips: () => void;
+
+  // Camera actions
+  setCameraRotation: (rotation: { azimuth: number; elevation: number }) => void;
+  setCameraCallbacks: (callbacks: ViewerState['cameraCallbacks']) => void;
+  setOnCameraRotationChange: (callback: ((rotation: { azimuth: number; elevation: number }) => void) | null) => void;
+  // Call this for real-time updates (uses callback if available, skips state)
+  updateCameraRotationRealtime: (rotation: { azimuth: number; elevation: number }) => void;
+  setOnScaleChange: (callback: ((scale: number) => void) | null) => void;
+  updateScaleRealtime: (scale: number) => void;
+
+  // Visibility actions
+  hideEntity: (id: number) => void;
+  hideEntities: (ids: number[]) => void;
+  showEntity: (id: number) => void;
+  showEntities: (ids: number[]) => void;
+  toggleEntityVisibility: (id: number) => void;
+  isolateEntity: (id: number) => void;
+  isolateEntities: (ids: number[]) => void;
+  clearIsolation: () => void;
+  showAll: () => void;
+  isEntityVisible: (id: number) => boolean;
+
+  // Multi-selection actions
+  addToSelection: (id: number) => void;
+  removeFromSelection: (id: number) => void;
+  toggleSelection: (id: number) => void;
+  setSelectedEntityIds: (ids: number[]) => void;
+  clearSelection: () => void;
+
+  // Hover actions
+  setHoverState: (state: HoverState) => void;
+  clearHover: () => void;
+
+  // Context menu actions
+  openContextMenu: (entityId: number | null, screenX: number, screenY: number) => void;
+  closeContextMenu: () => void;
+
+  // Box selection actions
+  startBoxSelect: (startX: number, startY: number) => void;
+  updateBoxSelect: (currentX: number, currentY: number) => void;
+  endBoxSelect: () => void;
+  cancelBoxSelect: () => void;
+
+  // Measurement actions
+  addMeasurePoint: (point: MeasurePoint) => void;
+  completeMeasurement: (endPoint: MeasurePoint) => void;
+  deleteMeasurement: (id: string) => void;
+  clearMeasurements: () => void;
+
+  // Section plane actions
+  setSectionPlaneAxis: (axis: 'x' | 'y' | 'z') => void;
+  setSectionPlanePosition: (position: number) => void;
+  toggleSectionPlane: () => void;
+  flipSectionPlane: () => void;
+  resetSectionPlane: () => void;
+
+  // Reset all viewer state (called when loading new file)
+  resetViewerState: () => void;
+}
+
+export const useViewerStore = create<ViewerState>((set, get) => ({
+  loading: false,
+  progress: null,
+  error: null,
+  ifcDataStore: null,
+  geometryResult: null,
+  selectedEntityId: null,
+  selectedEntityIds: new Set(),
+  selectedStorey: null,
+  hiddenEntities: new Set(),
+  isolatedEntities: null,
+  leftPanelCollapsed: false,
+  rightPanelCollapsed: false,
+  activeTool: 'select',
+  theme: 'dark',
+  isMobile: false,
+  hoverTooltipsEnabled: false,
+  hoverState: { entityId: null, screenX: 0, screenY: 0 },
+  contextMenu: { isOpen: false, entityId: null, screenX: 0, screenY: 0 },
+  boxSelect: { isSelecting: false, startX: 0, startY: 0, currentX: 0, currentY: 0 },
+  measurements: [],
+  pendingMeasurePoint: null,
+  sectionPlane: { axis: 'y', position: 50, enabled: false },
+  cameraRotation: { azimuth: 45, elevation: 25 },
+  cameraCallbacks: {},
+  onCameraRotationChange: null,
+  onScaleChange: null,
+
+  setLoading: (loading) => set({ loading }),
+  setProgress: (progress) => set({ progress }),
+  setError: (error) => set({ error }),
+  setIfcDataStore: (ifcDataStore) => set({ ifcDataStore }),
+  setGeometryResult: (geometryResult) => set({ geometryResult }),
+  appendGeometryBatch: (meshes, coordinateInfo) => set((state) => {
+    if (!state.geometryResult) {
+      const totalTriangles = meshes.reduce((sum, m) => sum + (m.indices.length / 3), 0);
+      const totalVertices = meshes.reduce((sum, m) => sum + (m.positions.length / 3), 0);
+      return {
+        geometryResult: {
+          meshes,
+          totalTriangles,
+          totalVertices,
+          coordinateInfo: coordinateInfo || {
+            originShift: { x: 0, y: 0, z: 0 },
+            originalBounds: { min: { x: 0, y: 0, z: 0 }, max: { x: 0, y: 0, z: 0 } },
+            shiftedBounds: { min: { x: 0, y: 0, z: 0 }, max: { x: 0, y: 0, z: 0 } },
+            isGeoReferenced: false,
+          },
+        },
+      };
+    }
+    const allMeshes = [...state.geometryResult.meshes, ...meshes];
+    const totalTriangles = allMeshes.reduce((sum, m) => sum + (m.indices.length / 3), 0);
+    const totalVertices = allMeshes.reduce((sum, m) => sum + (m.positions.length / 3), 0);
+    return {
+      geometryResult: {
+        ...state.geometryResult,
+        meshes: allMeshes,
+        totalTriangles,
+        totalVertices,
+        coordinateInfo: coordinateInfo || state.geometryResult.coordinateInfo,
+      },
+    };
+  }),
+  updateCoordinateInfo: (coordinateInfo) => set((state) => {
+    if (!state.geometryResult) return {};
+    return {
+      geometryResult: {
+        ...state.geometryResult,
+        coordinateInfo,
+      },
+    };
+  }),
+  setSelectedEntityId: (selectedEntityId) => set({ selectedEntityId }),
+  setSelectedStorey: (selectedStorey) => set({ selectedStorey }),
+  setLeftPanelCollapsed: (leftPanelCollapsed) => set({ leftPanelCollapsed }),
+  setRightPanelCollapsed: (rightPanelCollapsed) => set({ rightPanelCollapsed }),
+  setActiveTool: (activeTool) => set({ activeTool }),
+  setTheme: (theme) => {
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    set({ theme });
+  },
+  toggleTheme: () => {
+    const newTheme = get().theme === 'dark' ? 'light' : 'dark';
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+    set({ theme: newTheme });
+  },
+  setIsMobile: (isMobile) => set({ isMobile }),
+  toggleHoverTooltips: () => set((state) => ({ hoverTooltipsEnabled: !state.hoverTooltipsEnabled })),
+
+  // Camera actions
+  setCameraRotation: (cameraRotation) => set({ cameraRotation }),
+  setCameraCallbacks: (cameraCallbacks) => set({ cameraCallbacks }),
+  setOnCameraRotationChange: (onCameraRotationChange) => set({ onCameraRotationChange }),
+  updateCameraRotationRealtime: (rotation) => {
+    const callback = get().onCameraRotationChange;
+    if (callback) {
+      // Use direct callback - no React state update, no re-renders
+      callback(rotation);
+    }
+    // Don't update store state during real-time updates
+  },
+  setOnScaleChange: (onScaleChange) => set({ onScaleChange }),
+  updateScaleRealtime: (scale) => {
+    const callback = get().onScaleChange;
+    if (callback) {
+      // Use direct callback - no React state update, no re-renders
+      callback(scale);
+    }
+    // Don't update store state during real-time updates
+  },
+
+  // Visibility actions
+  hideEntity: (id) => set((state) => {
+    const newHidden = new Set(state.hiddenEntities);
+    newHidden.add(id);
+    return { hiddenEntities: newHidden };
+  }),
+  hideEntities: (ids) => set((state) => {
+    const newHidden = new Set(state.hiddenEntities);
+    ids.forEach(id => newHidden.add(id));
+    return { hiddenEntities: newHidden };
+  }),
+  showEntity: (id) => set((state) => {
+    const newHidden = new Set(state.hiddenEntities);
+    newHidden.delete(id);
+    return { hiddenEntities: newHidden };
+  }),
+  showEntities: (ids) => set((state) => {
+    const newHidden = new Set(state.hiddenEntities);
+    ids.forEach(id => newHidden.delete(id));
+    return { hiddenEntities: newHidden };
+  }),
+  toggleEntityVisibility: (id) => set((state) => {
+    const newHidden = new Set(state.hiddenEntities);
+    if (newHidden.has(id)) {
+      newHidden.delete(id);
+    } else {
+      newHidden.add(id);
+    }
+    return { hiddenEntities: newHidden };
+  }),
+  isolateEntity: (id) => set({ isolatedEntities: new Set([id]) }),
+  isolateEntities: (ids) => set({ isolatedEntities: new Set(ids) }),
+  clearIsolation: () => set({ isolatedEntities: null }),
+  showAll: () => set({ hiddenEntities: new Set(), isolatedEntities: null }),
+  isEntityVisible: (id) => {
+    const state = get();
+    if (state.hiddenEntities.has(id)) return false;
+    if (state.isolatedEntities !== null && !state.isolatedEntities.has(id)) return false;
+    return true;
+  },
+
+  // Multi-selection actions
+  addToSelection: (id) => set((state) => {
+    const newSelection = new Set(state.selectedEntityIds);
+    newSelection.add(id);
+    return { selectedEntityIds: newSelection, selectedEntityId: id };
+  }),
+  removeFromSelection: (id) => set((state) => {
+    const newSelection = new Set(state.selectedEntityIds);
+    newSelection.delete(id);
+    const remaining = Array.from(newSelection);
+    return {
+      selectedEntityIds: newSelection,
+      selectedEntityId: remaining.length > 0 ? remaining[remaining.length - 1] : null,
+    };
+  }),
+  toggleSelection: (id) => set((state) => {
+    const newSelection = new Set(state.selectedEntityIds);
+    if (newSelection.has(id)) {
+      newSelection.delete(id);
+    } else {
+      newSelection.add(id);
+    }
+    const remaining = Array.from(newSelection);
+    return {
+      selectedEntityIds: newSelection,
+      selectedEntityId: remaining.length > 0 ? remaining[remaining.length - 1] : null,
+    };
+  }),
+  setSelectedEntityIds: (ids) => set({
+    selectedEntityIds: new Set(ids),
+    selectedEntityId: ids.length > 0 ? ids[ids.length - 1] : null,
+  }),
+  clearSelection: () => set({
+    selectedEntityIds: new Set(),
+    selectedEntityId: null,
+  }),
+
+  // Hover actions
+  setHoverState: (hoverState) => set({ hoverState }),
+  clearHover: () => set({ hoverState: { entityId: null, screenX: 0, screenY: 0 } }),
+
+  // Context menu actions
+  openContextMenu: (entityId, screenX, screenY) => set({
+    contextMenu: { isOpen: true, entityId, screenX, screenY },
+  }),
+  closeContextMenu: () => set({
+    contextMenu: { isOpen: false, entityId: null, screenX: 0, screenY: 0 },
+  }),
+
+  // Box selection actions
+  startBoxSelect: (startX, startY) => set({
+    boxSelect: { isSelecting: true, startX, startY, currentX: startX, currentY: startY },
+  }),
+  updateBoxSelect: (currentX, currentY) => set((state) => ({
+    boxSelect: { ...state.boxSelect, currentX, currentY },
+  })),
+  endBoxSelect: () => set({
+    boxSelect: { isSelecting: false, startX: 0, startY: 0, currentX: 0, currentY: 0 },
+  }),
+  cancelBoxSelect: () => set({
+    boxSelect: { isSelecting: false, startX: 0, startY: 0, currentX: 0, currentY: 0 },
+  }),
+
+  // Measurement actions
+  addMeasurePoint: (point) => set({ pendingMeasurePoint: point }),
+  completeMeasurement: (endPoint) => set((state) => {
+    if (!state.pendingMeasurePoint) return {};
+    const start = state.pendingMeasurePoint;
+    const distance = Math.sqrt(
+      Math.pow(endPoint.x - start.x, 2) +
+      Math.pow(endPoint.y - start.y, 2) +
+      Math.pow(endPoint.z - start.z, 2)
+    );
+    const measurement: Measurement = {
+      id: `m-${Date.now()}`,
+      start,
+      end: endPoint,
+      distance,
+    };
+    return {
+      measurements: [...state.measurements, measurement],
+      pendingMeasurePoint: null,
+    };
+  }),
+  deleteMeasurement: (id) => set((state) => ({
+    measurements: state.measurements.filter((m) => m.id !== id),
+  })),
+  clearMeasurements: () => set({ measurements: [], pendingMeasurePoint: null }),
+
+  // Section plane actions
+  setSectionPlaneAxis: (axis) => set((state) => ({
+    sectionPlane: { ...state.sectionPlane, axis },
+  })),
+  setSectionPlanePosition: (position) => set((state) => ({
+    sectionPlane: { ...state.sectionPlane, position },
+  })),
+  toggleSectionPlane: () => set((state) => ({
+    sectionPlane: { ...state.sectionPlane, enabled: !state.sectionPlane.enabled },
+  })),
+  flipSectionPlane: () => set((state) => ({
+    sectionPlane: { ...state.sectionPlane, position: 100 - state.sectionPlane.position },
+  })),
+  resetSectionPlane: () => set({
+    sectionPlane: { axis: 'y', position: 50, enabled: false },
+  }),
+
+  // Reset all viewer state when loading new file
+  resetViewerState: () => set({
+    selectedEntityId: null,
+    selectedEntityIds: new Set(),
+    selectedStorey: null,
+    hiddenEntities: new Set(),
+    isolatedEntities: null,
+    hoverState: { entityId: null, screenX: 0, screenY: 0 },
+    contextMenu: { isOpen: false, entityId: null, screenX: 0, screenY: 0 },
+    boxSelect: { isSelecting: false, startX: 0, startY: 0, currentX: 0, currentY: 0 },
+    measurements: [],
+    pendingMeasurePoint: null,
+    sectionPlane: { axis: 'y', position: 50, enabled: false },
+    cameraRotation: { azimuth: 45, elevation: 25 },
+    activeTool: 'select',
+  }),
+}));