Skip to content

Commit 8e45cad

Browse files
peterhnmpeterhnm
authored
feat: add custom UI for append anything menu (#879)
1 parent f88f63b commit 8e45cad

38 files changed

+2839
-9
lines changed

‎.github/workflows/release-create-append-c7.yml‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
name: Release create-append-c7-element-templates
2+
3+
on:
4+
workflow_dispatch:
5+
inputs:
6+
release-type:
7+
description: 'Release type'
8+
required: true
9+
type: choice
10+
options:
11+
- patch
12+
- minor
13+
- major
14+
dry-run:
15+
description: 'Dry run (no commit, tag, or publish)'
16+
required: false
17+
type: boolean
18+
default: false
19+
20+
permissions:
21+
contents: write
22+
23+
concurrency:
24+
group: create-append-c7-release
25+
cancel-in-progress: false
26+
27+
jobs:
28+
release:
29+
name: Release
30+
runs-on: ubuntu-latest
31+
32+
steps:
33+
- name: Checkout
34+
uses: actions/checkout@v6
35+
with:
36+
fetch-depth: 0
37+
persist-credentials: false
38+
token: ${{ secrets.RELEASE_PAT }}
39+
40+
- name: Corepack enable
41+
run: corepack enable
42+
43+
- name: Setup Node 20
44+
uses: actions/setup-node@v6
45+
with:
46+
node-version: '20'
47+
cache: yarn
48+
registry-url: 'https://registry.npmjs.org'
49+
50+
- name: Install dependencies
51+
run: yarn install --immutable
52+
53+
- name: Configure Git
54+
run: |
55+
git config user.name "github-actions[bot]"
56+
git config user.email "github-actions[bot]@users.noreply.github.com"
57+
git remote set-url origin "https://x-access-token:${{ secrets.RELEASE_PAT }}@github.com/${{ github.repository }}"
58+
59+
- name: Bump version
60+
id: version
61+
run: |
62+
PKG_NAME="@bpmn-modeler/create-append-c7-element-templates"
63+
yarn workspace "$PKG_NAME" version "${{ inputs.release-type }}"
64+
NEW_VERSION=$(node -e "console.log(require('./libs/create-append-c7-element-templates/package.json').version)")
65+
echo "version=${NEW_VERSION}" >> "$GITHUB_OUTPUT"
66+
67+
- name: Ensure tag does not exist
68+
run: |
69+
TAG="create-append-c7-element-templates/v${{ steps.version.outputs.version }}"
70+
if git rev-parse -q --verify "refs/tags/$TAG" >/dev/null; then
71+
echo "Tag $TAG already exists; aborting." && exit 1
72+
fi
73+
74+
- name: Build library
75+
run: yarn workspace @bpmn-modeler/create-append-c7-element-templates build
76+
77+
- name: Dry-run publish
78+
if: inputs.dry-run == true
79+
working-directory: libs/create-append-c7-element-templates
80+
run: npm publish --access public --dry-run
81+
env:
82+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
83+
84+
- name: Commit, tag, and publish
85+
if: success() && inputs.dry-run == false && github.ref == 'refs/heads/main'
86+
run: |
87+
NEW_VERSION="${{ steps.version.outputs.version }}"
88+
TAG="create-append-c7-element-templates/v${NEW_VERSION}"
89+
90+
git add libs/create-append-c7-element-templates/package.json
91+
git commit -m "chore(release): @bpmn-modeler/create-append-c7-element-templates v${NEW_VERSION}"
92+
git push origin HEAD
93+
94+
git tag -a "$TAG" -m "release $TAG"
95+
git push origin "$TAG"
96+
97+
- name: Publish to npm
98+
if: success() && inputs.dry-run == false && github.ref == 'refs/heads/main'
99+
working-directory: libs/create-append-c7-element-templates
100+
run: npm publish --access public
101+
env:
102+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎README.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,14 @@ The modeler opens automatically as a custom editor.
5757

5858
Search for "BPMN Modeler" in Settings (`Ctrl+,` / `Cmd+,`) to view all available options.
5959

60-
| Setting | Default | Description |
61-
|-------------------------------------------------|-------------|------------------------------------------------------------------|
62-
| `miragon.bpmnModeler.configFolder` | `.camunda` | Folder name used for element template and payload file discovery |
63-
| `miragon.bpmnModeler.language` | `en` | UI language for the modeler (e.g. `de`, `fr`, `zh-Hans`) |
64-
| `miragon.bpmnModeler.colorTheme` | `automatic` | Color theme for the BPMN canvas (`automatic` or `light`) |
65-
| `miragon.bpmnModeler.showTransactionBoundaries` | `true` | Show transaction boundaries in the BPMN canvas (C7 only) |
66-
| `miragon.bpmnModeler.c8ApiVersion` | `v2` | REST API version prefix for Camunda 8 deployment endpoints |
60+
| Setting | Default | Description |
61+
|-------------------------------------------------|-----------------------------|-------------------------------------------------------------------------|
62+
| `miragon.bpmnModeler.configFolder` | `.camunda` | Folder name used for element template and payload file discovery |
63+
| `miragon.bpmnModeler.language` | `en` | UI language for the modeler (e.g. `de`, `fr`, `zh-Hans`) |
64+
| `miragon.bpmnModeler.colorTheme` | `automatic` | Color theme for the BPMN canvas (`automatic` or `light`) |
65+
| `miragon.bpmnModeler.favouriteBpmnElements` | `["bpmn:ServiceTask", ...]` | BPMN element types to pin at the top of the append menu palette (max 6) |
66+
| `miragon.bpmnModeler.showTransactionBoundaries` | `true` | Show transaction boundaries in the BPMN canvas (C7 only) |
67+
| `miragon.bpmnModeler.c8ApiVersion` | `v2` | REST API version prefix for Camunda 8 deployment endpoints |
6768

6869
### Command Palette
6970

‎apps/bpmn-webview/src/app/__fixtures__/c7-samples.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
"appliesTo": [
77
"bpmn:ServiceTask"
88
],
9+
"category": {
10+
"id": "communication",
11+
"name": "Communication"
12+
},
913
"properties": [
1014
{
1115
"label": "Implementation Type",

‎apps/bpmn-webview/src/app/modeler.ts‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import TokenSimulationModule from "bpmn-js-token-simulation";
66
import { ElementTemplateChooserModule } from "@bpmn-modeler/element-template-chooser";
77
import TransactionBoundariesModule from "camunda-transaction-boundaries";
88
import { CreateAppendElementTemplatesModule } from "bpmn-js-create-append-anything";
9+
import { AppendMenuModule } from "@bpmn-modeler/append-menu";
10+
import { CreateAppendC7ElementTemplatesModule } from "@bpmn-modeler/create-append-c7-element-templates";
911
import { BpmnModelerSetting, NoModelerError } from "@bpmn-modeler/shared";
1012
import { ViewportManager } from "./viewport";
1113
import { SelectionManager } from "./selection";
@@ -85,7 +87,11 @@ export class BpmnModeler {
8587
* @throws {UnsupportedEngineError} If the engine string is not recognised.
8688
*/
8789
create(engine: "c7" | "c8", extraModules?: any[]): void {
88-
const commonModules = [TokenSimulationModule, ElementTemplateChooserModule];
90+
const commonModules = [
91+
TokenSimulationModule,
92+
ElementTemplateChooserModule,
93+
AppendMenuModule,
94+
];
8995
const extra = extraModules ?? [];
9096

9197
this.engine = engine;
@@ -97,6 +103,7 @@ export class BpmnModeler {
97103
additionalModules: [
98104
...commonModules,
99105
CreateAppendElementTemplatesModule,
106+
CreateAppendC7ElementTemplatesModule,
100107
TransactionBoundariesModule,
101108
...extra,
102109
],
@@ -118,6 +125,14 @@ export class BpmnModeler {
118125
const accessor = <T>(name: string): T => this.getModeler().get<T>(name);
119126
this._viewport = new ViewportManager(accessor);
120127
this._selection = new SelectionManager(accessor);
128+
129+
// Apply default favourites immediately after creation.
130+
if (this.settings.favouriteBpmnElements) {
131+
const appendMenuOverride = this.getModeler().get<any>("appendMenuOverride", false);
132+
if (appendMenuOverride) {
133+
appendMenuOverride.setFavourites(this.settings.favouriteBpmnElements);
134+
}
135+
}
121136
}
122137

123138
/**
@@ -252,6 +267,14 @@ export class BpmnModeler {
252267
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
253268
this.settings.showTransactionBoundaries ? tb.show() : tb.hide();
254269
}
270+
271+
// Apply favourite BPMN elements to the append menu.
272+
if (settings.favouriteBpmnElements !== undefined) {
273+
const appendMenuOverride = this.getModeler().get<any>("appendMenuOverride", false);
274+
if (appendMenuOverride) {
275+
appendMenuOverride.setFavourites(settings.favouriteBpmnElements);
276+
}
277+
}
255278
}
256279

257280
/**

‎apps/bpmn-webview/src/styles/dark-theme/append-menu.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* Dark theme overrides for the append menu overlay.
3+
*
4+
* Redefines the --am-* tokens (defined in libs/append-menu/src/append-menu.css)
5+
* using the --dt-* palette from colors.css, which in turn derives from
6+
* VS Code's injected --vscode-* variables.
7+
*
8+
* This file is only loaded when the dark theme is active (controlled by
9+
* theme.ts), so the "colorTheme: light" setting correctly forces light mode
10+
* even when VS Code itself uses a dark theme.
11+
*/
12+
@import "colors.css";
13+
14+
.am-overlay-root {
15+
/* ── Backgrounds ──────────────────────────────────────────────────── */
16+
--am-bg: var(--dt-surface-a10);
17+
--am-bg-elevated: var(--dt-surface-a20);
18+
--am-bg-hover: var(--dt-surface-a20);
19+
--am-bg-input: var(--dt-surface-a20);
20+
--am-bg-input-focus: var(--dt-surface-a20);
21+
--am-bg-code: var(--dt-surface-a0);
22+
--am-bg-impl: var(--dt-surface-tonal-a50);
23+
--am-bg-icon: var(--dt-surface-a20);
24+
--am-bg-clear: var(--dt-surface-a20);
25+
--am-bg-clear-hover: var(--dt-surface-a30);
26+
--am-bg-backdrop: rgba(0, 0, 0, 0.55);
27+
--am-bg-bpmn-btn: var(--dt-surface-a0);
28+
--am-bg-bpmn-btn-hover: var(--dt-surface-a20);
29+
30+
/* ── Text ─────────────────────────────────────────────────────────── */
31+
--am-text: var(--dt-surface-a70);
32+
--am-text-secondary: var(--dt-surface-a60);
33+
--am-text-muted: var(--dt-surface-a50);
34+
--am-text-faint: var(--dt-surface-a40);
35+
--am-text-code: var(--dt-surface-a60);
36+
--am-text-icon: var(--dt-surface-a50);
37+
--am-text-impl: var(--dt-surface-a70);
38+
39+
/* ── Borders ──────────────────────────────────────────────────────── */
40+
--am-border: var(--dt-surface-a30);
41+
--am-border-input: var(--dt-surface-a30);
42+
--am-border-impl: var(--dt-surface-a30);
43+
--am-border-bpmn-btn: var(--dt-surface-a30);
44+
45+
/* ── Accent / primary ─────────────────────────────────────────────── */
46+
--am-accent: var(--dt-primary-a0);
47+
--am-accent-hover: var(--dt-primary-a10);
48+
--am-accent-text: var(--dt-primary-a20);
49+
--am-accent-bg: var(--dt-primary-a0-opacity-30);
50+
--am-accent-bg-hover: var(--dt-surface-tonal-a30);
51+
--am-accent-ring: var(--dt-primary-a0-opacity-30);
52+
53+
/* ── Badges ───────────────────────────────────────────────────────── */
54+
--am-badge-cat-bg: color-mix(in srgb, #7c5cbf 25%, transparent);
55+
--am-badge-cat-text: #c4a8ff;
56+
--am-badge-props-bg: color-mix(in srgb, #4a8a4a 25%, transparent);
57+
--am-badge-props-text: #7cd17c;
58+
59+
/* ── Misc ─────────────────────────────────────────────────────────── */
60+
--am-scrollbar: var(--dt-surface-a30);
61+
--am-shadow: rgba(0, 0, 0, 0.5);
62+
--am-shadow-outline: rgba(255, 255, 255, 0.06);
63+
}

‎apps/bpmn-webview/src/styles/dark-theme/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
@import "./diagram-js.css";
66
@import "./properties-panel.css";
77
@import "./element-template-chooser.css";
8+
@import "./append-menu.css";
89
@import "./token-sim.css";
910
@import "./minimap.css";

‎apps/modeler-plugin/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,20 @@
225225
],
226226
"markdownDescription": "Controls the color theme of the BPMN modeler canvas. `automatic` follows the active VS Code theme; `light` always uses the default bpmn-js light theme."
227227
},
228+
"miragon.bpmnModeler.favouriteBpmnElements": {
229+
"type": "array",
230+
"items": {
231+
"type": "string"
232+
},
233+
"default": [
234+
"bpmn:ServiceTask",
235+
"bpmn:UserTask",
236+
"bpmn:CallActivity",
237+
"bpmn:ExclusiveGateway"
238+
],
239+
"maxItems": 6,
240+
"markdownDescription": "BPMN element types to pin at the top of the append menu palette (max 6). Use BPMN type names like `bpmn:ServiceTask`, `bpmn:UserTask`, `bpmn:CallActivity`, `bpmn:ExclusiveGateway`."
241+
},
228242
"miragon.bpmnModeler.language": {
229243
"type": "string",
230244
"default": "en",

‎apps/modeler-plugin/src/controller/BpmnEditorController.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,9 @@ export class BpmnEditorController implements CustomTextEditorProvider {
211211
if (event.affectsConfiguration("miragon.bpmnModeler.colorTheme")) {
212212
this.bpmnService.setSettings(id);
213213
}
214+
if (event.affectsConfiguration("miragon.bpmnModeler.favouriteBpmnElements")) {
215+
this.bpmnService.setSettings(id);
216+
}
214217
if (event.affectsConfiguration("miragon.bpmnModeler.configFolder")) {
215218
this.bpmnService.setElementTemplates(id);
216219
}

‎apps/modeler-plugin/src/domain/model.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export class BpmnModelerSetting {
66
public readonly alignToOrigin: boolean,
77
public readonly showTransactionBoundaries: boolean,
88
public readonly colorTheme: "automatic" | "light",
9+
public readonly favouriteBpmnElements: string[],
910
) {}
1011
}
1112

@@ -19,6 +20,8 @@ export class SettingBuilder {
1920

2021
private _colorTheme: "automatic" | "light" = "automatic";
2122

23+
private _favouriteBpmnElements: string[] = [];
24+
2225
/** Sets the alignToOrigin flag. */
2326
alignToOrigin(value: boolean): SettingBuilder {
2427
this._alignToOrigin = value;
@@ -37,12 +40,19 @@ export class SettingBuilder {
3740
return this;
3841
}
3942

43+
/** Sets the favourite BPMN element types for the append menu palette. */
44+
favouriteBpmnElements(value: string[]): SettingBuilder {
45+
this._favouriteBpmnElements = value;
46+
return this;
47+
}
48+
4049
/** Builds and returns a {@link BpmnModelerSetting} instance. */
4150
buildBpmnModeler(): BpmnModelerSetting {
4251
return new BpmnModelerSetting(
4352
this._alignToOrigin,
4453
this._showTransactionBoundaries,
4554
this._colorTheme,
55+
this._favouriteBpmnElements,
4656
);
4757
}
4858
}

‎apps/modeler-plugin/src/infrastructure/VsCodeSettings.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,19 @@ export class VsCodeSettings {
6666
return value === "light" ? "light" : "automatic";
6767
}
6868

69+
/**
70+
* Reads the favourite BPMN element types from VS Code configuration.
71+
*
72+
* Defaults to an empty array if not configured.
73+
*
74+
* @returns Array of BPMN type strings (e.g. `["bpmn:ServiceTask"]`).
75+
*/
76+
getFavouriteBpmnElements(): string[] {
77+
return workspace
78+
.getConfiguration("miragon.bpmnModeler")
79+
.get<string[]>("favouriteBpmnElements", []);
80+
}
81+
6982
/**
7083
* Reads the UI language setting from VS Code configuration.
7184
*

0 commit comments

Comments
 (0)