Section Plane Creating Viewer Example

Table of Contents

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

The Section Plane Creating Viewer demonstrates interactive section planes over loaded model geometry. Users can create planes for the whole model or selected nodes, adjust placement and direction, show caps, and remove planes when they are no longer needed.

Preview

What It Demonstrates

Use this example when your application needs model clipping:

• create section planes from selected model nodes or root model nodes;
• switch section plane orientation, placement, and direction;
• update plane offset through UI controls or transform manipulators;
• toggle plane, capping, and manipulator visibility;
• refresh section plane data after the model or active visualization changes.

The shared SectionPlaneCreatingViewer owns a SectionPlaneManager, enables drag interaction, and clears section data when leaving model visualization.

User Flow

1. Load a model.
2. Select model nodes, or leave selection empty to target the whole model.
3. Create a section plane.
4. Adjust direction, offset, visibility, cap, and manipulator options.
5. Remove individual planes or clear all section planes.

Key Files

User Interface Components

Source	Description
SectionPlaneCreatingViewer react/src/pages/section-plane-creating-viewer/SectionPlaneCreatingViewer.tsx	Main page component. It loads models, exposes section-plane creation controls, renders section-plane cards, and displays the viewport.
SectionPlaneCard react/src/features/section-plane-card/SectionPlaneCard.tsx	Renders controls for one section plane, including orientation, offset, direction, visibility, capping, manipulator, and removal actions.
ModelStructureContainer react/src/features/model-structure-container/ModelStructureContainer.tsx	Supplies selected model nodes used as section-plane targets.
Canvas react/src/features/canvas/Canvas.tsx	Hosts the viewport that supports pointer tracking and drag interaction for plane manipulators.
useSelectionVisualizationContext react/src/features/visualization-context/useSelectionVisualizationContext.ts	Keeps visualization and selection state in sync with React controls.

Core Logic Classes

Source	Description
SectionPlaneCreatingViewer shared/src/viewers/section-plane-creating-viewer/SectionPlaneCreatingViewer.ts	Extends SelectionHandlingViewer, owns SectionPlaneManager, enables pointer and drag events, and supplies selected/root model nodes.
SectionPlaneManager shared/src/features/section-plane/SectionPlaneManager.ts	Owns section plane lifecycle, clipping state, transform manipulators, capping, and manager events.
SectionPlane shared/src/features/section-plane/SectionPlane.ts	Represents a single section plane, including orientation, offset, visibility, target objects, and transform state.
SectionPlaneCappingRaycastHelper shared/src/features/section-plane/SectionPlaneCappingRaycastHelper.ts	Helps raycasting work correctly against capped section geometry.