@bpmnkit/canvas 0.0.15 → 0.0.20
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/README.md +2 -0
- package/dist/canvas.d.ts +12 -0
- package/dist/canvas.js +23 -0
- package/dist/css.d.ts +1 -1
- package/dist/css.js +27 -0
- package/dist/renderer.js +18 -6
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
[](https://www.npmjs.com/package/@bpmnkit/canvas)
|
|
7
7
|
[](https://github.com/bpmnkit/monorepo/blob/main/LICENSE)
|
|
8
8
|
[](https://github.com/bpmnkit/monorepo)
|
|
9
|
+
[](https://github.com/bpmnkit/monorepo)
|
|
10
|
+
[](https://github.com/bpmnkit/monorepo)
|
|
9
11
|
|
|
10
12
|
[Website](https://bpmnkit.com) · [Documentation](https://docs.bpmnkit.com) · [GitHub](https://github.com/bpmnkit/monorepo) · [Changelog](https://github.com/bpmnkit/monorepo/blob/main/packages/canvas/CHANGELOG.md)
|
|
11
13
|
</div>
|
package/dist/canvas.d.ts
CHANGED
|
@@ -105,6 +105,18 @@ export declare class BpmnCanvas {
|
|
|
105
105
|
* ```
|
|
106
106
|
*/
|
|
107
107
|
on<K extends keyof CanvasEvents>(event: K, handler: CanvasEvents[K]): () => void;
|
|
108
|
+
/**
|
|
109
|
+
* Highlights a set of elements by ID with a coloured outline.
|
|
110
|
+
*
|
|
111
|
+
* - `"changed"` — amber outline, for elements modified by AI
|
|
112
|
+
* - `"new"` — green fill + outline, for elements added by AI
|
|
113
|
+
*
|
|
114
|
+
* Call {@link clearHighlights} to remove all highlights.
|
|
115
|
+
* Highlights are cleared automatically on the next {@link load} / {@link loadDefinitions} call.
|
|
116
|
+
*/
|
|
117
|
+
highlight(ids: string[], variant: "changed" | "new"): void;
|
|
118
|
+
/** Removes all highlight classes added by {@link highlight}. */
|
|
119
|
+
clearHighlights(): void;
|
|
108
120
|
/** Destroys the canvas, removing all DOM nodes and event listeners. */
|
|
109
121
|
destroy(): void;
|
|
110
122
|
private _applyTheme;
|
package/dist/canvas.js
CHANGED
|
@@ -271,6 +271,29 @@ export class BpmnCanvas {
|
|
|
271
271
|
set.add(handler);
|
|
272
272
|
return () => set.delete(handler);
|
|
273
273
|
}
|
|
274
|
+
/**
|
|
275
|
+
* Highlights a set of elements by ID with a coloured outline.
|
|
276
|
+
*
|
|
277
|
+
* - `"changed"` — amber outline, for elements modified by AI
|
|
278
|
+
* - `"new"` — green fill + outline, for elements added by AI
|
|
279
|
+
*
|
|
280
|
+
* Call {@link clearHighlights} to remove all highlights.
|
|
281
|
+
* Highlights are cleared automatically on the next {@link load} / {@link loadDefinitions} call.
|
|
282
|
+
*/
|
|
283
|
+
highlight(ids, variant) {
|
|
284
|
+
const cls = `bpmnkit-highlight--${variant}`;
|
|
285
|
+
const idSet = new Set(ids);
|
|
286
|
+
for (const { id, element } of [...this._shapes, ...this._edges]) {
|
|
287
|
+
if (idSet.has(id))
|
|
288
|
+
element.classList.add(cls);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
/** Removes all highlight classes added by {@link highlight}. */
|
|
292
|
+
clearHighlights() {
|
|
293
|
+
for (const { element } of [...this._shapes, ...this._edges]) {
|
|
294
|
+
element.classList.remove("bpmnkit-highlight--changed", "bpmnkit-highlight--new");
|
|
295
|
+
}
|
|
296
|
+
}
|
|
274
297
|
/** Destroys the canvas, removing all DOM nodes and event listeners. */
|
|
275
298
|
destroy() {
|
|
276
299
|
this._ro.disconnect();
|
package/dist/css.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** ID used to prevent duplicate style injection. */
|
|
2
2
|
export declare const STYLE_ID = "bpmnkit-canvas-styles-v1";
|
|
3
3
|
/** Complete CSS for the BpmnCanvas component, injected once into `<head>`. */
|
|
4
|
-
export declare const CANVAS_CSS = "\n.bpmnkit-canvas-host {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n touch-action: none;\n background: var(--bpmnkit-bg, #f8f9fa);\n}\n.bpmnkit-canvas-host *,\n.bpmnkit-canvas-host *::before,\n.bpmnkit-canvas-host *::after {\n box-sizing: border-box;\n}\n.bpmnkit-canvas-host > svg {\n display: block;\n width: 100%;\n height: 100%;\n cursor: default;\n}\n.bpmnkit-canvas-host.is-panning > svg {\n cursor: grabbing;\n}\n.bpmnkit-canvas-host > svg:focus {\n outline: none;\n}\n\n/* \u2500\u2500 Shapes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-shape {\n cursor: pointer;\n outline: none;\n}\n.bpmnkit-shape:focus .bpmnkit-shape-body,\n.bpmnkit-shape:focus .bpmnkit-event-body,\n.bpmnkit-shape:focus .bpmnkit-gw-body,\n.bpmnkit-shape:focus .bpmnkit-pool-body,\n.bpmnkit-shape:focus .bpmnkit-lane-body {\n stroke: var(--bpmnkit-focus, #0066cc);\n stroke-width: 2.5;\n}\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-shape-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-event-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-gw-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-pool-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-lane-body {\n stroke: var(--bpmnkit-highlight, #0066cc);\n stroke-width: 2.5;\n}\n\n.bpmnkit-shape-body,\n.bpmnkit-event-body,\n.bpmnkit-gw-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-end-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 3;\n}\n.bpmnkit-event-inner {\n fill: none;\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-event-inner-dashed {\n fill: none;\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n stroke-dasharray: 4 2;\n}\n.bpmnkit-eventsubprocess-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n stroke-dasharray: 5 3;\n}\n.bpmnkit-callactivity-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 3;\n}\n\n/* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-icon {\n fill: none;\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n pointer-events: none;\n}\n.bpmnkit-icon-solid {\n fill: var(--bpmnkit-shape-stroke, #404040);\n stroke: none;\n pointer-events: none;\n}\n.bpmnkit-gw-marker {\n fill: var(--bpmnkit-shape-stroke, #404040);\n stroke: none;\n pointer-events: none;\n}\n.bpmnkit-gw-marker-stroke {\n fill: none;\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 2.5;\n stroke-linecap: round;\n pointer-events: none;\n}\n\n/* \u2500\u2500 Pool / Lane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-pool-body,\n.bpmnkit-lane-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-pool-header,\n.bpmnkit-lane-header {\n fill: var(--bpmnkit-pool-header, rgba(0,0,0,0.04));\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n}\n[data-theme=\"dark\"] .bpmnkit-pool-header,\n[data-theme=\"dark\"] .bpmnkit-lane-header {\n fill: rgba(255,255,255,0.06);\n}\n\n/* \u2500\u2500 Message flow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-msgflow-path {\n fill: none;\n stroke: var(--bpmnkit-flow-stroke, #404040);\n stroke-width: 1.5;\n stroke-dasharray: 6 3;\n}\n\n/* \u2500\u2500 Edges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-edge {\n cursor: pointer;\n}\n.bpmnkit-edge-path {\n fill: none;\n stroke: var(--bpmnkit-flow-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-edge-assoc {\n fill: none;\n stroke: var(--bpmnkit-flow-stroke, #404040);\n stroke-width: 1.5;\n stroke-dasharray: 5 3;\n}\n.bpmnkit-edge-default-slash {\n stroke: var(--bpmnkit-flow-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-arrow-fill {\n fill: var(--bpmnkit-flow-stroke, #404040);\n}\n\n/* \u2500\u2500 Labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-label {\n fill: var(--bpmnkit-text, #333333);\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 11px;\n text-anchor: middle;\n dominant-baseline: central;\n pointer-events: none;\n /* White halo behind text so labels never visually merge with edge lines */\n paint-order: stroke;\n stroke: var(--bpmnkit-bg, #f8f9fa);\n stroke-width: 4px;\n stroke-linejoin: round;\n}\n\n/* \u2500\u2500 Light theme (default) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-canvas-host {\n --bpmnkit-bg: #f8f9fa;\n --bpmnkit-grid: rgba(0, 0, 0, 0.14);\n --bpmnkit-shape-fill: #ffffff;\n --bpmnkit-shape-stroke: #404040;\n --bpmnkit-flow-stroke: #404040;\n --bpmnkit-text: var(--bpmnkit-fg, #333333);\n --bpmnkit-highlight: var(--bpmnkit-accent, #1a56db);\n --bpmnkit-focus: #0066cc;\n --bpmnkit-overlay-bg: rgba(248, 249, 250, 0.92);\n --bpmnkit-overlay-border: rgba(0, 0, 0, 0.12);\n}\n\n/* \u2500\u2500 Dark theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-canvas-host[data-theme=\"dark\"] {\n --bpmnkit-bg: #0d0d16;\n --bpmnkit-grid: rgba(255, 255, 255, 0.07);\n --bpmnkit-shape-fill: #1e1e2e;\n --bpmnkit-shape-stroke: #8888bb;\n --bpmnkit-flow-stroke: #7777aa;\n --bpmnkit-text: var(--bpmnkit-fg, #cdd6f4);\n --bpmnkit-highlight: var(--bpmnkit-accent-bright, #89b4fa);\n --bpmnkit-focus: #89b4fa;\n --bpmnkit-overlay-bg: rgba(30, 30, 46, 0.92);\n --bpmnkit-overlay-border: rgba(255, 255, 255, 0.1);\n}\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* \u2500\u2500 Neon theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-canvas-host[data-theme=\"neon\"] {\n --bpmnkit-bg: oklch(5% 0.025 270);\n --bpmnkit-grid: oklch(65% 0.28 280 / 0.22);\n --bpmnkit-shape-fill: oklch(7% 0.03 270 / 0.9);\n --bpmnkit-shape-stroke: oklch(65% 0.28 280);\n --bpmnkit-flow-stroke: oklch(72% 0.18 185);\n --bpmnkit-text: oklch(88% 0.02 270);\n --bpmnkit-highlight: oklch(72% 0.18 185);\n --bpmnkit-focus: oklch(65% 0.28 280);\n --bpmnkit-overlay-bg: oklch(8% 0.03 270 / 0.96);\n --bpmnkit-overlay-border: oklch(65% 0.28 280 / 0.25);\n}\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-pool-header,\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-lane-header {\n fill: oklch(65% 0.28 280 / 0.07);\n}\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-edge-hover-dot { fill: oklch(72% 0.18 185); }\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-edge-waypoint-ball { fill: oklch(72% 0.18 185); }\n";
|
|
4
|
+
export declare const CANVAS_CSS = "\n.bpmnkit-canvas-host {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n touch-action: none;\n background: var(--bpmnkit-bg, #f8f9fa);\n}\n.bpmnkit-canvas-host *,\n.bpmnkit-canvas-host *::before,\n.bpmnkit-canvas-host *::after {\n box-sizing: border-box;\n}\n.bpmnkit-canvas-host > svg {\n display: block;\n width: 100%;\n height: 100%;\n cursor: default;\n}\n.bpmnkit-canvas-host.is-panning > svg {\n cursor: grabbing;\n}\n.bpmnkit-canvas-host > svg:focus {\n outline: none;\n}\n\n/* \u2500\u2500 Shapes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-shape {\n cursor: pointer;\n outline: none;\n}\n.bpmnkit-shape:focus .bpmnkit-shape-body,\n.bpmnkit-shape:focus .bpmnkit-event-body,\n.bpmnkit-shape:focus .bpmnkit-gw-body,\n.bpmnkit-shape:focus .bpmnkit-pool-body,\n.bpmnkit-shape:focus .bpmnkit-lane-body {\n stroke: var(--bpmnkit-focus, #0066cc);\n stroke-width: 2.5;\n}\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-shape-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-event-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-gw-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-pool-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-lane-body {\n stroke: var(--bpmnkit-highlight, #0066cc);\n stroke-width: 2.5;\n}\n\n/* \u2500\u2500 Highlight variants (AI improve preview) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-highlight--changed .bpmnkit-shape-body,\n.bpmnkit-highlight--changed .bpmnkit-event-body,\n.bpmnkit-highlight--changed .bpmnkit-gw-body,\n.bpmnkit-highlight--changed .bpmnkit-pool-body,\n.bpmnkit-highlight--changed .bpmnkit-lane-body {\n stroke: var(--bpmnkit-warn, #d97706);\n stroke-width: 2.5;\n}\n.bpmnkit-highlight--changed .bpmnkit-edge-path {\n stroke: var(--bpmnkit-warn, #d97706);\n stroke-width: 2.5;\n}\n.bpmnkit-highlight--new .bpmnkit-shape-body,\n.bpmnkit-highlight--new .bpmnkit-event-body,\n.bpmnkit-highlight--new .bpmnkit-gw-body,\n.bpmnkit-highlight--new .bpmnkit-pool-body,\n.bpmnkit-highlight--new .bpmnkit-lane-body {\n fill: var(--bpmnkit-success-subtle, rgba(22, 163, 74, 0.12));\n stroke: var(--bpmnkit-success, #16a34a);\n stroke-width: 2.5;\n}\n.bpmnkit-highlight--new .bpmnkit-edge-path {\n stroke: var(--bpmnkit-success, #16a34a);\n stroke-width: 2.5;\n}\n\n.bpmnkit-shape-body,\n.bpmnkit-event-body,\n.bpmnkit-gw-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-end-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 3;\n}\n.bpmnkit-event-inner {\n fill: none;\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-event-inner-dashed {\n fill: none;\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n stroke-dasharray: 4 2;\n}\n.bpmnkit-eventsubprocess-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n stroke-dasharray: 5 3;\n}\n.bpmnkit-callactivity-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 3;\n}\n\n/* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-icon {\n fill: none;\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n pointer-events: none;\n}\n.bpmnkit-icon-solid {\n fill: var(--bpmnkit-shape-stroke, #404040);\n stroke: none;\n pointer-events: none;\n}\n.bpmnkit-gw-marker {\n fill: var(--bpmnkit-shape-stroke, #404040);\n stroke: none;\n pointer-events: none;\n}\n.bpmnkit-gw-marker-stroke {\n fill: none;\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 2.5;\n stroke-linecap: round;\n pointer-events: none;\n}\n\n/* \u2500\u2500 Pool / Lane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-pool-body,\n.bpmnkit-lane-body {\n fill: var(--bpmnkit-shape-fill, #ffffff);\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-pool-header,\n.bpmnkit-lane-header {\n fill: var(--bpmnkit-pool-header, rgba(0,0,0,0.04));\n stroke: var(--bpmnkit-shape-stroke, #404040);\n stroke-width: 1.5;\n}\n[data-theme=\"dark\"] .bpmnkit-pool-header,\n[data-theme=\"dark\"] .bpmnkit-lane-header {\n fill: rgba(255,255,255,0.06);\n}\n\n/* \u2500\u2500 Message flow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-msgflow-path {\n fill: none;\n stroke: var(--bpmnkit-flow-stroke, #404040);\n stroke-width: 1.5;\n stroke-dasharray: 6 3;\n}\n\n/* \u2500\u2500 Edges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-edge {\n cursor: pointer;\n}\n.bpmnkit-edge-path {\n fill: none;\n stroke: var(--bpmnkit-flow-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-edge-assoc {\n fill: none;\n stroke: var(--bpmnkit-flow-stroke, #404040);\n stroke-width: 1.5;\n stroke-dasharray: 5 3;\n}\n.bpmnkit-edge-default-slash {\n stroke: var(--bpmnkit-flow-stroke, #404040);\n stroke-width: 1.5;\n}\n.bpmnkit-arrow-fill {\n fill: var(--bpmnkit-flow-stroke, #404040);\n}\n\n/* \u2500\u2500 Labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-label {\n fill: var(--bpmnkit-text, #333333);\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 11px;\n text-anchor: middle;\n dominant-baseline: central;\n pointer-events: none;\n /* White halo behind text so labels never visually merge with edge lines */\n paint-order: stroke;\n stroke: var(--bpmnkit-bg, #f8f9fa);\n stroke-width: 4px;\n stroke-linejoin: round;\n}\n\n/* \u2500\u2500 Light theme (default) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-canvas-host {\n --bpmnkit-bg: #f8f9fa;\n --bpmnkit-grid: rgba(0, 0, 0, 0.14);\n --bpmnkit-shape-fill: #ffffff;\n --bpmnkit-shape-stroke: #404040;\n --bpmnkit-flow-stroke: #404040;\n --bpmnkit-text: var(--bpmnkit-fg, #333333);\n --bpmnkit-highlight: var(--bpmnkit-accent, #1a56db);\n --bpmnkit-focus: #0066cc;\n --bpmnkit-overlay-bg: rgba(248, 249, 250, 0.92);\n --bpmnkit-overlay-border: rgba(0, 0, 0, 0.12);\n}\n\n/* \u2500\u2500 Dark theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-canvas-host[data-theme=\"dark\"] {\n --bpmnkit-bg: #0d0d16;\n --bpmnkit-grid: rgba(255, 255, 255, 0.07);\n --bpmnkit-shape-fill: #1e1e2e;\n --bpmnkit-shape-stroke: #8888bb;\n --bpmnkit-flow-stroke: #7777aa;\n --bpmnkit-text: var(--bpmnkit-fg, #cdd6f4);\n --bpmnkit-highlight: var(--bpmnkit-accent-bright, #89b4fa);\n --bpmnkit-focus: #89b4fa;\n --bpmnkit-overlay-bg: rgba(30, 30, 46, 0.92);\n --bpmnkit-overlay-border: rgba(255, 255, 255, 0.1);\n}\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* \u2500\u2500 Neon theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-canvas-host[data-theme=\"neon\"] {\n --bpmnkit-bg: oklch(5% 0.025 270);\n --bpmnkit-grid: oklch(65% 0.28 280 / 0.22);\n --bpmnkit-shape-fill: oklch(7% 0.03 270 / 0.9);\n --bpmnkit-shape-stroke: oklch(65% 0.28 280);\n --bpmnkit-flow-stroke: oklch(72% 0.18 185);\n --bpmnkit-text: oklch(88% 0.02 270);\n --bpmnkit-highlight: oklch(72% 0.18 185);\n --bpmnkit-focus: oklch(65% 0.28 280);\n --bpmnkit-overlay-bg: oklch(8% 0.03 270 / 0.96);\n --bpmnkit-overlay-border: oklch(65% 0.28 280 / 0.25);\n}\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-pool-header,\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-lane-header {\n fill: oklch(65% 0.28 280 / 0.07);\n}\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-edge-hover-dot { fill: oklch(72% 0.18 185); }\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-edge-waypoint-ball { fill: oklch(72% 0.18 185); }\n";
|
|
5
5
|
/**
|
|
6
6
|
* Injects the canvas stylesheet into `<head>` if not already present.
|
|
7
7
|
* Safe to call multiple times — only one `<style>` tag is ever inserted.
|
package/dist/css.js
CHANGED
|
@@ -53,6 +53,33 @@ export const CANVAS_CSS = `
|
|
|
53
53
|
stroke-width: 2.5;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
+
/* ── Highlight variants (AI improve preview) ────────────────────── */
|
|
57
|
+
.bpmnkit-highlight--changed .bpmnkit-shape-body,
|
|
58
|
+
.bpmnkit-highlight--changed .bpmnkit-event-body,
|
|
59
|
+
.bpmnkit-highlight--changed .bpmnkit-gw-body,
|
|
60
|
+
.bpmnkit-highlight--changed .bpmnkit-pool-body,
|
|
61
|
+
.bpmnkit-highlight--changed .bpmnkit-lane-body {
|
|
62
|
+
stroke: var(--bpmnkit-warn, #d97706);
|
|
63
|
+
stroke-width: 2.5;
|
|
64
|
+
}
|
|
65
|
+
.bpmnkit-highlight--changed .bpmnkit-edge-path {
|
|
66
|
+
stroke: var(--bpmnkit-warn, #d97706);
|
|
67
|
+
stroke-width: 2.5;
|
|
68
|
+
}
|
|
69
|
+
.bpmnkit-highlight--new .bpmnkit-shape-body,
|
|
70
|
+
.bpmnkit-highlight--new .bpmnkit-event-body,
|
|
71
|
+
.bpmnkit-highlight--new .bpmnkit-gw-body,
|
|
72
|
+
.bpmnkit-highlight--new .bpmnkit-pool-body,
|
|
73
|
+
.bpmnkit-highlight--new .bpmnkit-lane-body {
|
|
74
|
+
fill: var(--bpmnkit-success-subtle, rgba(22, 163, 74, 0.12));
|
|
75
|
+
stroke: var(--bpmnkit-success, #16a34a);
|
|
76
|
+
stroke-width: 2.5;
|
|
77
|
+
}
|
|
78
|
+
.bpmnkit-highlight--new .bpmnkit-edge-path {
|
|
79
|
+
stroke: var(--bpmnkit-success, #16a34a);
|
|
80
|
+
stroke-width: 2.5;
|
|
81
|
+
}
|
|
82
|
+
|
|
56
83
|
.bpmnkit-shape-body,
|
|
57
84
|
.bpmnkit-event-body,
|
|
58
85
|
.bpmnkit-gw-body {
|
package/dist/renderer.js
CHANGED
|
@@ -203,14 +203,24 @@ function gatewayMarker(type) {
|
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
// ── Sub-process bottom markers ────────────────────────────────────────────────
|
|
206
|
-
function subProcessMarker(type) {
|
|
206
|
+
function subProcessMarker(type, multiInstance) {
|
|
207
|
+
let base;
|
|
207
208
|
if (type === "adHocSubProcess") {
|
|
208
|
-
|
|
209
|
-
return `<path d="M-7 0Q-4 -4 0 0Q4 4 7 0" class="bpmnkit-icon"/>`;
|
|
209
|
+
base = `<path d="M-7 0Q-4 -4 0 0Q4 4 7 0" class="bpmnkit-icon"/>`;
|
|
210
210
|
}
|
|
211
|
-
|
|
212
|
-
|
|
211
|
+
else {
|
|
212
|
+
base = `<rect x="-7" y="-7" width="14" height="14" rx="1" class="bpmnkit-icon"/>
|
|
213
213
|
<path d="M0 -4v8M-4 0h8" class="bpmnkit-icon"/>`;
|
|
214
|
+
}
|
|
215
|
+
if (multiInstance === "sequential") {
|
|
216
|
+
// Three horizontal lines ≡ (sequential)
|
|
217
|
+
base += `<g transform="translate(16 0)"><path d="M-4 -4h8M-4 0h8M-4 4h8" class="bpmnkit-icon"/></g>`;
|
|
218
|
+
}
|
|
219
|
+
else if (multiInstance === "parallel") {
|
|
220
|
+
// Three vertical lines ||| (parallel)
|
|
221
|
+
base += `<g transform="translate(16 0)"><path d="M-4 -4v8M0 -4v8M4 -4v8" class="bpmnkit-icon"/></g>`;
|
|
222
|
+
}
|
|
223
|
+
return base;
|
|
214
224
|
}
|
|
215
225
|
function buildIndex(defs) {
|
|
216
226
|
const elements = new Map();
|
|
@@ -393,9 +403,11 @@ function renderTask(shape, el, instanceId) {
|
|
|
393
403
|
el?.type === "adHocSubProcess" ||
|
|
394
404
|
el?.type === "eventSubProcess" ||
|
|
395
405
|
el?.type === "transaction") {
|
|
406
|
+
const lc = "loopCharacteristics" in el ? el.loopCharacteristics : undefined;
|
|
407
|
+
const multiInstance = lc ? (lc.isSequential ? "sequential" : "parallel") : undefined;
|
|
396
408
|
const markerG = svgEl("g");
|
|
397
409
|
attr(markerG, { transform: `translate(${width / 2} ${height - 10})` });
|
|
398
|
-
markerG.innerHTML = subProcessMarker(el.type);
|
|
410
|
+
markerG.innerHTML = subProcessMarker(el.type, multiInstance);
|
|
399
411
|
g.appendChild(markerG);
|
|
400
412
|
}
|
|
401
413
|
const label = el?.name ?? el?.type ?? "task";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bpmnkit/canvas",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.20",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"dist/**/*.d.ts"
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@bpmnkit/core": "0.0.
|
|
20
|
+
"@bpmnkit/core": "0.0.20"
|
|
21
21
|
},
|
|
22
22
|
"description": "Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API",
|
|
23
23
|
"keywords": [
|