@ifc-lite/viewer 1.10.0 → 1.11.0

package/src/store/slices/pinboardSlice.test.ts

@@ -0,0 +1,160 @@
+/* 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, beforeEach } from 'node:test';
+import assert from 'node:assert';
+import { createPinboardSlice, type PinboardSlice } from './pinboardSlice.js';
+import type { EntityRef } from '../types.js';
+
+function createMockCrossSlice() {
+  return {
+    isolatedEntities: null as Set<number> | null,
+    hiddenEntities: new Set<number>(),
+    models: new Map<string, { idOffset: number }>([['legacy', { idOffset: 0 }]]),
+    cameraCallbacks: { getViewpoint: () => null },
+    sectionPlane: { axis: 'front' as const, position: 50, enabled: false, flipped: false },
+    drawing2D: null,
+    drawing2DDisplayOptions: { show3DOverlay: true, showHiddenLines: true },
+    setDrawing2D: () => {},
+    updateDrawing2DDisplayOptions: () => {},
+    setActiveTool: () => {},
+    clearEntitySelection: () => {},
+    activeTool: 'select',
+  };
+}
+
+describe('PinboardSlice', () => {
+  let state: PinboardSlice & ReturnType<typeof createMockCrossSlice>;
+  let setState: (partial: Partial<typeof state> | ((s: typeof state) => Partial<typeof state>)) => void;
+
+  beforeEach(() => {
+    const cross = createMockCrossSlice();
+    setState = (partial) => {
+      if (typeof partial === 'function') {
+        const updates = partial(state);
+        state = { ...state, ...updates };
+      } else {
+        state = { ...state, ...partial };
+      }
+    };
+
+    state = {
+      ...cross,
+      ...createPinboardSlice(setState, () => state, cross as any),
+    };
+  });
+
+  describe('setBasket / addToBasket / removeFromBasket isolation sync', () => {
+    it('setBasket syncs pinboardEntities and isolatedEntities', () => {
+      const refs: EntityRef[] = [
+        { modelId: 'legacy', expressId: 100 },
+        { modelId: 'legacy', expressId: 200 },
+      ];
+      state.setBasket(refs);
+
+      assert.strictEqual(state.pinboardEntities.size, 2);
+      assert.ok(state.pinboardEntities.has('legacy:100'));
+      assert.ok(state.pinboardEntities.has('legacy:200'));
+      assert.ok(state.isolatedEntities !== null);
+      assert.strictEqual(state.isolatedEntities!.size, 2);
+      assert.ok(state.isolatedEntities!.has(100));
+      assert.ok(state.isolatedEntities!.has(200));
+    });
+
+    it('addToBasket adds to existing basket and updates isolation', () => {
+      state.setBasket([{ modelId: 'legacy', expressId: 100 }]);
+      state.addToBasket([{ modelId: 'legacy', expressId: 200 }]);
+
+      assert.strictEqual(state.pinboardEntities.size, 2);
+      assert.ok(state.isolatedEntities !== null);
+      assert.strictEqual(state.isolatedEntities!.size, 2);
+    });
+
+    it('removeFromBasket removes and clears isolation when empty', () => {
+      state.setBasket([{ modelId: 'legacy', expressId: 100 }]);
+      state.removeFromBasket([{ modelId: 'legacy', expressId: 100 }]);
+
+      assert.strictEqual(state.pinboardEntities.size, 0);
+      assert.strictEqual(state.isolatedEntities, null);
+    });
+  });
+
+  describe('saveCurrentBasketView', () => {
+    it('creates view with unique id and sets activeBasketViewId', () => {
+      state.setBasket([{ modelId: 'legacy', expressId: 100 }]);
+      const id = state.saveCurrentBasketView();
+
+      assert.ok(id !== null);
+      assert.strictEqual(state.basketViews.length, 1);
+      assert.strictEqual(state.activeBasketViewId, id);
+      assert.strictEqual(state.basketViews[0].entityRefs.length, 1);
+    });
+
+    it('auto-increments view name', () => {
+      state.setBasket([{ modelId: 'legacy', expressId: 100 }]);
+      state.saveCurrentBasketView();
+      state.saveCurrentBasketView();
+
+      assert.strictEqual(state.basketViews.length, 2);
+      assert.strictEqual(state.basketViews[0].name, 'Basket 1');
+      assert.strictEqual(state.basketViews[1].name, 'Basket 2');
+    });
+
+    it('returns null when basket is empty', () => {
+      const id = state.saveCurrentBasketView();
+      assert.strictEqual(id, null);
+    });
+
+    it('captures section plane but not 2D drawing payload', () => {
+      state.setBasket([{ modelId: 'legacy', expressId: 100 }]);
+      state.activeTool = 'section';
+      state.sectionPlane = { axis: 'front', position: 42, enabled: true, flipped: false };
+      state.drawing2D = {
+        lines: [{ line: { start: { x: 0, y: 0 }, end: { x: 1, y: 1 } }, visibility: 'visible', category: 'solid' }],
+        cutPolygons: [],
+      } as unknown as typeof state.drawing2D;
+
+      const id = state.saveCurrentBasketView();
+      assert.ok(id !== null);
+      const saved = state.basketViews[0];
+      assert.ok(saved.section !== null);
+      assert.strictEqual(saved.section!.plane.enabled, true);
+      assert.strictEqual(saved.section!.drawing2D, null);
+    });
+  });
+
+  describe('restoreBasketEntities', () => {
+    it('restores basket and isolation state only', () => {
+      state.restoreBasketEntities(['legacy:100', 'legacy:200'], 'view-1');
+
+      assert.strictEqual(state.pinboardEntities.size, 2);
+      assert.ok(state.pinboardEntities.has('legacy:100'));
+      assert.ok(state.pinboardEntities.has('legacy:200'));
+      assert.strictEqual(state.activeBasketViewId, 'view-1');
+      assert.ok(state.isolatedEntities !== null);
+      assert.strictEqual(state.isolatedEntities!.size, 2);
+    });
+
+    it('handles empty entityRefs', () => {
+      state.restoreBasketEntities([], 'view-empty');
+
+      assert.strictEqual(state.pinboardEntities.size, 0);
+      assert.strictEqual(state.isolatedEntities, null);
+      assert.strictEqual(state.activeBasketViewId, 'view-empty');
+    });
+  });
+
+  describe('clearBasket', () => {
+    it('resets activeBasketViewId', () => {
+      state.setBasket([{ modelId: 'legacy', expressId: 100 }]);
+      state.saveCurrentBasketView();
+      assert.ok(state.activeBasketViewId !== null);
+
+      state.clearBasket();
+      assert.strictEqual(state.activeBasketViewId, null);
+      assert.strictEqual(state.pinboardEntities.size, 0);
+      assert.strictEqual(state.isolatedEntities, null);
+    });
+  });
+});

package/src/store/slices/pinboardSlice.ts

@@ -5,30 +5,82 @@
 /**
  * Pinboard (Basket) state slice
  *
- * The basket is an incremental isolation set. Users build it with:
- *   = (set)    — replace basket with current selection
- *   + (add)    — add current selection to basket
- *   − (remove) — remove current selection from basket
+ * The basket is an incremental isolation set. Users can build it from
+ * selection / visible scene / hierarchy sources via presentation controls:
+ *   = (set)    — replace basket with source set
+ *   + (add)    — add source set to basket
+ *   − (remove) — remove source set from basket
  *
  * When the basket is non-empty, only basket entities are visible (isolation).
  * The basket also syncs to isolatedEntities for renderer consumption.
+ * Users can persist any basket as a saved "view" with a thumbnail preview.
  */
 
 import type { StateCreator } from 'zustand';
