@formicoidea/labre-framework-ddd-event-storming 0.30.1 → 0.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commands.d.ts +4 -0
- package/dist/commands.js +62 -0
- package/dist/descriptor.d.ts +1 -1
- package/dist/descriptor.js +1 -1
- package/dist/effects.d.ts +2 -2
- package/dist/effects.js +2 -2
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/toolbar/event-storming-menu.d.ts +15 -8
- package/dist/toolbar/event-storming-menu.js +23 -72
- package/dist/translations.d.ts +14 -0
- package/dist/translations.js +15 -0
- package/dist/view.js +5 -2
- package/package.json +3 -3
package/dist/commands.js
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { addConnector, addSticky, ES_HOTSPOT, ES_STICKIES, placeDddElement, } from '@formicoidea/labre-ddd-shared';
|
|
2
|
+
import { svg } from 'lit';
|
|
3
|
+
/**
|
|
4
|
+
* The Event Storming palette as commands: the seven colour-coded stickies, the
|
|
5
|
+
* hotspot and a flow arrow. Declared once and read by the sub-menu, the keymap,
|
|
6
|
+
* Settings › Shortcuts, the catalogue and the agent (`docs/adr/0008`).
|
|
7
|
+
*/
|
|
8
|
+
const squareSwatch = (color) => svg `<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3" fill="${color}"/></svg>`;
|
|
9
|
+
const diamondSwatch = (color) => svg `<svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" transform="rotate(45 12 12)" fill="${color}"/></svg>`;
|
|
10
|
+
const flowSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><path d="M4 12 H18" stroke="currentColor" stroke-width="2"/><path d="M16 8 L20 12 L16 16" stroke="currentColor" stroke-width="2" fill="none"/></svg>`;
|
|
11
|
+
const SPECS = [
|
|
12
|
+
...ES_STICKIES.map((preset) => ({
|
|
13
|
+
id: `add${preset.kind[0].toUpperCase()}${preset.kind.slice(1)}`,
|
|
14
|
+
label: preset.label,
|
|
15
|
+
iconKey: `ddd-event-storming.sticky.${preset.kind}`,
|
|
16
|
+
element: `sticky:${preset.kind}`,
|
|
17
|
+
icon: squareSwatch(preset.fill),
|
|
18
|
+
run: std => placeDddElement(std, (surface, cx, cy) => addSticky(surface, std, cx, cy, {
|
|
19
|
+
fill: preset.fill,
|
|
20
|
+
text: preset.text,
|
|
21
|
+
label: preset.label,
|
|
22
|
+
})),
|
|
23
|
+
})),
|
|
24
|
+
{
|
|
25
|
+
id: 'addHotspot',
|
|
26
|
+
label: ES_HOTSPOT.label,
|
|
27
|
+
iconKey: 'ddd-event-storming.sticky.hotspot',
|
|
28
|
+
element: 'sticky:hotspot',
|
|
29
|
+
icon: diamondSwatch(ES_HOTSPOT.fill),
|
|
30
|
+
run: std => placeDddElement(std, (surface, cx, cy) => addSticky(surface, std, cx, cy, {
|
|
31
|
+
fill: ES_HOTSPOT.fill,
|
|
32
|
+
text: ES_HOTSPOT.text,
|
|
33
|
+
label: ES_HOTSPOT.label,
|
|
34
|
+
shapeType: 'diamond',
|
|
35
|
+
})),
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
id: 'addFlow',
|
|
39
|
+
label: 'Flow',
|
|
40
|
+
iconKey: 'ddd-event-storming.flow',
|
|
41
|
+
element: 'flow',
|
|
42
|
+
icon: flowSwatch,
|
|
43
|
+
run: std => placeDddElement(std, (surface, cx, cy) => addConnector(surface, cx - 110, cy, cx + 110, cy, { rearArrow: true })),
|
|
44
|
+
},
|
|
45
|
+
];
|
|
46
|
+
export const eventStormingCommands = SPECS.map((spec, order) => ({
|
|
47
|
+
id: `ddd-event-storming.${spec.id}`,
|
|
48
|
+
owner: 'ddd-event-storming',
|
|
49
|
+
kind: 'artefact',
|
|
50
|
+
labelKey: `com.labre.commands.ddd-event-storming.${spec.id}`,
|
|
51
|
+
labelFallback: spec.label,
|
|
52
|
+
category: 'stickies',
|
|
53
|
+
iconKey: spec.iconKey,
|
|
54
|
+
surfaces: ['senior-menu', 'catalogue', 'palette', 'agent'],
|
|
55
|
+
order,
|
|
56
|
+
scope: 'edgeless',
|
|
57
|
+
defaultKeys: { mac: [], other: [] },
|
|
58
|
+
availability: 'always',
|
|
59
|
+
run: spec.run,
|
|
60
|
+
telemetry: { framework: 'ddd-event-storming', element: spec.element },
|
|
61
|
+
}));
|
|
62
|
+
export const eventStormingCommandIcons = Object.fromEntries(SPECS.map(spec => [spec.iconKey, spec.icon]));
|
package/dist/descriptor.d.ts
CHANGED
|
@@ -2,6 +2,6 @@ import { DddEventStormingViewExtension } from './view.js';
|
|
|
2
2
|
/** Host wiring for the ddd-event-storming framework. */
|
|
3
3
|
export declare const dddEventStormingFramework: {
|
|
4
4
|
readonly flag: "ddd-event-storming";
|
|
5
|
-
readonly
|
|
5
|
+
readonly telemetryKey: "event-storming";
|
|
6
6
|
readonly viewExtension: typeof DddEventStormingViewExtension;
|
|
7
7
|
};
|
package/dist/descriptor.js
CHANGED
|
@@ -2,6 +2,6 @@ import { DddEventStormingViewExtension } from './view.js';
|
|
|
2
2
|
/** Host wiring for the ddd-event-storming framework. */
|
|
3
3
|
export const dddEventStormingFramework = {
|
|
4
4
|
flag: 'ddd-event-storming',
|
|
5
|
-
|
|
5
|
+
telemetryKey: 'event-storming',
|
|
6
6
|
viewExtension: DddEventStormingViewExtension,
|
|
7
7
|
};
|
package/dist/effects.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { EdgelessDddEventStormingMenu } from './toolbar/event-storming-menu';
|
|
2
|
-
import { EdgelessDddEventStormingSeniorButton } from './toolbar/senior-button';
|
|
1
|
+
import { EdgelessDddEventStormingMenu } from './toolbar/event-storming-menu.js';
|
|
2
|
+
import { EdgelessDddEventStormingSeniorButton } from './toolbar/senior-button.js';
|
|
3
3
|
export declare function eventStormingEffects(): void;
|
|
4
4
|
declare global {
|
|
5
5
|
interface HTMLElementTagNameMap {
|
package/dist/effects.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { EdgelessDddEventStormingMenu } from './toolbar/event-storming-menu';
|
|
2
|
-
import { EdgelessDddEventStormingSeniorButton } from './toolbar/senior-button';
|
|
1
|
+
import { EdgelessDddEventStormingMenu } from './toolbar/event-storming-menu.js';
|
|
2
|
+
import { EdgelessDddEventStormingSeniorButton } from './toolbar/senior-button.js';
|
|
3
3
|
/** Define a custom element once (each tool's effect may run more than once). */
|
|
4
4
|
function define(tag, ctor) {
|
|
5
5
|
if (!customElements.get(tag))
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { eventStormingCommandIcons, eventStormingCommands } from './commands.js';
|
|
2
|
+
export { eventStormingTranslationEntries } from './translations.js';
|
|
1
3
|
export { eventStormingTemplateCategory } from './templates.js';
|
|
2
4
|
export { eventStormingSeniorTool } from './toolbar/senior-tool.js';
|
|
3
5
|
export { EdgelessDddEventStormingSeniorButton } from './toolbar/senior-button.js';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { eventStormingCommandIcons, eventStormingCommands } from './commands.js';
|
|
2
|
+
export { eventStormingTranslationEntries } from './translations.js';
|
|
1
3
|
export { eventStormingTemplateCategory } from './templates.js';
|
|
2
4
|
export { eventStormingSeniorTool } from './toolbar/senior-tool.js';
|
|
3
5
|
export { EdgelessDddEventStormingSeniorButton } from './toolbar/senior-button.js';
|
|
@@ -1,9 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
|
|
2
|
+
import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
|
|
3
|
+
/**
|
|
4
|
+
* Event Storming palette. Since PF3 it declares nothing:
|
|
5
|
+
* {@link EdgelessCommandMenu} renders `eventStormingCommands` for the
|
|
6
|
+
* `senior-menu` surface, and `DddMenuBase` — shell, finish helper and `track`
|
|
7
|
+
* helper — is gone with the duplication it carried (`docs/adr/0008`).
|
|
8
|
+
*
|
|
9
|
+
* The DDD palettes keep their tighter gap: they carry more buttons than the
|
|
10
|
+
* other frameworks (Context Map: 12).
|
|
11
|
+
*/
|
|
12
|
+
export declare class EdgelessDddEventStormingMenu extends EdgelessCommandMenu {
|
|
13
|
+
static styles: import("lit").CSSResultGroup[];
|
|
14
|
+
protected owner: "ddd-event-storming";
|
|
15
|
+
type: typeof EmptyTool;
|
|
9
16
|
}
|
|
@@ -1,76 +1,27 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
|
|
2
|
+
import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
|
|
3
|
+
import { css } from 'lit';
|
|
4
|
+
/**
|
|
5
|
+
* Event Storming palette. Since PF3 it declares nothing:
|
|
6
|
+
* {@link EdgelessCommandMenu} renders `eventStormingCommands` for the
|
|
7
|
+
* `senior-menu` surface, and `DddMenuBase` — shell, finish helper and `track`
|
|
8
|
+
* helper — is gone with the duplication it carried (`docs/adr/0008`).
|
|
9
|
+
*
|
|
10
|
+
* The DDD palettes keep their tighter gap: they carry more buttons than the
|
|
11
|
+
* other frameworks (Context Map: 12).
|
|
12
|
+
*/
|
|
13
|
+
export class EdgelessDddEventStormingMenu extends EdgelessCommandMenu {
|
|
8
14
|
constructor() {
|
|
9
15
|
super(...arguments);
|
|
10
|
-
this.
|
|
11
|
-
|
|
12
|
-
_createSticky(preset) {
|
|
13
|
-
const surface = this.surface;
|
|
14
|
-
if (!surface)
|
|
15
|
-
return;
|
|
16
|
-
const { cx, cy } = this.center;
|
|
17
|
-
const id = addSticky(surface, this.edgeless.std, cx, cy, {
|
|
18
|
-
fill: preset.fill,
|
|
19
|
-
text: preset.text,
|
|
20
|
-
label: preset.label,
|
|
21
|
-
});
|
|
22
|
-
this.track('FrameworkElementAdded', `sticky:${preset.kind}`);
|
|
23
|
-
this.finish(id);
|
|
24
|
-
}
|
|
25
|
-
_createHotspot() {
|
|
26
|
-
const surface = this.surface;
|
|
27
|
-
if (!surface)
|
|
28
|
-
return;
|
|
29
|
-
const { cx, cy } = this.center;
|
|
30
|
-
const id = addSticky(surface, this.edgeless.std, cx, cy, {
|
|
31
|
-
fill: ES_HOTSPOT.fill,
|
|
32
|
-
text: ES_HOTSPOT.text,
|
|
33
|
-
label: ES_HOTSPOT.label,
|
|
34
|
-
shapeType: 'diamond',
|
|
35
|
-
});
|
|
36
|
-
this.track('FrameworkElementAdded', 'sticky:hotspot');
|
|
37
|
-
this.finish(id);
|
|
38
|
-
}
|
|
39
|
-
_createFlow() {
|
|
40
|
-
const surface = this.surface;
|
|
41
|
-
if (!surface)
|
|
42
|
-
return;
|
|
43
|
-
const { cx, cy } = this.center;
|
|
44
|
-
const id = addConnector(surface, cx - 110, cy, cx + 110, cy, { rearArrow: true });
|
|
45
|
-
this.track('FrameworkElementAdded', 'flow');
|
|
46
|
-
this.finish(id);
|
|
47
|
-
}
|
|
48
|
-
render() {
|
|
49
|
-
return html `
|
|
50
|
-
<edgeless-slide-menu>
|
|
51
|
-
<div class="menu-content">
|
|
52
|
-
<div class="button-group-container">
|
|
53
|
-
${ES_STICKIES.map(preset => html `<edgeless-tool-icon-button
|
|
54
|
-
.tooltip=${preset.label}
|
|
55
|
-
@click=${() => this._createSticky(preset)}
|
|
56
|
-
>
|
|
57
|
-
${squareSwatch(preset.fill)}
|
|
58
|
-
</edgeless-tool-icon-button>`)}
|
|
59
|
-
<edgeless-tool-icon-button
|
|
60
|
-
.tooltip=${ES_HOTSPOT.label}
|
|
61
|
-
@click=${() => this._createHotspot()}
|
|
62
|
-
>
|
|
63
|
-
${diamondSwatch(ES_HOTSPOT.fill)}
|
|
64
|
-
</edgeless-tool-icon-button>
|
|
65
|
-
<edgeless-tool-icon-button
|
|
66
|
-
.tooltip=${'Flow'}
|
|
67
|
-
@click=${() => this._createFlow()}
|
|
68
|
-
>
|
|
69
|
-
${flowSwatch}
|
|
70
|
-
</edgeless-tool-icon-button>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
</edgeless-slide-menu>
|
|
74
|
-
`;
|
|
16
|
+
this.owner = 'ddd-event-storming';
|
|
17
|
+
this.type = EmptyTool;
|
|
75
18
|
}
|
|
19
|
+
static { this.styles = [
|
|
20
|
+
EdgelessCommandMenu.styles,
|
|
21
|
+
css `
|
|
22
|
+
:host {
|
|
23
|
+
--labre-command-menu-gap: 10px;
|
|
24
|
+
}
|
|
25
|
+
`,
|
|
26
|
+
]; }
|
|
76
27
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type TranslationKeyManifestEntry } from '@formicoidea/labre-core/std';
|
|
2
|
+
/**
|
|
3
|
+
* THIS framework's contribution to the translation-key manifest.
|
|
4
|
+
*
|
|
5
|
+
* Its command labels and descriptions are built from a TEMPLATE, so the
|
|
6
|
+
* concrete keys exist nowhere but in the declarations themselves and the
|
|
7
|
+
* core manifest could not restate them even if it wanted to. The
|
|
8
|
+
* contribution therefore ships WITH the framework: in the bundled
|
|
9
|
+
* distribution `@formicoidea/labre-framework-ddd-event-storming` carries it, and a host
|
|
10
|
+
* composes it into its catalogue exactly as it already composes
|
|
11
|
+
* `eventStormingCommands` into the command registry. See
|
|
12
|
+
* `packages/affine/all/src/translations.ts`.
|
|
13
|
+
*/
|
|
14
|
+
export declare const eventStormingTranslationEntries: TranslationKeyManifestEntry[];
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { commandTranslationEntries, } from '@formicoidea/labre-core/std';
|
|
2
|
+
import { eventStormingCommands } from './commands.js';
|
|
3
|
+
/**
|
|
4
|
+
* THIS framework's contribution to the translation-key manifest.
|
|
5
|
+
*
|
|
6
|
+
* Its command labels and descriptions are built from a TEMPLATE, so the
|
|
7
|
+
* concrete keys exist nowhere but in the declarations themselves and the
|
|
8
|
+
* core manifest could not restate them even if it wanted to. The
|
|
9
|
+
* contribution therefore ships WITH the framework: in the bundled
|
|
10
|
+
* distribution `@formicoidea/labre-framework-ddd-event-storming` carries it, and a host
|
|
11
|
+
* composes it into its catalogue exactly as it already composes
|
|
12
|
+
* `eventStormingCommands` into the command registry. See
|
|
13
|
+
* `packages/affine/all/src/translations.ts`.
|
|
14
|
+
*/
|
|
15
|
+
export const eventStormingTranslationEntries = commandTranslationEntries(eventStormingCommands);
|
package/dist/view.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ViewExtensionProvider, } from '@formicoidea/labre-core/ext-loader';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { CommandExtension } from '@formicoidea/labre-core/std';
|
|
3
|
+
import { eventStormingCommandIcons, eventStormingCommands, } from './commands.js';
|
|
4
|
+
import { eventStormingEffects } from './effects.js';
|
|
5
|
+
import { eventStormingSeniorTool } from './toolbar/senior-tool.js';
|
|
4
6
|
/**
|
|
5
7
|
* Event Storming — independently flag-gated (`ddd-event-storming`).
|
|
6
8
|
*
|
|
@@ -21,6 +23,7 @@ export class DddEventStormingViewExtension extends ViewExtensionProvider {
|
|
|
21
23
|
super.setup(context);
|
|
22
24
|
if (this.isEdgeless(context.scope)) {
|
|
23
25
|
context.register(eventStormingSeniorTool);
|
|
26
|
+
context.register(CommandExtension(eventStormingCommands, eventStormingCommandIcons));
|
|
24
27
|
}
|
|
25
28
|
}
|
|
26
29
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formicoidea/labre-framework-ddd-event-storming",
|
|
3
3
|
"description": "Labre ddd-event-storming framework for @formicoidea/labre-core.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.32.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"author": "lajola",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"dist"
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@formicoidea/labre-core": "0.
|
|
31
|
-
"@formicoidea/labre-ddd-shared": "0.
|
|
30
|
+
"@formicoidea/labre-core": "0.32.0",
|
|
31
|
+
"@formicoidea/labre-ddd-shared": "0.32.0",
|
|
32
32
|
"lit": "^3.2.0"
|
|
33
33
|
}
|
|
34
34
|
}
|