Facility Management Workflow
Build a floor-plan facility workflow with the Rasterex NPM package: trace spaces, capture created annotation IDs, and manage room metadata from the host UI.
View Workflow Example
Read the example workflow and inspect its reference application source.
Repository Setup
Review the shared-source requirement and local Canvas configuration.
Trace a room boundary, attach facility metadata, and select linked spaces from the list or drawing.
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.
Facility Management links floor-plan regions to operational metadata: room tag, department, area, floor, capacity, cleaning cadence, inspections, assets, open issues, and notes.
Use NPM APIs for the implementation: viewer.tools.set(...) activates polygon hatch drawing, viewer.annotations.on("created", ...) captures the boundary annotation, viewer.annotations.select(...) focuses saved spaces, and viewer.tools.clear() exits drawing mode.
Follow this sequence so every saved room is tied to a Canvas annotation.
- 1Mount the Viewer and open the facility floor plan with
viewer.documents.open(...). - 2Start space mapping with
viewer.tools.set({ action: "SHAPE_POLYGON", enabled: true, style }). - 3Wait for
viewer.annotations.on("created", ...)before opening the metadata dialog. - 4Store the created annotation
guidoruniqueIdas the space annotation ID. - 5Save room metadata against that annotation ID.
- 6Selecting a room calls
viewer.annotations.select(...)to focus the hatch boundary. - 7Updating a room changes host metadata only; the Canvas hatch remains linked by annotation ID.