@formicoidea/labre-framework-bpmn 0.23.0 → 0.23.1

package/src/element-view.ts

@@ -1,116 +0,0 @@
-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 +0,0 @@
-export {};

package/src/node/node-renderer.ts

@@ -1,65 +0,0 @@
-import {
-  type ElementRenderer,
-  ElementRendererExtension,
-} from '@formicoidea/labre-core/blocks/surface';
-import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
-import { type BpmnNodeElementModel, DefaultTheme } from '@formicoidea/labre-core/model';
-
-/**
- * Renderer for a BPMN flow-object node. The shape body (ellipse / rounded rect
- * / diamond) is drawn by REUSING the native shape renderer — so stroke width,
- * colors, inner text and theme behave exactly like a native shape. Only
- * `gatewayExclusive` is decorated: an X drawn on top in the node's (editable)
- * stroke color. Events and task are plain native shapes.
- *
- * Mirrors the EDGY node renderer.
- */
-export const bpmnNode: ElementRenderer<BpmnNodeElementModel> = (
-  model,
-  ctx,
-  matrix,
-  renderer,
-  rc,
-  bound
-) => {
-  const [, , w, h] = model.deserializedXYWH;
-  const cx = w / 2;
-  const cy = h / 2;
-
-  // Capture the element-local transform BEFORE the shape renderer mutates the
-  // matrix, so the glyph can be drawn in the same space afterwards.
-  const glyphMatrix = DOMMatrix.fromMatrix(matrix)
-    .translateSelf(cx, cy)
-    .rotateSelf(model.rotate)
-    .translateSelf(-cx, -cy);
-
-  // Native shape (fill / stroke / inner text / theme handled natively).
-  shapeRenderer(model, ctx, matrix, renderer, rc, bound);
-
-  if (model.kind !== 'gatewayExclusive') return;
-
-  const color = renderer.getColorValue(
-    model.strokeColor,
-    DefaultTheme.shapeStrokeColor,
-    true
-  );
-
-  // ── Exclusive-gateway X, centred and sized to the diamond ───────────
-  const r = Math.min(w, h) * 0.2;
-  ctx.setTransform(glyphMatrix);
-  ctx.translate(cx, cy);
-  ctx.strokeStyle = color;
-  ctx.lineWidth = Math.max(2, Math.min(w, h) * 0.06);
-  ctx.lineCap = 'round';
-  ctx.beginPath();
-  ctx.moveTo(-r, -r);
-  ctx.lineTo(r, r);
-  ctx.moveTo(-r, r);
-  ctx.lineTo(r, -r);
-  ctx.stroke();
-};
-
-export const BpmnNodeRendererExtension = ElementRendererExtension(
-  'bpmnNode',
-  bpmnNode
-);

package/src/node/node-view.ts

@@ -1,34 +0,0 @@
-import { mountShapeTextEditor } from '@formicoidea/labre-core/gfx/shape';
-import {
-  type BpmnNodeElementModel,
-  ShapeElementModel,
-} from '@formicoidea/labre-core/model';
-import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
-
-/**
- * View for a BPMN flow-object node. Registering it ensures `gfx.view.get(model)`
- * returns a view (required so move / select / connector interactions work).
- *
- * BPMN nodes are native shapes, so we reuse the shape inner-text editor: a
- * double-click mounts the editable text overlay (`mountShapeTextEditor`),
- * exactly like a native shape (used to label the task).
- *
- * Mirrors {@link EdgyNodeView}.
- */
-export class BpmnNodeView extends GfxElementModelView<BpmnNodeElementModel> {
-  static override type: string = 'bpmnNode';
-
-  override onCreated(): void {
-    super.onCreated();
-    this.on('dblclick', () => {
-      const edgeless = this.std.view.getBlock(this.std.store.root!.id);
-      if (
-        edgeless &&
-        !this.model.isLocked() &&
-        this.model instanceof ShapeElementModel
-      ) {
-        mountShapeTextEditor(this.model, edgeless);
-      }
-    });
-  }
-}

package/src/templates/index.ts

