@pbinitiative/zenbpm-js-properties-panel 0.2.0 → 0.3.1

package/dist/index.mjs

@@ -3,15 +3,14 @@ import { createElement } from '@bpmn-io/properties-panel/preact';
 import { useService } from 'bpmn-js-properties-panel';
 
 function ZenFormProps(element) {
-    if (element.type !== 'bpmn:UserTask') {
+    if (element.type !== 'bpmn:UserTask')
         return [];
-    }
     return [
         {
             id: 'zenFormDesignButton',
             component: ZenFormDesignButtonEntry,
             isEdited: () => false,
-        }
+        },
     ];
 }
 function getZenFormValue(element) {
@@ -25,7 +24,6 @@ function getZenFormValue(element) {
     const input = (ioMapping.inputParameters || []).find((p) => p.target === 'ZEN_FORM');
     if (!input?.source)
         return '';
-    // Parse FEEL string literal: ="..." → raw JSON
     const src = input.source;
     if (src.startsWith('="') && src.endsWith('"')) {
         return src.slice(2, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
@@ -49,6 +47,137 @@ function ZenFormDesignButtonEntry(props) {
             'font-size: 13px; font-weight: 500;',
     }, translate('Design Form')));
 }
+// ─── Form variable scanning ──────────────────────────────────────────────────
+function extractFormKeys(components) {
+    const keys = [];
+    for (const comp of components || []) {
+        if (comp.key)
+            keys.push(comp.key);
+        if (comp.components)
+            keys.push(...extractFormKeys(comp.components));
+        if (comp.rows) {
+            for (const row of comp.rows) {
+                if (Array.isArray(row))
+                    keys.push(...extractFormKeys(row));
+            }
+        }
+        if (comp.columns) {
+            for (const col of comp.columns) {
+                if (col.components)
+                    keys.push(...extractFormKeys(col.components));
+            }
+        }
+    }
+    return keys;
+}
+function scanFormVariables(formJson) {
+    try {
+        const schema = JSON.parse(formJson);
+        return extractFormKeys(schema.components || []);
+    }
+    catch {
+        console.warn('[ZenBPM] Failed to parse form JSON for variable scanning');
+        return [];
+    }
+}
+/**
+ * Sync output mappings with current form fields.
+ * - Form fields without an existing output get a default one.
+ * - Existing outputs with the same source are kept, preserving user's target.
+ * - Outputs for removed form fields are dropped.
+ */
+function syncOutputMappings(element, injector, variableKeys) {
+    const commandStack = injector.get('commandStack');
+    const bpmnFactory = injector.get('bpmnFactory');
+    const bo = element.businessObject;
+    let extensionElements = bo.extensionElements;
+    const commands = [];
+    if (!extensionElements) {
+        extensionElements = bpmnFactory.create('bpmn:ExtensionElements', {
+            values: [],
+        });
+        extensionElements.$parent = bo;
+        commands.push({
+            cmd: 'element.updateModdleProperties',
+            context: {
+                element,
+                moddleElement: bo,
+                properties: { extensionElements },
+            },
+        });
+    }
+    let ioMapping = (extensionElements.values || []).find((e) => e.$instanceOf('zenbpm:IoMapping'));
+    if (!ioMapping) {
+        ioMapping = bpmnFactory.create('zenbpm:IoMapping', {
+            inputParameters: [],
+            outputParameters: [],
+        });
+        ioMapping.$parent = extensionElements;
+        commands.push({
+            cmd: 'element.updateModdleProperties',
+            context: {
+                element,
+                moddleElement: extensionElements,
+                properties: {
+                    values: [...(extensionElements.values || []), ioMapping],
+                },
+            },
+        });
+    }
+    // Index existing outputs by source
+    const existingBySource = new Map((ioMapping.outputParameters || []).map((o) => [o.source, o]));
+    // For each form field, produce an output — reusing existing one if available
+    const outputs = variableKeys.map((key) => {
+        const source = `=${key}`;
+        const existing = existingBySource.get(source);
+        if (existing)
+            return existing;
+        const output = bpmnFactory.create('zenbpm:Output', {
+            source,
+            target: key,
+        });
+        output.$parent = ioMapping;
+        return output;
+    });
+    commands.push({
+        cmd: 'element.updateModdleProperties',
+        context: {
+            element,
+            moddleElement: ioMapping,
+            properties: { outputParameters: outputs },
+        },
+    });
+    commandStack.execute('properties-panel.multi-command-executor', commands);
+}
+// ─── Form save handler ───────────────────────────────────────────────────────
+const lastFormValueByElement = new Map();
+function setupFormSaveHandler(injector) {
+    const eventBus = injector.get('eventBus');
+    eventBus.on('commandStack.element.updateModdleProperties.executed', (event) => {
+        const { context } = event;
+        if (!context)
+            return;
+        const { moddleElement, properties, element } = context;
+        if (moddleElement?.$type !== 'zenbpm:Input' ||
+            moddleElement.target !== 'ZEN_FORM' ||
+            properties?.source === undefined) {
+            return;
+        }
+        if (!element || element.type !== 'bpmn:UserTask')
+            return;
+        // Defer to avoid nested commandStack.execute() while stack is mid-execution
+        setTimeout(() => {
+            const formJson = getZenFormValue(element);
+            if (!formJson)
+                return;
+            if (lastFormValueByElement.get(element.id) === formJson)
+                return;
+            lastFormValueByElement.set(element.id, formJson);
+            const variableKeys = scanFormVariables(formJson);
+            syncOutputMappings(element, injector, variableKeys);
+        }, 0);
+    });
+}
 
 /**
  * Return the first extension element of `type` from the given business object,
@@ -331,11 +460,11 @@ function bindingEntries(idPrefix, bindingTypeComponent, versionTagComponent, ele
     return entries;
 }
 
-const TYPE$2 = 'zenbpm:CalledElement';
-const ID$1 = 'zenbpm-calledEl';
+const TYPE$3 = 'zenbpm:CalledElement';
+const ID$2 = 'zenbpm-calledEl';
 // Module-level component instances — stable references, never recreated on render.
-const BindingTypeEntry$1 = makeBindingTypeEntry(ID$1, TYPE$2);
-const BindingVersionTagEntry$1 = makeVersionTagEntry(ID$1, TYPE$2);
+const BindingTypeEntry$1 = makeBindingTypeEntry(ID$2, TYPE$3);
+const BindingVersionTagEntry$1 = makeVersionTagEntry(ID$2, TYPE$3);
 // ─── entry components ────────────────────────────────────────────────────────
 function ProcessIdEntry(props) {
     const { element } = props;
@@ -344,9 +473,9 @@ function ProcessIdEntry(props) {
     const translate = useService('translate');
     const debounce = useService('debounceInput');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$2)?.processId ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { processId: value }, bpmnFactory, commandStack);
-    return TextFieldEntry({ element, id: `${ID$1}-processId`, label: translate('Process ID'), getValue, setValue, debounce });
+    const getValue = () => getExtensionElement(bo, TYPE$3)?.processId ?? '';
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$3, { processId: value }, bpmnFactory, commandStack);
+    return TextFieldEntry({ element, id: `${ID$2}-processId`, label: translate('Process ID'), getValue, setValue, debounce });
 }
 function PropagateAllChildVarsEntry(props) {
     const { element } = props;
@@ -354,9 +483,9 @@ function PropagateAllChildVarsEntry(props) {
     const bpmnFactory = useService('bpmnFactory');
     const translate = useService('translate');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$2)?.propagateAllChildVariables ?? false;
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { propagateAllChildVariables: value }, bpmnFactory, commandStack);
-    return ToggleSwitchEntry({ element, id: `${ID$1}-propagateAllChildVariables`, label: translate('Propagate all child variables'), getValue, setValue });
+    const getValue = () => getExtensionElement(bo, TYPE$3)?.propagateAllChildVariables ?? false;
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$3, { propagateAllChildVariables: value }, bpmnFactory, commandStack);
+    return ToggleSwitchEntry({ element, id: `${ID$2}-propagateAllChildVariables`, label: translate('Propagate all child variables'), getValue, setValue });
 }
 function PropagateAllParentVarsEntry(props) {
     const { element } = props;
@@ -364,27 +493,27 @@ function PropagateAllParentVarsEntry(props) {
     const bpmnFactory = useService('bpmnFactory');
     const translate = useService('translate');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$2)?.propagateAllParentVariables ?? true;
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { propagateAllParentVariables: value }, bpmnFactory, commandStack);
-    return ToggleSwitchEntry({ element, id: `${ID$1}-propagateAllParentVariables`, label: translate('Propagate all parent variables'), getValue, setValue });
+    const getValue = () => getExtensionElement(bo, TYPE$3)?.propagateAllParentVariables ?? true;
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$3, { propagateAllParentVariables: value }, bpmnFactory, commandStack);
+    return ToggleSwitchEntry({ element, id: `${ID$2}-propagateAllParentVariables`, label: translate('Propagate all parent variables'), getValue, setValue });
 }
 // ─── exported entry list ─────────────────────────────────────────────────────
 function CalledElementProps(element) {
     if (element.type !== 'bpmn:CallActivity')
         return [];
     return [
-        { id: `${ID$1}-processId`, component: ProcessIdEntry, isEdited: isTextFieldEntryEdited },
-        ...bindingEntries(ID$1, BindingTypeEntry$1, BindingVersionTagEntry$1, element, TYPE$2),
-        { id: `${ID$1}-propagateAllChildVariables`, component: PropagateAllChildVarsEntry, isEdited: isToggleSwitchEntryEdited },
-        { id: `${ID$1}-propagateAllParentVariables`, component: PropagateAllParentVarsEntry, isEdited: isToggleSwitchEntryEdited },
+        { id: `${ID$2}-processId`, component: ProcessIdEntry, isEdited: isTextFieldEntryEdited },
+        ...bindingEntries(ID$2, BindingTypeEntry$1, BindingVersionTagEntry$1, element, TYPE$3),
+        { id: `${ID$2}-propagateAllChildVariables`, component: PropagateAllChildVarsEntry, isEdited: isToggleSwitchEntryEdited },
+        { id: `${ID$2}-propagateAllParentVariables`, component: PropagateAllParentVarsEntry, isEdited: isToggleSwitchEntryEdited },
     ];
 }
 
-const TYPE$1 = 'zenbpm:CalledDecision';
-const ID = 'zenbpm-calledDecision';
+const TYPE$2 = 'zenbpm:CalledDecision';
+const ID$1 = 'zenbpm-calledDecision';
 // Module-level component instances — stable references, never recreated on render.
-const BindingTypeEntry = makeBindingTypeEntry(ID, TYPE$1);
-const BindingVersionTagEntry = makeVersionTagEntry(ID, TYPE$1);
+const BindingTypeEntry = makeBindingTypeEntry(ID$1, TYPE$2);
+const BindingVersionTagEntry = makeVersionTagEntry(ID$1, TYPE$2);
 // ─── entry components ────────────────────────────────────────────────────────
 function DecisionIdEntry(props) {
     const { element } = props;
@@ -393,9 +522,9 @@ function DecisionIdEntry(props) {
     const translate = useService('translate');
     const debounce = useService('debounceInput');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$1)?.decisionId ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$1, { decisionId: value }, bpmnFactory, commandStack);
-    return TextFieldEntry({ element, id: `${ID}-decisionId`, label: translate('Decision ID'), getValue, setValue, debounce });
+    const getValue = () => getExtensionElement(bo, TYPE$2)?.decisionId ?? '';
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { decisionId: value }, bpmnFactory, commandStack);
+    return TextFieldEntry({ element, id: `${ID$1}-decisionId`, label: translate('Decision ID'), getValue, setValue, debounce });
 }
 function ResultVariableEntry(props) {
     const { element } = props;
@@ -404,18 +533,18 @@ function ResultVariableEntry(props) {
     const translate = useService('translate');
     const debounce = useService('debounceInput');
     const bo = element.businessObject;
-    const getValue = () => getExtensionElement(bo, TYPE$1)?.resultVariable ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$1, { resultVariable: value }, bpmnFactory, commandStack);
-    return TextFieldEntry({ element, id: `${ID}-resultVariable`, label: translate('Result variable'), getValue, setValue, debounce });
+    const getValue = () => getExtensionElement(bo, TYPE$2)?.resultVariable ?? '';
+    const setValue = (value) => updateExtensionElementProps(element, bo, TYPE$2, { resultVariable: value }, bpmnFactory, commandStack);
+    return TextFieldEntry({ element, id: `${ID$1}-resultVariable`, label: translate('Result variable'), getValue, setValue, debounce });
 }
 // ─── exported entry list ─────────────────────────────────────────────────────
 function CalledDecisionProps(element) {
     if (element.type !== 'bpmn:BusinessRuleTask')
         return [];
     return [
-        { id: `${ID}-decisionId`, component: DecisionIdEntry, isEdited: isTextFieldEntryEdited },
-        ...bindingEntries(ID, BindingTypeEntry, BindingVersionTagEntry, element, TYPE$1),
-        { id: `${ID}-resultVariable`, component: ResultVariableEntry, isEdited: isTextFieldEntryEdited },
+        { id: `${ID$1}-decisionId`, component: DecisionIdEntry, isEdited: isTextFieldEntryEdited },
+        ...bindingEntries(ID$1, BindingTypeEntry, BindingVersionTagEntry, element, TYPE$2),
+        { id: `${ID$1}-resultVariable`, component: ResultVariableEntry, isEdited: isTextFieldEntryEdited },
     ];
 }
 
@@ -499,7 +628,7 @@ function VersionTagProps(element) {
     ];
 }
 
-const TYPE = 'zenbpm:LoopCharacteristics';
+const TYPE$1 = 'zenbpm:LoopCharacteristics';
 // ─── helpers ─────────────────────────────────────────────────────────────────
 /**
  * Return the bpmn:MultiInstanceLoopCharacteristics of an element, or null.
@@ -512,7 +641,7 @@ function getMultiInstanceLoopCharacteristics(element) {
 }
 function getZenbpmLoopCharacteristics(element) {
     const lc = getMultiInstanceLoopCharacteristics(element);
-    return lc ? getExtensionElement(lc, TYPE) : undefined;
+    return lc ? getExtensionElement(lc, TYPE$1) : undefined;
 }
 // ─── entry components ────────────────────────────────────────────────────────
 /**
@@ -526,7 +655,7 @@ function InputCollectionEntry(props) {
     const debounce = useService('debounceInput');
     const lc = getMultiInstanceLoopCharacteristics(element);
     const getValue = () => getZenbpmLoopCharacteristics(element)?.inputCollection ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE, { inputCollection: value }, bpmnFactory, commandStack);
+    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE$1, { inputCollection: value }, bpmnFactory, commandStack);
     return FeelEntry({
         element,
         id: 'zenbpm-multiInstance-inputCollection',
@@ -548,7 +677,7 @@ function InputElementEntry(props) {
     const debounce = useService('debounceInput');
     const lc = getMultiInstanceLoopCharacteristics(element);
     const getValue = () => getZenbpmLoopCharacteristics(element)?.inputElement ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE, { inputElement: value }, bpmnFactory, commandStack);
+    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE$1, { inputElement: value }, bpmnFactory, commandStack);
     return TextFieldEntry({
         element,
         id: 'zenbpm-multiInstance-inputElement',
@@ -569,7 +698,7 @@ function OutputCollectionEntry(props) {
     const debounce = useService('debounceInput');
     const lc = getMultiInstanceLoopCharacteristics(element);
     const getValue = () => getZenbpmLoopCharacteristics(element)?.outputCollection ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE, { outputCollection: value }, bpmnFactory, commandStack);
+    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE$1, { outputCollection: value }, bpmnFactory, commandStack);
     return TextFieldEntry({
         element,
         id: 'zenbpm-multiInstance-outputCollection',
@@ -590,7 +719,7 @@ function OutputElementEntry(props) {
     const debounce = useService('debounceInput');
     const lc = getMultiInstanceLoopCharacteristics(element);
     const getValue = () => getZenbpmLoopCharacteristics(element)?.outputElement ?? '';
-    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE, { outputElement: value }, bpmnFactory, commandStack);
+    const setValue = (value) => updateExtensionElementProps(element, lc, TYPE$1, { outputElement: value }, bpmnFactory, commandStack);
     return FeelEntry({
         element,
         id: 'zenbpm-multiInstance-outputElement',
@@ -788,6 +917,107 @@ function ConditionExpressionProps(element) {
     ];
 }
 
+const TYPE = 'zenbpm:Subscription';
+const ID = 'zenbpm-messageSubscriptionCorrelationKey';
+// ─── helpers ─────────────────────────────────────────────────────────────────
+/**
+ * Return the bpmn:Message associated with the given diagram element, or
+ * undefined if the element has no message (and therefore no subscription).
+ *
+ * ZenBPM only considers the following elements to be message subscribers:
+ *   - bpmn:IntermediateCatchEvent (with bpmn:MessageEventDefinition)
+ *   - bpmn:BoundaryEvent          (with bpmn:MessageEventDefinition)
+ *   - bpmn:StartEvent             (only inside an event sub-process)
+ * ReceiveTask / EndEvent / IntermediateThrowEvent are not subscription points.
+ */
+function getMessage(element) {
+    const bo = element.businessObject;
+    if (!bo) {
+        return undefined;
+    }
+    const eventDefinitions = bo.eventDefinitions || [];
+    for (const def of eventDefinitions) {
+        if (def.$type === 'bpmn:MessageEventDefinition') {
+            return def.get('messageRef');
+        }
+    }
+    return undefined;
+}
+/**
+ * Eligibility for the subscription correlation key field, derived from how the
+ * ZenBPM engine actually consumes the value at runtime:
+ *
+ *   - bpmn:IntermediateCatchEvent / bpmn:BoundaryEvent   → yes
+ *     Engine creates a TokenMessageSubscription that uses the key for matching.
+ *
+ *   - bpmn:StartEvent inside an event sub-process only   → yes
+ *     Engine creates an InstanceMessageSubscription that uses the key.
+ *
+ *   - bpmn:StartEvent at the process root                → no
+ *     Engine creates a DefinitionMessageSubscription that ignores the key.
+ *
+ *   - bpmn:ReceiveTask                                   → no
+ *     Not supported by the ZenBPM engine (deployment error).
+ *
+ *   - bpmn:EndEvent / bpmn:IntermediateThrowEvent        → no
+ *     Throw events are job-based, not subscription-based.
+ */
+function canHaveSubscriptionCorrelationKey(element) {
+    const bo = element.businessObject;
+    if (!bo) {
+        return false;
+    }
+    if (bo.$type === 'bpmn:IntermediateCatchEvent' || bo.$type === 'bpmn:BoundaryEvent') {
+        return !!getMessage(element);
+    }
+    if (bo.$type === 'bpmn:StartEvent') {
+        const parentBo = element.parent?.businessObject;
+        return !!parentBo && parentBo.$type === 'bpmn:SubProcess' && !!parentBo.triggeredByEvent;
+    }
+    return false;
+}
+// ─── entry component ────────────────────────────────────────────────────────
+function MessageSubscriptionCorrelationKeyEntry(props) {
+    const { element } = props;
+    const commandStack = useService('commandStack');
+    const bpmnFactory = useService('bpmnFactory');
+    const translate = useService('translate');
+    const debounce = useService('debounceInput');
+    // The subscription lives on the referenced bpmn:Message, not on the
+    // diagram element itself — this matches the zeebe:Subscription behaviour.
+    // `message` can become undefined at render time if the user unlinks the
+    // message after the entry is already mounted, so guard every access.
+    const message = getMessage(element);
+    const getValue = () => message
+        ? getFeelValue(getExtensionElement(message, TYPE)?.correlationKey)
+        : '';
+    const setValue = (value) => {
+        if (!message) {
+            return;
+        }
+        updateExtensionElementProps(element, message, TYPE, { correlationKey: value }, bpmnFactory, commandStack);
+    };
+    return FeelEntry({
+        element,
+        id: ID,
+        label: translate('Subscription correlation key'),
+        feel: 'required',
+        getValue,
+        setValue,
+        debounce,
+    });
+}
+// ─── exported entry list ─────────────────────────────────────────────────────
+function CorrelationKeyProps(element) {
+    if (!canHaveSubscriptionCorrelationKey(element))
+        return [];
+    if (!getMessage(element))
+        return [];
+    return [
+        { id: ID, component: MessageSubscriptionCorrelationKeyEntry, isEdited: isFeelEntryEdited },
+    ];
+}
+
 const PROVIDER_PRIORITY = 500;
 class ZenBpmPropertiesProvider {
     static $inject = ['propertiesPanel', 'injector'];
@@ -795,6 +1025,9 @@ class ZenBpmPropertiesProvider {
     constructor(propertiesPanel, injector) {
         this._injector = injector;
         propertiesPanel.registerProvider(PROVIDER_PRIORITY, this);
+        // When the Zen Form editor is submitted, scan form field variables
+        // and automatically add them to the output mapping.
+        setupFormSaveHandler(injector);
     }
     getGroups(element) {
         return (groups) => {
@@ -875,6 +1108,24 @@ class ZenBpmPropertiesProvider {
                     });
                 }
             }
+            // ── Message subscription correlation key ────────────────────────────
+            // Appended to the standard 'message' group (created by bpmn-js-properties-panel)
+            // so it sits right under the message name, mirroring the zeebe:Subscription UX.
+            const correlationKeyEntries = CorrelationKeyProps(element);
+            if (correlationKeyEntries.length) {
+                const messageGroup = groups.find((g) => g.id === 'message');
+                if (messageGroup) {
+                    messageGroup.entries = [...messageGroup.entries, ...correlationKeyEntries];
+                }
+                else {
+                    groups.push({
+                        id: 'message',
+                        label: translate('Message'),
+                        entries: correlationKeyEntries,
+                        component: Group,
+                    });
+                }
+            }
             // ── Condition expression ─────────────────────────────────────────────
             // The standard bpmn-js-properties-panel already adds a 'conditionExpression'
             // entry to the 'condition' group. We replace the entire group so that only