@wirekyt/dom 0.0.1 → 0.0.2

package/dist/polygon-BvdwYRBw.js

@@ -0,0 +1,76 @@
+import { c as createRect, u as getRectCorners } from "./rect-utils-d_3gZVsc.js";
+//#region src/common/rect-utils/polygon.ts
+function getElementPolygon(rectValue, placement) {
+	const { top, right, left, bottom } = getRectCorners(createRect(rectValue));
+	const [base] = placement.split("-");
+	return {
+		top: [
+			left,
+			top,
+			right,
+			bottom
+		],
+		right: [
+			top,
+			right,
+			bottom,
+			left
+		],
+		bottom: [
+			top,
+			left,
+			bottom,
+			right
+		],
+		left: [
+			right,
+			top,
+			left,
+			bottom
+		]
+	}[base];
+}
+function isPointInPolygon(polygon, point) {
+	const { x, y } = point;
+	let c = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const xi = polygon[i].x;
+		const yi = polygon[i].y;
+		const xj = polygon[j].x;
+		const yj = polygon[j].y;
+		if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) c = !c;
+	}
+	return c;
+}
+function createPolygonElement() {
+	const id = "debug-polygon";
+	const existingPolygon = document.getElementById(id);
+	if (existingPolygon) return existingPolygon;
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	Object.assign(svg.style, {
+		top: "0",
+		left: "0",
+		width: "100%",
+		height: "100%",
+		opacity: "0.15",
+		position: "fixed",
+		pointerEvents: "none",
+		fill: "red"
+	});
+	const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+	polygon.setAttribute("id", id);
+	polygon.setAttribute("points", "0,0 0,0");
+	svg.appendChild(polygon);
+	document.body.appendChild(svg);
+	return polygon;
+}
+function debugPolygon(polygon) {
+	const el = createPolygonElement();
+	const points = polygon.map((point) => `${point.x},${point.y}`).join(" ");
+	el.setAttribute("points", points);
+	return () => {
+		el.remove();
+	};
+}
+//#endregion
+export { getElementPolygon as n, isPointInPolygon as r, debugPolygon as t };

package/dist/polygon-CTR1kEoU.cjs

@@ -0,0 +1,93 @@
+const require_rect_utils = require("./rect-utils-DiT4k3jS.cjs");
+//#region src/common/rect-utils/polygon.ts
+function getElementPolygon(rectValue, placement) {
+	const { top, right, left, bottom } = require_rect_utils.getRectCorners(require_rect_utils.createRect(rectValue));
+	const [base] = placement.split("-");
+	return {
+		top: [
+			left,
+			top,
+			right,
+			bottom
+		],
+		right: [
+			top,
+			right,
+			bottom,
+			left
+		],
+		bottom: [
+			top,
+			left,
+			bottom,
+			right
+		],
+		left: [
+			right,
+			top,
+			left,
+			bottom
+		]
+	}[base];
+}
+function isPointInPolygon(polygon, point) {
+	const { x, y } = point;
+	let c = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const xi = polygon[i].x;
+		const yi = polygon[i].y;
+		const xj = polygon[j].x;
+		const yj = polygon[j].y;
+		if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) c = !c;
+	}
+	return c;
+}
+function createPolygonElement() {
+	const id = "debug-polygon";
+	const existingPolygon = document.getElementById(id);
+	if (existingPolygon) return existingPolygon;
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	Object.assign(svg.style, {
+		top: "0",
+		left: "0",
+		width: "100%",
+		height: "100%",
+		opacity: "0.15",
+		position: "fixed",
+		pointerEvents: "none",
+		fill: "red"
+	});
+	const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+	polygon.setAttribute("id", id);
+	polygon.setAttribute("points", "0,0 0,0");
+	svg.appendChild(polygon);
+	document.body.appendChild(svg);
+	return polygon;
+}
+function debugPolygon(polygon) {
+	const el = createPolygonElement();
+	const points = polygon.map((point) => `${point.x},${point.y}`).join(" ");
+	el.setAttribute("points", points);
+	return () => {
+		el.remove();
+	};
+}
+//#endregion
+Object.defineProperty(exports, "debugPolygon", {
+	enumerable: true,
+	get: function() {
+		return debugPolygon;
+	}
+});
+Object.defineProperty(exports, "getElementPolygon", {
+	enumerable: true,
+	get: function() {
+		return getElementPolygon;
+	}
+});
+Object.defineProperty(exports, "isPointInPolygon", {
+	enumerable: true,
+	get: function() {
+		return isPointInPolygon;
+	}
+});

