@formicoidea/labre-framework-bpmn 0.23.1 → 0.23.2

package/dist/toolbar/bpmn-menu.js

@@ -1,179 +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';
-/** Per-kind native shape + accent presets (style C). */
-const NODE_PRESETS = {
-    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) {
-    constructor() {
-        super(...arguments);
-        this.type = EmptyTool;
-    }
-    static { this.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;
-    }
-  `; }
-    /** Create a flow-object node (native shape) centred on the viewport. */
-    _createNode(kind) {
-        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. */
-    _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).
-     */
-    _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).
-    }
-    _finish(id) {
-        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).
-    }
-    _track(event, element) {
-        this.edgeless.std.getOptional(TelemetryProvider)?.track(event, {
-            framework: 'bpmn',
-            element,
-            page: 'whiteboard editor',
-            segment: 'bpmn toolbox',
-            module: 'bpmn menu',
-        });
-    }
-    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>
-    `;
-    }
-}
-//# sourceMappingURL=bpmn-menu.js.map

package/dist/toolbar/bpmn-senior-button.d.ts

@@ -1,16 +0,0 @@
-import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { LitElement } from 'lit';
-declare const EdgelessBpmnSeniorButton_base: typeof LitElement & import("@formicoidea/labre-core/global/utils").Constructor<import("@formicoidea/labre-core/widgets/edgeless-toolbar").EdgelessToolbarToolClass>;
-/**
- * Main toolbar button (colored BPMN glyph) that opens the BPMN toolbox sub-menu
- * above the toolbar. Mirrors the EDGY / Wardley senior buttons.
- */
-export declare class EdgelessBpmnSeniorButton extends EdgelessBpmnSeniorButton_base {
-    static styles: import("lit").CSSResult;
-    enableActiveBackground: boolean;
-    type: typeof EmptyTool;
-    private _toggleMenu;
-    render(): import("lit-html").TemplateResult<1>;
-}
-export {};
-//# sourceMappingURL=bpmn-senior-button.d.ts.map

package/dist/toolbar/config.d.ts

@@ -1,14 +0,0 @@
-import { type ToolbarContext } from '@formicoidea/labre-core/shared/services';
-import { type TemplateResult } from 'lit';
-export declare const bpmnPoolToolbarConfig: {
-    readonly actions: [{
-        id: string;
-        tooltip: string;
-        icon: TemplateResult;
-        active(ctx: ToolbarContext): boolean;
-        run(ctx: ToolbarContext): void;
-    }];
-    readonly when: (ctx: ToolbarContext) => boolean;
-};
-export declare const bpmnPoolToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
-//# sourceMappingURL=config.d.ts.map

package/dist/toolbar/config.js

@@ -1,55 +0,0 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
-import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
-import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
-import { html } 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>`;
-/**
- * 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, tooltip, icon, prop) {
-    return {
-        id,
-        tooltip,
-        icon,
-        active(ctx) {
-            const models = ctx.getSurfaceModelsByType(BpmnPoolElementModel);
-            return models.length > 0 && models.every(model => model[prop]);
-        },
-        run(ctx) {
-            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,
-};
-export const bpmnPoolToolbarExtension = ToolbarModuleExtension({
-    id: BlockFlavourIdentifier('affine:surface:bpmnPool'),
-    config: bpmnPoolToolbarConfig,
-});
-//# sourceMappingURL=config.js.map

package/dist/toolbar/icons.d.ts

@@ -1,16 +0,0 @@
-/** Colored BPMN glyph for the main toolbar button: a pool (green name band) with
- * a single activity inside. */
-export declare const bpmnToolbarIcon: import("lit-html").TemplateResult<2>;
-/** Start event — thin green ring. */
-export declare const bpmnStartIcon: import("lit-html").TemplateResult<2>;
-/** End event — thick red ring. */
-export declare const bpmnEndIcon: import("lit-html").TemplateResult<2>;
-/** Task — rounded rectangle. */
-export declare const bpmnTaskIcon: import("lit-html").TemplateResult<2>;
-/** Exclusive gateway — diamond with an X. */
-export declare const bpmnGatewayIcon: import("lit-html").TemplateResult<2>;
-/** Sequence flow — solid arrow with a filled head. */
-export declare const bpmnSequenceIcon: import("lit-html").TemplateResult<2>;
-/** Pool — rectangle with a left name band. */
-export declare const bpmnPoolIcon: import("lit-html").TemplateResult<2>;
-//# sourceMappingURL=icons.d.ts.map

package/dist/toolbar/senior-tool.d.ts

@@ -1,2 +0,0 @@
-export declare const bpmnSeniorTool: import("@formicoidea/labre-core/store").ExtensionType;
-//# sourceMappingURL=senior-tool.d.ts.map

package/dist/view.d.ts

@@ -1,7 +0,0 @@
-import { type ViewExtensionContext, ViewExtensionProvider } from '@formicoidea/labre-core/ext-loader';
-export declare class BpmnViewExtension extends ViewExtensionProvider {
-    name: string;
-    effect(): void;
-    setup(context: ViewExtensionContext): void;
-}
-//# sourceMappingURL=view.d.ts.map

package/dist/view.js

@@ -1,34 +0,0 @@
-import { 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 {
-    constructor() {
-        super(...arguments);
-        this.name = 'affine-bpmn-gfx';
-    }
-    effect() {
-        super.effect();
-        effects();
-        extendTemplateCategory(bpmnTemplateCategory);
-    }
-    setup(context) {
-        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);
-        }
-    }
-}
-//# sourceMappingURL=view.js.map