Rasterex APINPM Package/docs/workflows/issue-management/overview

Issue Management Workflow

Build a drawing-based issue workflow with the Rasterex NPM package: place a marker, capture the created annotation ID, and manage the linked task from the host UI.

Track issue tasks at locations on a drawing

View Workflow Example

Read the example workflow and inspect its reference application source.

Repository Setup

Review the shared-source requirement and local Canvas configuration.

Place a drawing marker, attach task details, and resolve or reopen the linked host task.

The linked React, TypeScript, and Vite reference application uses an iframe and PostMessage. Use it to study the operator workflow and host UI; follow the NPM implementation pages below for the SDK methods and events used by this workflow.

The repository currently requires shared demo source outside the clone. Connect that source and configure a reachable Rasterex Canvas before running the example, as explained in the repository setup instructions.

Workflow Goal

Issue Management connects a visual drawing marker to task metadata such as title, assignee, priority, due date, notes, and open/resolved status.

Use the NPM @rasterex/viewer for this workflow. Activate the marker tool with viewer.tools.set(...), capture marker IDs with viewer.annotations.on("created", ...), select linked markers with viewer.annotations.select(...), delete canceled markers with viewer.annotations.delete(...), and clear active tools with viewer.tools.clear().

Workflow Order

Follow this order so every saved task is tied to a real Canvas annotation.

  • 1Mount the Viewer and open the drawing with viewer.documents.open(...).
  • 2Start issue marker mode with viewer.tools.set({ action: "SHAPE_ELLIPSE", enabled: true, style }).
  • 3Wait for viewer.annotations.on("created", ...) before opening the task editor.
  • 4Store the returned guid or uniqueId as the task annotation ID.
  • 5Save title, assignee, priority, due date, notes, and default open status.
  • 6Selecting a task calls viewer.annotations.select(...) for the linked annotation.
  • 7Canceling a new unsaved marker calls viewer.annotations.delete(...) and viewer.tools.clear().
  • 8Resolve/Reopen updates task state without deleting the Canvas marker.

Workflow Pages

React Issue Setup

Complete NPM React implementation with Viewer lifecycle, issue marker, task panel, and editor dialog.

Verification

Checklist for marker capture, task state, annotation selection, cancellation, and recovery.

Use these pages to implement and verify the Issue Management workflow.