@formicoidea/labre-framework-bpmn 0.23.0 → 0.23.2

package/package.json

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

package/src/consts.ts

@@ -1,57 +1,57 @@
-import type { BpmnNodeKind } from '@formicoidea/labre-core/model';
-
-/**
- * Visual constants for the BPMN basics. Style "C" (hybrid): spec-accurate
- * shapes and line weights, with accent colour only on the event rings — the
- * task and gateway stay neutral. All of these are just the creation-time
- * defaults; every value is an editable shape property afterwards.
- */
-
-/** Accent stroke for the start event (thin green ring). */
-export const EVENT_START = '#43a06b';
-/** Accent stroke for the end event (thick red ring). */
-export const EVENT_END = '#cf5648';
-/** Neutral stroke for task / gateway (matches the EDGY base shapes). */
-export const NEUTRAL_STROKE = '#262626';
-/** Default fill for events / task / gateway. */
-export const NODE_FILL = '#ffffff';
-
-/** BPMN line weights: thin start ring, thick end ring, regular elsewhere. */
-export const START_WIDTH = 2;
-export const END_WIDTH = 4;
-export const NODE_STROKE_WIDTH = 2;
-
-/** Task corner radius (absolute px — a lightly rounded rectangle). */
-export const TASK_RADIUS = 10;
-
-/** Inner-text font for the task label. */
-export const INNER_FONT_SIZE = 18;
-
-/** Default node sizes (model units) per kind. */
-export const NODE_SIZE: Record<BpmnNodeKind, { w: number; h: number }> = {
-  startEvent: { w: 56, h: 56 },
-  endEvent: { w: 56, h: 56 },
-  task: { w: 120, h: 72 },
-  gatewayExclusive: { w: 72, h: 72 },
-};
-
-/** Default inner text per kind (only the task carries a label). */
-export const NODE_LABEL: Record<BpmnNodeKind, string> = {
-  startEvent: '',
-  endEvent: '',
-  task: 'Task',
-  gatewayExclusive: '',
-};
-
-/** Pool (background container) defaults. */
-export const POOL_BAND_WIDTH = 28;
-export const POOL_FRAME_COLOR = '#262626';
-export const POOL_BAND_FILL = '#f4f4f5';
-export const POOL_FRAME_WIDTH = 1.5;
-export const POOL_NAME_FONT_SIZE = 15;
-export const POOL_NAME_COLOR = '#262626';
-export const POOL_FONT_FAMILY = 'Inter, sans-serif';
-
-/** Sequence-flow connector preset. */
-export const SEQUENCE_STROKE = '#262626';
-export const SEQUENCE_WIDTH = 2;
+import type { BpmnNodeKind } from '@formicoidea/labre-core/model';
+
+/**
+ * Visual constants for the BPMN basics. Style "C" (hybrid): spec-accurate
+ * shapes and line weights, with accent colour only on the event rings — the
+ * task and gateway stay neutral. All of these are just the creation-time
+ * defaults; every value is an editable shape property afterwards.
+ */
+
+/** Accent stroke for the start event (thin green ring). */
+export const EVENT_START = '#43a06b';
+/** Accent stroke for the end event (thick red ring). */
+export const EVENT_END = '#cf5648';
+/** Neutral stroke for task / gateway (matches the EDGY base shapes). */
+export const NEUTRAL_STROKE = '#262626';
+/** Default fill for events / task / gateway. */
+export const NODE_FILL = '#ffffff';
+
+/** BPMN line weights: thin start ring, thick end ring, regular elsewhere. */
+export const START_WIDTH = 2;
+export const END_WIDTH = 4;
+export const NODE_STROKE_WIDTH = 2;
+
+/** Task corner radius (absolute px — a lightly rounded rectangle). */
+export const TASK_RADIUS = 10;
+
+/** Inner-text font for the task label. */
+export const INNER_FONT_SIZE = 18;
+
+/** Default node sizes (model units) per kind. */
+export const NODE_SIZE: Record<BpmnNodeKind, { w: number; h: number }> = {
+  startEvent: { w: 56, h: 56 },
+  endEvent: { w: 56, h: 56 },
+  task: { w: 120, h: 72 },
+  gatewayExclusive: { w: 72, h: 72 },
+};
+
+/** Default inner text per kind (only the task carries a label). */
+export const NODE_LABEL: Record<BpmnNodeKind, string> = {
+  startEvent: '',
+  endEvent: '',
+  task: 'Task',
+  gatewayExclusive: '',
+};
+
+/** Pool (background container) defaults. */
+export const POOL_BAND_WIDTH = 28;
+export const POOL_FRAME_COLOR = '#262626';
+export const POOL_BAND_FILL = '#f4f4f5';
+export const POOL_FRAME_WIDTH = 1.5;
+export const POOL_NAME_FONT_SIZE = 15;
+export const POOL_NAME_COLOR = '#262626';
+export const POOL_FONT_FAMILY = 'Inter, sans-serif';
+
+/** Sequence-flow connector preset. */
+export const SEQUENCE_STROKE = '#262626';
+export const SEQUENCE_WIDTH = 2;

