@formicoidea/labre-core 0.24.0 → 0.25.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 (44) hide show
  1. package/dist/extensions/view.js +0 -6
  2. package/dist/flags.d.ts +1 -1
  3. package/dist/flags.js +0 -4
  4. package/package.json +1 -1
  5. package/dist/_pkgs/affine-gfx-ddd/core-domain/consts.d.ts +0 -32
  6. package/dist/_pkgs/affine-gfx-ddd/core-domain/consts.js +0 -30
  7. package/dist/_pkgs/affine-gfx-ddd/core-domain/element-renderer.d.ts +0 -12
  8. package/dist/_pkgs/affine-gfx-ddd/core-domain/element-renderer.js +0 -93
  9. package/dist/_pkgs/affine-gfx-ddd/core-domain/element-view.d.ts +0 -11
  10. package/dist/_pkgs/affine-gfx-ddd/core-domain/element-view.js +0 -20
  11. package/dist/_pkgs/affine-gfx-ddd/core-domain/legend.d.ts +0 -18
  12. package/dist/_pkgs/affine-gfx-ddd/core-domain/legend.js +0 -69
  13. package/dist/_pkgs/affine-gfx-ddd/core-domain/toolbar-config.d.ts +0 -1
  14. package/dist/_pkgs/affine-gfx-ddd/core-domain/toolbar-config.js +0 -45
  15. package/dist/_pkgs/affine-gfx-ddd/effects.d.ts +0 -17
  16. package/dist/_pkgs/affine-gfx-ddd/effects.js +0 -21
  17. package/dist/_pkgs/affine-gfx-ddd/index.d.ts +0 -2
  18. package/dist/_pkgs/affine-gfx-ddd/index.js +0 -2
  19. package/dist/_pkgs/affine-gfx-ddd/shared/consts.d.ts +0 -180
  20. package/dist/_pkgs/affine-gfx-ddd/shared/consts.js +0 -92
  21. package/dist/_pkgs/affine-gfx-ddd/shared/prefabs.d.ts +0 -71
  22. package/dist/_pkgs/affine-gfx-ddd/shared/prefabs.js +0 -214
  23. package/dist/_pkgs/affine-gfx-ddd/shared/utils.d.ts +0 -10
  24. package/dist/_pkgs/affine-gfx-ddd/shared/utils.js +0 -9
  25. package/dist/_pkgs/affine-gfx-ddd/templates/components.d.ts +0 -7
  26. package/dist/_pkgs/affine-gfx-ddd/templates/components.js +0 -158
  27. package/dist/_pkgs/affine-gfx-ddd/templates/index.d.ts +0 -11
  28. package/dist/_pkgs/affine-gfx-ddd/templates/index.js +0 -108
  29. package/dist/_pkgs/affine-gfx-ddd/toolbar/context-map-menu.d.ts +0 -10
  30. package/dist/_pkgs/affine-gfx-ddd/toolbar/context-map-menu.js +0 -109
  31. package/dist/_pkgs/affine-gfx-ddd/toolbar/core-domain-menu.d.ts +0 -11
  32. package/dist/_pkgs/affine-gfx-ddd/toolbar/core-domain-menu.js +0 -118
  33. package/dist/_pkgs/affine-gfx-ddd/toolbar/event-storming-menu.d.ts +0 -9
  34. package/dist/_pkgs/affine-gfx-ddd/toolbar/event-storming-menu.js +0 -78
  35. package/dist/_pkgs/affine-gfx-ddd/toolbar/icons.d.ts +0 -6
  36. package/dist/_pkgs/affine-gfx-ddd/toolbar/icons.js +0 -20
  37. package/dist/_pkgs/affine-gfx-ddd/toolbar/menu-base.d.ts +0 -23
  38. package/dist/_pkgs/affine-gfx-ddd/toolbar/menu-base.js +0 -62
  39. package/dist/_pkgs/affine-gfx-ddd/toolbar/senior-buttons.d.ts +0 -34
  40. package/dist/_pkgs/affine-gfx-ddd/toolbar/senior-buttons.js +0 -114
  41. package/dist/_pkgs/affine-gfx-ddd/toolbar/senior-tool.d.ts +0 -6
  42. package/dist/_pkgs/affine-gfx-ddd/toolbar/senior-tool.js +0 -23
  43. package/dist/_pkgs/affine-gfx-ddd/view.d.ts +0 -35
  44. package/dist/_pkgs/affine-gfx-ddd/view.js +0 -95
