@whitesev/utils 1.0.4 → 1.0.6

package/src/LockFunction.ts

@@ -0,0 +1,62 @@
+import { Utils } from ".";
+
+class LockFunction<K extends (...args: any[]) => any | Promise<any> | void> {
+	#flag: boolean = false;
+	#delayTime: number = 0;
+	#callback: K;
+	#context: typeof Utils;
+	/**
+	 * @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) {
+		this.#callback = callback;
+		if (typeof context === "number") {
+			this.#delayTime = context;
+			this.#context = Utils;
+		} else {
+			this.#delayTime = delayTime as number;
+			this.#context = context;
+		}
+	}
+	/**
+	 * 判断是否被锁
+	 */
+	isLock() {
+		return this.#flag;
+	}
+	/**
+	 * 锁
+	 */
+	lock() {
+		this.#flag = true;
+	}
+	/**
+	 * 解锁
+	 */
+	unlock() {
+		setTimeout(() => {
+			this.#flag = false;
+		}, this.#delayTime);
+	}
+	/**
+	 * 执行
+	 */
+	async run(...args: any[]) {
+		if (this.isLock()) {
+			return;
+		}
+		this.lock();
+		await this.#callback.apply(this.#context, args);
+		this.unlock();
+	}
+}
+
+export { LockFunction };

package/src/Log.ts

@@ -0,0 +1,281 @@
+import type { AnyObject } from ".";
+
+/** 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 {
+	/** 前面的TAG标志 */
+	#disable: boolean = false;
+	tag: string = "";
+	#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,
+	};
+	/**
+	 * 待恢复的函数或对象
+	 */
+	#recoveryList = [];
+	#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;
+			};
+		} = {
+			script: {
+				name: "Utils.Log",
+			},
+		},
+		console: Console = global.console
+	) {
+		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;
+			}
+			let stackFunctionName =
+				stackFunctionNameMatch[stackFunctionNameMatch.length - 1];
+			let stackFunctionNamePosition =
+				stackFunctionNamePositionMatch[
+					stackFunctionNamePositionMatch.length - 1
+				];
+			if (
+				stackFunctionName === "" ||
+				stackFunctionName.match(
+					new RegExp(
+						"(^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.apply(this);
+		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.apply(this);
+		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,143 @@
+import { Utils } from ".";
+
+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 (window.devicePixelRatio) {
+			this.#config.canvasNode.style.width = this.#width + "px";
+			this.#config.canvasNode.style.height = this.#height + "px";
+			this.#config.canvasNode.height = this.#height * window.devicePixelRatio;
+			this.#config.canvasNode.width = this.#width * window.devicePixelRatio;
+			this.#ctx.scale(window.devicePixelRatio, 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 };