package/dist/popper-DkAAS9VE.cjs

@@ -0,0 +1,487 @@
+const require_dom_query = require("./dom-query-CQzY93XU.cjs");
+const require_computed_style = require("./computed-style-DLArEFNw.cjs");
+const require_raf = require("./raf-BSDcY4UD.cjs");
+const require_utils = require("./utils-BH-oBBz2.cjs");
+let _floating_ui_dom = require("@floating-ui/dom");
+//#region src/common/popper/get-anchor.ts
+function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
+	if (typeof DOMRect === "function") return new DOMRect(x, y, width, height);
+	const rect = {
+		x,
+		y,
+		width,
+		height,
+		top: y,
+		right: x + width,
+		bottom: y + height,
+		left: x
+	};
+	return {
+		...rect,
+		toJSON: () => rect
+	};
+}
+function getDOMRect(anchorRect) {
+	if (!anchorRect) return createDOMRect();
+	const { x, y, width, height } = anchorRect;
+	return createDOMRect(x, y, width, height);
+}
+function getAnchorElement(anchorElement, getAnchorRect) {
+	return {
+		contextElement: require_dom_query.isHTMLElement(anchorElement) ? anchorElement : anchorElement?.contextElement,
+		getBoundingClientRect: () => {
+			const anchor = anchorElement;
+			const anchorRect = getAnchorRect?.(anchor);
+			if (anchorRect || !anchor) return getDOMRect(anchorRect);
+			return anchor.getBoundingClientRect();
+		}
+	};
+}
+//#endregion
+//#region src/common/popper/middleware.ts
+const toVar = (value) => ({
+	variable: value,
+	reference: `var(${value})`
+});
+const cssVars = {
+	arrowSize: toVar("--arrow-size"),
+	arrowSizeHalf: toVar("--arrow-size-half"),
+	arrowBg: toVar("--arrow-background"),
+	transformOrigin: toVar("--transform-origin"),
+	arrowOffset: toVar("--arrow-offset")
+};
+const getSideAxis = (side) => side === "top" || side === "bottom" ? "y" : "x";
+function createTransformOriginMiddleware(opts, arrowEl) {
+	return {
+		name: "transformOrigin",
+		fn(state) {
+			const { elements, middlewareData, placement, rects, y } = state;
+			const side = placement.split("-")[0];
+			const axis = getSideAxis(side);
+			const arrowX = middlewareData.arrow?.x || 0;
+			const arrowY = middlewareData.arrow?.y || 0;
+			const arrowWidth = arrowEl?.clientWidth || 0;
+			const arrowHeight = arrowEl?.clientHeight || 0;
+			const transformX = arrowX + arrowWidth / 2;
+			const transformY = arrowY + arrowHeight / 2;
+			const shiftY = Math.abs(middlewareData.shift?.y || 0);
+			const halfAnchorHeight = rects.reference.height / 2;
+			const arrowOffset = arrowHeight / 2;
+			const gutter = opts.offset?.mainAxis ?? opts.gutter;
+			const sideOffsetValue = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
+			const isOverlappingAnchor = shiftY > sideOffsetValue;
+			const adjacentTransformOrigin = {
+				top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
+				bottom: `${transformX}px ${-sideOffsetValue}px`,
+				left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
+				right: `${-sideOffsetValue}px ${transformY}px`
+			}[side];
+			const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
+			const useOverlap = Boolean(opts.overlap) && axis === "y" && isOverlappingAnchor;
+			elements.floating.style.setProperty(cssVars.transformOrigin.variable, useOverlap ? overlapTransformOrigin : adjacentTransformOrigin);
+			return { data: { transformOrigin: useOverlap ? overlapTransformOrigin : adjacentTransformOrigin } };
+		}
+	};
+}
+const rectMiddleware = {
+	name: "rects",
+	fn({ rects }) {
+		return { data: rects };
+	}
+};
+const shiftArrowMiddleware = (arrowEl) => {
+	if (!arrowEl) return;
+	return {
+		name: "shiftArrow",
+		fn({ placement, middlewareData }) {
+			if (!middlewareData.arrow) return {};
+			const { x, y } = middlewareData.arrow;
+			const dir = placement.split("-")[0];
+			Object.assign(arrowEl.style, {
+				left: x != null ? `${x}px` : "",
+				top: y != null ? `${y}px` : "",
+				[dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
+			});
+			return {};
+		}
+	};
+};
+//#endregion
+//#region src/common/popper/placement.ts
+function isValidPlacement(v) {
+	return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v);
+}
+function getPlacementDetails(placement) {
+	const [side, align] = placement.split("-");
+	return {
+		side,
+		align,
+		hasAlign: align != null
+	};
+}
+function getPlacementSide(placement) {
+	return placement.split("-")[0];
+}
+//#endregion
+//#region src/common/popper/get-placement.ts
+const defaultOptions = {
+	strategy: "absolute",
+	placement: "bottom",
+	listeners: true,
+	restoreStyles: false,
+	gutter: 8,
+	flip: true,
+	slide: true,
+	overlap: false,
+	sameWidth: false,
+	fitViewport: false,
+	overflowPadding: 8,
+	arrowPadding: 4
+};
+function roundByDpr(win, value) {
+	const dpr = win.devicePixelRatio || 1;
+	return Math.round(value * dpr) / dpr;
+}
+function isApproximatelyEqual(a, b) {
+	return a != null && Math.abs(a - b) < .5;
+}
+function resolveBoundaryOption(boundary) {
+	if (typeof boundary === "function") return boundary();
+	if (boundary === "clipping-ancestors") return "clippingAncestors";
+	return boundary;
+}
+function getArrowMiddleware(arrowElement, doc, opts) {
+	return (0, _floating_ui_dom.arrow)({
+		element: arrowElement || doc.createElement("div"),
+		padding: opts.arrowPadding
+	});
+}
+function getOffsetMiddleware(arrowElement, opts) {
+	if (require_utils.isNull(opts.offset ?? opts.gutter)) return;
+	return (0, _floating_ui_dom.offset)(({ placement }) => {
+		const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
+		const gutter = opts.offset?.mainAxis ?? opts.gutter;
+		const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
+		const { hasAlign } = getPlacementDetails(placement);
+		const shift = !hasAlign ? opts.shift : void 0;
+		return require_utils.compact({
+			crossAxis: opts.offset?.crossAxis ?? shift,
+			mainAxis,
+			alignmentAxis: opts.shift
+		});
+	});
+}
+function getFlipMiddleware(opts) {
+	if (!opts.flip) return;
+	return (0, _floating_ui_dom.flip)(() => {
+		const boundary = resolveBoundaryOption(opts.boundary);
+		return {
+			...boundary ? { boundary } : void 0,
+			padding: opts.overflowPadding,
+			fallbackPlacements: opts.flip === true ? void 0 : opts.flip
+		};
+	});
+}
+function getShiftMiddleware(opts) {
+	if (!opts.slide && !opts.overlap) return;
+	return (0, _floating_ui_dom.shift)(() => {
+		const boundary = resolveBoundaryOption(opts.boundary);
+		return {
+			...boundary ? { boundary } : void 0,
+			mainAxis: opts.slide,
+			crossAxis: opts.overlap,
+			padding: opts.overflowPadding,
+			limiter: (0, _floating_ui_dom.limitShift)()
+		};
+	});
+}
+function getSizeMiddleware(opts) {
+	if (opts.sizeMiddleware === false && !opts.sameWidth && !opts.fitViewport) return;
+	let lastReferenceWidth;
+	let lastReferenceHeight;
+	let lastAvailableWidth;
+	let lastAvailableHeight;
+	return (0, _floating_ui_dom.size)(() => {
+		const boundary = resolveBoundaryOption(opts.boundary);
+		return {
+			padding: opts.overflowPadding,
+			...boundary ? { boundary } : void 0,
+			apply({ elements, rects, availableHeight, availableWidth }) {
+				const floating = elements.floating;
+				const referenceWidth = Math.round(rects.reference.width);
+				const referenceHeight = Math.round(rects.reference.height);
+				availableWidth = Math.floor(availableWidth);
+				availableHeight = Math.floor(availableHeight);
+				if (!isApproximatelyEqual(lastReferenceWidth, referenceWidth)) {
+					floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+					lastReferenceWidth = referenceWidth;
+				}
+				if (!isApproximatelyEqual(lastReferenceHeight, referenceHeight)) {
+					floating.style.setProperty("--reference-height", `${referenceHeight}px`);
+					lastReferenceHeight = referenceHeight;
+				}
+				if (!isApproximatelyEqual(lastAvailableWidth, availableWidth)) {
+					floating.style.setProperty("--available-width", `${availableWidth}px`);
+					lastAvailableWidth = availableWidth;
+				}
+				if (!isApproximatelyEqual(lastAvailableHeight, availableHeight)) {
+					floating.style.setProperty("--available-height", `${availableHeight}px`);
+					lastAvailableHeight = availableHeight;
+				}
+			}
+		};
+	});
+}
+function hideWhenDetachedMiddleware(opts) {
+	if (!opts.hideWhenDetached) return;
+	return (0, _floating_ui_dom.hide)(() => ({
+		strategy: "referenceHidden",
+		boundary: resolveBoundaryOption(opts.boundary) ?? "clippingAncestors"
+	}));
+}
+function getAutoUpdateOptions(opts) {
+	if (!opts) return {};
+	if (opts === true) return {
+		ancestorResize: true,
+		ancestorScroll: true,
+		elementResize: true,
+		layoutShift: true
+	};
+	return opts;
+}
+const floatingStyleProps = [
+	"transform",
+	"visibility",
+	"pointer-events",
+	"--x",
+	"--y",
+	"--z-index",
+	"--reference-width",
+	"--reference-height",
+	"--available-width",
+	"--available-height",
+	"--transform-origin"
+];
+const arrowStyleProps = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+function createStyleCleanup(el, props) {
+	if (!el) return require_utils.noop;
+	const prev = new Map(props.map((prop) => [prop, el.style.getPropertyValue(prop)]));
+	return () => {
+		prev.forEach((value, prop) => {
+			if (value) el.style.setProperty(prop, value);
+			else el.style.removeProperty(prop);
+		});
+		if (el.style.length === 0) el.removeAttribute("style");
+	};
+}
+function anchorIdentity(anchor) {
+	if (anchor == null) return null;
+	if (require_dom_query.isHTMLElement(anchor)) return anchor;
+	if (typeof anchor === "object" && anchor && "contextElement" in anchor && anchor.contextElement) return anchor.contextElement;
+	return anchor;
+}
+function getPlacementImpl(referenceOrVirtual, floatingOrVirtual, opts = {}) {
+	const resolveFloating = () => {
+		return (typeof floatingOrVirtual === "function" ? floatingOrVirtual() : floatingOrVirtual) ?? null;
+	};
+	const resolveAnchor = () => {
+		const raw = typeof referenceOrVirtual === "function" ? referenceOrVirtual() : referenceOrVirtual;
+		return opts.getAnchorElement?.() ?? raw;
+	};
+	const resolveReference = () => {
+		const anchor = resolveAnchor();
+		if (!anchor && !opts.getAnchorRect) return null;
+		return getAnchorElement(anchor, opts.getAnchorRect);
+	};
+	const options = Object.assign({}, defaultOptions, opts);
+	let middleware = [];
+	let cachedMiddlewareFloating = null;
+	let restoreFloatingStyles;
+	let restoreArrowStyles;
+	function rebuildMiddlewareForFloating(floating) {
+		restoreFloatingStyles?.();
+		restoreArrowStyles?.();
+		cachedMiddlewareFloating = floating;
+		restoreFloatingStyles = options.restoreStyles ? createStyleCleanup(floating, floatingStyleProps) : void 0;
+		const arrowEl = floating.querySelector("[data-part=arrow]");
+		restoreArrowStyles = options.restoreStyles ? createStyleCleanup(arrowEl, arrowStyleProps) : void 0;
+		middleware = [
+			getOffsetMiddleware(arrowEl, options),
+			getFlipMiddleware(options),
+			getShiftMiddleware(options),
+			getArrowMiddleware(arrowEl, floating.ownerDocument, options),
+			shiftArrowMiddleware(arrowEl),
+			createTransformOriginMiddleware({
+				gutter: options.gutter,
+				offset: options.offset,
+				overlap: options.overlap
+			}, arrowEl),
+			getSizeMiddleware(options),
+			hideWhenDetachedMiddleware(options),
+			rectMiddleware
+		];
+	}
+	const { placement, strategy, onComplete, onPositioned } = options;
+	let lastX;
+	let lastY;
+	let zIndexComputed = false;
+	let lastAnchorForObserve = void 0;
+	let lastFloatingForObserve = void 0;
+	let cancelAutoUpdate = require_utils.noop;
+	const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
+	function syncAutoUpdateObservers() {
+		if (!options.listeners) return;
+		const anchor = resolveAnchor();
+		const reference = resolveReference();
+		const floating = resolveFloating();
+		if (!reference || !floating) return;
+		if (anchorIdentity(anchor) !== anchorIdentity(lastAnchorForObserve) || floating !== lastFloatingForObserve) {
+			cancelAutoUpdate();
+			lastAnchorForObserve = anchor;
+			lastFloatingForObserve = floating;
+			cancelAutoUpdate = (0, _floating_ui_dom.autoUpdate)(reference, floating, runUpdate, autoUpdateOptions);
+		}
+	}
+	async function updatePosition() {
+		syncAutoUpdateObservers();
+		const floating = resolveFloating();
+		if (!floating) return;
+		if (floating !== cachedMiddlewareFloating) {
+			rebuildMiddlewareForFloating(floating);
+			zIndexComputed = false;
+		}
+		const reference = resolveReference();
+		if (!reference) return;
+		const pos = await (0, _floating_ui_dom.computePosition)(reference, floating, {
+			placement,
+			middleware,
+			strategy
+		});
+		onComplete?.(pos);
+		const win = require_dom_query.getWindow(floating);
+		const x = roundByDpr(win, pos.x);
+		const y = roundByDpr(win, pos.y);
+		if (!isApproximatelyEqual(lastX, x)) {
+			floating.style.setProperty("--x", `${x}px`);
+			lastX = x;
+		}
+		if (!isApproximatelyEqual(lastY, y)) {
+			floating.style.setProperty("--y", `${y}px`);
+			lastY = y;
+		}
+		if (options.hideWhenDetached) if (pos.middlewareData.hide?.referenceHidden) {
+			floating.style.setProperty("visibility", "hidden");
+			floating.style.setProperty("pointer-events", "none");
+		} else {
+			floating.style.removeProperty("visibility");
+			floating.style.removeProperty("pointer-events");
+		}
+		if (!zIndexComputed) {
+			const contentEl = floating.firstElementChild;
+			if (contentEl) {
+				floating.style.setProperty("--z-index", require_computed_style.getComputedStyle(contentEl).zIndex);
+				zIndexComputed = true;
+			}
+		}
+	}
+	async function runUpdate() {
+		if (opts.updatePosition) {
+			await opts.updatePosition({
+				updatePosition,
+				floatingElement: resolveFloating()
+			});
+			onPositioned?.({ placed: true });
+		} else await updatePosition();
+	}
+	runUpdate();
+	return () => {
+		cancelAutoUpdate();
+		restoreArrowStyles?.();
+		restoreFloatingStyles?.();
+		onPositioned?.({ placed: false });
+	};
+}
+function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
+	const { defer, ...options } = opts;
+	const func = defer ? require_raf.raf : (v) => v();
+	const cleanups = [];
+	cleanups.push(func(() => {
+		cleanups.push(getPlacementImpl(referenceOrFn, floatingOrFn, options));
+	}));
+	return () => {
+		cleanups.forEach((fn) => fn?.());
+	};
+}
+//#endregion
+//#region src/common/popper/get-styles.ts
+const ARROW_FLOATING_STYLE = {
+	bottom: "rotate(45deg)",
+	left: "rotate(135deg)",
+	top: "rotate(225deg)",
+	right: "rotate(315deg)"
+};
+function getPlacementStyles(options = {}) {
+	const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
+	return {
+		arrow: {
+			position: "absolute",
+			width: cssVars.arrowSize.reference,
+			height: cssVars.arrowSize.reference,
+			[cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
+			[cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
+		},
+		arrowTip: {
+			transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : void 0,
+			background: cssVars.arrowBg.reference,
+			top: "0",
+			left: "0",
+			width: "100%",
+			height: "100%",
+			position: "absolute",
+			zIndex: "inherit"
+		},
+		floating: {
+			position: strategy,
+			isolation: "isolate",
+			minWidth: sameWidth ? void 0 : "max-content",
+			width: sameWidth ? "var(--reference-width)" : void 0,
+			maxWidth: fitViewport ? "var(--available-width)" : void 0,
+			maxHeight: fitViewport ? "var(--available-height)" : void 0,
+			pointerEvents: !placement ? "none" : void 0,
+			top: "0px",
+			left: "0px",
+			transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
+			zIndex: "var(--z-index)"
+		}
+	};
+}
+//#endregion
+Object.defineProperty(exports, "getPlacement", {
+	enumerable: true,
+	get: function() {
+		return getPlacement;
+	}
+});
+Object.defineProperty(exports, "getPlacementSide", {
+	enumerable: true,
+	get: function() {
+		return getPlacementSide;
+	}
+});
+Object.defineProperty(exports, "getPlacementStyles", {
+	enumerable: true,
+	get: function() {
+		return getPlacementStyles;
+	}
+});
+Object.defineProperty(exports, "isValidPlacement", {
+	enumerable: true,
+	get: function() {
+		return isValidPlacement;
+	}
+});