@@ -1,108 +0,0 @@
1
- import { makeTemplateSnapshot, surfaceText, } from '../../affine-gfx-template/index.js';
2
- import { FontFamily, ShapeStyle, TextAlign } from '../../affine-model/index.js';
3
- import { CD_TEMPLATES, CM_TEMPLATES, ES_TEMPLATES } from './components';
4
- const DARK = '#323d4f';
5
- const WHITE = '#ffffff';
6
- function box(x, y, w, h) {
7
- return {
8
- type: 'shape',
9
- shapeType: 'rect',
10
- filled: true,
11
- fillColor: WHITE,
12
- strokeColor: DARK,
13
- strokeWidth: 1,
14
- shapeStyle: ShapeStyle.General,
15
- roughness: 0,
16
- radius: 0,
17
- xywh: `[${x},${y},${w},${h}]`,
18
- };
19
- }
20
- function title(x, y, str, color = DARK, fontSize = 20) {
21
- return {
22
- type: 'text',
23
- text: surfaceText(str),
24
- color,
25
- fontFamily: FontFamily.Inter,
26
- fontSize,
27
- textAlign: TextAlign.Left,
28
- xywh: `[${x},${y},340,28]`,
29
- };
30
- }
31
- /** The Aggregate Design Canvas v1.1 (Kacper Gunia / DDD Crew): nine sections. */
32
- function aggregateCanvas() {
33
- return {
34
- bg: {
35
- type: 'shape',
36
- shapeType: 'rect',
37
- filled: true,
38
- fillColor: DARK,
39
- strokeColor: '#00000000',
40
- strokeWidth: 0,
41
- shapeStyle: ShapeStyle.General,
42
- roughness: 0,
43
- radius: 0,
44
- xywh: '[0,0,1060,770]',
45
- },
46
- headerBar: {
47
- type: 'shape',
48
- shapeType: 'rect',
49
- filled: true,
50
- fillColor: DARK,
51
- strokeColor: '#00000000',
52
- strokeWidth: 0,
53
- shapeStyle: ShapeStyle.General,
54
- roughness: 0,
55
- radius: 0,
56
- xywh: '[9,10,1040,40]',
57
- },
58
- headerTitle: title(16, 18, 'Aggregate Design Canvas', WHITE, 30),
59
- nameBox: box(9, 60, 350, 50),
60
- nameTitle: title(18, 72, '1. Name'),
61
- descBox: box(9, 120, 350, 170),
62
- descTitle: title(18, 132, '2. Description'),
63
- stateBox: box(369, 60, 680, 230),
64
- stateTitle: title(378, 72, '3. State Transitions'),
65
- invariantsBox: box(9, 300, 350, 210),
66
- invariantsTitle: title(18, 312, '4. Enforced Invariants'),
67
- policiesBox: box(9, 520, 350, 200),
68
- policiesTitle: title(18, 532, '5. Corrective Policies'),
69
- commandsBox: box(369, 300, 350, 210),
70
- commandsTitle: title(378, 312, '6. Handled Commands'),
71
- eventsBox: box(369, 520, 350, 200),
72
- eventsTitle: title(378, 532, '7. Created Events'),
73
- throughputBox: box(729, 300, 320, 210),
74
- throughputTitle: title(738, 312, '8. Throughput'),
75
- sizeBox: box(729, 520, 320, 200),
76
- sizeTitle: title(738, 532, '9. Size'),
77
- };
78
- }
79
- const PREVIEW = `<svg width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"><rect width="135" height="80" fill="#323d4f"/><rect x="3" y="3" width="129" height="6" fill="#323d4f"/><g fill="#fff"><rect x="3" y="11" width="42" height="6"/><rect x="3" y="19" width="42" height="22"/><rect x="47" y="11" width="85" height="28"/><rect x="3" y="43" width="42" height="16"/><rect x="3" y="61" width="42" height="16"/><rect x="47" y="43" width="42" height="16"/><rect x="47" y="61" width="42" height="16"/><rect x="91" y="43" width="41" height="16"/><rect x="91" y="61" width="41" height="16"/></g></svg>`;
80
- /**
81
- * One Templates-panel section per senior button (mirrors Cynefin/Estuarine),
82
- * plus a standalone Aggregate Design Canvas section. These are gated by
83
- * `ddd-templates` only — never by a senior-button flag — so the catalogue
84
- * stays available even when a senior button is hidden.
85
- */
86
- export const eventStormingTemplateCategory = {
87
- name: 'Event Storming',
88
- templates: ES_TEMPLATES,
89
- };
90
- export const coreDomainTemplateCategory = {
91
- name: 'Core Domain Chart',
92
- templates: CD_TEMPLATES,
93
- };
94
- export const contextMapTemplateCategory = {
95
- name: 'Context Map',
96
- templates: CM_TEMPLATES,
97
- };
98
- export const aggregateTemplateCategory = {
99
- name: 'Aggregate Design Canvas',
100
- templates: [
101
- {
102
- name: 'Aggregate Design Canvas',
103
- type: 'template',
104
- preview: PREVIEW,
105
- content: makeTemplateSnapshot(aggregateCanvas(), 'Aggregate Design Canvas'),
106
- },
107
- ],
108
- };
@@ -1,10 +0,0 @@
1
- import { DddMenuBase } from './menu-base';
2
- /** Context Map palette: bounded-context bubble, the cloud, the nine relationship patterns. */
3
- export declare class EdgelessDddContextMapMenu extends DddMenuBase {
4
- protected framework: "context-map";
5
- private _createBubble;
6
- private _createCloud;
7
- private _createRelationship;
8
- private _createLegend;
9
- render(): import("lit-html").TemplateResult<1>;
10
- }
@@ -1,109 +0,0 @@
1
- import { html, svg } from 'lit';
2
- import { CLOUD, CM_BUBBLE, CM_RELATIONSHIPS } from '../shared/consts';
3
- import { addBubble, addCloud, addLegend, addRelationship, } from '../shared/prefabs';
4
- import { DddMenuBase } from './menu-base';
5
- const bubbleSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><rect x="2" y="7" width="20" height="10" rx="5" fill="#e6f0fa" stroke="#2f6fb0" stroke-width="1.6"/></svg>`;
6
- const cloudSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><path d="M6 17 C3 17 2 14 4.5 12.5 C4 9 8 8 9.5 10 C11 6.5 16 7.5 16 11 C19 10.5 20.5 14 18 16 C18 17 16.5 17 15 17 Z" fill="#f0eef6" stroke="#6d6e71" stroke-width="1.4"/></svg>`;
7
- const legendSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.6"/><circle cx="7" cy="9" r="1.6" fill="currentColor"/><circle cx="7" cy="14" r="1.6" fill="currentColor"/><path d="M11 9 H18 M11 14 H18" stroke="currentColor" stroke-width="1.4"/></svg>`;
8
- const relationSwatch = (dashed, arrow) => svg `<svg viewBox="0 0 24 24" fill="none"><path d="M3 12 H${arrow ? 17 : 21}" stroke="currentColor" stroke-width="2" stroke-dasharray="${dashed ? '3 3' : '0'}"/>${arrow ? svg `<path d="M15 8 L21 12 L15 16" stroke="currentColor" stroke-width="2" fill="none"/>` : ''}</svg>`;
9
- /** Context Map palette: bounded-context bubble, the cloud, the nine relationship patterns. */
10
- export class EdgelessDddContextMapMenu extends DddMenuBase {
11
- constructor() {
12
- super(...arguments);
13
- this.framework = 'context-map';
14
- }
15
- _createBubble() {
16
- const surface = this.surface;
17
- if (!surface)
18
- return;
19
- const { cx, cy } = this.center;
20
- const id = addBubble(surface, this.edgeless.std, cx, cy, 'Bounded Context');
21
- this.track('FrameworkElementAdded', 'bounded-context');
22
- this.finish(id);
23
- }
24
- _createCloud() {
25
- const surface = this.surface;
26
- if (!surface)
27
- return;
28
- const { cx, cy } = this.center;
29
- const id = addCloud(surface, this.edgeless.std, cx, cy, 'System');
30
- this.track('FrameworkElementAdded', 'cloud');
31
- this.finish(id);
32
- }
33
- _createRelationship(preset) {
34
- const surface = this.surface;
35
- if (!surface)
36
- return;
37
- const { cx, cy } = this.center;
38
- const id = addRelationship(surface, this.edgeless.std, cx, cy, preset);
39
- this.track('FrameworkElementAdded', `relationship:${preset.kind}`);
40
- this.finish(id);
41
- }
42
- _createLegend() {
43
- const surface = this.surface;
44
- if (!surface)
45
- return;
46
- const { cx, cy } = this.center;
47
- const patRows = (kinds) => CM_RELATIONSHIPS.filter(r => kinds.includes(r.kind)).map((r) => ({
48
- swatch: 'line',
49
- color: '#1f2328',
50
- label: `${r.abbrev} — ${r.label}`,
51
- }));
52
- const sections = [
53
- {
54
- title: 'Boundaries',
55
- rows: [
56
- { swatch: 'square', color: CM_BUBBLE.fill, label: 'Bounded Context' },
57
- { swatch: 'square', color: CLOUD.fill, label: 'System / Big Ball of Mud' },
58
- ],
59
- },
60
- { title: 'Mutually dependent', rows: patRows(['partnership', 'sharedKernel']) },
61
- {
62
- title: 'Upstream → Downstream (U/D)',
63
- rows: patRows(['customerSupplier', 'conformist', 'acl', 'ohs', 'publishedLanguage']),
64
- },
65
- { title: 'Separate / no integration', rows: patRows(['separateWays', 'bbom']) },
66
- ];
67
- const id = addLegend(surface, this.edgeless.std, cx - 140, cy - 210, {
68
- title: 'Légende',
69
- sections,
70
- width: 290,
71
- });
72
- this.track('FrameworkElementAdded', 'legend');
73
- this.finish(id);
74
- }
75
- render() {
76
- return html `
77
- <edgeless-slide-menu>
78
- <div class="menu-content">
79
- <div class="button-group-container">
80
- <edgeless-tool-icon-button
81
- .tooltip=${'Bounded Context'}
82
- @click=${() => this._createBubble()}
83
- >
84
- ${bubbleSwatch}
85
- </edgeless-tool-icon-button>
86
- <edgeless-tool-icon-button
87
- .tooltip=${'Cloud / System (Big Ball of Mud)'}
88
- @click=${() => this._createCloud()}
89
- >
90
- ${cloudSwatch}
91
- </edgeless-tool-icon-button>
92
- ${CM_RELATIONSHIPS.map(preset => html `<edgeless-tool-icon-button
93
- .tooltip=${preset.label}
94
- @click=${() => this._createRelationship(preset)}
95
- >
96
- ${relationSwatch(preset.dashed, preset.upDown)}
97
- </edgeless-tool-icon-button>`)}
98
- <edgeless-tool-icon-button
99
- .tooltip=${'Legend'}
100
- @click=${() => this._createLegend()}
101
- >
102
- ${legendSwatch}
103
- </edgeless-tool-icon-button>
104
- </div>
105
- </div>
106
- </edgeless-slide-menu>
107
- `;
108
- }
109
- }
@@ -1,11 +0,0 @@
1
- import { DddMenuBase } from './menu-base';
2
- /** Core Domain Chart palette: the background, sub-domain dots, movement arrow, Notation legend. */
3
- export declare class EdgelessDddCoreDomainMenu extends DddMenuBase {
4
- protected framework: "core-domain";
5
- private _createBackground;
6
- private _createDot;
7
- private _createMarker;
8
- private _createMovement;
9
- private _createLegend;
10
- render(): import("lit-html").TemplateResult<1>;
11
- }
@@ -1,118 +0,0 @@
1
- import { Bound } from '../../global/gfx/index.js';
2
- import { html, svg } from 'lit';
3
- import { CD_SUBDOMAINS, MOVEMENT_COLOR, TEAM_TOPOLOGIES } from '../shared/consts';
4
- import { addConnector, addDot, addLegend, addMarker } from '../shared/prefabs';
5
- import { REF_H, REF_W } from '../core-domain/consts';
6
- import { coreDomainLegendSections } from '../core-domain/legend';
7
- import { DddMenuBase } from './menu-base';
8
- const chartSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><rect x="4" y="3" width="17" height="17" fill="#4d9900" fill-opacity="0.5"/><rect x="4" y="3" width="6" height="17" fill="#9933ff" fill-opacity="0.5"/><path d="M4 20 V3 M4 20 H21" stroke="currentColor" stroke-width="1.8"/></svg>`;
9
- const dotSwatch = (color) => svg `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="${color}" stroke="#1f2328" stroke-width="1.2"/></svg>`;
10
- const movementSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><path d="M3 18 L16 7" stroke="${MOVEMENT_COLOR}" stroke-width="2" stroke-dasharray="3 3"/><path d="M12 6 L18 5 L17 11" stroke="${MOVEMENT_COLOR}" stroke-width="2" fill="none"/></svg>`;
11
- const legendSwatch = svg `<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.6"/><circle cx="7" cy="9" r="1.6" fill="currentColor"/><circle cx="7" cy="14" r="1.6" fill="currentColor"/><path d="M11 9 H18 M11 14 H18" stroke="currentColor" stroke-width="1.4"/></svg>`;
12
- const markerSwatch = (fill, letter) => svg `<svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="${fill}" stroke="#1f2328" stroke-width="1.2"/><text x="12" y="16" text-anchor="middle" font-size="11" font-family="sans-serif" fill="#1f2328">${letter}</text></svg>`;
13
- /** Core Domain Chart palette: the background, sub-domain dots, movement arrow, Notation legend. */
14
- export class EdgelessDddCoreDomainMenu extends DddMenuBase {
15
- constructor() {
16
- super(...arguments);
17
- this.framework = 'core-domain';
18
- }
19
- _createBackground() {
20
- const surface = this.surface;
21
- if (!surface)
22
- return;
23
- const { cx, cy } = this.center;
24
- const id = surface.addElement({
25
- type: 'coreDomain',
26
- xywh: new Bound(cx - REF_W / 2, cy - REF_H / 2, REF_W, REF_H).serialize(),
27
- });
28
- this.track('FrameworkElementAdded', 'background');
29
- this.finish(id);
30
- }
31
- _createDot(preset) {
32
- const surface = this.surface;
33
- if (!surface)
34
- return;
35
- const { cx, cy } = this.center;
36
- const id = addDot(surface, this.edgeless.std, cx, cy, preset.fill, preset.label);
37
- this.track('FrameworkElementAdded', `subdomain:${preset.kind}`);
38
- this.finish(id);
39
- }
40
- _createMarker(preset) {
41
- const surface = this.surface;
42
- if (!surface)
43
- return;
44
- const { cx, cy } = this.center;
45
- const id = addMarker(surface, this.edgeless.std, cx, cy, {
46
- fill: preset.fill,
47
- letter: preset.letter,
48
- label: preset.label,
49
- });
50
- this.track('FrameworkElementAdded', `team-topology:${preset.kind}`);
51
- this.finish(id);
52
- }
53
- _createMovement() {
54
- const surface = this.surface;
55
- if (!surface)
56
- return;
57
- const { cx, cy } = this.center;
58
- const id = addConnector(surface, cx - 80, cy + 60, cx + 80, cy - 60, {
59
- rearArrow: true,
60
- dashed: true,
61
- stroke: MOVEMENT_COLOR,
62
- });
63
- this.track('FrameworkElementAdded', 'movement');
64
- this.finish(id);
65
- }
66
- _createLegend() {
67
- const surface = this.surface;
68
- if (!surface)
69
- return;
70
- const { cx, cy } = this.center;
71
- const id = addLegend(surface, this.edgeless.std, cx - 130, cy - 170, {
72
- title: 'Légende',
73
- sections: coreDomainLegendSections(),
74
- });
75
- this.track('FrameworkElementAdded', 'legend');
76
- this.finish(id);
77
- }
78
- render() {
79
- return html `
80
- <edgeless-slide-menu>
81
- <div class="menu-content">
82
- <div class="button-group-container">
83
- <edgeless-tool-icon-button
84
- .tooltip=${'Core Domain Chart'}
85
- @click=${() => this._createBackground()}
86
- >
87
- ${chartSwatch}
88
- </edgeless-tool-icon-button>
89
- ${CD_SUBDOMAINS.map(preset => html `<edgeless-tool-icon-button
90
- .tooltip=${preset.label}
91
- @click=${() => this._createDot(preset)}
92
- >
93
- ${dotSwatch(preset.fill)}
94
- </edgeless-tool-icon-button>`)}
95
- ${TEAM_TOPOLOGIES.map(preset => html `<edgeless-tool-icon-button
96
- .tooltip=${preset.label}
97
- @click=${() => this._createMarker(preset)}
98
- >
99
- ${markerSwatch(preset.fill, preset.letter)}
100
- </edgeless-tool-icon-button>`)}
101
- <edgeless-tool-icon-button
102
- .tooltip=${'Movement over time'}
103
- @click=${() => this._createMovement()}
104
- >
105
- ${movementSwatch}
106
- </edgeless-tool-icon-button>
107
- <edgeless-tool-icon-button
108
- .tooltip=${'Notation legend'}
109
- @click=${() => this._createLegend()}
110
- >
111
- ${legendSwatch}
112
- </edgeless-tool-icon-button>
113
- </div>
114
- </div>
115
- </edgeless-slide-menu>
116
- `;
117
- }
118
- }
@@ -1,9 +0,0 @@
1
- import { DddMenuBase } from './menu-base';
2
- /** Event Storming palette: the colour-coded stickies, the hotspot, a flow arrow. */
3
- export declare class EdgelessDddEventStormingMenu extends DddMenuBase {
4
- protected framework: "event-storming";
5
- private _createSticky;
6
- private _createHotspot;
7
- private _createFlow;
8
- render(): import("lit-html").TemplateResult<1>;
9
- }
@@ -1,78 +0,0 @@
1
- import { html, svg } from 'lit';
2
- import { ES_HOTSPOT, ES_STICKIES } from '../shared/consts';
3
- import { addConnector, addSticky } from '../shared/prefabs';
4
- import { DddMenuBase } from './menu-base';
5
- const squareSwatch = (color) => svg `<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3" fill="${color}"/></svg>`;
6
- 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>`;
7
- 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>`;
8
- /** Event Storming palette: the colour-coded stickies, the hotspot, a flow arrow. */
9
- export class EdgelessDddEventStormingMenu extends DddMenuBase {
10
- constructor() {
11
- super(...arguments);
12
- this.framework = 'event-storming';
13
- }
14
- _createSticky(preset) {
15
- const surface = this.surface;
16
- if (!surface)
17
- return;
18
- const { cx, cy } = this.center;
19
- const id = addSticky(surface, this.edgeless.std, cx, cy, {
20
- fill: preset.fill,
21
- text: preset.text,
22
- label: preset.label,
23
- });
24
- this.track('FrameworkElementAdded', `sticky:${preset.kind}`);
25
- this.finish(id);
26
- }
27
- _createHotspot() {
28
- const surface = this.surface;
29
- if (!surface)
30
- return;
31
- const { cx, cy } = this.center;
32
- const id = addSticky(surface, this.edgeless.std, cx, cy, {
33
- fill: ES_HOTSPOT.fill,
34
- text: ES_HOTSPOT.text,
35
- label: ES_HOTSPOT.label,
36
- shapeType: 'diamond',
37
- });
38
- this.track('FrameworkElementAdded', 'sticky:hotspot');
39
- this.finish(id);
40
- }
41
- _createFlow() {
42
- const surface = this.surface;
43
- if (!surface)
44
- return;
45
- const { cx, cy } = this.center;
46
- const id = addConnector(surface, cx - 110, cy, cx + 110, cy, { rearArrow: true });
47
- this.track('FrameworkElementAdded', 'flow');
48
- this.finish(id);
49
- }
50
- render() {
51
- return html `
52
- <edgeless-slide-menu>
53
- <div class="menu-content">
54
- <div class="button-group-container">
55
- ${ES_STICKIES.map(preset => html `<edgeless-tool-icon-button
56
- .tooltip=${preset.label}
57
- @click=${() => this._createSticky(preset)}
58
- >
59
- ${squareSwatch(preset.fill)}
60
- </edgeless-tool-icon-button>`)}
61
- <edgeless-tool-icon-button
62
- .tooltip=${ES_HOTSPOT.label}
63
- @click=${() => this._createHotspot()}
64
- >
65
- ${diamondSwatch(ES_HOTSPOT.fill)}
66
- </edgeless-tool-icon-button>
67
- <edgeless-tool-icon-button
68
- .tooltip=${'Flow'}
69
- @click=${() => this._createFlow()}
70
- >
71
- ${flowSwatch}
72
- </edgeless-tool-icon-button>
73
- </div>
74
- </div>
75
- </edgeless-slide-menu>
76
- `;
77
- }
78
- }
@@ -1,6 +0,0 @@
1
- /** Senior-button glyph — Event Storming (overlapping stickies). */
2
- export declare const eventStormingToolbarIcon: import("lit-html").TemplateResult<2>;
3
- /** Senior-button glyph — Core Domain Chart (axes + bands). */
4
- export declare const coreDomainToolbarIcon: import("lit-html").TemplateResult<2>;
5
- /** Senior-button glyph — Context Map (two bubbles + relation). */
6
- export declare const contextMapToolbarIcon: import("lit-html").TemplateResult<2>;
@@ -1,20 +0,0 @@
1
- import { svg } from 'lit';
2
- /** Senior-button glyph — Event Storming (overlapping stickies). */
3
- export const eventStormingToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
4
- <rect x="10" y="14" width="22" height="22" rx="2" transform="rotate(-6 21 25)" fill="#F5963B"/>
5
- <rect x="24" y="18" width="22" height="22" rx="2" transform="rotate(5 35 29)" fill="#5BA3DB"/>
6
- <rect x="17" y="26" width="22" height="22" rx="2" transform="rotate(-3 28 37)" fill="#FFD84D"/>
7
- </svg>`;
8
- /** Senior-button glyph — Core Domain Chart (axes + bands). */
9
- export const coreDomainToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
10
- <rect x="10" y="8" width="38" height="38" fill="#4d9900" fill-opacity="0.55"/>
11
- <rect x="10" y="8" width="14" height="38" fill="#9933ff" fill-opacity="0.55"/>
12
- <path d="M10 46 V8 M10 46 H48" stroke="#1f2328" stroke-width="2.4" stroke-linecap="round"/>
13
- <circle cx="38" cy="18" r="4" fill="#9933ff"/>
14
- </svg>`;
15
- /** Senior-button glyph — Context Map (two bubbles + relation). */
16
- export const contextMapToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
17
- <rect x="6" y="10" width="22" height="14" rx="7" fill="#e6f0fa" stroke="#2f6fb0" stroke-width="1.6"/>
18
- <rect x="28" y="32" width="22" height="14" rx="7" fill="#e6f0fa" stroke="#2f6fb0" stroke-width="1.6"/>
19
- <path d="M20 24 L34 32" stroke="#1f2328" stroke-width="1.8"/>
20
- </svg>`;
@@ -1,23 +0,0 @@
1
- import { EmptyTool } from '../../affine-gfx-pointer/index.js';
2
- import { LitElement } from 'lit';
3
- declare const DddMenuBase_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../affine-widget-edgeless-toolbar/index.js").EdgelessToolbarToolClass>;
4
- /**
5
- * Shared base for the three DDD popover menus: the menu shell styles, the
6
- * "create then return to selection (palette stays open)" finish helper and
7
- * the telemetry track helper. Each subclass adds its own create* methods (built
8
- * from the shared prefab builders) and its own render().
9
- */
10
- export declare abstract class DddMenuBase extends DddMenuBase_base {
11
- static styles: import("lit").CSSResult;
12
- type: typeof EmptyTool;
13
- /** Framework id for telemetry. */
14
- protected abstract framework: 'event-storming' | 'core-domain' | 'context-map';
15
- protected get surface(): import("../../std/gfx/index.js").SurfaceBlockModel | null;
16
- protected get center(): {
17
- cx: number;
18
- cy: number;
19
- };
20
- protected finish(id: string): void;
21
- protected track(event: 'FrameworkElementAdded' | 'FrameworkToolPicked', element: string): void;
22
- }
23
- export {};
@@ -1,62 +0,0 @@
1
- import { DefaultTool } from '../../affine-block-surface/index.js';
2
- import { EmptyTool } from '../../affine-gfx-pointer/index.js';
3
- import { TelemetryProvider } from '../../affine-shared/services/index.js';
4
- import { EdgelessToolbarToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
5
- import { css, LitElement } from 'lit';
6
- /**
7
- * Shared base for the three DDD popover menus: the menu shell styles, the
8
- * "create then return to selection (palette stays open)" finish helper and
9
- * the telemetry track helper. Each subclass adds its own create* methods (built
10
- * from the shared prefab builders) and its own render().
11
- */
12
- export class DddMenuBase extends EdgelessToolbarToolMixin(LitElement) {
13
- constructor() {
14
- super(...arguments);
15
- this.type = EmptyTool;
16
- }
17
- static { this.styles = css `
18
- :host {
19
- position: absolute;
20
- display: flex;
21
- z-index: -1;
22
- }
23
- .menu-content {
24
- display: flex;
25
- align-items: center;
26
- justify-content: center;
27
- }
28
- .button-group-container {
29
- display: flex;
30
- align-items: center;
31
- gap: 10px;
32
- fill: var(--affine-icon-color);
33
- }
34
- .button-group-container svg {
35
- width: 24px;
36
- height: 24px;
37
- }
38
- `; }
39
- get surface() {
40
- return this.gfx.surface;
41
- }
42
- get center() {
43
- const { centerX, centerY } = this.gfx.viewport;
44
- return { cx: centerX, cy: centerY };
45
- }
46
- finish(id) {
47
- const { gfx } = this;
48
- gfx.doc.captureSync();
49
- gfx.tool.setTool(DefaultTool);
50
- gfx.selection.set({ elements: [id], editing: false });
51
- // Palette stays open so several objects can be added in a row.
52
- }
53
- track(event, element) {
54
- this.edgeless.std.getOptional(TelemetryProvider)?.track(event, {
55
- framework: this.framework,
56
- element,
57
- page: 'whiteboard editor',
58
- segment: 'ddd toolbox',
59
- module: `${this.framework} menu`,
60
- });
61
- }
62
- }
@@ -1,34 +0,0 @@
1
- import { EmptyTool } from '../../affine-gfx-pointer/index.js';
2
- import { LitElement, type TemplateResult } from 'lit';
3
- declare const DddSeniorButtonBase_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../affine-widget-edgeless-toolbar/index.js").EdgelessToolbarToolClass>;
4
- /**
5
- * Shared base for the three DDD senior buttons. Each subclass only differs by
6
- * the popover menu it opens, its tooltip and its glyph — the toggle / popper
7
- * wiring is identical (mirrors the Cynefin senior button).
8
- */
9
- declare abstract class DddSeniorButtonBase extends DddSeniorButtonBase_base {
10
- static styles: import("lit").CSSResult;
11
- enableActiveBackground: boolean;
12
- type: typeof EmptyTool;
13
- protected abstract menuTag: keyof HTMLElementTagNameMap;
14
- protected abstract label: string;
15
- protected abstract icon: TemplateResult;
16
- private _toggleMenu;
17
- render(): TemplateResult<1>;
18
- }
19
- export declare class EdgelessDddEventStormingSeniorButton extends DddSeniorButtonBase {
20
- protected menuTag: "edgeless-ddd-event-storming-menu";
21
- protected label: string;
22
- protected icon: TemplateResult<2>;
23
- }
24
- export declare class EdgelessDddCoreDomainSeniorButton extends DddSeniorButtonBase {
25
- protected menuTag: "edgeless-ddd-core-domain-menu";
26
- protected label: string;
27
- protected icon: TemplateResult<2>;
28
- }
29
- export declare class EdgelessDddContextMapSeniorButton extends DddSeniorButtonBase {
30
- protected menuTag: "edgeless-ddd-context-map-menu";
31
- protected label: string;
32
- protected icon: TemplateResult<2>;
33
- }
34
- export {};