@miragon/event-storming-renderer 0.5.0 → 0.5.1
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 +30 -19
- package/dist/board-menu/ShortcutsDialog.d.ts +1 -1
- package/dist/board-menu/menu.d.ts +5 -5
- package/dist/board-menu/shortcuts.d.ts +2 -2
- package/dist/collaborative/CollaborativeEventStorming.d.ts +1 -1
- package/dist/color-picker/EventStormingColorPicker.d.ts.map +1 -1
- package/dist/context-pad/EventStormingContextPadProvider.d.ts +9 -1
- package/dist/context-pad/EventStormingContextPadProvider.d.ts.map +1 -1
- package/dist/draw/EventStormingRenderer.d.ts +4 -3
- package/dist/draw/EventStormingRenderer.d.ts.map +1 -1
- package/dist/draw/contrast.d.ts +8 -0
- package/dist/draw/contrast.d.ts.map +1 -0
- package/dist/draw/lucide.d.ts +8 -8
- package/dist/draw/styles.d.ts +27 -6
- package/dist/draw/styles.d.ts.map +1 -1
- package/dist/draw-tool/EventStormingDrawTool.d.ts +6 -0
- package/dist/draw-tool/EventStormingDrawTool.d.ts.map +1 -1
- package/dist/index.js +852 -759
- package/dist/index.js.map +1 -1
- package/dist/keyboard/EventStormingKeyboard.d.ts +4 -3
- package/dist/keyboard/EventStormingKeyboard.d.ts.map +1 -1
- package/dist/keyboard/canvas-focus.d.ts +11 -0
- package/dist/keyboard/canvas-focus.d.ts.map +1 -0
- package/dist/keyboard/index.d.ts +2 -0
- package/dist/keyboard/index.d.ts.map +1 -1
- package/dist/keyboard/key-scope.d.ts +16 -0
- package/dist/keyboard/key-scope.d.ts.map +1 -0
- package/dist/label-editing/note-editor-dom.d.ts +2 -2
- package/dist/model/EventStormingElementFactory.d.ts +1 -1
- package/dist/model/di-types.d.ts +2 -2
- package/dist/palette/EventStormingPaletteProvider.d.ts +6 -0
- package/dist/palette/EventStormingPaletteProvider.d.ts.map +1 -1
- package/dist/theme/palette.d.ts +10 -1
- package/dist/theme/palette.d.ts.map +1 -1
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# @miragon/event-storming-renderer
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@miragon/event-storming-renderer)
|
|
4
|
-
[](https://github.com/Miragon/modeler-suite/blob/main/modelers/event-storming/LICENSE)
|
|
5
5
|
|
|
6
6
|
[diagram-js](https://github.com/bpmn-io/diagram-js)-based renderer for
|
|
7
7
|
[Event Storming](https://www.eventstorming.com/) boards: `Viewer`, `NavigatedViewer`, and a full
|
|
@@ -16,10 +16,10 @@ npm install @miragon/event-storming-renderer
|
|
|
16
16
|
## Usage
|
|
17
17
|
|
|
18
18
|
```ts
|
|
19
|
-
import { NavigatedViewer } from
|
|
20
|
-
import
|
|
19
|
+
import { NavigatedViewer } from "@miragon/event-storming-renderer";
|
|
20
|
+
import "@miragon/event-storming-renderer/assets/event-storming.css";
|
|
21
21
|
|
|
22
|
-
const viewer = new NavigatedViewer({ container: document.querySelector(
|
|
22
|
+
const viewer = new NavigatedViewer({ container: document.querySelector("#canvas")! });
|
|
23
23
|
|
|
24
24
|
await viewer.importDSL(`title Order Checkout
|
|
25
25
|
actor Customer [80, 300]
|
|
@@ -36,7 +36,7 @@ const box = viewer.contentBounds(); // the board's tight box, undefined while it
|
|
|
36
36
|
|
|
37
37
|
Swap `NavigatedViewer` for `Modeler` to get the editable board (sticky palette, context pad,
|
|
38
38
|
arrows, undo/redo). Stickies are colored per kind (`STICKY_STYLES`): domain event, command,
|
|
39
|
-
actor, aggregate, policy, read model, external system
|
|
39
|
+
actor, aggregate, policy, read model, external system and hotspot, plus free-text notes and
|
|
40
40
|
freeform drawings on an unbounded canvas.
|
|
41
41
|
|
|
42
42
|
### Options
|
|
@@ -65,16 +65,27 @@ Pass `undoRedoKeys: false` when the host owns the history, as the VS Code extens
|
|
|
65
65
|
then reach the host untouched and the host undoes the document, while copy, paste, delete, the
|
|
66
66
|
arrow keys and the single-key tools keep working on the canvas.
|
|
67
67
|
|
|
68
|
-
The modeler's keyboard listens on `document`, but only
|
|
69
|
-
target
|
|
70
|
-
|
|
71
|
-
the
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
68
|
+
The modeler's keyboard listens on `document`, but acts only while the canvas itself has the focus:
|
|
69
|
+
the key's target is the canvas `<svg>` or lies inside it, the element diagram-js 15 binds its own
|
|
70
|
+
keyboard to. `<body>` does not count, so no key acts right after a load or after a click on page
|
|
71
|
+
text, and the palette, the context pad and the label editor, which sit next to the `<svg>`, keep
|
|
72
|
+
their keys. Keys another listener already handled (`defaultPrevented`), events without a `key` and
|
|
73
|
+
keys typed during an IME composition are left alone, and the canvas container gets no `tabindex` of
|
|
74
|
+
its own. A pointer click or drag on a palette entry, a click on a context-pad entry that opens no
|
|
75
|
+
editor or popup (delete, connect, append, line style) and a picked colour hand the focus to the
|
|
76
|
+
canvas, without the keyboard focus ring. Enter and Space on a tool entry (lasso, draw) leave the
|
|
77
|
+
focus on the entry; on a creating entry they place the sticky in the middle of the free area and
|
|
78
|
+
open its label editor. While a line is drawn, Enter and Escape end it only when aimed at the
|
|
79
|
+
modeler's container (the canvas, the palette or the context pad), never at a text field or a control
|
|
80
|
+
outside the container, and every point focuses the canvas. To keep the keys away from a canvas it
|
|
81
|
+
hides without destroying it, a host makes it `inert` (or `display: none`): the browser then moves
|
|
82
|
+
the focus off the `<svg>` at its next rendering update. Cmd/Ctrl+A selects the whole board. An
|
|
83
|
+
import erases the undo history without firing `commandStack.changed`, and fires
|
|
84
|
+
`import.parse.start`, `import.render.start` and `import.done` in that order. It frames the content
|
|
85
|
+
centred at the largest zoom that shows all of it, never above 100%; an empty board shows at 100%. A
|
|
86
|
+
board with arrow annotations is imported once the font they are set in has loaded (or failed to), so
|
|
87
|
+
that the fit on import, and a host's fit after the import resolves, frame them as drawn and not as
|
|
88
|
+
the fallback font would set them; imports still run in the order they were called. A label being
|
|
78
89
|
typed when an import arrives is reopened on the same element afterwards, with the typed text.
|
|
79
90
|
|
|
80
91
|
`contentBounds()` gives the tight box around what the board draws (`{ x, y, width, height }` in
|
|
@@ -114,7 +125,7 @@ The package implements the collaborative-modeler contract 1.3 of
|
|
|
114
125
|
import {
|
|
115
126
|
createCollaborativeModeler,
|
|
116
127
|
createCollaborativeViewer,
|
|
117
|
-
} from
|
|
128
|
+
} from "@miragon/event-storming-renderer";
|
|
118
129
|
|
|
119
130
|
const modeler = createCollaborativeModeler(); // meta.editable: true
|
|
120
131
|
modeler.attachTo(host); // in the document, with a size
|
|
@@ -183,14 +194,14 @@ const viewer = createCollaborativeViewer(); // meta.editable: false, never chang
|
|
|
183
194
|
### Fonts
|
|
184
195
|
|
|
185
196
|
The package ships no fonts and uses no CDN. The canvas typeface is **Geist** (Miragon corporate
|
|
186
|
-
identity); provide it yourself
|
|
197
|
+
identity); provide it yourself, preferably self-hosted via [`@fontsource`](https://fontsource.org/)
|
|
187
198
|
(one variable file covers all weights):
|
|
188
199
|
|
|
189
200
|
```ts
|
|
190
|
-
import
|
|
201
|
+
import "@fontsource-variable/geist/wght.css";
|
|
191
202
|
```
|
|
192
203
|
|
|
193
|
-
Part of the [Event Storming Modeler](https://github.com/Miragon/event-storming
|
|
204
|
+
Part of the [Event Storming Modeler](https://github.com/Miragon/modeler-suite/tree/main/modelers/event-storming) in the [Miragon modeler suite](https://github.com/Miragon/modeler-suite).
|
|
194
205
|
|
|
195
206
|
## License
|
|
196
207
|
|
|
@@ -3,7 +3,7 @@ import { BoardShortcutOptions, ShortcutsChrome } from './shortcuts.js';
|
|
|
3
3
|
export interface ShortcutsDialogChrome extends ShortcutsChrome {
|
|
4
4
|
/** Where the dialog lives (the shell root), so it shares the chrome's mode and fonts. */
|
|
5
5
|
readonly root: HTMLElement;
|
|
6
|
-
readonly messages: ShortcutsChrome[
|
|
6
|
+
readonly messages: ShortcutsChrome["messages"] & {
|
|
7
7
|
readonly close: string;
|
|
8
8
|
};
|
|
9
9
|
/** The control the focus returns to once the dialog closes. */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BoardLevel } from '@miragon/event-storming-schema-model';
|
|
2
2
|
/** The icons the guide gives these entries (guide §5.14, the shell's common set). */
|
|
3
|
-
export type BoardMenuIcon =
|
|
3
|
+
export type BoardMenuIcon = "file-image" | "file-code-corner" | "keyboard";
|
|
4
4
|
interface BoardMenuItem {
|
|
5
5
|
readonly id: string;
|
|
6
6
|
readonly label: string;
|
|
@@ -8,21 +8,21 @@ interface BoardMenuItem {
|
|
|
8
8
|
readonly keepEnabledWhenReadOnly?: boolean;
|
|
9
9
|
}
|
|
10
10
|
export interface BoardMenuAction extends BoardMenuItem {
|
|
11
|
-
readonly kind:
|
|
11
|
+
readonly kind: "action";
|
|
12
12
|
readonly shortcut?: string;
|
|
13
13
|
onSelect(): void;
|
|
14
14
|
}
|
|
15
15
|
export interface BoardMenuDialog extends BoardMenuItem {
|
|
16
|
-
readonly kind:
|
|
16
|
+
readonly kind: "dialog";
|
|
17
17
|
onSelect(): void;
|
|
18
18
|
}
|
|
19
19
|
export interface BoardMenuCheckbox extends BoardMenuItem {
|
|
20
|
-
readonly kind:
|
|
20
|
+
readonly kind: "checkbox";
|
|
21
21
|
checked(): boolean;
|
|
22
22
|
onToggle(checked: boolean): void;
|
|
23
23
|
}
|
|
24
24
|
export interface BoardMenuRadioGroup {
|
|
25
|
-
readonly kind:
|
|
25
|
+
readonly kind: "radio";
|
|
26
26
|
readonly id: string;
|
|
27
27
|
readonly label: string;
|
|
28
28
|
readonly options: ReadonlyArray<{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type ShortcutPlatform =
|
|
1
|
+
export type ShortcutPlatform = "mac" | "other";
|
|
2
2
|
export interface ShortcutKeyNames {
|
|
3
3
|
readonly ctrl: string;
|
|
4
4
|
readonly shift: string;
|
|
@@ -34,7 +34,7 @@ export interface BoardShortcutOptions {
|
|
|
34
34
|
readonly fileKeys?: boolean | undefined;
|
|
35
35
|
}
|
|
36
36
|
/** "⌘O" on macOS, "Ctrl+O" elsewhere: the chip of a Cmd/Ctrl key the app binds itself. */
|
|
37
|
-
export declare function commandKeyLabel(key: string, platform: ShortcutPlatform, keyNames: Pick<ShortcutKeyNames,
|
|
37
|
+
export declare function commandKeyLabel(key: string, platform: ShortcutPlatform, keyNames: Pick<ShortcutKeyNames, "ctrl">): string;
|
|
38
38
|
/**
|
|
39
39
|
* Every shortcut of the board, grouped as guide §5.4 asks (View, Edit, the notation's tools),
|
|
40
40
|
* after the web app's File keys where it binds them.
|
|
@@ -20,7 +20,7 @@ export interface CollaborativeEventStormingOptions extends CollaborativeModelerO
|
|
|
20
20
|
freeRectInsets?: (() => FreeRectInsets) | undefined;
|
|
21
21
|
}
|
|
22
22
|
/** The elements surface with `bounds`, which every Event Storming mount answers. */
|
|
23
|
-
export type EventStormingElementsSurface = ElementsSurface & Required<Pick<ElementsSurface,
|
|
23
|
+
export type EventStormingElementsSurface = ElementsSurface & Required<Pick<ElementsSurface, "bounds">>;
|
|
24
24
|
/** The contract surface plus the wrapped diagram for host-specific wiring. */
|
|
25
25
|
export interface CollaborativeEventStormingModeler extends CollaborativeModeler {
|
|
26
26
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EventStormingColorPicker.d.ts","sourceRoot":"","sources":["../../src/color-picker/EventStormingColorPicker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,qBAAqB,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAgB,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAS7E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAwB;IAazC,OAAO,CAAC,QAAQ,CAAC,MAAM;IAEvB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAd3B,MAAM,CAAC,OAAO,WAAmD;IAEjE,OAAO,CAAC,OAAO,CAA0B;IAEzC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAE3B;IACF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAEpB;gBAGiB,MAAM,EAAE,MAAM,EAC/B,QAAQ,EAAE,QAAQ,EACD,QAAQ,EAAE,qBAAqB;IAMlD,sFAAsF;IACtF,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IA+CvE,KAAK,IAAI,IAAI;
|
|
1
|
+
{"version":3,"file":"EventStormingColorPicker.d.ts","sourceRoot":"","sources":["../../src/color-picker/EventStormingColorPicker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,qBAAqB,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAgB,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAS7E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAwB;IAazC,OAAO,CAAC,QAAQ,CAAC,MAAM;IAEvB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAd3B,MAAM,CAAC,OAAO,WAAmD;IAEjE,OAAO,CAAC,OAAO,CAA0B;IAEzC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAE3B;IACF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAEpB;gBAGiB,MAAM,EAAE,MAAM,EAC/B,QAAQ,EAAE,QAAQ,EACD,QAAQ,EAAE,qBAAqB;IAMlD,sFAAsF;IACtF,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IA+CvE,KAAK,IAAI,IAAI;CAUd"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as ContextPad } from 'diagram-js/lib/features/context-pad/ContextPad';
|
|
2
|
+
import { default as Canvas } from 'diagram-js/lib/core/Canvas';
|
|
2
3
|
import { default as EventBus } from 'diagram-js/lib/core/EventBus';
|
|
3
4
|
import { default as Modeling } from 'diagram-js/lib/features/modeling/Modeling';
|
|
4
5
|
import { default as Connect } from 'diagram-js/lib/features/connect/Connect';
|
|
@@ -22,8 +23,15 @@ export default class EventStormingContextPadProvider implements ContextPadProvid
|
|
|
22
23
|
private readonly factory;
|
|
23
24
|
private readonly colorPicker;
|
|
24
25
|
private readonly readOnly?;
|
|
26
|
+
private readonly canvas?;
|
|
25
27
|
static $inject: string[];
|
|
26
|
-
constructor(contextPad: ContextPad, modeling: Modeling, connect: Connect, create: Create, popupMenu: PopupMenu, eventStormingModeling: EventStormingModeling, labelEditing: EventStormingLabelEditing, factory: EventStormingElementFactory, colorPicker: EventStormingColorPicker, eventBus?: EventBus, readOnly?: Pick<EventStormingReadOnly, "isReadOnly"> | undefined);
|
|
28
|
+
constructor(contextPad: ContextPad, modeling: Modeling, connect: Connect, create: Create, popupMenu: PopupMenu, eventStormingModeling: EventStormingModeling, labelEditing: EventStormingLabelEditing, factory: EventStormingElementFactory, colorPicker: EventStormingColorPicker, eventBus?: EventBus, readOnly?: Pick<EventStormingReadOnly, "isReadOnly"> | undefined, canvas?: Pick<Canvas, "focus" | "getContainer"> | undefined);
|
|
27
29
|
getContextPadEntries(element: Element): ContextPadEntries;
|
|
30
|
+
/**
|
|
31
|
+
* The entries take no focus, so a click on one drops it to `<body>`, where the board's keys do
|
|
32
|
+
* not act: Cmd/Ctrl+Z after a delete or Delete after a connect would do nothing. Entries that
|
|
33
|
+
* open the label editor, the type popup or the colour picker leave the focus to them.
|
|
34
|
+
*/
|
|
35
|
+
private focusingCanvas;
|
|
28
36
|
}
|
|
29
37
|
//# sourceMappingURL=EventStormingContextPadProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EventStormingContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/EventStormingContextPadProvider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAC7E,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,OAAO,MAAM,yCAAyC,CAAC;AACnE,OAAO,KAAK,MAAM,MAAM,uCAAuC,CAAC;AAChE,OAAO,KAAK,SAAS,MAAM,8CAA8C,CAAC;AAC1E,OAAO,KAAK,EACV,iBAAiB,EACjB,OAAO,IAAI,kBAAkB,EAC9B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAO1D,OAAO,KAAK,qBAAqB,MAAM,sCAAsC,CAAC;AAC9E,OAAO,KAAK,yBAAyB,MAAM,+CAA+C,CAAC;AAC3F,OAAO,KAAK,2BAA2B,MAAM,yCAAyC,CAAC;AACvF,OAAO,KAAK,wBAAwB,MAAM,6CAA6C,CAAC;AAExF,OAAO,EAA2B,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"EventStormingContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/EventStormingContextPadProvider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAC7E,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,OAAO,MAAM,yCAAyC,CAAC;AACnE,OAAO,KAAK,MAAM,MAAM,uCAAuC,CAAC;AAChE,OAAO,KAAK,SAAS,MAAM,8CAA8C,CAAC;AAC1E,OAAO,KAAK,EACV,iBAAiB,EACjB,OAAO,IAAI,kBAAkB,EAC9B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAO1D,OAAO,KAAK,qBAAqB,MAAM,sCAAsC,CAAC;AAC9E,OAAO,KAAK,yBAAyB,MAAM,+CAA+C,CAAC;AAC3F,OAAO,KAAK,2BAA2B,MAAM,yCAAyC,CAAC;AACvF,OAAO,KAAK,wBAAwB,MAAM,6CAA6C,CAAC;AAExF,OAAO,EAA2B,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAe5F,mCAAmC;AACnC,MAAM,CAAC,OAAO,OAAO,+BAAgC,YAAW,kBAAkB;IAkB9E,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,qBAAqB;IACtC,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,WAAW;IAE5B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAC1B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;IA3B1B,MAAM,CAAC,OAAO,WAaZ;gBAGA,UAAU,EAAE,UAAU,EACL,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,qBAAqB,EAAE,qBAAqB,EAC5C,YAAY,EAAE,yBAAyB,EACvC,OAAO,EAAE,2BAA2B,EACpC,WAAW,EAAE,wBAAwB,EACtD,QAAQ,CAAC,EAAE,QAAQ,EACF,QAAQ,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,YAAA,EACpD,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,GAAG,cAAc,CAAC,YAAA;IAQlE,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,iBAAiB;IAkIzD;;;;OAIG;IACH,OAAO,CAAC,cAAc;CAMvB"}
|
|
@@ -15,9 +15,10 @@ export default class EventStormingRenderer extends BaseRenderer {
|
|
|
15
15
|
/** Freeform drawing: polyline/polygon from relative points (see EventStormingDrawTool). */
|
|
16
16
|
private drawDrawing;
|
|
17
17
|
/**
|
|
18
|
-
* Every sticky (and the free note) is a rounded rectangle with centered, wrapped
|
|
19
|
-
*
|
|
20
|
-
*
|
|
18
|
+
* Every sticky (and the free note) is a rounded rectangle with centered, wrapped text inside —
|
|
19
|
+
* the label lives IN the sticky, never beside it. A user-picked `color` overrides the kind's
|
|
20
|
+
* fill and turns the text black or white, whichever reads better on it; the border stays the
|
|
21
|
+
* kind's own (so the type remains recognizable).
|
|
21
22
|
*/
|
|
22
23
|
private drawSticky;
|
|
23
24
|
drawConnection(visuals: SVGElement, element: ConnectionLike): SVGElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EventStormingRenderer.d.ts","sourceRoot":"","sources":["../../src/draw/EventStormingRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAE5D,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"EventStormingRenderer.d.ts","sourceRoot":"","sources":["../../src/draw/EventStormingRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAE5D,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAgCzF,OAAO,KAAK,wBAAwB,MAAM,6CAA6C,CAAC;AAKxF,8FAA8F;AAC9F,eAAO,MAAM,kBAAkB,gCAAgC,CAAC;AAWhE,iGAAiG;AACjG,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAoCtE,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,YAAY;IAK3D,OAAO,CAAC,QAAQ,CAAC,WAAW;IAJ9B,MAAM,CAAC,OAAO,WAA4C;gBAGxD,QAAQ,EAAE,QAAQ,EACD,WAAW,EAAE,wBAAwB;IAK/C,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,GAAG,UAAU;IAMvE,2FAA2F;IAC3F,OAAO,CAAC,WAAW;IAiBnB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAgET,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,GAAG,UAAU;IA+BxE,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAKtC,iBAAiB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM;CAK/D"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { MIRAGON } from '../theme/index.js';
|
|
2
|
+
/**
|
|
3
|
+
* Text colour on a sticky's fill (guide §10.6): `schwarz` or `weiss`, whichever contrasts more
|
|
4
|
+
* with the fill, so a fill the user picks keeps its text readable. A translucent fill counts as
|
|
5
|
+
* it shows over the canvas ground; a fill the renderer cannot read keeps `schwarz`.
|
|
6
|
+
*/
|
|
7
|
+
export declare function textColorOn(fill: string): typeof MIRAGON.schwarz | typeof MIRAGON.weiss;
|
|
8
|
+
//# sourceMappingURL=contrast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"contrast.d.ts","sourceRoot":"","sources":["../../src/draw/contrast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AA6F5C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,OAAO,CAAC,OAAO,GAAG,OAAO,OAAO,CAAC,KAAK,CAKvF"}
|
package/dist/draw/lucide.d.ts
CHANGED
|
@@ -5,21 +5,21 @@
|
|
|
5
5
|
*/
|
|
6
6
|
export declare const LUCIDE: {
|
|
7
7
|
readonly plus: "<path d=\"M5 12h14\"/><path d=\"M12 5v14\"/>";
|
|
8
|
-
readonly
|
|
8
|
+
readonly "arrow-right": "<path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/>";
|
|
9
9
|
readonly pencil: "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/><path d=\"m15 5 4 4\"/>";
|
|
10
10
|
readonly trash: "<path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M3 6h18\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>";
|
|
11
11
|
readonly replace: "<path d=\"M14 4a1 1 0 0 1 1-1\"/><path d=\"M15 10a1 1 0 0 1-1-1\"/><path d=\"M21 4a1 1 0 0 0-1-1\"/><path d=\"M21 9a1 1 0 0 1-1 1\"/><path d=\"m3 7 3 3 3-3\"/><path d=\"M6 10V5a2 2 0 0 1 2-2h2\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>";
|
|
12
12
|
readonly palette: "<path d=\"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\"/><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>";
|
|
13
|
-
readonly
|
|
13
|
+
readonly "line-style": "<path d=\"M11 5h2\"/><path d=\"M15 12h6\"/><path d=\"M19 5h2\"/><path d=\"M3 12h6\"/><path d=\"M3 19h18\"/><path d=\"M3 5h2\"/>";
|
|
14
14
|
readonly bold: "<path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\"/>";
|
|
15
15
|
readonly italic: "<line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\"/><line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\"/><line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\"/>";
|
|
16
16
|
readonly list: "<path d=\"M3 5h.01\"/><path d=\"M3 12h.01\"/><path d=\"M3 19h.01\"/><path d=\"M8 5h13\"/><path d=\"M8 12h13\"/><path d=\"M8 19h13\"/>";
|
|
17
|
-
readonly
|
|
18
|
-
readonly
|
|
19
|
-
readonly
|
|
20
|
-
readonly
|
|
21
|
-
readonly
|
|
22
|
-
readonly
|
|
17
|
+
readonly "text-align-start": "<path d=\"M21 5H3\"/><path d=\"M15 12H3\"/><path d=\"M17 19H3\"/>";
|
|
18
|
+
readonly "text-align-center": "<path d=\"M21 5H3\"/><path d=\"M17 12H7\"/><path d=\"M19 19H5\"/>";
|
|
19
|
+
readonly "text-align-end": "<path d=\"M21 5H3\"/><path d=\"M21 12H9\"/><path d=\"M21 19H7\"/>";
|
|
20
|
+
readonly "align-vertical-justify-start": "<rect width=\"14\" height=\"6\" x=\"5\" y=\"16\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"6\" rx=\"2\"/><path d=\"M2 2h20\"/>";
|
|
21
|
+
readonly "align-vertical-justify-center": "<rect width=\"14\" height=\"6\" x=\"5\" y=\"16\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"2\" rx=\"2\"/><path d=\"M2 12h20\"/>";
|
|
22
|
+
readonly "align-vertical-justify-end": "<rect width=\"14\" height=\"6\" x=\"5\" y=\"12\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"2\" rx=\"2\"/><path d=\"M2 22h20\"/>";
|
|
23
23
|
readonly x: "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>";
|
|
24
24
|
};
|
|
25
25
|
export type LucideIconName = keyof typeof LUCIDE;
|
package/dist/draw/styles.d.ts
CHANGED
|
@@ -12,14 +12,31 @@ export interface StickyStyle {
|
|
|
12
12
|
* size and fill/border. Single source for the renderer, element factory, palette previews and
|
|
13
13
|
* the color-picker swatches. Aggregate, policy and external system share the large block format —
|
|
14
14
|
* they occupy the same slot in the grammar (receive commands / react to events); actors are the
|
|
15
|
-
* small corner stickies.
|
|
15
|
+
* small corner stickies. Each border is the fill's hue, dark enough for 3:1 on the canvas ground:
|
|
16
|
+
* the light fills barely differ from the ground, so the border carries the sticky's outline.
|
|
16
17
|
*/
|
|
17
18
|
export declare const STICKY_STYLES: Record<StickyKind, StickyStyle>;
|
|
18
19
|
/** Free-text note: grows with its text (see `noteMetrics`) unless resized by hand, neutral grey. */
|
|
19
20
|
export declare const NOTE_STYLE: {
|
|
20
21
|
readonly label: "Note";
|
|
21
22
|
readonly fill: "#ECECEC";
|
|
22
|
-
readonly stroke: "#
|
|
23
|
+
readonly stroke: "#8F8A8A";
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Provisional (blank append) sticky: plain paper with a dashed border in `kontur`, no kind yet.
|
|
27
|
+
* The border is all that sets it off the canvas ground, so it keeps 3:1 there (guide §3.6).
|
|
28
|
+
*/
|
|
29
|
+
export declare const PROVISIONAL_STICKY: {
|
|
30
|
+
readonly fill: "#FFFFFF";
|
|
31
|
+
readonly stroke: "#8F8A8A";
|
|
32
|
+
readonly dash: "6 4";
|
|
33
|
+
};
|
|
34
|
+
/** Soft drop shadow that makes stickies read as paper, in the ink of the design system's shadows. */
|
|
35
|
+
export declare const STICKY_SHADOW: {
|
|
36
|
+
readonly color: "#1D1D1D";
|
|
37
|
+
readonly opacity: 0.2;
|
|
38
|
+
readonly dy: 5;
|
|
39
|
+
readonly blur: 5;
|
|
23
40
|
};
|
|
24
41
|
/** Smallest hand-resized note box — keeps a shrunken note grabbable and its handles apart. */
|
|
25
42
|
export declare const NOTE_MIN_RESIZE: {
|
|
@@ -67,14 +84,18 @@ export declare function isManualNoteBox(label: string, box: {
|
|
|
67
84
|
export declare const COLORS: {
|
|
68
85
|
readonly paper: "#F9F7F7";
|
|
69
86
|
readonly ink: "#1D1D1D";
|
|
70
|
-
readonly inkSoft: "#
|
|
87
|
+
readonly inkSoft: "#6B6666";
|
|
71
88
|
readonly surface: "#FFFFFF";
|
|
72
89
|
readonly stroke: "#1D1D1D";
|
|
73
|
-
/** The single connection style:
|
|
74
|
-
readonly arrow: "#
|
|
90
|
+
/** The single connection style: an arrowed line in `kontur`, as edges are (guide §10.1). */
|
|
91
|
+
readonly arrow: "#8F8A8A";
|
|
75
92
|
readonly accent: "#335DE5";
|
|
76
93
|
readonly accentSoft: "rgba(51,93,229,0.12)";
|
|
77
|
-
/**
|
|
94
|
+
/**
|
|
95
|
+
* Text inside a sticky on its kind's fill: #1D1D1D reaches 4.5:1 on all eight fills, the hotspot
|
|
96
|
+
* included. A fill the user picks gets black or white text, whichever reads better
|
|
97
|
+
* (`textColorOn`).
|
|
98
|
+
*/
|
|
78
99
|
readonly stickyText: "#1D1D1D";
|
|
79
100
|
};
|
|
80
101
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAG/F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,MAAM,WAAW,WAAW;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAG/F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,MAAM,WAAW,WAAW;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AAGH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,UAAU,EAAE,WAAW,CAehD,CAAC;AAEX,oGAAoG;AACpG,eAAO,MAAM,UAAU;;;;CAAsE,CAAC;AAG9F;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX,qGAAqG;AACrG,eAAO,MAAM,aAAa;;;;;CAAoE,CAAC;AAE/F,8FAA8F;AAC9F,eAAO,MAAM,eAAe;;;CAAqC,CAAC;AAElE,oGAAoG;AACpG,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,sDAAsD;AACtD,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,8FAA8F;AAC9F,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,2FAA2F;AAC3F,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAWrC;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAe7F;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAG9F;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM;;;;;;IAMjB,4FAA4F;;;;IAI5F;;;;OAIG;;CAEK,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,WAAW,WAAkB,CAAC;AAE3C,eAAO,MAAM,IAAI;IACf;;;;;;;;;OASG;;;CAIK,CAAC"}
|
|
@@ -38,6 +38,12 @@ export default class EventStormingDrawTool {
|
|
|
38
38
|
private toCanvasPoint;
|
|
39
39
|
/** Palette/context-pad/menus live INSIDE the container — let their clicks through. */
|
|
40
40
|
private isChromeTarget;
|
|
41
|
+
/**
|
|
42
|
+
* Enter and Escape belong to the tool only when aimed at the modeler: the canvas, or the palette
|
|
43
|
+
* entry Enter started it from. A host's fields and buttons, the zoom panel, an open menu or
|
|
44
|
+
* dialog and the label editor keep theirs.
|
|
45
|
+
*/
|
|
46
|
+
private ownsKey;
|
|
41
47
|
private readonly onMouseDown;
|
|
42
48
|
private readonly onDblClick;
|
|
43
49
|
private readonly onMouseMove;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EventStormingDrawTool.d.ts","sourceRoot":"","sources":["../../src/draw-tool/EventStormingDrawTool.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AAGzE,OAAO,KAAK,2BAA2B,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"EventStormingDrawTool.d.ts","sourceRoot":"","sources":["../../src/draw-tool/EventStormingDrawTool.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AAGzE,OAAO,KAAK,2BAA2B,MAAM,yCAAyC,CAAC;AAYvF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,qBAAqB;IAStC,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,OAAO;IAZ1B,MAAM,CAAC,OAAO,WAAkF;IAEhG,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,KAAK,CAA2B;gBAGrB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,2BAA2B;IAQvD,QAAQ,IAAI,OAAO;IAInB,MAAM,IAAI,IAAI;IAKd;;;OAGG;IACH,OAAO,CAAC,cAAc;IAKtB,QAAQ,IAAI,IAAI;IAgBhB,4EAA4E;IAC5E,MAAM,IAAI,IAAI;IAad,6DAA6D;IAC7D,OAAO,CAAC,YAAY;IAapB,MAAM,IAAI,IAAI;IAId,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,aAAa;IAUrB,sFAAsF;IACtF,OAAO,CAAC,cAAc;IAKtB;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,QAAQ,CAAC,WAAW,CAsB1B;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAKzB;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAcxB;IAEF,OAAO,CAAC,aAAa;IAiDrB,OAAO,CAAC,YAAY;CAMrB"}
|