@formicoidea/labre-framework-bpmn 0.23.1 → 0.23.2

package/src/toolbar/bpmn-menu.ts

@@ -0,0 +1,224 @@
+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/{dist/toolbar/bpmn-senior-button.js → src/toolbar/bpmn-senior-button.ts}

@@ -1,97 +1,102 @@
-import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
-import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
-import { SignalWatcher } from '@formicoidea/labre-core/global/lit';
-import { css, html, LitElement } from 'lit';
-import { bpmnToolbarIcon } from './icons';
-/**
- * Main toolbar button (colored BPMN glyph) that opens the BPMN toolbox sub-menu
- * above the toolbar. Mirrors the EDGY / Wardley senior buttons.
- */
-export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(SignalWatcher(LitElement)) {
-    constructor() {
-        super(...arguments);
-        this.enableActiveBackground = true;
-        this.type = EmptyTool;
-    }
-    static { this.styles = css `
-    :host,
-    .bpmn-button {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    :host {
-      position: relative;
-    }
-    .bpmn-root {
-      width: 100%;
-      height: 64px;
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-    }
-    .bpmn-card {
-      --y: -4px;
-      --s: 1;
-      position: absolute;
-      bottom: 0;
-      width: 54px;
-      height: 54px;
-      transform: translateY(var(--y)) scale(var(--s));
-      translate: var(--active-x, 0) var(--active-y, 0);
-      rotate: var(--active-r, -2deg);
-      scale: var(--active-s, 1);
-      transition: transform 0.3s ease, translate 0.3s ease, rotate 0.3s ease,
-        scale 0.3s ease;
-    }
-    .bpmn-card svg {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    .bpmn-root:hover .bpmn-card {
-      --y: -10px;
-      --s: 1.07;
-    }
-  `; }
-    _toggleMenu() {
-        if (this.popper) {
-            this.popper.dispose();
-            this.popper = null;
-            return;
-        }
-        this.setEdgelessTool(DefaultTool);
-        const menu = this.createPopper('edgeless-bpmn-menu', this);
-        menu.element.edgeless = this.edgeless;
-        const el = menu.element;
-        const wrap = el.parentElement;
-        if (wrap) {
-            wrap.style.overflow = 'visible';
-            wrap.style.justifyContent = 'flex-end';
-        }
-        Object.assign(el.style, {
-            position: 'static',
-            width: 'max-content',
-            maxWidth: 'calc(100vw - 16px)',
-            marginLeft: '0',
-        });
-    }
-    render() {
-        return html `<edgeless-toolbar-button
-      class="bpmn-button"
-      .tooltip=${this.popper ? '' : 'BPMN'}
-      .tooltipOffset=${4}
-      .active=${!!this.popper}
-      @click=${this._toggleMenu}
-    >
-      <div class="bpmn-root">
-        <div class="bpmn-card">${bpmnToolbarIcon}</div>
-      </div>
-    </edgeless-toolbar-button>`;
-    }
-}
-//# sourceMappingURL=bpmn-senior-button.js.map
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { SignalWatcher } from '@formicoidea/labre-core/global/lit';
+import { css, html, LitElement } from 'lit';
+
+import { bpmnToolbarIcon } from './icons';
+
+/**
+ * Main toolbar button (colored BPMN glyph) that opens the BPMN toolbox sub-menu
+ * above the toolbar. Mirrors the EDGY / Wardley senior buttons.
+ */
+export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    :host,
+    .bpmn-button {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    :host {
+      position: relative;
+    }
+    .bpmn-root {
+      width: 100%;
+      height: 64px;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+    .bpmn-card {
+      --y: -4px;
+      --s: 1;
+      position: absolute;
+      bottom: 0;
+      width: 54px;
+      height: 54px;
+      transform: translateY(var(--y)) scale(var(--s));
+      translate: var(--active-x, 0) var(--active-y, 0);
+      rotate: var(--active-r, -2deg);
+      scale: var(--active-s, 1);
+      transition: transform 0.3s ease, translate 0.3s ease, rotate 0.3s ease,
+        scale 0.3s ease;
+    }
+    .bpmn-card svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .bpmn-root:hover .bpmn-card {
+      --y: -10px;
+      --s: 1.07;
+    }
+  `;
+
+  override enableActiveBackground = true;
+
+  override type = EmptyTool;
+
+  private _toggleMenu() {
+    if (this.popper) {
+      this.popper.dispose();
+      this.popper = null;
+      return;
+    }
+    this.setEdgelessTool(DefaultTool);
+    const menu = this.createPopper('edgeless-bpmn-menu', this);
+    menu.element.edgeless = this.edgeless;
+
+    const el = menu.element as HTMLElement;
+    const wrap = el.parentElement;
+    if (wrap) {
+      wrap.style.overflow = 'visible';
+      wrap.style.justifyContent = 'flex-end';
+    }
+    Object.assign(el.style, {
+      position: 'static',
+      width: 'max-content',
+      maxWidth: 'calc(100vw - 16px)',
+      marginLeft: '0',
+    });
+  }
+
+  override render() {
+    return html`<edgeless-toolbar-button
+      class="bpmn-button"
+      .tooltip=${this.popper ? '' : 'BPMN'}
+      .tooltipOffset=${4}
+      .active=${!!this.popper}
+      @click=${this._toggleMenu}
+    >
+      <div class="bpmn-root">
+        <div class="bpmn-card">${bpmnToolbarIcon}</div>
+      </div>
+    </edgeless-toolbar-button>`;
+  }
+}

package/src/toolbar/config.ts

@@ -0,0 +1,74 @@
+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,
+});

package/{dist/toolbar/icons.js → src/toolbar/icons.ts}

@@ -1,37 +1,43 @@
-import { svg } from 'lit';
-/** Colored BPMN glyph for the main toolbar button: a pool (green name band) with
- * a single activity inside. */
-export const bpmnToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="4" y="13" width="48" height="30" rx="3" fill="#ffffff" stroke="#262626" stroke-width="2.2"/>
-  <path d="M6 14 h5 v28 h-5 z" fill="#43a06b"/>
-  <line x1="11" y1="13" x2="11" y2="43" stroke="#262626" stroke-width="1.8"/>
-  <rect x="20" y="20" width="24" height="16" rx="3.5" fill="#ffffff" stroke="#262626" stroke-width="2.2"/>
-</svg>`;
-/** Start event — thin green ring. */
-export const bpmnStartIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="8" stroke="#43a06b" stroke-width="2"/>
-</svg>`;
-/** End event — thick red ring. */
-export const bpmnEndIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="8" stroke="#cf5648" stroke-width="3.5"/>
-</svg>`;
-/** Task — rounded rectangle. */
-export const bpmnTaskIcon = 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="6.5" width="17" height="11" rx="2.5" stroke="currentColor" stroke-width="1.6"/>
-</svg>`;
-/** Exclusive gateway — diamond with an X. */
-export const bpmnGatewayIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M12 3 L21 12 L12 21 L3 12 Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
-  <path d="M9 9 L15 15 M15 9 L9 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
-</svg>`;
-/** Sequence flow — solid arrow with a filled head. */
-export const bpmnSequenceIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3 12 H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
-  <path d="M15 8 L21 12 L15 16 Z" fill="currentColor"/>
-</svg>`;
-/** Pool — rectangle with a left name band. */
-export const bpmnPoolIcon = 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"/>
-</svg>`;
-//# sourceMappingURL=icons.js.map
+import { svg } from 'lit';
+
+/** Colored BPMN glyph for the main toolbar button: a pool (green name band) with
+ * a single activity inside. */
+export const bpmnToolbarIcon = svg`<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="13" width="48" height="30" rx="3" fill="#ffffff" stroke="#262626" stroke-width="2.2"/>
+  <path d="M6 14 h5 v28 h-5 z" fill="#43a06b"/>
+  <line x1="11" y1="13" x2="11" y2="43" stroke="#262626" stroke-width="1.8"/>
+  <rect x="20" y="20" width="24" height="16" rx="3.5" fill="#ffffff" stroke="#262626" stroke-width="2.2"/>
+</svg>`;
+
+/** Start event — thin green ring. */
+export const bpmnStartIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="8" stroke="#43a06b" stroke-width="2"/>
+</svg>`;
+
+/** End event — thick red ring. */
+export const bpmnEndIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="8" stroke="#cf5648" stroke-width="3.5"/>
+</svg>`;
+
+/** Task — rounded rectangle. */
+export const bpmnTaskIcon = 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="6.5" width="17" height="11" rx="2.5" stroke="currentColor" stroke-width="1.6"/>
+</svg>`;
+
+/** Exclusive gateway — diamond with an X. */
+export const bpmnGatewayIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 3 L21 12 L12 21 L3 12 Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+  <path d="M9 9 L15 15 M15 9 L9 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+</svg>`;
+
+/** Sequence flow — solid arrow with a filled head. */
+export const bpmnSequenceIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 12 H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  <path d="M15 8 L21 12 L15 16 Z" fill="currentColor"/>
+</svg>`;
+
+/** Pool — rectangle with a left name band. */
+export const bpmnPoolIcon = 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"/>
+</svg>`;

package/{dist/toolbar/senior-tool.js → src/toolbar/senior-tool.ts}

@@ -1,11 +1,11 @@
-import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
-import { html } from 'lit';
-export const bpmnSeniorTool = SeniorToolExtension('bpmn', ({ block }) => {
-    return {
-        name: 'BPMN',
-        content: html `<edgeless-bpmn-senior-button
-      .edgeless=${block}
-    ></edgeless-bpmn-senior-button>`,
-    };
-});
-//# sourceMappingURL=senior-tool.js.map
+import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { html } from 'lit';
+
+export const bpmnSeniorTool = SeniorToolExtension('bpmn', ({ block }) => {
+  return {
+    name: 'BPMN',
+    content: html`<edgeless-bpmn-senior-button
+      .edgeless=${block}
+    ></edgeless-bpmn-senior-button>`,
+  };
+});

package/src/view.ts

@@ -0,0 +1,37 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@formicoidea/labre-core/ext-loader';
+import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
+
+import { effects } from './effects';
+import { bpmnTemplateCategory } from './templates';
+import { BpmnPoolRendererExtension } from './element-renderer';
+import { BpmnPoolInteraction, BpmnPoolView } from './element-view';
+import { BpmnNodeRendererExtension } from './node/node-renderer';
+import { BpmnNodeView } from './node/node-view';
+import { bpmnPoolToolbarExtension } from './toolbar/config';
+import { bpmnSeniorTool } from './toolbar/senior-tool';
+
+export class BpmnViewExtension extends ViewExtensionProvider {
+  override name = 'affine-bpmn-gfx';
+
+  override effect(): void {
+    super.effect();
+    effects();
+    extendTemplateCategory(bpmnTemplateCategory);
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(BpmnPoolView);
+    context.register(BpmnPoolRendererExtension);
+    context.register(BpmnNodeView);
+    context.register(BpmnNodeRendererExtension);
+    if (this.isEdgeless(context.scope)) {
+      context.register(BpmnPoolInteraction);
+      context.register(bpmnSeniorTool);
+      context.register(bpmnPoolToolbarExtension);
+    }
+  }
+}