@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/share/util/common.js

@@ -1,71 +1,133 @@
-import { d } from "../../aside/index.js";
-import { G as GROUP_OPTION_TYPE } from "../const/index.js";
-const clamp = (x, min, max) => Math.max(min, Math.min(max, x));
+import { A as d, P as ke } from "../../vendor.js";
+import { i as GROUP_OPTION_TYPE } from "../const/index.js";
 const fillArr = (val, size) => Array(size).fill(val);
 const defaultFilter = (keyword, list = []) => {
-  if (!keyword) {
-    return [...list];
-  }
-  const keyword4Search = keyword.toLowerCase();
-  const len = list.length;
-  const ans = [];
-  for (let i = 0; i < len; i++) {
-    const currentElement = list[i];
-    if (d(currentElement)) {
-      if ("type" in currentElement && currentElement.type === GROUP_OPTION_TYPE) {
-        const children = defaultFilter(keyword, currentElement.children);
-        if (children.length) {
-          ans.push({
-            ...currentElement,
-            children
-          });
-        }
-      } else {
-        if (currentElement.label.toLowerCase().includes(keyword4Search)) {
-          ans.push(currentElement);
-        }
-      }
-    } else {
-      if (currentElement.toLowerCase().includes(keyword4Search)) {
-        ans.push(currentElement);
-      }
-    }
-  }
-  return ans;
+	if (!keyword) return [...list];
+	const keyword4Search = keyword.toLowerCase();
+	const len = list.length;
+	const ans = [];
+	for (let i = 0; i < len; i++) {
+		const currentElement = list[i];
+		if (d(currentElement)) {
+			if ("type" in currentElement && currentElement.type === "group") {
+				const children = defaultFilter(keyword, currentElement.children);
+				if (children.length) ans.push({
+					...currentElement,
+					children
+				});
+			} else if (currentElement.label.toLowerCase().includes(keyword4Search)) ans.push(currentElement);
+		} else if (currentElement.toLowerCase().includes(keyword4Search)) ans.push(currentElement);
+	}
+	return ans;
 };
 const findSameOption = (keyword, list, checkLabel = false) => {
-  if (!keyword) {
-    return [];
-  }
-  const len = list.length;
-  const ans = [];
-  for (let i = 0; i < len; i++) {
-    const currentElement = list[i];
-    if (d(currentElement)) {
-      if ("type" in currentElement && currentElement.type === GROUP_OPTION_TYPE) {
-        const options = findSameOption(keyword, currentElement.children, checkLabel);
-        if (options.length) {
-          ans.push(options[0], currentElement);
-          break;
-        }
-      } else {
-        if (checkLabel && currentElement.label === keyword || currentElement.value === keyword) {
-          ans.push(currentElement);
-          break;
-        }
-      }
-    } else {
-      if (currentElement === keyword) {
-        ans.push(currentElement);
-        break;
-      }
-    }
-  }
-  return ans;
+	if (!keyword) return [];
+	const len = list.length;
+	const ans = [];
+	for (let i = 0; i < len; i++) {
+		const currentElement = list[i];
+		if (d(currentElement)) {
+			if ("type" in currentElement && currentElement.type === "group") {
+				const options = findSameOption(keyword, currentElement.children, checkLabel);
+				if (options.length) {
+					ans.push(options[0], currentElement);
+					break;
+				}
+			} else if (checkLabel && currentElement.label === keyword || currentElement.value === keyword) {
+				ans.push(currentElement);
+				break;
+			}
+		} else if (currentElement === keyword) {
+			ans.push(currentElement);
+			break;
+		}
+	}
+	return ans;
 };
