@miragon/modeler-shell 0.1.0 → 0.2.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.
Files changed (97) hide show
  1. package/API.md +1051 -84
  2. package/README.md +162 -31
  3. package/dist/appearance-BBaM_4bD.d.ts +323 -0
  4. package/dist/appearance-XX3JC3pI.d.cts +323 -0
  5. package/dist/{chunk-6LQOFACK.js → chunk-66HCSJNY.js} +1247 -31
  6. package/dist/chunk-66HCSJNY.js.map +1 -0
  7. package/dist/{chunk-RJRFR6N3.js → chunk-KYDG5DMX.js} +2 -2
  8. package/dist/{chunk-5JSZ4VGA.js → chunk-OADW3GPA.js} +240 -6
  9. package/dist/chunk-OADW3GPA.js.map +1 -0
  10. package/dist/core.cjs +260 -6
  11. package/dist/core.cjs.map +1 -1
  12. package/dist/core.d.cts +81 -6
  13. package/dist/core.d.ts +81 -6
  14. package/dist/core.js +43 -3
  15. package/dist/diagram-js.cjs +34 -2
  16. package/dist/diagram-js.cjs.map +1 -1
  17. package/dist/diagram-js.d.cts +10 -3
  18. package/dist/diagram-js.d.ts +10 -3
  19. package/dist/diagram-js.js +14 -2
  20. package/dist/diagram-js.js.map +1 -1
  21. package/dist/index.cjs +1654 -197
  22. package/dist/index.cjs.map +1 -1
  23. package/dist/index.d.cts +18 -9
  24. package/dist/index.d.ts +18 -9
  25. package/dist/index.js +44 -4
  26. package/dist/shell.css +692 -3
  27. package/dist/testing-vscode-stub.js +2 -2
  28. package/dist/testing.cjs +2849 -550
  29. package/dist/testing.cjs.map +1 -1
  30. package/dist/testing.d.cts +75 -9
  31. package/dist/testing.d.ts +75 -9
  32. package/dist/testing.js +2744 -558
  33. package/dist/testing.js.map +1 -1
  34. package/dist/toasts-Bp0REqdq.d.cts +142 -0
  35. package/dist/toasts-Bp0REqdq.d.ts +142 -0
  36. package/dist/{types-OuFlqZp0.d.cts → types-CnRrINRs.d.cts} +170 -9
  37. package/dist/{types-DnZn9CPw.d.ts → types-PuDZczzy.d.ts} +170 -9
  38. package/dist/vscode-extension.js +2 -2
  39. package/dist/vscode-webview.cjs +1541 -178
  40. package/dist/vscode-webview.cjs.map +1 -1
  41. package/dist/vscode-webview.d.cts +6 -4
  42. package/dist/vscode-webview.d.ts +6 -4
  43. package/dist/vscode-webview.js +11 -2
  44. package/dist/vscode-webview.js.map +1 -1
  45. package/package.json +2 -2
  46. package/src/core/feedback/appearance.ts +141 -0
  47. package/src/core/feedback/problems.ts +23 -0
  48. package/src/core/feedback/toasts.ts +118 -0
  49. package/src/core/fit.ts +18 -3
  50. package/src/core/index.ts +43 -0
  51. package/src/core/keymap.ts +20 -0
  52. package/src/core/messages.ts +71 -0
  53. package/src/core/types.ts +24 -2
  54. package/src/core/web-chrome/bottom-row.ts +37 -0
  55. package/src/core/web-chrome/drop.ts +78 -0
  56. package/src/core/web-chrome/top-row.ts +66 -0
  57. package/src/diagram-js/service.ts +4 -1
  58. package/src/diagram-js/viewport.ts +19 -0
  59. package/src/dom/buttons.css +124 -0
  60. package/src/dom/feedback/appearance.ts +184 -0
  61. package/src/dom/feedback/feedback.css +435 -0
  62. package/src/dom/feedback/problems-popover.ts +287 -0
  63. package/src/dom/feedback/toasts.ts +431 -0
  64. package/src/dom/index.ts +13 -0
  65. package/src/dom/keys.ts +8 -0
  66. package/src/dom/menu.ts +28 -17
  67. package/src/dom/mount.ts +290 -20
  68. package/src/dom/problems.ts +5 -4
  69. package/src/dom/shell-dom.css +7 -4
  70. package/src/dom/types.ts +188 -6
  71. package/src/dom/web/drop-zone.ts +181 -0
  72. package/src/dom/web/empty-state.ts +144 -0
  73. package/src/dom/web/legal.ts +75 -0
  74. package/src/dom/web/menu-groups.ts +69 -0
  75. package/src/dom/web/primary.ts +124 -0
  76. package/src/dom/web/web.css +386 -0
  77. package/src/shell.css +3 -0
  78. package/src/testing/case-tools.ts +164 -0
  79. package/src/testing/cases.ts +209 -144
  80. package/src/testing/checks.ts +51 -15
  81. package/src/testing/facts.ts +56 -2
  82. package/src/testing/geometry.ts +206 -26
  83. package/src/testing/harness.ts +56 -7
  84. package/src/testing/index.ts +4 -0
  85. package/src/testing/page-tools.ts +24 -1
  86. package/src/testing/page.ts +10 -0
  87. package/src/testing/web-cases.ts +913 -0
  88. package/src/testing/web-checks.ts +1049 -0
  89. package/src/testing/web-facts.ts +713 -0
  90. package/src/vscode/webview/mount.ts +13 -1
  91. package/dist/chunk-5JSZ4VGA.js.map +0 -1
  92. package/dist/chunk-6LQOFACK.js.map +0 -1
  93. package/dist/keymap-CObQE6q6.d.cts +0 -151
  94. package/dist/keymap-DORzHnK-.d.ts +0 -151
  95. package/dist/types-B6NfkiUG.d.cts +0 -66
  96. package/dist/types-B6NfkiUG.d.ts +0 -66
  97. /package/dist/{chunk-RJRFR6N3.js.map → chunk-KYDG5DMX.js.map} +0 -0