-import type { EntityRef } from '../types.js';
+import type { Drawing2D } from '@ifc-lite/drawing-2d';
+import type { CameraCallbacks, CameraViewpoint, EntityRef, SectionPlane } from '../types.js';
 import { entityRefToString, stringToEntityRef } from '../types.js';
 
+export type BasketSource = 'selection' | 'visible' | 'hierarchy' | 'manual';
+
+export interface BasketSectionSnapshot {
+  plane: SectionPlane;
+  drawing2D: Drawing2D | null;
+  show3DOverlay: boolean;
+  showHiddenLines: boolean;
+}
+
+export interface BasketView {
+  id: string;
+  name: string;
+  entityRefs: string[];
+  thumbnailDataUrl: string | null;
+  /** Optional camera transition override for this view (ms). */
+  transitionMs: number | null;
+  viewpoint: CameraViewpoint | null;
+  section: BasketSectionSnapshot | null;
+  source: BasketSource;
+  createdAt: number;
+  updatedAt: number;
+}
+
+export interface SaveBasketViewOptions {
+  name?: string;
+  thumbnailDataUrl?: string | null;
+  transitionMs?: number | null;
+  source?: BasketSource;
+  viewpoint?: CameraViewpoint | null;
+  section?: BasketSectionSnapshot | null;
+}
+
 /** Cross-slice state that pinboard reads/writes via the combined store */
 interface PinboardCrossSliceState {
   isolatedEntities: Set<number> | null;
   hiddenEntities: Set<number>;
   models: Map<string, { idOffset: number }>;
+  cameraCallbacks: CameraCallbacks;
+  sectionPlane: SectionPlane;
+  drawing2D: Drawing2D | null;
+  drawing2DDisplayOptions: { show3DOverlay: boolean; showHiddenLines: boolean };
+  setDrawing2D: (drawing: Drawing2D | null) => void;
+  updateDrawing2DDisplayOptions: (options: { show3DOverlay?: boolean; showHiddenLines?: boolean }) => void;
+  setActiveTool: (tool: string) => void;
+  clearEntitySelection: () => void;
+  activeTool: string;
 }
 
 export interface PinboardSlice {
   // State
   /** Serialized EntityRef strings for O(1) membership check */
   pinboardEntities: Set<string>;
+  /** Saved basket presets with optional viewport thumbnails */
+  basketViews: BasketView[];
+  /** Active saved view currently restored into the live basket */
+  activeBasketViewId: string | null;
+  /** Floating presentation dock visibility */
+  basketPresentationVisible: boolean;
+  /** Last hierarchy-derived set used for "Hierarchy" basket source */
+  hierarchyBasketSelection: Set<string>;
 
   // Actions
   /** Add entities to pinboard/basket */
@@ -57,6 +109,28 @@ export interface PinboardSlice {
   removeFromBasket: (refs: EntityRef[]) => void;
   /** Clear basket and clear isolation */
   clearBasket: () => void;
+  /** Set hierarchy-derived basket source */
+  setHierarchyBasketSelection: (refs: EntityRef[]) => void;
+  /** Clear hierarchy-derived basket source */
+  clearHierarchyBasketSelection: () => void;
+  /** Show/hide presentation dock */
+  setBasketPresentationVisible: (visible: boolean) => void;
+  /** Toggle presentation dock */
+  toggleBasketPresentationVisible: () => void;
+  /** Save current basket as a reusable view preset */
+  saveCurrentBasketView: (options?: SaveBasketViewOptions) => string | null;
+  /** Restore basket entities and isolation only (no camera/section). Use activateBasketViewFromStore for full restore. */
+  restoreBasketEntities: (entityRefs: string[], viewId: string) => void;
+  /** Restore a saved basket view into the live basket (delegates to activateBasketViewFromStore) */
+  activateBasketView: (viewId: string) => void;
+  /** Remove a saved basket view */
+  removeBasketView: (viewId: string) => void;
+  /** Rename a saved basket view */
+  renameBasketView: (viewId: string, name: string) => void;
+  /** Refresh thumbnail and viewpoint capture for a saved basket view */
+  refreshBasketViewThumbnail: (viewId: string, thumbnailDataUrl: string | null, viewpoint?: CameraViewpoint | null) => void;
+  /** Set optional transition duration for a saved basket view (ms). */
+  setBasketViewTransitionMs: (viewId: string, transitionMs: number | null) => void;
 }
 
 /** Convert basket EntityRefs to global IDs using model offsets */
@@ -80,6 +154,47 @@ function refToGlobalId(ref: EntityRef, models: Map<string, { idOffset: number }>
   return ref.expressId + (model?.idOffset ?? 0);
 }
 
+function refsToEntityKeySet(refs: EntityRef[]): Set<string> {
+  const keys = new Set<string>();
+  for (const ref of refs) keys.add(entityRefToString(ref));
+  return keys;
+}
+
+function entityKeysToRefs(keys: Iterable<string>): EntityRef[] {
+  const refs: EntityRef[] = [];
+  for (const key of keys) refs.push(stringToEntityRef(key));
+  return refs;
+}
+
+function createViewId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return `basket-${Date.now()}-${Math.floor(Math.random() * 1_000_000)}`;
+}
+
+function createNextViewName(views: BasketView[]): string {
+  let idx = 1;
+  const names = new Set(views.map((v) => v.name));
+  while (names.has(`Basket ${idx}`)) idx++;
+  return `Basket ${idx}`;
+}
+
+function captureSectionSnapshot(state: PinboardCrossSliceState): BasketSectionSnapshot | null {
+  if (state.activeTool !== 'section' || !state.sectionPlane.enabled) {
+    return null;
+  }
+
+  return {
+    plane: { ...state.sectionPlane },
+    // Basket views restore 3D section state only. 2D drawings are derived, mutable,
+    // and global in store state; persisting them per-view causes cross-view leakage.
+    drawing2D: null,
+    show3DOverlay: state.drawing2DDisplayOptions.show3DOverlay,
+    showHiddenLines: state.drawing2DDisplayOptions.showHiddenLines,
+  };
+}
+
 export const createPinboardSlice: StateCreator<
   PinboardSlice & PinboardCrossSliceState,
   [],
