@whitesev/utils 2.0.0 → 2.0.1

package/src/LockFunction.ts

@@ -0,0 +1,67 @@
+import { Utils } from "./Utils";
+
+class LockFunction<K extends (...args: any[]) => any | Promise<any> | void> {
+	#flag: boolean = false;
+	#delayTime: number = 0;
+	#callback: K;
+	#context: typeof Utils;
+	lock: () => void;
+	unlock: () => void;
+	run: (...args: any[]) => Promise<void>;
+	isLock: () => boolean;
+	/**
+	 * @param callback 需要执行的函数
+	 * @param delayTime （可选）延迟xx毫秒后解锁，默认：0
+	 */
+	constructor(callback: K, delayTime?: number);
+	/**
+	 * @param callback 需要执行的函数
+	 * @param context （可选）函数作用域，默认：this(Utils)
+	 * @param delayTime （可选）延迟xx毫秒后解锁，默认：0
+	 */
+	constructor(callback: K, context?: any, delayTime?: number);
+	constructor(callback: K, context?: any, delayTime?: number) {
+		let that = this;
+		this.#callback = callback;
+		if (typeof context === "number") {
+			this.#delayTime = context;
+			this.#context = Utils;
+		} else {
+			this.#delayTime = delayTime as number;
+			this.#context = context;
+		}
+		/**
+		 * 锁
+		 */
+		this.lock = function () {
+			that.#flag = true;
+		};
+		/**
+		 * 解锁
+		 */
+		this.unlock = function () {
+			setTimeout(() => {
+				that.#flag = false;
+			}, that.#delayTime);
+		};
+		/**
+		 * 判断是否被锁
+		 */
+		this.isLock = function () {
+			return that.#flag;
+		};
+		/**
+		 * 执行
+		 */
+		this.run = async function (...args: any[]) {
+			if (that.isLock()) {
+				return;
+			}
+			that.lock();
+			await that.#callback.apply(that.#context, args);
+			that.unlock();
+		};
+	}
+}
+
+export { LockFunction };

package/src/Log.ts

@@ -0,0 +1,285 @@
+import type { AnyObject } from "./Utils";
+import { UtilsCore } from "./UtilsCore";
+
+/** Utils.Log的初始化配置 */
+declare interface UtilsLogOptions {
+	/** 是否输出Tag，false的话其它的颜色也不输出，默认为true */
+	tag: boolean;
+	/** log.success的颜色，默认#0000FF */
+	successColor: string;
+	/** log.warn的颜色，默认0 */
+	warnColor: string;
+	/** log.error的颜色，默认#FF0000 */
+	errorColor: string;
+	/** log.info的颜色，默认0 */
+	infoColor: string;
+	/** 是否开启debug模式，true会在控制台每次调用时输出调用函数的所在位置，false不会输出位置，默认false */
+	debug: boolean;
+	/** 当console输出超过logMaxCount数量自动清理控制台，默认false */
+	autoClearConsole: boolean;
+	/** console输出的最高数量，autoClearConsole开启则生效，默认999 */
+	logMaxCount: number;
+}
+
+class Log {
+	/** 是否禁用输出的flag */
+	#disable: boolean = false;
+	/** 前面的TAG标志 */
+	tag: string = "Utils.Log";
+	/* 使用的console函数 */
+	#console: Console = null as any;
+	/* 当前输出的数量 */
+	#logCount = 0;
+	/* 配置 */
+	#details: UtilsLogOptions = {
+		tag: true,
+		successColor: "#0000FF",
+		errorColor: "#FF0000",
+		infoColor: "0",
+		warnColor: "0",
+		debug: false,
+		autoClearConsole: false,
+		logMaxCount: 999,
+	};
+	#msgColorDetails = [
+		"font-weight: bold; color: cornflowerblue",
+		"font-weight: bold; color: cornflowerblue",
+		"font-weight: bold; color: darkorange",
+		"font-weight: bold; color: cornflowerblue",
+	];
+	/**
+	 * @param _GM_info_ 油猴管理器的API GM_info，或者是一个对象，如{"script":{name:"Utils.Log"}}，或者直接是一个字符串
+	 * @param console 可指定console对象为unsafeWindow下的console或者是油猴window下的console
+	 */
+	constructor(
+		_GM_info_?:
+			| {
+					script: {
+						name: string;
+					};
+			  }
+			| string,
+		console: Console = UtilsCore.window.console
+	) {
+		if (typeof _GM_info_ === "string") {
+			this.tag = _GM_info_;
+		} else if (
+			typeof _GM_info_ === "object" &&
+			typeof _GM_info_?.script?.name === "string"
+		) {
+			this.tag = _GM_info_.script.name;
+		}
+		this.#console = console;
+	}
+
+	/**
+	 * 解析Error的堆栈获取实际调用者的函数名及函数所在的位置
+	 * @param stack
+	 */
+	private parseErrorStack(stack: string[]) {
+		let result = {
+			name: "",
+			position: "",
+		};
+		for (let stackString of stack) {
+			stackString = stackString.trim();
+			let stackFunctionNameMatch = stackString.match(/^at[\s]+(.+?)[\s]+/i);
+			let stackFunctionNamePositionMatch = stackString.match(
+				/^at[\s]+.+[\s]+\((.+?)\)/i
+			);
+			if (stackFunctionNameMatch == null) {
+				continue;
+			}
+			if (stackFunctionNamePositionMatch == null) {
+				continue;
+			}
+			/* 获取最后一个，因为第一个是包含了at  */
+			let stackFunctionName =
+				stackFunctionNameMatch[stackFunctionNameMatch.length - 1];
+			let stackFunctionNamePosition =
+				stackFunctionNamePositionMatch[
+					stackFunctionNamePositionMatch.length - 1
+				];
+			if (
+				stackFunctionName === "" ||
+				stackFunctionName.match(
+					/^(Utils\.|)Log(\.|)|.<anonymous>$|^Function.each|^NodeList.forEach|^k.fn.init.each/g
+				)
+			) {
+				continue;
+			} else {
+				result.name = stackFunctionName;
+				result.position = stackFunctionNamePosition;
+				break;
+			}
+		}
+		if (result.position === "") {
+			let lastStackString = stack[stack.length - 1].trim();
+			if (lastStackString.startsWith("at chrome-extension://")) {
+				let lastStackMatch = lastStackString.match(/^at[\s]+(.+)/);
+				if (lastStackMatch) {
+					result.position = lastStackMatch[lastStackMatch.length - 1];
+				}
+			}
+		}
+		if (result.position === "") {
+			result.position = stack[stack.length - 1].trim().replace(/^at[\s]*/g, "");
+		}
+		return result;
+	}
+	/**
+	 * 检测清理控制台
+	 */
+	private checkClearConsole() {
+		this.#logCount++;
+		if (
+			this.#details.autoClearConsole &&
+			this.#logCount > this.#details.logMaxCount
+		) {
+			this.#console.clear();
+			this.#logCount = 0;
+		}
+	}
+
+	/**
+	 * 输出内容
+	 * @param msg 需要输出的内容
+	 * @param color 颜色
+	 * @param otherStyle 其它CSS
+	 */
+	private printContent(msg: any, color: string, otherStyle?: string) {
+		this.checkClearConsole();
+		otherStyle = otherStyle || "";
+		let stackSplit = new Error()!.stack!.split("\n");
+		stackSplit.splice(0, 2);
+		let { name: callerName, position: callerPosition } =
+			this.parseErrorStack(stackSplit);
+		let tagName = this.tag;
+		let that = this;
+		function consoleMsg(_msg_: any) {
+			if (typeof _msg_ === "string") {
+				that.#console.log(
+					`%c[${tagName}%c-%c${callerName}%c]%c %s`,
+					...that.#msgColorDetails,
+					`color: ${color};${otherStyle}`,
+					_msg_
+				);
+			} else if (typeof _msg_ === "number") {
+				that.#console.log(
+					`%c[${tagName}%c-%c${callerName}%c]%c %d`,
+					...that.#msgColorDetails,
+					`color: ${color};${otherStyle}`,
+					_msg_
+				);
+			} else if (typeof _msg_ === "object") {
+				that.#console.log(
+					`%c[${tagName}%c-%c${callerName}%c]%c %o`,
+					...that.#msgColorDetails,
+					`color: ${color};${otherStyle}`,
+					_msg_
+				);
+			} else {
+				that.#console.log(_msg_);
+			}
+		}
+		if (Array.isArray(msg)) {
+			msg.forEach((item) => {
+				consoleMsg(item);
+			});
+		} else {
+			consoleMsg(msg);
+		}
+		if (this.#details.debug) {
+			/* 如果开启调试模式，输出堆栈位置 */
+			this.#console.log(callerPosition);
+		}
+	}
+	/**
+	 * 控制台-普通输出
+	 * @param msg 需要输出的内容，如果想输出多个，修改成数组，且数组内的长度最大值为4个
+	 * @param color 输出的颜色
+	 * @param otherStyle 其它CSS
+	 */
+	info(msg: any, color: string = this.#details.infoColor, otherStyle?: string) {
+		if (this.#disable) return;
+		this.printContent.call(this, msg, color, otherStyle);
+	}
+	/**
+	 * 控制台-警告输出
+	 * @param msg 需要输出的内容，如果想输出多个，修改成数组，且数组内的长度最大值为4个
+	 * @param color 输出的颜色
+	 * @param otherStyle 其它CSS
+	 */
+	warn(
+		msg: any,
+		color = this.#details.warnColor,
+		otherStyle = "background: #FEF6D5;padding: 4px 6px 4px 0px;"
+	) {
+		if (this.#disable) return;
+		this.printContent.call(this, msg, color, otherStyle);
+	}
+	/**
+	 * 控制台-错误输出
+	 * @param msg 需要输出的内容，如果想输出多个，修改成数组，且数组内的长度最大值为4个
+	 * @param color 输出的颜色
+	 * @param otherStyle 其它CSS
+	 */
+	error(msg: any, color = this.#details.errorColor, otherStyle?: string) {
+		if (this.#disable) return;
+		this.printContent.call(this, msg, color, otherStyle);
+	}
+	/**
+	 * 控制台-成功输出
+	 * @param msg 需要输出的内容，如果想输出多个，修改成数组，且数组内的长度最大值为4个
+	 * @param color 输出的颜色
+	 * @param otherStyle 其它CSS
+	 */
+	success(msg: any, color = this.#details.successColor, otherStyle?: string) {
+		if (this.#disable) return;
+		this.printContent.call(this, msg, color, otherStyle);
+	}
+	/**
+	 * 控制台-输出表格
+	 * @param msg
+	 * @param color 输出的颜色
+	 * @param otherStyle 其它CSS
+	 * @example
+	 * log.table([{"名字":"example","值":"123"},{"名字":"example2","值":"345"}])
+	 */
+	table(msg: AnyObject[], color = this.#details.infoColor, otherStyle = "") {
+		if (this.#disable) return;
+		this.checkClearConsole();
+		let stack = new Error()!.stack!.split("\n");
+		stack.splice(0, 1);
+		let errorStackParse = this.parseErrorStack(stack);
+		let stackFunctionName = errorStackParse.name;
+		let stackFunctionNamePosition = errorStackParse.position;
+		let callerName = stackFunctionName;
+		this.#console.log(
+			`%c[${this.tag}%c-%c${callerName}%c]%c`,
+			...this.#msgColorDetails,
+			`color: ${color};${otherStyle}`
+		);
+		this.#console.table(msg);
+		if (this.#details.debug) {
+			this.#console.log(stackFunctionNamePosition);
+		}
+	}
+	/**
+	 * 配置Log对象的颜色
+	 * @param paramDetails 配置信息
+	 */
+	config(paramDetails: Partial<UtilsLogOptions>) {
+		this.#details = Object.assign(this.#details, paramDetails);
+	}
+	/** 禁用输出 */
+	disable() {
+		this.#disable = true;
+	}
+	/** 恢复输出 */
+	recovery() {
+		this.#disable = false;
+	}
+}
+
+export { Log };

package/src/Progress.ts

@@ -0,0 +1,149 @@
+import { Utils } from "./Utils";
+import { UtilsCore } from "./UtilsCore";
+
+declare interface ProgressParamConfig {
+	/** canvas元素节点 */
+	canvasNode: HTMLCanvasElement;
+	/** 绘制角度，默认：95 */
+	deg: number;
+	/** 进度，默认：0 */
+	progress: number;
+	/** 绘制的线宽度，默认：10 */
+	lineWidth: number;
+	/** 绘制的背景颜色，默认：#1e637c */
+	lineBgColor: string;
+	/** 绘制的线的颜色，默认：#25deff */
+	lineColor: string;
+	/** 绘制的字体颜色，默认：#000000 */
+	textColor: string;
+	/** 绘制的字体大小(px)，默认：22px */
+	fontSize: number;
+	/** 绘制的圆的半径，默认：50 */
+	circleRadius: number;
+}
+class Progress {
+	#config: ProgressParamConfig = {
+		/**
+		 * canvas元素节点
+		 */
+		canvasNode: null as any,
+		/**
+		 * 绘制角度
+		 */
+		deg: 95,
+		/**
+		 * 进度
+		 */
+		progress: 0,
+		/**
+		 * 绘制的线宽度
+		 */
+		lineWidth: 10,
+		/**
+		 * 绘制的背景颜色
+		 */
+		lineBgColor: "#1e637c",
+		/**
+		 * 绘制的线的颜色
+		 */
+		lineColor: "#25deff",
+		/**
+		 * 绘制的字体颜色
+		 */
+		textColor: "#000000",
+		/**
+		 * 绘制的字体大小(px)
+		 */
+		fontSize: 22,
+		/**
+		 * 绘制的圆的半径
+		 */
+		circleRadius: 50,
+	};
+	#ctx: CanvasRenderingContext2D = null as any;
+	#width: number = null as any;
+	#height: number = null as any;
+	/**
+	 *
+	 * @param paramConfig 配置信息
+	 */
+	constructor(paramConfig: ProgressParamConfig) {
+		this.#config = Utils.assign(this.#config, paramConfig);
+		if (!(this.#config.canvasNode instanceof HTMLCanvasElement)) {
+			throw new Error(
+				"Utils.Progress 参数 canvasNode 必须是 HTMLCanvasElement"
+			);
+		}
+		this.init();
+	}
+	/**
+	 * 初始化
+	 */
+	private init() {
+		/* 获取画笔 */
+		let ctx = this.#config.canvasNode.getContext("2d");
+		if (ctx == null) {
+			throw new Error("Utils.Progress 获取画笔失败");
+		}
+		this.#ctx = ctx;
+		/* 元素宽度 */
+		this.#width = this.#config.canvasNode.width;
+		/* 元素高度 */
+		this.#height = this.#config.canvasNode.height;
+		/* 清除锯齿 */
+		if (UtilsCore.window.devicePixelRatio) {
+			this.#config.canvasNode.style.width = this.#width + "px";
+			this.#config.canvasNode.style.height = this.#height + "px";
+			this.#config.canvasNode.height =
+				this.#height * UtilsCore.window.devicePixelRatio;
+			this.#config.canvasNode.width =
+				this.#width * UtilsCore.window.devicePixelRatio;
+			this.#ctx.scale(
+				UtilsCore.window.devicePixelRatio,
+				UtilsCore.window.devicePixelRatio
+			);
+		}
+		/* 设置线宽 */
+		this.#ctx.lineWidth = this.#config.lineWidth;
+	}
+	/**
+	 * 绘制
+	 */
+	draw() {
+		let degActive = (this.#config.progress * 360) / 100;
+		/* 清除画布 */
+		this.#ctx.clearRect(0, 0, this.#width, this.#height);
+		/* 开始绘制底圆 */
+		this.#ctx.beginPath();
+		this.#ctx.arc(
+			this.#width / 2,
+			this.#height / 2,
+			this.#config.circleRadius,
+			1,
+			8
+		);
+		this.#ctx.strokeStyle = this.#config.lineBgColor;
+		this.#ctx.stroke();
+		/* 开始绘制动态圆 */
+		this.#ctx.beginPath();
+		this.#ctx.arc(
+			this.#width / 2,
+			this.#height / 2,
+			this.#config.circleRadius,
+			-Math.PI / 2,
+			(degActive * Math.PI) / 180 - Math.PI / 2
+		);
+		this.#ctx.strokeStyle = this.#config.lineColor;
+		this.#ctx.stroke();
+		/* 获取百分比 */
+		let txt = parseInt(this.#config.progress.toString()) + "%";
+		this.#ctx.font = this.#config.fontSize + "px SimHei";
+		/* 获取文本宽度 */
+		let w = this.#ctx.measureText(txt).width;
+		let h = this.#config.fontSize / 2;
+		this.#ctx.fillStyle = this.#config.textColor;
+		this.#ctx.fillText(txt, this.#width / 2 - w / 2, this.#height / 2 + h / 2);
+	}
+}
+
+export { Progress };

package/src/TryCatch.ts

@@ -0,0 +1,107 @@
+import { Utils } from "./Utils";
+
+export declare interface UtilsTryCatchConfig {
+	log: boolean;
+}
+/** tryCatch */
+export declare interface UtilsTryCatchType {
+	run: UtilsTryCatchType;
+	config: UtilsTryCatchType;
+	error: UtilsTryCatchType;
+}
+const TryCatch = function (...args: any) {
+	/* 定义变量和函数 */
+	let callbackFunction = null;
+	let context = null;
+	let handleError = (error: Error) => {};
+	let defaultDetails = {
+		log: true,
+	};
+
+	const TryCatchCore = {
+		/**
+		 *
+		 * @param paramDetails 配置
+		 * @returns
+		 */
+		config(paramDetails: UtilsTryCatchConfig) {
+			defaultDetails = Utils.assign(defaultDetails, paramDetails);
+			return TryCatchCore;
+		},
+		/**
+		 * 处理错误
+		 * @param handler
+		 */
+		error(handler: ((...args: any[]) => any) | string | Function) {
+			// @ts-ignore
+			handleError = handler;
+			return TryCatchCore;
+		},
+		/**
+		 * 执行传入的函数并捕获其可能抛出的错误，并通过传入的错误处理函数进行处理。
+		 * @param callback 待执行函数，可以是 function 或者 string 类型。如果是 string 类型，则会被当做代码进行执行。
+		 * @param __context__ 待执行函数的作用域，用于apply指定
+		 * @returns 如果函数有返回值，则返回该返回值；否则返回 tryCatchObj 函数以支持链式调用。
+		 * @throws {Error} 如果传入参数不符合要求，则会抛出相应类型的错误。
+		 */
+		run<A extends any[], R>(
+			callback: ((...args: A) => R) | string | Function,
+			__context__?: any
+		): UtilsTryCatchType {
+			callbackFunction = callback;
+			context = __context__ || this;
+			let result = executeTryCatch(callbackFunction, handleError, context);
+			// @ts-ignore
+			return result !== void 0 ? result : TryCatchCore;
+		},
+	};
+
+	/**
+	 * 执行传入的函数并捕获其可能抛出的错误，并通过传入的错误处理函数进行处理。
+	 * @param callback - 待执行函数，可以是 function 或者 string 类型。如果是 string 类型，则会被当做代码进行执行。
+	 * @param handleErrorFunc - 错误处理函数，可以是 function 或者 string 类型。如果是 string 类型，则会被当做代码进行执行。
+	 * @param funcThis - 待执行函数的作用域，用于apply指定
+	 * @returns 如果函数有返回值，则返回该返回值；否则返回 undefined。
+	 */
+	function executeTryCatch<A extends any[], R>(
+		callback: string | ((...args: A) => R) | Function,
+		handleErrorFunc: string | ((...args: any[]) => any),
+		funcThis?: any
+	) {
+		let result = void 0;
+		try {
+			if (typeof callback === "string") {
+				(function () {
+					eval(callback as string);
+				}).apply(funcThis, args);
+			} else {
+				result = (callback as Function).apply(funcThis, args);
+			}
+		} catch (error) {
+			if (defaultDetails.log) {
+				callback = callback as Function;
+				console.log(
+					`%c ${callback?.name ? callback?.name : callback + "出现错误"} `,
+					"color: #f20000"
+				);
+				console.log(`%c 错误原因：${error}`, "color: #f20000");
+				console.trace(callback);
+			}
+			if (handleErrorFunc) {
+				if (typeof handleErrorFunc === "string") {
+					result = function () {
+						return eval(handleErrorFunc);
+						// @ts-ignore
+					}.apply(funcThis, [...args, error]);
+				} else {
+					result = handleErrorFunc.apply(funcThis, [...args, error]);
+				}
+			}
+		}
+		return result;
+	}
+
+	return TryCatchCore;
+};
+
+export { TryCatch };