@tsdraw/core 0.5.0 → 0.5.1
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 +19 -98
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +19 -98
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -253,105 +253,26 @@ function zoomViewport(viewport, factor, centerX, centerY) {
|
|
|
253
253
|
}
|
|
254
254
|
|
|
255
255
|
// src/utils/colors.ts
|
|
256
|
+
var DARK_COLORS = {
|
|
257
|
+
black: "#f0f0f0",
|
|
258
|
+
grey: "#aeb8c2",
|
|
259
|
+
"light-violet": "#cf6ef5",
|
|
260
|
+
violet: "#a83ce0",
|
|
261
|
+
blue: "#5b7dff",
|
|
262
|
+
"light-blue": "#4fb3ff",
|
|
263
|
+
yellow: "#f4b13a",
|
|
264
|
+
orange: "#ef7a24",
|
|
265
|
+
green: "#1fb27a",
|
|
266
|
+
"light-green": "#4ecb66",
|
|
267
|
+
"light-red": "#ff6f78",
|
|
268
|
+
red: "#f24343",
|
|
269
|
+
white: "#ffffff"
|
|
270
|
+
};
|
|
256
271
|
function resolveThemeColor(colorStyle, theme) {
|
|
257
|
-
const
|
|
258
|
-
if (!
|
|
259
|
-
if (theme === "light") return
|
|
260
|
-
return
|
|
261
|
-
}
|
|
262
|
-
function invertAndHueRotate180(color) {
|
|
263
|
-
const rgb = parseHexColor(color);
|
|
264
|
-
if (!rgb) return color;
|
|
265
|
-
const inverted = {
|
|
266
|
-
r: 255 - rgb.r,
|
|
267
|
-
g: 255 - rgb.g,
|
|
268
|
-
b: 255 - rgb.b
|
|
269
|
-
};
|
|
270
|
-
const hsl = rgbToHsl(inverted.r, inverted.g, inverted.b);
|
|
271
|
-
const rotated = hslToRgb((hsl.h + 180) % 360, hsl.s, hsl.l);
|
|
272
|
-
return rgbToHex(rotated.r, rotated.g, rotated.b);
|
|
273
|
-
}
|
|
274
|
-
function parseHexColor(color) {
|
|
275
|
-
const normalized = color.trim().toLowerCase();
|
|
276
|
-
if (!normalized.startsWith("#")) return null;
|
|
277
|
-
if (normalized.length === 4) {
|
|
278
|
-
return {
|
|
279
|
-
r: parseInt(normalized[1] + normalized[1], 16),
|
|
280
|
-
g: parseInt(normalized[2] + normalized[2], 16),
|
|
281
|
-
b: parseInt(normalized[3] + normalized[3], 16)
|
|
282
|
-
};
|
|
283
|
-
}
|
|
284
|
-
if (normalized.length !== 7) return null;
|
|
285
|
-
return {
|
|
286
|
-
r: parseInt(normalized.slice(1, 3), 16),
|
|
287
|
-
g: parseInt(normalized.slice(3, 5), 16),
|
|
288
|
-
b: parseInt(normalized.slice(5, 7), 16)
|
|
289
|
-
};
|
|
290
|
-
}
|
|
291
|
-
function rgbToHex(r, g, b) {
|
|
292
|
-
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
|
293
|
-
}
|
|
294
|
-
function toHex(value) {
|
|
295
|
-
return Math.round(Math.max(0, Math.min(255, value))).toString(16).padStart(2, "0");
|
|
296
|
-
}
|
|
297
|
-
function rgbToHsl(r, g, b) {
|
|
298
|
-
const red = r / 255;
|
|
299
|
-
const green = g / 255;
|
|
300
|
-
const blue = b / 255;
|
|
301
|
-
const maxChannel = Math.max(red, green, blue);
|
|
302
|
-
const minChannel = Math.min(red, green, blue);
|
|
303
|
-
const delta = maxChannel - minChannel;
|
|
304
|
-
const lightness = (maxChannel + minChannel) / 2;
|
|
305
|
-
if (delta === 0) {
|
|
306
|
-
return { h: 0, s: 0, l: lightness };
|
|
307
|
-
}
|
|
308
|
-
const saturation = lightness > 0.5 ? delta / (2 - maxChannel - minChannel) : delta / (maxChannel + minChannel);
|
|
309
|
-
let hue = 0;
|
|
310
|
-
if (maxChannel === red) {
|
|
311
|
-
hue = ((green - blue) / delta + (green < blue ? 6 : 0)) * 60;
|
|
312
|
-
} else if (maxChannel === green) {
|
|
313
|
-
hue = ((blue - red) / delta + 2) * 60;
|
|
314
|
-
} else {
|
|
315
|
-
hue = ((red - green) / delta + 4) * 60;
|
|
316
|
-
}
|
|
317
|
-
return { h: hue, s: saturation, l: lightness };
|
|
318
|
-
}
|
|
319
|
-
function hslToRgb(h, s, l) {
|
|
320
|
-
if (s === 0) {
|
|
321
|
-
const channel = l * 255;
|
|
322
|
-
return { r: channel, g: channel, b: channel };
|
|
323
|
-
}
|
|
324
|
-
const chroma = (1 - Math.abs(2 * l - 1)) * s;
|
|
325
|
-
const hueSegment = h / 60;
|
|
326
|
-
const x = chroma * (1 - Math.abs(hueSegment % 2 - 1));
|
|
327
|
-
let red = 0;
|
|
328
|
-
let green = 0;
|
|
329
|
-
let blue = 0;
|
|
330
|
-
if (hueSegment >= 0 && hueSegment < 1) {
|
|
331
|
-
red = chroma;
|
|
332
|
-
green = x;
|
|
333
|
-
} else if (hueSegment < 2) {
|
|
334
|
-
red = x;
|
|
335
|
-
green = chroma;
|
|
336
|
-
} else if (hueSegment < 3) {
|
|
337
|
-
green = chroma;
|
|
338
|
-
blue = x;
|
|
339
|
-
} else if (hueSegment < 4) {
|
|
340
|
-
green = x;
|
|
341
|
-
blue = chroma;
|
|
342
|
-
} else if (hueSegment < 5) {
|
|
343
|
-
red = x;
|
|
344
|
-
blue = chroma;
|
|
345
|
-
} else {
|
|
346
|
-
red = chroma;
|
|
347
|
-
blue = x;
|
|
348
|
-
}
|
|
349
|
-
const match = l - chroma / 2;
|
|
350
|
-
return {
|
|
351
|
-
r: (red + match) * 255,
|
|
352
|
-
g: (green + match) * 255,
|
|
353
|
-
b: (blue + match) * 255
|
|
354
|
-
};
|
|
272
|
+
const lightThemeColor = DEFAULT_COLORS[colorStyle];
|
|
273
|
+
if (!lightThemeColor) return colorStyle;
|
|
274
|
+
if (theme === "light") return lightThemeColor;
|
|
275
|
+
return DARK_COLORS[colorStyle] ?? lightThemeColor;
|
|
355
276
|
}
|
|
356
277
|
var CanvasRenderer = class {
|
|
357
278
|
theme = "light";
|