@jannchie/icons 0.0.0-stage → 0.2.0

package/dist/src/rating.js

@@ -0,0 +1,282 @@
+import { circle, rounded } from "./geometry.js";
+import { line, textWidth } from "./letters.js";
+//#region src/rating.js
+var sq = (x0, y0, x1, y1) => [
+	[x0, y0],
+	[x1, y0],
+	[x1, y1],
+	[x0, y1]
+];
+var FRAMES = {
+	square: {
+		shape: (r) => rounded(sq(2.5, 2.5, 21.5, 21.5), Math.min(r, 2.5)),
+		box: [
+			5.5,
+			5.5,
+			18.5,
+			18.5
+		]
+	},
+	tall: {
+		shape: (r) => rounded(sq(3.5, 2.5, 20.5, 21.5), Math.min(r, 2.5)),
+		box: [
+			7,
+			5,
+			17,
+			19
+		]
+	},
+	divided: {
+		shape: (r) => [rounded(sq(2.5, 2.5, 21.5, 21.5), Math.min(r, 2.5)), "M2.5 17.5H21.5"],
+		box: [
+			5.5,
+			5.5,
+			18.5,
+			14
+		]
+	},
+	wide: {
+		shape: (r) => rounded(sq(2.5, 4.5, 21.5, 19.5), Math.min(r, 2.5)),
+		box: [
+			5,
+			8,
+			19,
+			16
+		]
+	},
+	octagon: {
+		shape: (r) => rounded([
+			[7.5, 2.5],
+			[16.5, 2.5],
+			[21.5, 7.5],
+			[21.5, 16.5],
+			[16.5, 21.5],
+			[7.5, 21.5],
+			[2.5, 16.5],
+			[2.5, 7.5]
+		], Math.min(r, 1)),
+		box: [
+			5.5,
+			5.5,
+			18.5,
+			18.5
+		]
+	},
+	hexagon: {
+		shape: (r) => rounded([
+			[7, 3.5],
+			[17, 3.5],
+			[22, 12],
+			[17, 20.5],
+			[7, 20.5],
+			[2, 12]
+		], Math.min(r, 1.5)),
+		box: [
+			7,
+			6.5,
+			17,
+			17.5
+		]
+	},
+	diamond: {
+		shape: (r) => rounded([
+			[12, 1.5],
+			[22.5, 12],
+			[12, 22.5],
+			[1.5, 12]
+		], Math.min(r, 1.5)),
+		box: [
+			9.5,
+			8.5,
+			14.5,
+			15.5
+		]
+	},
+	circle: {
+		shape: () => circle(12, 12, 10),
+		box: [
+			6,
+			8.5,
+			18,
+			15.5
+		]
+	},
+	shield: {
+		shape: (r) => rounded([
+			[3.5, 2.5],
+			[20.5, 2.5],
+			[20.5, 12.5],
+			[12, 21.5],
+			[3.5, 12.5]
+		], Math.min(r, 2)),
+		box: [
+			6.5,
+			5.25,
+			17.5,
+			12.75
+		]
+	},
+	house: {
+		shape: (r) => rounded([
+			[12, 2],
+			[21.5, 9.5],
+			[21.5, 21.5],
+			[2.5, 21.5],
+			[2.5, 9.5]
+		], Math.min(r, 2)),
+		box: [
+			5.5,
+			11,
+			18.5,
+			18.5
+		]
+	}
+};
+var SYSTEMS = {
+	mpa: {
+		frame: "square",
+		zh: "美国电影 MPA",
+		ratings: [
+			"G",
+			"PG",
+			"PG/13",
+			"R",
+			"NC/17"
+		]
+	},
+	esrb: {
+		frame: "tall",
+		zh: "北美游戏 ESRB",
+		ratings: [
+			"E",
+			"E/10+",
+			"T",
+			"M",
+			"AO",
+			"RP"
+		]
+	},
+	pegi: {
+		frame: "divided",
+		zh: "欧洲游戏 PEGI",
+		ratings: [
+			"3",
+			"7",
+			"12",
+			"16",
+			"18"
+		]
+	},
+	bbfc: {
+		frame: "wide",
+		zh: "英国 BBFC",
+		ratings: [
+			"U",
+			"PG",
+			"12A",
+			"12",
+			"15",
+			"18",
+			"R18"
+		]
+	},
+	acb: {
+		frame: "octagon",
+		zh: "澳大利亚 ACB",
+		ratings: [
+			"G",
+			"PG",
+			"M",
+			"MA/15+",
+			"R/18+",
+			"X/18+"
+		]
+	},
+	eirin: {
+		frame: "hexagon",
+		zh: "日本电影 映伦",
+		ratings: [
+			"G",
+			"PG/12",
+			"R/15+",
+			"R/18+"
+		]
+	},
+	cero: {
+		frame: "diamond",
+		zh: "日本游戏 CERO",
+		ratings: [
+			"A",
+			"B",
+			"C",
+			"D",
+			"Z"
+		]
+	},
+	kmrb: {
+		frame: "circle",
+		zh: "韩国电影 KMRB",
+		ratings: [
+			"ALL",
+			"12",
+			"15",
+			"18"
+		]
+	},
+	usk: {
+		frame: "shield",
+		zh: "德国游戏 USK",
+		ratings: [
+			"0",
+			"6",
+			"12",
+			"16",
+			"18"
+		]
+	},
+	cadpa: {
+		frame: "house",
+		zh: "中国游戏 适龄提示",
+		ratings: [
+			"8+",
+			"12+",
+			"16+"
+		]
+	}
+};
+var GAP = 2;
+var PLUS = 3;
+var PLUS_GAP = 2;
+var MAX_SY = 1.2;
+var ASPECT = .95;
+function layout(rows, [x0, y0, x1, y1]) {
+	const extra = (r) => r.plus ? 5 : 0;
+	const sy = Math.min(MAX_SY, (y1 - y0 - GAP * (rows.length - 1)) / (6 * rows.length));
+	const sx = Math.min(sy * ASPECT, ...rows.map((r) => (x1 - x0 - extra(r) - GAP * (r.chars.length - 1)) / textWidth(r.chars, 1, 0)));
+	const h = 6 * sy;
+	const top = (y0 + y1) / 2 - (h * rows.length + GAP * (rows.length - 1)) / 2;
+	return rows.flatMap((r, i) => {
+		const width = textWidth(r.chars, sx, GAP);
+		const left = (x0 + x1) / 2 - (width + extra(r)) / 2;
+		const y = top + i * (h + GAP);
+		const out = line(r.chars, [left + width / 2, y + h / 2], sx, GAP, sy);
+		if (r.plus) {
+			const [px, py] = [left + width + PLUS_GAP + PLUS / 2, y + PLUS / 2];
+			out.push(`M${px - PLUS / 2} ${py}H${px + PLUS / 2}M${px} ${py - PLUS / 2}V${py + PLUS / 2}`);
+		}
+		return out;
+	});
+}
+function rating(system, text, radius) {
+	const { shape, box } = FRAMES[SYSTEMS[system].frame];
+	const rows = text.split("/").map((r) => ({
+		chars: r.replace("+", ""),
+		plus: r.endsWith("+")
+	}));
+	return [shape(radius), ...layout(rows, box).map((d) => ({
+		d,
+		thin: true
+	}))].flat();
+}
+//#endregion
+export { SYSTEMS, rating };

