Diagram - SSR and lifecycle
Server-safe imports, owner lifetimes, replacement and cancellation.
#Usage
<script setup lang="ts">
import { Diagram, type DiagramModel } from '@primeui/vue-diagram';
const model: DiagramModel = { schemaVersion: 1, id: 'empty', pages: [{ id: 'page', name: 'Page' }], layers: [{ id: 'layer', pageId: 'page', name: 'Layer' }], nodes: [], connectors: [] };
</script>
<template>
<Diagram.Root :value="model" page-id="page">
<Diagram.Viewport label="Workflow" style="height: 24rem" />
</Diagram.Root>
</template>Public runtime entries can be imported without browser globals. The root renders its graph content after client mount; server-safe import does not mean that viewport measurement or browser output can run on the server. Give the viewport a measurable client height.
Create stable model identities before rendering. Avoid reading browser dimensions or generating random IDs during server rendering when the client must agree. In Nuxt, register a license in a plugin such as plugins/primeui-license.ts. Use ClientOnly when the initial graph depends on client-only data or setup.
Native file selection, raster decoding, downloads, and browser print require browser facilities and an explicit action. Detached model validation and output planning have separate contracts from those browser transports.
#Owner matrix
| Resource | Owner and release |
|---|---|
Store created from root value | Root; releases its consumers/session before disposal on reload or unmount. |
Store from useDiagramStore | Active setup/effect scope; disposal follows consumer teardown. |
Supplied root store | Application; dispose only after all dependent views/controllers detach. |
| Root session | Root; replaced on source/page changes and disposed on unmount. |
| Manually created session | Caller; dispose() before disposing its store. |
| Application subscriptions | Caller; retain and invoke unsubscribe functions. |
| Mounted measurements and definitions | Runtime part; released on unmount or reconciliation. |
| Application controllers and providers | Their creator; cancel stale work and dispose on teardown. |
| Layout worker | Dedicated executor job; release worker, listeners, and timers on completion or cancellation. |
| Directly created object URLs | Application; URL.revokeObjectURL() when no longer needed. |
| Prepared print document | Caller or wrapper; close() releases resources. |
| Command and symbol registrations | Registration owner; retain and call removers. |
A root never disposes a supplied store. useDiagramStore(initialModel) samples once and requires an active scope. Keep a shared owner alive until every root and controller using its store detaches.
#Replace a model or page
For root value, a new reference creates a fresh managed lifetime with empty history and a clean save baseline. Keep the reference stable during editing. Persist from commits or store snapshots; do not echo committed models into value.
The root validates a new source and page before retiring valid state. Invalid initial input throws. Invalid later input emits sourceError and retains the current store, session, history, and gesture. A later valid tuple can recover. Without a handler, development logs the rejected update.
A valid reload cancels outgoing interaction and replaces the session. A page-only change retains the store/history. Switching borrowed stores leaves both caller-owned stores alive. Returning to value creates a fresh managed store. A root rejects its own current or retired managed store as a borrowed source.
Application-created controllers tied to an old session need rebinding or replacement. Adopt the successor source and valid page, let dependent views detach, then dispose predecessor controllers, manually created sessions, and the predecessor store.
Exactly one source is active. Switching from owned to borrowed disposes the owned store after detachment. Switching between borrowed stores leaves both alive. Returning to owned mode creates a fresh store. A page-only change replaces the session while retaining the store and its history.
For manually owned stores and controllers:
- Validate/create the successor before changing the root input.
- Adopt the new store and a page ID that exists in it.
- Rebind page/session-dependent controllers to the new root session.
- Cancel/unsubscribe/dispose predecessor controllers and manually owned sessions.
- Dispose the predecessor store after dependent views have adopted the successor.
A whole-model import or Undo may replace the page set. Keep pageId valid
after that change; a session is page-bound and should not silently refer to a
removed page. Import controllers created for an old session cannot be reused
as if ownership were unchanged.
#Async cancellation and recovery
Browser print involves resource readiness and a separate
user print action; close() releases prepared resources. Worker factories must
return a fresh dedicated worker per layout job and keep the deployed worker URL
and CSP under application control.
Fonts/assets can change measurements without changing saved bounds. Refresh approved metrics through Geometry measurement. Node virtualization may remount content; persisted field state belongs in the store, while unsaved local drafts require an application owner.
Data, persistence, import, and layout operations have request/revision ownership. New requests or cancellation make stale completions ineligible for adoption. Providers must observe their abort signal and release application resources. Local cancellation does not prove that a remote save stopped.
A save acknowledgement refers to its captured checkpoint. Later edits remain dirty. A worker factory supplies a fresh dedicated worker per job; the application owns its deployed URL and CSP configuration.
Virtualization can remount node content. Save durable values in the model and give unsaved drafts an application owner. Fonts and assets can change measurements without changing saved bounds; use Geometry measurement to invalidate metrics.
Check store retention, measurement observers and cancelled routing callbacks with your own templates and providers. Repeat mount/unmount and model replacement while observing memory and listeners. See Performance for workload and resource guidance.