@@ -1,156 +0,0 @@
-import {
-  makeTemplateSnapshot,
-  type SurfaceElementsJSON,
-  surfaceText,
-  type Template,
-  type TemplateCategory,
-} from '@formicoidea/labre-core/gfx/template';
-import {
-  ConnectorMode,
-  FontFamily,
-  PointStyle,
-  ShapeStyle,
-  StrokeStyle,
-} from '@formicoidea/labre-core/model';
-
-import {
-  END_WIDTH,
-  EVENT_END,
-  EVENT_START,
-  INNER_FONT_SIZE,
-  NEUTRAL_STROKE,
-  NODE_FILL,
-  NODE_SIZE,
-  NODE_STROKE_WIDTH,
-  SEQUENCE_STROKE,
-  SEQUENCE_WIDTH,
-  START_WIDTH,
-  TASK_RADIUS,
-} from '../consts';
-
-type NodeKind = 'startEvent' | 'endEvent' | 'task' | 'gatewayExclusive';
-
-/** One BPMN flow-object node, as a surface-element JSON entry. */
-function node(kind: NodeKind, x: number, y: number, text?: string) {
-  const { w, h } = NODE_SIZE[kind];
-  const base: Record<string, unknown> = {
-    type: 'bpmnNode',
-    kind,
-    filled: true,
-    fillColor: NODE_FILL,
-    shapeStyle: ShapeStyle.General,
-    roughness: 0,
-    xywh: `[${x},${y},${w},${h}]`,
-  };
-  if (kind === 'startEvent')
-    return { ...base, shapeType: 'ellipse', strokeColor: EVENT_START, strokeWidth: START_WIDTH };
-  if (kind === 'endEvent')
-    return { ...base, shapeType: 'ellipse', strokeColor: EVENT_END, strokeWidth: END_WIDTH };
-  if (kind === 'gatewayExclusive')
-    return { ...base, shapeType: 'diamond', strokeColor: NEUTRAL_STROKE, strokeWidth: NODE_STROKE_WIDTH };
-  return {
-    ...base,
-    shapeType: 'rect',
-    radius: TASK_RADIUS,
-    strokeColor: NEUTRAL_STROKE,
-    strokeWidth: NODE_STROKE_WIDTH,
-    text: surfaceText(text ?? 'Task'),
-    color: NEUTRAL_STROKE,
-    fontFamily: FontFamily.Inter,
-    fontSize: INNER_FONT_SIZE,
-    textAlign: 'center',
-  };
-}
-
-function pool(x: number, y: number, w: number, h: number, name = 'Pool') {
-  return { type: 'bpmnPool', name, xywh: `[${x},${y},${w},${h}]` };
-}
-
-/** A sequence-flow connector; ids are remapped on insert. */
-function seq(source: string, target: string) {
-  return {
-    type: 'connector',
-    mode: ConnectorMode.Orthogonal,
-    stroke: SEQUENCE_STROKE,
-    strokeWidth: SEQUENCE_WIDTH,
-    strokeStyle: StrokeStyle.Solid,
-    frontEndpointStyle: PointStyle.None,
-    rearEndpointStyle: PointStyle.Triangle,
-    source: { id: source, position: [0.5, 0.5] },
-    target: { id: target, position: [0.5, 0.5] },
-  };
-}
-
-/** A standalone (free) sequence-flow arrow for the prefab card. */
-function freeSeq(): Record<string, unknown> {
-  return {
-    type: 'connector',
-    mode: ConnectorMode.Orthogonal,
-    stroke: SEQUENCE_STROKE,
-    strokeWidth: SEQUENCE_WIDTH,
-    strokeStyle: StrokeStyle.Solid,
-    frontEndpointStyle: PointStyle.None,
-    rearEndpointStyle: PointStyle.Triangle,
-    source: { position: [0, 0] },
-    target: { position: [140, 0] },
-  };
-}
-
-const single = (el: Record<string, unknown>): SurfaceElementsJSON => ({ a: el });
-
-const PREVIEW_ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
-
-const previews = {
-  process: `<svg ${PREVIEW_ATTRS} fill="none"><circle cx="16" cy="40" r="8" stroke="#43a06b" stroke-width="2"/><rect x="34" y="31" width="26" height="18" rx="3" stroke="#262626" stroke-width="1.6"/><path d="M78 31 L88 40 L78 49 L68 40 Z" stroke="#262626" stroke-width="1.4"/><path d="M73 37 L83 43 M83 37 L73 43" stroke="#262626" stroke-width="1.2"/><circle cx="118" cy="40" r="8" stroke="#cf5648" stroke-width="3"/><path d="M24 40 H34 M60 40 H68 M88 40 H110" stroke="#262626" stroke-width="1.2"/></svg>`,
-  startEvent: `<svg ${PREVIEW_ATTRS} fill="none"><circle cx="67" cy="40" r="20" stroke="#43a06b" stroke-width="3"/></svg>`,
-  endEvent: `<svg ${PREVIEW_ATTRS} fill="none"><circle cx="67" cy="40" r="20" stroke="#cf5648" stroke-width="5"/></svg>`,
-  task: `<svg ${PREVIEW_ATTRS} fill="none"><rect x="34" y="24" width="66" height="32" rx="6" stroke="#262626" stroke-width="2.4"/></svg>`,
-  gateway: `<svg ${PREVIEW_ATTRS} fill="none"><path d="M67 16 L92 40 L67 64 L42 40 Z" stroke="#262626" stroke-width="2.4" stroke-linejoin="round"/><path d="M58 31 L76 49 M76 31 L58 49" stroke="#262626" stroke-width="2.2" stroke-linecap="round"/></svg>`,
-  sequence: `<svg ${PREVIEW_ATTRS} fill="none"><path d="M24 40 H96" stroke="#262626" stroke-width="2.4" stroke-linecap="round"/><path d="M94 33 L108 40 L94 47 Z" fill="#262626"/></svg>`,
-  pool: `<svg ${PREVIEW_ATTRS} fill="none"><rect x="14" y="20" width="107" height="40" rx="3" stroke="#262626" stroke-width="2"/><path d="M30 20 V60" stroke="#262626" stroke-width="1.8"/><rect x="14" y="20" width="16" height="40" fill="#f4f4f5"/><path d="M30 20 V60" stroke="#262626" stroke-width="1.8"/></svg>`,
-};
-
-/** The lean BPMN basics: a simple worked process + every prefab the menu makes. */
-function bpmnTemplates(): Template[] {
-  const process: SurfaceElementsJSON = {
-    pool: pool(0, 0, 640, 200, 'Process'),
-    start: node('startEvent', 40, 72),
-    task1: node('task', 116, 64, 'Submit request'),
-    gw: node('gatewayExclusive', 272, 64),
-    task2: node('task', 376, 20, 'Fulfil'),
-    task3: node('task', 376, 124, 'Reject'),
-    end: node('endEvent', 556, 72),
-    c1: seq('start', 'task1'),
-    c2: seq('task1', 'gw'),
-    c3: seq('gw', 'task2'),
-    c4: seq('gw', 'task3'),
-    c5: seq('task2', 'end'),
-    c6: seq('task3', 'end'),
-  };
-
-  const t = (
-    name: string,
-    preview: string,
-    elements: SurfaceElementsJSON
-  ): Template => ({
-    name,
-    type: 'template',
-    preview,
-    content: makeTemplateSnapshot(elements, name),
-  });
-
-  return [
-    t('Simple process', previews.process, process),
-    t('Start event', previews.startEvent, single(node('startEvent', 0, 0))),
-    t('End event', previews.endEvent, single(node('endEvent', 0, 0))),
-    t('Task', previews.task, single(node('task', 0, 0))),
-    t('Exclusive gateway', previews.gateway, single(node('gatewayExclusive', 0, 0))),
-    t('Sequence flow', previews.sequence, single(freeSeq())),
-    t('Pool', previews.pool, single(pool(0, 0, 560, 200))),
-  ];
-}
-
-export const bpmnTemplateCategory: TemplateCategory = {
-  name: 'BPMN',
-  templates: bpmnTemplates(),
-};

