@formicoidea/labre-framework-bpmn 0.31.0 → 0.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/actions.d.ts +17 -0
- package/dist/actions.js +89 -0
- package/dist/commands.d.ts +4 -0
- package/dist/commands.js +76 -0
- package/dist/descriptor.d.ts +8 -3
- package/dist/descriptor.js +6 -3
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/toolbar/bpmn-menu.d.ts +6 -21
- package/dist/toolbar/bpmn-menu.js +6 -173
- package/dist/translations.d.ts +14 -0
- package/dist/translations.js +15 -0
- package/dist/view.d.ts +14 -0
- package/dist/view.js +31 -6
- package/package.json +2 -2
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { BlockStdScope } from '@formicoidea/labre-core/std';
|
|
2
|
+
/**
|
|
3
|
+
* Standalone creation/activation actions for the BPMN toolbox — lifted out of
|
|
4
|
+
* `toolbar/bpmn-menu.ts` by PF3 so the menu becomes a pure renderer over the
|
|
5
|
+
* command registry. Telemetry is emitted once, by `runCommand`.
|
|
6
|
+
*/
|
|
7
|
+
export type BpmnNodeKind = 'startEvent' | 'endEvent' | 'task' | 'gatewayExclusive';
|
|
8
|
+
/** Create a flow-object node (native shape) centred on the viewport. */
|
|
9
|
+
export declare function createBpmnNode(std: BlockStdScope, kind: BpmnNodeKind): void;
|
|
10
|
+
/** Create a pool (background container) centred on the viewport. */
|
|
11
|
+
export declare function createBpmnPool(std: BlockStdScope): void;
|
|
12
|
+
/**
|
|
13
|
+
* Arm the native connector tool, pre-styled for a BPMN sequence flow:
|
|
14
|
+
* orthogonal, solid, with a filled triangle head. The user then draws from
|
|
15
|
+
* one node to another (endpoints attach to centers).
|
|
16
|
+
*/
|
|
17
|
+
export declare function activateBpmnSequenceFlow(std: BlockStdScope): void;
|
package/dist/actions.js
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
|
|
2
|
+
import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
|
|
3
|
+
import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextFitMode, } from '@formicoidea/labre-core/model';
|
|
4
|
+
import { EditPropsStore } from '@formicoidea/labre-core/shared/services';
|
|
5
|
+
import { Bound } from '@formicoidea/labre-core/global/gfx';
|
|
6
|
+
import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
|
|
7
|
+
import { END_WIDTH, EVENT_END, EVENT_START, INNER_FONT_SIZE, NEUTRAL_STROKE, NODE_FILL, NODE_LABEL, NODE_SIZE, NODE_STROKE_WIDTH, SEQUENCE_STROKE, SEQUENCE_WIDTH, START_WIDTH, TASK_RADIUS, } from './consts.js';
|
|
8
|
+
/** Per-kind native shape + accent presets (style C). */
|
|
9
|
+
const NODE_PRESETS = {
|
|
10
|
+
startEvent: { shapeType: 'ellipse', stroke: EVENT_START, width: START_WIDTH },
|
|
11
|
+
endEvent: { shapeType: 'ellipse', stroke: EVENT_END, width: END_WIDTH },
|
|
12
|
+
task: { shapeType: 'rect', stroke: NEUTRAL_STROKE, width: NODE_STROKE_WIDTH },
|
|
13
|
+
gatewayExclusive: {
|
|
14
|
+
shapeType: 'diamond',
|
|
15
|
+
stroke: NEUTRAL_STROKE,
|
|
16
|
+
width: NODE_STROKE_WIDTH,
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
const gfxOf = (std) => std.get(GfxControllerIdentifier);
|
|
20
|
+
function finish(gfx, id) {
|
|
21
|
+
gfx.doc.captureSync();
|
|
22
|
+
gfx.tool.setTool(DefaultTool);
|
|
23
|
+
gfx.selection.set({ elements: [id], editing: false });
|
|
24
|
+
// Keep the palette open (native sub-menu behaviour).
|
|
25
|
+
}
|
|
26
|
+
/** Create a flow-object node (native shape) centred on the viewport. */
|
|
27
|
+
export function createBpmnNode(std, kind) {
|
|
28
|
+
const gfx = gfxOf(std);
|
|
29
|
+
const surface = gfx.surface;
|
|
30
|
+
if (!surface)
|
|
31
|
+
return;
|
|
32
|
+
const { w, h } = NODE_SIZE[kind];
|
|
33
|
+
const { centerX: cx, centerY: cy } = gfx.viewport;
|
|
34
|
+
const preset = NODE_PRESETS[kind];
|
|
35
|
+
const id = surface.addElement({
|
|
36
|
+
type: 'bpmnNode',
|
|
37
|
+
kind,
|
|
38
|
+
shapeType: preset.shapeType,
|
|
39
|
+
filled: true,
|
|
40
|
+
fillColor: NODE_FILL,
|
|
41
|
+
strokeColor: preset.stroke,
|
|
42
|
+
strokeWidth: preset.width,
|
|
43
|
+
shapeStyle: ShapeStyle.General,
|
|
44
|
+
roughness: 0,
|
|
45
|
+
radius: kind === 'task' ? TASK_RADIUS : 0,
|
|
46
|
+
text: NODE_LABEL[kind] || undefined,
|
|
47
|
+
color: NEUTRAL_STROKE,
|
|
48
|
+
fontFamily: FontFamily.Inter,
|
|
49
|
+
fontSize: INNER_FONT_SIZE,
|
|
50
|
+
textAlign: 'center',
|
|
51
|
+
// BPMN symbols have normative sizes: a long label overflows rather
|
|
52
|
+
// than deforming the node
|
|
53
|
+
textFitMode: TextFitMode.Overflow,
|
|
54
|
+
xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
|
|
55
|
+
});
|
|
56
|
+
finish(gfx, id);
|
|
57
|
+
}
|
|
58
|
+
/** Create a pool (background container) centred on the viewport. */
|
|
59
|
+
export function createBpmnPool(std) {
|
|
60
|
+
const gfx = gfxOf(std);
|
|
61
|
+
const surface = gfx.surface;
|
|
62
|
+
if (!surface)
|
|
63
|
+
return;
|
|
64
|
+
const w = 560;
|
|
65
|
+
const h = 200;
|
|
66
|
+
const { centerX: cx, centerY: cy } = gfx.viewport;
|
|
67
|
+
const id = surface.addElement({
|
|
68
|
+
type: 'bpmnPool',
|
|
69
|
+
xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
|
|
70
|
+
});
|
|
71
|
+
finish(gfx, id);
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Arm the native connector tool, pre-styled for a BPMN sequence flow:
|
|
75
|
+
* orthogonal, solid, with a filled triangle head. The user then draws from
|
|
76
|
+
* one node to another (endpoints attach to centers).
|
|
77
|
+
*/
|
|
78
|
+
export function activateBpmnSequenceFlow(std) {
|
|
79
|
+
std.get(EditPropsStore).recordLastProps('connector', {
|
|
80
|
+
mode: ConnectorMode.Orthogonal,
|
|
81
|
+
stroke: SEQUENCE_STROKE,
|
|
82
|
+
strokeStyle: StrokeStyle.Solid,
|
|
83
|
+
strokeWidth: SEQUENCE_WIDTH,
|
|
84
|
+
frontEndpointStyle: PointStyle.None,
|
|
85
|
+
rearEndpointStyle: PointStyle.Triangle,
|
|
86
|
+
});
|
|
87
|
+
gfxOf(std).tool.setTool(ConnectorTool, { mode: ConnectorMode.Orthogonal });
|
|
88
|
+
// Keep the palette open (native sub-menu behaviour).
|
|
89
|
+
}
|
package/dist/commands.js
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { activateBpmnSequenceFlow, createBpmnNode, createBpmnPool, } from './actions.js';
|
|
2
|
+
import { bpmnEndIcon, bpmnGatewayIcon, bpmnPoolIcon, bpmnSequenceIcon, bpmnStartIcon, bpmnTaskIcon, } from './toolbar/icons.js';
|
|
3
|
+
const SPECS = [
|
|
4
|
+
{
|
|
5
|
+
id: 'addStartEvent',
|
|
6
|
+
label: 'Start event',
|
|
7
|
+
iconKey: 'bpmn.start',
|
|
8
|
+
kind: 'artefact',
|
|
9
|
+
element: 'node:startEvent',
|
|
10
|
+
run: std => createBpmnNode(std, 'startEvent'),
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
id: 'addEndEvent',
|
|
14
|
+
label: 'End event',
|
|
15
|
+
iconKey: 'bpmn.end',
|
|
16
|
+
kind: 'artefact',
|
|
17
|
+
element: 'node:endEvent',
|
|
18
|
+
run: std => createBpmnNode(std, 'endEvent'),
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
id: 'addTask',
|
|
22
|
+
label: 'Task',
|
|
23
|
+
iconKey: 'bpmn.task',
|
|
24
|
+
kind: 'artefact',
|
|
25
|
+
element: 'node:task',
|
|
26
|
+
run: std => createBpmnNode(std, 'task'),
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
id: 'addExclusiveGateway',
|
|
30
|
+
label: 'Exclusive gateway',
|
|
31
|
+
iconKey: 'bpmn.gateway',
|
|
32
|
+
kind: 'artefact',
|
|
33
|
+
element: 'node:gatewayExclusive',
|
|
34
|
+
run: std => createBpmnNode(std, 'gatewayExclusive'),
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
id: 'sequenceFlowTool',
|
|
38
|
+
label: 'Sequence flow',
|
|
39
|
+
iconKey: 'bpmn.sequence',
|
|
40
|
+
kind: 'tool',
|
|
41
|
+
element: 'connector:sequence',
|
|
42
|
+
run: activateBpmnSequenceFlow,
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
id: 'addPool',
|
|
46
|
+
label: 'Pool',
|
|
47
|
+
iconKey: 'bpmn.pool',
|
|
48
|
+
kind: 'artefact',
|
|
49
|
+
element: 'pool',
|
|
50
|
+
run: createBpmnPool,
|
|
51
|
+
},
|
|
52
|
+
];
|
|
53
|
+
export const bpmnCommands = SPECS.map((spec, order) => ({
|
|
54
|
+
id: `bpmn.${spec.id}`,
|
|
55
|
+
owner: 'bpmn',
|
|
56
|
+
kind: spec.kind,
|
|
57
|
+
labelKey: `com.labre.commands.bpmn.${spec.id}`,
|
|
58
|
+
labelFallback: spec.label,
|
|
59
|
+
category: 'flow',
|
|
60
|
+
iconKey: spec.iconKey,
|
|
61
|
+
surfaces: ['senior-menu', 'catalogue', 'palette', 'agent'],
|
|
62
|
+
order,
|
|
63
|
+
scope: 'edgeless',
|
|
64
|
+
defaultKeys: { mac: [], other: [] },
|
|
65
|
+
availability: 'always',
|
|
66
|
+
run: spec.run,
|
|
67
|
+
telemetry: { framework: 'bpmn', element: spec.element },
|
|
68
|
+
}));
|
|
69
|
+
export const bpmnCommandIcons = {
|
|
70
|
+
'bpmn.start': bpmnStartIcon,
|
|
71
|
+
'bpmn.end': bpmnEndIcon,
|
|
72
|
+
'bpmn.task': bpmnTaskIcon,
|
|
73
|
+
'bpmn.gateway': bpmnGatewayIcon,
|
|
74
|
+
'bpmn.sequence': bpmnSequenceIcon,
|
|
75
|
+
'bpmn.pool': bpmnPoolIcon,
|
|
76
|
+
};
|
package/dist/descriptor.d.ts
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
import { BpmnViewExtension } from './view.js';
|
|
1
|
+
import { BpmnRenderViewExtension, BpmnViewExtension } from './view.js';
|
|
2
2
|
/** Host wiring for the bpmn framework. */
|
|
3
3
|
export declare const bpmnFramework: {
|
|
4
4
|
readonly flag: "bpmn";
|
|
5
|
-
readonly
|
|
6
|
-
readonly
|
|
5
|
+
readonly telemetryKey: "bpmn";
|
|
6
|
+
readonly extensions: readonly [{
|
|
7
|
+
readonly viewExtension: typeof BpmnRenderViewExtension;
|
|
8
|
+
}, {
|
|
9
|
+
readonly flag: "bpmn";
|
|
10
|
+
readonly viewExtension: typeof BpmnViewExtension;
|
|
11
|
+
}];
|
|
7
12
|
};
|
package/dist/descriptor.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import { BpmnViewExtension } from './view.js';
|
|
1
|
+
import { BpmnRenderViewExtension, BpmnViewExtension } from './view.js';
|
|
2
2
|
/** Host wiring for the bpmn framework. */
|
|
3
3
|
export const bpmnFramework = {
|
|
4
4
|
flag: 'bpmn',
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
telemetryKey: 'bpmn',
|
|
6
|
+
extensions: [
|
|
7
|
+
{ viewExtension: BpmnRenderViewExtension },
|
|
8
|
+
{ flag: 'bpmn', viewExtension: BpmnViewExtension },
|
|
9
|
+
],
|
|
7
10
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export { bpmnCommandIcons, bpmnCommands } from './commands.js';
|
|
2
|
+
export { bpmnTranslationEntries } from './translations.js';
|
package/dist/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export { bpmnCommandIcons, bpmnCommands } from './commands.js';
|
|
2
|
+
export { bpmnTranslationEntries } from './translations.js';
|
|
@@ -1,26 +1,11 @@
|
|
|
1
1
|
import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
|
|
2
|
-
import {
|
|
3
|
-
declare const EdgelessBpmnMenu_base: typeof LitElement & import("@formicoidea/labre-core/_pkgs/global/utils").Constructor<import("@formicoidea/labre-core/_pkgs/affine-widget-edgeless-toolbar").EdgelessToolbarToolClass>;
|
|
2
|
+
import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
|
|
4
3
|
/**
|
|
5
|
-
* The popover above the toolbar for the BPMN toolbox.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* The popover above the toolbar for the BPMN toolbox. Since PF3 it declares
|
|
5
|
+
* nothing: {@link EdgelessCommandMenu} renders `bpmnCommands` for the
|
|
6
|
+
* `senior-menu` surface (`docs/adr/0008`).
|
|
8
7
|
*/
|
|
9
|
-
export declare class EdgelessBpmnMenu extends
|
|
10
|
-
|
|
8
|
+
export declare class EdgelessBpmnMenu extends EdgelessCommandMenu {
|
|
9
|
+
protected owner: "bpmn";
|
|
11
10
|
type: typeof EmptyTool;
|
|
12
|
-
/** Create a flow-object node (native shape) centred on the viewport. */
|
|
13
|
-
private _createNode;
|
|
14
|
-
/** Create a pool (background container) centred on the viewport. */
|
|
15
|
-
private _createPool;
|
|
16
|
-
/**
|
|
17
|
-
* Arm the native connector tool, pre-styled for a BPMN sequence flow:
|
|
18
|
-
* orthogonal, solid, with a filled triangle head. The user then draws from
|
|
19
|
-
* one node to another (endpoints attach to centers).
|
|
20
|
-
*/
|
|
21
|
-
private _activateSequenceFlow;
|
|
22
|
-
private _finish;
|
|
23
|
-
private _track;
|
|
24
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
25
11
|
}
|
|
26
|
-
export {};
|
|
@@ -1,181 +1,14 @@
|
|
|
1
|
-
import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
|
|
2
|
-
import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
|
|
3
1
|
import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
|
|
4
|
-
import {
|
|
5
|
-
import { EditPropsStore, TelemetryProvider, } from '@formicoidea/labre-core/shared/services';
|
|
6
|
-
import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
|
|
7
|
-
import { Bound } from '@formicoidea/labre-core/global/gfx';
|
|
8
|
-
import { css, html, LitElement } from 'lit';
|
|
9
|
-
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.js';
|
|
10
|
-
import { bpmnEndIcon, bpmnGatewayIcon, bpmnPoolIcon, bpmnSequenceIcon, bpmnStartIcon, bpmnTaskIcon, } from './icons.js';
|
|
11
|
-
/** Per-kind native shape + accent presets (style C). */
|
|
12
|
-
const NODE_PRESETS = {
|
|
13
|
-
startEvent: { shapeType: 'ellipse', stroke: EVENT_START, width: START_WIDTH },
|
|
14
|
-
endEvent: { shapeType: 'ellipse', stroke: EVENT_END, width: END_WIDTH },
|
|
15
|
-
task: { shapeType: 'rect', stroke: NEUTRAL_STROKE, width: NODE_STROKE_WIDTH },
|
|
16
|
-
gatewayExclusive: {
|
|
17
|
-
shapeType: 'diamond',
|
|
18
|
-
stroke: NEUTRAL_STROKE,
|
|
19
|
-
width: NODE_STROKE_WIDTH,
|
|
20
|
-
},
|
|
21
|
-
};
|
|
2
|
+
import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
|
|
22
3
|
/**
|
|
23
|
-
* The popover above the toolbar for the BPMN toolbox.
|
|
24
|
-
*
|
|
25
|
-
*
|
|
4
|
+
* The popover above the toolbar for the BPMN toolbox. Since PF3 it declares
|
|
5
|
+
* nothing: {@link EdgelessCommandMenu} renders `bpmnCommands` for the
|
|
6
|
+
* `senior-menu` surface (`docs/adr/0008`).
|
|
26
7
|
*/
|
|
27
|
-
export class EdgelessBpmnMenu extends
|
|
8
|
+
export class EdgelessBpmnMenu extends EdgelessCommandMenu {
|
|
28
9
|
constructor() {
|
|
29
10
|
super(...arguments);
|
|
11
|
+
this.owner = 'bpmn';
|
|
30
12
|
this.type = EmptyTool;
|
|
31
13
|
}
|
|
32
|
-
static { this.styles = css `
|
|
33
|
-
:host {
|
|
34
|
-
display: flex;
|
|
35
|
-
z-index: -1;
|
|
36
|
-
justify-content: center;
|
|
37
|
-
}
|
|
38
|
-
.menu-content {
|
|
39
|
-
display: flex;
|
|
40
|
-
align-items: center;
|
|
41
|
-
justify-content: center;
|
|
42
|
-
}
|
|
43
|
-
.button-group-container {
|
|
44
|
-
display: flex;
|
|
45
|
-
align-items: center;
|
|
46
|
-
gap: 14px;
|
|
47
|
-
fill: var(--affine-icon-color);
|
|
48
|
-
}
|
|
49
|
-
.button-group-container svg {
|
|
50
|
-
width: 24px;
|
|
51
|
-
height: 24px;
|
|
52
|
-
}
|
|
53
|
-
`; }
|
|
54
|
-
/** Create a flow-object node (native shape) centred on the viewport. */
|
|
55
|
-
_createNode(kind) {
|
|
56
|
-
const surface = this.gfx.surface;
|
|
57
|
-
if (!surface)
|
|
58
|
-
return;
|
|
59
|
-
const { w, h } = NODE_SIZE[kind];
|
|
60
|
-
const { centerX: cx, centerY: cy } = this.gfx.viewport;
|
|
61
|
-
const preset = NODE_PRESETS[kind];
|
|
62
|
-
const id = surface.addElement({
|
|
63
|
-
type: 'bpmnNode',
|
|
64
|
-
kind,
|
|
65
|
-
shapeType: preset.shapeType,
|
|
66
|
-
filled: true,
|
|
67
|
-
fillColor: NODE_FILL,
|
|
68
|
-
strokeColor: preset.stroke,
|
|
69
|
-
strokeWidth: preset.width,
|
|
70
|
-
shapeStyle: ShapeStyle.General,
|
|
71
|
-
roughness: 0,
|
|
72
|
-
radius: kind === 'task' ? TASK_RADIUS : 0,
|
|
73
|
-
text: NODE_LABEL[kind] || undefined,
|
|
74
|
-
color: NEUTRAL_STROKE,
|
|
75
|
-
fontFamily: FontFamily.Inter,
|
|
76
|
-
fontSize: INNER_FONT_SIZE,
|
|
77
|
-
textAlign: 'center',
|
|
78
|
-
// BPMN symbols have normative sizes: a long label overflows rather
|
|
79
|
-
// than deforming the node
|
|
80
|
-
textFitMode: TextFitMode.Overflow,
|
|
81
|
-
xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
|
|
82
|
-
});
|
|
83
|
-
this._track('FrameworkElementAdded', `node:${kind}`);
|
|
84
|
-
this._finish(id);
|
|
85
|
-
}
|
|
86
|
-
/** Create a pool (background container) centred on the viewport. */
|
|
87
|
-
_createPool() {
|
|
88
|
-
const surface = this.gfx.surface;
|
|
89
|
-
if (!surface)
|
|
90
|
-
return;
|
|
91
|
-
const w = 560;
|
|
92
|
-
const h = 200;
|
|
93
|
-
const { centerX: cx, centerY: cy } = this.gfx.viewport;
|
|
94
|
-
const id = surface.addElement({
|
|
95
|
-
type: 'bpmnPool',
|
|
96
|
-
xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
|
|
97
|
-
});
|
|
98
|
-
this._track('FrameworkElementAdded', 'pool');
|
|
99
|
-
this._finish(id);
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Arm the native connector tool, pre-styled for a BPMN sequence flow:
|
|
103
|
-
* orthogonal, solid, with a filled triangle head. The user then draws from
|
|
104
|
-
* one node to another (endpoints attach to centers).
|
|
105
|
-
*/
|
|
106
|
-
_activateSequenceFlow() {
|
|
107
|
-
this.edgeless.std.get(EditPropsStore).recordLastProps('connector', {
|
|
108
|
-
mode: ConnectorMode.Orthogonal,
|
|
109
|
-
stroke: SEQUENCE_STROKE,
|
|
110
|
-
strokeStyle: StrokeStyle.Solid,
|
|
111
|
-
strokeWidth: SEQUENCE_WIDTH,
|
|
112
|
-
frontEndpointStyle: PointStyle.None,
|
|
113
|
-
rearEndpointStyle: PointStyle.Triangle,
|
|
114
|
-
});
|
|
115
|
-
this._track('FrameworkToolPicked', 'connector:sequence');
|
|
116
|
-
this.gfx.tool.setTool(ConnectorTool, { mode: ConnectorMode.Orthogonal });
|
|
117
|
-
// Keep the palette open (native sub-menu behaviour).
|
|
118
|
-
}
|
|
119
|
-
_finish(id) {
|
|
120
|
-
const { gfx } = this;
|
|
121
|
-
gfx.doc.captureSync();
|
|
122
|
-
gfx.tool.setTool(DefaultTool);
|
|
123
|
-
gfx.selection.set({ elements: [id], editing: false });
|
|
124
|
-
// Keep the palette open (native sub-menu behaviour).
|
|
125
|
-
}
|
|
126
|
-
_track(event, element) {
|
|
127
|
-
this.edgeless.std.getOptional(TelemetryProvider)?.track(event, {
|
|
128
|
-
framework: 'bpmn',
|
|
129
|
-
element,
|
|
130
|
-
page: 'whiteboard editor',
|
|
131
|
-
segment: 'bpmn toolbox',
|
|
132
|
-
module: 'bpmn menu',
|
|
133
|
-
});
|
|
134
|
-
}
|
|
135
|
-
render() {
|
|
136
|
-
return html `
|
|
137
|
-
<edgeless-slide-menu>
|
|
138
|
-
<div class="menu-content">
|
|
139
|
-
<div class="button-group-container">
|
|
140
|
-
<edgeless-tool-icon-button
|
|
141
|
-
.tooltip=${'Start event'}
|
|
142
|
-
@click=${() => this._createNode('startEvent')}
|
|
143
|
-
>
|
|
144
|
-
${bpmnStartIcon}
|
|
145
|
-
</edgeless-tool-icon-button>
|
|
146
|
-
<edgeless-tool-icon-button
|
|
147
|
-
.tooltip=${'End event'}
|
|
148
|
-
@click=${() => this._createNode('endEvent')}
|
|
149
|
-
>
|
|
150
|
-
${bpmnEndIcon}
|
|
151
|
-
</edgeless-tool-icon-button>
|
|
152
|
-
<edgeless-tool-icon-button
|
|
153
|
-
.tooltip=${'Task'}
|
|
154
|
-
@click=${() => this._createNode('task')}
|
|
155
|
-
>
|
|
156
|
-
${bpmnTaskIcon}
|
|
157
|
-
</edgeless-tool-icon-button>
|
|
158
|
-
<edgeless-tool-icon-button
|
|
159
|
-
.tooltip=${'Exclusive gateway'}
|
|
160
|
-
@click=${() => this._createNode('gatewayExclusive')}
|
|
161
|
-
>
|
|
162
|
-
${bpmnGatewayIcon}
|
|
163
|
-
</edgeless-tool-icon-button>
|
|
164
|
-
<edgeless-tool-icon-button
|
|
165
|
-
.tooltip=${'Sequence flow'}
|
|
166
|
-
@click=${this._activateSequenceFlow}
|
|
167
|
-
>
|
|
168
|
-
${bpmnSequenceIcon}
|
|
169
|
-
</edgeless-tool-icon-button>
|
|
170
|
-
<edgeless-tool-icon-button
|
|
171
|
-
.tooltip=${'Pool'}
|
|
172
|
-
@click=${this._createPool}
|
|
173
|
-
>
|
|
174
|
-
${bpmnPoolIcon}
|
|
175
|
-
</edgeless-tool-icon-button>
|
|
176
|
-
</div>
|
|
177
|
-
</div>
|
|
178
|
-
</edgeless-slide-menu>
|
|
179
|
-
`;
|
|
180
|
-
}
|
|
181
14
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type TranslationKeyManifestEntry } from '@formicoidea/labre-core/std';
|
|
2
|
+
/**
|
|
3
|
+
* THIS framework's contribution to the translation-key manifest.
|
|
4
|
+
*
|
|
5
|
+
* Its command labels and descriptions are built from a TEMPLATE, so the
|
|
6
|
+
* concrete keys exist nowhere but in the declarations themselves and the
|
|
7
|
+
* core manifest could not restate them even if it wanted to. The
|
|
8
|
+
* contribution therefore ships WITH the framework: in the bundled
|
|
9
|
+
* distribution `@formicoidea/labre-framework-bpmn` carries it, and a host
|
|
10
|
+
* composes it into its catalogue exactly as it already composes
|
|
11
|
+
* `bpmnCommands` into the command registry. See
|
|
12
|
+
* `packages/affine/all/src/translations.ts`.
|
|
13
|
+
*/
|
|
14
|
+
export declare const bpmnTranslationEntries: TranslationKeyManifestEntry[];
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { commandTranslationEntries, } from '@formicoidea/labre-core/std';
|
|
2
|
+
import { bpmnCommands } from './commands.js';
|
|
3
|
+
/**
|
|
4
|
+
* THIS framework's contribution to the translation-key manifest.
|
|
5
|
+
*
|
|
6
|
+
* Its command labels and descriptions are built from a TEMPLATE, so the
|
|
7
|
+
* concrete keys exist nowhere but in the declarations themselves and the
|
|
8
|
+
* core manifest could not restate them even if it wanted to. The
|
|
9
|
+
* contribution therefore ships WITH the framework: in the bundled
|
|
10
|
+
* distribution `@formicoidea/labre-framework-bpmn` carries it, and a host
|
|
11
|
+
* composes it into its catalogue exactly as it already composes
|
|
12
|
+
* `bpmnCommands` into the command registry. See
|
|
13
|
+
* `packages/affine/all/src/translations.ts`.
|
|
14
|
+
*/
|
|
15
|
+
export const bpmnTranslationEntries = commandTranslationEntries(bpmnCommands);
|
package/dist/view.d.ts
CHANGED
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
import { type ViewExtensionContext, ViewExtensionProvider } from '@formicoidea/labre-core/ext-loader';
|
|
2
|
+
/**
|
|
3
|
+
* BPMN rendering — ALWAYS registered, independent of any flag. Disabling `bpmn`
|
|
4
|
+
* hides only the creation tooling (see {@link BpmnViewExtension}); pools and
|
|
5
|
+
* nodes already drawn must still paint, stay selectable, stay editable and keep
|
|
6
|
+
* their contextual toolbar. See `docs/adr/0009`.
|
|
7
|
+
*/
|
|
8
|
+
export declare class BpmnRenderViewExtension extends ViewExtensionProvider {
|
|
9
|
+
name: string;
|
|
10
|
+
setup(context: ViewExtensionContext): void;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* BPMN creation tooling — flag-gated (`bpmn`): the senior toolbar button and
|
|
14
|
+
* its templates category.
|
|
15
|
+
*/
|
|
2
16
|
export declare class BpmnViewExtension extends ViewExtensionProvider {
|
|
3
17
|
name: string;
|
|
4
18
|
effect(): void;
|
package/dist/view.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { ViewExtensionProvider, } from '@formicoidea/labre-core/ext-loader';
|
|
2
2
|
import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
|
|
3
|
+
import { CommandExtension } from '@formicoidea/labre-core/std';
|
|
4
|
+
import { bpmnCommandIcons, bpmnCommands } from './commands.js';
|
|
3
5
|
import { effects } from './effects.js';
|
|
4
6
|
import { bpmnTemplateCategory } from './templates/index.js';
|
|
5
7
|
import { BpmnPoolRendererExtension } from './element-renderer.js';
|
|
@@ -8,6 +10,33 @@ import { BpmnNodeRendererExtension } from './node/node-renderer.js';
|
|
|
8
10
|
import { BpmnNodeView } from './node/node-view.js';
|
|
9
11
|
import { bpmnPoolToolbarExtension } from './toolbar/config.js';
|
|
10
12
|
import { bpmnSeniorTool } from './toolbar/senior-tool.js';
|
|
13
|
+
/**
|
|
14
|
+
* BPMN rendering — ALWAYS registered, independent of any flag. Disabling `bpmn`
|
|
15
|
+
* hides only the creation tooling (see {@link BpmnViewExtension}); pools and
|
|
16
|
+
* nodes already drawn must still paint, stay selectable, stay editable and keep
|
|
17
|
+
* their contextual toolbar. See `docs/adr/0009`.
|
|
18
|
+
*/
|
|
19
|
+
export class BpmnRenderViewExtension extends ViewExtensionProvider {
|
|
20
|
+
constructor() {
|
|
21
|
+
super(...arguments);
|
|
22
|
+
this.name = 'affine-bpmn-render-gfx';
|
|
23
|
+
}
|
|
24
|
+
setup(context) {
|
|
25
|
+
super.setup(context);
|
|
26
|
+
context.register(BpmnPoolView);
|
|
27
|
+
context.register(BpmnPoolRendererExtension);
|
|
28
|
+
context.register(BpmnNodeView);
|
|
29
|
+
context.register(BpmnNodeRendererExtension);
|
|
30
|
+
if (this.isEdgeless(context.scope)) {
|
|
31
|
+
context.register(BpmnPoolInteraction);
|
|
32
|
+
context.register(bpmnPoolToolbarExtension);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* BPMN creation tooling — flag-gated (`bpmn`): the senior toolbar button and
|
|
38
|
+
* its templates category.
|
|
39
|
+
*/
|
|
11
40
|
export class BpmnViewExtension extends ViewExtensionProvider {
|
|
12
41
|
constructor() {
|
|
13
42
|
super(...arguments);
|
|
@@ -15,19 +44,15 @@ export class BpmnViewExtension extends ViewExtensionProvider {
|
|
|
15
44
|
}
|
|
16
45
|
effect() {
|
|
17
46
|
super.effect();
|
|
47
|
+
// Defines the senior button and its menu — tooling-only custom elements.
|
|
18
48
|
effects();
|
|
19
49
|
extendTemplateCategory(bpmnTemplateCategory);
|
|
20
50
|
}
|
|
21
51
|
setup(context) {
|
|
22
52
|
super.setup(context);
|
|
23
|
-
context.register(BpmnPoolView);
|
|
24
|
-
context.register(BpmnPoolRendererExtension);
|
|
25
|
-
context.register(BpmnNodeView);
|
|
26
|
-
context.register(BpmnNodeRendererExtension);
|
|
27
53
|
if (this.isEdgeless(context.scope)) {
|
|
28
|
-
context.register(BpmnPoolInteraction);
|
|
29
54
|
context.register(bpmnSeniorTool);
|
|
30
|
-
context.register(
|
|
55
|
+
context.register(CommandExtension(bpmnCommands, bpmnCommandIcons));
|
|
31
56
|
}
|
|
32
57
|
}
|
|
33
58
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formicoidea/labre-framework-bpmn",
|
|
3
3
|
"description": "Labre bpmn framework for @formicoidea/labre-core.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.32.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"author": "lajola",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"dist"
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@formicoidea/labre-core": "0.
|
|
30
|
+
"@formicoidea/labre-core": "0.32.0",
|
|
31
31
|
"lit": "^3.2.0"
|
|
32
32
|
}
|
|
33
33
|
}
|