package/dist/src/render.js

@@ -0,0 +1,116 @@
+import { axisLines, finalize, minify } from "./svg.js";
+import { ROLES } from "./tone.js";
+import { affine, mapPath } from "./transform.js";
+//#region src/render.js
+var HINT_MAX_SCALE = 3;
+var axisLinesOf = (paths, widthOf) => paths.flatMap((p) => axisLines(p.d).map((l) => [...l, widthOf(p)]));
+function bestShift(lines, k) {
+	if (!lines.length) return 0;
+	const off = ([, v, , n]) => v * k - (n % 2 ? .5 : 0);
+	const frac = (v) => v - Math.round(v);
+	const cost = (dx) => lines.reduce((s, l) => s + l[2] * Math.abs(frac(off(l) + dx)), 0);
+	let best = [0, cost(0)];
+	for (const l of lines) {
+		const dx = -frac(off(l));
+		const c = cost(dx);
+		if (c < best[1] - 1e-9 || Math.abs(c - best[1]) < 1e-9 && Math.abs(dx) < Math.abs(best[0])) best = [dx, c];
+	}
+	return best[0];
+}
+function hint(paths, stroke, px) {
+	const k = px / 24;
+	const line = Math.max(1, Math.round(stroke * k));
+	const pxWidth = (p) => p.detail ? (p.width ?? stroke) * k : p.dot ? Math.max(line, Math.floor(p.width * k)) : Math.max(1, Math.round((p.width ?? stroke) * k));
+	const lines = axisLinesOf(paths.filter((p) => !p.detail && !p.fill), pxWidth);
+	const dx = bestShift(lines.filter((l) => l[0] === "x"), k) / k;
+	const dy = bestShift(lines.filter((l) => l[0] === "y"), k) / k;
+	return paths.map((p) => {
+		const d = dx || dy ? minify(affine(p.d, 1, 1, dx, dy)) : p.d;
+		if (p.dot) {
+			const o = pxWidth(p) % 2 ? .5 : 0;
+			const f = (v) => (Math.round(v * k - o) + o) / k;
+			return {
+				...p,
+				d: minify(mapPath(d, ([x, y]) => [f(x), f(y)])),
+				width: pxWidth(p) / k
+			};
+		}
+		return {
+			...p,
+			d,
+			width: p.detail ? p.width : pxWidth(p) / k
+		};
+	});
+}
+function animatedPaths(icon, opts, stroke) {
+	const { duration, frames: n, draw } = icon.animation;
+	const frames = Array.from({ length: n }, (_, i) => finalize(draw({
+		...opts,
+		t: i / n
+	}), stroke, { animated: true }));
+	const shape = (d) => d.replace(/-?(?:\d+\.?\d*|\.\d+)(?:e-?\d+)?/g, "#").replace(/\s/g, "");
+	return frames[0].map((p, j) => {
+		const ds = frames.map((f) => f[j]?.d);
+		const same = ds.every((d) => d && shape(d) === shape(p.d));
+		const still = ds.every((d) => d === p.d);
+		return same && !still ? {
+			...p,
+			frames: [...ds, ds[0]],
+			dur: duration
+		} : p;
+	});
+}
+var animateAttrs = (p) => p.frames ? {
+	attributeName: "d",
+	dur: `${p.dur}ms`,
+	repeatCount: "indefinite",
+	values: p.frames.join(";")
+} : null;
+var finalized = /* @__PURE__ */ new Map();
+var hinted = /* @__PURE__ */ new Map();
+function pathsOf(icon, corner, weight, px = 0) {
+	const base = `${icon.name}|${corner.radius}|${weight.stroke}`;
+	let paths = finalized.get(base);
+	if (!paths) {
+		const stroke = weight.stroke;
+		const opts = {
+			radius: corner.radius,
+			stroke,
+			weight: weight.id
+		};
+		paths = icon.animation ? animatedPaths(icon, opts, stroke) : finalize(icon.draw(opts), stroke);
+		finalized.set(base, paths);
+	}
+	if (!px || px / 24 >= HINT_MAX_SCALE || icon.animation) return paths;
+	const key = `${base}|${px}`;
+	let out = hinted.get(key);
+	if (!out) {
+		out = hint(paths, weight.stroke, px);
+		hinted.set(key, out);
+	}
+	return out;
+}
+var callbacks = /* @__PURE__ */ new WeakMap();
+typeof IntersectionObserver === "undefined" || new IntersectionObserver((entries) => {
+	for (const e of entries) callbacks.get(e.target)?.(e.isIntersecting);
+}, { rootMargin: "600px 0px" });
+var svgAttrs = (stroke, sharp, colors) => ({
+	"fill": "none",
+	"stroke": colors?.primary ?? "currentColor",
+	"stroke-width": stroke,
+	"stroke-linecap": sharp ? "square" : "round",
+	"stroke-linejoin": sharp ? "miter" : "round",
+	"stroke-miterlimit": sharp ? 2 : void 0
+});
+var pathAttrs = (p, colors) => {
+	const color = p.tone && p.tone !== "primary" ? colors?.[p.tone] : void 0;
+	return {
+		"d": p.d,
+		"stroke-width": p.width ? +p.width.toFixed(3) : void 0,
+		"stroke": color,
+		"fill": p.fill ? color ?? colors?.primary ?? "currentColor" : void 0
+	};
+};
+Object.fromEntries(Object.keys(ROLES).map((r) => [r, `var(--icon-${r}, currentColor)`]));
+//#endregion
+export { animateAttrs, pathAttrs, pathsOf, svgAttrs };

