@likec4/core 1.8.0 → 1.9.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/index.cjs +4368 -0
- package/dist/index.d.cts +781 -0
- package/dist/index.d.mts +781 -0
- package/dist/index.mjs +4296 -0
- package/dist/shared/core.9l7eW3pn.d.cts +817 -0
- package/dist/shared/core.9l7eW3pn.d.mts +817 -0
- package/dist/shared/core.DcPLm41i.cjs +304 -0
- package/dist/shared/core.DfUTsojZ.mjs +251 -0
- package/dist/types/index.cjs +53 -0
- package/dist/types/index.d.cts +1 -0
- package/dist/types/index.d.mts +1 -0
- package/dist/types/index.mjs +1 -0
- package/package.json +41 -33
- package/src/colors/index.ts +27 -1
- package/src/errors/index.ts +3 -95
- package/src/index.ts +5 -6
- package/src/model/LikeC4Model.ts +480 -0
- package/src/model/LikeC4ViewModel.ts +318 -0
- package/src/model/__test__/LikeC4Model.spec.ts +79 -0
- package/src/model/__test__/fixture.ts +333 -0
- package/src/model/index.ts +2 -0
- package/src/model/types.ts +10 -0
- package/src/types/_common.ts +4 -2
- package/src/types/element.ts +8 -8
- package/src/types/expression.ts +3 -3
- package/src/types/index.ts +0 -1
- package/src/types/model.ts +16 -6
- package/src/types/relation.ts +15 -5
- package/src/types/theme.ts +28 -12
- package/src/types/view-notation.ts +3 -4
- package/src/types/view.ts +14 -10
- package/src/utils/fqn.ts +7 -4
- package/src/utils/relations.spec.ts +1 -3
- package/src/utils/relations.ts +7 -17
- package/dist/colors/element.d.ts +0 -69
- package/dist/colors/element.js +0 -75
- package/dist/colors/index.d.ts +0 -133
- package/dist/colors/index.js +0 -9
- package/dist/colors/relationships.d.ts +0 -58
- package/dist/colors/relationships.js +0 -49
- package/dist/errors/errors.spec.d.ts +0 -2
- package/dist/errors/errors.spec.js +0 -69
- package/dist/errors/index.d.ts +0 -39
- package/dist/errors/index.js +0 -104
- package/dist/index.d.ts +0 -7
- package/dist/index.js +0 -4
- package/dist/types/_common.d.ts +0 -9
- package/dist/types/_common.js +0 -1
- package/dist/types/element.d.ts +0 -55
- package/dist/types/element.js +0 -15
- package/dist/types/expression.d.ts +0 -119
- package/dist/types/expression.js +0 -67
- package/dist/types/index.d.ts +0 -14
- package/dist/types/index.js +0 -14
- package/dist/types/model.d.ts +0 -14
- package/dist/types/model.js +0 -1
- package/dist/types/opaque.d.ts +0 -103
- package/dist/types/opaque.js +0 -1
- package/dist/types/operators.d.ts +0 -44
- package/dist/types/operators.js +0 -59
- package/dist/types/overview-graph.d.ts +0 -41
- package/dist/types/overview-graph.js +0 -1
- package/dist/types/relation.d.ts +0 -30
- package/dist/types/relation.js +0 -3
- package/dist/types/theme.d.ts +0 -27
- package/dist/types/theme.js +0 -1
- package/dist/types/view-changes.d.ts +0 -26
- package/dist/types/view-changes.js +0 -1
- package/dist/types/view-notation.d.ts +0 -9
- package/dist/types/view-notation.js +0 -1
- package/dist/types/view.d.ts +0 -243
- package/dist/types/view.js +0 -50
- package/dist/utils/fqn.d.ts +0 -39
- package/dist/utils/fqn.js +0 -102
- package/dist/utils/fqn.spec.d.ts +0 -2
- package/dist/utils/fqn.spec.js +0 -82
- package/dist/utils/guards.d.ts +0 -5
- package/dist/utils/guards.js +0 -7
- package/dist/utils/index.d.ts +0 -5
- package/dist/utils/index.js +0 -4
- package/dist/utils/promises.d.ts +0 -2
- package/dist/utils/promises.js +0 -8
- package/dist/utils/relations.d.ts +0 -30
- package/dist/utils/relations.js +0 -79
- package/dist/utils/relations.spec.d.ts +0 -2
- package/dist/utils/relations.spec.js +0 -210
- package/src/errors/errors.spec.ts +0 -88
- package/src/reset.d.ts +0 -2
- package/src/types/opaque.ts +0 -108
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,4296 @@
|
|
|
1
|
+
import { u, e, n as nonNullable, D as DefaultElementShape, a as DefaultThemeColor } from './shared/core.DfUTsojZ.mjs';
|
|
2
|
+
export { A as AsFqn, B as BorderStyles, J as DefaultArrowType, I as DefaultLineStyle, K as DefaultRelationshipColor, E as ElementShapes, c as Expr, U as StepEdgeId, W as extractStep, Z as getBBoxCenter, i as invariant, F as isAndOperator, X as isComputedDynamicView, Y as isComputedElementView, g as isCustomElement, w as isCustomRelationExpr, Q as isDynamicView, P as isDynamicViewIncludeRule, l as isElement, j as isElementKindExpr, o as isElementPredicateExpr, d as isElementRef, k as isElementTagExpr, R as isElementView, m as isElementWhere, f as isExpandedElementExpr, S as isExtendsElementView, q as isInOut, r as isIncoming, z as isKindEqual, C as isNotOperator, G as isOrOperator, s as isOutgoing, p as isRelation, t as isRelationExpression, x as isRelationPredicateExpr, v as isRelationWhere, T as isScopedElementView, V as isStepEdgeId, y as isTagEqual, L as isThemeColor, O as isViewRuleAutoLayout, M as isViewRulePredicate, N as isViewRuleStyle, h as isWildcard, b as nonexhaustive, H as whereOperatorAsPredicate } from './shared/core.DfUTsojZ.mjs';
|
|
3
|
+
|
|
4
|
+
const limit = (x, low = 0, high = 1) => {
|
|
5
|
+
return min$3(max$3(low, x), high);
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const clip_rgb = (rgb) => {
|
|
9
|
+
rgb._clipped = false;
|
|
10
|
+
rgb._unclipped = rgb.slice(0);
|
|
11
|
+
for (let i = 0; i <= 3; i++) {
|
|
12
|
+
if (i < 3) {
|
|
13
|
+
if (rgb[i] < 0 || rgb[i] > 255) rgb._clipped = true;
|
|
14
|
+
rgb[i] = limit(rgb[i], 0, 255);
|
|
15
|
+
} else if (i === 3) {
|
|
16
|
+
rgb[i] = limit(rgb[i], 0, 1);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return rgb;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
// ported from jQuery's $.type
|
|
23
|
+
const classToType = {};
|
|
24
|
+
for (let name of [
|
|
25
|
+
'Boolean',
|
|
26
|
+
'Number',
|
|
27
|
+
'String',
|
|
28
|
+
'Function',
|
|
29
|
+
'Array',
|
|
30
|
+
'Date',
|
|
31
|
+
'RegExp',
|
|
32
|
+
'Undefined',
|
|
33
|
+
'Null'
|
|
34
|
+
]) {
|
|
35
|
+
classToType[`[object ${name}]`] = name.toLowerCase();
|
|
36
|
+
}
|
|
37
|
+
function type (obj) {
|
|
38
|
+
return classToType[Object.prototype.toString.call(obj)] || 'object';
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const unpack = (args, keyOrder = null) => {
|
|
42
|
+
// if called with more than 3 arguments, we return the arguments
|
|
43
|
+
if (args.length >= 3) return Array.prototype.slice.call(args);
|
|
44
|
+
// with less than 3 args we check if first arg is object
|
|
45
|
+
// and use the keyOrder string to extract and sort properties
|
|
46
|
+
if (type(args[0]) == 'object' && keyOrder) {
|
|
47
|
+
return keyOrder
|
|
48
|
+
.split('')
|
|
49
|
+
.filter((k) => args[0][k] !== undefined)
|
|
50
|
+
.map((k) => args[0][k]);
|
|
51
|
+
}
|
|
52
|
+
// otherwise we just return the first argument
|
|
53
|
+
// (which we suppose is an array of args)
|
|
54
|
+
return args[0].slice(0);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
const last = (args) => {
|
|
58
|
+
if (args.length < 2) return null;
|
|
59
|
+
const l = args.length - 1;
|
|
60
|
+
if (type(args[l]) == 'string') return args[l].toLowerCase();
|
|
61
|
+
return null;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const { PI: PI$2, min: min$3, max: max$3 } = Math;
|
|
65
|
+
|
|
66
|
+
const rnd2 = (a) => Math.round(a * 100) / 100;
|
|
67
|
+
const rnd3 = (a) => Math.round(a * 100) / 100;
|
|
68
|
+
|
|
69
|
+
const TWOPI = PI$2 * 2;
|
|
70
|
+
const PITHIRD = PI$2 / 3;
|
|
71
|
+
const DEG2RAD = PI$2 / 180;
|
|
72
|
+
const RAD2DEG = 180 / PI$2;
|
|
73
|
+
|
|
74
|
+
const input = {
|
|
75
|
+
format: {},
|
|
76
|
+
autodetect: []
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
class Color {
|
|
80
|
+
constructor(...args) {
|
|
81
|
+
const me = this;
|
|
82
|
+
if (
|
|
83
|
+
type(args[0]) === 'object' &&
|
|
84
|
+
args[0].constructor &&
|
|
85
|
+
args[0].constructor === this.constructor
|
|
86
|
+
) {
|
|
87
|
+
// the argument is already a Color instance
|
|
88
|
+
return args[0];
|
|
89
|
+
}
|
|
90
|
+
// last argument could be the mode
|
|
91
|
+
let mode = last(args);
|
|
92
|
+
let autodetect = false;
|
|
93
|
+
if (!mode) {
|
|
94
|
+
autodetect = true;
|
|
95
|
+
|
|
96
|
+
if (!input.sorted) {
|
|
97
|
+
input.autodetect = input.autodetect.sort((a, b) => b.p - a.p);
|
|
98
|
+
input.sorted = true;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// auto-detect format
|
|
102
|
+
for (let chk of input.autodetect) {
|
|
103
|
+
mode = chk.test(...args);
|
|
104
|
+
if (mode) break;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
if (input.format[mode]) {
|
|
108
|
+
const rgb = input.format[mode].apply(
|
|
109
|
+
null,
|
|
110
|
+
autodetect ? args : args.slice(0, -1)
|
|
111
|
+
);
|
|
112
|
+
me._rgb = clip_rgb(rgb);
|
|
113
|
+
} else {
|
|
114
|
+
throw new Error('unknown format: ' + args);
|
|
115
|
+
}
|
|
116
|
+
// add alpha channel
|
|
117
|
+
if (me._rgb.length === 3) me._rgb.push(1);
|
|
118
|
+
}
|
|
119
|
+
toString() {
|
|
120
|
+
if (type(this.hex) == 'function') return this.hex();
|
|
121
|
+
return `[${this._rgb.join(',')}]`;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// this gets updated automatically
|
|
126
|
+
const version = '3.0.0';
|
|
127
|
+
|
|
128
|
+
const chroma = (...args) => {
|
|
129
|
+
return new Color(...args);
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
chroma.version = version;
|
|
133
|
+
|
|
134
|
+
/**
|
|
135
|
+
X11 color names
|
|
136
|
+
|
|
137
|
+
http://www.w3.org/TR/css3-color/#svg-color
|
|
138
|
+
*/
|
|
139
|
+
|
|
140
|
+
const w3cx11 = {
|
|
141
|
+
aliceblue: '#f0f8ff',
|
|
142
|
+
antiquewhite: '#faebd7',
|
|
143
|
+
aqua: '#00ffff',
|
|
144
|
+
aquamarine: '#7fffd4',
|
|
145
|
+
azure: '#f0ffff',
|
|
146
|
+
beige: '#f5f5dc',
|
|
147
|
+
bisque: '#ffe4c4',
|
|
148
|
+
black: '#000000',
|
|
149
|
+
blanchedalmond: '#ffebcd',
|
|
150
|
+
blue: '#0000ff',
|
|
151
|
+
blueviolet: '#8a2be2',
|
|
152
|
+
brown: '#a52a2a',
|
|
153
|
+
burlywood: '#deb887',
|
|
154
|
+
cadetblue: '#5f9ea0',
|
|
155
|
+
chartreuse: '#7fff00',
|
|
156
|
+
chocolate: '#d2691e',
|
|
157
|
+
coral: '#ff7f50',
|
|
158
|
+
cornflowerblue: '#6495ed',
|
|
159
|
+
cornsilk: '#fff8dc',
|
|
160
|
+
crimson: '#dc143c',
|
|
161
|
+
cyan: '#00ffff',
|
|
162
|
+
darkblue: '#00008b',
|
|
163
|
+
darkcyan: '#008b8b',
|
|
164
|
+
darkgoldenrod: '#b8860b',
|
|
165
|
+
darkgray: '#a9a9a9',
|
|
166
|
+
darkgreen: '#006400',
|
|
167
|
+
darkgrey: '#a9a9a9',
|
|
168
|
+
darkkhaki: '#bdb76b',
|
|
169
|
+
darkmagenta: '#8b008b',
|
|
170
|
+
darkolivegreen: '#556b2f',
|
|
171
|
+
darkorange: '#ff8c00',
|
|
172
|
+
darkorchid: '#9932cc',
|
|
173
|
+
darkred: '#8b0000',
|
|
174
|
+
darksalmon: '#e9967a',
|
|
175
|
+
darkseagreen: '#8fbc8f',
|
|
176
|
+
darkslateblue: '#483d8b',
|
|
177
|
+
darkslategray: '#2f4f4f',
|
|
178
|
+
darkslategrey: '#2f4f4f',
|
|
179
|
+
darkturquoise: '#00ced1',
|
|
180
|
+
darkviolet: '#9400d3',
|
|
181
|
+
deeppink: '#ff1493',
|
|
182
|
+
deepskyblue: '#00bfff',
|
|
183
|
+
dimgray: '#696969',
|
|
184
|
+
dimgrey: '#696969',
|
|
185
|
+
dodgerblue: '#1e90ff',
|
|
186
|
+
firebrick: '#b22222',
|
|
187
|
+
floralwhite: '#fffaf0',
|
|
188
|
+
forestgreen: '#228b22',
|
|
189
|
+
fuchsia: '#ff00ff',
|
|
190
|
+
gainsboro: '#dcdcdc',
|
|
191
|
+
ghostwhite: '#f8f8ff',
|
|
192
|
+
gold: '#ffd700',
|
|
193
|
+
goldenrod: '#daa520',
|
|
194
|
+
gray: '#808080',
|
|
195
|
+
green: '#008000',
|
|
196
|
+
greenyellow: '#adff2f',
|
|
197
|
+
grey: '#808080',
|
|
198
|
+
honeydew: '#f0fff0',
|
|
199
|
+
hotpink: '#ff69b4',
|
|
200
|
+
indianred: '#cd5c5c',
|
|
201
|
+
indigo: '#4b0082',
|
|
202
|
+
ivory: '#fffff0',
|
|
203
|
+
khaki: '#f0e68c',
|
|
204
|
+
laserlemon: '#ffff54',
|
|
205
|
+
lavender: '#e6e6fa',
|
|
206
|
+
lavenderblush: '#fff0f5',
|
|
207
|
+
lawngreen: '#7cfc00',
|
|
208
|
+
lemonchiffon: '#fffacd',
|
|
209
|
+
lightblue: '#add8e6',
|
|
210
|
+
lightcoral: '#f08080',
|
|
211
|
+
lightcyan: '#e0ffff',
|
|
212
|
+
lightgoldenrod: '#fafad2',
|
|
213
|
+
lightgoldenrodyellow: '#fafad2',
|
|
214
|
+
lightgray: '#d3d3d3',
|
|
215
|
+
lightgreen: '#90ee90',
|
|
216
|
+
lightgrey: '#d3d3d3',
|
|
217
|
+
lightpink: '#ffb6c1',
|
|
218
|
+
lightsalmon: '#ffa07a',
|
|
219
|
+
lightseagreen: '#20b2aa',
|
|
220
|
+
lightskyblue: '#87cefa',
|
|
221
|
+
lightslategray: '#778899',
|
|
222
|
+
lightslategrey: '#778899',
|
|
223
|
+
lightsteelblue: '#b0c4de',
|
|
224
|
+
lightyellow: '#ffffe0',
|
|
225
|
+
lime: '#00ff00',
|
|
226
|
+
limegreen: '#32cd32',
|
|
227
|
+
linen: '#faf0e6',
|
|
228
|
+
magenta: '#ff00ff',
|
|
229
|
+
maroon: '#800000',
|
|
230
|
+
maroon2: '#7f0000',
|
|
231
|
+
maroon3: '#b03060',
|
|
232
|
+
mediumaquamarine: '#66cdaa',
|
|
233
|
+
mediumblue: '#0000cd',
|
|
234
|
+
mediumorchid: '#ba55d3',
|
|
235
|
+
mediumpurple: '#9370db',
|
|
236
|
+
mediumseagreen: '#3cb371',
|
|
237
|
+
mediumslateblue: '#7b68ee',
|
|
238
|
+
mediumspringgreen: '#00fa9a',
|
|
239
|
+
mediumturquoise: '#48d1cc',
|
|
240
|
+
mediumvioletred: '#c71585',
|
|
241
|
+
midnightblue: '#191970',
|
|
242
|
+
mintcream: '#f5fffa',
|
|
243
|
+
mistyrose: '#ffe4e1',
|
|
244
|
+
moccasin: '#ffe4b5',
|
|
245
|
+
navajowhite: '#ffdead',
|
|
246
|
+
navy: '#000080',
|
|
247
|
+
oldlace: '#fdf5e6',
|
|
248
|
+
olive: '#808000',
|
|
249
|
+
olivedrab: '#6b8e23',
|
|
250
|
+
orange: '#ffa500',
|
|
251
|
+
orangered: '#ff4500',
|
|
252
|
+
orchid: '#da70d6',
|
|
253
|
+
palegoldenrod: '#eee8aa',
|
|
254
|
+
palegreen: '#98fb98',
|
|
255
|
+
paleturquoise: '#afeeee',
|
|
256
|
+
palevioletred: '#db7093',
|
|
257
|
+
papayawhip: '#ffefd5',
|
|
258
|
+
peachpuff: '#ffdab9',
|
|
259
|
+
peru: '#cd853f',
|
|
260
|
+
pink: '#ffc0cb',
|
|
261
|
+
plum: '#dda0dd',
|
|
262
|
+
powderblue: '#b0e0e6',
|
|
263
|
+
purple: '#800080',
|
|
264
|
+
purple2: '#7f007f',
|
|
265
|
+
purple3: '#a020f0',
|
|
266
|
+
rebeccapurple: '#663399',
|
|
267
|
+
red: '#ff0000',
|
|
268
|
+
rosybrown: '#bc8f8f',
|
|
269
|
+
royalblue: '#4169e1',
|
|
270
|
+
saddlebrown: '#8b4513',
|
|
271
|
+
salmon: '#fa8072',
|
|
272
|
+
sandybrown: '#f4a460',
|
|
273
|
+
seagreen: '#2e8b57',
|
|
274
|
+
seashell: '#fff5ee',
|
|
275
|
+
sienna: '#a0522d',
|
|
276
|
+
silver: '#c0c0c0',
|
|
277
|
+
skyblue: '#87ceeb',
|
|
278
|
+
slateblue: '#6a5acd',
|
|
279
|
+
slategray: '#708090',
|
|
280
|
+
slategrey: '#708090',
|
|
281
|
+
snow: '#fffafa',
|
|
282
|
+
springgreen: '#00ff7f',
|
|
283
|
+
steelblue: '#4682b4',
|
|
284
|
+
tan: '#d2b48c',
|
|
285
|
+
teal: '#008080',
|
|
286
|
+
thistle: '#d8bfd8',
|
|
287
|
+
tomato: '#ff6347',
|
|
288
|
+
turquoise: '#40e0d0',
|
|
289
|
+
violet: '#ee82ee',
|
|
290
|
+
wheat: '#f5deb3',
|
|
291
|
+
white: '#ffffff',
|
|
292
|
+
whitesmoke: '#f5f5f5',
|
|
293
|
+
yellow: '#ffff00',
|
|
294
|
+
yellowgreen: '#9acd32'
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
const RE_HEX = /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
|
|
298
|
+
const RE_HEXA = /^#?([A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/;
|
|
299
|
+
|
|
300
|
+
const hex2rgb = (hex) => {
|
|
301
|
+
if (hex.match(RE_HEX)) {
|
|
302
|
+
// remove optional leading #
|
|
303
|
+
if (hex.length === 4 || hex.length === 7) {
|
|
304
|
+
hex = hex.substr(1);
|
|
305
|
+
}
|
|
306
|
+
// expand short-notation to full six-digit
|
|
307
|
+
if (hex.length === 3) {
|
|
308
|
+
hex = hex.split('');
|
|
309
|
+
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
|
310
|
+
}
|
|
311
|
+
const u = parseInt(hex, 16);
|
|
312
|
+
const r = u >> 16;
|
|
313
|
+
const g = (u >> 8) & 0xff;
|
|
314
|
+
const b = u & 0xff;
|
|
315
|
+
return [r, g, b, 1];
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
// match rgba hex format, eg #FF000077
|
|
319
|
+
if (hex.match(RE_HEXA)) {
|
|
320
|
+
if (hex.length === 5 || hex.length === 9) {
|
|
321
|
+
// remove optional leading #
|
|
322
|
+
hex = hex.substr(1);
|
|
323
|
+
}
|
|
324
|
+
// expand short-notation to full eight-digit
|
|
325
|
+
if (hex.length === 4) {
|
|
326
|
+
hex = hex.split('');
|
|
327
|
+
hex =
|
|
328
|
+
hex[0] +
|
|
329
|
+
hex[0] +
|
|
330
|
+
hex[1] +
|
|
331
|
+
hex[1] +
|
|
332
|
+
hex[2] +
|
|
333
|
+
hex[2] +
|
|
334
|
+
hex[3] +
|
|
335
|
+
hex[3];
|
|
336
|
+
}
|
|
337
|
+
const u = parseInt(hex, 16);
|
|
338
|
+
const r = (u >> 24) & 0xff;
|
|
339
|
+
const g = (u >> 16) & 0xff;
|
|
340
|
+
const b = (u >> 8) & 0xff;
|
|
341
|
+
const a = Math.round(((u & 0xff) / 0xff) * 100) / 100;
|
|
342
|
+
return [r, g, b, a];
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
// we used to check for css colors here
|
|
346
|
+
// if _input.css? and rgb = _input.css hex
|
|
347
|
+
// return rgb
|
|
348
|
+
|
|
349
|
+
throw new Error(`unknown hex color: ${hex}`);
|
|
350
|
+
};
|
|
351
|
+
|
|
352
|
+
const { round: round$5 } = Math;
|
|
353
|
+
|
|
354
|
+
const rgb2hex = (...args) => {
|
|
355
|
+
let [r, g, b, a] = unpack(args, 'rgba');
|
|
356
|
+
let mode = last(args) || 'auto';
|
|
357
|
+
if (a === undefined) a = 1;
|
|
358
|
+
if (mode === 'auto') {
|
|
359
|
+
mode = a < 1 ? 'rgba' : 'rgb';
|
|
360
|
+
}
|
|
361
|
+
r = round$5(r);
|
|
362
|
+
g = round$5(g);
|
|
363
|
+
b = round$5(b);
|
|
364
|
+
const u = (r << 16) | (g << 8) | b;
|
|
365
|
+
let str = '000000' + u.toString(16); //#.toUpperCase();
|
|
366
|
+
str = str.substr(str.length - 6);
|
|
367
|
+
let hxa = '0' + round$5(a * 255).toString(16);
|
|
368
|
+
hxa = hxa.substr(hxa.length - 2);
|
|
369
|
+
switch (mode.toLowerCase()) {
|
|
370
|
+
case 'rgba':
|
|
371
|
+
return `#${str}${hxa}`;
|
|
372
|
+
case 'argb':
|
|
373
|
+
return `#${hxa}${str}`;
|
|
374
|
+
default:
|
|
375
|
+
return `#${str}`;
|
|
376
|
+
}
|
|
377
|
+
};
|
|
378
|
+
|
|
379
|
+
Color.prototype.name = function () {
|
|
380
|
+
const hex = rgb2hex(this._rgb, 'rgb');
|
|
381
|
+
for (let n of Object.keys(w3cx11)) {
|
|
382
|
+
if (w3cx11[n] === hex) return n.toLowerCase();
|
|
383
|
+
}
|
|
384
|
+
return hex;
|
|
385
|
+
};
|
|
386
|
+
|
|
387
|
+
input.format.named = (name) => {
|
|
388
|
+
name = name.toLowerCase();
|
|
389
|
+
if (w3cx11[name]) return hex2rgb(w3cx11[name]);
|
|
390
|
+
throw new Error('unknown color name: ' + name);
|
|
391
|
+
};
|
|
392
|
+
|
|
393
|
+
input.autodetect.push({
|
|
394
|
+
p: 5,
|
|
395
|
+
test: (h, ...rest) => {
|
|
396
|
+
if (!rest.length && type(h) === 'string' && w3cx11[h.toLowerCase()]) {
|
|
397
|
+
return 'named';
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
});
|
|
401
|
+
|
|
402
|
+
Color.prototype.alpha = function (a, mutate = false) {
|
|
403
|
+
if (a !== undefined && type(a) === 'number') {
|
|
404
|
+
if (mutate) {
|
|
405
|
+
this._rgb[3] = a;
|
|
406
|
+
return this;
|
|
407
|
+
}
|
|
408
|
+
return new Color([this._rgb[0], this._rgb[1], this._rgb[2], a], 'rgb');
|
|
409
|
+
}
|
|
410
|
+
return this._rgb[3];
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
Color.prototype.clipped = function () {
|
|
414
|
+
return this._rgb._clipped || false;
|
|
415
|
+
};
|
|
416
|
+
|
|
417
|
+
const labConstants = {
|
|
418
|
+
// Corresponds roughly to RGB brighter/darker
|
|
419
|
+
Kn: 18,
|
|
420
|
+
|
|
421
|
+
// D65 standard referent
|
|
422
|
+
labWhitePoint: 'd65',
|
|
423
|
+
Xn: 0.95047,
|
|
424
|
+
Yn: 1,
|
|
425
|
+
Zn: 1.08883,
|
|
426
|
+
|
|
427
|
+
t0: 0.137931034, // 4 / 29
|
|
428
|
+
t1: 0.206896552, // 6 / 29
|
|
429
|
+
t2: 0.12841855, // 3 * t1 * t1
|
|
430
|
+
t3: 0.008856452, // t1 * t1 * t1,
|
|
431
|
+
|
|
432
|
+
kE: 216.0 / 24389.0,
|
|
433
|
+
kKE: 8.0,
|
|
434
|
+
kK: 24389.0 / 27.0,
|
|
435
|
+
|
|
436
|
+
RefWhiteRGB: {
|
|
437
|
+
// sRGB
|
|
438
|
+
X: 0.95047,
|
|
439
|
+
Y: 1,
|
|
440
|
+
Z: 1.08883
|
|
441
|
+
},
|
|
442
|
+
|
|
443
|
+
MtxRGB2XYZ: {
|
|
444
|
+
m00: 0.4124564390896922,
|
|
445
|
+
m01: 0.21267285140562253,
|
|
446
|
+
m02: 0.0193338955823293,
|
|
447
|
+
m10: 0.357576077643909,
|
|
448
|
+
m11: 0.715152155287818,
|
|
449
|
+
m12: 0.11919202588130297,
|
|
450
|
+
m20: 0.18043748326639894,
|
|
451
|
+
m21: 0.07217499330655958,
|
|
452
|
+
m22: 0.9503040785363679
|
|
453
|
+
},
|
|
454
|
+
|
|
455
|
+
MtxXYZ2RGB: {
|
|
456
|
+
m00: 3.2404541621141045,
|
|
457
|
+
m01: -0.9692660305051868,
|
|
458
|
+
m02: 0.055643430959114726,
|
|
459
|
+
m10: -1.5371385127977166,
|
|
460
|
+
m11: 1.8760108454466942,
|
|
461
|
+
m12: -0.2040259135167538,
|
|
462
|
+
m20: -0.498531409556016,
|
|
463
|
+
m21: 0.041556017530349834,
|
|
464
|
+
m22: 1.0572251882231791
|
|
465
|
+
},
|
|
466
|
+
|
|
467
|
+
// used in rgb2xyz
|
|
468
|
+
As: 0.9414285350000001,
|
|
469
|
+
Bs: 1.040417467,
|
|
470
|
+
Cs: 1.089532651,
|
|
471
|
+
|
|
472
|
+
MtxAdaptMa: {
|
|
473
|
+
m00: 0.8951,
|
|
474
|
+
m01: -0.7502,
|
|
475
|
+
m02: 0.0389,
|
|
476
|
+
m10: 0.2664,
|
|
477
|
+
m11: 1.7135,
|
|
478
|
+
m12: -0.0685,
|
|
479
|
+
m20: -0.1614,
|
|
480
|
+
m21: 0.0367,
|
|
481
|
+
m22: 1.0296
|
|
482
|
+
},
|
|
483
|
+
|
|
484
|
+
MtxAdaptMaI: {
|
|
485
|
+
m00: 0.9869929054667123,
|
|
486
|
+
m01: 0.43230526972339456,
|
|
487
|
+
m02: -0.008528664575177328,
|
|
488
|
+
m10: -0.14705425642099013,
|
|
489
|
+
m11: 0.5183602715367776,
|
|
490
|
+
m12: 0.04004282165408487,
|
|
491
|
+
m20: 0.15996265166373125,
|
|
492
|
+
m21: 0.0492912282128556,
|
|
493
|
+
m22: 0.9684866957875502
|
|
494
|
+
}
|
|
495
|
+
};
|
|
496
|
+
|
|
497
|
+
// taken from https://de.mathworks.com/help/images/ref/whitepoint.html
|
|
498
|
+
const ILLUMINANTS = new Map([
|
|
499
|
+
// ASTM E308-01
|
|
500
|
+
['a', [1.0985, 0.35585]],
|
|
501
|
+
// Wyszecki & Stiles, p. 769
|
|
502
|
+
['b', [1.0985, 0.35585]],
|
|
503
|
+
// C ASTM E308-01
|
|
504
|
+
['c', [0.98074, 1.18232]],
|
|
505
|
+
// D50 (ASTM E308-01)
|
|
506
|
+
['d50', [0.96422, 0.82521]],
|
|
507
|
+
// D55 (ASTM E308-01)
|
|
508
|
+
['d55', [0.95682, 0.92149]],
|
|
509
|
+
// D65 (ASTM E308-01)
|
|
510
|
+
['d65', [0.95047, 1.08883]],
|
|
511
|
+
// E (ASTM E308-01)
|
|
512
|
+
['e', [1, 1, 1]],
|
|
513
|
+
// F2 (ASTM E308-01)
|
|
514
|
+
['f2', [0.99186, 0.67393]],
|
|
515
|
+
// F7 (ASTM E308-01)
|
|
516
|
+
['f7', [0.95041, 1.08747]],
|
|
517
|
+
// F11 (ASTM E308-01)
|
|
518
|
+
['f11', [1.00962, 0.6435]],
|
|
519
|
+
['icc', [0.96422, 0.82521]]
|
|
520
|
+
]);
|
|
521
|
+
|
|
522
|
+
function setLabWhitePoint(name) {
|
|
523
|
+
const ill = ILLUMINANTS.get(String(name).toLowerCase());
|
|
524
|
+
if (!ill) {
|
|
525
|
+
throw new Error('unknown Lab illuminant ' + name);
|
|
526
|
+
}
|
|
527
|
+
labConstants.labWhitePoint = name;
|
|
528
|
+
labConstants.Xn = ill[0];
|
|
529
|
+
labConstants.Zn = ill[1];
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
function getLabWhitePoint() {
|
|
533
|
+
return labConstants.labWhitePoint;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
/*
|
|
537
|
+
* L* [0..100]
|
|
538
|
+
* a [-100..100]
|
|
539
|
+
* b [-100..100]
|
|
540
|
+
*/
|
|
541
|
+
const lab2rgb = (...args) => {
|
|
542
|
+
args = unpack(args, 'lab');
|
|
543
|
+
const [L, a, b] = args;
|
|
544
|
+
const [x, y, z] = lab2xyz(L, a, b);
|
|
545
|
+
const [r, g, b_] = xyz2rgb(x, y, z);
|
|
546
|
+
return [r, g, b_, args.length > 3 ? args[3] : 1];
|
|
547
|
+
};
|
|
548
|
+
|
|
549
|
+
const lab2xyz = (L, a, b) => {
|
|
550
|
+
const { kE, kK, kKE, Xn, Yn, Zn } = labConstants;
|
|
551
|
+
|
|
552
|
+
const fy = (L + 16.0) / 116.0;
|
|
553
|
+
const fx = 0.002 * a + fy;
|
|
554
|
+
const fz = fy - 0.005 * b;
|
|
555
|
+
|
|
556
|
+
const fx3 = fx * fx * fx;
|
|
557
|
+
const fz3 = fz * fz * fz;
|
|
558
|
+
|
|
559
|
+
const xr = fx3 > kE ? fx3 : (116.0 * fx - 16.0) / kK;
|
|
560
|
+
const yr = L > kKE ? Math.pow((L + 16.0) / 116.0, 3.0) : L / kK;
|
|
561
|
+
const zr = fz3 > kE ? fz3 : (116.0 * fz - 16.0) / kK;
|
|
562
|
+
|
|
563
|
+
const x = xr * Xn;
|
|
564
|
+
const y = yr * Yn;
|
|
565
|
+
const z = zr * Zn;
|
|
566
|
+
|
|
567
|
+
return [x, y, z];
|
|
568
|
+
};
|
|
569
|
+
|
|
570
|
+
const compand = (linear) => {
|
|
571
|
+
/* sRGB */
|
|
572
|
+
const sign = Math.sign(linear);
|
|
573
|
+
linear = Math.abs(linear);
|
|
574
|
+
return (
|
|
575
|
+
(linear <= 0.0031308
|
|
576
|
+
? linear * 12.92
|
|
577
|
+
: 1.055 * Math.pow(linear, 1.0 / 2.4) - 0.055) * sign
|
|
578
|
+
);
|
|
579
|
+
};
|
|
580
|
+
|
|
581
|
+
const xyz2rgb = (x, y, z) => {
|
|
582
|
+
const { MtxAdaptMa, MtxAdaptMaI, MtxXYZ2RGB, RefWhiteRGB, Xn, Yn, Zn } =
|
|
583
|
+
labConstants;
|
|
584
|
+
|
|
585
|
+
const As = Xn * MtxAdaptMa.m00 + Yn * MtxAdaptMa.m10 + Zn * MtxAdaptMa.m20;
|
|
586
|
+
const Bs = Xn * MtxAdaptMa.m01 + Yn * MtxAdaptMa.m11 + Zn * MtxAdaptMa.m21;
|
|
587
|
+
const Cs = Xn * MtxAdaptMa.m02 + Yn * MtxAdaptMa.m12 + Zn * MtxAdaptMa.m22;
|
|
588
|
+
|
|
589
|
+
const Ad =
|
|
590
|
+
RefWhiteRGB.X * MtxAdaptMa.m00 +
|
|
591
|
+
RefWhiteRGB.Y * MtxAdaptMa.m10 +
|
|
592
|
+
RefWhiteRGB.Z * MtxAdaptMa.m20;
|
|
593
|
+
const Bd =
|
|
594
|
+
RefWhiteRGB.X * MtxAdaptMa.m01 +
|
|
595
|
+
RefWhiteRGB.Y * MtxAdaptMa.m11 +
|
|
596
|
+
RefWhiteRGB.Z * MtxAdaptMa.m21;
|
|
597
|
+
const Cd =
|
|
598
|
+
RefWhiteRGB.X * MtxAdaptMa.m02 +
|
|
599
|
+
RefWhiteRGB.Y * MtxAdaptMa.m12 +
|
|
600
|
+
RefWhiteRGB.Z * MtxAdaptMa.m22;
|
|
601
|
+
|
|
602
|
+
const X1 =
|
|
603
|
+
(x * MtxAdaptMa.m00 + y * MtxAdaptMa.m10 + z * MtxAdaptMa.m20) *
|
|
604
|
+
(Ad / As);
|
|
605
|
+
const Y1 =
|
|
606
|
+
(x * MtxAdaptMa.m01 + y * MtxAdaptMa.m11 + z * MtxAdaptMa.m21) *
|
|
607
|
+
(Bd / Bs);
|
|
608
|
+
const Z1 =
|
|
609
|
+
(x * MtxAdaptMa.m02 + y * MtxAdaptMa.m12 + z * MtxAdaptMa.m22) *
|
|
610
|
+
(Cd / Cs);
|
|
611
|
+
|
|
612
|
+
const X2 =
|
|
613
|
+
X1 * MtxAdaptMaI.m00 + Y1 * MtxAdaptMaI.m10 + Z1 * MtxAdaptMaI.m20;
|
|
614
|
+
const Y2 =
|
|
615
|
+
X1 * MtxAdaptMaI.m01 + Y1 * MtxAdaptMaI.m11 + Z1 * MtxAdaptMaI.m21;
|
|
616
|
+
const Z2 =
|
|
617
|
+
X1 * MtxAdaptMaI.m02 + Y1 * MtxAdaptMaI.m12 + Z1 * MtxAdaptMaI.m22;
|
|
618
|
+
|
|
619
|
+
const r = compand(
|
|
620
|
+
X2 * MtxXYZ2RGB.m00 + Y2 * MtxXYZ2RGB.m10 + Z2 * MtxXYZ2RGB.m20
|
|
621
|
+
);
|
|
622
|
+
const g = compand(
|
|
623
|
+
X2 * MtxXYZ2RGB.m01 + Y2 * MtxXYZ2RGB.m11 + Z2 * MtxXYZ2RGB.m21
|
|
624
|
+
);
|
|
625
|
+
const b = compand(
|
|
626
|
+
X2 * MtxXYZ2RGB.m02 + Y2 * MtxXYZ2RGB.m12 + Z2 * MtxXYZ2RGB.m22
|
|
627
|
+
);
|
|
628
|
+
|
|
629
|
+
return [r * 255, g * 255, b * 255];
|
|
630
|
+
};
|
|
631
|
+
|
|
632
|
+
const rgb2lab = (...args) => {
|
|
633
|
+
const [r, g, b, ...rest] = unpack(args, 'rgb');
|
|
634
|
+
const [x, y, z] = rgb2xyz(r, g, b);
|
|
635
|
+
const [L, a, b_] = xyz2lab(x, y, z);
|
|
636
|
+
return [L, a, b_, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
|
|
637
|
+
};
|
|
638
|
+
|
|
639
|
+
function xyz2lab(x, y, z) {
|
|
640
|
+
const { Xn, Yn, Zn, kE, kK } = labConstants;
|
|
641
|
+
const xr = x / Xn;
|
|
642
|
+
const yr = y / Yn;
|
|
643
|
+
const zr = z / Zn;
|
|
644
|
+
|
|
645
|
+
const fx = xr > kE ? Math.pow(xr, 1.0 / 3.0) : (kK * xr + 16.0) / 116.0;
|
|
646
|
+
const fy = yr > kE ? Math.pow(yr, 1.0 / 3.0) : (kK * yr + 16.0) / 116.0;
|
|
647
|
+
const fz = zr > kE ? Math.pow(zr, 1.0 / 3.0) : (kK * zr + 16.0) / 116.0;
|
|
648
|
+
|
|
649
|
+
return [116.0 * fy - 16.0, 500.0 * (fx - fy), 200.0 * (fy - fz)];
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
function gammaAdjustSRGB(companded) {
|
|
653
|
+
const sign = Math.sign(companded);
|
|
654
|
+
companded = Math.abs(companded);
|
|
655
|
+
const linear =
|
|
656
|
+
companded <= 0.04045
|
|
657
|
+
? companded / 12.92
|
|
658
|
+
: Math.pow((companded + 0.055) / 1.055, 2.4);
|
|
659
|
+
return linear * sign;
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
const rgb2xyz = (r, g, b) => {
|
|
663
|
+
// normalize and gamma adjust
|
|
664
|
+
r = gammaAdjustSRGB(r / 255);
|
|
665
|
+
g = gammaAdjustSRGB(g / 255);
|
|
666
|
+
b = gammaAdjustSRGB(b / 255);
|
|
667
|
+
|
|
668
|
+
const { MtxRGB2XYZ, MtxAdaptMa, MtxAdaptMaI, Xn, Yn, Zn, As, Bs, Cs } =
|
|
669
|
+
labConstants;
|
|
670
|
+
|
|
671
|
+
let x = r * MtxRGB2XYZ.m00 + g * MtxRGB2XYZ.m10 + b * MtxRGB2XYZ.m20;
|
|
672
|
+
let y = r * MtxRGB2XYZ.m01 + g * MtxRGB2XYZ.m11 + b * MtxRGB2XYZ.m21;
|
|
673
|
+
let z = r * MtxRGB2XYZ.m02 + g * MtxRGB2XYZ.m12 + b * MtxRGB2XYZ.m22;
|
|
674
|
+
|
|
675
|
+
const Ad = Xn * MtxAdaptMa.m00 + Yn * MtxAdaptMa.m10 + Zn * MtxAdaptMa.m20;
|
|
676
|
+
const Bd = Xn * MtxAdaptMa.m01 + Yn * MtxAdaptMa.m11 + Zn * MtxAdaptMa.m21;
|
|
677
|
+
const Cd = Xn * MtxAdaptMa.m02 + Yn * MtxAdaptMa.m12 + Zn * MtxAdaptMa.m22;
|
|
678
|
+
|
|
679
|
+
let X = x * MtxAdaptMa.m00 + y * MtxAdaptMa.m10 + z * MtxAdaptMa.m20;
|
|
680
|
+
let Y = x * MtxAdaptMa.m01 + y * MtxAdaptMa.m11 + z * MtxAdaptMa.m21;
|
|
681
|
+
let Z = x * MtxAdaptMa.m02 + y * MtxAdaptMa.m12 + z * MtxAdaptMa.m22;
|
|
682
|
+
|
|
683
|
+
X *= Ad / As;
|
|
684
|
+
Y *= Bd / Bs;
|
|
685
|
+
Z *= Cd / Cs;
|
|
686
|
+
|
|
687
|
+
x = X * MtxAdaptMaI.m00 + Y * MtxAdaptMaI.m10 + Z * MtxAdaptMaI.m20;
|
|
688
|
+
y = X * MtxAdaptMaI.m01 + Y * MtxAdaptMaI.m11 + Z * MtxAdaptMaI.m21;
|
|
689
|
+
z = X * MtxAdaptMaI.m02 + Y * MtxAdaptMaI.m12 + Z * MtxAdaptMaI.m22;
|
|
690
|
+
|
|
691
|
+
return [x, y, z];
|
|
692
|
+
};
|
|
693
|
+
|
|
694
|
+
Color.prototype.lab = function () {
|
|
695
|
+
return rgb2lab(this._rgb);
|
|
696
|
+
};
|
|
697
|
+
|
|
698
|
+
const lab$1 = (...args) => new Color(...args, 'lab');
|
|
699
|
+
Object.assign(chroma, { lab: lab$1, getLabWhitePoint, setLabWhitePoint });
|
|
700
|
+
|
|
701
|
+
input.format.lab = lab2rgb;
|
|
702
|
+
|
|
703
|
+
input.autodetect.push({
|
|
704
|
+
p: 2,
|
|
705
|
+
test: (...args) => {
|
|
706
|
+
args = unpack(args, 'lab');
|
|
707
|
+
if (type(args) === 'array' && args.length === 3) {
|
|
708
|
+
return 'lab';
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
});
|
|
712
|
+
|
|
713
|
+
Color.prototype.darken = function (amount = 1) {
|
|
714
|
+
const me = this;
|
|
715
|
+
const lab = me.lab();
|
|
716
|
+
lab[0] -= labConstants.Kn * amount;
|
|
717
|
+
return new Color(lab, 'lab').alpha(me.alpha(), true);
|
|
718
|
+
};
|
|
719
|
+
|
|
720
|
+
Color.prototype.brighten = function (amount = 1) {
|
|
721
|
+
return this.darken(-amount);
|
|
722
|
+
};
|
|
723
|
+
|
|
724
|
+
Color.prototype.darker = Color.prototype.darken;
|
|
725
|
+
Color.prototype.brighter = Color.prototype.brighten;
|
|
726
|
+
|
|
727
|
+
Color.prototype.get = function (mc) {
|
|
728
|
+
const [mode, channel] = mc.split('.');
|
|
729
|
+
const src = this[mode]();
|
|
730
|
+
if (channel) {
|
|
731
|
+
const i = mode.indexOf(channel) - (mode.substr(0, 2) === 'ok' ? 2 : 0);
|
|
732
|
+
if (i > -1) return src[i];
|
|
733
|
+
throw new Error(`unknown channel ${channel} in mode ${mode}`);
|
|
734
|
+
} else {
|
|
735
|
+
return src;
|
|
736
|
+
}
|
|
737
|
+
};
|
|
738
|
+
|
|
739
|
+
const { pow: pow$6 } = Math;
|
|
740
|
+
|
|
741
|
+
const EPS = 1e-7;
|
|
742
|
+
const MAX_ITER = 20;
|
|
743
|
+
|
|
744
|
+
Color.prototype.luminance = function (lum, mode = 'rgb') {
|
|
745
|
+
if (lum !== undefined && type(lum) === 'number') {
|
|
746
|
+
if (lum === 0) {
|
|
747
|
+
// return pure black
|
|
748
|
+
return new Color([0, 0, 0, this._rgb[3]], 'rgb');
|
|
749
|
+
}
|
|
750
|
+
if (lum === 1) {
|
|
751
|
+
// return pure white
|
|
752
|
+
return new Color([255, 255, 255, this._rgb[3]], 'rgb');
|
|
753
|
+
}
|
|
754
|
+
// compute new color using...
|
|
755
|
+
let cur_lum = this.luminance();
|
|
756
|
+
let max_iter = MAX_ITER;
|
|
757
|
+
|
|
758
|
+
const test = (low, high) => {
|
|
759
|
+
const mid = low.interpolate(high, 0.5, mode);
|
|
760
|
+
const lm = mid.luminance();
|
|
761
|
+
if (Math.abs(lum - lm) < EPS || !max_iter--) {
|
|
762
|
+
// close enough
|
|
763
|
+
return mid;
|
|
764
|
+
}
|
|
765
|
+
return lm > lum ? test(low, mid) : test(mid, high);
|
|
766
|
+
};
|
|
767
|
+
|
|
768
|
+
const rgb = (
|
|
769
|
+
cur_lum > lum
|
|
770
|
+
? test(new Color([0, 0, 0]), this)
|
|
771
|
+
: test(this, new Color([255, 255, 255]))
|
|
772
|
+
).rgb();
|
|
773
|
+
return new Color([...rgb, this._rgb[3]]);
|
|
774
|
+
}
|
|
775
|
+
return rgb2luminance(...this._rgb.slice(0, 3));
|
|
776
|
+
};
|
|
777
|
+
|
|
778
|
+
const rgb2luminance = (r, g, b) => {
|
|
779
|
+
// relative luminance
|
|
780
|
+
// see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
|
781
|
+
r = luminance_x(r);
|
|
782
|
+
g = luminance_x(g);
|
|
783
|
+
b = luminance_x(b);
|
|
784
|
+
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
785
|
+
};
|
|
786
|
+
|
|
787
|
+
const luminance_x = (x) => {
|
|
788
|
+
x /= 255;
|
|
789
|
+
return x <= 0.03928 ? x / 12.92 : pow$6((x + 0.055) / 1.055, 2.4);
|
|
790
|
+
};
|
|
791
|
+
|
|
792
|
+
const index = {};
|
|
793
|
+
|
|
794
|
+
const mix = (col1, col2, f = 0.5, ...rest) => {
|
|
795
|
+
let mode = rest[0] || 'lrgb';
|
|
796
|
+
if (!index[mode] && !rest.length) {
|
|
797
|
+
// fall back to the first supported mode
|
|
798
|
+
mode = Object.keys(index)[0];
|
|
799
|
+
}
|
|
800
|
+
if (!index[mode]) {
|
|
801
|
+
throw new Error(`interpolation mode ${mode} is not defined`);
|
|
802
|
+
}
|
|
803
|
+
if (type(col1) !== 'object') col1 = new Color(col1);
|
|
804
|
+
if (type(col2) !== 'object') col2 = new Color(col2);
|
|
805
|
+
return index[mode](col1, col2, f).alpha(
|
|
806
|
+
col1.alpha() + f * (col2.alpha() - col1.alpha())
|
|
807
|
+
);
|
|
808
|
+
};
|
|
809
|
+
|
|
810
|
+
Color.prototype.mix = Color.prototype.interpolate = function (
|
|
811
|
+
col2,
|
|
812
|
+
f = 0.5,
|
|
813
|
+
...rest
|
|
814
|
+
) {
|
|
815
|
+
return mix(this, col2, f, ...rest);
|
|
816
|
+
};
|
|
817
|
+
|
|
818
|
+
Color.prototype.premultiply = function (mutate = false) {
|
|
819
|
+
const rgb = this._rgb;
|
|
820
|
+
const a = rgb[3];
|
|
821
|
+
if (mutate) {
|
|
822
|
+
this._rgb = [rgb[0] * a, rgb[1] * a, rgb[2] * a, a];
|
|
823
|
+
return this;
|
|
824
|
+
} else {
|
|
825
|
+
return new Color([rgb[0] * a, rgb[1] * a, rgb[2] * a, a], 'rgb');
|
|
826
|
+
}
|
|
827
|
+
};
|
|
828
|
+
|
|
829
|
+
const { sin: sin$3, cos: cos$4 } = Math;
|
|
830
|
+
|
|
831
|
+
const lch2lab = (...args) => {
|
|
832
|
+
/*
|
|
833
|
+
Convert from a qualitative parameter h and a quantitative parameter l to a 24-bit pixel.
|
|
834
|
+
These formulas were invented by David Dalrymple to obtain maximum contrast without going
|
|
835
|
+
out of gamut if the parameters are in the range 0-1.
|
|
836
|
+
|
|
837
|
+
A saturation multiplier was added by Gregor Aisch
|
|
838
|
+
*/
|
|
839
|
+
let [l, c, h] = unpack(args, 'lch');
|
|
840
|
+
if (isNaN(h)) h = 0;
|
|
841
|
+
h = h * DEG2RAD;
|
|
842
|
+
return [l, cos$4(h) * c, sin$3(h) * c];
|
|
843
|
+
};
|
|
844
|
+
|
|
845
|
+
const lch2rgb = (...args) => {
|
|
846
|
+
args = unpack(args, 'lch');
|
|
847
|
+
const [l, c, h] = args;
|
|
848
|
+
const [L, a, b_] = lch2lab(l, c, h);
|
|
849
|
+
const [r, g, b] = lab2rgb(L, a, b_);
|
|
850
|
+
return [r, g, b, args.length > 3 ? args[3] : 1];
|
|
851
|
+
};
|
|
852
|
+
|
|
853
|
+
const hcl2rgb = (...args) => {
|
|
854
|
+
const hcl = unpack(args, 'hcl').reverse();
|
|
855
|
+
return lch2rgb(...hcl);
|
|
856
|
+
};
|
|
857
|
+
|
|
858
|
+
const { sqrt: sqrt$4, atan2: atan2$2, round: round$4 } = Math;
|
|
859
|
+
|
|
860
|
+
const lab2lch = (...args) => {
|
|
861
|
+
const [l, a, b] = unpack(args, 'lab');
|
|
862
|
+
const c = sqrt$4(a * a + b * b);
|
|
863
|
+
let h = (atan2$2(b, a) * RAD2DEG + 360) % 360;
|
|
864
|
+
if (round$4(c * 10000) === 0) h = Number.NaN;
|
|
865
|
+
return [l, c, h];
|
|
866
|
+
};
|
|
867
|
+
|
|
868
|
+
const rgb2lch = (...args) => {
|
|
869
|
+
const [r, g, b, ...rest] = unpack(args, 'rgb');
|
|
870
|
+
const [l, a, b_] = rgb2lab(r, g, b);
|
|
871
|
+
const [L, c, h] = lab2lch(l, a, b_);
|
|
872
|
+
return [L, c, h, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
|
|
873
|
+
};
|
|
874
|
+
|
|
875
|
+
Color.prototype.lch = function () {
|
|
876
|
+
return rgb2lch(this._rgb);
|
|
877
|
+
};
|
|
878
|
+
Color.prototype.hcl = function () {
|
|
879
|
+
return rgb2lch(this._rgb).reverse();
|
|
880
|
+
};
|
|
881
|
+
|
|
882
|
+
const lch$1 = (...args) => new Color(...args, 'lch');
|
|
883
|
+
const hcl = (...args) => new Color(...args, 'hcl');
|
|
884
|
+
|
|
885
|
+
Object.assign(chroma, { lch: lch$1, hcl });
|
|
886
|
+
|
|
887
|
+
input.format.lch = lch2rgb;
|
|
888
|
+
input.format.hcl = hcl2rgb;
|
|
889
|
+
['lch', 'hcl'].forEach((m) =>
|
|
890
|
+
input.autodetect.push({
|
|
891
|
+
p: 2,
|
|
892
|
+
test: (...args) => {
|
|
893
|
+
args = unpack(args, m);
|
|
894
|
+
if (type(args) === 'array' && args.length === 3) {
|
|
895
|
+
return m;
|
|
896
|
+
}
|
|
897
|
+
}
|
|
898
|
+
})
|
|
899
|
+
);
|
|
900
|
+
|
|
901
|
+
Color.prototype.saturate = function (amount = 1) {
|
|
902
|
+
const me = this;
|
|
903
|
+
const lch = me.lch();
|
|
904
|
+
lch[1] += labConstants.Kn * amount;
|
|
905
|
+
if (lch[1] < 0) lch[1] = 0;
|
|
906
|
+
return new Color(lch, 'lch').alpha(me.alpha(), true);
|
|
907
|
+
};
|
|
908
|
+
|
|
909
|
+
Color.prototype.desaturate = function (amount = 1) {
|
|
910
|
+
return this.saturate(-amount);
|
|
911
|
+
};
|
|
912
|
+
|
|
913
|
+
Color.prototype.set = function (mc, value, mutate = false) {
|
|
914
|
+
const [mode, channel] = mc.split('.');
|
|
915
|
+
const src = this[mode]();
|
|
916
|
+
if (channel) {
|
|
917
|
+
const i = mode.indexOf(channel) - (mode.substr(0, 2) === 'ok' ? 2 : 0);
|
|
918
|
+
if (i > -1) {
|
|
919
|
+
if (type(value) == 'string') {
|
|
920
|
+
switch (value.charAt(0)) {
|
|
921
|
+
case '+':
|
|
922
|
+
src[i] += +value;
|
|
923
|
+
break;
|
|
924
|
+
case '-':
|
|
925
|
+
src[i] += +value;
|
|
926
|
+
break;
|
|
927
|
+
case '*':
|
|
928
|
+
src[i] *= +value.substr(1);
|
|
929
|
+
break;
|
|
930
|
+
case '/':
|
|
931
|
+
src[i] /= +value.substr(1);
|
|
932
|
+
break;
|
|
933
|
+
default:
|
|
934
|
+
src[i] = +value;
|
|
935
|
+
}
|
|
936
|
+
} else if (type(value) === 'number') {
|
|
937
|
+
src[i] = value;
|
|
938
|
+
} else {
|
|
939
|
+
throw new Error(`unsupported value for Color.set`);
|
|
940
|
+
}
|
|
941
|
+
const out = new Color(src, mode);
|
|
942
|
+
if (mutate) {
|
|
943
|
+
this._rgb = out._rgb;
|
|
944
|
+
return this;
|
|
945
|
+
}
|
|
946
|
+
return out;
|
|
947
|
+
}
|
|
948
|
+
throw new Error(`unknown channel ${channel} in mode ${mode}`);
|
|
949
|
+
} else {
|
|
950
|
+
return src;
|
|
951
|
+
}
|
|
952
|
+
};
|
|
953
|
+
|
|
954
|
+
Color.prototype.tint = function (f = 0.5, ...rest) {
|
|
955
|
+
return mix(this, 'white', f, ...rest);
|
|
956
|
+
};
|
|
957
|
+
|
|
958
|
+
Color.prototype.shade = function (f = 0.5, ...rest) {
|
|
959
|
+
return mix(this, 'black', f, ...rest);
|
|
960
|
+
};
|
|
961
|
+
|
|
962
|
+
const rgb$1 = (col1, col2, f) => {
|
|
963
|
+
const xyz0 = col1._rgb;
|
|
964
|
+
const xyz1 = col2._rgb;
|
|
965
|
+
return new Color(
|
|
966
|
+
xyz0[0] + f * (xyz1[0] - xyz0[0]),
|
|
967
|
+
xyz0[1] + f * (xyz1[1] - xyz0[1]),
|
|
968
|
+
xyz0[2] + f * (xyz1[2] - xyz0[2]),
|
|
969
|
+
'rgb'
|
|
970
|
+
);
|
|
971
|
+
};
|
|
972
|
+
|
|
973
|
+
// register interpolator
|
|
974
|
+
index.rgb = rgb$1;
|
|
975
|
+
|
|
976
|
+
const { sqrt: sqrt$3, pow: pow$5 } = Math;
|
|
977
|
+
|
|
978
|
+
const lrgb = (col1, col2, f) => {
|
|
979
|
+
const [x1, y1, z1] = col1._rgb;
|
|
980
|
+
const [x2, y2, z2] = col2._rgb;
|
|
981
|
+
return new Color(
|
|
982
|
+
sqrt$3(pow$5(x1, 2) * (1 - f) + pow$5(x2, 2) * f),
|
|
983
|
+
sqrt$3(pow$5(y1, 2) * (1 - f) + pow$5(y2, 2) * f),
|
|
984
|
+
sqrt$3(pow$5(z1, 2) * (1 - f) + pow$5(z2, 2) * f),
|
|
985
|
+
'rgb'
|
|
986
|
+
);
|
|
987
|
+
};
|
|
988
|
+
|
|
989
|
+
// register interpolator
|
|
990
|
+
index.lrgb = lrgb;
|
|
991
|
+
|
|
992
|
+
const lab = (col1, col2, f) => {
|
|
993
|
+
const xyz0 = col1.lab();
|
|
994
|
+
const xyz1 = col2.lab();
|
|
995
|
+
return new Color(
|
|
996
|
+
xyz0[0] + f * (xyz1[0] - xyz0[0]),
|
|
997
|
+
xyz0[1] + f * (xyz1[1] - xyz0[1]),
|
|
998
|
+
xyz0[2] + f * (xyz1[2] - xyz0[2]),
|
|
999
|
+
'lab'
|
|
1000
|
+
);
|
|
1001
|
+
};
|
|
1002
|
+
|
|
1003
|
+
// register interpolator
|
|
1004
|
+
index.lab = lab;
|
|
1005
|
+
|
|
1006
|
+
const interpolate_hsx = (col1, col2, f, m) => {
|
|
1007
|
+
let xyz0, xyz1;
|
|
1008
|
+
if (m === 'hsl') {
|
|
1009
|
+
xyz0 = col1.hsl();
|
|
1010
|
+
xyz1 = col2.hsl();
|
|
1011
|
+
} else if (m === 'hsv') {
|
|
1012
|
+
xyz0 = col1.hsv();
|
|
1013
|
+
xyz1 = col2.hsv();
|
|
1014
|
+
} else if (m === 'hcg') {
|
|
1015
|
+
xyz0 = col1.hcg();
|
|
1016
|
+
xyz1 = col2.hcg();
|
|
1017
|
+
} else if (m === 'hsi') {
|
|
1018
|
+
xyz0 = col1.hsi();
|
|
1019
|
+
xyz1 = col2.hsi();
|
|
1020
|
+
} else if (m === 'lch' || m === 'hcl') {
|
|
1021
|
+
m = 'hcl';
|
|
1022
|
+
xyz0 = col1.hcl();
|
|
1023
|
+
xyz1 = col2.hcl();
|
|
1024
|
+
} else if (m === 'oklch') {
|
|
1025
|
+
xyz0 = col1.oklch().reverse();
|
|
1026
|
+
xyz1 = col2.oklch().reverse();
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
let hue0, hue1, sat0, sat1, lbv0, lbv1;
|
|
1030
|
+
if (m.substr(0, 1) === 'h' || m === 'oklch') {
|
|
1031
|
+
[hue0, sat0, lbv0] = xyz0;
|
|
1032
|
+
[hue1, sat1, lbv1] = xyz1;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
let sat, hue, lbv, dh;
|
|
1036
|
+
|
|
1037
|
+
if (!isNaN(hue0) && !isNaN(hue1)) {
|
|
1038
|
+
// both colors have hue
|
|
1039
|
+
if (hue1 > hue0 && hue1 - hue0 > 180) {
|
|
1040
|
+
dh = hue1 - (hue0 + 360);
|
|
1041
|
+
} else if (hue1 < hue0 && hue0 - hue1 > 180) {
|
|
1042
|
+
dh = hue1 + 360 - hue0;
|
|
1043
|
+
} else {
|
|
1044
|
+
dh = hue1 - hue0;
|
|
1045
|
+
}
|
|
1046
|
+
hue = hue0 + f * dh;
|
|
1047
|
+
} else if (!isNaN(hue0)) {
|
|
1048
|
+
hue = hue0;
|
|
1049
|
+
if ((lbv1 == 1 || lbv1 == 0) && m != 'hsv') sat = sat0;
|
|
1050
|
+
} else if (!isNaN(hue1)) {
|
|
1051
|
+
hue = hue1;
|
|
1052
|
+
if ((lbv0 == 1 || lbv0 == 0) && m != 'hsv') sat = sat1;
|
|
1053
|
+
} else {
|
|
1054
|
+
hue = Number.NaN;
|
|
1055
|
+
}
|
|
1056
|
+
|
|
1057
|
+
if (sat === undefined) sat = sat0 + f * (sat1 - sat0);
|
|
1058
|
+
lbv = lbv0 + f * (lbv1 - lbv0);
|
|
1059
|
+
return m === 'oklch'
|
|
1060
|
+
? new Color([lbv, sat, hue], m)
|
|
1061
|
+
: new Color([hue, sat, lbv], m);
|
|
1062
|
+
};
|
|
1063
|
+
|
|
1064
|
+
const lch = (col1, col2, f) => {
|
|
1065
|
+
return interpolate_hsx(col1, col2, f, 'lch');
|
|
1066
|
+
};
|
|
1067
|
+
|
|
1068
|
+
// register interpolator
|
|
1069
|
+
index.lch = lch;
|
|
1070
|
+
index.hcl = lch;
|
|
1071
|
+
|
|
1072
|
+
const num2rgb = (num) => {
|
|
1073
|
+
if (type(num) == 'number' && num >= 0 && num <= 0xffffff) {
|
|
1074
|
+
const r = num >> 16;
|
|
1075
|
+
const g = (num >> 8) & 0xff;
|
|
1076
|
+
const b = num & 0xff;
|
|
1077
|
+
return [r, g, b, 1];
|
|
1078
|
+
}
|
|
1079
|
+
throw new Error('unknown num color: ' + num);
|
|
1080
|
+
};
|
|
1081
|
+
|
|
1082
|
+
const rgb2num = (...args) => {
|
|
1083
|
+
const [r, g, b] = unpack(args, 'rgb');
|
|
1084
|
+
return (r << 16) + (g << 8) + b;
|
|
1085
|
+
};
|
|
1086
|
+
|
|
1087
|
+
Color.prototype.num = function () {
|
|
1088
|
+
return rgb2num(this._rgb);
|
|
1089
|
+
};
|
|
1090
|
+
|
|
1091
|
+
const num$1 = (...args) => new Color(...args, 'num');
|
|
1092
|
+
|
|
1093
|
+
Object.assign(chroma, { num: num$1 });
|
|
1094
|
+
|
|
1095
|
+
input.format.num = num2rgb;
|
|
1096
|
+
|
|
1097
|
+
input.autodetect.push({
|
|
1098
|
+
p: 5,
|
|
1099
|
+
test: (...args) => {
|
|
1100
|
+
if (
|
|
1101
|
+
args.length === 1 &&
|
|
1102
|
+
type(args[0]) === 'number' &&
|
|
1103
|
+
args[0] >= 0 &&
|
|
1104
|
+
args[0] <= 0xffffff
|
|
1105
|
+
) {
|
|
1106
|
+
return 'num';
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
});
|
|
1110
|
+
|
|
1111
|
+
const num = (col1, col2, f) => {
|
|
1112
|
+
const c1 = col1.num();
|
|
1113
|
+
const c2 = col2.num();
|
|
1114
|
+
return new Color(c1 + f * (c2 - c1), 'num');
|
|
1115
|
+
};
|
|
1116
|
+
|
|
1117
|
+
// register interpolator
|
|
1118
|
+
index.num = num;
|
|
1119
|
+
|
|
1120
|
+
const { floor: floor$3 } = Math;
|
|
1121
|
+
|
|
1122
|
+
/*
|
|
1123
|
+
* this is basically just HSV with some minor tweaks
|
|
1124
|
+
*
|
|
1125
|
+
* hue.. [0..360]
|
|
1126
|
+
* chroma .. [0..1]
|
|
1127
|
+
* grayness .. [0..1]
|
|
1128
|
+
*/
|
|
1129
|
+
|
|
1130
|
+
const hcg2rgb = (...args) => {
|
|
1131
|
+
args = unpack(args, 'hcg');
|
|
1132
|
+
let [h, c, _g] = args;
|
|
1133
|
+
let r, g, b;
|
|
1134
|
+
_g = _g * 255;
|
|
1135
|
+
const _c = c * 255;
|
|
1136
|
+
if (c === 0) {
|
|
1137
|
+
r = g = b = _g;
|
|
1138
|
+
} else {
|
|
1139
|
+
if (h === 360) h = 0;
|
|
1140
|
+
if (h > 360) h -= 360;
|
|
1141
|
+
if (h < 0) h += 360;
|
|
1142
|
+
h /= 60;
|
|
1143
|
+
const i = floor$3(h);
|
|
1144
|
+
const f = h - i;
|
|
1145
|
+
const p = _g * (1 - c);
|
|
1146
|
+
const q = p + _c * (1 - f);
|
|
1147
|
+
const t = p + _c * f;
|
|
1148
|
+
const v = p + _c;
|
|
1149
|
+
switch (i) {
|
|
1150
|
+
case 0:
|
|
1151
|
+
[r, g, b] = [v, t, p];
|
|
1152
|
+
break;
|
|
1153
|
+
case 1:
|
|
1154
|
+
[r, g, b] = [q, v, p];
|
|
1155
|
+
break;
|
|
1156
|
+
case 2:
|
|
1157
|
+
[r, g, b] = [p, v, t];
|
|
1158
|
+
break;
|
|
1159
|
+
case 3:
|
|
1160
|
+
[r, g, b] = [p, q, v];
|
|
1161
|
+
break;
|
|
1162
|
+
case 4:
|
|
1163
|
+
[r, g, b] = [t, p, v];
|
|
1164
|
+
break;
|
|
1165
|
+
case 5:
|
|
1166
|
+
[r, g, b] = [v, p, q];
|
|
1167
|
+
break;
|
|
1168
|
+
}
|
|
1169
|
+
}
|
|
1170
|
+
return [r, g, b, args.length > 3 ? args[3] : 1];
|
|
1171
|
+
};
|
|
1172
|
+
|
|
1173
|
+
const rgb2hcg = (...args) => {
|
|
1174
|
+
const [r, g, b] = unpack(args, 'rgb');
|
|
1175
|
+
const minRgb = min$3(r, g, b);
|
|
1176
|
+
const maxRgb = max$3(r, g, b);
|
|
1177
|
+
const delta = maxRgb - minRgb;
|
|
1178
|
+
const c = (delta * 100) / 255;
|
|
1179
|
+
const _g = (minRgb / (255 - delta)) * 100;
|
|
1180
|
+
let h;
|
|
1181
|
+
if (delta === 0) {
|
|
1182
|
+
h = Number.NaN;
|
|
1183
|
+
} else {
|
|
1184
|
+
if (r === maxRgb) h = (g - b) / delta;
|
|
1185
|
+
if (g === maxRgb) h = 2 + (b - r) / delta;
|
|
1186
|
+
if (b === maxRgb) h = 4 + (r - g) / delta;
|
|
1187
|
+
h *= 60;
|
|
1188
|
+
if (h < 0) h += 360;
|
|
1189
|
+
}
|
|
1190
|
+
return [h, c, _g];
|
|
1191
|
+
};
|
|
1192
|
+
|
|
1193
|
+
Color.prototype.hcg = function () {
|
|
1194
|
+
return rgb2hcg(this._rgb);
|
|
1195
|
+
};
|
|
1196
|
+
|
|
1197
|
+
const hcg$1 = (...args) => new Color(...args, 'hcg');
|
|
1198
|
+
chroma.hcg = hcg$1;
|
|
1199
|
+
|
|
1200
|
+
input.format.hcg = hcg2rgb;
|
|
1201
|
+
|
|
1202
|
+
input.autodetect.push({
|
|
1203
|
+
p: 1,
|
|
1204
|
+
test: (...args) => {
|
|
1205
|
+
args = unpack(args, 'hcg');
|
|
1206
|
+
if (type(args) === 'array' && args.length === 3) {
|
|
1207
|
+
return 'hcg';
|
|
1208
|
+
}
|
|
1209
|
+
}
|
|
1210
|
+
});
|
|
1211
|
+
|
|
1212
|
+
const hcg = (col1, col2, f) => {
|
|
1213
|
+
return interpolate_hsx(col1, col2, f, 'hcg');
|
|
1214
|
+
};
|
|
1215
|
+
|
|
1216
|
+
// register interpolator
|
|
1217
|
+
index.hcg = hcg;
|
|
1218
|
+
|
|
1219
|
+
const { cos: cos$3 } = Math;
|
|
1220
|
+
|
|
1221
|
+
/*
|
|
1222
|
+
* hue [0..360]
|
|
1223
|
+
* saturation [0..1]
|
|
1224
|
+
* intensity [0..1]
|
|
1225
|
+
*/
|
|
1226
|
+
const hsi2rgb = (...args) => {
|
|
1227
|
+
/*
|
|
1228
|
+
borrowed from here:
|
|
1229
|
+
http://hummer.stanford.edu/museinfo/doc/examples/humdrum/keyscape2/hsi2rgb.cpp
|
|
1230
|
+
*/
|
|
1231
|
+
args = unpack(args, 'hsi');
|
|
1232
|
+
let [h, s, i] = args;
|
|
1233
|
+
let r, g, b;
|
|
1234
|
+
|
|
1235
|
+
if (isNaN(h)) h = 0;
|
|
1236
|
+
if (isNaN(s)) s = 0;
|
|
1237
|
+
// normalize hue
|
|
1238
|
+
if (h > 360) h -= 360;
|
|
1239
|
+
if (h < 0) h += 360;
|
|
1240
|
+
h /= 360;
|
|
1241
|
+
if (h < 1 / 3) {
|
|
1242
|
+
b = (1 - s) / 3;
|
|
1243
|
+
r = (1 + (s * cos$3(TWOPI * h)) / cos$3(PITHIRD - TWOPI * h)) / 3;
|
|
1244
|
+
g = 1 - (b + r);
|
|
1245
|
+
} else if (h < 2 / 3) {
|
|
1246
|
+
h -= 1 / 3;
|
|
1247
|
+
r = (1 - s) / 3;
|
|
1248
|
+
g = (1 + (s * cos$3(TWOPI * h)) / cos$3(PITHIRD - TWOPI * h)) / 3;
|
|
1249
|
+
b = 1 - (r + g);
|
|
1250
|
+
} else {
|
|
1251
|
+
h -= 2 / 3;
|
|
1252
|
+
g = (1 - s) / 3;
|
|
1253
|
+
b = (1 + (s * cos$3(TWOPI * h)) / cos$3(PITHIRD - TWOPI * h)) / 3;
|
|
1254
|
+
r = 1 - (g + b);
|
|
1255
|
+
}
|
|
1256
|
+
r = limit(i * r * 3);
|
|
1257
|
+
g = limit(i * g * 3);
|
|
1258
|
+
b = limit(i * b * 3);
|
|
1259
|
+
return [r * 255, g * 255, b * 255, args.length > 3 ? args[3] : 1];
|
|
1260
|
+
};
|
|
1261
|
+
|
|
1262
|
+
const { min: min$2, sqrt: sqrt$2, acos } = Math;
|
|
1263
|
+
|
|
1264
|
+
const rgb2hsi = (...args) => {
|
|
1265
|
+
/*
|
|
1266
|
+
borrowed from here:
|
|
1267
|
+
http://hummer.stanford.edu/museinfo/doc/examples/humdrum/keyscape2/rgb2hsi.cpp
|
|
1268
|
+
*/
|
|
1269
|
+
let [r, g, b] = unpack(args, 'rgb');
|
|
1270
|
+
r /= 255;
|
|
1271
|
+
g /= 255;
|
|
1272
|
+
b /= 255;
|
|
1273
|
+
let h;
|
|
1274
|
+
const min_ = min$2(r, g, b);
|
|
1275
|
+
const i = (r + g + b) / 3;
|
|
1276
|
+
const s = i > 0 ? 1 - min_ / i : 0;
|
|
1277
|
+
if (s === 0) {
|
|
1278
|
+
h = NaN;
|
|
1279
|
+
} else {
|
|
1280
|
+
h = (r - g + (r - b)) / 2;
|
|
1281
|
+
h /= sqrt$2((r - g) * (r - g) + (r - b) * (g - b));
|
|
1282
|
+
h = acos(h);
|
|
1283
|
+
if (b > g) {
|
|
1284
|
+
h = TWOPI - h;
|
|
1285
|
+
}
|
|
1286
|
+
h /= TWOPI;
|
|
1287
|
+
}
|
|
1288
|
+
return [h * 360, s, i];
|
|
1289
|
+
};
|
|
1290
|
+
|
|
1291
|
+
Color.prototype.hsi = function () {
|
|
1292
|
+
return rgb2hsi(this._rgb);
|
|
1293
|
+
};
|
|
1294
|
+
|
|
1295
|
+
const hsi$1 = (...args) => new Color(...args, 'hsi');
|
|
1296
|
+
chroma.hsi = hsi$1;
|
|
1297
|
+
|
|
1298
|
+
input.format.hsi = hsi2rgb;
|
|
1299
|
+
|
|
1300
|
+
input.autodetect.push({
|
|
1301
|
+
p: 2,
|
|
1302
|
+
test: (...args) => {
|
|
1303
|
+
args = unpack(args, 'hsi');
|
|
1304
|
+
if (type(args) === 'array' && args.length === 3) {
|
|
1305
|
+
return 'hsi';
|
|
1306
|
+
}
|
|
1307
|
+
}
|
|
1308
|
+
});
|
|
1309
|
+
|
|
1310
|
+
const hsi = (col1, col2, f) => {
|
|
1311
|
+
return interpolate_hsx(col1, col2, f, 'hsi');
|
|
1312
|
+
};
|
|
1313
|
+
|
|
1314
|
+
// register interpolator
|
|
1315
|
+
index.hsi = hsi;
|
|
1316
|
+
|
|
1317
|
+
const hsl2rgb = (...args) => {
|
|
1318
|
+
args = unpack(args, 'hsl');
|
|
1319
|
+
const [h, s, l] = args;
|
|
1320
|
+
let r, g, b;
|
|
1321
|
+
if (s === 0) {
|
|
1322
|
+
r = g = b = l * 255;
|
|
1323
|
+
} else {
|
|
1324
|
+
const t3 = [0, 0, 0];
|
|
1325
|
+
const c = [0, 0, 0];
|
|
1326
|
+
const t2 = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
1327
|
+
const t1 = 2 * l - t2;
|
|
1328
|
+
const h_ = h / 360;
|
|
1329
|
+
t3[0] = h_ + 1 / 3;
|
|
1330
|
+
t3[1] = h_;
|
|
1331
|
+
t3[2] = h_ - 1 / 3;
|
|
1332
|
+
for (let i = 0; i < 3; i++) {
|
|
1333
|
+
if (t3[i] < 0) t3[i] += 1;
|
|
1334
|
+
if (t3[i] > 1) t3[i] -= 1;
|
|
1335
|
+
if (6 * t3[i] < 1) c[i] = t1 + (t2 - t1) * 6 * t3[i];
|
|
1336
|
+
else if (2 * t3[i] < 1) c[i] = t2;
|
|
1337
|
+
else if (3 * t3[i] < 2) c[i] = t1 + (t2 - t1) * (2 / 3 - t3[i]) * 6;
|
|
1338
|
+
else c[i] = t1;
|
|
1339
|
+
}
|
|
1340
|
+
[r, g, b] = [c[0] * 255, c[1] * 255, c[2] * 255];
|
|
1341
|
+
}
|
|
1342
|
+
if (args.length > 3) {
|
|
1343
|
+
// keep alpha channel
|
|
1344
|
+
return [r, g, b, args[3]];
|
|
1345
|
+
}
|
|
1346
|
+
return [r, g, b, 1];
|
|
1347
|
+
};
|
|
1348
|
+
|
|
1349
|
+
/*
|
|
1350
|
+
* supported arguments:
|
|
1351
|
+
* - rgb2hsl(r,g,b)
|
|
1352
|
+
* - rgb2hsl(r,g,b,a)
|
|
1353
|
+
* - rgb2hsl([r,g,b])
|
|
1354
|
+
* - rgb2hsl([r,g,b,a])
|
|
1355
|
+
* - rgb2hsl({r,g,b,a})
|
|
1356
|
+
*/
|
|
1357
|
+
const rgb2hsl$1 = (...args) => {
|
|
1358
|
+
args = unpack(args, 'rgba');
|
|
1359
|
+
let [r, g, b] = args;
|
|
1360
|
+
|
|
1361
|
+
r /= 255;
|
|
1362
|
+
g /= 255;
|
|
1363
|
+
b /= 255;
|
|
1364
|
+
|
|
1365
|
+
const minRgb = min$3(r, g, b);
|
|
1366
|
+
const maxRgb = max$3(r, g, b);
|
|
1367
|
+
|
|
1368
|
+
const l = (maxRgb + minRgb) / 2;
|
|
1369
|
+
let s, h;
|
|
1370
|
+
|
|
1371
|
+
if (maxRgb === minRgb) {
|
|
1372
|
+
s = 0;
|
|
1373
|
+
h = Number.NaN;
|
|
1374
|
+
} else {
|
|
1375
|
+
s =
|
|
1376
|
+
l < 0.5
|
|
1377
|
+
? (maxRgb - minRgb) / (maxRgb + minRgb)
|
|
1378
|
+
: (maxRgb - minRgb) / (2 - maxRgb - minRgb);
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1381
|
+
if (r == maxRgb) h = (g - b) / (maxRgb - minRgb);
|
|
1382
|
+
else if (g == maxRgb) h = 2 + (b - r) / (maxRgb - minRgb);
|
|
1383
|
+
else if (b == maxRgb) h = 4 + (r - g) / (maxRgb - minRgb);
|
|
1384
|
+
|
|
1385
|
+
h *= 60;
|
|
1386
|
+
if (h < 0) h += 360;
|
|
1387
|
+
if (args.length > 3 && args[3] !== undefined) return [h, s, l, args[3]];
|
|
1388
|
+
return [h, s, l];
|
|
1389
|
+
};
|
|
1390
|
+
|
|
1391
|
+
Color.prototype.hsl = function () {
|
|
1392
|
+
return rgb2hsl$1(this._rgb);
|
|
1393
|
+
};
|
|
1394
|
+
|
|
1395
|
+
const hsl$1 = (...args) => new Color(...args, 'hsl');
|
|
1396
|
+
chroma.hsl = hsl$1;
|
|
1397
|
+
|
|
1398
|
+
input.format.hsl = hsl2rgb;
|
|
1399
|
+
|
|
1400
|
+
input.autodetect.push({
|
|
1401
|
+
p: 2,
|
|
1402
|
+
test: (...args) => {
|
|
1403
|
+
args = unpack(args, 'hsl');
|
|
1404
|
+
if (type(args) === 'array' && args.length === 3) {
|
|
1405
|
+
return 'hsl';
|
|
1406
|
+
}
|
|
1407
|
+
}
|
|
1408
|
+
});
|
|
1409
|
+
|
|
1410
|
+
const hsl = (col1, col2, f) => {
|
|
1411
|
+
return interpolate_hsx(col1, col2, f, 'hsl');
|
|
1412
|
+
};
|
|
1413
|
+
|
|
1414
|
+
// register interpolator
|
|
1415
|
+
index.hsl = hsl;
|
|
1416
|
+
|
|
1417
|
+
const { floor: floor$2 } = Math;
|
|
1418
|
+
|
|
1419
|
+
const hsv2rgb = (...args) => {
|
|
1420
|
+
args = unpack(args, 'hsv');
|
|
1421
|
+
let [h, s, v] = args;
|
|
1422
|
+
let r, g, b;
|
|
1423
|
+
v *= 255;
|
|
1424
|
+
if (s === 0) {
|
|
1425
|
+
r = g = b = v;
|
|
1426
|
+
} else {
|
|
1427
|
+
if (h === 360) h = 0;
|
|
1428
|
+
if (h > 360) h -= 360;
|
|
1429
|
+
if (h < 0) h += 360;
|
|
1430
|
+
h /= 60;
|
|
1431
|
+
|
|
1432
|
+
const i = floor$2(h);
|
|
1433
|
+
const f = h - i;
|
|
1434
|
+
const p = v * (1 - s);
|
|
1435
|
+
const q = v * (1 - s * f);
|
|
1436
|
+
const t = v * (1 - s * (1 - f));
|
|
1437
|
+
|
|
1438
|
+
switch (i) {
|
|
1439
|
+
case 0:
|
|
1440
|
+
[r, g, b] = [v, t, p];
|
|
1441
|
+
break;
|
|
1442
|
+
case 1:
|
|
1443
|
+
[r, g, b] = [q, v, p];
|
|
1444
|
+
break;
|
|
1445
|
+
case 2:
|
|
1446
|
+
[r, g, b] = [p, v, t];
|
|
1447
|
+
break;
|
|
1448
|
+
case 3:
|
|
1449
|
+
[r, g, b] = [p, q, v];
|
|
1450
|
+
break;
|
|
1451
|
+
case 4:
|
|
1452
|
+
[r, g, b] = [t, p, v];
|
|
1453
|
+
break;
|
|
1454
|
+
case 5:
|
|
1455
|
+
[r, g, b] = [v, p, q];
|
|
1456
|
+
break;
|
|
1457
|
+
}
|
|
1458
|
+
}
|
|
1459
|
+
return [r, g, b, args.length > 3 ? args[3] : 1];
|
|
1460
|
+
};
|
|
1461
|
+
|
|
1462
|
+
const { min: min$1, max: max$2 } = Math;
|
|
1463
|
+
|
|
1464
|
+
/*
|
|
1465
|
+
* supported arguments:
|
|
1466
|
+
* - rgb2hsv(r,g,b)
|
|
1467
|
+
* - rgb2hsv([r,g,b])
|
|
1468
|
+
* - rgb2hsv({r,g,b})
|
|
1469
|
+
*/
|
|
1470
|
+
const rgb2hsl = (...args) => {
|
|
1471
|
+
args = unpack(args, 'rgb');
|
|
1472
|
+
let [r, g, b] = args;
|
|
1473
|
+
const min_ = min$1(r, g, b);
|
|
1474
|
+
const max_ = max$2(r, g, b);
|
|
1475
|
+
const delta = max_ - min_;
|
|
1476
|
+
let h, s, v;
|
|
1477
|
+
v = max_ / 255.0;
|
|
1478
|
+
if (max_ === 0) {
|
|
1479
|
+
h = Number.NaN;
|
|
1480
|
+
s = 0;
|
|
1481
|
+
} else {
|
|
1482
|
+
s = delta / max_;
|
|
1483
|
+
if (r === max_) h = (g - b) / delta;
|
|
1484
|
+
if (g === max_) h = 2 + (b - r) / delta;
|
|
1485
|
+
if (b === max_) h = 4 + (r - g) / delta;
|
|
1486
|
+
h *= 60;
|
|
1487
|
+
if (h < 0) h += 360;
|
|
1488
|
+
}
|
|
1489
|
+
return [h, s, v];
|
|
1490
|
+
};
|
|
1491
|
+
|
|
1492
|
+
Color.prototype.hsv = function () {
|
|
1493
|
+
return rgb2hsl(this._rgb);
|
|
1494
|
+
};
|
|
1495
|
+
|
|
1496
|
+
const hsv$1 = (...args) => new Color(...args, 'hsv');
|
|
1497
|
+
chroma.hsv = hsv$1;
|
|
1498
|
+
|
|
1499
|
+
input.format.hsv = hsv2rgb;
|
|
1500
|
+
|
|
1501
|
+
input.autodetect.push({
|
|
1502
|
+
p: 2,
|
|
1503
|
+
test: (...args) => {
|
|
1504
|
+
args = unpack(args, 'hsv');
|
|
1505
|
+
if (type(args) === 'array' && args.length === 3) {
|
|
1506
|
+
return 'hsv';
|
|
1507
|
+
}
|
|
1508
|
+
}
|
|
1509
|
+
});
|
|
1510
|
+
|
|
1511
|
+
const hsv = (col1, col2, f) => {
|
|
1512
|
+
return interpolate_hsx(col1, col2, f, 'hsv');
|
|
1513
|
+
};
|
|
1514
|
+
|
|
1515
|
+
// register interpolator
|
|
1516
|
+
index.hsv = hsv;
|
|
1517
|
+
|
|
1518
|
+
// from https://www.w3.org/TR/css-color-4/multiply-matrices.js
|
|
1519
|
+
function multiplyMatrices(A, B) {
|
|
1520
|
+
let m = A.length;
|
|
1521
|
+
|
|
1522
|
+
if (!Array.isArray(A[0])) {
|
|
1523
|
+
// A is vector, convert to [[a, b, c, ...]]
|
|
1524
|
+
A = [A];
|
|
1525
|
+
}
|
|
1526
|
+
|
|
1527
|
+
if (!Array.isArray(B[0])) {
|
|
1528
|
+
// B is vector, convert to [[a], [b], [c], ...]]
|
|
1529
|
+
B = B.map((x) => [x]);
|
|
1530
|
+
}
|
|
1531
|
+
|
|
1532
|
+
let p = B[0].length;
|
|
1533
|
+
let B_cols = B[0].map((_, i) => B.map((x) => x[i])); // transpose B
|
|
1534
|
+
let product = A.map((row) =>
|
|
1535
|
+
B_cols.map((col) => {
|
|
1536
|
+
if (!Array.isArray(row)) {
|
|
1537
|
+
return col.reduce((a, c) => a + c * row, 0);
|
|
1538
|
+
}
|
|
1539
|
+
|
|
1540
|
+
return row.reduce((a, c, i) => a + c * (col[i] || 0), 0);
|
|
1541
|
+
})
|
|
1542
|
+
);
|
|
1543
|
+
|
|
1544
|
+
if (m === 1) {
|
|
1545
|
+
product = product[0]; // Avoid [[a, b, c, ...]]
|
|
1546
|
+
}
|
|
1547
|
+
|
|
1548
|
+
if (p === 1) {
|
|
1549
|
+
return product.map((x) => x[0]); // Avoid [[a], [b], [c], ...]]
|
|
1550
|
+
}
|
|
1551
|
+
|
|
1552
|
+
return product;
|
|
1553
|
+
}
|
|
1554
|
+
|
|
1555
|
+
const oklab2rgb = (...args) => {
|
|
1556
|
+
args = unpack(args, 'lab');
|
|
1557
|
+
const [L, a, b, ...rest] = args;
|
|
1558
|
+
const [X, Y, Z] = OKLab_to_XYZ([L, a, b]);
|
|
1559
|
+
const [r, g, b_] = xyz2rgb(X, Y, Z);
|
|
1560
|
+
return [r, g, b_, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
|
|
1561
|
+
};
|
|
1562
|
+
|
|
1563
|
+
// from https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
1564
|
+
function OKLab_to_XYZ(OKLab) {
|
|
1565
|
+
// Given OKLab, convert to XYZ relative to D65
|
|
1566
|
+
var LMStoXYZ = [
|
|
1567
|
+
[1.2268798758459243, -0.5578149944602171, 0.2813910456659647],
|
|
1568
|
+
[-0.0405757452148008, 1.112286803280317, -0.0717110580655164],
|
|
1569
|
+
[-0.0763729366746601, -0.4214933324022432, 1.5869240198367816]
|
|
1570
|
+
];
|
|
1571
|
+
var OKLabtoLMS = [
|
|
1572
|
+
[1.0, 0.3963377773761749, 0.2158037573099136],
|
|
1573
|
+
[1.0, -0.1055613458156586, -0.0638541728258133],
|
|
1574
|
+
[1.0, -0.0894841775298119, -1.2914855480194092]
|
|
1575
|
+
];
|
|
1576
|
+
|
|
1577
|
+
var LMSnl = multiplyMatrices(OKLabtoLMS, OKLab);
|
|
1578
|
+
return multiplyMatrices(
|
|
1579
|
+
LMStoXYZ,
|
|
1580
|
+
LMSnl.map((c) => c ** 3)
|
|
1581
|
+
);
|
|
1582
|
+
}
|
|
1583
|
+
|
|
1584
|
+
const rgb2oklab = (...args) => {
|
|
1585
|
+
const [r, g, b, ...rest] = unpack(args, 'rgb');
|
|
1586
|
+
const xyz = rgb2xyz(r, g, b);
|
|
1587
|
+
const oklab = XYZ_to_OKLab(xyz);
|
|
1588
|
+
return [...oklab, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
|
|
1589
|
+
};
|
|
1590
|
+
|
|
1591
|
+
// from https://www.w3.org/TR/css-color-4/#color-conversion-code
|
|
1592
|
+
function XYZ_to_OKLab(XYZ) {
|
|
1593
|
+
// Given XYZ relative to D65, convert to OKLab
|
|
1594
|
+
const XYZtoLMS = [
|
|
1595
|
+
[0.819022437996703, 0.3619062600528904, -0.1288737815209879],
|
|
1596
|
+
[0.0329836539323885, 0.9292868615863434, 0.0361446663506424],
|
|
1597
|
+
[0.0481771893596242, 0.2642395317527308, 0.6335478284694309]
|
|
1598
|
+
];
|
|
1599
|
+
const LMStoOKLab = [
|
|
1600
|
+
[0.210454268309314, 0.7936177747023054, -0.0040720430116193],
|
|
1601
|
+
[1.9779985324311684, -2.4285922420485799, 0.450593709617411],
|
|
1602
|
+
[0.0259040424655478, 0.7827717124575296, -0.8086757549230774]
|
|
1603
|
+
];
|
|
1604
|
+
|
|
1605
|
+
const LMS = multiplyMatrices(XYZtoLMS, XYZ);
|
|
1606
|
+
// JavaScript Math.cbrt returns a sign-matched cube root
|
|
1607
|
+
// beware if porting to other languages
|
|
1608
|
+
// especially if tempted to use a general power function
|
|
1609
|
+
return multiplyMatrices(
|
|
1610
|
+
LMStoOKLab,
|
|
1611
|
+
LMS.map((c) => Math.cbrt(c))
|
|
1612
|
+
);
|
|
1613
|
+
// L in range [0,1]. For use in CSS, multiply by 100 and add a percent
|
|
1614
|
+
}
|
|
1615
|
+
|
|
1616
|
+
Color.prototype.oklab = function () {
|
|
1617
|
+
return rgb2oklab(this._rgb);
|
|
1618
|
+
};
|
|
1619
|
+
|
|
1620
|
+
const oklab$1 = (...args) => new Color(...args, 'oklab');
|
|
1621
|
+
Object.assign(chroma, { oklab: oklab$1 });
|
|
1622
|
+
|
|
1623
|
+
input.format.oklab = oklab2rgb;
|
|
1624
|
+
|
|
1625
|
+
input.autodetect.push({
|
|
1626
|
+
p: 2,
|
|
1627
|
+
test: (...args) => {
|
|
1628
|
+
args = unpack(args, 'oklab');
|
|
1629
|
+
if (type(args) === 'array' && args.length === 3) {
|
|
1630
|
+
return 'oklab';
|
|
1631
|
+
}
|
|
1632
|
+
}
|
|
1633
|
+
});
|
|
1634
|
+
|
|
1635
|
+
const oklab = (col1, col2, f) => {
|
|
1636
|
+
const xyz0 = col1.oklab();
|
|
1637
|
+
const xyz1 = col2.oklab();
|
|
1638
|
+
return new Color(
|
|
1639
|
+
xyz0[0] + f * (xyz1[0] - xyz0[0]),
|
|
1640
|
+
xyz0[1] + f * (xyz1[1] - xyz0[1]),
|
|
1641
|
+
xyz0[2] + f * (xyz1[2] - xyz0[2]),
|
|
1642
|
+
'oklab'
|
|
1643
|
+
);
|
|
1644
|
+
};
|
|
1645
|
+
|
|
1646
|
+
// register interpolator
|
|
1647
|
+
index.oklab = oklab;
|
|
1648
|
+
|
|
1649
|
+
const oklch$1 = (col1, col2, f) => {
|
|
1650
|
+
return interpolate_hsx(col1, col2, f, 'oklch');
|
|
1651
|
+
};
|
|
1652
|
+
|
|
1653
|
+
// register interpolator
|
|
1654
|
+
index.oklch = oklch$1;
|
|
1655
|
+
|
|
1656
|
+
const { pow: pow$4, sqrt: sqrt$1, PI: PI$1, cos: cos$2, sin: sin$2, atan2: atan2$1 } = Math;
|
|
1657
|
+
|
|
1658
|
+
const average = (colors, mode = 'lrgb', weights = null) => {
|
|
1659
|
+
const l = colors.length;
|
|
1660
|
+
if (!weights) weights = Array.from(new Array(l)).map(() => 1);
|
|
1661
|
+
// normalize weights
|
|
1662
|
+
const k =
|
|
1663
|
+
l /
|
|
1664
|
+
weights.reduce(function (a, b) {
|
|
1665
|
+
return a + b;
|
|
1666
|
+
});
|
|
1667
|
+
weights.forEach((w, i) => {
|
|
1668
|
+
weights[i] *= k;
|
|
1669
|
+
});
|
|
1670
|
+
// convert colors to Color objects
|
|
1671
|
+
colors = colors.map((c) => new Color(c));
|
|
1672
|
+
if (mode === 'lrgb') {
|
|
1673
|
+
return _average_lrgb(colors, weights);
|
|
1674
|
+
}
|
|
1675
|
+
const first = colors.shift();
|
|
1676
|
+
const xyz = first.get(mode);
|
|
1677
|
+
const cnt = [];
|
|
1678
|
+
let dx = 0;
|
|
1679
|
+
let dy = 0;
|
|
1680
|
+
// initial color
|
|
1681
|
+
for (let i = 0; i < xyz.length; i++) {
|
|
1682
|
+
xyz[i] = (xyz[i] || 0) * weights[0];
|
|
1683
|
+
cnt.push(isNaN(xyz[i]) ? 0 : weights[0]);
|
|
1684
|
+
if (mode.charAt(i) === 'h' && !isNaN(xyz[i])) {
|
|
1685
|
+
const A = (xyz[i] / 180) * PI$1;
|
|
1686
|
+
dx += cos$2(A) * weights[0];
|
|
1687
|
+
dy += sin$2(A) * weights[0];
|
|
1688
|
+
}
|
|
1689
|
+
}
|
|
1690
|
+
|
|
1691
|
+
let alpha = first.alpha() * weights[0];
|
|
1692
|
+
colors.forEach((c, ci) => {
|
|
1693
|
+
const xyz2 = c.get(mode);
|
|
1694
|
+
alpha += c.alpha() * weights[ci + 1];
|
|
1695
|
+
for (let i = 0; i < xyz.length; i++) {
|
|
1696
|
+
if (!isNaN(xyz2[i])) {
|
|
1697
|
+
cnt[i] += weights[ci + 1];
|
|
1698
|
+
if (mode.charAt(i) === 'h') {
|
|
1699
|
+
const A = (xyz2[i] / 180) * PI$1;
|
|
1700
|
+
dx += cos$2(A) * weights[ci + 1];
|
|
1701
|
+
dy += sin$2(A) * weights[ci + 1];
|
|
1702
|
+
} else {
|
|
1703
|
+
xyz[i] += xyz2[i] * weights[ci + 1];
|
|
1704
|
+
}
|
|
1705
|
+
}
|
|
1706
|
+
}
|
|
1707
|
+
});
|
|
1708
|
+
|
|
1709
|
+
for (let i = 0; i < xyz.length; i++) {
|
|
1710
|
+
if (mode.charAt(i) === 'h') {
|
|
1711
|
+
let A = (atan2$1(dy / cnt[i], dx / cnt[i]) / PI$1) * 180;
|
|
1712
|
+
while (A < 0) A += 360;
|
|
1713
|
+
while (A >= 360) A -= 360;
|
|
1714
|
+
xyz[i] = A;
|
|
1715
|
+
} else {
|
|
1716
|
+
xyz[i] = xyz[i] / cnt[i];
|
|
1717
|
+
}
|
|
1718
|
+
}
|
|
1719
|
+
alpha /= l;
|
|
1720
|
+
return new Color(xyz, mode).alpha(alpha > 0.99999 ? 1 : alpha, true);
|
|
1721
|
+
};
|
|
1722
|
+
|
|
1723
|
+
const _average_lrgb = (colors, weights) => {
|
|
1724
|
+
const l = colors.length;
|
|
1725
|
+
const xyz = [0, 0, 0, 0];
|
|
1726
|
+
for (let i = 0; i < colors.length; i++) {
|
|
1727
|
+
const col = colors[i];
|
|
1728
|
+
const f = weights[i] / l;
|
|
1729
|
+
const rgb = col._rgb;
|
|
1730
|
+
xyz[0] += pow$4(rgb[0], 2) * f;
|
|
1731
|
+
xyz[1] += pow$4(rgb[1], 2) * f;
|
|
1732
|
+
xyz[2] += pow$4(rgb[2], 2) * f;
|
|
1733
|
+
xyz[3] += rgb[3] * f;
|
|
1734
|
+
}
|
|
1735
|
+
xyz[0] = sqrt$1(xyz[0]);
|
|
1736
|
+
xyz[1] = sqrt$1(xyz[1]);
|
|
1737
|
+
xyz[2] = sqrt$1(xyz[2]);
|
|
1738
|
+
if (xyz[3] > 0.9999999) xyz[3] = 1;
|
|
1739
|
+
return new Color(clip_rgb(xyz));
|
|
1740
|
+
};
|
|
1741
|
+
|
|
1742
|
+
// minimal multi-purpose interface
|
|
1743
|
+
|
|
1744
|
+
|
|
1745
|
+
const { pow: pow$3 } = Math;
|
|
1746
|
+
|
|
1747
|
+
function scale (colors) {
|
|
1748
|
+
// constructor
|
|
1749
|
+
let _mode = 'rgb';
|
|
1750
|
+
let _nacol = chroma('#ccc');
|
|
1751
|
+
let _spread = 0;
|
|
1752
|
+
// const _fixed = false;
|
|
1753
|
+
let _domain = [0, 1];
|
|
1754
|
+
let _pos = [];
|
|
1755
|
+
let _padding = [0, 0];
|
|
1756
|
+
let _classes = false;
|
|
1757
|
+
let _colors = [];
|
|
1758
|
+
let _out = false;
|
|
1759
|
+
let _min = 0;
|
|
1760
|
+
let _max = 1;
|
|
1761
|
+
let _correctLightness = false;
|
|
1762
|
+
let _colorCache = {};
|
|
1763
|
+
let _useCache = true;
|
|
1764
|
+
let _gamma = 1;
|
|
1765
|
+
|
|
1766
|
+
// private methods
|
|
1767
|
+
|
|
1768
|
+
const setColors = function (colors) {
|
|
1769
|
+
colors = colors || ['#fff', '#000'];
|
|
1770
|
+
if (
|
|
1771
|
+
colors &&
|
|
1772
|
+
type(colors) === 'string' &&
|
|
1773
|
+
chroma.brewer &&
|
|
1774
|
+
chroma.brewer[colors.toLowerCase()]
|
|
1775
|
+
) {
|
|
1776
|
+
colors = chroma.brewer[colors.toLowerCase()];
|
|
1777
|
+
}
|
|
1778
|
+
if (type(colors) === 'array') {
|
|
1779
|
+
// handle single color
|
|
1780
|
+
if (colors.length === 1) {
|
|
1781
|
+
colors = [colors[0], colors[0]];
|
|
1782
|
+
}
|
|
1783
|
+
// make a copy of the colors
|
|
1784
|
+
colors = colors.slice(0);
|
|
1785
|
+
// convert to chroma classes
|
|
1786
|
+
for (let c = 0; c < colors.length; c++) {
|
|
1787
|
+
colors[c] = chroma(colors[c]);
|
|
1788
|
+
}
|
|
1789
|
+
// auto-fill color position
|
|
1790
|
+
_pos.length = 0;
|
|
1791
|
+
for (let c = 0; c < colors.length; c++) {
|
|
1792
|
+
_pos.push(c / (colors.length - 1));
|
|
1793
|
+
}
|
|
1794
|
+
}
|
|
1795
|
+
resetCache();
|
|
1796
|
+
return (_colors = colors);
|
|
1797
|
+
};
|
|
1798
|
+
|
|
1799
|
+
const getClass = function (value) {
|
|
1800
|
+
if (_classes != null) {
|
|
1801
|
+
const n = _classes.length - 1;
|
|
1802
|
+
let i = 0;
|
|
1803
|
+
while (i < n && value >= _classes[i]) {
|
|
1804
|
+
i++;
|
|
1805
|
+
}
|
|
1806
|
+
return i - 1;
|
|
1807
|
+
}
|
|
1808
|
+
return 0;
|
|
1809
|
+
};
|
|
1810
|
+
|
|
1811
|
+
let tMapLightness = (t) => t;
|
|
1812
|
+
let tMapDomain = (t) => t;
|
|
1813
|
+
|
|
1814
|
+
// const classifyValue = function(value) {
|
|
1815
|
+
// let val = value;
|
|
1816
|
+
// if (_classes.length > 2) {
|
|
1817
|
+
// const n = _classes.length-1;
|
|
1818
|
+
// const i = getClass(value);
|
|
1819
|
+
// const minc = _classes[0] + ((_classes[1]-_classes[0]) * (0 + (_spread * 0.5))); // center of 1st class
|
|
1820
|
+
// const maxc = _classes[n-1] + ((_classes[n]-_classes[n-1]) * (1 - (_spread * 0.5))); // center of last class
|
|
1821
|
+
// val = _min + ((((_classes[i] + ((_classes[i+1] - _classes[i]) * 0.5)) - minc) / (maxc-minc)) * (_max - _min));
|
|
1822
|
+
// }
|
|
1823
|
+
// return val;
|
|
1824
|
+
// };
|
|
1825
|
+
|
|
1826
|
+
const getColor = function (val, bypassMap) {
|
|
1827
|
+
let col, t;
|
|
1828
|
+
if (bypassMap == null) {
|
|
1829
|
+
bypassMap = false;
|
|
1830
|
+
}
|
|
1831
|
+
if (isNaN(val) || val === null) {
|
|
1832
|
+
return _nacol;
|
|
1833
|
+
}
|
|
1834
|
+
if (!bypassMap) {
|
|
1835
|
+
if (_classes && _classes.length > 2) {
|
|
1836
|
+
// find the class
|
|
1837
|
+
const c = getClass(val);
|
|
1838
|
+
t = c / (_classes.length - 2);
|
|
1839
|
+
} else if (_max !== _min) {
|
|
1840
|
+
// just interpolate between min/max
|
|
1841
|
+
t = (val - _min) / (_max - _min);
|
|
1842
|
+
} else {
|
|
1843
|
+
t = 1;
|
|
1844
|
+
}
|
|
1845
|
+
} else {
|
|
1846
|
+
t = val;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
// domain map
|
|
1850
|
+
t = tMapDomain(t);
|
|
1851
|
+
|
|
1852
|
+
if (!bypassMap) {
|
|
1853
|
+
t = tMapLightness(t); // lightness correction
|
|
1854
|
+
}
|
|
1855
|
+
|
|
1856
|
+
if (_gamma !== 1) {
|
|
1857
|
+
t = pow$3(t, _gamma);
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
t = _padding[0] + t * (1 - _padding[0] - _padding[1]);
|
|
1861
|
+
|
|
1862
|
+
t = limit(t, 0, 1);
|
|
1863
|
+
|
|
1864
|
+
const k = Math.floor(t * 10000);
|
|
1865
|
+
|
|
1866
|
+
if (_useCache && _colorCache[k]) {
|
|
1867
|
+
col = _colorCache[k];
|
|
1868
|
+
} else {
|
|
1869
|
+
if (type(_colors) === 'array') {
|
|
1870
|
+
//for i in [0.._pos.length-1]
|
|
1871
|
+
for (let i = 0; i < _pos.length; i++) {
|
|
1872
|
+
const p = _pos[i];
|
|
1873
|
+
if (t <= p) {
|
|
1874
|
+
col = _colors[i];
|
|
1875
|
+
break;
|
|
1876
|
+
}
|
|
1877
|
+
if (t >= p && i === _pos.length - 1) {
|
|
1878
|
+
col = _colors[i];
|
|
1879
|
+
break;
|
|
1880
|
+
}
|
|
1881
|
+
if (t > p && t < _pos[i + 1]) {
|
|
1882
|
+
t = (t - p) / (_pos[i + 1] - p);
|
|
1883
|
+
col = chroma.interpolate(
|
|
1884
|
+
_colors[i],
|
|
1885
|
+
_colors[i + 1],
|
|
1886
|
+
t,
|
|
1887
|
+
_mode
|
|
1888
|
+
);
|
|
1889
|
+
break;
|
|
1890
|
+
}
|
|
1891
|
+
}
|
|
1892
|
+
} else if (type(_colors) === 'function') {
|
|
1893
|
+
col = _colors(t);
|
|
1894
|
+
}
|
|
1895
|
+
if (_useCache) {
|
|
1896
|
+
_colorCache[k] = col;
|
|
1897
|
+
}
|
|
1898
|
+
}
|
|
1899
|
+
return col;
|
|
1900
|
+
};
|
|
1901
|
+
|
|
1902
|
+
var resetCache = () => (_colorCache = {});
|
|
1903
|
+
|
|
1904
|
+
setColors(colors);
|
|
1905
|
+
|
|
1906
|
+
// public interface
|
|
1907
|
+
|
|
1908
|
+
const f = function (v) {
|
|
1909
|
+
const c = chroma(getColor(v));
|
|
1910
|
+
if (_out && c[_out]) {
|
|
1911
|
+
return c[_out]();
|
|
1912
|
+
} else {
|
|
1913
|
+
return c;
|
|
1914
|
+
}
|
|
1915
|
+
};
|
|
1916
|
+
|
|
1917
|
+
f.classes = function (classes) {
|
|
1918
|
+
if (classes != null) {
|
|
1919
|
+
if (type(classes) === 'array') {
|
|
1920
|
+
_classes = classes;
|
|
1921
|
+
_domain = [classes[0], classes[classes.length - 1]];
|
|
1922
|
+
} else {
|
|
1923
|
+
const d = chroma.analyze(_domain);
|
|
1924
|
+
if (classes === 0) {
|
|
1925
|
+
_classes = [d.min, d.max];
|
|
1926
|
+
} else {
|
|
1927
|
+
_classes = chroma.limits(d, 'e', classes);
|
|
1928
|
+
}
|
|
1929
|
+
}
|
|
1930
|
+
return f;
|
|
1931
|
+
}
|
|
1932
|
+
return _classes;
|
|
1933
|
+
};
|
|
1934
|
+
|
|
1935
|
+
f.domain = function (domain) {
|
|
1936
|
+
if (!arguments.length) {
|
|
1937
|
+
return _domain;
|
|
1938
|
+
}
|
|
1939
|
+
_min = domain[0];
|
|
1940
|
+
_max = domain[domain.length - 1];
|
|
1941
|
+
_pos = [];
|
|
1942
|
+
const k = _colors.length;
|
|
1943
|
+
if (domain.length === k && _min !== _max) {
|
|
1944
|
+
// update positions
|
|
1945
|
+
for (let d of Array.from(domain)) {
|
|
1946
|
+
_pos.push((d - _min) / (_max - _min));
|
|
1947
|
+
}
|
|
1948
|
+
} else {
|
|
1949
|
+
for (let c = 0; c < k; c++) {
|
|
1950
|
+
_pos.push(c / (k - 1));
|
|
1951
|
+
}
|
|
1952
|
+
if (domain.length > 2) {
|
|
1953
|
+
// set domain map
|
|
1954
|
+
const tOut = domain.map((d, i) => i / (domain.length - 1));
|
|
1955
|
+
const tBreaks = domain.map((d) => (d - _min) / (_max - _min));
|
|
1956
|
+
if (!tBreaks.every((val, i) => tOut[i] === val)) {
|
|
1957
|
+
tMapDomain = (t) => {
|
|
1958
|
+
if (t <= 0 || t >= 1) return t;
|
|
1959
|
+
let i = 0;
|
|
1960
|
+
while (t >= tBreaks[i + 1]) i++;
|
|
1961
|
+
const f =
|
|
1962
|
+
(t - tBreaks[i]) / (tBreaks[i + 1] - tBreaks[i]);
|
|
1963
|
+
const out = tOut[i] + f * (tOut[i + 1] - tOut[i]);
|
|
1964
|
+
return out;
|
|
1965
|
+
};
|
|
1966
|
+
}
|
|
1967
|
+
}
|
|
1968
|
+
}
|
|
1969
|
+
_domain = [_min, _max];
|
|
1970
|
+
return f;
|
|
1971
|
+
};
|
|
1972
|
+
|
|
1973
|
+
f.mode = function (_m) {
|
|
1974
|
+
if (!arguments.length) {
|
|
1975
|
+
return _mode;
|
|
1976
|
+
}
|
|
1977
|
+
_mode = _m;
|
|
1978
|
+
resetCache();
|
|
1979
|
+
return f;
|
|
1980
|
+
};
|
|
1981
|
+
|
|
1982
|
+
f.range = function (colors, _pos) {
|
|
1983
|
+
setColors(colors);
|
|
1984
|
+
return f;
|
|
1985
|
+
};
|
|
1986
|
+
|
|
1987
|
+
f.out = function (_o) {
|
|
1988
|
+
_out = _o;
|
|
1989
|
+
return f;
|
|
1990
|
+
};
|
|
1991
|
+
|
|
1992
|
+
f.spread = function (val) {
|
|
1993
|
+
if (!arguments.length) {
|
|
1994
|
+
return _spread;
|
|
1995
|
+
}
|
|
1996
|
+
_spread = val;
|
|
1997
|
+
return f;
|
|
1998
|
+
};
|
|
1999
|
+
|
|
2000
|
+
f.correctLightness = function (v) {
|
|
2001
|
+
if (v == null) {
|
|
2002
|
+
v = true;
|
|
2003
|
+
}
|
|
2004
|
+
_correctLightness = v;
|
|
2005
|
+
resetCache();
|
|
2006
|
+
if (_correctLightness) {
|
|
2007
|
+
tMapLightness = function (t) {
|
|
2008
|
+
const L0 = getColor(0, true).lab()[0];
|
|
2009
|
+
const L1 = getColor(1, true).lab()[0];
|
|
2010
|
+
const pol = L0 > L1;
|
|
2011
|
+
let L_actual = getColor(t, true).lab()[0];
|
|
2012
|
+
const L_ideal = L0 + (L1 - L0) * t;
|
|
2013
|
+
let L_diff = L_actual - L_ideal;
|
|
2014
|
+
let t0 = 0;
|
|
2015
|
+
let t1 = 1;
|
|
2016
|
+
let max_iter = 20;
|
|
2017
|
+
while (Math.abs(L_diff) > 1e-2 && max_iter-- > 0) {
|
|
2018
|
+
(function () {
|
|
2019
|
+
if (pol) {
|
|
2020
|
+
L_diff *= -1;
|
|
2021
|
+
}
|
|
2022
|
+
if (L_diff < 0) {
|
|
2023
|
+
t0 = t;
|
|
2024
|
+
t += (t1 - t) * 0.5;
|
|
2025
|
+
} else {
|
|
2026
|
+
t1 = t;
|
|
2027
|
+
t += (t0 - t) * 0.5;
|
|
2028
|
+
}
|
|
2029
|
+
L_actual = getColor(t, true).lab()[0];
|
|
2030
|
+
return (L_diff = L_actual - L_ideal);
|
|
2031
|
+
})();
|
|
2032
|
+
}
|
|
2033
|
+
return t;
|
|
2034
|
+
};
|
|
2035
|
+
} else {
|
|
2036
|
+
tMapLightness = (t) => t;
|
|
2037
|
+
}
|
|
2038
|
+
return f;
|
|
2039
|
+
};
|
|
2040
|
+
|
|
2041
|
+
f.padding = function (p) {
|
|
2042
|
+
if (p != null) {
|
|
2043
|
+
if (type(p) === 'number') {
|
|
2044
|
+
p = [p, p];
|
|
2045
|
+
}
|
|
2046
|
+
_padding = p;
|
|
2047
|
+
return f;
|
|
2048
|
+
} else {
|
|
2049
|
+
return _padding;
|
|
2050
|
+
}
|
|
2051
|
+
};
|
|
2052
|
+
|
|
2053
|
+
f.colors = function (numColors, out) {
|
|
2054
|
+
// If no arguments are given, return the original colors that were provided
|
|
2055
|
+
if (arguments.length < 2) {
|
|
2056
|
+
out = 'hex';
|
|
2057
|
+
}
|
|
2058
|
+
let result = [];
|
|
2059
|
+
|
|
2060
|
+
if (arguments.length === 0) {
|
|
2061
|
+
result = _colors.slice(0);
|
|
2062
|
+
} else if (numColors === 1) {
|
|
2063
|
+
result = [f(0.5)];
|
|
2064
|
+
} else if (numColors > 1) {
|
|
2065
|
+
const dm = _domain[0];
|
|
2066
|
+
const dd = _domain[1] - dm;
|
|
2067
|
+
result = __range__(0, numColors).map((i) =>
|
|
2068
|
+
f(dm + (i / (numColors - 1)) * dd)
|
|
2069
|
+
);
|
|
2070
|
+
} else {
|
|
2071
|
+
// returns all colors based on the defined classes
|
|
2072
|
+
colors = [];
|
|
2073
|
+
let samples = [];
|
|
2074
|
+
if (_classes && _classes.length > 2) {
|
|
2075
|
+
for (
|
|
2076
|
+
let i = 1, end = _classes.length, asc = 1 <= end;
|
|
2077
|
+
asc ? i < end : i > end;
|
|
2078
|
+
asc ? i++ : i--
|
|
2079
|
+
) {
|
|
2080
|
+
samples.push((_classes[i - 1] + _classes[i]) * 0.5);
|
|
2081
|
+
}
|
|
2082
|
+
} else {
|
|
2083
|
+
samples = _domain;
|
|
2084
|
+
}
|
|
2085
|
+
result = samples.map((v) => f(v));
|
|
2086
|
+
}
|
|
2087
|
+
|
|
2088
|
+
if (chroma[out]) {
|
|
2089
|
+
result = result.map((c) => c[out]());
|
|
2090
|
+
}
|
|
2091
|
+
return result;
|
|
2092
|
+
};
|
|
2093
|
+
|
|
2094
|
+
f.cache = function (c) {
|
|
2095
|
+
if (c != null) {
|
|
2096
|
+
_useCache = c;
|
|
2097
|
+
return f;
|
|
2098
|
+
} else {
|
|
2099
|
+
return _useCache;
|
|
2100
|
+
}
|
|
2101
|
+
};
|
|
2102
|
+
|
|
2103
|
+
f.gamma = function (g) {
|
|
2104
|
+
if (g != null) {
|
|
2105
|
+
_gamma = g;
|
|
2106
|
+
return f;
|
|
2107
|
+
} else {
|
|
2108
|
+
return _gamma;
|
|
2109
|
+
}
|
|
2110
|
+
};
|
|
2111
|
+
|
|
2112
|
+
f.nodata = function (d) {
|
|
2113
|
+
if (d != null) {
|
|
2114
|
+
_nacol = chroma(d);
|
|
2115
|
+
return f;
|
|
2116
|
+
} else {
|
|
2117
|
+
return _nacol;
|
|
2118
|
+
}
|
|
2119
|
+
};
|
|
2120
|
+
|
|
2121
|
+
return f;
|
|
2122
|
+
}
|
|
2123
|
+
|
|
2124
|
+
function __range__(left, right, inclusive) {
|
|
2125
|
+
let range = [];
|
|
2126
|
+
let ascending = left < right;
|
|
2127
|
+
let end = right ;
|
|
2128
|
+
for (let i = left; ascending ? i < end : i > end; ascending ? i++ : i--) {
|
|
2129
|
+
range.push(i);
|
|
2130
|
+
}
|
|
2131
|
+
return range;
|
|
2132
|
+
}
|
|
2133
|
+
|
|
2134
|
+
//
|
|
2135
|
+
// interpolates between a set of colors uzing a bezier spline
|
|
2136
|
+
//
|
|
2137
|
+
|
|
2138
|
+
|
|
2139
|
+
// nth row of the pascal triangle
|
|
2140
|
+
const binom_row = function (n) {
|
|
2141
|
+
let row = [1, 1];
|
|
2142
|
+
for (let i = 1; i < n; i++) {
|
|
2143
|
+
let newrow = [1];
|
|
2144
|
+
for (let j = 1; j <= row.length; j++) {
|
|
2145
|
+
newrow[j] = (row[j] || 0) + row[j - 1];
|
|
2146
|
+
}
|
|
2147
|
+
row = newrow;
|
|
2148
|
+
}
|
|
2149
|
+
return row;
|
|
2150
|
+
};
|
|
2151
|
+
|
|
2152
|
+
const bezier = function (colors) {
|
|
2153
|
+
let I, lab0, lab1, lab2;
|
|
2154
|
+
colors = colors.map((c) => new Color(c));
|
|
2155
|
+
if (colors.length === 2) {
|
|
2156
|
+
// linear interpolation
|
|
2157
|
+
[lab0, lab1] = colors.map((c) => c.lab());
|
|
2158
|
+
I = function (t) {
|
|
2159
|
+
const lab = [0, 1, 2].map((i) => lab0[i] + t * (lab1[i] - lab0[i]));
|
|
2160
|
+
return new Color(lab, 'lab');
|
|
2161
|
+
};
|
|
2162
|
+
} else if (colors.length === 3) {
|
|
2163
|
+
// quadratic bezier interpolation
|
|
2164
|
+
[lab0, lab1, lab2] = colors.map((c) => c.lab());
|
|
2165
|
+
I = function (t) {
|
|
2166
|
+
const lab = [0, 1, 2].map(
|
|
2167
|
+
(i) =>
|
|
2168
|
+
(1 - t) * (1 - t) * lab0[i] +
|
|
2169
|
+
2 * (1 - t) * t * lab1[i] +
|
|
2170
|
+
t * t * lab2[i]
|
|
2171
|
+
);
|
|
2172
|
+
return new Color(lab, 'lab');
|
|
2173
|
+
};
|
|
2174
|
+
} else if (colors.length === 4) {
|
|
2175
|
+
// cubic bezier interpolation
|
|
2176
|
+
let lab3;
|
|
2177
|
+
[lab0, lab1, lab2, lab3] = colors.map((c) => c.lab());
|
|
2178
|
+
I = function (t) {
|
|
2179
|
+
const lab = [0, 1, 2].map(
|
|
2180
|
+
(i) =>
|
|
2181
|
+
(1 - t) * (1 - t) * (1 - t) * lab0[i] +
|
|
2182
|
+
3 * (1 - t) * (1 - t) * t * lab1[i] +
|
|
2183
|
+
3 * (1 - t) * t * t * lab2[i] +
|
|
2184
|
+
t * t * t * lab3[i]
|
|
2185
|
+
);
|
|
2186
|
+
return new Color(lab, 'lab');
|
|
2187
|
+
};
|
|
2188
|
+
} else if (colors.length >= 5) {
|
|
2189
|
+
// general case (degree n bezier)
|
|
2190
|
+
let labs, row, n;
|
|
2191
|
+
labs = colors.map((c) => c.lab());
|
|
2192
|
+
n = colors.length - 1;
|
|
2193
|
+
row = binom_row(n);
|
|
2194
|
+
I = function (t) {
|
|
2195
|
+
const u = 1 - t;
|
|
2196
|
+
const lab = [0, 1, 2].map((i) =>
|
|
2197
|
+
labs.reduce(
|
|
2198
|
+
(sum, el, j) =>
|
|
2199
|
+
sum + row[j] * u ** (n - j) * t ** j * el[i],
|
|
2200
|
+
0
|
|
2201
|
+
)
|
|
2202
|
+
);
|
|
2203
|
+
return new Color(lab, 'lab');
|
|
2204
|
+
};
|
|
2205
|
+
} else {
|
|
2206
|
+
throw new RangeError('No point in running bezier with only one color.');
|
|
2207
|
+
}
|
|
2208
|
+
return I;
|
|
2209
|
+
};
|
|
2210
|
+
|
|
2211
|
+
const bezier$1 = (colors) => {
|
|
2212
|
+
const f = bezier(colors);
|
|
2213
|
+
f.scale = () => scale(f);
|
|
2214
|
+
return f;
|
|
2215
|
+
};
|
|
2216
|
+
|
|
2217
|
+
const { round: round$3 } = Math;
|
|
2218
|
+
|
|
2219
|
+
Color.prototype.rgb = function (rnd = true) {
|
|
2220
|
+
if (rnd === false) return this._rgb.slice(0, 3);
|
|
2221
|
+
return this._rgb.slice(0, 3).map(round$3);
|
|
2222
|
+
};
|
|
2223
|
+
|
|
2224
|
+
Color.prototype.rgba = function (rnd = true) {
|
|
2225
|
+
return this._rgb.slice(0, 4).map((v, i) => {
|
|
2226
|
+
return i < 3 ? (rnd === false ? v : round$3(v)) : v;
|
|
2227
|
+
});
|
|
2228
|
+
};
|
|
2229
|
+
|
|
2230
|
+
const rgb = (...args) => new Color(...args, 'rgb');
|
|
2231
|
+
Object.assign(chroma, { rgb });
|
|
2232
|
+
|
|
2233
|
+
input.format.rgb = (...args) => {
|
|
2234
|
+
const rgba = unpack(args, 'rgba');
|
|
2235
|
+
if (rgba[3] === undefined) rgba[3] = 1;
|
|
2236
|
+
return rgba;
|
|
2237
|
+
};
|
|
2238
|
+
|
|
2239
|
+
input.autodetect.push({
|
|
2240
|
+
p: 3,
|
|
2241
|
+
test: (...args) => {
|
|
2242
|
+
args = unpack(args, 'rgba');
|
|
2243
|
+
if (
|
|
2244
|
+
type(args) === 'array' &&
|
|
2245
|
+
(args.length === 3 ||
|
|
2246
|
+
(args.length === 4 &&
|
|
2247
|
+
type(args[3]) == 'number' &&
|
|
2248
|
+
args[3] >= 0 &&
|
|
2249
|
+
args[3] <= 1))
|
|
2250
|
+
) {
|
|
2251
|
+
return 'rgb';
|
|
2252
|
+
}
|
|
2253
|
+
}
|
|
2254
|
+
});
|
|
2255
|
+
|
|
2256
|
+
/*
|
|
2257
|
+
* interpolates between a set of colors uzing a bezier spline
|
|
2258
|
+
* blend mode formulas taken from https://web.archive.org/web/20180110014946/http://www.venture-ware.com/kevin/coding/lets-learn-math-photoshop-blend-modes/
|
|
2259
|
+
*/
|
|
2260
|
+
|
|
2261
|
+
|
|
2262
|
+
const blend = (bottom, top, mode) => {
|
|
2263
|
+
if (!blend[mode]) {
|
|
2264
|
+
throw new Error('unknown blend mode ' + mode);
|
|
2265
|
+
}
|
|
2266
|
+
return blend[mode](bottom, top);
|
|
2267
|
+
};
|
|
2268
|
+
|
|
2269
|
+
const blend_f = (f) => (bottom, top) => {
|
|
2270
|
+
const c0 = chroma(top).rgb();
|
|
2271
|
+
const c1 = chroma(bottom).rgb();
|
|
2272
|
+
return chroma.rgb(f(c0, c1));
|
|
2273
|
+
};
|
|
2274
|
+
|
|
2275
|
+
const each = (f) => (c0, c1) => {
|
|
2276
|
+
const out = [];
|
|
2277
|
+
out[0] = f(c0[0], c1[0]);
|
|
2278
|
+
out[1] = f(c0[1], c1[1]);
|
|
2279
|
+
out[2] = f(c0[2], c1[2]);
|
|
2280
|
+
return out;
|
|
2281
|
+
};
|
|
2282
|
+
|
|
2283
|
+
const normal = (a) => a;
|
|
2284
|
+
const multiply = (a, b) => (a * b) / 255;
|
|
2285
|
+
const darken = (a, b) => (a > b ? b : a);
|
|
2286
|
+
const lighten = (a, b) => (a > b ? a : b);
|
|
2287
|
+
const screen = (a, b) => 255 * (1 - (1 - a / 255) * (1 - b / 255));
|
|
2288
|
+
const overlay = (a, b) =>
|
|
2289
|
+
b < 128 ? (2 * a * b) / 255 : 255 * (1 - 2 * (1 - a / 255) * (1 - b / 255));
|
|
2290
|
+
const burn = (a, b) => 255 * (1 - (1 - b / 255) / (a / 255));
|
|
2291
|
+
const dodge = (a, b) => {
|
|
2292
|
+
if (a === 255) return 255;
|
|
2293
|
+
a = (255 * (b / 255)) / (1 - a / 255);
|
|
2294
|
+
return a > 255 ? 255 : a;
|
|
2295
|
+
};
|
|
2296
|
+
|
|
2297
|
+
// # add = (a,b) ->
|
|
2298
|
+
// # if (a + b > 255) then 255 else a + b
|
|
2299
|
+
|
|
2300
|
+
blend.normal = blend_f(each(normal));
|
|
2301
|
+
blend.multiply = blend_f(each(multiply));
|
|
2302
|
+
blend.screen = blend_f(each(screen));
|
|
2303
|
+
blend.overlay = blend_f(each(overlay));
|
|
2304
|
+
blend.darken = blend_f(each(darken));
|
|
2305
|
+
blend.lighten = blend_f(each(lighten));
|
|
2306
|
+
blend.dodge = blend_f(each(dodge));
|
|
2307
|
+
blend.burn = blend_f(each(burn));
|
|
2308
|
+
|
|
2309
|
+
// cubehelix interpolation
|
|
2310
|
+
// based on D.A. Green "A colour scheme for the display of astronomical intensity images"
|
|
2311
|
+
// http://astron-soc.in/bulletin/11June/289392011.pdf
|
|
2312
|
+
const { pow: pow$2, sin: sin$1, cos: cos$1 } = Math;
|
|
2313
|
+
|
|
2314
|
+
function cubehelix (
|
|
2315
|
+
start = 300,
|
|
2316
|
+
rotations = -1.5,
|
|
2317
|
+
hue = 1,
|
|
2318
|
+
gamma = 1,
|
|
2319
|
+
lightness = [0, 1]
|
|
2320
|
+
) {
|
|
2321
|
+
let dh = 0,
|
|
2322
|
+
dl;
|
|
2323
|
+
if (type(lightness) === 'array') {
|
|
2324
|
+
dl = lightness[1] - lightness[0];
|
|
2325
|
+
} else {
|
|
2326
|
+
dl = 0;
|
|
2327
|
+
lightness = [lightness, lightness];
|
|
2328
|
+
}
|
|
2329
|
+
const f = function (fract) {
|
|
2330
|
+
const a = TWOPI * ((start + 120) / 360 + rotations * fract);
|
|
2331
|
+
const l = pow$2(lightness[0] + dl * fract, gamma);
|
|
2332
|
+
const h = dh !== 0 ? hue[0] + fract * dh : hue;
|
|
2333
|
+
const amp = (h * l * (1 - l)) / 2;
|
|
2334
|
+
const cos_a = cos$1(a);
|
|
2335
|
+
const sin_a = sin$1(a);
|
|
2336
|
+
const r = l + amp * (-0.14861 * cos_a + 1.78277 * sin_a);
|
|
2337
|
+
const g = l + amp * (-0.29227 * cos_a - 0.90649 * sin_a);
|
|
2338
|
+
const b = l + amp * (+1.97294 * cos_a);
|
|
2339
|
+
return chroma(clip_rgb([r * 255, g * 255, b * 255, 1]));
|
|
2340
|
+
};
|
|
2341
|
+
f.start = function (s) {
|
|
2342
|
+
if (s == null) {
|
|
2343
|
+
return start;
|
|
2344
|
+
}
|
|
2345
|
+
start = s;
|
|
2346
|
+
return f;
|
|
2347
|
+
};
|
|
2348
|
+
f.rotations = function (r) {
|
|
2349
|
+
if (r == null) {
|
|
2350
|
+
return rotations;
|
|
2351
|
+
}
|
|
2352
|
+
rotations = r;
|
|
2353
|
+
return f;
|
|
2354
|
+
};
|
|
2355
|
+
f.gamma = function (g) {
|
|
2356
|
+
if (g == null) {
|
|
2357
|
+
return gamma;
|
|
2358
|
+
}
|
|
2359
|
+
gamma = g;
|
|
2360
|
+
return f;
|
|
2361
|
+
};
|
|
2362
|
+
f.hue = function (h) {
|
|
2363
|
+
if (h == null) {
|
|
2364
|
+
return hue;
|
|
2365
|
+
}
|
|
2366
|
+
hue = h;
|
|
2367
|
+
if (type(hue) === 'array') {
|
|
2368
|
+
dh = hue[1] - hue[0];
|
|
2369
|
+
if (dh === 0) {
|
|
2370
|
+
hue = hue[1];
|
|
2371
|
+
}
|
|
2372
|
+
} else {
|
|
2373
|
+
dh = 0;
|
|
2374
|
+
}
|
|
2375
|
+
return f;
|
|
2376
|
+
};
|
|
2377
|
+
f.lightness = function (h) {
|
|
2378
|
+
if (h == null) {
|
|
2379
|
+
return lightness;
|
|
2380
|
+
}
|
|
2381
|
+
if (type(h) === 'array') {
|
|
2382
|
+
lightness = h;
|
|
2383
|
+
dl = h[1] - h[0];
|
|
2384
|
+
} else {
|
|
2385
|
+
lightness = [h, h];
|
|
2386
|
+
dl = 0;
|
|
2387
|
+
}
|
|
2388
|
+
return f;
|
|
2389
|
+
};
|
|
2390
|
+
f.scale = () => chroma.scale(f);
|
|
2391
|
+
f.hue(hue);
|
|
2392
|
+
return f;
|
|
2393
|
+
}
|
|
2394
|
+
|
|
2395
|
+
const digits = '0123456789abcdef';
|
|
2396
|
+
|
|
2397
|
+
const { floor: floor$1, random } = Math;
|
|
2398
|
+
|
|
2399
|
+
const random$1 = () => {
|
|
2400
|
+
let code = '#';
|
|
2401
|
+
for (let i = 0; i < 6; i++) {
|
|
2402
|
+
code += digits.charAt(floor$1(random() * 16));
|
|
2403
|
+
}
|
|
2404
|
+
return new Color(code, 'hex');
|
|
2405
|
+
};
|
|
2406
|
+
|
|
2407
|
+
const { log: log$1, pow: pow$1, floor, abs: abs$1 } = Math;
|
|
2408
|
+
|
|
2409
|
+
function analyze(data, key = null) {
|
|
2410
|
+
const r = {
|
|
2411
|
+
min: Number.MAX_VALUE,
|
|
2412
|
+
max: Number.MAX_VALUE * -1,
|
|
2413
|
+
sum: 0,
|
|
2414
|
+
values: [],
|
|
2415
|
+
count: 0
|
|
2416
|
+
};
|
|
2417
|
+
if (type(data) === 'object') {
|
|
2418
|
+
data = Object.values(data);
|
|
2419
|
+
}
|
|
2420
|
+
data.forEach((val) => {
|
|
2421
|
+
if (key && type(val) === 'object') val = val[key];
|
|
2422
|
+
if (val !== undefined && val !== null && !isNaN(val)) {
|
|
2423
|
+
r.values.push(val);
|
|
2424
|
+
r.sum += val;
|
|
2425
|
+
if (val < r.min) r.min = val;
|
|
2426
|
+
if (val > r.max) r.max = val;
|
|
2427
|
+
r.count += 1;
|
|
2428
|
+
}
|
|
2429
|
+
});
|
|
2430
|
+
|
|
2431
|
+
r.domain = [r.min, r.max];
|
|
2432
|
+
|
|
2433
|
+
r.limits = (mode, num) => limits(r, mode, num);
|
|
2434
|
+
|
|
2435
|
+
return r;
|
|
2436
|
+
}
|
|
2437
|
+
|
|
2438
|
+
function limits(data, mode = 'equal', num = 7) {
|
|
2439
|
+
if (type(data) == 'array') {
|
|
2440
|
+
data = analyze(data);
|
|
2441
|
+
}
|
|
2442
|
+
const { min, max } = data;
|
|
2443
|
+
const values = data.values.sort((a, b) => a - b);
|
|
2444
|
+
|
|
2445
|
+
if (num === 1) {
|
|
2446
|
+
return [min, max];
|
|
2447
|
+
}
|
|
2448
|
+
|
|
2449
|
+
const limits = [];
|
|
2450
|
+
|
|
2451
|
+
if (mode.substr(0, 1) === 'c') {
|
|
2452
|
+
// continuous
|
|
2453
|
+
limits.push(min);
|
|
2454
|
+
limits.push(max);
|
|
2455
|
+
}
|
|
2456
|
+
|
|
2457
|
+
if (mode.substr(0, 1) === 'e') {
|
|
2458
|
+
// equal interval
|
|
2459
|
+
limits.push(min);
|
|
2460
|
+
for (let i = 1; i < num; i++) {
|
|
2461
|
+
limits.push(min + (i / num) * (max - min));
|
|
2462
|
+
}
|
|
2463
|
+
limits.push(max);
|
|
2464
|
+
} else if (mode.substr(0, 1) === 'l') {
|
|
2465
|
+
// log scale
|
|
2466
|
+
if (min <= 0) {
|
|
2467
|
+
throw new Error(
|
|
2468
|
+
'Logarithmic scales are only possible for values > 0'
|
|
2469
|
+
);
|
|
2470
|
+
}
|
|
2471
|
+
const min_log = Math.LOG10E * log$1(min);
|
|
2472
|
+
const max_log = Math.LOG10E * log$1(max);
|
|
2473
|
+
limits.push(min);
|
|
2474
|
+
for (let i = 1; i < num; i++) {
|
|
2475
|
+
limits.push(pow$1(10, min_log + (i / num) * (max_log - min_log)));
|
|
2476
|
+
}
|
|
2477
|
+
limits.push(max);
|
|
2478
|
+
} else if (mode.substr(0, 1) === 'q') {
|
|
2479
|
+
// quantile scale
|
|
2480
|
+
limits.push(min);
|
|
2481
|
+
for (let i = 1; i < num; i++) {
|
|
2482
|
+
const p = ((values.length - 1) * i) / num;
|
|
2483
|
+
const pb = floor(p);
|
|
2484
|
+
if (pb === p) {
|
|
2485
|
+
limits.push(values[pb]);
|
|
2486
|
+
} else {
|
|
2487
|
+
// p > pb
|
|
2488
|
+
const pr = p - pb;
|
|
2489
|
+
limits.push(values[pb] * (1 - pr) + values[pb + 1] * pr);
|
|
2490
|
+
}
|
|
2491
|
+
}
|
|
2492
|
+
limits.push(max);
|
|
2493
|
+
} else if (mode.substr(0, 1) === 'k') {
|
|
2494
|
+
// k-means clustering
|
|
2495
|
+
/*
|
|
2496
|
+
implementation based on
|
|
2497
|
+
http://code.google.com/p/figue/source/browse/trunk/figue.js#336
|
|
2498
|
+
simplified for 1-d input values
|
|
2499
|
+
*/
|
|
2500
|
+
let cluster;
|
|
2501
|
+
const n = values.length;
|
|
2502
|
+
const assignments = new Array(n);
|
|
2503
|
+
const clusterSizes = new Array(num);
|
|
2504
|
+
let repeat = true;
|
|
2505
|
+
let nb_iters = 0;
|
|
2506
|
+
let centroids = null;
|
|
2507
|
+
|
|
2508
|
+
// get seed values
|
|
2509
|
+
centroids = [];
|
|
2510
|
+
centroids.push(min);
|
|
2511
|
+
for (let i = 1; i < num; i++) {
|
|
2512
|
+
centroids.push(min + (i / num) * (max - min));
|
|
2513
|
+
}
|
|
2514
|
+
centroids.push(max);
|
|
2515
|
+
|
|
2516
|
+
while (repeat) {
|
|
2517
|
+
// assignment step
|
|
2518
|
+
for (let j = 0; j < num; j++) {
|
|
2519
|
+
clusterSizes[j] = 0;
|
|
2520
|
+
}
|
|
2521
|
+
for (let i = 0; i < n; i++) {
|
|
2522
|
+
const value = values[i];
|
|
2523
|
+
let mindist = Number.MAX_VALUE;
|
|
2524
|
+
let best;
|
|
2525
|
+
for (let j = 0; j < num; j++) {
|
|
2526
|
+
const dist = abs$1(centroids[j] - value);
|
|
2527
|
+
if (dist < mindist) {
|
|
2528
|
+
mindist = dist;
|
|
2529
|
+
best = j;
|
|
2530
|
+
}
|
|
2531
|
+
clusterSizes[best]++;
|
|
2532
|
+
assignments[i] = best;
|
|
2533
|
+
}
|
|
2534
|
+
}
|
|
2535
|
+
|
|
2536
|
+
// update centroids step
|
|
2537
|
+
const newCentroids = new Array(num);
|
|
2538
|
+
for (let j = 0; j < num; j++) {
|
|
2539
|
+
newCentroids[j] = null;
|
|
2540
|
+
}
|
|
2541
|
+
for (let i = 0; i < n; i++) {
|
|
2542
|
+
cluster = assignments[i];
|
|
2543
|
+
if (newCentroids[cluster] === null) {
|
|
2544
|
+
newCentroids[cluster] = values[i];
|
|
2545
|
+
} else {
|
|
2546
|
+
newCentroids[cluster] += values[i];
|
|
2547
|
+
}
|
|
2548
|
+
}
|
|
2549
|
+
for (let j = 0; j < num; j++) {
|
|
2550
|
+
newCentroids[j] *= 1 / clusterSizes[j];
|
|
2551
|
+
}
|
|
2552
|
+
|
|
2553
|
+
// check convergence
|
|
2554
|
+
repeat = false;
|
|
2555
|
+
for (let j = 0; j < num; j++) {
|
|
2556
|
+
if (newCentroids[j] !== centroids[j]) {
|
|
2557
|
+
repeat = true;
|
|
2558
|
+
break;
|
|
2559
|
+
}
|
|
2560
|
+
}
|
|
2561
|
+
|
|
2562
|
+
centroids = newCentroids;
|
|
2563
|
+
nb_iters++;
|
|
2564
|
+
|
|
2565
|
+
if (nb_iters > 200) {
|
|
2566
|
+
repeat = false;
|
|
2567
|
+
}
|
|
2568
|
+
}
|
|
2569
|
+
|
|
2570
|
+
// finished k-means clustering
|
|
2571
|
+
// the next part is borrowed from gabrielflor.it
|
|
2572
|
+
const kClusters = {};
|
|
2573
|
+
for (let j = 0; j < num; j++) {
|
|
2574
|
+
kClusters[j] = [];
|
|
2575
|
+
}
|
|
2576
|
+
for (let i = 0; i < n; i++) {
|
|
2577
|
+
cluster = assignments[i];
|
|
2578
|
+
kClusters[cluster].push(values[i]);
|
|
2579
|
+
}
|
|
2580
|
+
let tmpKMeansBreaks = [];
|
|
2581
|
+
for (let j = 0; j < num; j++) {
|
|
2582
|
+
tmpKMeansBreaks.push(kClusters[j][0]);
|
|
2583
|
+
tmpKMeansBreaks.push(kClusters[j][kClusters[j].length - 1]);
|
|
2584
|
+
}
|
|
2585
|
+
tmpKMeansBreaks = tmpKMeansBreaks.sort((a, b) => a - b);
|
|
2586
|
+
limits.push(tmpKMeansBreaks[0]);
|
|
2587
|
+
for (let i = 1; i < tmpKMeansBreaks.length; i += 2) {
|
|
2588
|
+
const v = tmpKMeansBreaks[i];
|
|
2589
|
+
if (!isNaN(v) && limits.indexOf(v) === -1) {
|
|
2590
|
+
limits.push(v);
|
|
2591
|
+
}
|
|
2592
|
+
}
|
|
2593
|
+
}
|
|
2594
|
+
return limits;
|
|
2595
|
+
}
|
|
2596
|
+
|
|
2597
|
+
const contrast = (a, b) => {
|
|
2598
|
+
// WCAG contrast ratio
|
|
2599
|
+
// see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
|
|
2600
|
+
a = new Color(a);
|
|
2601
|
+
b = new Color(b);
|
|
2602
|
+
const l1 = a.luminance();
|
|
2603
|
+
const l2 = b.luminance();
|
|
2604
|
+
return l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
|
|
2605
|
+
};
|
|
2606
|
+
|
|
2607
|
+
const { sqrt, pow, min, max: max$1, atan2, abs, cos, sin, exp, PI } = Math;
|
|
2608
|
+
|
|
2609
|
+
function deltaE (a, b, Kl = 1, Kc = 1, Kh = 1) {
|
|
2610
|
+
// Delta E (CIE 2000)
|
|
2611
|
+
// see http://www.brucelindbloom.com/index.html?Eqn_DeltaE_CIE2000.html
|
|
2612
|
+
var rad2deg = function (rad) {
|
|
2613
|
+
return (360 * rad) / (2 * PI);
|
|
2614
|
+
};
|
|
2615
|
+
var deg2rad = function (deg) {
|
|
2616
|
+
return (2 * PI * deg) / 360;
|
|
2617
|
+
};
|
|
2618
|
+
a = new Color(a);
|
|
2619
|
+
b = new Color(b);
|
|
2620
|
+
const [L1, a1, b1] = Array.from(a.lab());
|
|
2621
|
+
const [L2, a2, b2] = Array.from(b.lab());
|
|
2622
|
+
const avgL = (L1 + L2) / 2;
|
|
2623
|
+
const C1 = sqrt(pow(a1, 2) + pow(b1, 2));
|
|
2624
|
+
const C2 = sqrt(pow(a2, 2) + pow(b2, 2));
|
|
2625
|
+
const avgC = (C1 + C2) / 2;
|
|
2626
|
+
const G = 0.5 * (1 - sqrt(pow(avgC, 7) / (pow(avgC, 7) + pow(25, 7))));
|
|
2627
|
+
const a1p = a1 * (1 + G);
|
|
2628
|
+
const a2p = a2 * (1 + G);
|
|
2629
|
+
const C1p = sqrt(pow(a1p, 2) + pow(b1, 2));
|
|
2630
|
+
const C2p = sqrt(pow(a2p, 2) + pow(b2, 2));
|
|
2631
|
+
const avgCp = (C1p + C2p) / 2;
|
|
2632
|
+
const arctan1 = rad2deg(atan2(b1, a1p));
|
|
2633
|
+
const arctan2 = rad2deg(atan2(b2, a2p));
|
|
2634
|
+
const h1p = arctan1 >= 0 ? arctan1 : arctan1 + 360;
|
|
2635
|
+
const h2p = arctan2 >= 0 ? arctan2 : arctan2 + 360;
|
|
2636
|
+
const avgHp =
|
|
2637
|
+
abs(h1p - h2p) > 180 ? (h1p + h2p + 360) / 2 : (h1p + h2p) / 2;
|
|
2638
|
+
const T =
|
|
2639
|
+
1 -
|
|
2640
|
+
0.17 * cos(deg2rad(avgHp - 30)) +
|
|
2641
|
+
0.24 * cos(deg2rad(2 * avgHp)) +
|
|
2642
|
+
0.32 * cos(deg2rad(3 * avgHp + 6)) -
|
|
2643
|
+
0.2 * cos(deg2rad(4 * avgHp - 63));
|
|
2644
|
+
let deltaHp = h2p - h1p;
|
|
2645
|
+
deltaHp =
|
|
2646
|
+
abs(deltaHp) <= 180
|
|
2647
|
+
? deltaHp
|
|
2648
|
+
: h2p <= h1p
|
|
2649
|
+
? deltaHp + 360
|
|
2650
|
+
: deltaHp - 360;
|
|
2651
|
+
deltaHp = 2 * sqrt(C1p * C2p) * sin(deg2rad(deltaHp) / 2);
|
|
2652
|
+
const deltaL = L2 - L1;
|
|
2653
|
+
const deltaCp = C2p - C1p;
|
|
2654
|
+
const sl = 1 + (0.015 * pow(avgL - 50, 2)) / sqrt(20 + pow(avgL - 50, 2));
|
|
2655
|
+
const sc = 1 + 0.045 * avgCp;
|
|
2656
|
+
const sh = 1 + 0.015 * avgCp * T;
|
|
2657
|
+
const deltaTheta = 30 * exp(-pow((avgHp - 275) / 25, 2));
|
|
2658
|
+
const Rc = 2 * sqrt(pow(avgCp, 7) / (pow(avgCp, 7) + pow(25, 7)));
|
|
2659
|
+
const Rt = -Rc * sin(2 * deg2rad(deltaTheta));
|
|
2660
|
+
const result = sqrt(
|
|
2661
|
+
pow(deltaL / (Kl * sl), 2) +
|
|
2662
|
+
pow(deltaCp / (Kc * sc), 2) +
|
|
2663
|
+
pow(deltaHp / (Kh * sh), 2) +
|
|
2664
|
+
Rt * (deltaCp / (Kc * sc)) * (deltaHp / (Kh * sh))
|
|
2665
|
+
);
|
|
2666
|
+
return max$1(0, min(100, result));
|
|
2667
|
+
}
|
|
2668
|
+
|
|
2669
|
+
// simple Euclidean distance
|
|
2670
|
+
function distance (a, b, mode = 'lab') {
|
|
2671
|
+
// Delta E (CIE 1976)
|
|
2672
|
+
// see http://www.brucelindbloom.com/index.html?Equations.html
|
|
2673
|
+
a = new Color(a);
|
|
2674
|
+
b = new Color(b);
|
|
2675
|
+
const l1 = a.get(mode);
|
|
2676
|
+
const l2 = b.get(mode);
|
|
2677
|
+
let sum_sq = 0;
|
|
2678
|
+
for (let i in l1) {
|
|
2679
|
+
const d = (l1[i] || 0) - (l2[i] || 0);
|
|
2680
|
+
sum_sq += d * d;
|
|
2681
|
+
}
|
|
2682
|
+
return Math.sqrt(sum_sq);
|
|
2683
|
+
}
|
|
2684
|
+
|
|
2685
|
+
const valid = (...args) => {
|
|
2686
|
+
try {
|
|
2687
|
+
new Color(...args);
|
|
2688
|
+
return true;
|
|
2689
|
+
// eslint-disable-next-line
|
|
2690
|
+
} catch (e) {
|
|
2691
|
+
return false;
|
|
2692
|
+
}
|
|
2693
|
+
};
|
|
2694
|
+
|
|
2695
|
+
// some pre-defined color scales:
|
|
2696
|
+
|
|
2697
|
+
const scales = {
|
|
2698
|
+
cool() {
|
|
2699
|
+
return scale([chroma.hsl(180, 1, 0.9), chroma.hsl(250, 0.7, 0.4)]);
|
|
2700
|
+
},
|
|
2701
|
+
hot() {
|
|
2702
|
+
return scale(['#000', '#f00', '#ff0', '#fff']).mode(
|
|
2703
|
+
'rgb'
|
|
2704
|
+
);
|
|
2705
|
+
}
|
|
2706
|
+
};
|
|
2707
|
+
|
|
2708
|
+
/**
|
|
2709
|
+
ColorBrewer colors for chroma.js
|
|
2710
|
+
|
|
2711
|
+
Copyright (c) 2002 Cynthia Brewer, Mark Harrower, and The
|
|
2712
|
+
Pennsylvania State University.
|
|
2713
|
+
|
|
2714
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
2715
|
+
you may not use this file except in compliance with the License.
|
|
2716
|
+
You may obtain a copy of the License at
|
|
2717
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
2718
|
+
|
|
2719
|
+
Unless required by applicable law or agreed to in writing, software distributed
|
|
2720
|
+
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
|
|
2721
|
+
CONDITIONS OF ANY KIND, either express or implied. See the License for the
|
|
2722
|
+
specific language governing permissions and limitations under the License.
|
|
2723
|
+
*/
|
|
2724
|
+
|
|
2725
|
+
const colorbrewer = {
|
|
2726
|
+
// sequential
|
|
2727
|
+
OrRd: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
|
|
2728
|
+
PuBu: ['#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#045a8d', '#023858'],
|
|
2729
|
+
BuPu: ['#f7fcfd', '#e0ecf4', '#bfd3e6', '#9ebcda', '#8c96c6', '#8c6bb1', '#88419d', '#810f7c', '#4d004b'],
|
|
2730
|
+
Oranges: ['#fff5eb', '#fee6ce', '#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801', '#a63603', '#7f2704'],
|
|
2731
|
+
BuGn: ['#f7fcfd', '#e5f5f9', '#ccece6', '#99d8c9', '#66c2a4', '#41ae76', '#238b45', '#006d2c', '#00441b'],
|
|
2732
|
+
YlOrBr: ['#ffffe5', '#fff7bc', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#993404', '#662506'],
|
|
2733
|
+
YlGn: ['#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#006837', '#004529'],
|
|
2734
|
+
Reds: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
|
|
2735
|
+
RdPu: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
|
|
2736
|
+
Greens: ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'],
|
|
2737
|
+
YlGnBu: ['#ffffd9', '#edf8b1', '#c7e9b4', '#7fcdbb', '#41b6c4', '#1d91c0', '#225ea8', '#253494', '#081d58'],
|
|
2738
|
+
Purples: ['#fcfbfd', '#efedf5', '#dadaeb', '#bcbddc', '#9e9ac8', '#807dba', '#6a51a3', '#54278f', '#3f007d'],
|
|
2739
|
+
GnBu: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081'],
|
|
2740
|
+
Greys: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'],
|
|
2741
|
+
YlOrRd: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
|
|
2742
|
+
PuRd: ['#f7f4f9', '#e7e1ef', '#d4b9da', '#c994c7', '#df65b0', '#e7298a', '#ce1256', '#980043', '#67001f'],
|
|
2743
|
+
Blues: ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'],
|
|
2744
|
+
PuBuGn: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
|
|
2745
|
+
Viridis: ['#440154', '#482777', '#3f4a8a', '#31678e', '#26838f', '#1f9d8a', '#6cce5a', '#b6de2b', '#fee825'],
|
|
2746
|
+
|
|
2747
|
+
// diverging
|
|
2748
|
+
Spectral: ['#9e0142', '#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#e6f598', '#abdda4', '#66c2a5', '#3288bd', '#5e4fa2'],
|
|
2749
|
+
RdYlGn: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850', '#006837'],
|
|
2750
|
+
RdBu: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
|
|
2751
|
+
PiYG: ['#8e0152', '#c51b7d', '#de77ae', '#f1b6da', '#fde0ef', '#f7f7f7', '#e6f5d0', '#b8e186', '#7fbc41', '#4d9221', '#276419'],
|
|
2752
|
+
PRGn: ['#40004b', '#762a83', '#9970ab', '#c2a5cf', '#e7d4e8', '#f7f7f7', '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837', '#00441b'],
|
|
2753
|
+
RdYlBu: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee090', '#ffffbf', '#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'],
|
|
2754
|
+
BrBG: ['#543005', '#8c510a', '#bf812d', '#dfc27d', '#f6e8c3', '#f5f5f5', '#c7eae5', '#80cdc1', '#35978f', '#01665e', '#003c30'],
|
|
2755
|
+
RdGy: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a'],
|
|
2756
|
+
PuOr: ['#7f3b08', '#b35806', '#e08214', '#fdb863', '#fee0b6', '#f7f7f7', '#d8daeb', '#b2abd2', '#8073ac', '#542788', '#2d004b'],
|
|
2757
|
+
|
|
2758
|
+
// qualitative
|
|
2759
|
+
Set2: ['#66c2a5', '#fc8d62', '#8da0cb', '#e78ac3', '#a6d854', '#ffd92f', '#e5c494', '#b3b3b3'],
|
|
2760
|
+
Accent: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0', '#f0027f', '#bf5b17', '#666666'],
|
|
2761
|
+
Set1: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999'],
|
|
2762
|
+
Set3: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f'],
|
|
2763
|
+
Dark2: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666666'],
|
|
2764
|
+
Paired: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'],
|
|
2765
|
+
Pastel2: ['#b3e2cd', '#fdcdac', '#cbd5e8', '#f4cae4', '#e6f5c9', '#fff2ae', '#f1e2cc', '#cccccc'],
|
|
2766
|
+
Pastel1: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc', '#e5d8bd', '#fddaec', '#f2f2f2']
|
|
2767
|
+
};
|
|
2768
|
+
|
|
2769
|
+
// add lowercase aliases for case-insensitive matches
|
|
2770
|
+
for (let key of Object.keys(colorbrewer)) {
|
|
2771
|
+
colorbrewer[key.toLowerCase()] = colorbrewer[key];
|
|
2772
|
+
}
|
|
2773
|
+
|
|
2774
|
+
const cmyk2rgb = (...args) => {
|
|
2775
|
+
args = unpack(args, 'cmyk');
|
|
2776
|
+
const [c, m, y, k] = args;
|
|
2777
|
+
const alpha = args.length > 4 ? args[4] : 1;
|
|
2778
|
+
if (k === 1) return [0, 0, 0, alpha];
|
|
2779
|
+
return [
|
|
2780
|
+
c >= 1 ? 0 : 255 * (1 - c) * (1 - k), // r
|
|
2781
|
+
m >= 1 ? 0 : 255 * (1 - m) * (1 - k), // g
|
|
2782
|
+
y >= 1 ? 0 : 255 * (1 - y) * (1 - k), // b
|
|
2783
|
+
alpha
|
|
2784
|
+
];
|
|
2785
|
+
};
|
|
2786
|
+
|
|
2787
|
+
const { max } = Math;
|
|
2788
|
+
|
|
2789
|
+
const rgb2cmyk = (...args) => {
|
|
2790
|
+
let [r, g, b] = unpack(args, 'rgb');
|
|
2791
|
+
r = r / 255;
|
|
2792
|
+
g = g / 255;
|
|
2793
|
+
b = b / 255;
|
|
2794
|
+
const k = 1 - max(r, max(g, b));
|
|
2795
|
+
const f = k < 1 ? 1 / (1 - k) : 0;
|
|
2796
|
+
const c = (1 - r - k) * f;
|
|
2797
|
+
const m = (1 - g - k) * f;
|
|
2798
|
+
const y = (1 - b - k) * f;
|
|
2799
|
+
return [c, m, y, k];
|
|
2800
|
+
};
|
|
2801
|
+
|
|
2802
|
+
Color.prototype.cmyk = function () {
|
|
2803
|
+
return rgb2cmyk(this._rgb);
|
|
2804
|
+
};
|
|
2805
|
+
|
|
2806
|
+
const cmyk = (...args) => new Color(...args, 'cmyk');
|
|
2807
|
+
Object.assign(chroma, { cmyk });
|
|
2808
|
+
|
|
2809
|
+
input.format.cmyk = cmyk2rgb;
|
|
2810
|
+
|
|
2811
|
+
input.autodetect.push({
|
|
2812
|
+
p: 2,
|
|
2813
|
+
test: (...args) => {
|
|
2814
|
+
args = unpack(args, 'cmyk');
|
|
2815
|
+
if (type(args) === 'array' && args.length === 4) {
|
|
2816
|
+
return 'cmyk';
|
|
2817
|
+
}
|
|
2818
|
+
}
|
|
2819
|
+
});
|
|
2820
|
+
|
|
2821
|
+
/*
|
|
2822
|
+
* supported arguments:
|
|
2823
|
+
* - hsl2css(h,s,l)
|
|
2824
|
+
* - hsl2css(h,s,l,a)
|
|
2825
|
+
* - hsl2css([h,s,l], mode)
|
|
2826
|
+
* - hsl2css([h,s,l,a], mode)
|
|
2827
|
+
* - hsl2css({h,s,l,a}, mode)
|
|
2828
|
+
*/
|
|
2829
|
+
const hsl2css = (...args) => {
|
|
2830
|
+
const hsla = unpack(args, 'hsla');
|
|
2831
|
+
let mode = last(args) || 'lsa';
|
|
2832
|
+
hsla[0] = rnd2(hsla[0] || 0) + 'deg';
|
|
2833
|
+
hsla[1] = rnd2(hsla[1] * 100) + '%';
|
|
2834
|
+
hsla[2] = rnd2(hsla[2] * 100) + '%';
|
|
2835
|
+
if (mode === 'hsla' || (hsla.length > 3 && hsla[3] < 1)) {
|
|
2836
|
+
hsla[3] = '/ ' + (hsla.length > 3 ? hsla[3] : 1);
|
|
2837
|
+
mode = 'hsla';
|
|
2838
|
+
} else {
|
|
2839
|
+
hsla.length = 3;
|
|
2840
|
+
}
|
|
2841
|
+
return `${mode.substr(0, 3)}(${hsla.join(' ')})`;
|
|
2842
|
+
};
|
|
2843
|
+
|
|
2844
|
+
/*
|
|
2845
|
+
* supported arguments:
|
|
2846
|
+
* - lab2css(l,a,b)
|
|
2847
|
+
* - lab2css(l,a,b,alpha)
|
|
2848
|
+
* - lab2css([l,a,b], mode)
|
|
2849
|
+
* - lab2css([l,a,b,alpha], mode)
|
|
2850
|
+
*/
|
|
2851
|
+
const lab2css = (...args) => {
|
|
2852
|
+
const laba = unpack(args, 'lab');
|
|
2853
|
+
let mode = last(args) || 'lab';
|
|
2854
|
+
laba[0] = rnd2(laba[0]) + '%';
|
|
2855
|
+
laba[1] = rnd2(laba[1]);
|
|
2856
|
+
laba[2] = rnd2(laba[2]);
|
|
2857
|
+
if (mode === 'laba' || (laba.length > 3 && laba[3] < 1)) {
|
|
2858
|
+
laba[3] = '/ ' + (laba.length > 3 ? laba[3] : 1);
|
|
2859
|
+
} else {
|
|
2860
|
+
laba.length = 3;
|
|
2861
|
+
}
|
|
2862
|
+
return `lab(${laba.join(' ')})`;
|
|
2863
|
+
};
|
|
2864
|
+
|
|
2865
|
+
/*
|
|
2866
|
+
* supported arguments:
|
|
2867
|
+
* - lab2css(l,a,b)
|
|
2868
|
+
* - lab2css(l,a,b,alpha)
|
|
2869
|
+
* - lab2css([l,a,b], mode)
|
|
2870
|
+
* - lab2css([l,a,b,alpha], mode)
|
|
2871
|
+
*/
|
|
2872
|
+
const lch2css = (...args) => {
|
|
2873
|
+
const lcha = unpack(args, 'lch');
|
|
2874
|
+
let mode = last(args) || 'lab';
|
|
2875
|
+
lcha[0] = rnd2(lcha[0]) + '%';
|
|
2876
|
+
lcha[1] = rnd2(lcha[1]);
|
|
2877
|
+
lcha[2] = rnd2(lcha[2]) + 'deg'; // add deg unit to hue
|
|
2878
|
+
if (mode === 'lcha' || (lcha.length > 3 && lcha[3] < 1)) {
|
|
2879
|
+
lcha[3] = '/ ' + (lcha.length > 3 ? lcha[3] : 1);
|
|
2880
|
+
} else {
|
|
2881
|
+
lcha.length = 3;
|
|
2882
|
+
}
|
|
2883
|
+
return `lch(${lcha.join(' ')})`;
|
|
2884
|
+
};
|
|
2885
|
+
|
|
2886
|
+
const oklab2css$1 = (...args) => {
|
|
2887
|
+
const laba = unpack(args, 'lab');
|
|
2888
|
+
laba[0] = rnd2(laba[0] * 100) + '%';
|
|
2889
|
+
laba[1] = rnd3(laba[1]);
|
|
2890
|
+
laba[2] = rnd3(laba[2]);
|
|
2891
|
+
if (laba.length > 3 && laba[3] < 1) {
|
|
2892
|
+
laba[3] = '/ ' + (laba.length > 3 ? laba[3] : 1);
|
|
2893
|
+
} else {
|
|
2894
|
+
laba.length = 3;
|
|
2895
|
+
}
|
|
2896
|
+
return `oklab(${laba.join(' ')})`;
|
|
2897
|
+
};
|
|
2898
|
+
|
|
2899
|
+
const rgb2oklch = (...args) => {
|
|
2900
|
+
const [r, g, b, ...rest] = unpack(args, 'rgb');
|
|
2901
|
+
const [l, a, b_] = rgb2oklab(r, g, b);
|
|
2902
|
+
const [L, c, h] = lab2lch(l, a, b_);
|
|
2903
|
+
return [L, c, h, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
|
|
2904
|
+
};
|
|
2905
|
+
|
|
2906
|
+
const oklab2css = (...args) => {
|
|
2907
|
+
const laba = unpack(args, 'lab');
|
|
2908
|
+
laba[0] = rnd2(laba[0] * 100) + '%';
|
|
2909
|
+
laba[1] = rnd3(laba[1]);
|
|
2910
|
+
laba[2] = rnd2(laba[2]) + 'deg';
|
|
2911
|
+
if (laba.length > 3 && laba[3] < 1) {
|
|
2912
|
+
laba[3] = '/ ' + (laba.length > 3 ? laba[3] : 1);
|
|
2913
|
+
} else {
|
|
2914
|
+
laba.length = 3;
|
|
2915
|
+
}
|
|
2916
|
+
return `oklch(${laba.join(' ')})`;
|
|
2917
|
+
};
|
|
2918
|
+
|
|
2919
|
+
const { round: round$2 } = Math;
|
|
2920
|
+
|
|
2921
|
+
/*
|
|
2922
|
+
* supported arguments:
|
|
2923
|
+
* - rgb2css(r,g,b)
|
|
2924
|
+
* - rgb2css(r,g,b,a)
|
|
2925
|
+
* - rgb2css([r,g,b], mode)
|
|
2926
|
+
* - rgb2css([r,g,b,a], mode)
|
|
2927
|
+
* - rgb2css({r,g,b,a}, mode)
|
|
2928
|
+
*/
|
|
2929
|
+
const rgb2css = (...args) => {
|
|
2930
|
+
const rgba = unpack(args, 'rgba');
|
|
2931
|
+
let mode = last(args) || 'rgb';
|
|
2932
|
+
if (mode.substr(0, 3) === 'hsl') {
|
|
2933
|
+
return hsl2css(rgb2hsl$1(rgba), mode);
|
|
2934
|
+
}
|
|
2935
|
+
if (mode.substr(0, 3) === 'lab') {
|
|
2936
|
+
// change to D50 lab whitepoint since this is what W3C is using for CSS Lab colors
|
|
2937
|
+
const prevWhitePoint = getLabWhitePoint();
|
|
2938
|
+
setLabWhitePoint('d50');
|
|
2939
|
+
const cssColor = lab2css(rgb2lab(rgba), mode);
|
|
2940
|
+
setLabWhitePoint(prevWhitePoint);
|
|
2941
|
+
return cssColor;
|
|
2942
|
+
}
|
|
2943
|
+
if (mode.substr(0, 3) === 'lch') {
|
|
2944
|
+
// change to D50 lab whitepoint since this is what W3C is using for CSS Lab colors
|
|
2945
|
+
const prevWhitePoint = getLabWhitePoint();
|
|
2946
|
+
setLabWhitePoint('d50');
|
|
2947
|
+
const cssColor = lch2css(rgb2lch(rgba), mode);
|
|
2948
|
+
setLabWhitePoint(prevWhitePoint);
|
|
2949
|
+
return cssColor;
|
|
2950
|
+
}
|
|
2951
|
+
if (mode.substr(0, 5) === 'oklab') {
|
|
2952
|
+
return oklab2css$1(rgb2oklab(rgba));
|
|
2953
|
+
}
|
|
2954
|
+
if (mode.substr(0, 5) === 'oklch') {
|
|
2955
|
+
return oklab2css(rgb2oklch(rgba));
|
|
2956
|
+
}
|
|
2957
|
+
rgba[0] = round$2(rgba[0]);
|
|
2958
|
+
rgba[1] = round$2(rgba[1]);
|
|
2959
|
+
rgba[2] = round$2(rgba[2]);
|
|
2960
|
+
if (mode === 'rgba' || (rgba.length > 3 && rgba[3] < 1)) {
|
|
2961
|
+
rgba[3] = '/ ' + (rgba.length > 3 ? rgba[3] : 1);
|
|
2962
|
+
mode = 'rgba';
|
|
2963
|
+
}
|
|
2964
|
+
return `${mode.substr(0, 3)}(${rgba.slice(0, mode === 'rgb' ? 3 : 4).join(' ')})`;
|
|
2965
|
+
};
|
|
2966
|
+
|
|
2967
|
+
const oklch2rgb = (...args) => {
|
|
2968
|
+
args = unpack(args, 'lch');
|
|
2969
|
+
const [l, c, h, ...rest] = args;
|
|
2970
|
+
const [L, a, b_] = lch2lab(l, c, h);
|
|
2971
|
+
const [r, g, b] = oklab2rgb(L, a, b_);
|
|
2972
|
+
return [r, g, b, ...(rest.length > 0 && rest[0] < 1 ? [rest[0]] : [])];
|
|
2973
|
+
};
|
|
2974
|
+
|
|
2975
|
+
const RE_RGB = /^rgb\(\s*(-?\d+) \s*(-?\d+)\s* \s*(-?\d+)\s*\)$/;
|
|
2976
|
+
const RE_RGB_LEGACY = /^rgb\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*\)$/;
|
|
2977
|
+
|
|
2978
|
+
const RE_RGBA =
|
|
2979
|
+
/^rgba?\(\s*(-?\d+) \s*(-?\d+)\s* \s*(-?\d+)\s*\/\s*([01]|[01]?\.\d+)\)$/;
|
|
2980
|
+
const RE_RGBA_LEGACY =
|
|
2981
|
+
/^rgba\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*,\s*([01]|[01]?\.\d+)\)$/;
|
|
2982
|
+
|
|
2983
|
+
const RE_RGB_PCT =
|
|
2984
|
+
/^rgb\(\s*(-?\d+(?:\.\d+)?)% \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\)$/;
|
|
2985
|
+
const RE_RGB_PCT_LEGACY =
|
|
2986
|
+
/^rgb\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;
|
|
2987
|
+
|
|
2988
|
+
const RE_RGBA_PCT =
|
|
2989
|
+
/^rgba?\(\s*(-?\d+(?:\.\d+)?)% \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\/\s*([01]|[01]?\.\d+)\)$/;
|
|
2990
|
+
const RE_RGBA_PCT_LEGACY =
|
|
2991
|
+
/^rgba\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;
|
|
2992
|
+
|
|
2993
|
+
const RE_HSL =
|
|
2994
|
+
/^hsl\(\s*(-?\d+(?:\.\d+)?)deg \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\)$/;
|
|
2995
|
+
const RE_HSL_LEGACY =
|
|
2996
|
+
/^hsl\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/;
|
|
2997
|
+
|
|
2998
|
+
const RE_HSLA =
|
|
2999
|
+
/^hsla?\(\s*(-?\d+(?:\.\d+)?)deg \s*(-?\d+(?:\.\d+)?)%\s* \s*(-?\d+(?:\.\d+)?)%\s*\/\s*([01]|[01]?\.\d+)\)$/;
|
|
3000
|
+
const RE_HSLA_LEGACY =
|
|
3001
|
+
/^hsla\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/;
|
|
3002
|
+
|
|
3003
|
+
const RE_LAB =
|
|
3004
|
+
/^lab\(\s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
|
|
3005
|
+
const RE_LCH =
|
|
3006
|
+
/^lch\(\s*(-?\d+(?:\.\d+)?%?) \s*((?:-?\d+(?:\.\d+)?%?)|none) \s*(-?\d+(?:\.\d+)?(?:deg)?|none)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
|
|
3007
|
+
const RE_OKLAB =
|
|
3008
|
+
/^oklab\(\s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?) \s*(-?\d+(?:\.\d+)?%?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
|
|
3009
|
+
const RE_OKLCH =
|
|
3010
|
+
/^oklch\(\s*(-?\d+(?:\.\d+)?%?) \s*(?:(-?\d+(?:\.\d+)?%?)|none) \s*(-?\d+(?:\.\d+)?(?:deg)?|none)\s*(?:\/\s*(\d+(?:\.\d+)?))?\)?$/;
|
|
3011
|
+
|
|
3012
|
+
const { round: round$1 } = Math;
|
|
3013
|
+
|
|
3014
|
+
const roundRGB = (rgb) => {
|
|
3015
|
+
return rgb.map((v, i) => (i <= 2 ? limit(round$1(v), 0, 255) : v));
|
|
3016
|
+
};
|
|
3017
|
+
|
|
3018
|
+
const percentToAbsolute = (pct, min = 0, max = 100, signed = false) => {
|
|
3019
|
+
if (typeof pct === 'string' && pct.endsWith('%')) {
|
|
3020
|
+
pct = parseFloat(pct.substring(0, pct.length - 1)) / 100;
|
|
3021
|
+
if (signed) {
|
|
3022
|
+
// signed percentages are in the range -100% to 100%
|
|
3023
|
+
pct = min + (pct + 1) * 0.5 * (max - min);
|
|
3024
|
+
} else {
|
|
3025
|
+
pct = min + pct * (max - min);
|
|
3026
|
+
}
|
|
3027
|
+
}
|
|
3028
|
+
return +pct;
|
|
3029
|
+
};
|
|
3030
|
+
|
|
3031
|
+
const noneToValue = (v, noneValue) => {
|
|
3032
|
+
return v === 'none' ? noneValue : v;
|
|
3033
|
+
};
|
|
3034
|
+
|
|
3035
|
+
const css2rgb = (css) => {
|
|
3036
|
+
css = css.toLowerCase().trim();
|
|
3037
|
+
let m;
|
|
3038
|
+
|
|
3039
|
+
if (input.format.named) {
|
|
3040
|
+
try {
|
|
3041
|
+
return input.format.named(css);
|
|
3042
|
+
// eslint-disable-next-line
|
|
3043
|
+
} catch (e) {}
|
|
3044
|
+
}
|
|
3045
|
+
|
|
3046
|
+
// rgb(250 20 0) or rgb(250,20,0)
|
|
3047
|
+
if ((m = css.match(RE_RGB)) || (m = css.match(RE_RGB_LEGACY))) {
|
|
3048
|
+
const rgb = m.slice(1, 4);
|
|
3049
|
+
for (let i = 0; i < 3; i++) {
|
|
3050
|
+
rgb[i] = +rgb[i];
|
|
3051
|
+
}
|
|
3052
|
+
rgb[3] = 1; // default alpha
|
|
3053
|
+
return rgb;
|
|
3054
|
+
}
|
|
3055
|
+
|
|
3056
|
+
// rgba(250,20,0,0.4)
|
|
3057
|
+
if ((m = css.match(RE_RGBA)) || (m = css.match(RE_RGBA_LEGACY))) {
|
|
3058
|
+
const rgb = m.slice(1, 5);
|
|
3059
|
+
for (let i = 0; i < 4; i++) {
|
|
3060
|
+
rgb[i] = +rgb[i];
|
|
3061
|
+
}
|
|
3062
|
+
return rgb;
|
|
3063
|
+
}
|
|
3064
|
+
|
|
3065
|
+
// rgb(100%,0%,0%)
|
|
3066
|
+
if ((m = css.match(RE_RGB_PCT)) || (m = css.match(RE_RGB_PCT_LEGACY))) {
|
|
3067
|
+
const rgb = m.slice(1, 4);
|
|
3068
|
+
for (let i = 0; i < 3; i++) {
|
|
3069
|
+
rgb[i] = round$1(rgb[i] * 2.55);
|
|
3070
|
+
}
|
|
3071
|
+
rgb[3] = 1; // default alpha
|
|
3072
|
+
return rgb;
|
|
3073
|
+
}
|
|
3074
|
+
|
|
3075
|
+
// rgba(100%,0%,0%,0.4)
|
|
3076
|
+
if ((m = css.match(RE_RGBA_PCT)) || (m = css.match(RE_RGBA_PCT_LEGACY))) {
|
|
3077
|
+
const rgb = m.slice(1, 5);
|
|
3078
|
+
for (let i = 0; i < 3; i++) {
|
|
3079
|
+
rgb[i] = round$1(rgb[i] * 2.55);
|
|
3080
|
+
}
|
|
3081
|
+
rgb[3] = +rgb[3];
|
|
3082
|
+
return rgb;
|
|
3083
|
+
}
|
|
3084
|
+
|
|
3085
|
+
// hsl(0,100%,50%)
|
|
3086
|
+
if ((m = css.match(RE_HSL)) || (m = css.match(RE_HSL_LEGACY))) {
|
|
3087
|
+
const hsl = m.slice(1, 4);
|
|
3088
|
+
hsl[1] *= 0.01;
|
|
3089
|
+
hsl[2] *= 0.01;
|
|
3090
|
+
const rgb = hsl2rgb(hsl);
|
|
3091
|
+
for (let i = 0; i < 3; i++) {
|
|
3092
|
+
rgb[i] = round$1(rgb[i]);
|
|
3093
|
+
}
|
|
3094
|
+
rgb[3] = 1;
|
|
3095
|
+
return rgb;
|
|
3096
|
+
}
|
|
3097
|
+
|
|
3098
|
+
// hsla(0,100%,50%,0.5)
|
|
3099
|
+
if ((m = css.match(RE_HSLA)) || (m = css.match(RE_HSLA_LEGACY))) {
|
|
3100
|
+
const hsl = m.slice(1, 4);
|
|
3101
|
+
hsl[1] *= 0.01;
|
|
3102
|
+
hsl[2] *= 0.01;
|
|
3103
|
+
const rgb = hsl2rgb(hsl);
|
|
3104
|
+
for (let i = 0; i < 3; i++) {
|
|
3105
|
+
rgb[i] = round$1(rgb[i]);
|
|
3106
|
+
}
|
|
3107
|
+
rgb[3] = +m[4]; // default alpha = 1
|
|
3108
|
+
return rgb;
|
|
3109
|
+
}
|
|
3110
|
+
|
|
3111
|
+
if ((m = css.match(RE_LAB))) {
|
|
3112
|
+
const lab = m.slice(1, 4);
|
|
3113
|
+
lab[0] = percentToAbsolute(lab[0], 0, 100);
|
|
3114
|
+
lab[1] = percentToAbsolute(lab[1], -125, 125, true);
|
|
3115
|
+
lab[2] = percentToAbsolute(lab[2], -125, 125, true);
|
|
3116
|
+
// convert to D50 Lab whitepoint
|
|
3117
|
+
const wp = getLabWhitePoint();
|
|
3118
|
+
setLabWhitePoint('d50');
|
|
3119
|
+
const rgb = roundRGB(lab2rgb(lab));
|
|
3120
|
+
// convert back to original Lab whitepoint
|
|
3121
|
+
setLabWhitePoint(wp);
|
|
3122
|
+
rgb[3] = m[4] !== undefined ? +m[4] : 1;
|
|
3123
|
+
return rgb;
|
|
3124
|
+
}
|
|
3125
|
+
|
|
3126
|
+
if ((m = css.match(RE_LCH))) {
|
|
3127
|
+
const lch = m.slice(1, 4);
|
|
3128
|
+
lch[0] = percentToAbsolute(lch[0], 0, 100);
|
|
3129
|
+
lch[1] = percentToAbsolute(noneToValue(lch[1], 0), 0, 150, false);
|
|
3130
|
+
lch[2] = +noneToValue(lch[2].replace('deg', ''), 0);
|
|
3131
|
+
// convert to D50 Lab whitepoint
|
|
3132
|
+
const wp = getLabWhitePoint();
|
|
3133
|
+
setLabWhitePoint('d50');
|
|
3134
|
+
const rgb = roundRGB(lch2rgb(lch));
|
|
3135
|
+
// convert back to original Lab whitepoint
|
|
3136
|
+
setLabWhitePoint(wp);
|
|
3137
|
+
rgb[3] = m[4] !== undefined ? +m[4] : 1;
|
|
3138
|
+
return rgb;
|
|
3139
|
+
}
|
|
3140
|
+
|
|
3141
|
+
if ((m = css.match(RE_OKLAB))) {
|
|
3142
|
+
const oklab = m.slice(1, 4);
|
|
3143
|
+
oklab[0] = percentToAbsolute(oklab[0], 0, 1);
|
|
3144
|
+
oklab[1] = percentToAbsolute(oklab[1], -0.4, 0.4, true);
|
|
3145
|
+
oklab[2] = percentToAbsolute(oklab[2], -0.4, 0.4, true);
|
|
3146
|
+
const rgb = roundRGB(oklab2rgb(oklab));
|
|
3147
|
+
rgb[3] = m[4] !== undefined ? +m[4] : 1;
|
|
3148
|
+
return rgb;
|
|
3149
|
+
}
|
|
3150
|
+
|
|
3151
|
+
if ((m = css.match(RE_OKLCH))) {
|
|
3152
|
+
const oklch = m.slice(1, 4);
|
|
3153
|
+
oklch[0] = percentToAbsolute(oklch[0], 0, 1);
|
|
3154
|
+
oklch[1] = percentToAbsolute(noneToValue(oklch[1], 0), 0, 0.4, false);
|
|
3155
|
+
oklch[2] = +noneToValue(oklch[2].replace('deg', ''), 0);
|
|
3156
|
+
const rgb = roundRGB(oklch2rgb(oklch));
|
|
3157
|
+
rgb[3] = m[4] !== undefined ? +m[4] : 1;
|
|
3158
|
+
return rgb;
|
|
3159
|
+
}
|
|
3160
|
+
};
|
|
3161
|
+
|
|
3162
|
+
css2rgb.test = (s) => {
|
|
3163
|
+
return (
|
|
3164
|
+
// modern
|
|
3165
|
+
RE_RGB.test(s) ||
|
|
3166
|
+
RE_RGBA.test(s) ||
|
|
3167
|
+
RE_RGB_PCT.test(s) ||
|
|
3168
|
+
RE_RGBA_PCT.test(s) ||
|
|
3169
|
+
RE_HSL.test(s) ||
|
|
3170
|
+
RE_HSLA.test(s) ||
|
|
3171
|
+
RE_LAB.test(s) ||
|
|
3172
|
+
RE_LCH.test(s) ||
|
|
3173
|
+
RE_OKLAB.test(s) ||
|
|
3174
|
+
RE_OKLCH.test(s) ||
|
|
3175
|
+
// legacy
|
|
3176
|
+
RE_RGB_LEGACY.test(s) ||
|
|
3177
|
+
RE_RGBA_LEGACY.test(s) ||
|
|
3178
|
+
RE_RGB_PCT_LEGACY.test(s) ||
|
|
3179
|
+
RE_RGBA_PCT_LEGACY.test(s) ||
|
|
3180
|
+
RE_HSL_LEGACY.test(s) ||
|
|
3181
|
+
RE_HSLA_LEGACY.test(s)
|
|
3182
|
+
);
|
|
3183
|
+
};
|
|
3184
|
+
|
|
3185
|
+
Color.prototype.css = function (mode) {
|
|
3186
|
+
return rgb2css(this._rgb, mode);
|
|
3187
|
+
};
|
|
3188
|
+
|
|
3189
|
+
const css = (...args) => new Color(...args, 'css');
|
|
3190
|
+
chroma.css = css;
|
|
3191
|
+
|
|
3192
|
+
input.format.css = css2rgb;
|
|
3193
|
+
|
|
3194
|
+
input.autodetect.push({
|
|
3195
|
+
p: 5,
|
|
3196
|
+
test: (h, ...rest) => {
|
|
3197
|
+
if (!rest.length && type(h) === 'string' && css2rgb.test(h)) {
|
|
3198
|
+
return 'css';
|
|
3199
|
+
}
|
|
3200
|
+
}
|
|
3201
|
+
});
|
|
3202
|
+
|
|
3203
|
+
input.format.gl = (...args) => {
|
|
3204
|
+
const rgb = unpack(args, 'rgba');
|
|
3205
|
+
rgb[0] *= 255;
|
|
3206
|
+
rgb[1] *= 255;
|
|
3207
|
+
rgb[2] *= 255;
|
|
3208
|
+
return rgb;
|
|
3209
|
+
};
|
|
3210
|
+
|
|
3211
|
+
const gl = (...args) => new Color(...args, 'gl');
|
|
3212
|
+
chroma.gl = gl;
|
|
3213
|
+
|
|
3214
|
+
Color.prototype.gl = function () {
|
|
3215
|
+
const rgb = this._rgb;
|
|
3216
|
+
return [rgb[0] / 255, rgb[1] / 255, rgb[2] / 255, rgb[3]];
|
|
3217
|
+
};
|
|
3218
|
+
|
|
3219
|
+
Color.prototype.hex = function (mode) {
|
|
3220
|
+
return rgb2hex(this._rgb, mode);
|
|
3221
|
+
};
|
|
3222
|
+
|
|
3223
|
+
const hex = (...args) => new Color(...args, 'hex');
|
|
3224
|
+
chroma.hex = hex;
|
|
3225
|
+
|
|
3226
|
+
input.format.hex = hex2rgb;
|
|
3227
|
+
input.autodetect.push({
|
|
3228
|
+
p: 4,
|
|
3229
|
+
test: (h, ...rest) => {
|
|
3230
|
+
if (
|
|
3231
|
+
!rest.length &&
|
|
3232
|
+
type(h) === 'string' &&
|
|
3233
|
+
[3, 4, 5, 6, 7, 8, 9].indexOf(h.length) >= 0
|
|
3234
|
+
) {
|
|
3235
|
+
return 'hex';
|
|
3236
|
+
}
|
|
3237
|
+
}
|
|
3238
|
+
});
|
|
3239
|
+
|
|
3240
|
+
/*
|
|
3241
|
+
* Based on implementation by Neil Bartlett
|
|
3242
|
+
* https://github.com/neilbartlett/color-temperature
|
|
3243
|
+
*/
|
|
3244
|
+
|
|
3245
|
+
const { log } = Math;
|
|
3246
|
+
|
|
3247
|
+
const temperature2rgb = (kelvin) => {
|
|
3248
|
+
const temp = kelvin / 100;
|
|
3249
|
+
let r, g, b;
|
|
3250
|
+
if (temp < 66) {
|
|
3251
|
+
r = 255;
|
|
3252
|
+
g =
|
|
3253
|
+
temp < 6
|
|
3254
|
+
? 0
|
|
3255
|
+
: -155.25485562709179 -
|
|
3256
|
+
0.44596950469579133 * (g = temp - 2) +
|
|
3257
|
+
104.49216199393888 * log(g);
|
|
3258
|
+
b =
|
|
3259
|
+
temp < 20
|
|
3260
|
+
? 0
|
|
3261
|
+
: -254.76935184120902 +
|
|
3262
|
+
0.8274096064007395 * (b = temp - 10) +
|
|
3263
|
+
115.67994401066147 * log(b);
|
|
3264
|
+
} else {
|
|
3265
|
+
r =
|
|
3266
|
+
351.97690566805693 +
|
|
3267
|
+
0.114206453784165 * (r = temp - 55) -
|
|
3268
|
+
40.25366309332127 * log(r);
|
|
3269
|
+
g =
|
|
3270
|
+
325.4494125711974 +
|
|
3271
|
+
0.07943456536662342 * (g = temp - 50) -
|
|
3272
|
+
28.0852963507957 * log(g);
|
|
3273
|
+
b = 255;
|
|
3274
|
+
}
|
|
3275
|
+
return [r, g, b, 1];
|
|
3276
|
+
};
|
|
3277
|
+
|
|
3278
|
+
/*
|
|
3279
|
+
* Based on implementation by Neil Bartlett
|
|
3280
|
+
* https://github.com/neilbartlett/color-temperature
|
|
3281
|
+
**/
|
|
3282
|
+
|
|
3283
|
+
const { round } = Math;
|
|
3284
|
+
|
|
3285
|
+
const rgb2temperature = (...args) => {
|
|
3286
|
+
const rgb = unpack(args, 'rgb');
|
|
3287
|
+
const r = rgb[0],
|
|
3288
|
+
b = rgb[2];
|
|
3289
|
+
let minTemp = 1000;
|
|
3290
|
+
let maxTemp = 40000;
|
|
3291
|
+
const eps = 0.4;
|
|
3292
|
+
let temp;
|
|
3293
|
+
while (maxTemp - minTemp > eps) {
|
|
3294
|
+
temp = (maxTemp + minTemp) * 0.5;
|
|
3295
|
+
const rgb = temperature2rgb(temp);
|
|
3296
|
+
if (rgb[2] / rgb[0] >= b / r) {
|
|
3297
|
+
maxTemp = temp;
|
|
3298
|
+
} else {
|
|
3299
|
+
minTemp = temp;
|
|
3300
|
+
}
|
|
3301
|
+
}
|
|
3302
|
+
return round(temp);
|
|
3303
|
+
};
|
|
3304
|
+
|
|
3305
|
+
Color.prototype.temp =
|
|
3306
|
+
Color.prototype.kelvin =
|
|
3307
|
+
Color.prototype.temperature =
|
|
3308
|
+
function () {
|
|
3309
|
+
return rgb2temperature(this._rgb);
|
|
3310
|
+
};
|
|
3311
|
+
|
|
3312
|
+
const temp = (...args) => new Color(...args, 'temp');
|
|
3313
|
+
Object.assign(chroma, { temp, kelvin: temp, temperature: temp });
|
|
3314
|
+
|
|
3315
|
+
input.format.temp =
|
|
3316
|
+
input.format.kelvin =
|
|
3317
|
+
input.format.temperature =
|
|
3318
|
+
temperature2rgb;
|
|
3319
|
+
|
|
3320
|
+
Color.prototype.oklch = function () {
|
|
3321
|
+
return rgb2oklch(this._rgb);
|
|
3322
|
+
};
|
|
3323
|
+
|
|
3324
|
+
const oklch = (...args) => new Color(...args, 'oklch');
|
|
3325
|
+
Object.assign(chroma, { oklch });
|
|
3326
|
+
|
|
3327
|
+
input.format.oklch = oklch2rgb;
|
|
3328
|
+
|
|
3329
|
+
input.autodetect.push({
|
|
3330
|
+
p: 2,
|
|
3331
|
+
test: (...args) => {
|
|
3332
|
+
args = unpack(args, 'oklch');
|
|
3333
|
+
if (type(args) === 'array' && args.length === 3) {
|
|
3334
|
+
return 'oklch';
|
|
3335
|
+
}
|
|
3336
|
+
}
|
|
3337
|
+
});
|
|
3338
|
+
|
|
3339
|
+
// feel free to comment out anything to rollup
|
|
3340
|
+
// a smaller chroma.js bundle
|
|
3341
|
+
|
|
3342
|
+
Object.assign(chroma, {
|
|
3343
|
+
analyze,
|
|
3344
|
+
average,
|
|
3345
|
+
bezier: bezier$1,
|
|
3346
|
+
blend,
|
|
3347
|
+
brewer: colorbrewer,
|
|
3348
|
+
Color,
|
|
3349
|
+
colors: w3cx11,
|
|
3350
|
+
contrast,
|
|
3351
|
+
cubehelix,
|
|
3352
|
+
deltaE,
|
|
3353
|
+
distance,
|
|
3354
|
+
input,
|
|
3355
|
+
interpolate: mix,
|
|
3356
|
+
limits,
|
|
3357
|
+
mix,
|
|
3358
|
+
random: random$1,
|
|
3359
|
+
scale,
|
|
3360
|
+
scales,
|
|
3361
|
+
valid
|
|
3362
|
+
});
|
|
3363
|
+
|
|
3364
|
+
const LIGHTNESS_MAP = [0.96, 0.907, 0.805, 0.697, 0.605, 0.547, 0.518, 0.445, 0.395, 0.34];
|
|
3365
|
+
const SATURATION_MAP = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32];
|
|
3366
|
+
function getClosestLightness(colorObject) {
|
|
3367
|
+
const lightnessGoal = colorObject.get("hsl.l");
|
|
3368
|
+
return LIGHTNESS_MAP.reduce(
|
|
3369
|
+
(prev, curr) => Math.abs(curr - lightnessGoal) < Math.abs(prev - lightnessGoal) ? curr : prev
|
|
3370
|
+
);
|
|
3371
|
+
}
|
|
3372
|
+
function generateColorsMap(color) {
|
|
3373
|
+
const colorObject = chroma(color);
|
|
3374
|
+
const closestLightness = getClosestLightness(colorObject);
|
|
3375
|
+
const baseColorIndex = LIGHTNESS_MAP.findIndex((l) => l === closestLightness);
|
|
3376
|
+
const colors = LIGHTNESS_MAP.map((l) => colorObject.set("hsl.l", l)).map((c) => chroma(c)).map((c, i) => {
|
|
3377
|
+
const saturationDelta = SATURATION_MAP[i] - SATURATION_MAP[baseColorIndex];
|
|
3378
|
+
return saturationDelta >= 0 ? c.saturate(saturationDelta) : c.desaturate(saturationDelta * -1);
|
|
3379
|
+
});
|
|
3380
|
+
return { baseColorIndex, colors };
|
|
3381
|
+
}
|
|
3382
|
+
function generateColors(color) {
|
|
3383
|
+
return generateColorsMap(color).colors.map((c) => c.hex());
|
|
3384
|
+
}
|
|
3385
|
+
|
|
3386
|
+
const blue$1 = {
|
|
3387
|
+
fill: "#3b82f6",
|
|
3388
|
+
stroke: "#2563eb",
|
|
3389
|
+
hiContrast: "#eff6ff",
|
|
3390
|
+
loContrast: "#bfdbfe"
|
|
3391
|
+
};
|
|
3392
|
+
const sky$1 = {
|
|
3393
|
+
fill: "#0284c7",
|
|
3394
|
+
stroke: "#0369a1",
|
|
3395
|
+
hiContrast: "#f0f9ff",
|
|
3396
|
+
loContrast: "#B6ECF7"
|
|
3397
|
+
};
|
|
3398
|
+
const slate$1 = {
|
|
3399
|
+
fill: "#64748b",
|
|
3400
|
+
stroke: "#475569",
|
|
3401
|
+
hiContrast: "#f8fafc",
|
|
3402
|
+
loContrast: "#cbd5e1"
|
|
3403
|
+
};
|
|
3404
|
+
const ElementColors = {
|
|
3405
|
+
primary: blue$1,
|
|
3406
|
+
blue: blue$1,
|
|
3407
|
+
secondary: sky$1,
|
|
3408
|
+
sky: sky$1,
|
|
3409
|
+
muted: slate$1,
|
|
3410
|
+
slate: slate$1,
|
|
3411
|
+
gray: {
|
|
3412
|
+
// fill: colors.neutral[500],
|
|
3413
|
+
// stroke: colors.neutral[600],
|
|
3414
|
+
// hiContrast: colors.neutral[50],
|
|
3415
|
+
// loContrast: colors.neutral[200],
|
|
3416
|
+
fill: "#737373",
|
|
3417
|
+
stroke: "#525252",
|
|
3418
|
+
hiContrast: "#fafafa",
|
|
3419
|
+
loContrast: "#d4d4d4"
|
|
3420
|
+
},
|
|
3421
|
+
red: {
|
|
3422
|
+
// fill: colors.red[500],
|
|
3423
|
+
// stroke: colors.red[600],
|
|
3424
|
+
// hiContrast: colors.red[50],
|
|
3425
|
+
// loContrast: colors.red[200],
|
|
3426
|
+
fill: "#AC4D39",
|
|
3427
|
+
// fill: '#b54548',
|
|
3428
|
+
stroke: "#853A2D",
|
|
3429
|
+
// hiContrast: '#fef2f2',
|
|
3430
|
+
// loContrast: '#fecaca',
|
|
3431
|
+
// hiContrast: '#191111', // colors.gray[900],
|
|
3432
|
+
// loContrast: '#3b1219' // colors.gray[800],
|
|
3433
|
+
hiContrast: "#FBD3CB",
|
|
3434
|
+
// hiContrast: '#f8fafc',
|
|
3435
|
+
// loContrast: '#fdd8d8' // radix black red 12
|
|
3436
|
+
loContrast: "#f5b2a3"
|
|
3437
|
+
},
|
|
3438
|
+
green: {
|
|
3439
|
+
fill: "#428a4f",
|
|
3440
|
+
stroke: "#2d5d39",
|
|
3441
|
+
hiContrast: "#f8fafc",
|
|
3442
|
+
loContrast: "#c2f0c2"
|
|
3443
|
+
},
|
|
3444
|
+
amber: {
|
|
3445
|
+
fill: "#A35829",
|
|
3446
|
+
stroke: "#7E451D",
|
|
3447
|
+
hiContrast: "#FFE0C2",
|
|
3448
|
+
loContrast: "#f9b27c"
|
|
3449
|
+
},
|
|
3450
|
+
indigo: {
|
|
3451
|
+
// fill: colors.indigo[500],
|
|
3452
|
+
// stroke: colors.indigo[600],
|
|
3453
|
+
// hiContrast: colors.indigo[50],
|
|
3454
|
+
// loContrast: colors.indigo[200],
|
|
3455
|
+
fill: "#6366f1",
|
|
3456
|
+
stroke: "#4f46e5",
|
|
3457
|
+
hiContrast: "#eef2ff",
|
|
3458
|
+
loContrast: "#c7d2fe"
|
|
3459
|
+
}
|
|
3460
|
+
};
|
|
3461
|
+
|
|
3462
|
+
const gray = {
|
|
3463
|
+
lineColor: "#6E6E6E",
|
|
3464
|
+
labelBgColor: "#18191b",
|
|
3465
|
+
labelColor: "#C6C6C6"
|
|
3466
|
+
};
|
|
3467
|
+
const slate = {
|
|
3468
|
+
lineColor: "#64748b",
|
|
3469
|
+
// 500
|
|
3470
|
+
labelBgColor: "#0f172a",
|
|
3471
|
+
// 900
|
|
3472
|
+
labelColor: "#cbd5e1"
|
|
3473
|
+
// 300
|
|
3474
|
+
};
|
|
3475
|
+
const blue = {
|
|
3476
|
+
lineColor: "#3b82f6",
|
|
3477
|
+
// 500
|
|
3478
|
+
labelBgColor: "#172554",
|
|
3479
|
+
// 950
|
|
3480
|
+
labelColor: "#60a5fa"
|
|
3481
|
+
// 400
|
|
3482
|
+
};
|
|
3483
|
+
const sky = {
|
|
3484
|
+
lineColor: "#0ea5e9",
|
|
3485
|
+
// 500
|
|
3486
|
+
labelBgColor: "#082f49",
|
|
3487
|
+
// 950
|
|
3488
|
+
labelColor: "#38bdf8"
|
|
3489
|
+
// 400
|
|
3490
|
+
};
|
|
3491
|
+
const RelationshipColors = {
|
|
3492
|
+
amber: {
|
|
3493
|
+
lineColor: "#b45309",
|
|
3494
|
+
labelBgColor: "#78350f",
|
|
3495
|
+
labelColor: "#FFE0C2"
|
|
3496
|
+
},
|
|
3497
|
+
blue,
|
|
3498
|
+
gray,
|
|
3499
|
+
green: {
|
|
3500
|
+
lineColor: "#15803d",
|
|
3501
|
+
// 700
|
|
3502
|
+
labelBgColor: "#052e16",
|
|
3503
|
+
// 950
|
|
3504
|
+
labelColor: "#22c55e"
|
|
3505
|
+
// 500
|
|
3506
|
+
},
|
|
3507
|
+
indigo: {
|
|
3508
|
+
lineColor: "#6366f1",
|
|
3509
|
+
// 500
|
|
3510
|
+
labelBgColor: "#1e1b4b",
|
|
3511
|
+
// 950
|
|
3512
|
+
labelColor: "#818cf8"
|
|
3513
|
+
// 400
|
|
3514
|
+
},
|
|
3515
|
+
muted: slate,
|
|
3516
|
+
primary: blue,
|
|
3517
|
+
red: {
|
|
3518
|
+
lineColor: "#AC4D39",
|
|
3519
|
+
labelBgColor: "#b91c1c",
|
|
3520
|
+
labelColor: "#f5b2a3"
|
|
3521
|
+
},
|
|
3522
|
+
secondary: sky,
|
|
3523
|
+
sky,
|
|
3524
|
+
slate
|
|
3525
|
+
};
|
|
3526
|
+
|
|
3527
|
+
const defaultTheme = {
|
|
3528
|
+
elements: ElementColors,
|
|
3529
|
+
relationships: RelationshipColors,
|
|
3530
|
+
font: "Arial",
|
|
3531
|
+
shadow: "#0a0a0a"
|
|
3532
|
+
};
|
|
3533
|
+
function computeColorValues(color) {
|
|
3534
|
+
if (color.match(/^#([0-9a-f]{3}){1,2}$/i)) {
|
|
3535
|
+
const colors = generateColors(color);
|
|
3536
|
+
return {
|
|
3537
|
+
elements: {
|
|
3538
|
+
fill: colors[6],
|
|
3539
|
+
stroke: colors[7],
|
|
3540
|
+
hiContrast: colors[0],
|
|
3541
|
+
loContrast: colors[1]
|
|
3542
|
+
},
|
|
3543
|
+
relationships: {
|
|
3544
|
+
lineColor: colors[4],
|
|
3545
|
+
labelColor: colors[3],
|
|
3546
|
+
labelBgColor: colors[9]
|
|
3547
|
+
}
|
|
3548
|
+
};
|
|
3549
|
+
} else {
|
|
3550
|
+
return {
|
|
3551
|
+
elements: defaultTheme.elements["primary"],
|
|
3552
|
+
relationships: defaultTheme.relationships["primary"]
|
|
3553
|
+
};
|
|
3554
|
+
}
|
|
3555
|
+
}
|
|
3556
|
+
|
|
3557
|
+
function r$1(...t){return u(Object.values,t)}
|
|
3558
|
+
|
|
3559
|
+
function i(...e){return u(r,e)}var r=(e,t)=>e.length>=t;
|
|
3560
|
+
|
|
3561
|
+
function t(r){return typeof r=="string"}
|
|
3562
|
+
|
|
3563
|
+
function n(e){return !!e}
|
|
3564
|
+
|
|
3565
|
+
function isString(value) {
|
|
3566
|
+
return value != null && typeof value === "string";
|
|
3567
|
+
}
|
|
3568
|
+
function isNonEmptyArray(arr) {
|
|
3569
|
+
return !!arr && Array.isArray(arr) && arr.length > 0;
|
|
3570
|
+
}
|
|
3571
|
+
|
|
3572
|
+
function nameFromFqn(fqn) {
|
|
3573
|
+
const lastDot = fqn.lastIndexOf(".");
|
|
3574
|
+
if (lastDot > 0) {
|
|
3575
|
+
return fqn.slice(lastDot + 1);
|
|
3576
|
+
} else {
|
|
3577
|
+
return fqn;
|
|
3578
|
+
}
|
|
3579
|
+
}
|
|
3580
|
+
function isAncestor(...args) {
|
|
3581
|
+
const ancestor = isString(args[0]) ? args[0] : args[0].id;
|
|
3582
|
+
const another = isString(args[1]) ? args[1] : args[1].id;
|
|
3583
|
+
return another.startsWith(ancestor + ".");
|
|
3584
|
+
}
|
|
3585
|
+
function isSameHierarchy(one, another) {
|
|
3586
|
+
const first = isString(one) ? one : one.id;
|
|
3587
|
+
const second = isString(another) ? another : another.id;
|
|
3588
|
+
return first === second || second.startsWith(first + ".") || first.startsWith(second + ".");
|
|
3589
|
+
}
|
|
3590
|
+
function isDescendantOf(ancestors) {
|
|
3591
|
+
const predicates = ancestors.flatMap((a) => [(e) => e.id === a.id, (e) => isAncestor(a, e)]);
|
|
3592
|
+
return (e) => predicates.some((p) => p(e));
|
|
3593
|
+
}
|
|
3594
|
+
function notDescendantOf(ancestors) {
|
|
3595
|
+
const isDescendant = isDescendantOf(ancestors);
|
|
3596
|
+
return (e) => !isDescendant(e);
|
|
3597
|
+
}
|
|
3598
|
+
function commonAncestor(first, second) {
|
|
3599
|
+
const parentA = parentFqn(first);
|
|
3600
|
+
const parentB = parentFqn(second);
|
|
3601
|
+
if (parentA === parentB) {
|
|
3602
|
+
return parentA;
|
|
3603
|
+
}
|
|
3604
|
+
if (!parentA || !parentB) {
|
|
3605
|
+
return null;
|
|
3606
|
+
}
|
|
3607
|
+
const a = first.split(".");
|
|
3608
|
+
const b = second.split(".");
|
|
3609
|
+
let ancestor = null;
|
|
3610
|
+
while (a.length > 1 && b.length > 1 && !!a[0] && a[0] === b[0]) {
|
|
3611
|
+
ancestor = ancestor ? `${ancestor}.${a[0]}` : a[0];
|
|
3612
|
+
a.shift();
|
|
3613
|
+
b.shift();
|
|
3614
|
+
}
|
|
3615
|
+
return ancestor;
|
|
3616
|
+
}
|
|
3617
|
+
function parentFqn(fqn) {
|
|
3618
|
+
const lastDot = fqn.lastIndexOf(".");
|
|
3619
|
+
if (lastDot > 0) {
|
|
3620
|
+
return fqn.slice(0, lastDot);
|
|
3621
|
+
}
|
|
3622
|
+
return null;
|
|
3623
|
+
}
|
|
3624
|
+
function parentFqnPredicate(parent) {
|
|
3625
|
+
const prefix = parent + ".";
|
|
3626
|
+
return (e) => !!e.parent && (e.parent === parent || e.parent.startsWith(prefix));
|
|
3627
|
+
}
|
|
3628
|
+
function ancestorsFqn(fqn) {
|
|
3629
|
+
const path = fqn.split(".");
|
|
3630
|
+
path.pop();
|
|
3631
|
+
if (path.length === 0) {
|
|
3632
|
+
return [];
|
|
3633
|
+
}
|
|
3634
|
+
return path.reduce((acc, part, idx) => {
|
|
3635
|
+
if (idx === 0) {
|
|
3636
|
+
acc.push(part);
|
|
3637
|
+
return acc;
|
|
3638
|
+
}
|
|
3639
|
+
acc.unshift(`${acc[0]}.${part}`);
|
|
3640
|
+
return acc;
|
|
3641
|
+
}, []);
|
|
3642
|
+
}
|
|
3643
|
+
function compareFqnHierarchically(a, b) {
|
|
3644
|
+
const depthA = a.split(".").length;
|
|
3645
|
+
const depthB = b.split(".").length;
|
|
3646
|
+
switch (true) {
|
|
3647
|
+
case depthA > depthB: {
|
|
3648
|
+
return 1;
|
|
3649
|
+
}
|
|
3650
|
+
case depthA < depthB: {
|
|
3651
|
+
return -1;
|
|
3652
|
+
}
|
|
3653
|
+
default: {
|
|
3654
|
+
return 0;
|
|
3655
|
+
}
|
|
3656
|
+
}
|
|
3657
|
+
}
|
|
3658
|
+
function compareByFqnHierarchically(a, b) {
|
|
3659
|
+
return compareFqnHierarchically(a.id, b.id);
|
|
3660
|
+
}
|
|
3661
|
+
|
|
3662
|
+
class LikeC4ViewModel {
|
|
3663
|
+
constructor(view, model) {
|
|
3664
|
+
this.view = view;
|
|
3665
|
+
this.model = model;
|
|
3666
|
+
for (const node of view.nodes) {
|
|
3667
|
+
const el = new LikeC4ViewModel.Element(node, this);
|
|
3668
|
+
this.#elements.set(node.id, el);
|
|
3669
|
+
if (e(node.parent)) {
|
|
3670
|
+
this.#rootElements.add(el);
|
|
3671
|
+
}
|
|
3672
|
+
}
|
|
3673
|
+
this.#connections = new Map(view.edges.map((e) => [e.id, new LikeC4ViewModel.Connection(e, this)]));
|
|
3674
|
+
}
|
|
3675
|
+
#rootElements = /* @__PURE__ */ new Set();
|
|
3676
|
+
#elements = /* @__PURE__ */ new Map();
|
|
3677
|
+
#connections;
|
|
3678
|
+
get id() {
|
|
3679
|
+
return this.view.id;
|
|
3680
|
+
}
|
|
3681
|
+
get title() {
|
|
3682
|
+
return this.view.title;
|
|
3683
|
+
}
|
|
3684
|
+
get viewOf() {
|
|
3685
|
+
if (this.view.__ !== "dynamic") {
|
|
3686
|
+
return this.view.viewOf ? this.model.element(this.view.viewOf) : null;
|
|
3687
|
+
}
|
|
3688
|
+
return null;
|
|
3689
|
+
}
|
|
3690
|
+
get tags() {
|
|
3691
|
+
return this.view.tags ?? [];
|
|
3692
|
+
}
|
|
3693
|
+
roots() {
|
|
3694
|
+
return [...this.#rootElements];
|
|
3695
|
+
}
|
|
3696
|
+
elements() {
|
|
3697
|
+
return [...this.#elements.values()];
|
|
3698
|
+
}
|
|
3699
|
+
element(id) {
|
|
3700
|
+
return nonNullable(this.#elements.get(id), `LikeC4ViewModel.Element ${id} in view ${this.view.id} not found`);
|
|
3701
|
+
}
|
|
3702
|
+
hasElement(id) {
|
|
3703
|
+
return this.#elements.has(id);
|
|
3704
|
+
}
|
|
3705
|
+
connections() {
|
|
3706
|
+
return [...this.#connections.values()];
|
|
3707
|
+
}
|
|
3708
|
+
connection(id) {
|
|
3709
|
+
return nonNullable(this.#connections.get(id), `Connection ${id} in view ${this.view.id} not found`);
|
|
3710
|
+
}
|
|
3711
|
+
findConnections(source, target, direction = "direct") {
|
|
3712
|
+
const sourceId = t(source) ? source : source.id;
|
|
3713
|
+
const targetId = t(target) ? target : target.id;
|
|
3714
|
+
return this.connections().filter(
|
|
3715
|
+
(c) => c.source.id === sourceId && c.target.id === targetId || direction === "both" && c.source.id === targetId && c.target.id === sourceId
|
|
3716
|
+
);
|
|
3717
|
+
}
|
|
3718
|
+
parent(element) {
|
|
3719
|
+
const el = this.element(t(element) ? element : element.id);
|
|
3720
|
+
return el.node.parent ? this.element(el.node.parent) : null;
|
|
3721
|
+
}
|
|
3722
|
+
children(element) {
|
|
3723
|
+
const el = this.element(t(element) ? element : element.id);
|
|
3724
|
+
return el.node.children.map((c) => this.element(c));
|
|
3725
|
+
}
|
|
3726
|
+
// Get all sibling (i.e. same parent)
|
|
3727
|
+
siblings(element) {
|
|
3728
|
+
const id = t(element) ? element : element.id;
|
|
3729
|
+
const parent = this.parent(id);
|
|
3730
|
+
const siblings = parent ? this.children(parent) : this.roots();
|
|
3731
|
+
return siblings.filter((e) => e.id !== id);
|
|
3732
|
+
}
|
|
3733
|
+
/**
|
|
3734
|
+
* Get all ancestor elements (i.e. parent, parent’s parent, etc.)
|
|
3735
|
+
* (from closest to root)
|
|
3736
|
+
*/
|
|
3737
|
+
ancestors(element) {
|
|
3738
|
+
let id = t(element) ? element : element.id;
|
|
3739
|
+
const result = [];
|
|
3740
|
+
let parent;
|
|
3741
|
+
while (parent = this.parent(id)) {
|
|
3742
|
+
result.push(parent);
|
|
3743
|
+
id = parent.id;
|
|
3744
|
+
}
|
|
3745
|
+
return result;
|
|
3746
|
+
}
|
|
3747
|
+
descendants(element) {
|
|
3748
|
+
const children = this.children(element);
|
|
3749
|
+
return children.flatMap((c) => [c, ...this.descendants(c.id)]);
|
|
3750
|
+
}
|
|
3751
|
+
incoming(element, filter = "all") {
|
|
3752
|
+
const el = this.element(t(element) ? element : element.id);
|
|
3753
|
+
const edges = el.node.inEdges.map((e) => nonNullable(this.#connections.get(e), `Edge ${e} not found`));
|
|
3754
|
+
if (filter === "all" || edges.length === 0) {
|
|
3755
|
+
return edges;
|
|
3756
|
+
}
|
|
3757
|
+
return edges.filter((rel) => {
|
|
3758
|
+
if (filter === "direct") {
|
|
3759
|
+
return rel.target.id === el.id;
|
|
3760
|
+
}
|
|
3761
|
+
return rel.target.id !== el.id;
|
|
3762
|
+
});
|
|
3763
|
+
}
|
|
3764
|
+
incomers(element, filter = "all") {
|
|
3765
|
+
return this.incoming(element, filter).map((r) => r.source);
|
|
3766
|
+
}
|
|
3767
|
+
/**
|
|
3768
|
+
* Outgoing relationships from the element and its descendants
|
|
3769
|
+
*/
|
|
3770
|
+
outgoing(element, filter = "all") {
|
|
3771
|
+
const el = this.element(t(element) ? element : element.id);
|
|
3772
|
+
const edges = el.node.outEdges.map((e) => nonNullable(this.#connections.get(e), `Edge ${e} not found`));
|
|
3773
|
+
if (filter === "all" || edges.length === 0) {
|
|
3774
|
+
return edges;
|
|
3775
|
+
}
|
|
3776
|
+
return edges.filter((rel) => {
|
|
3777
|
+
if (filter === "direct") {
|
|
3778
|
+
return rel.source.id === el.id;
|
|
3779
|
+
}
|
|
3780
|
+
return rel.source.id !== el.id;
|
|
3781
|
+
});
|
|
3782
|
+
}
|
|
3783
|
+
outgoers(element, filter = "all") {
|
|
3784
|
+
return this.outgoing(element, filter).map((r) => r.target);
|
|
3785
|
+
}
|
|
3786
|
+
}
|
|
3787
|
+
((LikeC4ViewModel2) => {
|
|
3788
|
+
class Element {
|
|
3789
|
+
constructor(node, viewmodel) {
|
|
3790
|
+
this.node = node;
|
|
3791
|
+
this.viewmodel = viewmodel;
|
|
3792
|
+
}
|
|
3793
|
+
get id() {
|
|
3794
|
+
return this.node.id;
|
|
3795
|
+
}
|
|
3796
|
+
get title() {
|
|
3797
|
+
return this.node.title;
|
|
3798
|
+
}
|
|
3799
|
+
get kind() {
|
|
3800
|
+
return this.node.kind;
|
|
3801
|
+
}
|
|
3802
|
+
get isRoot() {
|
|
3803
|
+
return e(this.node.parent);
|
|
3804
|
+
}
|
|
3805
|
+
get hasNested() {
|
|
3806
|
+
return this.node.children.length > 0;
|
|
3807
|
+
}
|
|
3808
|
+
get shape() {
|
|
3809
|
+
return this.node.shape;
|
|
3810
|
+
}
|
|
3811
|
+
get color() {
|
|
3812
|
+
return this.node.color;
|
|
3813
|
+
}
|
|
3814
|
+
get tags() {
|
|
3815
|
+
return this.node.tags ?? [];
|
|
3816
|
+
}
|
|
3817
|
+
model() {
|
|
3818
|
+
return this.viewmodel.model.element(this.id);
|
|
3819
|
+
}
|
|
3820
|
+
parent() {
|
|
3821
|
+
return this.node.parent ? this.viewmodel.element(this.node.parent) : null;
|
|
3822
|
+
}
|
|
3823
|
+
metadata(key, defaultValue) {
|
|
3824
|
+
return this.model().metadata(key) ?? defaultValue;
|
|
3825
|
+
}
|
|
3826
|
+
hasMetadata(key) {
|
|
3827
|
+
return this.model().hasMetadata(key);
|
|
3828
|
+
}
|
|
3829
|
+
ancestors() {
|
|
3830
|
+
return this.viewmodel.ancestors(this);
|
|
3831
|
+
}
|
|
3832
|
+
siblings() {
|
|
3833
|
+
return this.viewmodel.siblings(this);
|
|
3834
|
+
}
|
|
3835
|
+
descendants() {
|
|
3836
|
+
return this.viewmodel.descendants(this);
|
|
3837
|
+
}
|
|
3838
|
+
children() {
|
|
3839
|
+
return this.viewmodel.children(this);
|
|
3840
|
+
}
|
|
3841
|
+
incoming(filter = "all") {
|
|
3842
|
+
return this.viewmodel.incoming(this, filter);
|
|
3843
|
+
}
|
|
3844
|
+
incomers(filter = "all") {
|
|
3845
|
+
return this.viewmodel.incomers(this, filter);
|
|
3846
|
+
}
|
|
3847
|
+
outgoing(filter = "all") {
|
|
3848
|
+
return this.viewmodel.outgoing(this, filter);
|
|
3849
|
+
}
|
|
3850
|
+
outgoers(filter = "all") {
|
|
3851
|
+
return this.viewmodel.outgoers(this, filter);
|
|
3852
|
+
}
|
|
3853
|
+
connectionsTo(target) {
|
|
3854
|
+
return this.viewmodel.findConnections(this, target);
|
|
3855
|
+
}
|
|
3856
|
+
}
|
|
3857
|
+
LikeC4ViewModel2.Element = Element;
|
|
3858
|
+
class Connection {
|
|
3859
|
+
constructor(edge, viewmodel) {
|
|
3860
|
+
this.edge = edge;
|
|
3861
|
+
this.viewmodel = viewmodel;
|
|
3862
|
+
}
|
|
3863
|
+
get id() {
|
|
3864
|
+
return this.edge.id;
|
|
3865
|
+
}
|
|
3866
|
+
get source() {
|
|
3867
|
+
return this.viewmodel.element(this.edge.source);
|
|
3868
|
+
}
|
|
3869
|
+
get target() {
|
|
3870
|
+
return this.viewmodel.element(this.edge.target);
|
|
3871
|
+
}
|
|
3872
|
+
get tags() {
|
|
3873
|
+
return this.edge.tags ?? [];
|
|
3874
|
+
}
|
|
3875
|
+
/**
|
|
3876
|
+
* Model relationships
|
|
3877
|
+
*/
|
|
3878
|
+
relationships() {
|
|
3879
|
+
return this.edge.relations.map((r) => nonNullable(this.viewmodel.model.relationship(r)));
|
|
3880
|
+
}
|
|
3881
|
+
}
|
|
3882
|
+
LikeC4ViewModel2.Connection = Connection;
|
|
3883
|
+
})(LikeC4ViewModel || (LikeC4ViewModel = {}));
|
|
3884
|
+
|
|
3885
|
+
const RelationsSet = Set;
|
|
3886
|
+
const MapRelations = Map;
|
|
3887
|
+
class LikeC4Model {
|
|
3888
|
+
constructor(computed) {
|
|
3889
|
+
this.computed = computed;
|
|
3890
|
+
for (const el of r$1(computed.elements)) {
|
|
3891
|
+
this.addElement(el);
|
|
3892
|
+
}
|
|
3893
|
+
for (const rel of r$1(computed.relations)) {
|
|
3894
|
+
this.addRelation(rel);
|
|
3895
|
+
}
|
|
3896
|
+
this.#views = new Map(
|
|
3897
|
+
r$1(computed.views).map((v) => [v.id, new LikeC4ViewModel(v, this)])
|
|
3898
|
+
);
|
|
3899
|
+
}
|
|
3900
|
+
#elements = /* @__PURE__ */ new Map();
|
|
3901
|
+
// Parent element for given FQN
|
|
3902
|
+
#parents = /* @__PURE__ */ new Map();
|
|
3903
|
+
// Children elements for given FQN
|
|
3904
|
+
#children = /* @__PURE__ */ new Map();
|
|
3905
|
+
#rootElements = /* @__PURE__ */ new Set();
|
|
3906
|
+
#relations = /* @__PURE__ */ new Map();
|
|
3907
|
+
// Incoming to an element or its descendants
|
|
3908
|
+
#incoming = new MapRelations();
|
|
3909
|
+
// Outgoing from an element or its descendants
|
|
3910
|
+
#outgoing = new MapRelations();
|
|
3911
|
+
// Relationships inside the element, among descendants
|
|
3912
|
+
#internal = new MapRelations();
|
|
3913
|
+
#cacheAscendingSiblings = /* @__PURE__ */ new Map();
|
|
3914
|
+
#views;
|
|
3915
|
+
static from(computed) {
|
|
3916
|
+
return new LikeC4Model(computed);
|
|
3917
|
+
}
|
|
3918
|
+
/**
|
|
3919
|
+
* Returns the root elements of the model.
|
|
3920
|
+
*/
|
|
3921
|
+
roots() {
|
|
3922
|
+
return [...this.#rootElements];
|
|
3923
|
+
}
|
|
3924
|
+
/**
|
|
3925
|
+
* Returns all elements in the model.
|
|
3926
|
+
*/
|
|
3927
|
+
elements() {
|
|
3928
|
+
return [...this.#elements.values()];
|
|
3929
|
+
}
|
|
3930
|
+
/**
|
|
3931
|
+
* Returns a specific element by its FQN.
|
|
3932
|
+
*/
|
|
3933
|
+
element(id) {
|
|
3934
|
+
return nonNullable(this.#elements.get(id), `Element ${id} not found`);
|
|
3935
|
+
}
|
|
3936
|
+
/**
|
|
3937
|
+
* Returns all relationships in the model.
|
|
3938
|
+
*/
|
|
3939
|
+
relationships() {
|
|
3940
|
+
return [...this.#relations.values()];
|
|
3941
|
+
}
|
|
3942
|
+
/**
|
|
3943
|
+
* Returns a specific relationship by its ID.
|
|
3944
|
+
*/
|
|
3945
|
+
relationship(id) {
|
|
3946
|
+
return nonNullable(this.#relations.get(id), `Relation ${id} not found`);
|
|
3947
|
+
}
|
|
3948
|
+
/**
|
|
3949
|
+
* Returns all views in the model.
|
|
3950
|
+
*/
|
|
3951
|
+
views() {
|
|
3952
|
+
return [...this.#views.values()];
|
|
3953
|
+
}
|
|
3954
|
+
/**
|
|
3955
|
+
* Returns a specific view by its ID.
|
|
3956
|
+
*/
|
|
3957
|
+
view(viewId) {
|
|
3958
|
+
return nonNullable(this.#views.get(viewId), `View ${viewId} not found`);
|
|
3959
|
+
}
|
|
3960
|
+
/**
|
|
3961
|
+
* Returns the parent element of given element.
|
|
3962
|
+
* @see ancestors
|
|
3963
|
+
*/
|
|
3964
|
+
parent(element) {
|
|
3965
|
+
const id = t(element) ? element : element.id;
|
|
3966
|
+
return this.#parents.get(id) || null;
|
|
3967
|
+
}
|
|
3968
|
+
/**
|
|
3969
|
+
* Get all children of the element (only direct children),
|
|
3970
|
+
* @see descendants
|
|
3971
|
+
*/
|
|
3972
|
+
children(element) {
|
|
3973
|
+
const id = t(element) ? element : element.id;
|
|
3974
|
+
return this._childrenOf(id);
|
|
3975
|
+
}
|
|
3976
|
+
/**
|
|
3977
|
+
* Get all sibling (i.e. same parent)
|
|
3978
|
+
*/
|
|
3979
|
+
siblings(element) {
|
|
3980
|
+
const id = t(element) ? element : element.id;
|
|
3981
|
+
const parent = this.#parents.get(id);
|
|
3982
|
+
const siblings = parent ? this._childrenOf(parent.id) : this.roots();
|
|
3983
|
+
return siblings.filter((e) => e.id !== id);
|
|
3984
|
+
}
|
|
3985
|
+
/**
|
|
3986
|
+
* Get all ancestor elements (i.e. parent, parent’s parent, etc.)
|
|
3987
|
+
* (from closest to root)
|
|
3988
|
+
*/
|
|
3989
|
+
ancestors(element) {
|
|
3990
|
+
let id = t(element) ? element : element.id;
|
|
3991
|
+
const result = [];
|
|
3992
|
+
let parent;
|
|
3993
|
+
while (parent = this.#parents.get(id)) {
|
|
3994
|
+
result.push(parent);
|
|
3995
|
+
id = parent.id;
|
|
3996
|
+
}
|
|
3997
|
+
return result;
|
|
3998
|
+
}
|
|
3999
|
+
/**
|
|
4000
|
+
* Get all descendant elements (i.e. children, children’s children, etc.)
|
|
4001
|
+
*/
|
|
4002
|
+
descendants(element) {
|
|
4003
|
+
const id = t(element) ? element : element.id;
|
|
4004
|
+
const children = this._childrenOf(id);
|
|
4005
|
+
return children.flatMap((c) => [c, ...this.descendants(c.id)]);
|
|
4006
|
+
}
|
|
4007
|
+
/**
|
|
4008
|
+
* Incoming relationships to the element and its descendants
|
|
4009
|
+
* @see incomers
|
|
4010
|
+
*/
|
|
4011
|
+
incoming(element, filter = "all") {
|
|
4012
|
+
const id = t(element) ? element : element.id;
|
|
4013
|
+
const incoming = Array.from(this._incomingTo(id));
|
|
4014
|
+
if (filter === "all" || incoming.length === 0) {
|
|
4015
|
+
return incoming;
|
|
4016
|
+
}
|
|
4017
|
+
return incoming.filter((rel) => {
|
|
4018
|
+
if (filter === "direct") {
|
|
4019
|
+
return rel.target.id === id;
|
|
4020
|
+
}
|
|
4021
|
+
return rel.target.id !== id;
|
|
4022
|
+
});
|
|
4023
|
+
}
|
|
4024
|
+
/**
|
|
4025
|
+
* Source elements of incoming relationships
|
|
4026
|
+
*/
|
|
4027
|
+
incomers(element, filter = "all") {
|
|
4028
|
+
return this.incoming(element, filter).map((r) => r.source);
|
|
4029
|
+
}
|
|
4030
|
+
/**
|
|
4031
|
+
* Outgoing relationships from the element and its descendants
|
|
4032
|
+
* @see outgoers
|
|
4033
|
+
*/
|
|
4034
|
+
outgoing(element, filter = "all") {
|
|
4035
|
+
const id = t(element) ? element : element.id;
|
|
4036
|
+
const outgoing = Array.from(this._outgoingFrom(id));
|
|
4037
|
+
if (filter === "all" || outgoing.length === 0) {
|
|
4038
|
+
return outgoing;
|
|
4039
|
+
}
|
|
4040
|
+
return outgoing.filter((rel) => {
|
|
4041
|
+
if (filter === "direct") {
|
|
4042
|
+
return rel.source.id === id;
|
|
4043
|
+
}
|
|
4044
|
+
return rel.source.id !== id;
|
|
4045
|
+
});
|
|
4046
|
+
}
|
|
4047
|
+
/**
|
|
4048
|
+
* Target elements of outgoing relationships
|
|
4049
|
+
*/
|
|
4050
|
+
outgoers(element, filter = "all") {
|
|
4051
|
+
return this.outgoing(element, filter).map((r) => r.target);
|
|
4052
|
+
}
|
|
4053
|
+
/**
|
|
4054
|
+
* Relationships inside the element, among descendants
|
|
4055
|
+
*/
|
|
4056
|
+
internal(element) {
|
|
4057
|
+
const id = t(element) ? element : element.id;
|
|
4058
|
+
return Array.from(this._internalOf(id));
|
|
4059
|
+
}
|
|
4060
|
+
/**
|
|
4061
|
+
* Resolve siblings of the element and siblings of ancestors
|
|
4062
|
+
* (from closest to root)
|
|
4063
|
+
*/
|
|
4064
|
+
ascendingSiblings(element) {
|
|
4065
|
+
const id = t(element) ? element : element.id;
|
|
4066
|
+
let siblings = this.#cacheAscendingSiblings.get(id);
|
|
4067
|
+
if (!siblings) {
|
|
4068
|
+
siblings = [
|
|
4069
|
+
...this.siblings(id),
|
|
4070
|
+
...this.ancestors(id).flatMap((a) => this.siblings(a.id))
|
|
4071
|
+
];
|
|
4072
|
+
this.#cacheAscendingSiblings.set(id, siblings);
|
|
4073
|
+
}
|
|
4074
|
+
return siblings.slice();
|
|
4075
|
+
}
|
|
4076
|
+
/**
|
|
4077
|
+
* Resolve all views that contain the element
|
|
4078
|
+
*/
|
|
4079
|
+
viewsWithElement(element) {
|
|
4080
|
+
const id = t(element) ? element : element.id;
|
|
4081
|
+
return [...this.#views.values()].filter((v) => v.hasElement(id));
|
|
4082
|
+
}
|
|
4083
|
+
addElement(parsed) {
|
|
4084
|
+
if (this.#elements.has(parsed.id)) {
|
|
4085
|
+
throw new Error(`Element ${parsed.id} already exists`);
|
|
4086
|
+
}
|
|
4087
|
+
const el = new LikeC4Model.Element(parsed, this);
|
|
4088
|
+
this.#elements.set(el.id, el);
|
|
4089
|
+
const parentId = parentFqn(el.id);
|
|
4090
|
+
if (parentId) {
|
|
4091
|
+
this.#parents.set(el.id, this.element(parentId));
|
|
4092
|
+
this._childrenOf(parentId).push(el);
|
|
4093
|
+
} else {
|
|
4094
|
+
this.#rootElements.add(el);
|
|
4095
|
+
}
|
|
4096
|
+
}
|
|
4097
|
+
addRelation(relation) {
|
|
4098
|
+
if (this.#relations.has(relation.id)) {
|
|
4099
|
+
throw new Error(`Relation ${relation.id} already exists`);
|
|
4100
|
+
}
|
|
4101
|
+
const rel = new LikeC4Model.Relationship(relation, this);
|
|
4102
|
+
this.#relations.set(rel.id, rel);
|
|
4103
|
+
this._incomingTo(relation.target).add(rel);
|
|
4104
|
+
this._outgoingFrom(relation.source).add(rel);
|
|
4105
|
+
const relParent = commonAncestor(relation.source, relation.target);
|
|
4106
|
+
if (relParent) {
|
|
4107
|
+
for (const ancestor of [relParent, ...ancestorsFqn(relParent)]) {
|
|
4108
|
+
this._internalOf(ancestor).add(rel);
|
|
4109
|
+
}
|
|
4110
|
+
}
|
|
4111
|
+
for (const sourceAncestor of ancestorsFqn(relation.source)) {
|
|
4112
|
+
if (sourceAncestor === relParent) {
|
|
4113
|
+
break;
|
|
4114
|
+
}
|
|
4115
|
+
this._outgoingFrom(sourceAncestor).add(rel);
|
|
4116
|
+
}
|
|
4117
|
+
for (const targetAncestor of ancestorsFqn(relation.target)) {
|
|
4118
|
+
if (targetAncestor === relParent) {
|
|
4119
|
+
break;
|
|
4120
|
+
}
|
|
4121
|
+
this._incomingTo(targetAncestor).add(rel);
|
|
4122
|
+
}
|
|
4123
|
+
}
|
|
4124
|
+
_childrenOf(id) {
|
|
4125
|
+
let children = this.#children.get(id);
|
|
4126
|
+
if (!children) {
|
|
4127
|
+
children = [];
|
|
4128
|
+
this.#children.set(id, children);
|
|
4129
|
+
}
|
|
4130
|
+
return children;
|
|
4131
|
+
}
|
|
4132
|
+
_incomingTo(id) {
|
|
4133
|
+
let incoming = this.#incoming.get(id);
|
|
4134
|
+
if (!incoming) {
|
|
4135
|
+
incoming = new RelationsSet();
|
|
4136
|
+
this.#incoming.set(id, incoming);
|
|
4137
|
+
}
|
|
4138
|
+
return incoming;
|
|
4139
|
+
}
|
|
4140
|
+
_outgoingFrom(id) {
|
|
4141
|
+
let outgoing = this.#outgoing.get(id);
|
|
4142
|
+
if (!outgoing) {
|
|
4143
|
+
outgoing = new RelationsSet();
|
|
4144
|
+
this.#outgoing.set(id, outgoing);
|
|
4145
|
+
}
|
|
4146
|
+
return outgoing;
|
|
4147
|
+
}
|
|
4148
|
+
_internalOf(id) {
|
|
4149
|
+
let internal = this.#internal.get(id);
|
|
4150
|
+
if (!internal) {
|
|
4151
|
+
internal = new RelationsSet();
|
|
4152
|
+
this.#internal.set(id, internal);
|
|
4153
|
+
}
|
|
4154
|
+
return internal;
|
|
4155
|
+
}
|
|
4156
|
+
}
|
|
4157
|
+
((LikeC4Model2) => {
|
|
4158
|
+
class Element {
|
|
4159
|
+
constructor(element, model) {
|
|
4160
|
+
this.element = element;
|
|
4161
|
+
this.model = model;
|
|
4162
|
+
}
|
|
4163
|
+
get id() {
|
|
4164
|
+
return this.element.id;
|
|
4165
|
+
}
|
|
4166
|
+
get title() {
|
|
4167
|
+
return this.element.title;
|
|
4168
|
+
}
|
|
4169
|
+
get kind() {
|
|
4170
|
+
return this.element.kind;
|
|
4171
|
+
}
|
|
4172
|
+
get isRoot() {
|
|
4173
|
+
return parentFqn(this.element.id) === null;
|
|
4174
|
+
}
|
|
4175
|
+
get hasNested() {
|
|
4176
|
+
return this.model.children(this).length > 0;
|
|
4177
|
+
}
|
|
4178
|
+
get shape() {
|
|
4179
|
+
return this.element.shape ?? DefaultElementShape;
|
|
4180
|
+
}
|
|
4181
|
+
get color() {
|
|
4182
|
+
return this.element.color ?? DefaultThemeColor;
|
|
4183
|
+
}
|
|
4184
|
+
get tags() {
|
|
4185
|
+
return this.element.tags ?? [];
|
|
4186
|
+
}
|
|
4187
|
+
parent() {
|
|
4188
|
+
return this.model.parent(this);
|
|
4189
|
+
}
|
|
4190
|
+
metadata(key, defaultValue) {
|
|
4191
|
+
return this.element.metadata?.[key] ?? defaultValue;
|
|
4192
|
+
}
|
|
4193
|
+
hasMetadata(key) {
|
|
4194
|
+
return n(this.element.metadata?.[key]);
|
|
4195
|
+
}
|
|
4196
|
+
ancestors() {
|
|
4197
|
+
return this.model.ancestors(this);
|
|
4198
|
+
}
|
|
4199
|
+
siblings() {
|
|
4200
|
+
return this.model.siblings(this);
|
|
4201
|
+
}
|
|
4202
|
+
descendants() {
|
|
4203
|
+
return this.model.descendants(this);
|
|
4204
|
+
}
|
|
4205
|
+
children() {
|
|
4206
|
+
return this.model.children(this);
|
|
4207
|
+
}
|
|
4208
|
+
/**
|
|
4209
|
+
* Views that contain this element
|
|
4210
|
+
*/
|
|
4211
|
+
views() {
|
|
4212
|
+
return this.model.viewsWithElement(this);
|
|
4213
|
+
}
|
|
4214
|
+
incoming(filter) {
|
|
4215
|
+
return this.model.incoming(this, filter);
|
|
4216
|
+
}
|
|
4217
|
+
incomers(filter) {
|
|
4218
|
+
return this.model.incomers(this, filter);
|
|
4219
|
+
}
|
|
4220
|
+
outgoing(filter) {
|
|
4221
|
+
return this.model.outgoing(this, filter);
|
|
4222
|
+
}
|
|
4223
|
+
outgoers(filter) {
|
|
4224
|
+
return this.model.outgoers(this, filter);
|
|
4225
|
+
}
|
|
4226
|
+
internal() {
|
|
4227
|
+
return this.model.internal(this);
|
|
4228
|
+
}
|
|
4229
|
+
// public *descendants(): IterableIterator<LikeC4Element> {
|
|
4230
|
+
// return
|
|
4231
|
+
// }
|
|
4232
|
+
}
|
|
4233
|
+
LikeC4Model2.Element = Element;
|
|
4234
|
+
class Relationship {
|
|
4235
|
+
constructor(relationship, model) {
|
|
4236
|
+
this.relationship = relationship;
|
|
4237
|
+
this.model = model;
|
|
4238
|
+
}
|
|
4239
|
+
get id() {
|
|
4240
|
+
return this.relationship.id;
|
|
4241
|
+
}
|
|
4242
|
+
get title() {
|
|
4243
|
+
return this.relationship.title;
|
|
4244
|
+
}
|
|
4245
|
+
get kind() {
|
|
4246
|
+
return this.relationship.kind ?? null;
|
|
4247
|
+
}
|
|
4248
|
+
get tags() {
|
|
4249
|
+
return this.relationship.tags ?? [];
|
|
4250
|
+
}
|
|
4251
|
+
get source() {
|
|
4252
|
+
return this.model.element(this.relationship.source);
|
|
4253
|
+
}
|
|
4254
|
+
get target() {
|
|
4255
|
+
return this.model.element(this.relationship.target);
|
|
4256
|
+
}
|
|
4257
|
+
metadata(key, defaultValue) {
|
|
4258
|
+
return this.relationship.metadata?.[key] ?? defaultValue;
|
|
4259
|
+
}
|
|
4260
|
+
hasMetadata(key) {
|
|
4261
|
+
return n(this.relationship.metadata?.[key]);
|
|
4262
|
+
}
|
|
4263
|
+
}
|
|
4264
|
+
LikeC4Model2.Relationship = Relationship;
|
|
4265
|
+
})(LikeC4Model || (LikeC4Model = {}));
|
|
4266
|
+
|
|
4267
|
+
const DELAY = "LIKEC4_DELAY";
|
|
4268
|
+
function delay(ms = 100) {
|
|
4269
|
+
return new Promise((resolve) => {
|
|
4270
|
+
setTimeout(() => {
|
|
4271
|
+
resolve(DELAY);
|
|
4272
|
+
}, ms);
|
|
4273
|
+
});
|
|
4274
|
+
}
|
|
4275
|
+
|
|
4276
|
+
const compareRelations = (a, b) => {
|
|
4277
|
+
const parentA = commonAncestor(a.source, a.target);
|
|
4278
|
+
const parentB = commonAncestor(b.source, b.target);
|
|
4279
|
+
if (parentA && !parentB) {
|
|
4280
|
+
return 1;
|
|
4281
|
+
}
|
|
4282
|
+
if (!parentA && parentB) {
|
|
4283
|
+
return -1;
|
|
4284
|
+
}
|
|
4285
|
+
const compareParents = parentA && parentB ? compareFqnHierarchically(parentA, parentB) : 0;
|
|
4286
|
+
if (compareParents === 0) {
|
|
4287
|
+
const compareSource = compareFqnHierarchically(a.source, b.source);
|
|
4288
|
+
if (compareSource !== 0) {
|
|
4289
|
+
return compareSource;
|
|
4290
|
+
}
|
|
4291
|
+
return compareFqnHierarchically(a.target, b.target);
|
|
4292
|
+
}
|
|
4293
|
+
return compareParents;
|
|
4294
|
+
};
|
|
4295
|
+
|
|
4296
|
+
export { DefaultElementShape, DefaultThemeColor, ElementColors, LikeC4Model, LikeC4ViewModel, RelationshipColors, ancestorsFqn, commonAncestor, compareByFqnHierarchically, compareFqnHierarchically, compareRelations, computeColorValues, defaultTheme, delay, i as hasAtLeast, isAncestor, isDescendantOf, isNonEmptyArray, isSameHierarchy, isString, nameFromFqn, nonNullable, notDescendantOf, parentFqn, parentFqnPredicate };
|