package/src/toolbar/bpmn-menu.ts

@@ -1,224 +0,0 @@
-import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
-import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
-import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import {
-  ConnectorMode,
-  FontFamily,
-  PointStyle,
-  ShapeStyle,
-  StrokeStyle,
-} from '@formicoidea/labre-core/model';
-import {
-  EditPropsStore,
-  TelemetryProvider,
-} from '@formicoidea/labre-core/shared/services';
-import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
-import { Bound } from '@formicoidea/labre-core/global/gfx';
-import { css, html, LitElement } from 'lit';
-
-import {
-  EVENT_END,
-  EVENT_START,
-  END_WIDTH,
-  INNER_FONT_SIZE,
-  NEUTRAL_STROKE,
-  NODE_FILL,
-  NODE_LABEL,
-  NODE_SIZE,
-  NODE_STROKE_WIDTH,
-  SEQUENCE_STROKE,
-  SEQUENCE_WIDTH,
-  START_WIDTH,
-  TASK_RADIUS,
-} from '../consts';
-import {
-  bpmnEndIcon,
-  bpmnGatewayIcon,
-  bpmnPoolIcon,
-  bpmnSequenceIcon,
-  bpmnStartIcon,
-  bpmnTaskIcon,
-} from './icons';
-
-type NodeKind = 'startEvent' | 'endEvent' | 'task' | 'gatewayExclusive';
-
-/** Per-kind native shape + accent presets (style C). */
-const NODE_PRESETS: Record<
-  NodeKind,
-  { shapeType: 'ellipse' | 'rect' | 'diamond'; stroke: string; width: number }
-> = {
-  startEvent: { shapeType: 'ellipse', stroke: EVENT_START, width: START_WIDTH },
-  endEvent: { shapeType: 'ellipse', stroke: EVENT_END, width: END_WIDTH },
-  task: { shapeType: 'rect', stroke: NEUTRAL_STROKE, width: NODE_STROKE_WIDTH },
-  gatewayExclusive: {
-    shapeType: 'diamond',
-    stroke: NEUTRAL_STROKE,
-    width: NODE_STROKE_WIDTH,
-  },
-};
-
-/**
- * The popover above the toolbar for the BPMN toolbox. Items create the flow
- * objects (native shapes, so they stay editable), the pool background, and arm
- * the native connector tool for sequence flows. Mirrors the EDGY menu.
- */
-export class EdgelessBpmnMenu extends EdgelessToolbarToolMixin(LitElement) {
-  static override styles = css`
-    :host {
-      position: absolute;
-      display: flex;
-      z-index: -1;
-    }
-    .menu-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .button-group-container {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      fill: var(--affine-icon-color);
-    }
-    .button-group-container svg {
-      width: 24px;
-      height: 24px;
-    }
-  `;
-
-  override type = EmptyTool;
-
-  /** Create a flow-object node (native shape) centred on the viewport. */
-  private _createNode(kind: NodeKind) {
-    const surface = this.gfx.surface;
-    if (!surface) return;
-
-    const { w, h } = NODE_SIZE[kind];
-    const { centerX: cx, centerY: cy } = this.gfx.viewport;
-    const preset = NODE_PRESETS[kind];
-
-    const id = surface.addElement({
-      type: 'bpmnNode',
-      kind,
-      shapeType: preset.shapeType,
-      filled: true,
-      fillColor: NODE_FILL,
-      strokeColor: preset.stroke,
-      strokeWidth: preset.width,
-      shapeStyle: ShapeStyle.General,
-      roughness: 0,
-      radius: kind === 'task' ? TASK_RADIUS : 0,
-      text: NODE_LABEL[kind] || undefined,
-      color: NEUTRAL_STROKE,
-      fontFamily: FontFamily.Inter,
-      fontSize: INNER_FONT_SIZE,
-      textAlign: 'center',
-      xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
-    });
-    this._track('FrameworkElementAdded', `node:${kind}`);
-    this._finish(id);
-  }
-
-  /** Create a pool (background container) centred on the viewport. */
-  private _createPool() {
-    const surface = this.gfx.surface;
-    if (!surface) return;
-
-    const w = 560;
-    const h = 200;
-    const { centerX: cx, centerY: cy } = this.gfx.viewport;
-    const id = surface.addElement({
-      type: 'bpmnPool',
-      xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
-    });
-    this._track('FrameworkElementAdded', 'pool');
-    this._finish(id);
-  }
-
-  /**
-   * Arm the native connector tool, pre-styled for a BPMN sequence flow:
-   * orthogonal, solid, with a filled triangle head. The user then draws from
-   * one node to another (endpoints attach to centers).
-   */
-  private _activateSequenceFlow() {
-    this.edgeless.std.get(EditPropsStore).recordLastProps('connector', {
-      mode: ConnectorMode.Orthogonal,
-      stroke: SEQUENCE_STROKE,
-      strokeStyle: StrokeStyle.Solid,
-      strokeWidth: SEQUENCE_WIDTH,
-      frontEndpointStyle: PointStyle.None,
-      rearEndpointStyle: PointStyle.Triangle,
-    });
-    this._track('FrameworkToolPicked', 'connector:sequence');
-    this.gfx.tool.setTool(ConnectorTool, { mode: ConnectorMode.Orthogonal });
-    // Keep the palette open (native sub-menu behaviour).
-  }
-
-  private _finish(id: string) {
-    const { gfx } = this;
-    gfx.doc.captureSync();
-    gfx.tool.setTool(DefaultTool);
-    gfx.selection.set({ elements: [id], editing: false });
-    // Keep the palette open (native sub-menu behaviour).
-  }
-
-  private _track(
-    event: 'FrameworkElementAdded' | 'FrameworkToolPicked',
-    element: string
-  ) {
-    this.edgeless.std.getOptional(TelemetryProvider)?.track(event, {
-      framework: 'bpmn',
-      element,
-      page: 'whiteboard editor',
-      segment: 'bpmn toolbox',
-      module: 'bpmn menu',
-    });
-  }
-
-  override render() {
-    return html`
-      <edgeless-slide-menu>
-        <div class="menu-content">
-          <div class="button-group-container">
-            <edgeless-tool-icon-button
-              .tooltip=${'Start event'}
-              @click=${() => this._createNode('startEvent')}
-            >
-              ${bpmnStartIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'End event'}
-              @click=${() => this._createNode('endEvent')}
-            >
-              ${bpmnEndIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Task'}
-              @click=${() => this._createNode('task')}
-            >
-              ${bpmnTaskIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Exclusive gateway'}
-              @click=${() => this._createNode('gatewayExclusive')}
-            >
-              ${bpmnGatewayIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Sequence flow'}
-              @click=${this._activateSequenceFlow}
-            >
-              ${bpmnSequenceIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Pool'}
-              @click=${this._createPool}
-            >
-              ${bpmnPoolIcon}
-            </edgeless-tool-icon-button>
-          </div>
-        </div>
-      </edgeless-slide-menu>
-    `;
-  }
-}

