Markup Creating Viewer Example

Table of Contents

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

The Markup Creating Viewer demonstrates design-review annotations over model and drawing visualizations. It supports notes, model-attached pins, drawing targets, search, filtering, and review item editing.

Preview

Markup Creating Viewer

What It Demonstrates

Use this example to study review workflows:

• capture selected model or drawing references as design-review item targets;
• create note items with optional targets;
• place pin overlays at picked model points;
• restore a review item's highlighted targets;
• search and filter review items for the loaded model.

The shared MarkupCreatingViewer owns target capture, overlay attachment, and reference restoration. React components own item forms, cards, filtering, modals, and text editing.

User Flow

1. Load a model or drawing.
2. Select a model node, model shape, drawing item, or pin location.
3. Create a design-review item from the panel.
4. Add notes or pins.
5. Select an item later to restore its target highlight.

Key Files

User Interface Components

Source	Description
MarkupCreatingViewer react/src/pages/markup-creating-viewer/MarkupCreatingViewer.tsx	Main page component. It loads models, switches visualization and highlight modes, renders the viewport, overlays, and the design-review panel.
DesignReviewPanel react/src/pages/markup-creating-viewer/ui/DesignReviewPanel.tsx	Main design-review panel with search, filters, and add-item actions.
DesignReviewItemForm react/src/pages/markup-creating-viewer/ui/DesignReviewItemForm.tsx	Edits item fields and payload options before creating or updating review items.
DesignReviewItemCard and DesignReviewPanelItem react/src/pages/markup-creating-viewer/ui/	Render existing review items and item-specific edit/delete/select actions.
PinOverlay react/src/pages/markup-creating-viewer/ui/PinOverlay.tsx	Renders model-attached pin editors and projected pin markers over the canvas.

Core Logic Classes

Source	Description
MarkupCreatingViewer shared/src/viewers/markup-creating-viewer/MarkupCreatingViewer.ts	Extends SelectionHandlingViewer, owns item manager, pin overlay, target capture, and target restoration.
DesignReviewItemManager shared/src/features/design-review/DesignReviewItemManager.ts	Owns design-review item collections, filtering state, item lifecycle, and events.
DesignReviewItem, Note, and Pin shared/src/features/design-review/	Define the review item base class and concrete item kinds used by the example.
Target classes shared/src/viewers/markup-creating-viewer/design-review/	Convert model nodes, model shapes, and drawing nodes to review targets.
PinOverlay shared/src/features/design-review/design-review-items/	Owns pin overlay rendering and editor sessions outside the React panel.