package/src/effects.ts

@@ -1,14 +1,14 @@
-import { EdgelessBpmnMenu } from './toolbar/bpmn-menu';
-import { EdgelessBpmnSeniorButton } from './toolbar/bpmn-senior-button';
-
-export function effects() {
-  customElements.define('edgeless-bpmn-menu', EdgelessBpmnMenu);
-  customElements.define('edgeless-bpmn-senior-button', EdgelessBpmnSeniorButton);
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-bpmn-menu': EdgelessBpmnMenu;
-    'edgeless-bpmn-senior-button': EdgelessBpmnSeniorButton;
-  }
-}
+import { EdgelessBpmnMenu } from './toolbar/bpmn-menu';
+import { EdgelessBpmnSeniorButton } from './toolbar/bpmn-senior-button';
+
+export function effects() {
+  customElements.define('edgeless-bpmn-menu', EdgelessBpmnMenu);
+  customElements.define('edgeless-bpmn-senior-button', EdgelessBpmnSeniorButton);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-bpmn-menu': EdgelessBpmnMenu;
+    'edgeless-bpmn-senior-button': EdgelessBpmnSeniorButton;
+  }
+}

package/src/element-renderer.ts

@@ -1,93 +1,93 @@
-import {
-  type ElementRenderer,
-  ElementRendererExtension,
-} from '@formicoidea/labre-core/blocks/surface';
-import type { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
-
-import {
-  POOL_BAND_FILL,
-  POOL_BAND_WIDTH,
-  POOL_FONT_FAMILY,
-  POOL_FRAME_COLOR,
-  POOL_FRAME_WIDTH,
-  POOL_NAME_COLOR,
-  POOL_NAME_FONT_SIZE,
-} from './consts';
-
-/** Trace a rounded-rectangle path (no dependency on ctx.roundRect). */
-function roundedRectPath(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  r: number
-): void {
-  const rr = Math.min(r, w / 2, h / 2);
-  ctx.beginPath();
-  ctx.moveTo(x + rr, y);
-  ctx.lineTo(x + w - rr, y);
-  ctx.arcTo(x + w, y, x + w, y + rr, rr);
-  ctx.lineTo(x + w, y + h - rr);
-  ctx.arcTo(x + w, y + h, x + w - rr, y + h, rr);
-  ctx.lineTo(x + rr, y + h);
-  ctx.arcTo(x, y + h, x, y + h - rr, rr);
-  ctx.lineTo(x, y + rr);
-  ctx.arcTo(x, y, x + rr, y, rr);
-  ctx.closePath();
-}
-
-/**
- * Canvas renderer for a BPMN pool: a rounded-rect frame with a vertical name
- * band on the left (the participant name is drawn rotated, as in the spec).
- * Drawn directly in element space; the band width and font are fixed so they
- * stay legible at any pool size. Mirrors the other framework backgrounds.
- */
-export const bpmnPool: ElementRenderer<BpmnPoolElementModel> = (
-  model,
-  ctx,
-  matrix
-) => {
-  const [, , w, h] = model.deserializedXYWH;
-  const cx = w / 2;
-  const cy = h / 2;
-  ctx.setTransform(
-    matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy)
-  );
-
-  const band = Math.min(POOL_BAND_WIDTH, w);
-  const inset = POOL_FRAME_WIDTH / 2;
-
-  // Name band (left), filled.
-  ctx.fillStyle = POOL_BAND_FILL;
-  ctx.fillRect(0, 0, band, h);
-
-  // Frame + band divider.
-  ctx.strokeStyle = POOL_FRAME_COLOR;
-  ctx.lineWidth = POOL_FRAME_WIDTH;
-  ctx.lineJoin = 'round';
-  roundedRectPath(ctx, inset, inset, w - POOL_FRAME_WIDTH, h - POOL_FRAME_WIDTH, 6);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.moveTo(band, 0);
-  ctx.lineTo(band, h);
-  ctx.stroke();
-
-  // Participant name, rotated to read up the band (skip when empty / too narrow).
-  if (model.name && band > 12) {
-    ctx.save();
-    ctx.translate(band / 2, h / 2);
-    ctx.rotate(-Math.PI / 2);
-    ctx.fillStyle = POOL_NAME_COLOR;
-    ctx.font = `600 ${POOL_NAME_FONT_SIZE}px ${POOL_FONT_FAMILY}`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(model.name, 0, 0);
-    ctx.restore();
-  }
-};
-
-export const BpmnPoolRendererExtension = ElementRendererExtension(
-  'bpmnPool',
-  bpmnPool
-);
+import {
+  type ElementRenderer,
+  ElementRendererExtension,
+} from '@formicoidea/labre-core/blocks/surface';
+import type { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
+
+import {
+  POOL_BAND_FILL,
+  POOL_BAND_WIDTH,
+  POOL_FONT_FAMILY,
+  POOL_FRAME_COLOR,
+  POOL_FRAME_WIDTH,
+  POOL_NAME_COLOR,
+  POOL_NAME_FONT_SIZE,
+} from './consts';
+
+/** Trace a rounded-rectangle path (no dependency on ctx.roundRect). */
+function roundedRectPath(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number
+): void {
+  const rr = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + rr, y);
+  ctx.lineTo(x + w - rr, y);
+  ctx.arcTo(x + w, y, x + w, y + rr, rr);
+  ctx.lineTo(x + w, y + h - rr);
+  ctx.arcTo(x + w, y + h, x + w - rr, y + h, rr);
+  ctx.lineTo(x + rr, y + h);
+  ctx.arcTo(x, y + h, x, y + h - rr, rr);
+  ctx.lineTo(x, y + rr);
+  ctx.arcTo(x, y, x + rr, y, rr);
+  ctx.closePath();
+}
+
+/**
+ * Canvas renderer for a BPMN pool: a rounded-rect frame with a vertical name
+ * band on the left (the participant name is drawn rotated, as in the spec).
+ * Drawn directly in element space; the band width and font are fixed so they
+ * stay legible at any pool size. Mirrors the other framework backgrounds.
+ */
+export const bpmnPool: ElementRenderer<BpmnPoolElementModel> = (
+  model,
+  ctx,
+  matrix
+) => {
+  const [, , w, h] = model.deserializedXYWH;
+  const cx = w / 2;
+  const cy = h / 2;
+  ctx.setTransform(
+    matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy)
+  );
+
+  const band = Math.min(POOL_BAND_WIDTH, w);
+  const inset = POOL_FRAME_WIDTH / 2;
+
+  // Name band (left), filled.
+  ctx.fillStyle = POOL_BAND_FILL;
+  ctx.fillRect(0, 0, band, h);
+
+  // Frame + band divider.
+  ctx.strokeStyle = POOL_FRAME_COLOR;
+  ctx.lineWidth = POOL_FRAME_WIDTH;
+  ctx.lineJoin = 'round';
+  roundedRectPath(ctx, inset, inset, w - POOL_FRAME_WIDTH, h - POOL_FRAME_WIDTH, 6);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(band, 0);
+  ctx.lineTo(band, h);
+  ctx.stroke();
+
+  // Participant name, rotated to read up the band (skip when empty / too narrow).
+  if (model.name && band > 12) {
+    ctx.save();
+    ctx.translate(band / 2, h / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.fillStyle = POOL_NAME_COLOR;
+    ctx.font = `600 ${POOL_NAME_FONT_SIZE}px ${POOL_FONT_FAMILY}`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(model.name, 0, 0);
+    ctx.restore();
+  }
+};
+
+export const BpmnPoolRendererExtension = ElementRendererExtension(
+  'bpmnPool',
+  bpmnPool
+);