package/src/toolbar/config.ts

@@ -1,74 +0,0 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
-import {
-  type ToolbarContext,
-  type ToolbarModuleConfig,
-  ToolbarModuleExtension,
-} from '@formicoidea/labre-core/shared/services';
-import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
-import { html, type TemplateResult } from 'lit';
-
-const ResizeIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="1.6"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M9 5H5v4M15 19h4v-4" />
-  <path d="M5 5l6 6M19 19l-6-6" />
-</svg>`;
-
-type BpmnPoolToggleProp = 'resizeEnabled';
-
-/**
- * Build a toolbar toggle that flips a boolean flag on every selected pool:
- * `active` reflects the current state, `run` flips it (with an undo checkpoint).
- */
-function booleanToggle(
-  id: string,
-  tooltip: string,
-  icon: TemplateResult,
-  prop: BpmnPoolToggleProp
-) {
-  return {
-    id,
-    tooltip,
-    icon,
-    active(ctx: ToolbarContext) {
-      const models = ctx.getSurfaceModelsByType(BpmnPoolElementModel);
-      return models.length > 0 && models.every(model => model[prop]);
-    },
-    run(ctx: ToolbarContext) {
-      const models = ctx.getSurfaceModelsByType(BpmnPoolElementModel);
-      if (!models.length) return;
-
-      const enable = !models.every(model => model[prop]);
-      ctx.std.store.captureSync();
-      const crud = ctx.std.get(EdgelessCRUDIdentifier);
-      for (const model of models) {
-        crud.updateElement(model.id, { [prop]: enable });
-      }
-    },
-  };
-}
-
-export const bpmnPoolToolbarConfig = {
-  actions: [
-    booleanToggle(
-      'a.toggle-resize',
-      'Enable / lock resizing',
-      ResizeIcon,
-      'resizeEnabled'
-    ),
-  ],
-  when: ctx => ctx.getSurfaceModelsByType(BpmnPoolElementModel).length > 0,
-} as const satisfies ToolbarModuleConfig;
-
-export const bpmnPoolToolbarExtension = ToolbarModuleExtension({
-  id: BlockFlavourIdentifier('affine:surface:bpmnPool'),
-  config: bpmnPoolToolbarConfig,
-});