@formicoidea/labre-framework-wardley 0.23.1 → 0.23.2

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 (61) hide show
  1. package/package.json +6 -15
  2. package/{dist/consts.js → src/consts.ts} +72 -63
  3. package/{dist/descriptor.js → src/descriptor.ts} +1 -1
  4. package/src/effects.ts +17 -0
  5. package/src/element-renderer.ts +242 -0
  6. package/src/element-view.ts +143 -0
  7. package/src/gradient.ts +137 -0
  8. package/src/index.ts +1 -0
  9. package/src/label-layout.ts +126 -0
  10. package/src/legend.ts +438 -0
  11. package/{dist/node/consts.js → src/node/consts.ts} +109 -101
  12. package/src/node/node-renderer.ts +142 -0
  13. package/{dist/node/node-view.d.ts → src/node/node-view.ts} +11 -11
  14. package/src/templates/index.ts +236 -0
  15. package/src/templates/maps.ts +283 -0
  16. package/src/toolbar/config.ts +280 -0
  17. package/{dist/toolbar/icons.js → src/toolbar/icons.ts} +66 -51
  18. package/{dist/toolbar/node-config.js → src/toolbar/node-config.ts} +28 -21
  19. package/{dist/toolbar/senior-tool.js → src/toolbar/senior-tool.ts} +11 -11
  20. package/src/toolbar/wardley-menu.ts +552 -0
  21. package/src/toolbar/wardley-senior-button.ts +154 -0
  22. package/src/view.ts +39 -0
  23. package/dist/consts.d.ts +0 -72
  24. package/dist/descriptor.d.ts +0 -7
  25. package/dist/effects.d.ts +0 -10
  26. package/dist/effects.js +0 -7
  27. package/dist/element-renderer.d.ts +0 -15
  28. package/dist/element-renderer.js +0 -160
  29. package/dist/element-view.d.ts +0 -21
  30. package/dist/element-view.js +0 -122
  31. package/dist/gradient.d.ts +0 -18
  32. package/dist/gradient.js +0 -112
  33. package/dist/index.d.ts +0 -2
  34. package/dist/index.js +0 -2
  35. package/dist/label-layout.d.ts +0 -21
  36. package/dist/label-layout.js +0 -73
  37. package/dist/legend.d.ts +0 -12
  38. package/dist/legend.js +0 -333
  39. package/dist/node/consts.d.ts +0 -107
  40. package/dist/node/label-editor.d.ts +0 -28
  41. package/dist/node/label-editor.js +0 -216
  42. package/dist/node/node-renderer.d.ts +0 -17
  43. package/dist/node/node-renderer.js +0 -106
  44. package/dist/node/node-view.js +0 -10
  45. package/dist/templates/index.d.ts +0 -3
  46. package/dist/templates/index.js +0 -172
  47. package/dist/templates/maps.d.ts +0 -3
  48. package/dist/templates/maps.js +0 -247
  49. package/dist/toolbar/config.d.ts +0 -75
  50. package/dist/toolbar/config.js +0 -206
  51. package/dist/toolbar/icons.d.ts +0 -31
  52. package/dist/toolbar/node-config.d.ts +0 -2
  53. package/dist/toolbar/senior-tool.d.ts +0 -2
  54. package/dist/toolbar/wardley-menu.d.ts +0 -53
  55. package/dist/toolbar/wardley-menu.js +0 -408
  56. package/dist/toolbar/wardley-senior-button.d.ts +0 -18
  57. package/dist/toolbar/wardley-senior-button.js +0 -146
  58. package/dist/toolbar/wardley-tool-button.d.ts +0 -10
  59. package/dist/toolbar/wardley-tool-button.js +0 -123
  60. package/dist/view.d.ts +0 -7
  61. package/dist/view.js +0 -36