@@ -88,9 +203,16 @@ export const createPinboardSlice: StateCreator<
 > = (set, get) => ({
   // Initial state
   pinboardEntities: new Set(),
+  basketViews: [],
+  activeBasketViewId: null,
+  basketPresentationVisible: false,
+  hierarchyBasketSelection: new Set(),
 
   // Legacy actions (kept for backward compat, but now they also sync isolation)
   addToPinboard: (refs) => {
+    if (refs.length > 0) {
+      get().clearEntitySelection();
+    }
     set((state) => {
       const next = new Set<string>(state.pinboardEntities);
       for (const ref of refs) {
@@ -104,7 +226,12 @@ export const createPinboardSlice: StateCreator<
         const offset = model?.idOffset ?? 0;
         hiddenEntities.delete(ref.expressId + offset);
       }
-      return { pinboardEntities: next, isolatedEntities, hiddenEntities };
+      return {
+        pinboardEntities: next,
+        isolatedEntities,
+        hiddenEntities,
+        activeBasketViewId: null,
+      };
     });
   },
 
@@ -115,20 +242,23 @@ export const createPinboardSlice: StateCreator<
         next.delete(entityRefToString(ref));
       }
       if (next.size === 0) {
-        return { pinboardEntities: next, isolatedEntities: null };
+        return { pinboardEntities: next, isolatedEntities: null, activeBasketViewId: null };
       }
       const isolatedEntities = basketToGlobalIds(next, state.models);
-      return { pinboardEntities: next, isolatedEntities };
+      return { pinboardEntities: next, isolatedEntities, activeBasketViewId: null };
     });
   },
 
   setPinboard: (refs) => {
+    if (refs.length > 0) {
+      get().clearEntitySelection();
+    }
     const next = new Set<string>();
     for (const ref of refs) {
       next.add(entityRefToString(ref));
     }
     if (next.size === 0) {
-      set({ pinboardEntities: next, isolatedEntities: null });
+      set({ pinboardEntities: next, isolatedEntities: null, activeBasketViewId: null });
       return;
     }
     const s = get();
@@ -140,10 +270,10 @@ export const createPinboardSlice: StateCreator<
       hiddenEntities.delete(ref.expressId + offset);
     }
     const isolatedEntities = basketToGlobalIds(next, s.models);
