finalize rewrite. src restructure. colors methods. many updates from …

…building origami editor

package.json

@@ -35,8 +35,7 @@
 		"eslint-plugin-import": "^2.27.5",
 		"jest": "^29.4.3",
 		"rollup": "^3.15.0",
-		"rollup-plugin-cleanup": "^3.2.1",
-		"typescript": "^4.9.5"
+		"rollup-plugin-cleanup": "^3.2.1"
 	},
 	"jest": {
 		"collectCoverage": true

rollup.config.js

@@ -2,7 +2,7 @@ import cleanup from "rollup-plugin-cleanup";
 import terser from "@rollup/plugin-terser";
 
 const input = "src/index.js";
-const name = "svg";
+const name = "SVG";
 const banner = "/* svg (c) Kraft, MIT License */";
 
 export default [{
@@ -12,16 +12,25 @@ export default [{
 		file: "svg.js",
 		format: "umd",
 		banner,
+		compact: true,
+		generatedCode: {
+			constBindings: true,
+			objectShorthand: true,
+		},
 	},
-	// plugins: [cleanup(), terser()],
-	plugins: [cleanup()],
+	plugins: [cleanup(), terser()],
+	// plugins: [cleanup()],
 }, {
 	input,
 	output: {
 		name,
 		file: "svg.module.js",
 		format: "es",
 		banner,
+		generatedCode: {
+			constBindings: true,
+			objectShorthand: true,
+		},
 	},
 	plugins: [cleanup()],
 }, {
@@ -37,14 +46,4 @@ export default [{
 			objectShorthand: true,
 		},
 	},
-	plugins: [cleanup()],
-}, {
-	input,
-	output: {
-		name,
-		file: "svg.module.comments.js",
-		format: "es",
-		banner,
-	},
-	plugins: [],
 }];

src/colors/convert.js

@@ -0,0 +1,68 @@
+/**
+ * Rabbit Ear (c) Kraft
+ */
+/**
+ * @description Convert hue-saturation-lightness values into
+ * three RGB values, each between 0 and 1 (not 0-255).
+ * @param {number} hue value between 0 and 360
+ * @param {number} saturation value between 0 and 100
+ * @param {number} lightness value between 0 and 100
+ * @returns {number[]} three values between 0 and 255
+ * @linkcode Origami ./src/convert/svgParsers/colors/hexToRGB.js 10
+ */
+export const hslToRgb = (hue, saturation, lightness) => {
+	const s = saturation / 100;
+	const l = lightness / 100;
+	const k = n => (n + hue / 30) % 12;
+	const a = s * Math.min(l, 1 - l);
+	const f = n => (
+		l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))
+	);
+	return [f(0) * 255, f(8) * 255, f(4) * 255];
+};
+/**
+ *
+ */
+const mapHexNumbers = (numbers, map) => {
+	// ensure a minimum number of characters (fill 0 if needed)
+	const chars = Array.from(Array(map.length))
+		.map((_, i) => numbers[i] || "0");
+	// handle abbreviated hex codes: #fb4 or #fb48 (with alpha)
+	return numbers.length <= 4
+		? map.map(i => chars[i]).join("")
+		: chars.join("");
+};
+/**
+ * @description Convert a hex string into an array of
+ * three numbers, the rgb values (between 0 and 1).
+ * This ignores any alpha values.
+ * @param {string} value a hex color code as a string
+ * @returns {number[]} three values between 0 and 255
+ * @linkcode Origami ./src/convert/svgParsers/colors/hexToRGB.js 10
+ */
+export const hexToRgb = (string) => {
+	const numbers = string.replace(/#(?=\S)/g, "");
+	const hasAlpha = numbers.length === 4 || numbers.length === 8;
+	const hexString = hasAlpha
+		? mapHexNumbers(numbers, [0, 0, 1, 1, 2, 2, 3, 3])
+		: mapHexNumbers(numbers, [0, 0, 1, 1, 2, 2]);
+	const c = parseInt(hexString, 16);
+	return hasAlpha
+		? [(c >> 24) & 255, (c >> 16) & 255, (c >> 8) & 255, c & 255]
+		: [(c >> 16) & 255, (c >> 8) & 255, c & 255];
+};
+/**
+ * @param {number} red the red component from 0 to 255
+ * @param {number} green the green component from 0 to 255
+ * @param {number} blue the blue component from 0 to 255
+ * @param {number | undefined} alpha the alpha component from 0 to 1
+ * @returns {string} hex string, with our without alpha.
+ */
+export const rgbToHex = (red, green, blue, alpha) => {
+	const to16 = n => `00${Math.max(0, Math.min(Math.round(n), 255)).toString(16)}`
+		.slice(-2);
+	const hex = `#${[red, green, blue].map(to16).join("")}`;
+	return alpha === undefined
+		? hex
+		: `${hex}${to16(alpha * 255)}`;
+};

src/colors/cssColors.js

@@ -0,0 +1,149 @@
+export default {
+	black: "#000000",
+	silver: "#c0c0c0",
+	gray: "#808080",
+	white: "#ffffff",
+	maroon: "#800000",
+	red: "#ff0000",
+	purple: "#800080",
+	fuchsia: "#ff00ff",
+	green: "#008000",
+	lime: "#00ff00",
+	olive: "#808000",
+	yellow: "#ffff00",
+	navy: "#000080",
+	blue: "#0000ff",
+	teal: "#008080",
+	aqua: "#00ffff",
+	orange: "#ffa500",
+	aliceblue: "#f0f8ff",
+	antiquewhite: "#faebd7",
+	aquamarine: "#7fffd4",
+	azure: "#f0ffff",
+	beige: "#f5f5dc",
+	bisque: "#ffe4c4",
+	blanchedalmond: "#ffebcd",
+	blueviolet: "#8a2be2",
+	brown: "#a52a2a",
+	burlywood: "#deb887",
+	cadetblue: "#5f9ea0",
+	chartreuse: "#7fff00",
+	chocolate: "#d2691e",
+	coral: "#ff7f50",
+	cornflowerblue: "#6495ed",
+	cornsilk: "#fff8dc",
+	crimson: "#dc143c",
+	cyan: "#00ffff",
+	darkblue: "#00008b",
+	darkcyan: "#008b8b",
+	darkgoldenrod: "#b8860b",
+	darkgray: "#a9a9a9",
+	darkgreen: "#006400",
+	darkgrey: "#a9a9a9",
+	darkkhaki: "#bdb76b",
+	darkmagenta: "#8b008b",
+	darkolivegreen: "#556b2f",
+	darkorange: "#ff8c00",
+	darkorchid: "#9932cc",
+	darkred: "#8b0000",
+	darksalmon: "#e9967a",
+	darkseagreen: "#8fbc8f",
+	darkslateblue: "#483d8b",
+	darkslategray: "#2f4f4f",
+	darkslategrey: "#2f4f4f",
+	darkturquoise: "#00ced1",
+	darkviolet: "#9400d3",
+	deeppink: "#ff1493",
+	deepskyblue: "#00bfff",
+	dimgray: "#696969",
+	dimgrey: "#696969",
+	dodgerblue: "#1e90ff",
+	firebrick: "#b22222",
+	floralwhite: "#fffaf0",
+	forestgreen: "#228b22",
+	gainsboro: "#dcdcdc",
+	ghostwhite: "#f8f8ff",
+	gold: "#ffd700",
+	goldenrod: "#daa520",
+	greenyellow: "#adff2f",
+	grey: "#808080",
+	honeydew: "#f0fff0",
+	hotpink: "#ff69b4",
+	indianred: "#cd5c5c",
+	indigo: "#4b0082",
+	ivory: "#fffff0",
+	khaki: "#f0e68c",
+	lavender: "#e6e6fa",
+	lavenderblush: "#fff0f5",
+	lawngreen: "#7cfc00",
+	lemonchiffon: "#fffacd",
+	lightblue: "#add8e6",
+	lightcoral: "#f08080",
+	lightcyan: "#e0ffff",
+	lightgoldenrodyellow: "#fafad2",
+	lightgray: "#d3d3d3",
+	lightgreen: "#90ee90",
+	lightgrey: "#d3d3d3",
+	lightpink: "#ffb6c1",
+	lightsalmon: "#ffa07a",
+	lightseagreen: "#20b2aa",
+	lightskyblue: "#87cefa",
+	lightslategray: "#778899",
+	lightslategrey: "#778899",
+	lightsteelblue: "#b0c4de",
+	lightyellow: "#ffffe0",
+	limegreen: "#32cd32",
+	linen: "#faf0e6",
+	magenta: "#ff00ff",
+	mediumaquamarine: "#66cdaa",
+	mediumblue: "#0000cd",
+	mediumorchid: "#ba55d3",
+	mediumpurple: "#9370db",
+	mediumseagreen: "#3cb371",
+	mediumslateblue: "#7b68ee",
+	mediumspringgreen: "#00fa9a",
+	mediumturquoise: "#48d1cc",
+	mediumvioletred: "#c71585",
+	midnightblue: "#191970",
+	mintcream: "#f5fffa",
+	mistyrose: "#ffe4e1",
+	moccasin: "#ffe4b5",
+	navajowhite: "#ffdead",
+	oldlace: "#fdf5e6",
+	olivedrab: "#6b8e23",
+	orangered: "#ff4500",
+	orchid: "#da70d6",
+	palegoldenrod: "#eee8aa",
+	palegreen: "#98fb98",
+	paleturquoise: "#afeeee",
+	palevioletred: "#db7093",
+	papayawhip: "#ffefd5",
+	peachpuff: "#ffdab9",
+	peru: "#cd853f",
+	pink: "#ffc0cb",
+	plum: "#dda0dd",
+	powderblue: "#b0e0e6",
+	rosybrown: "#bc8f8f",
+	royalblue: "#4169e1",
+	saddlebrown: "#8b4513",
+	salmon: "#fa8072",
+	sandybrown: "#f4a460",
+	seagreen: "#2e8b57",
+	seashell: "#fff5ee",
+	sienna: "#a0522d",
+	skyblue: "#87ceeb",
+	slateblue: "#6a5acd",
+	slategray: "#708090",
+	slategrey: "#708090",
+	snow: "#fffafa",
+	springgreen: "#00ff7f",
+	steelblue: "#4682b4",
+	tan: "#d2b48c",
+	thistle: "#d8bfd8",
+	tomato: "#ff6347",
+	turquoise: "#40e0d0",
+	violet: "#ee82ee",
+	wheat: "#f5deb3",
+	whitesmoke: "#f5f5f5",
+	yellowgreen: "#9acd32",
+};

src/colors/index.js

@@ -0,0 +1,12 @@
+/**
+ * SVG (c) Kraft
+ */
+import cssColors from "./cssColors.js";
+import * as convert from "./convert.js";
+import * as parseColor from "./parseColor.js";
+
+export default {
+	cssColors,
+	...convert,
+	...parseColor,
+};

src/colors/parseColor.js

@@ -0,0 +1,76 @@
+/**
+ * Rabbit Ear (c) Kraft
+ */
+import cssColors from "./cssColors.js";
+import {
+	hexToRgb,
+	hslToRgb,
+	rgbToHex,
+} from "./convert.js";
+/**
+ *
+ */
+const getParenNumbers = str => {
+	const match = str.match(/\(([^\)]+)\)/g);
+	if (match == null || !match.length) { return []; }
+	return match[0]
+		.substring(1, match[0].length - 1)
+		.split(/[\s,]+/)
+		.map(parseFloat);
+};
+/**
+ * @description input a color as a string and get back the RGB
+ * values as three numbers in an array. This supports CSS/SVG
+ * color strings like named colors, hex colors, rgb(), hsl().
+ * @returns {number[] | undefined} red green blue values between 0 and 255,
+ * with possible 4th value between 0 and 1.
+ */
+export const parseColorToRgb = (string) => {
+	if (cssColors[string]) { return hexToRgb(cssColors[string]); }
+	if (string[0] === "#") { return hexToRgb(string); }
+	if (string.substring(0, 4) === "rgba"
+		|| string.substring(0, 3) === "rgb") {
+		const values = getParenNumbers(string);
+		[0, 1, 2]
+			.filter(i => values[i] === undefined)
+			.forEach(i => { values[i] = 0; });
+		return values;
+	}
+	if (string.substring(0, 4) === "hsla"
+		|| string.substring(0, 3) === "hsl") {
+		const values = getParenNumbers(string);
+		[0, 1, 2]
+			.filter(i => values[i] === undefined)
+			.forEach(i => { values[i] = 0; });
+		const rgb = hslToRgb(...values);
+		if (values.length === 4) { rgb.push(values[3]); }
+		return rgb;
+	}
+	return undefined;
+};
+/**
+ * @description input a color as a string and return the
+ * same color as a hex value string. This supports CSS/SVG
+ * color strings like named colors, hex colors, rgb(), hsl().
+ */
+export const parseColorToHex = (string) => {
+	if (cssColors[string]) { return cssColors[string].toUpperCase(); }
+	// convert back and forth, this converts 3 or 4 digit hex to 6 or 8.
+	if (string[0] === "#") { return rgbToHex(...hexToRgb(string)); }
+	if (string.substring(0, 4) === "rgba"
+		|| string.substring(0, 3) === "rgb") {
+		return rgbToHex(...getParenNumbers(string));
+	}
+	if (string.substring(0, 4) === "hsla"
+		|| string.substring(0, 3) === "hsl") {
+		const values = getParenNumbers(string);
+		[0, 1, 2]
+			.filter(i => values[i] === undefined)
+			.forEach(i => { values[i] = 0; });
+		const rgb = hslToRgb(...values);
+		if (values.length === 4) { rgb.push(values[3]); }
+		[0, 1, 2].forEach(i => { rgb[i] *= 255; });
+		rgbToHex(...rgb);
+	}
+	return undefined;
+};