@@ -1,247 +0,0 @@
1
- import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
2
- import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
3
- import { INERTIA_COLOR, LABEL_FONT_SIZE, LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL, NODE_SIZE, NODE_STROKE, WARDLEY_RED, } from '../node/consts';
4
- /**
5
- * Authoring kit for canonical Wardley maps. Positions are given as
6
- * (evolution 0..1, value 0..1) and mapped into the plot interior of a fixed
7
- * 1600x900 background. Per the composition principle, every glyph reuses an
8
- * existing shape: stakeholders/users are anchor (person) nodes, "needs" are
9
- * thick-stroked component nodes, capabilities are component nodes, notes are
10
- * native rects + text, inertia is the inertia bar, and the future / evolution
11
- * arrow is the red dashed connector. Legends are produced by the editor's
12
- * auto-legend action rather than baked into the template.
13
- */
14
- const W = 1600;
15
- const H = 900;
16
- const PL = { x: 70, y: 56, w: 1470, h: 786 };
17
- const ex = (e) => PL.x + e * PL.w;
18
- const vy = (v) => PL.y + (1 - v) * PL.h;
19
- const D = NODE_SIZE; // 18
20
- const bg = (variant = 'classic') => ({ type: 'wardley', variant, xywh: `[0,0,${W},${H}]` });
21
- function dot(e, v, sw, stroke = NODE_STROKE, fill = NODE_FILL) {
22
- const cx = ex(e);
23
- const cy = vy(v);
24
- return {
25
- type: 'wardleyNode',
26
- kind: 'component',
27
- shapeType: 'ellipse',
28
- filled: true,
29
- fillColor: fill,
30
- strokeColor: stroke,
31
- strokeWidth: sw,
32
- shapeStyle: ShapeStyle.General,
33
- roughness: 0,
34
- xywh: `[${cx - D / 2},${cy - D / 2},${D},${D}]`,
35
- };
36
- }
37
- const comp = (e, v) => dot(e, v, 1);
38
- const future = (e, v) => dot(e, v, 2, WARDLEY_RED);
39
- function stake(e, v) {
40
- const cx = ex(e);
41
- const cy = vy(v);
42
- const d = 24;
43
- return {
44
- type: 'wardleyNode',
45
- kind: 'anchor',
46
- shapeType: 'ellipse',
47
- filled: true,
48
- fillColor: NODE_FILL,
49
- strokeColor: NODE_STROKE,
50
- strokeWidth: 1,
51
- shapeStyle: ShapeStyle.General,
52
- roughness: 0,
53
- xywh: `[${cx - d / 2},${cy - d / 2},${d},${d}]`,
54
- };
55
- }
56
- function lbl(e, v, text, o = {}) {
57
- const cx = ex(e);
58
- const cy = vy(v);
59
- const w = o.w ?? 200;
60
- const dx = o.dx ?? 12;
61
- const dy = o.dy ?? -10;
62
- const align = o.align ?? 'left';
63
- const x = align === 'right' ? cx - w - dx : align === 'center' ? cx - w / 2 : cx + dx;
64
- return {
65
- type: 'text',
66
- text: surfaceText(text),
67
- color: o.color ?? NODE_STROKE,
68
- fontFamily: FontFamily.Inter,
69
- fontSize: o.size ?? LABEL_FONT_SIZE,
70
- textAlign: align === 'right' ? TextAlign.Right : align === 'center' ? TextAlign.Center : TextAlign.Left,
71
- xywh: `[${x},${cy + dy},${w},26]`,
72
- };
73
- }
74
- function link(a, b, o = {}) {
75
- return {
76
- type: 'connector',
77
- mode: ConnectorMode.Straight,
78
- stroke: o.red ? WARDLEY_RED : LINK_GREY,
79
- strokeStyle: o.arrow ? StrokeStyle.Dash : StrokeStyle.Solid,
80
- strokeWidth: LINK_STROKE_WIDTH,
81
- frontEndpointStyle: PointStyle.None,
82
- rearEndpointStyle: o.arrow ? PointStyle.Triangle : PointStyle.None,
83
- source: { id: a },
84
- target: { id: b },
85
- };
86
- }
87
- function inertia(e, v) {
88
- const cx = ex(e);
89
- const cy = vy(v);
90
- return {
91
- type: 'shape',
92
- shapeType: 'rect',
93
- filled: true,
94
- fillColor: INERTIA_COLOR,
95
- strokeColor: INERTIA_COLOR,
96
- strokeWidth: 0,
97
- shapeStyle: ShapeStyle.General,
98
- roughness: 0,
99
- radius: 0,
100
- xywh: `[${cx - 4},${cy - 22},8,44]`,
101
- };
102
- }
103
- function panel(x, y, w, h) {
104
- return {
105
- type: 'shape',
106
- shapeType: 'rect',
107
- filled: true,
108
- fillColor: '#ffffff',
109
- strokeColor: NODE_STROKE,
110
- strokeWidth: 1.2,
111
- shapeStyle: ShapeStyle.General,
112
- roughness: 0,
113
- radius: 0,
114
- xywh: `[${x},${y},${w},${h}]`,
115
- };
116
- }
117
- function freeText(x, y, w, str, size = 16, color = NODE_STROKE) {
118
- return {
119
- type: 'text',
120
- text: surfaceText(str),
121
- color,
122
- fontFamily: FontFamily.Inter,
123
- fontSize: size,
124
- textAlign: TextAlign.Left,
125
- xywh: `[${x},${y},${w},26]`,
126
- };
127
- }
128
- /** Centred, enlarged map title spanning the plot width. */
129
- function title(str) {
130
- return {
131
- type: 'text',
132
- text: surfaceText(str),
133
- color: NODE_STROKE,
134
- fontFamily: FontFamily.Inter,
135
- fontSize: 28,
136
- textAlign: TextAlign.Center,
137
- xywh: `[${W / 2 - 500},12,1000,40]`,
138
- };
139
- }
140
- const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
141
- const mapPreview = (extra) => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="#3b3d42" stroke-width="2"/>${extra}</svg>`;
142
- function tpl(name, preview, elements) {
143
- return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
144
- }
145
- function ann(e, v) {
146
- const cx = ex(e);
147
- const cy = vy(v);
148
- return {
149
- type: 'shape',
150
- shapeType: 'ellipse',
151
- filled: true,
152
- fillColor: '#ffffff',
153
- strokeColor: NODE_STROKE,
154
- strokeWidth: 1.5,
155
- shapeStyle: ShapeStyle.General,
156
- roughness: 0,
157
- xywh: `[${cx - 14},${cy - 14},28,28]`,
158
- };
159
- }
160
- function annTxt(e, v, n) {
161
- const cx = ex(e);
162
- const cy = vy(v);
163
- return {
164
- type: 'text',
165
- text: surfaceText(n),
166
- color: NODE_STROKE,
167
- fontFamily: FontFamily.Inter,
168
- fontSize: 14,
169
- textAlign: TextAlign.Center,
170
- xywh: `[${cx - 14},${cy - 9},28,20]`,
171
- };
172
- }
173
- // ── Tea Shop (the canonical map) ──────────────────────────────────────
174
- function teaShop() {
175
- return {
176
- bg: bg(),
177
- title: title('Tea Shop'),
178
- annBox: panel(120, 200, 420, 64),
179
- annText: freeText(132, 208, 400, 'Annotations:\n1. Standardising power lets kettles evolve faster\n2. Hot water is obvious and well known', 13),
180
- business: stake(0.62, 0.93),
181
- businessL: lbl(0.62, 0.93, 'Business', { align: 'center', dy: -28, w: 120 }),
182
- public: stake(0.78, 0.93),
183
- publicL: lbl(0.78, 0.93, 'Public', { align: 'center', dy: -28, w: 120 }),
184
- cupOfTea: comp(0.62, 0.74),
185
- cupOfTeaL: lbl(0.62, 0.74, 'Cup of Tea', { align: 'right' }),
186
- cup: comp(0.8, 0.7),
187
- cupL: lbl(0.8, 0.7, 'Cup'),
188
- tea: comp(0.83, 0.6),
189
- teaL: lbl(0.83, 0.6, 'Tea'),
190
- hotWater: comp(0.8, 0.47),
191
- hotWaterL: lbl(0.8, 0.47, 'Hot Water'),
192
- water: comp(0.81, 0.34),
193
- waterL: lbl(0.81, 0.34, 'Water'),
194
- kettle: comp(0.36, 0.38),
195
- kettleL: lbl(0.36, 0.38, 'Kettle', { align: 'right', dy: 6 }),
196
- electric: future(0.56, 0.38),
197
- electricL: lbl(0.56, 0.38, 'Electric Kettle'),
198
- power: comp(0.7, 0.1),
199
- powerL: lbl(0.7, 0.1, 'Power', { align: 'right', dy: 6 }),
200
- powerFut: future(0.88, 0.1),
201
- powerFutL: lbl(0.88, 0.1, 'Power'),
202
- limitedBy: lbl(0.56, 0.43, 'limited by', { align: 'center', w: 120, size: 13 }),
203
- ann1a: ann(0.5, 0.385), ann1t: annTxt(0.5, 0.385, '1'),
204
- ann2a: ann(0.84, 0.45), ann2t: annTxt(0.84, 0.45, '2'),
205
- l1: link('business', 'cupOfTea'),
206
- l2: link('public', 'cupOfTea'),
207
- l3: link('cupOfTea', 'cup'),
208
- l4: link('cupOfTea', 'tea'),
209
- l5: link('cupOfTea', 'hotWater'),
210
- l6: link('hotWater', 'water'),
211
- l7: link('hotWater', 'kettle'),
212
- l8: link('kettle', 'power'),
213
- a1: link('kettle', 'electric', { red: true, arrow: true }),
214
- a2: link('power', 'powerFut', { red: true, arrow: true }),
215
- };
216
- }
217
- // ── Kodak inertia (2005) ──────────────────────────────────────────────
218
- function kodak() {
219
- return {
220
- bg: bg(),
221
- title: title("Wardley map of Kodak's 2005 inertia to digital"),
222
- user: stake(0.54, 0.92),
223
- userL: lbl(0.54, 0.92, 'User'),
224
- capture: dot(0.53, 0.8, 3),
225
- captureL: lbl(0.53, 0.8, 'Capture a moment'),
226
- film: comp(0.52, 0.62),
227
- filmL: lbl(0.52, 0.62, 'Film camera', { align: 'right' }),
228
- digital: future(0.74, 0.62),
229
- digitalL: lbl(0.74, 0.62, 'Digital camera', { color: WARDLEY_RED }),
230
- roll: comp(0.52, 0.4),
231
- rollL: lbl(0.52, 0.4, 'Photographic film', { align: 'right' }),
232
- storage: future(0.84, 0.4),
233
- storageL: lbl(0.84, 0.4, 'Digital storage', { color: WARDLEY_RED }),
234
- inertiaBar: inertia(0.78, 0.4),
235
- l1: link('user', 'capture'),
236
- l2: link('capture', 'film'),
237
- l3: link('film', 'roll'),
238
- r1: link('capture', 'storage', { red: true }),
239
- a1: link('film', 'digital', { red: true, arrow: true }),
240
- a2: link('roll', 'storage', { red: true, arrow: true }),
241
- };
242
- }
243
- export const wardleyMaps = [
244
- tpl('Tea Shop', mapPreview('<circle cx="78" cy="24" r="3" fill="#fff" stroke="#1f2328"/><circle cx="50" cy="44" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="92" cy="58" r="3" fill="#fff" stroke="#1f2328"/><path d="M78 24 L50 44 M78 24 L86 40 L92 58" stroke="#666"/><path d="M50 44 h22" stroke="#d6455d" stroke-dasharray="3 2"/>'), teaShop()),
245
- tpl('Kodak inertia', mapPreview('<circle cx="56" cy="22" r="3" fill="#fff" stroke="#1f2328"/><circle cx="54" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#d6455d"/><rect x="76" y="35" width="2.5" height="11" fill="#1f2328"/><path d="M57 40 h17" stroke="#d6455d" stroke-dasharray="3 2"/>'), kodak()),
246
- ];
247
- //# sourceMappingURL=maps.js.map
@@ -1,75 +0,0 @@
1
- import { type ToolbarContext } from '@formicoidea/labre-core/shared/services';
2
- import { type TemplateResult } from 'lit';
3
- export declare const wardleyToolbarConfig: {
4
- readonly actions: [{
5
- id: string;
6
- tooltip: string;
7
- icon: TemplateResult;
8
- when: boolean | ((ctx: ToolbarContext) => boolean);
9
- active(ctx: ToolbarContext): boolean;
10
- run(ctx: ToolbarContext): void;
11
- }, {
12
- readonly id: "b.evolution";
13
- readonly actions: [{
14
- id: string;
15
- tooltip: string;
16
- icon: TemplateResult;
17
- when: boolean | ((ctx: ToolbarContext) => boolean);
18
- active(ctx: ToolbarContext): boolean;
19
- run(ctx: ToolbarContext): void;
20
- }, {
21
- id: string;
22
- tooltip: string;
23
- icon: TemplateResult;
24
- when: boolean | ((ctx: ToolbarContext) => boolean);
25
- active(ctx: ToolbarContext): boolean;
26
- run(ctx: ToolbarContext): void;
27
- }, {
28
- id: string;
29
- tooltip: string;
30
- icon: TemplateResult;
31
- when: boolean | ((ctx: ToolbarContext) => boolean);
32
- active(ctx: ToolbarContext): boolean;
33
- run(ctx: ToolbarContext): void;
34
- }, {
35
- id: string;
36
- tooltip: string;
37
- icon: TemplateResult;
38
- when: boolean | ((ctx: ToolbarContext) => boolean);
39
- active(ctx: ToolbarContext): boolean;
40
- run(ctx: ToolbarContext): void;
41
- }, {
42
- id: string;
43
- tooltip: string;
44
- icon: TemplateResult;
45
- when: boolean | ((ctx: ToolbarContext) => boolean);
46
- active(ctx: ToolbarContext): boolean;
47
- run(ctx: ToolbarContext): void;
48
- }];
49
- }, {
50
- readonly id: "c.value-chain";
51
- readonly actions: [{
52
- id: string;
53
- tooltip: string;
54
- icon: TemplateResult;
55
- when: boolean | ((ctx: ToolbarContext) => boolean);
56
- active(ctx: ToolbarContext): boolean;
57
- run(ctx: ToolbarContext): void;
58
- }, {
59
- id: string;
60
- tooltip: string;
61
- icon: TemplateResult;
62
- when: boolean | ((ctx: ToolbarContext) => boolean);
63
- active(ctx: ToolbarContext): boolean;
64
- run(ctx: ToolbarContext): void;
65
- }];
66
- }, {
67
- readonly id: "d.legend";
68
- readonly tooltip: "Generate the legend (components present)";
69
- readonly icon: TemplateResult<2>;
70
- readonly run: (ctx: ToolbarContext) => void;
71
- }];
72
- readonly when: (ctx: ToolbarContext) => boolean;
73
- };
74
- export declare const wardleyToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
75
- //# sourceMappingURL=config.d.ts.map
@@ -1,206 +0,0 @@
1
- import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
2
- import { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
3
- import { TelemetryProvider, ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
4
- import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
5
- import { html } from 'lit';
6
- import { createWardleyLegend } from '../legend';
7
- import { wardleyLegendIcon } from './icons';
8
- const ResizeIcon = html `<svg
9
- width="24"
10
- height="24"
11
- viewBox="0 0 24 24"
12
- fill="none"
13
- stroke="currentColor"
14
- stroke-width="1.6"
15
- stroke-linecap="round"
16
- stroke-linejoin="round"
17
- >
18
- <path d="M9 5H5v4M15 19h4v-4" />
19
- <path d="M5 5l6 6M19 19l-6-6" />
20
- </svg>`;
21
- /** Gradient swatch — show/hide the variant gradient. */
22
- const GradientIcon = html `<svg
23
- width="24"
24
- height="24"
25
- viewBox="0 0 24 24"
26
- fill="none"
27
- xmlns="http://www.w3.org/2000/svg"
28
- >
29
- <defs>
30
- <linearGradient id="wardleyToolbarGrad" x1="0" y1="0" x2="1" y2="0">
31
- <stop offset="0" stop-color="currentColor" stop-opacity="0.85" />
32
- <stop offset="1" stop-color="currentColor" stop-opacity="0.1" />
33
- </linearGradient>
34
- </defs>
35
- <rect
36
- x="4"
37
- y="5"
38
- width="16"
39
- height="14"
40
- rx="2"
41
- fill="url(#wardleyToolbarGrad)"
42
- stroke="currentColor"
43
- stroke-width="1.4"
44
- />
45
- </svg>`;
46
- /** Horizontal axis with a right-pointing arrow (Evolution / X). */
47
- const XAxisIcon = html `<svg
48
- width="24"
49
- height="24"
50
- viewBox="0 0 24 24"
51
- fill="none"
52
- stroke="currentColor"
53
- stroke-width="1.6"
54
- stroke-linecap="round"
55
- stroke-linejoin="round"
56
- >
57
- <path d="M3 17h15" />
58
- <path d="M15 14l3 3-3 3" />
59
- </svg>`;
60
- /** Vertical axis with an up-pointing arrow (Value Chain / Y). */
61
- const YAxisIcon = html `<svg
62
- width="24"
63
- height="24"
64
- viewBox="0 0 24 24"
65
- fill="none"
66
- stroke="currentColor"
67
- stroke-width="1.6"
68
- stroke-linecap="round"
69
- stroke-linejoin="round"
70
- >
71
- <path d="M7 21V6" />
72
- <path d="M4 9l3-3 3 3" />
73
- </svg>`;
74
- /** Dashed vertical column dividers. */
75
- const ColumnsIcon = html `<svg
76
- width="24"
77
- height="24"
78
- viewBox="0 0 24 24"
79
- fill="none"
80
- stroke="currentColor"
81
- stroke-width="1.6"
82
- stroke-linecap="round"
83
- stroke-dasharray="3 3"
84
- >
85
- <path d="M9 4v16M15 4v16" />
86
- </svg>`;
87
- /** Column labels (short bars under the columns). */
88
- const ColumnLabelsIcon = html `<svg
89
- width="24"
90
- height="24"
91
- viewBox="0 0 24 24"
92
- fill="currentColor"
93
- stroke="none"
94
- >
95
- <rect x="3" y="15" width="4.5" height="3" rx="1" />
96
- <rect x="9.75" y="15" width="4.5" height="3" rx="1" />
97
- <rect x="16.5" y="15" width="4.5" height="3" rx="1" />
98
- </svg>`;
99
- /** Corner labels (Uncharted / Industrialized, top corners). */
100
- const CornerLabelsIcon = html `<svg
101
- width="24"
102
- height="24"
103
- viewBox="0 0 24 24"
104
- fill="currentColor"
105
- stroke="none"
106
- >
107
- <rect x="3" y="5" width="6" height="3" rx="1" />
108
- <rect x="15" y="5" width="6" height="3" rx="1" />
109
- </svg>`;
110
- /** Visibility labels (Visible / Invisible) — an eye. */
111
- const VisibilityIcon = html `<svg
112
- width="24"
113
- height="24"
114
- viewBox="0 0 24 24"
115
- fill="none"
116
- stroke="currentColor"
117
- stroke-width="1.6"
118
- stroke-linecap="round"
119
- stroke-linejoin="round"
120
- >
121
- <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z" />
122
- <circle cx="12" cy="12" r="2.4" />
123
- </svg>`;
124
- /**
125
- * Build a toolbar toggle that flips a boolean flag on every selected Wardley
126
- * background: `active` reflects the current state, `run` flips it (with an
127
- * undo checkpoint). An optional `when` predicate hides the button.
128
- */
129
- function booleanToggle(id, tooltip, icon, prop, when) {
130
- return {
131
- id,
132
- tooltip,
133
- icon,
134
- when: when ?? true,
135
- active(ctx) {
136
- const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
137
- return models.length > 0 && models.every(model => model[prop]);
138
- },
139
- run(ctx) {
140
- const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
141
- if (!models.length)
142
- return;
143
- const enable = !models.every(model => model[prop]);
144
- ctx.std.store.captureSync();
145
- const crud = ctx.std.get(EdgelessCRUDIdentifier);
146
- for (const model of models) {
147
- crud.updateElement(model.id, { [prop]: enable });
148
- }
149
- },
150
- };
151
- }
152
- export const wardleyToolbarConfig = {
153
- actions: [
154
- booleanToggle('a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
155
- // Group 1 — evolution (X) side: axis, phase labels, columns, corner
156
- // labels, and the gradient toggle.
157
- {
158
- id: 'b.evolution',
159
- actions: [
160
- booleanToggle('b.1-axis-x', 'Evolution axis (X)', XAxisIcon, 'showXAxis'),
161
- booleanToggle('b.2-column-labels', 'Evolution phase labels', ColumnLabelsIcon, 'showColumnLabels'),
162
- booleanToggle('b.3-columns', 'Columns (dividers)', ColumnsIcon, 'showColumnDividers'),
163
- booleanToggle('b.4-corner-labels', 'Labels Uncharted / Industrialized', CornerLabelsIcon, 'showCornerLabels'),
164
- // Only relevant when the selection has a gradient variant.
165
- booleanToggle('b.5-gradient', 'Show / hide the gradient', GradientIcon, 'showGradient', ctx => ctx
166
- .getSurfaceModelsByType(WardleyBackgroundElementModel)
167
- .some(model => model.variant !== 'classic')),
168
- ],
169
- },
170
- // Group 2 — value-chain (Y) side: axis and Visible/Invisible labels.
171
- {
172
- id: 'c.value-chain',
173
- actions: [
174
- booleanToggle('c.1-axis-y', 'Value Chain axis (Y)', YAxisIcon, 'showYAxis'),
175
- booleanToggle('c.2-visibility-labels', 'Labels Visible / Invisible', VisibilityIcon, 'showVisibilityLabels'),
176
- ],
177
- },
178
- // Generate the auto-legend from the components present inside this
179
- // background's perimeter (+ a gradient-meaning block for gradient variants).
180
- {
181
- id: 'd.legend',
182
- tooltip: 'Generate the legend (components present)',
183
- icon: wardleyLegendIcon,
184
- run(ctx) {
185
- const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
186
- const bg = models[0];
187
- if (!bg)
188
- return;
189
- createWardleyLegend(ctx.std, bg);
190
- ctx.std.getOptional(TelemetryProvider)?.track('FrameworkLegendCreated', {
191
- framework: 'wardley',
192
- element: 'legend',
193
- page: 'whiteboard editor',
194
- segment: 'element toolbar',
195
- module: 'wardley toolbar',
196
- });
197
- },
198
- },
199
- ],
200
- when: ctx => ctx.getSurfaceModelsByType(WardleyBackgroundElementModel).length > 0,
201
- };
202
- export const wardleyToolbarExtension = ToolbarModuleExtension({
203
- id: BlockFlavourIdentifier('affine:surface:wardley'),
204
- config: wardleyToolbarConfig,
205
- });
206
- //# sourceMappingURL=config.js.map
@@ -1,31 +0,0 @@
1
- /** Colored Wardley glyph (mockup proposal B) for the main toolbar button. */
2
- export declare const wardleyToolbarIcon: import("lit-html").TemplateResult<2>;
3
- /** Monochrome glyph for the "create background" menu item (uses currentColor). */
4
- export declare const wardleyBackgroundIcon: import("lit-html").TemplateResult<2>;
5
- /** Component node (validated COMP-C2): single circle. */
6
- export declare const wardleyComponentIcon: import("lit-html").TemplateResult<2>;
7
- /** Anchor (validated ANCH-B): person glyph inscribed in a circle. */
8
- export declare const wardleyAnchorIcon: import("lit-html").TemplateResult<2>;
9
- /** Dependency link (validated LINK-A3): two outline nodes joined by a line. */
10
- export declare const wardleyLinkIcon: import("lit-html").TemplateResult<2>;
11
- /** Evolution arrow (validated ARR-B): red dashed arrow. */
12
- export declare const wardleyArrowIcon: import("lit-html").TemplateResult<2>;
13
- /** Inertia (validated INER): black bar barring the red dashed arrow. */
14
- export declare const wardleyInertiaIcon: import("lit-html").TemplateResult<2>;
15
- /** Pipeline (validated PIPE-D): wide thin rect + square handle astride the top edge, thin borders. */
16
- export declare const wardleyPipelineIcon: import("lit-html").TemplateResult<2>;
17
- /** Market (validated MKT-B): thin outer circle + 3 thick-bordered nodes wired in a triangle. */
18
- export declare const wardleyMarketIcon: import("lit-html").TemplateResult<2>;
19
- /** Ecosystem (validated ECO-A): double border at the rim + hatching confined to the inner donut + hollow center. */
20
- export declare const wardleyEcosystemIcon: import("lit-html").TemplateResult<2>;
21
- /** Component + method (validated METH-A): component inscribed in a colored outer circle (default grey). */
22
- export declare const wardleyMethodIcon: import("lit-html").TemplateResult<2>;
23
- /** Legend: a bordered box with glyph + line rows. */
24
- export declare const wardleyLegendIcon: import("lit-html").TemplateResult<2>;
25
- /** Opportunity gradient background: axes + green differential hump + red operational bump. */
26
- export declare const wardleyOpportunityIcon: import("lit-html").TemplateResult<2>;
27
- /** Benefit/Investment gradient background: axes + zero line + green J-curve. */
28
- export declare const wardleyBenefitIcon: import("lit-html").TemplateResult<2>;
29
- /** Evolution-gradient background (Wardley's S-curve presentation): grey at both edges fading to white center. */
30
- export declare const wardleyEvolutionGradientIcon: import("lit-html").TemplateResult<2>;
31
- //# sourceMappingURL=icons.d.ts.map
@@ -1,2 +0,0 @@
1
- export declare const wardleyNodeToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
2
- //# sourceMappingURL=node-config.d.ts.map
@@ -1,2 +0,0 @@
1
- export declare const wardleySeniorTool: import("@formicoidea/labre-core/store").ExtensionType;
2
- //# sourceMappingURL=senior-tool.d.ts.map
@@ -1,53 +0,0 @@
1
- import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
2
- import { LitElement } from 'lit';
3
- declare const EdgelessWardleyMenu_base: typeof LitElement & import("@formicoidea/labre-core/global/utils").Constructor<import("@formicoidea/labre-core/widgets/edgeless-toolbar").EdgelessToolbarToolClass>;
4
- /**
5
- * The popover that opens above the toolbar for the Wardley toolbox. Each item
6
- * creates a pre-formatted Wardley object. Nodes (component / anchor) are a
7
- * native ellipse + a native text label, grouped together.
8
- */
9
- export declare class EdgelessWardleyMenu extends EdgelessWardleyMenu_base {
10
- static styles: import("lit").CSSResult;
11
- type: typeof EmptyTool;
12
- private _createBackground;
13
- /** Add a native ellipse wardley node centred on (cx, cy). */
14
- private _addEllipseNode;
15
- /** Add a native free-text label (same Inter family as the axis labels). */
16
- private _addLabel;
17
- /** Group elements; returns the group id (or the first id if grouping failed). */
18
- private _group;
19
- /**
20
- * Create a single-circle node (component / anchor / ecosystem / method):
21
- * one connectable native ellipse + a label to its right, grouped so they
22
- * move together (enter the group to reposition / edit the label).
23
- */
24
- private _createNode;
25
- private _createInertia;
26
- /**
27
- * Create a pipeline: a wide thin native rect body (white semi-transparent,
28
- * NON-connectable) + a node-sized square handle straddling its top edge (the
29
- * only connection point, center anchor) + a native text label. The handle and
30
- * label are grouped, then grouped again with the body so the whole pipeline
31
- * moves as one. Pure composition of native elements — no custom type / view.
32
- */
33
- private _createPipeline;
34
- /**
35
- * Create a market: a large thin-bordered circle (the connectable market node)
36
- * containing 3 small thick-bordered component nodes wired into a triangle by
37
- * native attached connectors (thin, dark, no arrows — they auto-route between
38
- * the node centers and follow on move/resize). A label sits to the right and
39
- * everything is grouped into one object.
40
- */
41
- private _createMarket;
42
- /**
43
- * Activate the native connector tool, pre-styled for a Wardley link (grey,
44
- * solid, no arrow) or evolution arrow (red, dashed, FILLED triangle). The
45
- * user then draws from one node to another (endpoints attach to centers).
46
- */
47
- private _activateConnector;
48
- private _finish;
49
- private _track;
50
- render(): import("lit-html").TemplateResult<1>;
51
- }
52
- export {};
53
- //# sourceMappingURL=wardley-menu.d.ts.map