-    set({ pinboardEntities: next, isolatedEntities, hiddenEntities });
+    set({ pinboardEntities: next, isolatedEntities, hiddenEntities, activeBasketViewId: null });
   },
 
-  clearPinboard: () => set({ pinboardEntities: new Set(), isolatedEntities: null }),
+  clearPinboard: () => set({ pinboardEntities: new Set(), isolatedEntities: null, activeBasketViewId: null }),
 
   showPinboard: () => {
     const state = get();
@@ -172,9 +302,10 @@ export const createPinboardSlice: StateCreator<
   /** = Set basket to exactly these entities and isolate them */
   setBasket: (refs) => {
     if (refs.length === 0) {
-      set({ pinboardEntities: new Set(), isolatedEntities: null });
+      set({ pinboardEntities: new Set(), isolatedEntities: null, activeBasketViewId: null });
       return;
     }
+    get().clearEntitySelection();
     const next = new Set<string>();
     for (const ref of refs) {
       next.add(entityRefToString(ref));
@@ -188,12 +319,13 @@ export const createPinboardSlice: StateCreator<
       hiddenEntities.delete(ref.expressId + offset);
     }
     const isolatedEntities = basketToGlobalIds(next, s.models);
-    set({ pinboardEntities: next, isolatedEntities, hiddenEntities });
+    set({ pinboardEntities: next, isolatedEntities, hiddenEntities, activeBasketViewId: null });
   },
 
   /** + Add entities to basket and update isolation (incremental — avoids re-parsing all strings) */
   addToBasket: (refs) => {
     if (refs.length === 0) return;
+    get().clearEntitySelection();
     set((state) => {
       const next = new Set<string>(state.pinboardEntities);
       for (const ref of refs) {
@@ -208,7 +340,7 @@ export const createPinboardSlice: StateCreator<
         isolatedEntities.add(gid);
         hiddenEntities.delete(gid);
       }
-      return { pinboardEntities: next, isolatedEntities, hiddenEntities };
+      return { pinboardEntities: next, isolatedEntities, hiddenEntities, activeBasketViewId: null };
     });
   },
 
@@ -221,7 +353,7 @@ export const createPinboardSlice: StateCreator<
         next.delete(entityRefToString(ref));
       }
       if (next.size === 0) {
-        return { pinboardEntities: next, isolatedEntities: null };
+        return { pinboardEntities: next, isolatedEntities: null, activeBasketViewId: null };
       }
       // Incrementally remove globalIds from existing isolation set instead of re-parsing all
       const prevIsolated = state.isolatedEntities;
