@nxgt/material 3.6.0 → 3.7.0

package/dist/draw-animate.js

@@ -0,0 +1,106 @@
+import { t as e } from "./use-shape-morph-BKA_R5P5.js";
+import { t } from "./drawing-B8VuG7nx.js";
+import { useEffect as n, useLayoutEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { compileScene as c } from "@nxgt/material-core/draw";
+import { MAX_STEP as l, appear as u, drawOn as d, morphScenes as f, morphScenes as p, staggerSteps as m } from "@nxgt/material-core/draw/animate";
+//#region lib/draw-animate/reduced-motion.ts
+var h = () => typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+//#endregion
+//#region lib/draw-animate/morph-drawing.tsx
+function g(e, t = /* @__PURE__ */ new Map()) {
+	e.tag === "path" && e.node !== void 0 && "d" in e.attrs && t.set(e.node, String(e.attrs.d));
+	for (let n of e.children ?? []) typeof n != "string" && g(n, t);
+	return t;
+}
+var _ = (e, t, n) => g(c(p(e, t, n), { idPrefix: "mm" }));
+function v({ from: n, to: i, active: o, ...c }) {
+	let l = a(null), u = a(+!!o);
+	return r(() => {
+		let t = l.current, r = +!!o, a = u.current;
+		if (!t || a === r) return;
+		let [s, c, d] = [
+			0,
+			1,
+			.5
+		].map((e) => _(n, i, e)), f = new Set([...d].flatMap(([e, t]) => t !== s?.get(e) && t !== c?.get(e) ? [e] : [])), p = (e) => {
+			for (let [n, r] of e) {
+				if (!f.has(n)) continue;
+				let e = t.querySelector(`[data-id="${CSS.escape(n)}"]`);
+				e?.localName === "path" && e.setAttribute("d", r);
+			}
+		};
+		if (h()) {
+			u.current = r;
+			return;
+		}
+		let m = _(n, i, r), g = performance.now(), v = 0;
+		p(_(n, i, a));
+		let y = (t) => {
+			let o = t - g;
+			if (o >= 520) {
+				u.current = r, p(m);
+				return;
+			}
+			u.current = Math.min(1, Math.max(0, a + (r - a) * e(o))), p(_(n, i, u.current)), v = requestAnimationFrame(y);
+		};
+		return v = requestAnimationFrame(y), () => cancelAnimationFrame(v);
+	}, [
+		o,
+		n,
+		i
+	]), /* @__PURE__ */ s(t, {
+		...c,
+		ref: l,
+		scene: o ? i : n
+	});
+}
+//#endregion
+//#region lib/draw-animate/use-drawing-controls.ts
+var y = (e) => "animationName" in e && String(e.animationName).startsWith("nxgt-draw-");
+function b(e) {
+	return i(() => {
+		let t = () => (e.current?.getAnimations?.({ subtree: !0 }) ?? []).filter(y);
+		return {
+			play: () => {
+				for (let e of t()) e.play();
+			},
+			pause: () => {
+				for (let e of t()) e.pause();
+			},
+			replay: () => {
+				for (let e of t()) e.currentTime = 0, e.play();
+			},
+			finish: () => {
+				for (let e of t()) e.finish();
+			},
+			finished: async () => {
+				await Promise.allSettled(t().map((e) => e.finished));
+			}
+		};
+	}, [e]);
+}
+//#endregion
+//#region lib/draw-animate/use-scene-morph.ts
+function x(t, r, s) {
+	let c = +!!s, [l, u] = o(c), d = a(c);
+	return n(() => {
+		let t = d.current;
+		if (t === c) return;
+		if (h()) {
+			d.current = c, u(c);
+			return;
+		}
+		let n = performance.now(), r = 0, i = (a) => {
+			let o = a - n;
+			d.current = o >= 520 ? c : Math.min(1, Math.max(0, t + (c - t) * e(o))), u(d.current), o < 520 && (r = requestAnimationFrame(i));
+		};
+		return r = requestAnimationFrame(i), () => cancelAnimationFrame(r);
+	}, [c]), i(() => p(t, r, l), [
+		t,
+		r,
+		l
+	]);
+}
+//#endregion
+export { l as MAX_STEP, v as MorphDrawing, u as appear, d as drawOn, f as morphScenes, m as staggerSteps, b as useDrawingControls, x as useSceneMorph };

package/dist/draw-png.js

@@ -0,0 +1,2 @@
+import { downloadDrawingPng as e, drawingToPng as t } from "@nxgt/material-core/draw/png";
+export { e as downloadDrawingPng, t as drawingToPng };

package/dist/draw-sketch.js

@@ -0,0 +1,38 @@
+import { n as e, t } from "./drawing-context-CeKeZE6b.js";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { sketch as i, sketch as a } from "@nxgt/material-core/draw/sketch";
+//#region lib/draw-sketch/sketch.tsx
+function o({ children: i, seed: o, roughness: s, bowing: c, fill: l, hachureAngle: u, hachureGap: d, strokeWidth: f }) {
+	let p = e(), m = n(() => {
+		let e = {
+			seed: o,
+			roughness: s,
+			bowing: c,
+			fill: l,
+			hachureAngle: u,
+			hachureGap: d,
+			strokeWidth: f
+		};
+		return {
+			...p,
+			transform: (t) => a(t, e),
+			transformScene: (t) => a(t, e)
+		};
+	}, [
+		p,
+		o,
+		s,
+		c,
+		l,
+		u,
+		d,
+		f
+	]);
+	return /* @__PURE__ */ r(t.Provider, {
+		value: m,
+		children: i
+	});
+}
+//#endregion
+export { o as Sketch, i as sketch };

package/dist/draw.js

@@ -0,0 +1,65 @@
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./drawing-B8VuG7nx.js";
+import { Children as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { DRAW_PALETTE as u, ROLES as d, ROLE_VARS as f, assertSafeDrawing as p, circle as m, compileNode as h, compileScene as g, drawIdPrefix as _, ellipse as v, estimateTextWidth as y, group as b, group as x, hatch as S, image as C, image as w, line as T, linear as E, parsePath as D, path as O, path as k, pattern as A, polygon as j, radial as M, rect as N, scene as P, text as F, text as I, toSVG as L, tone as R } from "@nxgt/material-core/draw";
+import { align as z, bbox as B, distribute as V, grid as H, stack as U } from "@nxgt/material-core/draw/layout";
+import { SHAPE_NAMES as W, morph as G, shape as K, toCubics as q } from "@nxgt/material-core/draw/shapes";
+//#region lib/components/ui/widgets/drawing/partials/primitives/content.tsx
+var J = (e) => c.toArray(e).filter((e) => typeof e == "string" || typeof e == "number").join("");
+function Y(e) {
+	let [n, r] = t(e), { children: i, ...a } = r;
+	return /* @__PURE__ */ l(o, {
+		node: I(J(i), a),
+		events: n
+	});
+}
+function X(e) {
+	let [n, r] = t(e), { children: i, ...a } = r;
+	return /* @__PURE__ */ l(o, {
+		node: x(a, []),
+		events: n,
+		slot: i ?? null
+	});
+}
+function Z(e) {
+	let [n, r] = t(e);
+	return /* @__PURE__ */ l(o, {
+		node: w(r),
+		events: n
+	});
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/partials/primitives/path.tsx
+var Q = [
+	"id",
+	"label",
+	"interactive",
+	"fill",
+	"stroke",
+	"strokeWidth",
+	"opacity",
+	"transform",
+	"clip",
+	"mask",
+	"className",
+	"anim",
+	"meta",
+	"arrow"
+];
+function $(e) {
+	let [n, r] = t(e), { d: i, build: a, node: s, ...c } = r, u;
+	if (s) {
+		let e = {};
+		for (let t of Q) c[t] !== void 0 && (e[t] = c[t]);
+		u = {
+			...s,
+			...e
+		};
+	} else u = k(i ?? a ?? ((e) => e), c);
+	return /* @__PURE__ */ l(o, {
+		node: u,
+		events: n
+	});
+}
+//#endregion
+export { r as Circle, u as DRAW_PALETTE, s as Drawing, a as Ellipse, X as Group, Z as Image, n as Line, $ as Path, e as Polygon, d as ROLES, f as ROLE_VARS, i as Rect, W as SHAPE_NAMES, Y as Text, z as align, p as assertSafeDrawing, B as bbox, m as circle, h as compileNode, g as compileScene, V as distribute, _ as drawIdPrefix, v as ellipse, y as estimateTextWidth, H as grid, b as group, S as hatch, C as image, T as line, E as linear, G as morph, D as parsePath, O as path, A as pattern, j as polygon, M as radial, N as rect, P as scene, K as shape, U as stack, F as text, q as toCubics, L as toSVG, R as tone };

package/dist/drawing-B8VuG7nx.js

@@ -0,0 +1,390 @@
+import { n as e, t } from "./drawing-context-CeKeZE6b.js";
+import { createElement as n, useCallback as r, useId as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { circle as d, compileNode as f, compileScene as p, drawIdPrefix as m, ellipse as h, line as g, polygon as _, rect as v } from "@nxgt/material-core/draw";
+//#region lib/components/ui/widgets/drawing/drawing-a11y.ts
+function y(e) {
+	return e.decorative ? "none" : e.interactive ? "group" : "img";
+}
+function b(e, t) {
+	return e === "none" ? {
+		"aria-hidden": "true",
+		focusable: "false"
+	} : t === void 0 ? {} : {
+		role: e,
+		"aria-label": t
+	};
+}
+function x(e) {
+	return e.interactive ? {
+		role: e.clickable ? "button" : "img",
+		tabIndex: 0,
+		"aria-label": e.label
+	} : e.label !== void 0 && e.root === "group" ? {
+		role: "img",
+		"aria-label": e.label
+	} : {};
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/partials/drawing-root.tsx
+function S({ role: e, title: t, attrs: r, rest: i, children: a }) {
+	return n("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		...i,
+		...r,
+		...b(e, t),
+		"data-slot": "drawing"
+	}, a);
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/use-exact-text.ts
+var C = {
+	sans: "Inter Variable, Inter, system-ui, sans-serif",
+	serif: "Georgia, serif",
+	mono: "ui-monospace, monospace"
+};
+function w(e, t, n) {
+	let r = [];
+	for (let i of e.split("\n")) {
+		let e = "";
+		for (let a of i.split(" ")) {
+			let i = e ? `${e} ${a}` : a;
+			if (n(i) <= t) {
+				e = i;
+				continue;
+			}
+			e && r.push(e), e = "";
+			for (let i of a) e && n(e + i) > t && (r.push(e), e = ""), e += i;
+		}
+		r.push(e);
+	}
+	return r;
+}
+function T() {
+	try {
+		let e = document.createElement("canvas").getContext("2d");
+		return e ? (t) => (e.font = t, (t) => e.measureText(t).width) : void 0;
+	} catch {
+		return;
+	}
+}
+function E(e, t, n) {
+	if (e.type === "group") {
+		let r = e.children.map((e) => E(e, t, n));
+		return r.some((t, n) => t !== e.children[n]) ? {
+			...e,
+			children: r
+		} : e;
+	}
+	if (e.type !== "text" || e.maxWidth === void 0) return e;
+	let r = e.size ?? t?.size ?? 14, i = `${e.italic ? "italic " : ""}${e.weight ?? 400} ${r}px ${C[t?.family ?? "sans"]}`, a = w(e.text, e.maxWidth, n(i)), { maxWidth: o, ...s } = e;
+	return {
+		...s,
+		text: a.join("\n")
+	};
+}
+function D(e) {
+	return "version" in e || e.type === "group" ? e.children.some(D) : e.type === "text" && e.maxWidth !== void 0;
+}
+function O(e, t) {
+	let n = T();
+	if (!n) return e;
+	let r = (e) => n(e);
+	if ("version" in e) {
+		let t = e.children.map((t) => E(t, e.font, r));
+		return {
+			...e,
+			children: t
+		};
+	}
+	return E(e, t, r);
+}
+function k(e, t, n) {
+	let r = s(e);
+	r.current = e;
+	let i = o(() => t && D(e) ? JSON.stringify([e, n]) : "", [
+		e,
+		t,
+		n
+	]), [l, u] = c();
+	return a(() => {
+		if (!i) return;
+		let e = !0, t = () => {
+			let t = O(r.current, n);
+			e && t !== r.current && u({
+				signature: i,
+				value: t
+			});
+		};
+		return t(), document.fonts?.ready.then(t), () => {
+			e = !1;
+		};
+	}, [i, n]), l && l.signature === i ? l.value : e;
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/partials/interactive-node.tsx
+function A(e) {
+	let { id: t, handlers: r, onNodeClick: i, children: a } = e, o = r.onClick !== void 0 || i !== void 0 && t !== void 0;
+	return n("g", {
+		...x({
+			interactive: !0,
+			clickable: o,
+			label: e.label,
+			root: e.root
+		}),
+		"data-id": t,
+		className: e.outline ? "nxgt-draw-i nxgt-draw-ig" : "nxgt-draw-i",
+		onClick: o ? (e) => {
+			r.onClick?.(e), t !== void 0 && i?.(t, e);
+		} : void 0,
+		onKeyDown: (e) => {
+			r.onKeyDown?.(e), !(!o || e.defaultPrevented) && e.target === e.currentTarget && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.currentTarget.dispatchEvent(new MouseEvent("click", {
+				bubbles: !0,
+				cancelable: !0
+			}))));
+		},
+		onPointerEnter: r.onPointerEnter,
+		onPointerLeave: r.onPointerLeave,
+		onPointerDown: r.onPointerDown,
+		onPointerUp: r.onPointerUp,
+		onFocus: r.onFocus,
+		onBlur: r.onBlur
+	}, a);
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/partials/react-attrs.ts
+var j = /^(aria|data)-/;
+function M(e) {
+	return e === "class" ? "className" : j.test(e) ? e : e.replace(/-([a-z])/g, (e, t) => t.toUpperCase());
+}
+function N(e) {
+	let t = {};
+	for (let [n, r] of Object.entries(e)) t[M(n)] = r;
+	return t;
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/partials/ring.ts
+var P = new Set("x y dy width height cx cy rx ry x1 y1 x2 y2 d points transform pathLength font-family font-size font-weight font-style text-anchor".split(" "));
+function F(e) {
+	if (e.tag === "defs" || e.tag === "text" || e.tag === "tspan" || e.attrs["data-m-sketch"] === "fill") return;
+	let t = {};
+	for (let [n, r] of Object.entries(e.attrs)) P.has(n) && (t[n] = r);
+	let n = e.children?.map((e) => typeof e == "string" ? e : F(e)).filter((e) => e !== void 0);
+	return e.tag === "g" ? n?.length ? {
+		tag: "g",
+		attrs: t,
+		children: n
+	} : void 0 : (t.class = "nxgt-draw-ring", e.tag === "image" ? {
+		tag: "rect",
+		attrs: t
+	} : {
+		tag: e.tag,
+		attrs: t,
+		children: n
+	});
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/partials/svg-tree.tsx
+var I = (e, t) => Object.keys(e).includes(t), L = {};
+function R(e, t) {
+	let n = e.node !== void 0 && I(t.handlers ?? L, e.node) ? (t.handlers ?? L)[e.node] : void 0;
+	return n ? t.self && e.interactive ? {
+		...t.self,
+		...n
+	} : n : e.interactive ? t.self ?? {} : void 0;
+}
+function z(e, t = L) {
+	return e.interactive || e.node !== void 0 && I(t, e.node) ? !0 : (e.children ?? []).some((e) => typeof e != "string" && z(e, t));
+}
+var B = (e) => e.tag === "g" && !e.children?.length;
+function V(e, t, r) {
+	let i = R(e, t), a = N(e.attrs);
+	if (e.node !== void 0 && !i && (a["data-id"] = e.node), !i) {
+		let n = x({
+			interactive: !1,
+			clickable: !1,
+			label: e.label,
+			root: t.root
+		});
+		Object.assign(a, n);
+	}
+	let o = (e.children ?? []).map((e, n) => typeof e == "string" ? e : V(e, t, `${r}.${n}`)), s = t.slot !== void 0 && B(e);
+	s && o.push(t.slot);
+	let c = e.node === void 0 ? `p:${r}` : `n:${e.node}`;
+	if (!i) return n(e.tag, {
+		...a,
+		key: c
+	}, ...o);
+	let l = s ? void 0 : F(e);
+	return /* @__PURE__ */ u(A, {
+		id: e.node,
+		label: e.label,
+		handlers: i,
+		onNodeClick: t.onNodeClick,
+		root: t.root,
+		outline: s || !l,
+		children: [n(e.tag, a, ...o), l && V(l, t, `${r}.ring`)]
+	}, c);
+}
+function H({ el: e, ...t }) {
+	return V(e, t, "0");
+}
+function U({ el: e, ...t }) {
+	return (e.children ?? []).map((e, n) => typeof e == "string" ? e : V(e, t, `0.${n}`));
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/partials/primitives/primitive.tsx
+var W = [
+	"onClick",
+	"onPointerEnter",
+	"onPointerLeave",
+	"onPointerDown",
+	"onPointerUp",
+	"onFocus",
+	"onBlur",
+	"onKeyDown"
+];
+function G(e) {
+	let t = {}, n = { ...e };
+	for (let r of W) e[r] !== void 0 && (t[r] = e[r]), delete n[r];
+	return [t, n];
+}
+function K({ node: t, events: n, slot: r }) {
+	let o = e(), s = m(i()), c = t.interactive === !0 || Object.keys(n).length > 0;
+	if (c && o.decorative) throw Error("A decorative drawing has an interactive node: give the Drawing a title instead");
+	let { register: u } = o;
+	a(() => c ? u() : void 0, [c, u]);
+	let d = k(t, o.exactText && t.type === "text"), p = c ? {
+		...d,
+		interactive: !0
+	} : d;
+	return /* @__PURE__ */ l(H, {
+		el: f(o.transform?.(p) ?? p, {
+			idPrefix: s,
+			colors: "class"
+		}),
+		self: n,
+		root: o.root,
+		onNodeClick: o.onNodeClick,
+		slot: r
+	});
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/partials/primitives/shapes.tsx
+function q(e) {
+	let [t, n] = G(e);
+	return /* @__PURE__ */ l(K, {
+		node: v(n),
+		events: t
+	});
+}
+function J(e) {
+	let [t, n] = G(e);
+	return /* @__PURE__ */ l(K, {
+		node: h(n),
+		events: t
+	});
+}
+function Y(e) {
+	let [t, n] = G(e);
+	return /* @__PURE__ */ l(K, {
+		node: d(n),
+		events: t
+	});
+}
+function X(e) {
+	let [t, n] = G(e);
+	return /* @__PURE__ */ l(K, {
+		node: g(n),
+		events: t
+	});
+}
+function Z(e) {
+	let [t, n] = G(e);
+	return /* @__PURE__ */ l(K, {
+		node: _(n),
+		events: t
+	});
+}
+//#endregion
+//#region lib/components/ui/widgets/drawing/drawing.tsx
+var Q = "A decorative drawing has an interactive node: give the Drawing a title instead";
+function $(t) {
+	let { scene: n, handlers: r, onNodeClick: a, title: s, decorative: c, exactText: u, ...d } = t, f = m(i()), { transformScene: h } = e(), g = k(n, u !== !1), _ = o(() => p(h?.(g) ?? g, {
+		idPrefix: f,
+		colors: "class"
+	}), [
+		g,
+		f,
+		h
+	]), v = z(_, r);
+	if (c && v) throw Error(Q);
+	let b = y({
+		decorative: c,
+		interactive: v
+	});
+	return /* @__PURE__ */ l(S, {
+		role: b,
+		title: s,
+		attrs: _.attrs,
+		rest: d,
+		children: /* @__PURE__ */ l(U, {
+			el: _,
+			handlers: r,
+			onNodeClick: a,
+			root: b
+		})
+	});
+}
+function ee(n) {
+	let { w: i, h: a, viewBox: s, background: d, interactive: f = !1, onNodeClick: p, children: m, title: h, decorative: g, exactText: _, ...v } = n, { transform: b, transformScene: x } = e(), [C, w] = c(0), T = r(() => (w((e) => e + 1), () => w((e) => e - 1)), []), E = y({
+		decorative: g,
+		interactive: f || C > 0
+	}), D = o(() => ({
+		root: E,
+		decorative: g === !0,
+		exactText: _ !== !1,
+		onNodeClick: p,
+		register: T,
+		transform: b,
+		transformScene: x
+	}), [
+		E,
+		g,
+		_,
+		p,
+		T,
+		b,
+		x
+	]), [O, k, A, j] = s ?? [
+		0,
+		0,
+		i,
+		a
+	], M = null;
+	return d !== void 0 && (M = /* @__PURE__ */ l(q, {
+		x: O,
+		y: k,
+		w: A,
+		h: j,
+		fill: d
+	})), /* @__PURE__ */ l(S, {
+		role: E,
+		title: h,
+		attrs: {
+			width: i,
+			height: a,
+			viewBox: `${O} ${k} ${A} ${j}`
+		},
+		rest: v,
+		children: /* @__PURE__ */ u(t.Provider, {
+			value: D,
+			children: [M, m]
+		})
+	});
+}
+function te(e) {
+	return e.scene ? /* @__PURE__ */ l($, { ...e }) : /* @__PURE__ */ l(ee, { ...e });
+}
+//#endregion
+export { Z as a, G as c, X as i, Y as n, q as o, J as r, K as s, te as t };

package/dist/drawing-context-CeKeZE6b.js

@@ -0,0 +1,10 @@
+import { createContext as e, useContext as t } from "react";
+//#region lib/components/ui/widgets/drawing/drawing-context.ts
+var n = () => void 0, r = e({
+	root: "img",
+	decorative: !1,
+	exactText: !1,
+	register: () => n
+}), i = () => t(r);
+//#endregion
+export { i as n, r as t };