@formicoidea/labre-framework-bpmn 0.58.0 → 0.60.0

package/dist/toolbar/config.d.ts

@@ -24,6 +24,22 @@ export declare const bpmnPoolToolbarConfig: {
             tooltip: string;
             run: (runCtx: ToolbarContext) => void;
         };
+    }, {
+        id: string;
+        when: (ctx: ToolbarContext) => boolean;
+        generate: (ctx: ToolbarContext) => {
+            icon: TemplateResult;
+            tooltip: string;
+            run: (runCtx: ToolbarContext) => void;
+        };
+    }, {
+        id: string;
+        when: (ctx: ToolbarContext) => boolean;
+        generate: (ctx: ToolbarContext) => {
+            icon: TemplateResult;
+            tooltip: string;
+            run: (runCtx: ToolbarContext) => void;
+        };
     }, import("@formicoidea/labre-core/shared/services").ToolbarActionGenerator];
     readonly when: (ctx: ToolbarContext) => boolean;
 };
@@ -35,8 +51,8 @@ export declare const bpmnPoolToolbarExtension: import("@formicoidea/labre-core/_
  * up — the same merge C4's board makes for the same reason).
  *
  * `c.legend` and not `b.legend`: the toolbar sorts lexicographically by id
- * after partitioning by placement, and `'b.add-lane' < 'b.legend' <
- * 'b.remove-lane'` would wedge the button between the two lane gestures. `c.`
+ * after partitioning by placement, and `'b.lane-1-add' < 'b.legend' <
+ * 'b.lane-4-remove'` would wedge the button between the two lane gestures. `c.`
  * puts it where it belongs — resize · add lane · remove lane · **Legend** ·
  * Validation, with Export XML in the "⋮".
  *

package/dist/toolbar/config.js

@@ -3,7 +3,7 @@ import { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
 import { BOARD_RESIZE_TOGGLE, commandMoreAction, ToolbarModuleExtension, translateKey, } from '@formicoidea/labre-core/shared/services';
 import { BlockFlavourIdentifier, getRegisteredCommands, runCommand, } from '@formicoidea/labre-core/std';
 import { html } from 'lit';
-import { bpmnExportXmlIcon, bpmnLaneAddIcon, bpmnLaneRemoveIcon, } from './icons.js';
+import { bpmnExportXmlIcon, bpmnLaneAddIcon, bpmnLaneDownIcon, bpmnLaneRemoveIcon, bpmnLaneUpIcon, } from './icons.js';
 const ResizeIcon = html `<svg
   width="24"
   height="24"
@@ -90,10 +90,14 @@ export const bpmnPoolToolbarConfig = {
         booleanToggle('a.toggle-resize', BOARD_RESIZE_TOGGLE, ResizeIcon, 'resizeEnabled'),
         // The two lane gestures, next to the resize toggle: everything on this row
         // is about the SHAPE of the pool rather than about what is drawn in it.
-        // Add before remove, because that is the order they can be used in — a pool
-        // has no lane to remove until one has been added.
-        commandAction('b.add-lane', 'bpmn.addLane', 'com.labre.commands.bpmn.addLane', 'Add lane', bpmnLaneAddIcon),
-        commandAction('b.remove-lane', 'bpmn.removeLane', 'com.labre.commands.bpmn.removeLane', 'Remove lane', bpmnLaneRemoveIcon),
+        // Actions sort by id: add, move up, move down, remove — the order a lane
+        // is handled in, with remove last because it is the destructive one.
+        commandAction('b.lane-1-add', 'bpmn.addLane', 'com.labre.commands.bpmn.addLane', 'Add lane', bpmnLaneAddIcon),
+        commandAction('b.lane-4-remove', 'bpmn.removeLane', 'com.labre.commands.bpmn.removeLane', 'Remove lane', bpmnLaneRemoveIcon),
+        // Reorder, beside add and remove: they act on the FOCUSED lane (a click on
+        // its title strip) and only show while one is focused and can move.
+        commandAction('b.lane-2-up', 'bpmn.moveLaneUp', 'com.labre.commands.bpmn.moveLaneUp', 'Move lane up', bpmnLaneUpIcon),
+        commandAction('b.lane-3-down', 'bpmn.moveLaneDown', 'com.labre.commands.bpmn.moveLaneDown', 'Move lane down', bpmnLaneDownIcon),
         // …and, in the "⋮", the one thing you do to a finished process rather than
         // to the shape of a pool: take it away as a file.
         commandMoreAction('z.export-xml', 'bpmn.exportXml', 'com.labre.commands.bpmn.exportXml', 'Export BPMN XML', bpmnExportXmlIcon),
@@ -111,8 +115,8 @@ export const bpmnPoolToolbarExtension = ToolbarModuleExtension({
  * up — the same merge C4's board makes for the same reason).
  *
  * `c.legend` and not `b.legend`: the toolbar sorts lexicographically by id
- * after partitioning by placement, and `'b.add-lane' < 'b.legend' <
- * 'b.remove-lane'` would wedge the button between the two lane gestures. `c.`
+ * after partitioning by placement, and `'b.lane-1-add' < 'b.legend' <
+ * 'b.lane-4-remove'` would wedge the button between the two lane gestures. `c.`
  * puts it where it belongs — resize · add lane · remove lane · **Legend** ·
  * Validation, with Export XML in the "⋮".
  *

package/dist/toolbar/icons.d.ts

@@ -87,3 +87,7 @@ export declare const bpmnPoolIcon: import("lit-html").TemplateResult<2>;
 export declare const bpmnLaneAddIcon: import("lit-html").TemplateResult<2>;
 /** Remove lane — the same pool, with a minus on the band that goes. */
 export declare const bpmnLaneRemoveIcon: import("lit-html").TemplateResult<2>;
+/** Move lane up — the pool cut in two, with an arrow rising out of the lower band. */
+export declare const bpmnLaneUpIcon: import("lit-html").TemplateResult<2>;
+/** Move lane down — the same pool, with an arrow falling out of the upper band. */
+export declare const bpmnLaneDownIcon: import("lit-html").TemplateResult<2>;

package/dist/toolbar/icons.js

@@ -179,3 +179,17 @@ export const bpmnLaneRemoveIcon = svg `<svg width="24" height="24" viewBox="0 0
   <path d="M8 12 H20.5" stroke="currentColor" stroke-width="1.6"/>
   <path d="M12.4 15.1 H16.1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
 </svg>`;
+/** Move lane up — the pool cut in two, with an arrow rising out of the lower band. */
+export const bpmnLaneUpIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3.5" y="5.5" width="17" height="13" rx="1.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M8 5.5 V18.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M8 12 H20.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M14.25 16.6 V13.6 M12.6 15 L14.25 13.4 L15.9 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+/** Move lane down — the same pool, with an arrow falling out of the upper band. */
+export const bpmnLaneDownIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3.5" y="5.5" width="17" height="13" rx="1.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M8 5.5 V18.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M8 12 H20.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M14.25 7.4 V10.4 M12.6 9 L14.25 10.6 L15.9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;

package/dist/toolbox.d.ts

@@ -0,0 +1,45 @@
+import type { FrameworkToolbox, SerializedElementProps, ToolboxPoint } from '@formicoidea/labre-core/interchange';
+import type { BpmnNodeKind } from '@formicoidea/labre-core/model';
+import { type BpmnEdgeKey } from './consts.js';
+/**
+ * BPMN's toolbar as pure builders (`docs/adr/0045`): what `createBpmnNode`,
+ * `createBpmnPool`, the lane gesture and the three flow tools place, with no
+ * editor behind them. The actions call these, so an artefact a host places
+ * and one placed from the toolbar are the same elements.
+ */
+/** The text slot of a flow object, an artefact or a data shape. */
+export interface BpmnNodeTexts {
+    /** The name; the kind's English seed when absent. */
+    name?: string;
+}
+/**
+ * A BPMN artefact at `at` (its top-left), as the toolbar places it.
+ *
+ * An inscribed kind (activities, the annotation, the group) is ONE element
+ * carrying its name inside. An external kind (events, gateways, data shapes)
+ * is the bare symbol, its name as a `bpmn:label` text centred under it, and
+ * the group that makes the two one artefact, last (R38). The symbol's id is
+ * `<local>:node` either way, which is what a flow attaches to.
+ */
+export declare function bpmnNodeElements(kind: BpmnNodeKind, at: ToolboxPoint, texts?: BpmnNodeTexts, local?: string): SerializedElementProps[];
+/** The text slots of a pool. */
+export interface BpmnPoolTexts {
+    /** The participant's name; `Pool` when absent. */
+    name?: string;
+    /** One lane name per line, top to bottom; no lane when absent. */
+    lanes?: string;
+}
+/**
+ * A pool at `at`, at the size the toolbar draws it, with the lanes it is
+ * given.
+ *
+ * Each lane is what one click on "Add lane" appends to a fresh pool: an equal
+ * weight of 1, and `Lane N` when its line is blank. Its id is `<local>-lane-N`
+ * and not a minted one: a builder mints nothing, and an id unique within the
+ * pool is all a lane needs (the importer's own `lane-N` fallback).
+ */
+export declare function bpmnPoolElement(at: ToolboxPoint, texts?: BpmnPoolTexts, local?: string): SerializedElementProps;
+/** The connector a flow tool is armed with, between two ends. */
+export declare function bpmnFlowElement(edge: BpmnEdgeKey, from: string, to: string, label?: string): SerializedElementProps;
+/** Every item of the BPMN toolbar that places elements, in the toolbar's order. */
+export declare const BPMN_TOOLBOX: FrameworkToolbox;

package/dist/toolbox.js

@@ -0,0 +1,129 @@
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { bpmnCommandsManifest } from './commands-manifest.js';
+import { bpmnLabelMode, LANE_NAME_FALLBACK, NODE_LABEL, NODE_SIZE, POOL_NAME_FALLBACK, POOL_REF_HEIGHT, POOL_REF_WIDTH, } from './consts.js';
+import { bpmnConnectorProps, bpmnLabelBoxFor, bpmnLabelProps, bpmnNodeProps, bpmnPoolProps, } from './presets.js';
+/**
+ * A BPMN artefact at `at` (its top-left), as the toolbar places it.
+ *
+ * An inscribed kind (activities, the annotation, the group) is ONE element
+ * carrying its name inside. An external kind (events, gateways, data shapes)
+ * is the bare symbol, its name as a `bpmn:label` text centred under it, and
+ * the group that makes the two one artefact, last (R38). The symbol's id is
+ * `<local>:node` either way, which is what a flow attaches to.
+ */
+export function bpmnNodeElements(kind, at, texts = {}, local = kind) {
+    const { w, h } = NODE_SIZE[kind];
+    const name = texts.name?.trim() || NODE_LABEL[kind];
+    const id = (part) => `${local}:${part}`;
+    const xywh = new Bound(at.x, at.y, w, h).serialize();
+    if (bpmnLabelMode(kind) === 'inscribed') {
+        return [{ ...bpmnNodeProps(kind, { xywh, text: name }), id: id('node') }];
+    }
+    const label = bpmnLabelBoxFor(kind, at.x + w / 2, at.y + h / 2);
+    const members = [
+        // `text: undefined` and not no key: the symbol is born bare exactly as the
+        // toolbar's is, and `bpmnNodeProps` passes the key through unchanged.
+        { ...bpmnNodeProps(kind, { xywh, text: undefined }), id: id('node') },
+        { ...bpmnLabelProps(name, label.x, label.y), id: id('label') },
+    ];
+    return [
+        ...members,
+        {
+            type: 'group',
+            id: id('group'),
+            children: Object.fromEntries(members.map(m => [m.id, true])),
+        },
+    ];
+}
+/**
+ * A pool at `at`, at the size the toolbar draws it, with the lanes it is
+ * given.
+ *
+ * Each lane is what one click on "Add lane" appends to a fresh pool: an equal
+ * weight of 1, and `Lane N` when its line is blank. Its id is `<local>-lane-N`
+ * and not a minted one: a builder mints nothing, and an id unique within the
+ * pool is all a lane needs (the importer's own `lane-N` fallback).
+ */
+export function bpmnPoolElement(at, texts = {}, local = 'pool') {
+    const names = (texts.lanes ?? '').split('\n').map(line => line.trim());
+    const lanes = texts.lanes?.trim()
+        ? names.map((name, i) => ({
+            id: `${local}-lane-${i + 1}`,
+            name: name || LANE_NAME_FALLBACK.replace('{{n}}', String(i + 1)),
+            size: 1,
+        }))
+        : [];
+    return {
+        ...bpmnPoolProps({
+            xywh: new Bound(at.x, at.y, POOL_REF_WIDTH, POOL_REF_HEIGHT).serialize(),
+            name: texts.name?.trim() || POOL_NAME_FALLBACK,
+        }),
+        id: local,
+        // Absent until the first lane, as on a pool drawn from the toolbar.
+        ...(lanes.length > 0 ? { lanes } : {}),
+    };
+}
+/** The connector a flow tool is armed with, between two ends. */
+export function bpmnFlowElement(edge, from, to, label) {
+    return {
+        ...bpmnConnectorProps(edge),
+        source: { id: from },
+        target: { id: to },
+        ...(label?.trim() ? { text: label.trim() } : {}),
+    };
+}
+/** The toolbar command's label, so a host names an item as the toolbar does. */
+function label(commandId) {
+    const row = bpmnCommandsManifest.find(r => r.id === commandId);
+    return {
+        labelKey: row?.labelKey ?? commandId,
+        labelFallback: row?.labelFallback ?? commandId,
+    };
+}
+const nodeItem = (id, kind, commandId) => ({
+    id,
+    ...label(commandId),
+    texts: ['name'],
+    size: NODE_SIZE[kind],
+    build: (at, texts, local) => bpmnNodeElements(kind, at, texts, local),
+});
+const flowLink = (id, edge, commandId) => ({
+    id,
+    ...label(commandId),
+    build: (from, to, text) => bpmnFlowElement(edge, from, to, text),
+});
+/** Every item of the BPMN toolbar that places elements, in the toolbar's order. */
+export const BPMN_TOOLBOX = {
+    framework: 'bpmn',
+    items: [
+        nodeItem('start-event', 'startEvent', 'bpmn.addStartEvent'),
+        nodeItem('end-event', 'endEvent', 'bpmn.addEndEvent'),
+        nodeItem('task', 'task', 'bpmn.addTask'),
+        nodeItem('exclusive-gateway', 'gatewayExclusive', 'bpmn.addExclusiveGateway'),
+        {
+            id: 'pool',
+            ...label('bpmn.addPool'),
+            texts: ['name', 'lanes'],
+            size: { w: POOL_REF_WIDTH, h: POOL_REF_HEIGHT },
+            build: (at, texts, local) => [bpmnPoolElement(at, texts, local)],
+        },
+        nodeItem('user-task', 'taskUser', 'bpmn.addUserTask'),
+        nodeItem('service-task', 'taskService', 'bpmn.addServiceTask'),
+        nodeItem('sub-process', 'subProcess', 'bpmn.addSubProcess'),
+        nodeItem('call-activity', 'callActivity', 'bpmn.addCallActivity'),
+        nodeItem('parallel-gateway', 'gatewayParallel', 'bpmn.addParallelGateway'),
+        nodeItem('message-start-event', 'startEventMessage', 'bpmn.addMessageStartEvent'),
+        nodeItem('timer-start-event', 'startEventTimer', 'bpmn.addTimerStartEvent'),
+        nodeItem('message-end-event', 'endEventMessage', 'bpmn.addMessageEndEvent'),
+        nodeItem('terminate-end-event', 'endEventTerminate', 'bpmn.addTerminateEndEvent'),
+        nodeItem('data-object', 'dataObject', 'bpmn.addDataObject'),
+        nodeItem('data-store', 'dataStore', 'bpmn.addDataStore'),
+        nodeItem('text-annotation', 'textAnnotation', 'bpmn.addTextAnnotation'),
+        nodeItem('group', 'group', 'bpmn.addGroup'),
+    ],
+    links: [
+        flowLink('sequence-flow', 'sequenceFlow', 'bpmn.sequenceFlowTool'),
+        flowLink('message-flow', 'messageFlow', 'bpmn.messageFlowTool'),
+        flowLink('association', 'association', 'bpmn.associationTool'),
+    ],
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-bpmn",
   "description": "Labre bpmn framework for @formicoidea/labre-core.",
-  "version": "0.58.0",
+  "version": "0.60.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -35,7 +35,7 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.58.0",
+    "@formicoidea/labre-core": "0.60.0",
     "lit": "^3.2.0"
   }
 }