-export {
-  findSameOption as a,
-  clamp as c,
-  defaultFilter as d,
-  fillArr as f
+function offsetOutward(center, points, offset) {
+	const [cx, cy] = center;
+	return points.map(([x, y]) => {
+		const dx = x - cx;
+		const dy = y - cy;
+		const xOffset = dx > 0 ? offset : dx < 0 ? -offset : 0;
+		const yOffset = dy > 0 ? offset : dy < 0 ? -offset : 0;
+		return [x + xOffset, y + yOffset];
+	});
+}
+function isUrl(url, options = {}) {
+	if (!url || typeof url !== "string") return false;
+	const { allowWithoutProtocol = true, allowIpv6 = true } = options;
+	if (url.includes(" ")) return false;
+	const [protocol, rest] = extractProtocol(url);
+	if (!protocol && !allowWithoutProtocol) return false;
+	const hostPortPart = rest.split(/[/?#]/)[0];
+	if (!hostPortPart) return false;
+	const { host, port } = parseHostAndPort(hostPortPart) || {};
+	if (!host) return false;
+	let isHostValid = false;
+	if (isIPv6Host(host)) {
+		if (!allowIpv6) return false;
+		isHostValid = isValidIPv6(host);
+	} else isHostValid = isValidIPv4(host) || isValidDomain(host);
+	if (!isHostValid) return false;
+	if (port && !isValidPort(port)) return false;
+	return true;
+}
+function extractProtocol(url) {
+	const protocolMatch = url.match(/^([a-zA-Z0-9+.-]+):\/\//);
+	if (protocolMatch) return [protocolMatch[1], url.slice(protocolMatch[0].length)];
+	return [null, url];
+}
+function parseHostAndPort(hostPortPart) {
+	if (hostPortPart.startsWith("[")) {
+		const ipv6Match = hostPortPart.match(/^\[(.*?)\](?::(\d+))?$/);
+		if (!ipv6Match) return null;
+		return {
+			host: ipv6Match[1],
+			port: ipv6Match[2] || void 0
+		};
+	}
+	const parts = hostPortPart.split(":");
+	if (parts.length > 2) return null;
+	return {
+		host: parts[0],
+		port: parts[1] || void 0
+	};
+}
+function isIPv6Host(host) {
+	return host.includes(":");
+}
+function isValidIPv4(ip) {
+	const parts = ip.split(".");
+	if (parts.length !== 4) return false;
+	return parts.every((part) => {
+		if (!/^\d+$/.test(part) || part.length > 1 && part[0] === "0") return false;
+		const num = Number(part);
+		return num >= 0 && num <= 255;
+	});
+}
+function isValidIPv6(ip) {
+	if (!/^[0-9a-fA-F:]+$/.test(ip)) return false;
+	if ((ip.match(/::/g) || []).length > 1) return false;
+	let groups = ip.split(":").filter((g) => g !== "");
+	if (8 - groups.length < 0) return false;
+	return groups.every((group) => group.length >= 1 && group.length <= 4);
+}
+function isValidDomain(domain) {
+	if (domain === "localhost") return true;
+	if (domain.includes("..") || domain.startsWith(".") || domain.endsWith(".")) return false;
+	const parts = domain.split(".");
+	if (parts.length < 2) return false;
+	if (parts[parts.length - 1].length < 2) return false;
+	return parts.every((part) => {
+		return part.length > 0 && !part.startsWith("-") && !part.endsWith("-") && /^[a-zA-Z0-9-]+$/.test(part);
+	});
+}
+function isValidPort(port) {
+	const portNum = Number(port);
+	return !isNaN(portNum) && portNum >= 1 && portNum <= 65535;
+}
+const fixedNumber = (value, precision) => {
+	return parseFloat(value.toFixed(ke(Math.round(precision), 0, 100)));
 };
+export { isUrl as a, fixedNumber as i, fillArr as n, offsetOutward as o, findSameOption as r, defaultFilter as t };

package/es/share/util/console.d.ts

@@ -1,5 +1,5 @@
-export declare function logInfo(...message: any[]): void;
-export declare function logWarn(...message: any[]): void;
-export declare function logError(...message: any[]): void;
+export declare function logInfo(message: any, showInProd?: boolean): void;
+export declare function logWarn(message: any, showInProd?: boolean): void;
+export declare function logError(message: any, showInProd?: boolean): void;
 export declare function throwError(message: string): void;
 export declare function createError(message: string): Error;

package/es/share/util/console.js

@@ -1,9 +1,12 @@
-// @ts-ignore
-typeof process !== "undefined" && process.env.NODE_ENV !== "production";
-const projectName = "Pixelium";
+var isNotProdMode = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+var projectName = "Pixelium";
+function logWarn(message, showInProd = false) {
+	if (isNotProdMode || showInProd) console.warn(`[${projectName}]`, message);
+}
 function throwError(message) {
-  throw new Error(`[${projectName}] ${message}`);
+	throw new Error(`[${projectName}] ${message}`);
+}
+function createError(message) {
+	return /* @__PURE__ */ new Error(`[${projectName}] ${message}`);
 }
-export {
-  throwError as t
-};
+export { logWarn as n, throwError as r, createError as t };

package/es/share/util/dom.d.ts

@@ -0,0 +1,19 @@
+export declare function checkIntersection(target: HTMLElement, root?: HTMLElement): {
+    hasIntersection: boolean;
+    x: number;
+    y: number;
+};
+interface ZoomOptions {
+    maxWidth?: number;
+    maxHeight?: number;
+    margin?: number;
+}
+export declare function calculateZoomedSize(originalImg: HTMLImageElement, options?: ZoomOptions): {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+};
+export declare const checkMouseInsideElementFromEvent: (el: HTMLElement | SVGElement, e: MouseEvent | TouchEvent) => boolean;
+export declare function imageDataToDataURL(imageData: ImageData): string;
+export {};

package/es/share/util/dom.js

@@ -0,0 +1,88 @@
+import { w as Qn } from "../../vendor.js";
+import { t as createError } from "./console.js";
+function checkIntersection(target, root) {
+	if (window.getComputedStyle(target).display === "none") return {
+		hasIntersection: false,
+		x: Infinity,
+		y: Infinity
+	};
+	let isViewport = false;
+	if (!root) isViewport = true;
+	const rootRect = isViewport ? {
+		left: 0,
+		top: 0,
+		right: window.innerWidth,
+		bottom: window.innerHeight
+	} : root.getBoundingClientRect();
+	const targetRect = target.getBoundingClientRect();
+	const hasXIntersection = targetRect.left <= rootRect.right && targetRect.right >= rootRect.left;
+	const hasYIntersection = targetRect.top <= rootRect.bottom && targetRect.bottom >= rootRect.top;
+	const hasIntersection = hasXIntersection && hasYIntersection;
+	let xDistance;
+	if (hasXIntersection) xDistance = 0;
+	else if (targetRect.right < rootRect.left) xDistance = rootRect.left - targetRect.right;
+	else xDistance = targetRect.left - rootRect.right;
+	let yDistance;
+	if (hasYIntersection) yDistance = 0;
+	else if (targetRect.bottom < rootRect.top) yDistance = rootRect.top - targetRect.bottom;
+	else yDistance = targetRect.top - rootRect.bottom;
+	xDistance = Math.max(0, xDistance);
+	yDistance = Math.max(0, yDistance);
+	return {
+		hasIntersection,
+		x: xDistance,
+		y: yDistance
+	};
+}
+function calculateZoomedSize(originalImg, options) {
+	const currentOptions = Qn(options, {
+		margin: 32,
+		maxWidth: Infinity,
+		maxHeight: Infinity
+	});
+	const viewportWidth = window.innerWidth;
+	const viewportHeight = window.innerHeight;
+	const finalViewportWidth = Math.min(viewportWidth - currentOptions.margin * 2, currentOptions.maxWidth);
+	const finalViewportHeight = Math.min(viewportHeight - currentOptions.margin * 2, currentOptions.maxHeight);
+	if (!originalImg.complete) return {
+		width: 0,
+		height: 0,
+		left: finalViewportWidth / 2,
+		top: finalViewportHeight / 2
+	};
+	const naturalWidth = originalImg.naturalWidth || finalViewportWidth;
+	const naturalHeight = originalImg.naturalHeight || finalViewportHeight;
+	const aspectRatio = originalImg.naturalWidth / originalImg.naturalHeight;
+	const scaleX = Math.min(naturalWidth, finalViewportWidth) / naturalWidth;
+	const scaleY = Math.min(naturalHeight, finalViewportHeight) / naturalHeight;
+	const finalHeight = Math.min(scaleX, scaleY) * naturalHeight;
+	const finalWidth = finalHeight * aspectRatio;
+	return {
+		width: finalWidth,
+		height: finalHeight,
+		left: finalViewportWidth / 2 - finalWidth / 2 + currentOptions.margin,
+		top: finalViewportHeight / 2 - finalHeight / 2 + currentOptions.margin
+	};
+}
+const checkMouseInsideElementFromEvent = (el, e) => {
+	const rect = el.getBoundingClientRect();
+	let clientX, clientY;
+	if (e instanceof MouseEvent) {
+		clientX = e.clientX;
+		clientY = e.clientY;
+	} else {
+		clientX = e.touches[0].clientX;
+		clientY = e.touches[0].clientY;
+	}
+	return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+};
+function imageDataToDataURL(imageData) {
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw createError("Cannot get Canvas context");
+	canvas.width = imageData.width;
+	canvas.height = imageData.height;
+	ctx.putImageData(imageData, 0, 0);
+	return canvas.toDataURL("image/png");
+}
+export { imageDataToDataURL as i, checkIntersection as n, checkMouseInsideElementFromEvent as r, calculateZoomedSize as t };

package/es/share/util/env.d.ts

@@ -1 +1,2 @@
+export declare const inVitest: () => boolean;
 export declare const inBrowser: () => boolean;

package/es/share/util/env.js

@@ -1,6 +1,7 @@
-const inBrowser = () => {
-  return typeof window !== "undefined";
+const inVitest = () => {
+	return typeof process === "object" && typeof process.env === "object" && process.env.VITEST === "true";
 };
-export {
-  inBrowser as i
+const inBrowser = () => {
+	return typeof window !== "undefined";
 };
+export { inVitest as n, inBrowser as t };

package/es/share/util/event-bus.js

@@ -1,20 +1,3 @@
-function mitt(n) {
-  return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
-    var i = n.get(t);
-    i ? i.push(e) : n.set(t, [e]);
-  }, off: function(t, e) {
-    var i = n.get(t);
-    i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, []));
-  }, emit: function(t, e) {
-    var i = n.get(t);
-    i && i.slice().map(function(n2) {
-      n2(e);
-    }), (i = n.get("*")) && i.slice().map(function(n2) {
-      n2(t, e);
-    });
-  } };
-}
-const EventBus = mitt();
-export {
-  EventBus as E
-};
+import { m as mitt_default } from "../../vendor.js";
+const EventBus = mitt_default();
+export { EventBus as t };

package/es/share/util/lru-cache.js

@@ -1,35 +1,31 @@
 function createLRU(max) {
-  if (!Number.isInteger(max) || max <= 0) {
-    throw new RangeError("max must be a positive integer");
-  }
-  const cache = /* @__PURE__ */ new Map();
-  return {
-    get(key) {
-      const val = cache.get(key);
-      if (val === void 0) return void 0;
-      cache.delete(key);
-      cache.set(key, val);
-      return val;
-    },
-    set(key, value) {
-      if (cache.has(key)) cache.delete(key);
-      else if (cache.size >= max) cache.delete(cache.keys().next().value);
-      cache.set(key, value);
-    },
-    delete(key) {
-      return cache.delete(key);
-    },
-    clear() {
-      cache.clear();
-    },
-    has(key) {
-      return cache.has(key);
-    },
-    get size() {
-      return cache.size;
-    }
-  };
+	if (!Number.isInteger(max) || max <= 0) throw new RangeError("max must be a positive integer");
+	const cache = /* @__PURE__ */ new Map();
+	return {
+		get(key) {
+			const val = cache.get(key);
+			if (val === void 0) return void 0;
+			cache.delete(key);
+			cache.set(key, val);
+			return val;
+		},
+		set(key, value) {
+			if (cache.has(key)) cache.delete(key);
+			else if (cache.size >= max) cache.delete(cache.keys().next().value);
+			cache.set(key, value);
+		},
+		delete(key) {
+			return cache.delete(key);
+		},
+		clear() {
+			cache.clear();
+		},
+		has(key) {
+			return cache.has(key);
+		},
+		get size() {
+			return cache.size;
+		}
+	};
 }
-export {
-  createLRU as c
-};
+export { createLRU as t };

package/es/share/util/pixel.d.ts

@@ -0,0 +1,4 @@
+export declare function pixelateImage(imageSource: HTMLImageElement | string, pixelSize: number, options?: {
+    palette?: string[];
+    background?: string;
+}): Promise<string>;

package/es/share/util/plot.d.ts

@@ -1,6 +1,8 @@
 import type { NumberOrPercentage, RgbaColor } from '../type';
 import type { ShallowRef } from 'vue';
+export declare const roundToPixel: (coord: number, pixelSize: number) => number;
 export declare function drawCircle(ctx: CanvasRenderingContext2D, centerX: number, centerY: number, radius: number, startRad: number | undefined, endRad: number | undefined, pixelSize: number): void;
+export declare function drawSmoothCircle(ctx: CanvasRenderingContext2D, centerX: number, centerY: number, radius: number, startRad: number | undefined, endRad: number | undefined, pixelSize: number): void;
 export type floodFillArgs = {
     x: number;
     y: number;
@@ -11,15 +13,18 @@ export type floodFillArgs = {
     pixels: number[];
 };
 export declare function floodFill(ctx: CanvasRenderingContext2D, startX: number, startY: number, fillColor: RgbaColor): void;
-export declare const transformBorderRadiusSizeValue: (canvas: HTMLCanvasElement, value: NumberOrPercentage, pixelSize: number) => number;
-export declare const getBorderRadius: (canvas: HTMLCanvasElement, pixelSize: number, borderRadius: NumberOrPercentage | NumberOrPercentage[] | undefined, shape: "default" | "round" | "circle" | "square" | undefined, size?: "medium" | "small" | "large", inner?: boolean, first?: boolean, last?: boolean) => number[];
+export declare const transformBorderRadiusSizeValue: (canvas: HTMLCanvasElement, value: NumberOrPercentage, pixelSize: number, direction?: "horizontal" | "vertical") => number;
+export declare const getBorderRadius: (canvas: HTMLCanvasElement, pixelSize: number, borderRadius: NumberOrPercentage | NumberOrPercentage[] | undefined, shape: "rect" | "round" | "circle" | "square" | "default" | undefined, size?: "medium" | "small" | "large", inner?: boolean, first?: boolean, last?: boolean, direction?: "horizontal" | "vertical") => number[];
 export declare function calcWhenLeaveBaseline(pixelSize: number, borderRadius: number): number;
 export declare const calcPixelSize: () => number;
 export declare const calcBorderCornerCenter: (borderRadius: number[], width: number, height: number, pixelSize: number, paddingX?: number, paddingY?: number) => [number, number][];
-export declare const canvasPreprocess: (wrapperRef: ShallowRef<HTMLElement | null>, canvasRef: ShallowRef<HTMLCanvasElement | null>) => {
+export declare const canvasPreprocess: (wrapperRef: ShallowRef<HTMLElement | null>, canvasRef: ShallowRef<HTMLCanvasElement | null>, paddingX?: number, paddingY?: number) => {
     ctx: CanvasRenderingContext2D;
     width: number;
     height: number;
     rect: DOMRect;
     canvas: HTMLCanvasElement;
+    wrapper: HTMLElement;
 } | undefined;
+export declare function floodFillEdge(ctx: CanvasRenderingContext2D, startX: number, startY: number, fillColor: RgbaColor): [number, number][];
+export declare function outerEdgePoints(ctx: CanvasRenderingContext2D): [number, number][];