@@ -1,151 +0,0 @@
1
- import { c as ShellHost } from './types-B6NfkiUG.js';
2
-
3
- /**
4
- * Every text the shell shows or announces, in one table (guide §2, shared terms). English by
5
- * default; a localized modeler overrides the whole table in its language, numbers arrive already
6
- * formatted through `Intl` in that language.
7
- */
8
- interface ShellMessages {
9
- /** Menu trigger `aria-label` and tooltip, dropdown `aria-label`. */
10
- menu: string;
11
- /** Palette `aria-label`. */
12
- tools: string;
13
- /** `aria-label` of the focusable canvas `<svg>` (`role="application"`); a modeler names its notation. */
14
- canvas: string;
15
- /** Zoom panel `aria-label`. */
16
- zoom: string;
17
- zoomOut: string;
18
- zoomIn: string;
19
- /** Tooltip of the readout, e.g. `(percent) => "Zoom to " + percent` with percent "100%". */
20
- zoomToActual(percent: string): string;
21
- /** `aria-label` of the readout: "Zoom to 100% (now 86%)". */
22
- zoomToActualNow(percent: string, now: string): string;
23
- fit: string;
24
- /** Legend title and the Model-group checkbox. */
25
- legend: string;
26
- closeLegend: string;
27
- /** Pill text: "1 problem", "2 problems". */
28
- problems(count: number, formattedCount: string): string;
29
- /** Pill `aria-label`: "2 problems, 1 error", "2 problems, no errors". */
30
- problemsLabel(count: number, errors: number, formattedCount: string, formattedErrors: string): string;
31
- /** Pill tooltip in the IDE host. */
32
- showProblems: string;
33
- /** Empty-file hint (guide §13.5). */
34
- emptyHint: string;
35
- insertExample: string;
36
- /** Status box for an invalid file; `diagram` names the notation ("Event Storming board"). */
37
- invalidFile(diagram: string): string;
38
- /** Key names in shortcut chips outside macOS (German: Strg, Umschalt, Plus, Minus). */
39
- keyNames: {
40
- ctrl: string;
41
- shift: string;
42
- plus: string;
43
- minus: string;
44
- };
45
- }
46
- /** Every key optional; an `undefined` value keeps the default (a conditional override). */
47
- type ShellMessageOverrides = {
48
- [Key in Exclude<keyof ShellMessages, "keyNames">]?: ShellMessages[Key] | undefined;
49
- } & {
50
- keyNames?: {
51
- [Key in keyof ShellMessages["keyNames"]]?: string | undefined;
52
- } | undefined;
53
- };
54
- declare const defaultMessages: ShellMessages;
55
- /** `defaultMessages` with `overrides` applied (`keyNames` merged key by key). */
56
- declare function resolveMessages(overrides?: ShellMessageOverrides | undefined): ShellMessages;
57
-
58
- /** The only keys the chrome handles (guide §5.8). */
59
- type ChromeKey = "zoomIn" | "zoomOut" | "zoomToActual" | "fit";
60
- /** The `KeyboardEvent` fields the keymap reads. */
61
- interface KeyLike {
62
- key: string;
63
- code: string;
64
- metaKey: boolean;
65
- ctrlKey: boolean;
66
- shiftKey: boolean;
67
- altKey: boolean;
68
- isComposing?: boolean | undefined;
69
- }
70
- /**
71
- * Which chrome key `event` is, ignoring where it was pressed:
72
- * - `zoomIn`: Cmd/Ctrl + `+` or `=` (by `key`, with or without Shift), or `NumpadAdd` (by `code`);
73
- * - `zoomOut`: Cmd/Ctrl + `-` or `_`, or `NumpadSubtract`;
74
- * - `zoomToActual`: Cmd/Ctrl + `0`, or `Numpad0` (also with NumLock off);
75
- * - `fit`: Shift + `Digit1` (by `code`, every layout) without Cmd, Ctrl or Alt.
76
- * Cmd/Ctrl is `metaKey || ctrlKey` on every platform; nothing matches with `altKey` (AltGr).
77
- */
78
- declare function matchChromeKey(event: KeyLike): ChromeKey | undefined;
79
- /**
80
- * Cmd/Ctrl + Z, Cmd/Ctrl + Shift + Z or Cmd/Ctrl + Y, without Alt (by `key`, `code` as fallback).
81
- * Cmd/Ctrl + Shift + Y is not redo (VS Code toggles its Debug Console with it).
82
- */
83
- declare function isUndoRedoKey(event: KeyLike): boolean;
84
- /** A text field: every input, select list and editable text (label editor, inspector, dialogs). */
85
- declare const TEXT_FIELD_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
86
- /** Where a key was pressed, as the shell's one `keydown` listener sees it. */
87
- interface KeyContext {
88
- host: ShellHost;
89
- /** The event target matches `TEXT_FIELD_SELECTOR` or is `isContentEditable`. */
90
- inTextField: boolean;
91
- /** The shell's menu dropdown is open. */
92
- menuOpen: boolean;
93
- /** A popover or dialog (`[role="dialog"]`, modal or not) is open. */
94
- dialogOpen: boolean;
95
- /** A modal dialog (`[role="dialog"][aria-modal="true"]`) is open: chrome keys do not act. */
96
- modalOpen: boolean;
97
- /** `event.defaultPrevented` when the listener ran: the canvas (or the modeler) handled the key. */
98
- defaultPrevented: boolean;
99
- }
100
- type KeyAction = ChromeKey | "closeMenu";
101
- interface KeyDecision {
102
- /** What the shell executes; `undefined` = nothing. */
103
- action?: KeyAction;
104
- preventDefault: boolean;
105
- stopPropagation: boolean;
106
- }
107
- /**
108
- * The key rules of guide §5.8 and §13.5 in one place:
109
- * 1. Escape with the menu open: `closeMenu`, prevented; in the IDE host stopped whenever the menu
110
- * or a dialog/popover is open. During IME composition Escape belongs to the IME: no `closeMenu`.
111
- * 2. Zoom keys: executed and prevented unless composing, in a text field or with a modal dialog;
112
- * in the IDE host always stopped, also when not executed (VS Code must never zoom the window).
113
- * 3. Shift+1: `fit` under the same conditions; otherwise untouched (it types "!").
114
- * 4. IDE host, text field, undo/redo key: stopped only (the field keeps its native undo).
115
- * 5. IDE host, `defaultPrevented`: stopped (the canvas handled it; VS Code must not run it again).
116
- * Everything else passes untouched. `stopPropagation` is only ever true in the IDE host.
117
- */
118
- declare function decideKey(event: KeyLike, context: KeyContext): KeyDecision;
119
- /** The keyboard the user sits at; decides the shortcut labels (guide §5.8). */
120
- type Platform = "mac" | "other";
121
- /** The `navigator` fields `detectPlatform` reads. */
122
- interface NavigatorLike {
123
- platform?: string | undefined;
124
- userAgentData?: {
125
- platform?: string | undefined;
126
- } | undefined;
127
- }
128
- /**
129
- * `mac` when `userAgentData.platform ?? platform` matches `/mac/i`, else `other`; `other` without a
130
- * navigator. Read it in the webview or page itself, never from the extension host (VS Code Remote).
131
- */
132
- declare function detectPlatform(navigator?: NavigatorLike | undefined): Platform;
133
- /**
134
- * The tooltip chip text: macOS `⌘+`, `⌘−` (U+2212), `⌘0`, `⇧1`; elsewhere `Ctrl+Plus`,
135
- * `Ctrl+Minus`, `Ctrl+0`, `Shift+1` with the key names of the messages table.
136
- */
137
- declare function shortcutLabel(key: ChromeKey, platform: Platform, keyNames: ShellMessages["keyNames"]): string;
138
- /**
139
- * The `aria-keyshortcuts` value (WAI-ARIA names): zoom in `Meta+= Meta+Plus`, zoom out `Meta+-`,
140
- * 100 % `Meta+0`, fit `Shift+1`; outside macOS `Control` instead of `Meta`.
141
- */
142
- declare function ariaKeyShortcuts(key: ChromeKey, platform: Platform): string;
143
- /**
144
- * The `aria-keyshortcuts` value (WAI-ARIA names, guide §5.6) for a shortcut chip label: `"L"` →
145
- * `"L"`, `"⇧L"` → `"Shift+L"`, `"⌘⇧Z"` → `"Meta+Shift+Z"`, `"Ctrl+Shift+E"` → `"Control+Shift+E"`,
146
- * `"Del"` → `"Delete"`, `"Ctrl++"` → `"Control+Plus"`. `undefined` for a label that is not one key
147
- * combination (`"G then D"`, `"1–9"`, empty).
148
- */
149
- declare function ariaKeyShortcutsFromLabel(label: string): string | undefined;
150
-
151
- export { type ChromeKey as C, type KeyAction as K, type NavigatorLike as N, type Platform as P, type ShellMessageOverrides as S, TEXT_FIELD_SELECTOR as T, type KeyContext as a, type KeyDecision as b, type KeyLike as c, type ShellMessages as d, ariaKeyShortcuts as e, ariaKeyShortcutsFromLabel as f, decideKey as g, defaultMessages as h, detectPlatform as i, isUndoRedoKey as j, matchChromeKey as m, resolveMessages as r, shortcutLabel as s };
@@ -1,66 +0,0 @@
1
- /** A point in pixels or diagram coordinates, as the context says. */
2
- interface Point {
3
- x: number;
4
- y: number;
5
- }
6
- interface Size {
7
- width: number;
8
- height: number;
9
- }
10
- /** A rectangle; content bounds and viewboxes are in diagram coordinates. */
11
- interface Bounds {
12
- x: number;
13
- y: number;
14
- width: number;
15
- height: number;
16
- }
17
- /** A viewbox together with the scale diagram-js shows it at (`canvas.viewbox().scale`). */
18
- interface ScaledViewbox extends Bounds {
19
- scale: number;
20
- }
21
- /** Distances in pixels from the edges of the modeler's container. */
22
- interface Insets {
23
- top: number;
24
- right: number;
25
- bottom: number;
26
- left: number;
27
- }
28
- /**
29
- * The host column of guide §5.2: `ide` is a VS Code webview (later IntelliJ), `web` a Miragon web
30
- * app that owns its page, `embedded` a modeler inside a foreign page (designIQ, modeler-api hosts).
31
- */
32
- type ShellHost = "ide" | "web" | "embedded";
33
- /** The `data-chrome` names of the islands (guide §5.2, §13.4). `primary` is reserved for the web app. */
34
- type ChromeIsland = "menu" | "palette" | "primary" | "zoom" | "problems" | "legend" | "inspector" | "status";
35
- declare const CHROME_ISLANDS: readonly ChromeIsland[];
36
- /** Where the palette sits: in the top row, or in the second row below it (guide §5.15). */
37
- type PaletteRow = "top" | "second-row";
38
- /**
39
- * What the zoom panel and the chrome keys act on. The diagram-js viewport implements it; the DOM
40
- * shell only talks to this interface.
41
- */
42
- interface ZoomTarget {
43
- /** The current zoom, 1 = 100 % (diagram-js `canvas.zoom()`, rounded to three decimals). */
44
- zoom(): number;
45
- /** One step on the zoom raster around the container centre (diagram-js `zoomScroll.stepZoom`). */
46
- stepZoom(direction: 1 | -1): void;
47
- /** 100 % around the container centre. Counts as a user move. */
48
- zoomToActual(): void;
49
- /** Explicit fit (button, Shift+1, command): animated unless reduced motion, makes the view automatic. */
50
- fit(): void;
51
- /** False while there is nothing to fit (the content bounds are empty). */
52
- canFit(): boolean;
53
- /**
54
- * Calls `listener` after every viewbox change and whenever `canFit()` may have changed, possibly
55
- * several times per frame. Returns the unsubscribe function.
56
- */
57
- onChange(listener: () => void): () => void;
58
- }
59
- /** The persisted view (VS Code `setState`): JSON-serializable. */
60
- interface ViewportState {
61
- viewbox: Bounds;
62
- /** The user zoomed or panned since the last fit; a resize no longer refits. */
63
- userMoved: boolean;
64
- }
65
-
66
- export { type Bounds as B, CHROME_ISLANDS as C, type Insets as I, type PaletteRow as P, type ScaledViewbox as S, type ViewportState as V, type ZoomTarget as Z, type ChromeIsland as a, type Point as b, type ShellHost as c, type Size as d };
@@ -1,66 +0,0 @@
1
- /** A point in pixels or diagram coordinates, as the context says. */
2
- interface Point {
3
- x: number;
4
- y: number;
5
- }
6
- interface Size {
7
- width: number;
8
- height: number;
9
- }
10
- /** A rectangle; content bounds and viewboxes are in diagram coordinates. */
11
- interface Bounds {
12
- x: number;
13
- y: number;
14
- width: number;
15
- height: number;
16
- }
17
- /** A viewbox together with the scale diagram-js shows it at (`canvas.viewbox().scale`). */
18
- interface ScaledViewbox extends Bounds {
19
- scale: number;
20
- }
21
- /** Distances in pixels from the edges of the modeler's container. */
22
- interface Insets {
23
- top: number;
24
- right: number;
25
- bottom: number;
26
- left: number;
27
- }
28
- /**
29
- * The host column of guide §5.2: `ide` is a VS Code webview (later IntelliJ), `web` a Miragon web
30
- * app that owns its page, `embedded` a modeler inside a foreign page (designIQ, modeler-api hosts).
31
- */
32
- type ShellHost = "ide" | "web" | "embedded";
33
- /** The `data-chrome` names of the islands (guide §5.2, §13.4). `primary` is reserved for the web app. */
34
- type ChromeIsland = "menu" | "palette" | "primary" | "zoom" | "problems" | "legend" | "inspector" | "status";
35
- declare const CHROME_ISLANDS: readonly ChromeIsland[];
36
- /** Where the palette sits: in the top row, or in the second row below it (guide §5.15). */
37
- type PaletteRow = "top" | "second-row";
38
- /**
39
- * What the zoom panel and the chrome keys act on. The diagram-js viewport implements it; the DOM
40
- * shell only talks to this interface.
41
- */
42
- interface ZoomTarget {
43
- /** The current zoom, 1 = 100 % (diagram-js `canvas.zoom()`, rounded to three decimals). */
44
- zoom(): number;
45
- /** One step on the zoom raster around the container centre (diagram-js `zoomScroll.stepZoom`). */
46
- stepZoom(direction: 1 | -1): void;
47
- /** 100 % around the container centre. Counts as a user move. */
48
- zoomToActual(): void;
49
- /** Explicit fit (button, Shift+1, command): animated unless reduced motion, makes the view automatic. */
50
- fit(): void;
51
- /** False while there is nothing to fit (the content bounds are empty). */
52
- canFit(): boolean;
53
- /**
54
- * Calls `listener` after every viewbox change and whenever `canFit()` may have changed, possibly
55
- * several times per frame. Returns the unsubscribe function.
56
- */
57
- onChange(listener: () => void): () => void;
58
- }
59
- /** The persisted view (VS Code `setState`): JSON-serializable. */
60
- interface ViewportState {
61
- viewbox: Bounds;
62
- /** The user zoomed or panned since the last fit; a resize no longer refits. */
63
- userMoved: boolean;
64
- }
65
-
66
- export { type Bounds as B, CHROME_ISLANDS as C, type Insets as I, type PaletteRow as P, type ScaledViewbox as S, type ViewportState as V, type ZoomTarget as Z, type ChromeIsland as a, type Point as b, type ShellHost as c, type Size as d };