package/dist/src/resin.js

@@ -0,0 +1,53 @@
+import { crisp, rounded } from "./geometry.js";
+import { line } from "./letters.js";
+//#region src/resin.js
+var V = [
+	[12, 3],
+	[21.5, 19.5],
+	[2.5, 19.5]
+];
+var lerp = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+var S = 2.25;
+function arrow(k, radius) {
+	const [prev, at, next] = [
+		V[(k + 2) % 3],
+		V[k],
+		V[(k + 1) % 3]
+	];
+	const from = lerp(prev, at, .58);
+	const to = lerp(at, next, .36);
+	const len = Math.hypot(next[0] - at[0], next[1] - at[1]);
+	const t = [(next[0] - at[0]) / len, (next[1] - at[1]) / len];
+	const n = [-t[1], t[0]];
+	const wing = (s) => [to[0] - (t[0] + s * n[0]) * S, to[1] - (t[1] + s * n[1]) * S];
+	return [rounded([
+		from,
+		at,
+		to
+	], Math.min(radius, 2), false), rounded([
+		wing(1),
+		to,
+		wing(-1)
+	], crisp(radius), false)];
+}
+var RESIN = Object.fromEntries([
+	["1", "PET"],
+	["2", "HDPE"],
+	["3", "PVC"],
+	["4", "LDPE"],
+	["5", "PP"],
+	["6", "PS"],
+	["7", "OTHER"]
+].map(([n, abbr]) => [n, {
+	zh: `${n} ${abbr}`,
+	paths: (radius) => [...[
+		0,
+		1,
+		2
+	].flatMap((k) => arrow(k, radius)), ...line(n, [12, 14]).map((d) => ({
+		d,
+		detail: true
+	}))]
+}]));
+//#endregion
+export { RESIN };

