Selection Handling Viewer Example

Table of Contents

• Preview
• What It Demonstrates
• User Flow
• Key Files
  • User Interface Components
  • Core Logic Classes

The Selection Handling Viewer demonstrates scene picking and highlight state for model nodes, model shapes, and drawing elements. It is the first example to focus on interaction rather than only loading and visibility.

Preview

What It Demonstrates

Use this example to study interactive selection:

• enable hover and press raycasting in the viewport;
• switch between model node, face, and edge highlight modes;
• highlight drawing references when the active visualization is a drawing;
• preserve highlight colors across visualization state changes;
• report selection feedback to the UI.

The shared SelectionHandlingViewer extends the base viewer by adding a highlight manager to each visualization state. The React page owns the mode switcher and the notification text shown after selection changes.

User Flow

1. Load a model.
2. Choose the selection mode.
3. Hover or click model geometry in the viewport.
4. Use keyboard modifiers for multi-selection where the mode supports it.
5. Read the UI feedback describing the highlighted entities.

Key Files

User Interface Components

Source	Description
SelectionHandlingViewer react/src/pages/selection-handling-viewer/SelectionHandlingViewer.tsx	Main page component. It renders upload controls, visualization switching, highlight-mode controls, notification output, and the viewport.
VisualizationStatusSwitcher react/src/features/visualization-status-switcher/VisualizationStatusSwitcher.tsx	Lets the user switch between available model and drawing visualization states.
useSelectionVisualizationContext react/src/features/visualization-context/useSelectionVisualizationContext.ts	Mirrors viewer state and highlight-manager changes into React state.
useNotification react/src/common/hooks/useNotification.ts	Stores user-facing selection feedback after highlight events.
Canvas react/src/features/canvas/Canvas.tsx	Provides the mounted canvas for raycasting and rendering.

Core Logic Classes

Source	Description
SelectionHandlingViewer shared/src/viewers/selection-handling-viewer/SelectionHandlingViewer.ts	Extends BaseModelViewer, creates model or drawing highlight managers for each visualization state, and disposes them on state changes.
ModelHighlightManager shared/src/features/model/interaction/ModelHighlightManager.ts	Maps model-node, face, and edge references to visual highlight state.
DrawingHighlightManager shared/src/features/drawing/interaction/DrawingHighlightManager.ts	Maps drawing intersections and references to visual highlight state.
SceneRaycaster shared/src/features/viewport/interaction/SceneRaycaster.ts	Converts pointer events into Three.js intersections and highlight-manager input.
ObjectStyleHighlighter and ObjectPassHighlighter shared/src/features/viewport/interaction/highlighter/	Apply the visual highlight styles used by selection modes.
shared/src/features/model/interaction/	Maps viewport intersections to model nodes and shapes.