@grida/svg-editor 1.0.0-alpha.1

package/dist/paint-DuCg6Y-K.mjs

@@ -0,0 +1,461 @@
+import { SVGPathData, SVGPathDataTransformer } from "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 SVGPathData(d).transform(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 SVGPathData(d).transform(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
+export { capture_resize_baseline as a, is_resizable as c, apply_translate as i, serialize_paint as n, capture_translate_baseline as o, apply_resize as r, compute_resize_factors as s, parse_paint as t };

package/dist/react.d.mts

@@ -0,0 +1,49 @@
+import { d as EditorState, f as EditorStyle, k as Providers, o as SvgEditor, t as Commands } from "./editor-JY7AQrR1.mjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react.d.ts
+type SvgEditorProviderProps = {
+  svg: string;
+  providers?: Providers;
+  style?: Partial<EditorStyle>;
+  children: ReactNode;
+};
+/**
+ * Owns the headless editor and exposes it via context. The editor is created
+ * once on first render; subsequent prop changes to `svg` call `editor.load()`.
+ */
+declare function SvgEditorProvider({
+  svg,
+  providers,
+  style,
+  children
+}: SvgEditorProviderProps): _$react_jsx_runtime0.JSX.Element;
+type SvgEditorCanvasProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+/**
+ * Renders the editor's SVG into a `div` and wires it to the DOM surface.
+ *
+ * Internally calls `attach_dom_surface(editor, { container })` on mount and
+ * `handle.detach()` on unmount. This is the only UI component the package
+ * ships; everything else (toolbar, property panel, etc.) is consumer-built.
+ */
+declare function SvgEditorCanvas({
+  className,
+  style
+}: SvgEditorCanvasProps): _$react_jsx_runtime0.JSX.Element;
+declare function useSvgEditor(): SvgEditor;
+/**
+ * Subscribe to a slice of `editor.state`. Re-renders when the selected slice
+ * changes by reference (or by the supplied `equals` function).
+ */
+declare function useEditorState<T>(selector: (state: EditorState) => T, equals?: (a: T, b: T) => boolean): T;
+/**
+ * Sugar for `useSvgEditor().commands`. The returned object is stable across
+ * re-renders (commands themselves don't change identity).
+ */
+declare function useCommands(): Commands;
+//#endregion
+export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCommands, useEditorState, useSvgEditor };

package/dist/react.d.ts

@@ -0,0 +1,49 @@
+import { d as EditorState, f as EditorStyle, k as Providers, o as SvgEditor, t as Commands } from "./editor-CTtU2gu4.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/react.d.ts
+type SvgEditorProviderProps = {
+  svg: string;
+  providers?: Providers;
+  style?: Partial<EditorStyle>;
+  children: ReactNode;
+};
+/**
+ * Owns the headless editor and exposes it via context. The editor is created
+ * once on first render; subsequent prop changes to `svg` call `editor.load()`.
+ */
+declare function SvgEditorProvider({
+  svg,
+  providers,
+  style,
+  children
+}: SvgEditorProviderProps): _$react_jsx_runtime0.JSX.Element;
+type SvgEditorCanvasProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+/**
+ * Renders the editor's SVG into a `div` and wires it to the DOM surface.
+ *
+ * Internally calls `attach_dom_surface(editor, { container })` on mount and
+ * `handle.detach()` on unmount. This is the only UI component the package
+ * ships; everything else (toolbar, property panel, etc.) is consumer-built.
+ */
+declare function SvgEditorCanvas({
+  className,
+  style
+}: SvgEditorCanvasProps): _$react_jsx_runtime0.JSX.Element;
+declare function useSvgEditor(): SvgEditor;
+/**
+ * Subscribe to a slice of `editor.state`. Re-renders when the selected slice
+ * changes by reference (or by the supplied `equals` function).
+ */
+declare function useEditorState<T>(selector: (state: EditorState) => T, equals?: (a: T, b: T) => boolean): T;
+/**
+ * Sugar for `useSvgEditor().commands`. The returned object is stable across
+ * re-renders (commands themselves don't change identity).
+ */
+declare function useCommands(): Commands;
+//#endregion
+export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCommands, useEditorState, useSvgEditor };

package/dist/react.js

@@ -0,0 +1,97 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_dom = require("./dom-CfP_ZURh.js");
+const require_editor = require("./editor-DQWUWrVZ.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/react.tsx
+const SvgEditorContext = (0, react.createContext)(null);
+/**
+* Owns the headless editor and exposes it via context. The editor is created
+* once on first render; subsequent prop changes to `svg` call `editor.load()`.
+*/
+function SvgEditorProvider({ svg, providers, style, children }) {
+	const editor_ref = (0, react.useRef)(null);
+	if (editor_ref.current === null) editor_ref.current = require_editor.createSvgEditor({
+		svg,
+		providers,
+		style
+	});
+	const editor = editor_ref.current;
+	const last_svg = (0, react.useRef)(svg);
+	(0, react.useEffect)(() => {
+		if (last_svg.current !== svg) {
+			editor.load(svg);
+			last_svg.current = svg;
+		}
+	}, [svg, editor]);
+	(0, react.useEffect)(() => {
+		return () => {
+			editor.dispose();
+		};
+	}, [editor]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgEditorContext.Provider, {
+		value: editor,
+		children
+	});
+}
+/**
+* Renders the editor's SVG into a `div` and wires it to the DOM surface.
+*
+* Internally calls `attach_dom_surface(editor, { container })` on mount and
+* `handle.detach()` on unmount. This is the only UI component the package
+* ships; everything else (toolbar, property panel, etc.) is consumer-built.
+*/
+function SvgEditorCanvas({ className, style }) {
+	const editor = useSvgEditor();
+	const ref = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const container = ref.current;
+		if (!container) return;
+		const handle = require_dom.attach_dom_surface(editor, { container });
+		return () => handle.detach();
+	}, [editor]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className,
+		style
+	});
+}
+function useSvgEditor() {
+	const editor = (0, react.useContext)(SvgEditorContext);
+	if (editor === null) throw new Error("useSvgEditor must be used inside a <SvgEditorProvider>.");
+	return editor;
+}
+/**
+* Subscribe to a slice of `editor.state`. Re-renders when the selected slice
+* changes by reference (or by the supplied `equals` function).
+*/
+function useEditorState(selector, equals = Object.is) {
+	const editor = useSvgEditor();
+	const last_ref = (0, react.useRef)({
+		has: false,
+		value: void 0
+	});
+	return (0, react.useSyncExternalStore)((cb) => editor.subscribe(cb), () => {
+		const next = selector(editor.state);
+		if (!last_ref.current.has || !equals(last_ref.current.value, next)) last_ref.current = {
+			has: true,
+			value: next
+		};
+		return last_ref.current.value;
+	}, () => selector(editor.state));
+}
+/**
+* Sugar for `useSvgEditor().commands`. The returned object is stable across
+* re-renders (commands themselves don't change identity).
+*/
+function useCommands() {
+	const editor = useSvgEditor();
+	return (0, react.useMemo)(() => editor.commands, [editor]);
+}
+//#endregion
+exports.SvgEditorCanvas = SvgEditorCanvas;
+exports.SvgEditorProvider = SvgEditorProvider;
+exports.useCommands = useCommands;
+exports.useEditorState = useEditorState;
+exports.useSvgEditor = useSvgEditor;