@grida/svg-editor 1.0.0-alpha.1

package/dist/paint-DHq_3iwU.js

@@ -0,0 +1,509 @@
+require("./dom-CfP_ZURh.js");
+let svg_pathdata = require("svg-pathdata");
+//#region src/core/intents.ts
+function num(doc, id, name, fallback = 0) {
+	const v = doc.get_attr(id, name);
+	if (v === null || v === "") return fallback;
+	const n = parseFloat(v);
+	return Number.isFinite(n) ? n : fallback;
+}
+function capture_translate_baseline(doc, id) {
+	const tag = doc.tag_of(id);
+	const own_transform = doc.get_attr(id, "transform");
+	if (own_transform !== null || tag === "g") return {
+		type: "viaTransform",
+		transform: own_transform
+	};
+	switch (tag) {
+		case "rect": return {
+			type: "rect",
+			x: num(doc, id, "x"),
+			y: num(doc, id, "y")
+		};
+		case "circle": return {
+			type: "circle",
+			cx: num(doc, id, "cx"),
+			cy: num(doc, id, "cy")
+		};
+		case "ellipse": return {
+			type: "ellipse",
+			cx: num(doc, id, "cx"),
+			cy: num(doc, id, "cy")
+		};
+		case "line": return {
+			type: "line",
+			x1: num(doc, id, "x1"),
+			y1: num(doc, id, "y1"),
+			x2: num(doc, id, "x2"),
+			y2: num(doc, id, "y2")
+		};
+		case "polyline": return {
+			type: "polyline",
+			points: doc.get_attr(id, "points") ?? ""
+		};
+		case "polygon": return {
+			type: "polygon",
+			points: doc.get_attr(id, "points") ?? ""
+		};
+		case "path": return {
+			type: "path",
+			d: doc.get_attr(id, "d") ?? ""
+		};
+		case "text": return {
+			type: "text",
+			x: num(doc, id, "x"),
+			y: num(doc, id, "y")
+		};
+		case "tspan": return {
+			type: "tspan",
+			x: num(doc, id, "x"),
+			y: num(doc, id, "y")
+		};
+		case "image": return {
+			type: "image",
+			x: num(doc, id, "x"),
+			y: num(doc, id, "y")
+		};
+		case "use": return {
+			type: "use",
+			x: num(doc, id, "x"),
+			y: num(doc, id, "y")
+		};
+		default: return { type: "unsupported" };
+	}
+}
+function shift_points_string(points, dx, dy) {
+	const nums = points.split(/[\s,]+/).filter(Boolean).map(Number);
+	const out = [];
+	for (let i = 0; i + 1 < nums.length; i += 2) out.push(`${nums[i] + dx},${nums[i + 1] + dy}`);
+	return out.join(" ");
+}
+function compose_leading_translate(existing, dx, dy) {
+	if (dx === 0 && dy === 0) return existing ? existing : null;
+	if (!existing) return `translate(${dx} ${dy})`;
+	const N = "[+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:[eE][+-]?\\d+)?";
+	const re = new RegExp(`^\\s*translate\\(\\s*(${N})(?:\\s*,\\s*|\\s+)(${N})\\s*\\)\\s*(.*)$`);
+	const m = existing.match(re);
+	if (m) {
+		const tx = parseFloat(m[1]) + dx;
+		const ty = parseFloat(m[2]) + dy;
+		const rest = m[3].trim();
+		return rest ? `translate(${tx} ${ty}) ${rest}` : `translate(${tx} ${ty})`;
+	}
+	return `translate(${dx} ${dy}) ${existing}`;
+}
+function shift_path_d(d, dx, dy) {
+	if (dx === 0 && dy === 0) return d;
+	try {
+		return new svg_pathdata.SVGPathData(d).transform(svg_pathdata.SVGPathDataTransformer.TRANSLATE(dx, dy)).encode();
+	} catch {
+		return d;
+	}
+}
+function apply_translate(doc, id, baseline, dx, dy) {
+	switch (baseline.type) {
+		case "viaTransform":
+			doc.set_attr(id, "transform", compose_leading_translate(baseline.transform ?? "", dx, dy));
+			return;
+		case "rect":
+		case "image":
+		case "use":
+		case "text":
+		case "tspan":
+			doc.set_attr(id, "x", String(baseline.x + dx));
+			doc.set_attr(id, "y", String(baseline.y + dy));
+			return;
+		case "circle":
+		case "ellipse":
+			doc.set_attr(id, "cx", String(baseline.cx + dx));
+			doc.set_attr(id, "cy", String(baseline.cy + dy));
+			return;
+		case "line":
+			doc.set_attr(id, "x1", String(baseline.x1 + dx));
+			doc.set_attr(id, "y1", String(baseline.y1 + dy));
+			doc.set_attr(id, "x2", String(baseline.x2 + dx));
+			doc.set_attr(id, "y2", String(baseline.y2 + dy));
+			return;
+		case "polyline":
+		case "polygon":
+			doc.set_attr(id, "points", shift_points_string(baseline.points, dx, dy));
+			return;
+		case "path":
+			doc.set_attr(id, "d", shift_path_d(baseline.d, dx, dy));
+			return;
+		case "unsupported": return;
+	}
+}
+function is_resizable(tag) {
+	switch (tag) {
+		case "rect":
+		case "image":
+		case "use":
+		case "circle":
+		case "ellipse":
+		case "line":
+		case "polyline":
+		case "polygon":
+		case "path":
+		case "text": return true;
+		default: return false;
+	}
+}
+function capture_resize_baseline(doc, id, bbox) {
+	const tag = doc.tag_of(id);
+	let attrs;
+	switch (tag) {
+		case "rect":
+			attrs = {
+				kind: "rect",
+				x: num(doc, id, "x"),
+				y: num(doc, id, "y"),
+				w: num(doc, id, "width", bbox.width),
+				h: num(doc, id, "height", bbox.height)
+			};
+			break;
+		case "image":
+			attrs = {
+				kind: "image",
+				x: num(doc, id, "x"),
+				y: num(doc, id, "y"),
+				w: num(doc, id, "width", bbox.width),
+				h: num(doc, id, "height", bbox.height)
+			};
+			break;
+		case "use":
+			attrs = {
+				kind: "use",
+				x: num(doc, id, "x"),
+				y: num(doc, id, "y"),
+				w: num(doc, id, "width", bbox.width),
+				h: num(doc, id, "height", bbox.height)
+			};
+			break;
+		case "circle":
+			attrs = {
+				kind: "circle",
+				cx: num(doc, id, "cx"),
+				cy: num(doc, id, "cy"),
+				r: num(doc, id, "r")
+			};
+			break;
+		case "ellipse":
+			attrs = {
+				kind: "ellipse",
+				cx: num(doc, id, "cx"),
+				cy: num(doc, id, "cy"),
+				rx: num(doc, id, "rx"),
+				ry: num(doc, id, "ry")
+			};
+			break;
+		case "line":
+			attrs = {
+				kind: "line",
+				x1: num(doc, id, "x1"),
+				y1: num(doc, id, "y1"),
+				x2: num(doc, id, "x2"),
+				y2: num(doc, id, "y2")
+			};
+			break;
+		case "polyline":
+			attrs = {
+				kind: "polyline",
+				points: doc.get_attr(id, "points") ?? ""
+			};
+			break;
+		case "polygon":
+			attrs = {
+				kind: "polygon",
+				points: doc.get_attr(id, "points") ?? ""
+			};
+			break;
+		case "path":
+			attrs = {
+				kind: "path",
+				d: doc.get_attr(id, "d") ?? ""
+			};
+			break;
+		case "text":
+			attrs = {
+				kind: "text",
+				x: num(doc, id, "x"),
+				y: num(doc, id, "y"),
+				fontSize: parseFloat(doc.get_attr(id, "font-size") ?? "16") || 16
+			};
+			break;
+		default: attrs = { kind: "unsupported" };
+	}
+	return {
+		bbox,
+		attrs
+	};
+}
+function compute_resize_factors(baseline, dir, dx, dy, shift) {
+	const b = baseline.bbox;
+	let anchorX = 0;
+	let anchorY = 0;
+	let baseHX = 0;
+	let baseHY = 0;
+	let affectsX = true;
+	let affectsY = true;
+	switch (dir) {
+		case "nw":
+			anchorX = b.x + b.width;
+			anchorY = b.y + b.height;
+			baseHX = b.x;
+			baseHY = b.y;
+			break;
+		case "n":
+			anchorX = b.x + b.width / 2;
+			anchorY = b.y + b.height;
+			baseHX = b.x + b.width / 2;
+			baseHY = b.y;
+			affectsX = false;
+			break;
+		case "ne":
+			anchorX = b.x;
+			anchorY = b.y + b.height;
+			baseHX = b.x + b.width;
+			baseHY = b.y;
+			break;
+		case "e":
+			anchorX = b.x;
+			anchorY = b.y + b.height / 2;
+			baseHX = b.x + b.width;
+			baseHY = b.y + b.height / 2;
+			affectsY = false;
+			break;
+		case "se":
+			anchorX = b.x;
+			anchorY = b.y;
+			baseHX = b.x + b.width;
+			baseHY = b.y + b.height;
+			break;
+		case "s":
+			anchorX = b.x + b.width / 2;
+			anchorY = b.y;
+			baseHX = b.x + b.width / 2;
+			baseHY = b.y + b.height;
+			affectsX = false;
+			break;
+		case "sw":
+			anchorX = b.x + b.width;
+			anchorY = b.y;
+			baseHX = b.x;
+			baseHY = b.y + b.height;
+			break;
+		case "w":
+			anchorX = b.x + b.width;
+			anchorY = b.y + b.height / 2;
+			baseHX = b.x;
+			baseHY = b.y + b.height / 2;
+			affectsY = false;
+			break;
+	}
+	const newHX = baseHX + (affectsX ? dx : 0);
+	const newHY = baseHY + (affectsY ? dy : 0);
+	const denomX = baseHX - anchorX;
+	const denomY = baseHY - anchorY;
+	let sx = affectsX && denomX !== 0 ? (newHX - anchorX) / denomX : 1;
+	let sy = affectsY && denomY !== 0 ? (newHY - anchorY) / denomY : 1;
+	if (shift && affectsX && affectsY) {
+		const mag = Math.max(Math.abs(sx), Math.abs(sy));
+		sx = sx >= 0 ? mag : -mag;
+		sy = sy >= 0 ? mag : -mag;
+	}
+	sx = Math.max(.001, sx);
+	sy = Math.max(.001, sy);
+	return {
+		sx,
+		sy,
+		origin: {
+			x: anchorX,
+			y: anchorY
+		}
+	};
+}
+function scale_points_string(points, origin, sx, sy) {
+	const nums = points.split(/[\s,]+/).filter(Boolean).map(Number);
+	const out = [];
+	for (let i = 0; i + 1 < nums.length; i += 2) {
+		const x = origin.x + (nums[i] - origin.x) * sx;
+		const y = origin.y + (nums[i + 1] - origin.y) * sy;
+		out.push(`${x},${y}`);
+	}
+	return out.join(" ");
+}
+function scale_path_d(d, origin, sx, sy) {
+	try {
+		const e = origin.x * (1 - sx);
+		const f = origin.y * (1 - sy);
+		return new svg_pathdata.SVGPathData(d).transform(svg_pathdata.SVGPathDataTransformer.MATRIX(sx, 0, 0, sy, e, f)).encode();
+	} catch {
+		return d;
+	}
+}
+function apply_resize(doc, id, baseline, sx, sy, origin) {
+	const a = baseline.attrs;
+	switch (a.kind) {
+		case "rect":
+		case "image":
+		case "use":
+			doc.set_attr(id, "x", String(origin.x + (a.x - origin.x) * sx));
+			doc.set_attr(id, "y", String(origin.y + (a.y - origin.y) * sy));
+			doc.set_attr(id, "width", String(Math.max(.001, a.w * sx)));
+			doc.set_attr(id, "height", String(Math.max(.001, a.h * sy)));
+			return;
+		case "circle": {
+			const s = Math.min(sx, sy);
+			doc.set_attr(id, "cx", String(origin.x + (a.cx - origin.x) * s));
+			doc.set_attr(id, "cy", String(origin.y + (a.cy - origin.y) * s));
+			doc.set_attr(id, "r", String(Math.max(.001, a.r * s)));
+			return;
+		}
+		case "ellipse":
+			doc.set_attr(id, "cx", String(origin.x + (a.cx - origin.x) * sx));
+			doc.set_attr(id, "cy", String(origin.y + (a.cy - origin.y) * sy));
+			doc.set_attr(id, "rx", String(Math.max(.001, a.rx * sx)));
+			doc.set_attr(id, "ry", String(Math.max(.001, a.ry * sy)));
+			return;
+		case "line":
+			doc.set_attr(id, "x1", String(origin.x + (a.x1 - origin.x) * sx));
+			doc.set_attr(id, "y1", String(origin.y + (a.y1 - origin.y) * sy));
+			doc.set_attr(id, "x2", String(origin.x + (a.x2 - origin.x) * sx));
+			doc.set_attr(id, "y2", String(origin.y + (a.y2 - origin.y) * sy));
+			return;
+		case "polyline":
+		case "polygon":
+			doc.set_attr(id, "points", scale_points_string(a.points, origin, sx, sy));
+			return;
+		case "path":
+			doc.set_attr(id, "d", scale_path_d(a.d, origin, sx, sy));
+			return;
+		case "text": {
+			if (!(sx !== 1 && sy !== 1)) return;
+			const s = Math.min(sx, sy);
+			doc.set_attr(id, "x", String(origin.x + (a.x - origin.x) * s));
+			doc.set_attr(id, "y", String(origin.y + (a.y - origin.y) * s));
+			doc.set_attr(id, "font-size", String(Math.max(1, a.fontSize * s)));
+			return;
+		}
+		case "unsupported": return;
+	}
+}
+//#endregion
+//#region src/core/paint.ts
+/**
+* Parse a *computed* paint string into the discriminated union. Returns null
+* for `inherit` / `var()` / empty. Returns an invalid-computed-value record
+* for syntactic errors (rare; we're permissive).
+*/
+function parse_paint(declared) {
+	if (declared === null || declared === "") return null;
+	const trimmed = declared.trim();
+	if (trimmed === "") return null;
+	if (trimmed === "inherit" || trimmed === "initial" || trimmed === "unset" || trimmed === "revert" || trimmed === "revert-layer") return null;
+	if (/^var\s*\(/i.test(trimmed)) return {
+		error: "invalid_at_computed_value_time",
+		reason: "var() substitution requires a cascade engine (not implemented)"
+	};
+	if (trimmed === "none") return { kind: "none" };
+	if (trimmed === "context-fill" || trimmed === "contextFill") return { kind: "context_fill" };
+	if (trimmed === "context-stroke" || trimmed === "contextStroke") return { kind: "context_stroke" };
+	const url_match = trimmed.match(/^url\(\s*(["']?)#([^)"']+)\1\s*\)\s*(.*)$/i);
+	if (url_match) {
+		const id = url_match[2];
+		const rest = url_match[3].trim();
+		let fallback;
+		if (rest !== "") {
+			const f = parse_paint(rest);
+			if (f && f.kind === "none") fallback = { kind: "none" };
+			else if (f && f.kind === "color") fallback = {
+				kind: "color",
+				value: f.value
+			};
+		}
+		return fallback ? {
+			kind: "ref",
+			id,
+			fallback
+		} : {
+			kind: "ref",
+			id
+		};
+	}
+	if (/^currentcolor$/i.test(trimmed)) return {
+		kind: "color",
+		value: { kind: "current_color" }
+	};
+	return {
+		kind: "color",
+		value: {
+			kind: "rgb",
+			value: trimmed
+		}
+	};
+}
+/** Serialize a Paint back to an SVG attribute / inline-style value. */
+function serialize_paint(paint) {
+	switch (paint.kind) {
+		case "none": return "none";
+		case "context_fill": return "context-fill";
+		case "context_stroke": return "context-stroke";
+		case "color": return paint.value.kind === "current_color" ? "currentColor" : paint.value.value;
+		case "ref":
+			if (paint.fallback) {
+				const f = paint.fallback.kind === "none" ? "none" : paint.fallback.value.kind === "current_color" ? "currentColor" : paint.fallback.value.value;
+				return `url(#${paint.id}) ${f}`;
+			}
+			return `url(#${paint.id})`;
+	}
+}
+//#endregion
+Object.defineProperty(exports, "apply_resize", {
+	enumerable: true,
+	get: function() {
+		return apply_resize;
+	}
+});
+Object.defineProperty(exports, "apply_translate", {
+	enumerable: true,
+	get: function() {
+		return apply_translate;
+	}
+});
+Object.defineProperty(exports, "capture_resize_baseline", {
+	enumerable: true,
+	get: function() {
+		return capture_resize_baseline;
+	}
+});
+Object.defineProperty(exports, "capture_translate_baseline", {
+	enumerable: true,
+	get: function() {
+		return capture_translate_baseline;
+	}
+});
+Object.defineProperty(exports, "compute_resize_factors", {
+	enumerable: true,
+	get: function() {
+		return compute_resize_factors;
+	}
+});
+Object.defineProperty(exports, "is_resizable", {
+	enumerable: true,
+	get: function() {
+		return is_resizable;
+	}
+});
+Object.defineProperty(exports, "parse_paint", {
+	enumerable: true,
+	get: function() {
+		return parse_paint;
+	}
+});
+Object.defineProperty(exports, "serialize_paint", {
+	enumerable: true,
+	get: function() {
+		return serialize_paint;
+	}
+});