@bpmn-nova/react 0.3.1-preview

package/dist/index.js

@@ -0,0 +1,352 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { BpmnDesigner as CoreDesigner } from '@bpmn-nova/studio/designer';
+import { BpmnViewer as CoreViewer } from '@bpmn-nova/studio/viewer';
+import { importBpmn, exportBpmn } from '@bpmn-nova/studio';
+import { createEmptyProcess } from '@bpmn-nova/studio';
+import { BpmnCanvas as CoreCanvas, BpmnStudioShell as CoreStudioShell, createInteractionController, createStudioController, createTemplateRegistry } from '@bpmn-nova/studio';
+import { createDefaultPaletteRegistry, PalettePanel as CorePalettePanel } from '@bpmn-nova/studio';
+
+export function createReactRuntimeDetailsComponent(Component) {
+  return ({ container, ...context }) => {
+    const root = createRoot(container);
+    root.render(React.createElement(Component, context));
+    return () => root.unmount();
+  };
+}
+
+export function createReactRuntimeTransitionDetailsComponent(Component) {
+  return createReactRuntimeDetailsComponent(Component);
+}
+
+export function createReactRuntimeTimelineComponent(Component) {
+  return createReactRuntimeDetailsComponent(Component);
+}
+
+function resolveModel({ model, xml, engine = 'flowable' }) {
+  if (model) return model;
+  if (xml) return importBpmn(xml, engine);
+  return createEmptyProcess(engine);
+}
+
+export function useBpmnStudio(options = {}) {
+  const ownedRef = useRef(null);
+  if (!options.studio && !ownedRef.current) ownedRef.current = createStudioController({ model: resolveModel(options), propertiesProfile: options.propertiesProfile });
+  const studio = options.studio || ownedRef.current;
+  const [state, setState] = useState(() => studio.getState());
+  useEffect(() => studio.subscribe((event) => setState(event.state)), [studio]);
+  useEffect(() => () => { if (!options.studio) ownedRef.current?.destroy(); }, [studio]);
+  return { studio, state, commands: studio.commands };
+}
+
+export const BpmnCanvas = forwardRef(function BpmnCanvas(props, ref) {
+  const hostRef = useRef(null);
+  const instanceRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    get instance() { return instanceRef.current; },
+    fitView(padding, options) { instanceRef.current?.fitView(padding, options); },
+    clientToWorld(x, y) { return instanceRef.current?.clientToWorld(x, y); },
+    setTheme(theme) { return instanceRef.current?.setTheme(theme); },
+    exportSvg(options) { return instanceRef.current?.exportSvg(options); },
+    openSvgExportPreview(options) { return instanceRef.current?.openSvgExportPreview(options); },
+  }), []);
+  useEffect(() => {
+    if (!hostRef.current || !props.studio) return undefined;
+    const interactions = props.interactions || createInteractionController({ studio: props.studio, templates: props.templates || createTemplateRegistry() });
+    const instance = new CoreCanvas({ container: hostRef.current, studio: props.studio, interactions, theme: props.theme, onThemeChange: props.onThemeChange, rendererOptions: { iconRegistry: props.iconRegistry, nodeRenderers: props.nodeRenderers, nodeRenderer: props.nodeRenderer, svgExport: props.svgExport } });
+    instanceRef.current = instance;
+    requestAnimationFrame(() => instance.fitView());
+    return () => { instance.destroy(); instanceRef.current = null; };
+  }, [props.studio]);
+  useEffect(() => { if (props.theme !== undefined) instanceRef.current?.setTheme(props.theme); }, [props.theme]);
+  return React.createElement('div', { ref: hostRef, className: props.className, style: { width: '100%', height: '100%', minHeight: 320, ...props.style } });
+});
+
+export const BpmnPalettePanel = forwardRef(function BpmnPalettePanel(props, ref) {
+  const hostRef = useRef(null);
+  const panelRef = useRef(null);
+  useImperativeHandle(ref, () => ({ get panel() { return panelRef.current; }, render() { panelRef.current?.render(); }, setTheme(theme) { return panelRef.current?.setTheme(theme); } }), []);
+  useEffect(() => {
+    if (!hostRef.current || !props.studio) return undefined;
+    const interactions = props.interactions || createInteractionController({ studio: props.studio, templates: props.templates || createTemplateRegistry() });
+    const registry = props.registry || createDefaultPaletteRegistry({ providers: props.providers || [] });
+    const panel = new CorePalettePanel({ container: hostRef.current, registry, studio: props.studio, interactions, canvas: props.canvas, iconRegistry: props.iconRegistry, renderItem: props.renderItem, renderSection: props.renderSection, theme: props.theme, onThemeChange: props.onThemeChange });
+    panelRef.current = panel;
+    return () => { panel.destroy(); panelRef.current = null; };
+  }, [props.studio, props.registry, props.interactions, props.canvas]);
+  useEffect(() => { if (props.theme !== undefined) panelRef.current?.setTheme(props.theme); }, [props.theme]);
+  return React.createElement('div', { ref: hostRef, className: props.className, style: { width: '100%', height: '100%', overflow: 'auto', ...props.style } });
+});
+
+export const BpmnStudio = forwardRef(function BpmnStudio(props, ref) {
+  const hostRef = useRef(null);
+  const ownedStudioRef = useRef(null);
+  const shellRef = useRef(null);
+  const callbacksRef = useRef({});
+  callbacksRef.current = props;
+  if (!props.studio && !ownedStudioRef.current) ownedStudioRef.current = createStudioController({ model: resolveModel(props), propertiesProfile: props.propertiesProfile });
+  const studio = props.studio || ownedStudioRef.current;
+  useImperativeHandle(ref, () => ({
+    studio,
+    get shell() { return shellRef.current; },
+    exportXml: (engine) => studio.exportXml(engine),
+    exportSvg: (options) => shellRef.current?.exportSvg(options),
+    openSvgExportPreview: (options) => shellRef.current?.openSvgExportPreview(options),
+    fitView: () => shellRef.current?.canvas?.fitView(),
+    setTheme: (theme) => shellRef.current?.setTheme(theme),
+  }), [studio]);
+  useEffect(() => {
+    if (!hostRef.current) return undefined;
+    const shell = new CoreStudioShell({
+      container: hostRef.current,
+      studio,
+      iconRegistry: props.iconRegistry,
+      paletteRegistry: props.paletteRegistry,
+      propertiesRegistry: props.propertiesRegistry,
+      templateRegistry: props.templateRegistry,
+      rendererOptions: {
+        nodeRenderers: props.nodeRenderers,
+        nodeRenderer: props.nodeRenderer,
+        runtimePresenter: props.runtimePresenter,
+        runtimeTraceProjector: props.runtimeTraceProjector,
+        runtimeAssetResolver: props.runtimeAssetResolver,
+        runtimeTraceOptions: props.runtimeTraceOptions,
+        runtimeTimelineRenderer: props.runtimeTimelineRenderer,
+        timeline: props.timeline,
+        runtimeDetails: props.runtimeDetails,
+        onRuntimeTraceItemClick: (payload) => callbacksRef.current.onRuntimeTraceItemClick?.(payload),
+        runtimeDetailsRenderer: props.runtimeDetailsRenderer,
+        onRuntimeDetailsOpen: (payload) => callbacksRef.current.onRuntimeDetailsOpen?.(payload),
+        runtimeTransitionDetailsRenderer: props.runtimeTransitionDetailsRenderer,
+        onRuntimeTransitionDetailsOpen: (payload) => callbacksRef.current.onRuntimeTransitionDetailsOpen?.(payload),
+        onElementClick: (payload) => callbacksRef.current.onElementClick?.(payload),
+        onTraceClick: (payload) => callbacksRef.current.onTraceClick?.(payload),
+      },
+      slots: props.slots || {},
+      layout: props.layout,
+      runtime: props.runtime,
+      mode: props.mode,
+      projection: props.projection,
+      responsive: props.responsive,
+      projectionOptions: props.projectionOptions,
+      leftWidth: props.leftWidth,
+      rightWidth: props.rightWidth,
+      theme: props.theme,
+      runtimeAppearance: props.runtimeAppearance,
+      svgExport: props.svgExport,
+      onThemeChange: (state) => callbacksRef.current.onThemeChange?.(state),
+    });
+    shellRef.current = shell;
+    const off = studio.subscribe((event) => {
+      if (event.type === 'modelChanged') callbacksRef.current.onChange?.(studio.model, event.reason, studio.exportXml());
+      if (event.type === 'selectionChanged') callbacksRef.current.onSelectionChange?.(studio.selection, studio.getSelectedElement());
+      if (event.type === 'scopeChanged') callbacksRef.current.onScopeChange?.(event.activeScopeId, event.scopePath, studio.getState());
+    });
+    return () => { off(); shell.destroy(); shellRef.current = null; if (!props.studio) { ownedStudioRef.current?.destroy(); ownedStudioRef.current = null; } };
+  }, [studio]);
+  useEffect(() => { if (props.model && props.model !== studio.model) studio.setModel(props.model); else if (props.xml) studio.importXml(props.xml, props.engine); }, [props.model, props.xml]);
+  useEffect(() => { if (props.runtime !== undefined) shellRef.current?.setRuntime(props.runtime); }, [props.runtime]);
+  useEffect(() => { if (props.mode) shellRef.current?.setMode(props.mode); }, [props.mode]);
+  useEffect(() => { if (props.projection) shellRef.current?.setProjection(props.projection); }, [props.projection]);
+  useEffect(() => { if (props.theme !== undefined) shellRef.current?.setTheme(props.theme); }, [props.theme]);
+  useEffect(() => { if (props.runtimeAppearance !== undefined) shellRef.current?.setRuntimeAppearance(props.runtimeAppearance); }, [props.runtimeAppearance]);
+  useEffect(() => {
+    const shell = shellRef.current;
+    if (!shell) return;
+    shell.rendererOptions.timeline = props.timeline;
+    shell.rendererOptions.runtimeDetails = props.runtimeDetails;
+    shell.rendererOptions.runtimeTraceOptions = props.runtimeTraceOptions;
+    shell.viewer?.setDisplayOptions({ timeline: props.timeline, runtimeDetails: props.runtimeDetails, runtimeTraceOptions: props.runtimeTraceOptions });
+  }, [props.timeline, props.runtimeDetails, props.runtimeTraceOptions]);
+  return React.createElement('div', { ref: hostRef, className: props.className, style: { width: '100%', height: '100%', minHeight: 520, ...props.style } });
+});
+
+export const BpmnDesigner = forwardRef(function BpmnDesigner(props, ref) {
+  const hostRef = useRef(null);
+  const instanceRef = useRef(null);
+
+  useImperativeHandle(ref, () => ({
+    get instance() { return instanceRef.current; },
+    get model() { return instanceRef.current?.model; },
+    exportXml(engine) { return instanceRef.current?.exportXml(engine) || ''; },
+    fitView() { instanceRef.current?.renderer.fitView(); },
+    beautify(options) { instanceRef.current?.beautify(options); },
+    rerouteEdges(options) { instanceRef.current?.rerouteEdges(options); },
+    validate() { return instanceRef.current?.validate() || []; },
+    setTheme(theme) { return instanceRef.current?.setTheme(theme); },
+    exportSvg(options) { return instanceRef.current?.exportSvg(options); },
+    openSvgExportPreview(options) { return instanceRef.current?.openSvgExportPreview(options); },
+  }), []);
+
+  useEffect(() => {
+    if (!hostRef.current) return undefined;
+    const instance = new CoreDesigner({
+      container: hostRef.current,
+      model: resolveModel(props),
+      onChange: (model, reason) => props.onChange?.(model, reason, exportBpmn(model, model.engine)),
+      onSelectionChange: props.onSelectionChange,
+      theme: props.theme,
+      svgExport: props.svgExport,
+      onThemeChange: props.onThemeChange,
+    });
+    instanceRef.current = instance;
+    requestAnimationFrame(() => instance.renderer.fitView());
+    return () => {
+      instance.destroy();
+      instanceRef.current = null;
+    };
+  }, []);
+  useEffect(() => { if (props.theme !== undefined) instanceRef.current?.setTheme(props.theme); }, [props.theme]);
+
+  useEffect(() => {
+    const instance = instanceRef.current;
+    if (!instance) return;
+    if (props.model && props.model !== instance.model) instance.setModel(props.model);
+    else if (props.xml) instance.setModel(importBpmn(props.xml, props.engine));
+  }, [props.model, props.xml]);
+
+  useEffect(() => {
+    if (props.engine && instanceRef.current && props.engine !== instanceRef.current.model.engine) {
+      instanceRef.current.setEngine(props.engine);
+    }
+  }, [props.engine]);
+
+  return React.createElement('div', {
+    ref: hostRef,
+    className: props.className,
+    style: { width: '100%', height: '100%', minHeight: 320, ...props.style },
+  });
+});
+
+export const BpmnViewer = forwardRef(function BpmnViewer(props, ref) {
+  const hostRef = useRef(null);
+  const instanceRef = useRef(null);
+  const callbacksRef = useRef({});
+  callbacksRef.current = {
+    onTraceClick: props.onTraceClick,
+    onElementClick: props.onElementClick,
+    onRuntimeTraceItemClick: props.onRuntimeTraceItemClick,
+    onProjectionChange: props.onProjectionChange,
+    onRuntimeDetailsOpen: props.onRuntimeDetailsOpen,
+    onRuntimeTransitionDetailsOpen: props.onRuntimeTransitionDetailsOpen,
+    onThemeChange: props.onThemeChange,
+  };
+
+  useImperativeHandle(ref, () => ({
+    get instance() { return instanceRef.current; },
+    fitView() { instanceRef.current?.fitView(); },
+    setProjection(value) { instanceRef.current?.setProjection(value); },
+    setRuntime(value) { instanceRef.current?.setRuntime(value); },
+    setDisplayOptions(value) { instanceRef.current?.setDisplayOptions(value); },
+    setTheme(value) { return instanceRef.current?.setTheme(value); },
+    exportSvg(options) { return instanceRef.current?.exportSvg(options); },
+    openSvgExportPreview(options) { return instanceRef.current?.openSvgExportPreview(options); },
+  }), []);
+
+  useEffect(() => {
+    if (!hostRef.current) return undefined;
+    const instance = new CoreViewer({
+      container: hostRef.current,
+      model: resolveModel(props),
+      runtime: props.runtime,
+      projection: props.projection,
+      responsive: props.responsive,
+      runtimeTraceOptions: props.runtimeTraceOptions,
+      timeline: props.timeline,
+      runtimeDetails: props.runtimeDetails,
+      iconRegistry: props.iconRegistry,
+      nodeRenderers: props.nodeRenderers,
+      nodeRenderer: props.nodeRenderer,
+      runtimePresenter: props.runtimePresenter,
+      runtimeTraceProjector: props.runtimeTraceProjector,
+      runtimeAssetResolver: props.runtimeAssetResolver,
+      runtimeTimelineRenderer: props.runtimeTimelineRenderer,
+      onRuntimeTraceItemClick: (payload) => callbacksRef.current.onRuntimeTraceItemClick?.(payload),
+      onProjectionChange: (payload) => callbacksRef.current.onProjectionChange?.(payload),
+      runtimeDetailsRenderer: props.runtimeDetailsRenderer,
+      onRuntimeDetailsOpen: (payload) => callbacksRef.current.onRuntimeDetailsOpen?.(payload),
+      runtimeTransitionDetailsRenderer: props.runtimeTransitionDetailsRenderer,
+      onRuntimeTransitionDetailsOpen: (payload) => callbacksRef.current.onRuntimeTransitionDetailsOpen?.(payload),
+      onElementClick: (payload) => callbacksRef.current.onElementClick?.(payload),
+      onTraceClick: (payload) => callbacksRef.current.onTraceClick?.(payload),
+      theme: props.theme,
+      runtimeAppearance: props.runtimeAppearance,
+      svgExport: props.svgExport,
+      onThemeChange: (state) => callbacksRef.current.onThemeChange?.(state),
+    });
+    instanceRef.current = instance;
+    requestAnimationFrame(() => instance.fitView());
+    return () => {
+      instance.destroy();
+      instanceRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => { if (instanceRef.current && props.runtime !== undefined) instanceRef.current.setRuntime(props.runtime); }, [props.runtime]);
+  useEffect(() => { if (instanceRef.current && props.projection) instanceRef.current.setProjection(props.projection); }, [props.projection]);
+  useEffect(() => { if (props.theme !== undefined) instanceRef.current?.setTheme(props.theme); }, [props.theme]);
+  useEffect(() => { if (props.runtimeAppearance !== undefined) instanceRef.current?.setRuntimeAppearance(props.runtimeAppearance); }, [props.runtimeAppearance]);
+  useEffect(() => { instanceRef.current?.setDisplayOptions({ timeline: props.timeline, runtimeDetails: props.runtimeDetails, runtimeTraceOptions: props.runtimeTraceOptions, runtimeAssetResolver: props.runtimeAssetResolver }); }, [props.timeline, props.runtimeDetails, props.runtimeTraceOptions, props.runtimeAssetResolver]);
+  useEffect(() => {
+    if (!instanceRef.current) return;
+    if (props.model) instanceRef.current.setModel(props.model);
+    else if (props.xml) instanceRef.current.setModel(importBpmn(props.xml, props.engine));
+  }, [props.model, props.xml]);
+
+  return React.createElement('div', {
+    ref: hostRef,
+    className: props.className,
+    style: { width: '100%', height: '100%', minHeight: 260, ...props.style },
+  });
+});
+
+// Properties Panel -----------------------------------------------------------
+import { createRoot } from 'react-dom/client';
+import { createDefaultPropertiesRegistry, PropertiesPanel as CorePropertiesPanel } from '@bpmn-nova/studio';
+
+export function createReactPropertyComponent(Component) {
+  return ({ container, entry, context, value, commit }) => {
+    const root = createRoot(container);
+    root.render(React.createElement(Component, { entry, context, value, onChange: commit }));
+    return () => root.unmount();
+  };
+}
+
+export const BpmnPropertiesPanel = forwardRef(function BpmnPropertiesPanel(props, ref) {
+  const hostRef = useRef(null);
+  const panelRef = useRef(null);
+  const registryRef = useRef(null);
+
+  useImperativeHandle(ref, () => ({
+    get panel() { return panelRef.current; },
+    get registry() { return registryRef.current; },
+    render() { panelRef.current?.render(); },
+    setTheme(theme) { return panelRef.current?.setTheme(theme); },
+  }), []);
+
+  useEffect(() => {
+    const designer = props.studio || props.designer;
+    if (!hostRef.current || !designer) return undefined;
+    const registry = props.registry || createDefaultPropertiesRegistry({
+      studio: designer,
+      dataProviders: props.dataProviders || {},
+    });
+    for (const provider of props.providers || []) registry.registerProvider(provider.priority ?? 500, provider);
+    for (const [name, Component] of Object.entries(props.components || {})) registry.registerComponent(name, createReactPropertyComponent(Component));
+    const panel = new CorePropertiesPanel({ container: hostRef.current, registry, studio: designer, theme: props.theme, onThemeChange: props.onThemeChange });
+    registryRef.current = registry;
+    panelRef.current = panel;
+    panel.render();
+    return () => {
+      panel.destroy();
+      panelRef.current = null;
+      registryRef.current = null;
+    };
+  }, [props.studio, props.designer, props.registry]);
+  useEffect(() => { if (props.theme !== undefined) panelRef.current?.setTheme(props.theme); }, [props.theme]);
+
+  return React.createElement('div', {
+    ref: hostRef,
+    className: props.className,
+    style: { width: '100%', height: '100%', overflow: 'auto', ...props.style },
+  });
+});