one/dist/cjs/platform/effects/Mask.cjs

One is a React framework for web, iOS, and Android apps.

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
	for (var name in all) __defProp(target, name, {
		get: all[name],
		enumerable: true
	});
};
var __copyProps = (to, from, except, desc) => {
	if (from && typeof from === "object" || typeof from === "function") {
		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
			get: () => from[key],
			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
		});
	}
	return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Mask_exports = {};
__export(Mask_exports, { Mask: () => Mask });
module.exports = __toCommonJS(Mask_exports);
var import_react = require("react");
var import_DomView = require("../web/DomView.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
let warnedInvalidMask = false;
function image(node, width, height) {
	const clone = node.cloneNode(true);
	const sources = [node, ...node.querySelectorAll("*")];
	const copies = [clone, ...clone.querySelectorAll("*")];
	sources.forEach((source, index) => {
		const style = getComputedStyle(source);
		const copy = copies[index];
		for (const property of Array.from(style)) copy.style.setProperty(property, style.getPropertyValue(property));
	});
	clone.style.opacity = "1";
	const content = new XMLSerializer().serializeToString(clone);
	return `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject width="100%" height="100%">${content}</foreignObject></svg>`)}")`;
}
function Mask({ maskElement, children, ...props }) {
	const ref = (0, import_react.useRef)(null);
	const [mask, setMask] = (0, import_react.useState)();
	const valid = (0, import_react.isValidElement)(maskElement);
	(0, import_react.useEffect)(() => {
		if (!valid) {
			if (!warnedInvalidMask) {
				warnedInvalidMask = true;
				console.warn("Mask: invalid `maskElement` prop was passed to Mask. expected a React element. no mask will render.");
			}
			return;
		}
		const node = ref.current;
		if (!node) return;
		const update = () => {
			const width = node.clientWidth, height = node.clientHeight;
			if (width && height) setMask(image(node, width, height));
		};
		const resize = new ResizeObserver(update);
		const mutations = new MutationObserver(update);
		resize.observe(node);
		mutations.observe(node, {
			subtree: true,
			attributes: true,
			characterData: true,
			childList: true
		});
		node.addEventListener("load", update, true);
		update();
		return () => {
			resize.disconnect();
			mutations.disconnect();
			node.removeEventListener("load", update, true);
		};
	}, [valid, maskElement]);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DomView.DomView, {
		...props,
		children: [valid && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			ref,
			"aria-hidden": true,
			style: {
				position: "absolute",
				inset: 0,
				pointerEvents: "none",
				opacity: 0,
				overflow: "hidden"
			},
			children: maskElement
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			style: {
				display: "flex",
				flexDirection: "column",
				flex: 1,
				minWidth: 0,
				minHeight: 0,
				...valid && {
					maskImage: mask ?? "linear-gradient(transparent,transparent)",
					WebkitMaskImage: mask ?? "linear-gradient(transparent,transparent)",
					maskMode: "alpha",
					maskSize: "100% 100%",
					maskRepeat: "no-repeat"
				}
			},
			children
		})]
	});
}