BPMNViewer

Rendert BPMN-Diagramme und bietet eine Ref-API für Overlays, Marker und Heatmaps.

Beispiel


'use client';
 
import { BPMNViewerNextJS, BPMNViewerFunctions } from '@5minds/processcube_app_sdk/client';
import { useRef } from 'react';
 
export default function DiagramPage({ xml }: { xml: string }) {
  const viewerRef = useRef<BPMNViewerFunctions>(null);
 
  return (
    <BPMNViewerNextJS
      xml={xml}
      viewerRef={viewerRef}
      onSelectionChanged={(elements) => console.log('Ausgewaehlt:', elements)}
      onImportDone={() => console.log('Diagramm geladen')}
    />
  );
}

Props

Prop	Typ	Pflicht	Beschreibung
`xml`	`string`	Ja	BPMN-XML des Diagramms
`className`	`string`	Nein	CSS-Klasse für den Container
`preselectedElementIds`	`string[]`	Nein	Vorausgewählte BPMN-Elemente
`onSelectionChanged`	`(elements) => void`	Nein	Callback bei Auswahländerung
`onImportDone`	`() => void`	Nein	Callback nach erfolgreichem Import
`viewerRef`	`ForwardedRef<BPMNViewerFunctions>`	Nein	Nur bei `BPMNViewerNextJS`

Ref-API (BPMNViewerFunctions)

Über die viewerRef können Overlays, Marker und Heatmaps gesteuert werden:

Methode	Beschreibung
`getOverlays()`	Gibt das Overlay-Modul zurück
`getElementRegistry()`	Gibt die Element-Registry zurück
`addMarker(elementId, className)`	Fügt einen CSS-Marker zu einem Element hinzu
`removeMarker(elementId, className)`	Entfernt einen CSS-Marker
`hasMarker(elementId, className)`	Prüft ob ein Marker gesetzt ist
`showHeatmap(data)`	Zeigt Heatmap-Daten an (`{ elementId: color }`)
`clearHeatmap(data)`	Entfernt Heatmap-Daten

CSS

CSS wird beim Import der Komponente automatisch geladen.