package/src/element-view.ts

@@ -1,116 +1,116 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import type { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
-import type { PointerEventState } from '@formicoidea/labre-core/std';
-import {
-  GfxElementModelView,
-  GfxViewInteractionExtension,
-} from '@formicoidea/labre-core/std/gfx';
-
-/**
- * View for a BPMN pool. A double-click edits the participant name in place
- * (single field — the whole pool is the hit target). Mirrors the inline label
- * editor used by the EDGY / Wardley backgrounds.
- */
-export class BpmnPoolView extends GfxElementModelView<BpmnPoolElementModel> {
-  static override type: string = 'bpmnPool';
-
-  private _nameEditor: HTMLInputElement | null = null;
-
-  override onCreated(): void {
-    super.onCreated();
-    this.on('dblclick', e => this._onDblClick(e));
-  }
-
-  override onDestroyed(): void {
-    this._closeEditor();
-    super.onDestroyed();
-  }
-
-  private _onDblClick(e: PointerEventState): void {
-    if (this.model.isLocked()) return;
-    this._openEditor(e);
-  }
-
-  private _openEditor(e: PointerEventState): void {
-    this._closeEditor();
-
-    const input = document.createElement('input');
-    input.value = String(this.model.name ?? '');
-    Object.assign(input.style, {
-      position: 'fixed',
-      left: `${e.raw.clientX}px`,
-      top: `${e.raw.clientY}px`,
-      transform: 'translate(-50%, -50%)',
-      zIndex: '10000',
-      minWidth: '140px',
-      padding: '3px 8px',
-      font: '14px Inter, sans-serif',
-      color: 'var(--affine-text-primary-color, #1f2328)',
-      background: 'var(--affine-background-overlay-panel-color, #ffffff)',
-      border: '1px solid var(--affine-primary-color, #1e96eb)',
-      borderRadius: '6px',
-      boxShadow: 'var(--affine-shadow-2, 0 2px 8px rgba(0,0,0,0.18))',
-      outline: 'none',
-    });
-    document.body.append(input);
-    this._nameEditor = input;
-
-    // Mark "editing" so the global edgeless key handlers (delete, escape, …)
-    // don't act on the pool while the user types.
-    this.gfx.selection.set({ elements: [this.model.id], editing: true });
-
-    input.focus();
-    input.select();
-
-    const commit = () => {
-      if (this._nameEditor !== input) return;
-      const value = input.value;
-      this._closeEditor();
-      this.gfx.std.store.captureSync();
-      this.gfx.std
-        .get(EdgelessCRUDIdentifier)
-        .updateElement(this.model.id, { name: value });
-    };
-
-    input.addEventListener('keydown', ev => {
-      ev.stopPropagation();
-      if (ev.key === 'Enter') {
-        ev.preventDefault();
-        commit();
-      } else if (ev.key === 'Escape') {
-        ev.preventDefault();
-        this._closeEditor();
-      }
-    });
-    input.addEventListener('blur', commit);
-  }
-
-  private _closeEditor(): void {
-    if (!this._nameEditor) return;
-    const input = this._nameEditor;
-    this._nameEditor = null;
-    input.remove();
-    if (this.isConnected) {
-      this.gfx.selection.set({ elements: [this.model.id], editing: false });
-    }
-  }
-}
-
-/**
- * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
- * true (toggled from the toolbar). Moving / selecting stays available.
- */
-export const BpmnPoolInteraction = GfxViewInteractionExtension<BpmnPoolView>(
-  BpmnPoolView.type,
-  {
-    handleResize({ model }) {
-      return {
-        beforeResize({ set }) {
-          if (!model.resizeEnabled) {
-            set({ allowedHandlers: [] });
-          }
-        },
-      };
-    },
-  }
-);
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import type { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
+import type { PointerEventState } from '@formicoidea/labre-core/std';
+import {
+  GfxElementModelView,
+  GfxViewInteractionExtension,
+} from '@formicoidea/labre-core/std/gfx';
+
+/**
+ * View for a BPMN pool. A double-click edits the participant name in place
+ * (single field — the whole pool is the hit target). Mirrors the inline label
+ * editor used by the EDGY / Wardley backgrounds.
+ */
+export class BpmnPoolView extends GfxElementModelView<BpmnPoolElementModel> {
+  static override type: string = 'bpmnPool';
+
+  private _nameEditor: HTMLInputElement | null = null;
+
+  override onCreated(): void {
+    super.onCreated();
+    this.on('dblclick', e => this._onDblClick(e));
+  }
+
+  override onDestroyed(): void {
+    this._closeEditor();
+    super.onDestroyed();
+  }
+
+  private _onDblClick(e: PointerEventState): void {
+    if (this.model.isLocked()) return;
+    this._openEditor(e);
+  }
+
+  private _openEditor(e: PointerEventState): void {
+    this._closeEditor();
+
+    const input = document.createElement('input');
+    input.value = String(this.model.name ?? '');
+    Object.assign(input.style, {
+      position: 'fixed',
+      left: `${e.raw.clientX}px`,
+      top: `${e.raw.clientY}px`,
+      transform: 'translate(-50%, -50%)',
+      zIndex: '10000',
+      minWidth: '140px',
+      padding: '3px 8px',
+      font: '14px Inter, sans-serif',
+      color: 'var(--affine-text-primary-color, #1f2328)',
+      background: 'var(--affine-background-overlay-panel-color, #ffffff)',
+      border: '1px solid var(--affine-primary-color, #1e96eb)',
+      borderRadius: '6px',
+      boxShadow: 'var(--affine-shadow-2, 0 2px 8px rgba(0,0,0,0.18))',
+      outline: 'none',
+    });
+    document.body.append(input);
+    this._nameEditor = input;
+
+    // Mark "editing" so the global edgeless key handlers (delete, escape, …)
+    // don't act on the pool while the user types.
+    this.gfx.selection.set({ elements: [this.model.id], editing: true });
+
+    input.focus();
+    input.select();
+
+    const commit = () => {
+      if (this._nameEditor !== input) return;
+      const value = input.value;
+      this._closeEditor();
+      this.gfx.std.store.captureSync();
+      this.gfx.std
+        .get(EdgelessCRUDIdentifier)
+        .updateElement(this.model.id, { name: value });
+    };
+
+    input.addEventListener('keydown', ev => {
+      ev.stopPropagation();
+      if (ev.key === 'Enter') {
+        ev.preventDefault();
+        commit();
+      } else if (ev.key === 'Escape') {
+        ev.preventDefault();
+        this._closeEditor();
+      }
+    });
+    input.addEventListener('blur', commit);
+  }
+
+  private _closeEditor(): void {
+    if (!this._nameEditor) return;
+    const input = this._nameEditor;
+    this._nameEditor = null;
+    input.remove();
+    if (this.isConnected) {
+      this.gfx.selection.set({ elements: [this.model.id], editing: false });
+    }
+  }
+}
+
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true (toggled from the toolbar). Moving / selecting stays available.
+ */
+export const BpmnPoolInteraction = GfxViewInteractionExtension<BpmnPoolView>(
+  BpmnPoolView.type,
+  {
+    handleResize({ model }) {
+      return {
+        beforeResize({ set }) {
+          if (!model.resizeEnabled) {
+            set({ allowedHandlers: [] });
+          }
+        },
+      };
+    },
+  }
+);

package/src/index.ts

@@ -1 +1 @@
-export {};
+export {};