@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.
- package/package.json +6 -15
- package/{dist/consts.js → src/consts.ts} +72 -63
- package/{dist/descriptor.js → src/descriptor.ts} +1 -1
- package/src/effects.ts +17 -0
- package/src/element-renderer.ts +242 -0
- package/src/element-view.ts +143 -0
- package/src/gradient.ts +137 -0
- package/src/index.ts +1 -0
- package/src/label-layout.ts +126 -0
- package/src/legend.ts +438 -0
- package/{dist/node/consts.js → src/node/consts.ts} +109 -101
- package/src/node/node-renderer.ts +142 -0
- package/{dist/node/node-view.d.ts → src/node/node-view.ts} +11 -11
- package/src/templates/index.ts +236 -0
- package/src/templates/maps.ts +283 -0
- package/src/toolbar/config.ts +280 -0
- package/{dist/toolbar/icons.js → src/toolbar/icons.ts} +66 -51
- package/{dist/toolbar/node-config.js → src/toolbar/node-config.ts} +28 -21
- package/{dist/toolbar/senior-tool.js → src/toolbar/senior-tool.ts} +11 -11
- package/src/toolbar/wardley-menu.ts +552 -0
- package/src/toolbar/wardley-senior-button.ts +154 -0
- package/src/view.ts +39 -0
- package/dist/consts.d.ts +0 -72
- package/dist/descriptor.d.ts +0 -7
- package/dist/effects.d.ts +0 -10
- package/dist/effects.js +0 -7
- package/dist/element-renderer.d.ts +0 -15
- package/dist/element-renderer.js +0 -160
- package/dist/element-view.d.ts +0 -21
- package/dist/element-view.js +0 -122
- package/dist/gradient.d.ts +0 -18
- package/dist/gradient.js +0 -112
- package/dist/index.d.ts +0 -2
- package/dist/index.js +0 -2
- package/dist/label-layout.d.ts +0 -21
- package/dist/label-layout.js +0 -73
- package/dist/legend.d.ts +0 -12
- package/dist/legend.js +0 -333
- package/dist/node/consts.d.ts +0 -107
- package/dist/node/label-editor.d.ts +0 -28
- package/dist/node/label-editor.js +0 -216
- package/dist/node/node-renderer.d.ts +0 -17
- package/dist/node/node-renderer.js +0 -106
- package/dist/node/node-view.js +0 -10
- package/dist/templates/index.d.ts +0 -3
- package/dist/templates/index.js +0 -172
- package/dist/templates/maps.d.ts +0 -3
- package/dist/templates/maps.js +0 -247
- package/dist/toolbar/config.d.ts +0 -75
- package/dist/toolbar/config.js +0 -206
- package/dist/toolbar/icons.d.ts +0 -31
- package/dist/toolbar/node-config.d.ts +0 -2
- package/dist/toolbar/senior-tool.d.ts +0 -2
- package/dist/toolbar/wardley-menu.d.ts +0 -53
- package/dist/toolbar/wardley-menu.js +0 -408
- package/dist/toolbar/wardley-senior-button.d.ts +0 -18
- package/dist/toolbar/wardley-senior-button.js +0 -146
- package/dist/toolbar/wardley-tool-button.d.ts +0 -10
- package/dist/toolbar/wardley-tool-button.js +0 -123
- package/dist/view.d.ts +0 -7
- package/dist/view.js +0 -36
package/dist/templates/maps.js
DELETED
|
@@ -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
|
package/dist/toolbar/config.d.ts
DELETED
|
@@ -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
|
package/dist/toolbar/config.js
DELETED
|
@@ -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
|
package/dist/toolbar/icons.d.ts
DELETED
|
@@ -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,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
|