package/dist/src/roman.js

@@ -0,0 +1,47 @@
+//#region src/roman.js
+var [TOP, BOTTOM] = [5.5, 18.5];
+var WIDTH = {
+	I: 0,
+	V: 6,
+	X: 6
+};
+var OVERHANG = 1;
+var GAP = 3;
+var ROMAN = Object.fromEntries([
+	"I",
+	"II",
+	"III",
+	"IV",
+	"V",
+	"VI",
+	"VII",
+	"VIII",
+	"IX",
+	"X",
+	"XI",
+	"XII"
+].map((s, i) => [i + 1, s]));
+function stroke(c, x) {
+	if (c === "I") return [`M${x} ${TOP}V${BOTTOM}`];
+	if (c === "V") return [`M${x} ${TOP}L${x + 3} ${BOTTOM}L${x + 6} ${TOP}`];
+	return [`M${x} ${TOP}L${x + 6} ${BOTTOM}`, `M${x + 6} ${TOP}L${x} ${BOTTOM}`];
+}
+function roman(n) {
+	const chars = [...ROMAN[n]];
+	const width = chars.reduce((w, c) => w + WIDTH[c], 0) + GAP * (chars.length - 1);
+	const left = Math.floor(12 - width / 2) + .5;
+	let x = left;
+	const paths = chars.flatMap((c) => {
+		const out = stroke(c, x);
+		x += WIDTH[c] + GAP;
+		return out;
+	});
+	const [l, r] = [left - OVERHANG, left + width + OVERHANG];
+	return [
+		`M${l} ${TOP}H${r}`,
+		`M${l} ${BOTTOM}H${r}`,
+		...paths
+	];
+}
+//#endregion
+export { roman };

package/dist/src/roofs.js

@@ -0,0 +1,28 @@
+import { crisp, rounded } from "./geometry.js";
+//#region src/roofs.js
+var eaves = (cx, top, bottom, ridge, eave, radius) => rounded([
+	[
+		cx - eave,
+		bottom,
+		crisp(radius)
+	],
+	[
+		cx - eave - 1,
+		bottom - 1,
+		crisp(radius)
+	],
+	[cx - ridge, top],
+	[cx + ridge, top],
+	[
+		cx + eave + 1,
+		bottom - 1,
+		crisp(radius)
+	],
+	[
+		cx + eave,
+		bottom,
+		crisp(radius)
+	]
+], radius);
+//#endregion
+export { eaves };