@@ -230,14 +362,112 @@ export const createPinboardSlice: StateCreator<
         for (const ref of refs) {
           isolatedEntities.delete(refToGlobalId(ref, state.models));
         }
-        return { pinboardEntities: next, isolatedEntities };
+        return { pinboardEntities: next, isolatedEntities, activeBasketViewId: null };
       }
       // Fallback: full recompute if no existing isolation set
       const isolatedEntities = basketToGlobalIds(next, state.models);
-      return { pinboardEntities: next, isolatedEntities };
+      return { pinboardEntities: next, isolatedEntities, activeBasketViewId: null };
     });
   },
 
   /** Clear basket and clear isolation */
-  clearBasket: () => set({ pinboardEntities: new Set(), isolatedEntities: null }),
+  clearBasket: () => set({ pinboardEntities: new Set(), isolatedEntities: null, activeBasketViewId: null }),
+
+  setHierarchyBasketSelection: (refs) => set({ hierarchyBasketSelection: refsToEntityKeySet(refs) }),
+  clearHierarchyBasketSelection: () => set({ hierarchyBasketSelection: new Set() }),
+
+  setBasketPresentationVisible: (basketPresentationVisible) => set({ basketPresentationVisible }),
+  toggleBasketPresentationVisible: () =>
+    set((state) => ({ basketPresentationVisible: !state.basketPresentationVisible })),
+
+  saveCurrentBasketView: (options) => {
+    const state = get();
+    if (state.pinboardEntities.size === 0) return null;
+
+    const id = createViewId();
+    const now = Date.now();
+    const view: BasketView = {
+      id,
+      name: options?.name?.trim() || createNextViewName(state.basketViews),
+      entityRefs: Array.from(state.pinboardEntities),
+      thumbnailDataUrl: options?.thumbnailDataUrl ?? null,
+      transitionMs: options?.transitionMs ?? null,
+      viewpoint: options?.viewpoint ?? state.cameraCallbacks.getViewpoint?.() ?? null,
+      section: options?.section ?? captureSectionSnapshot(state),
+      source: options?.source ?? 'manual',
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    set((current) => ({
+      basketViews: [...current.basketViews, view],
+      activeBasketViewId: id,
+    }));
+    return id;
+  },
+
+  restoreBasketEntities: (entityRefs, viewId) => {
+    get().clearEntitySelection?.();
+    set((current) => {
+      const nextPinboard = new Set<string>(entityRefs);
+      if (nextPinboard.size === 0) {
+        return { pinboardEntities: new Set(), isolatedEntities: null, activeBasketViewId: viewId };
+      }
+
+      const hiddenEntities = new Set<number>(current.hiddenEntities);
+      const refs = entityKeysToRefs(nextPinboard);
+      for (const ref of refs) {
+        hiddenEntities.delete(refToGlobalId(ref, current.models));
+      }
+
+      return {
+        pinboardEntities: nextPinboard,
+        isolatedEntities: basketToGlobalIds(nextPinboard, current.models),
+        hiddenEntities,
+        activeBasketViewId: viewId,
+      };
+    });
+  },
+
+  activateBasketView: (viewId) => {
+    void import('../basket/basketViewActivator.js').then(({ activateBasketViewFromStore }) => {
+      activateBasketViewFromStore(viewId);
+    });
+  },
+
+  removeBasketView: (viewId) => {
+    set((state) => ({
+      basketViews: state.basketViews.filter((view) => view.id !== viewId),
+      activeBasketViewId: state.activeBasketViewId === viewId ? null : state.activeBasketViewId,
+    }));
+  },
+
+  renameBasketView: (viewId, name) => {
+    const nextName = name.trim();
+    if (!nextName) return;
+    set((state) => ({
+      basketViews: state.basketViews.map((view) =>
+        view.id === viewId ? { ...view, name: nextName, updatedAt: Date.now() } : view,
+      ),
+    }));
+  },
+
+  refreshBasketViewThumbnail: (viewId, thumbnailDataUrl, viewpoint) => {
+    set((state) => {
+      const nextViewpoint = viewpoint === undefined ? state.cameraCallbacks.getViewpoint?.() ?? null : viewpoint;
+      return {
+        basketViews: state.basketViews.map((view) =>
+          view.id === viewId ? { ...view, thumbnailDataUrl, viewpoint: nextViewpoint, updatedAt: Date.now() } : view,
+        ),
+      };
+    });
+  },
+
+  setBasketViewTransitionMs: (viewId, transitionMs) => {
+    set((state) => ({
+      basketViews: state.basketViews.map((view) =>
+        view.id === viewId ? { ...view, transitionMs, updatedAt: Date.now() } : view,
+      ),
+    }));
+  },
 });

package/src/store/types.ts

@@ -151,6 +151,15 @@ export interface CameraRotation {
 
 export type ProjectionMode = 'perspective' | 'orthographic';
 
+export interface CameraViewpoint {
+  position: { x: number; y: number; z: number };
+  target: { x: number; y: number; z: number };
+  up: { x: number; y: number; z: number };
+  fov: number;
+  projectionMode: ProjectionMode;
+  orthoSize?: number;
+}
+
 export interface CameraCallbacks {
   setPresetView?: (view: 'top' | 'bottom' | 'front' | 'back' | 'left' | 'right') => void;
   fitAll?: () => void;
@@ -163,6 +172,8 @@ export interface CameraCallbacks {
   setProjectionMode?: (mode: ProjectionMode) => void;
   toggleProjectionMode?: () => void;
   getProjectionMode?: () => ProjectionMode;
+  getViewpoint?: () => CameraViewpoint | null;
+  applyViewpoint?: (viewpoint: CameraViewpoint, animate?: boolean, durationMs?: number) => void;
 }
 
 // ============================================================================