@robot-admin/naive-ui-components 0.4.3 → 0.4.4

package/dist/C_Signature2.js

@@ -1,618 +1,2 @@
-import { t as C_Icon_default } from "./C_Icon2.js";
-import { t as export_helper_default } from "./export-helper.js";
-import { NButton, NButtonGroup, NColorPicker, NInputNumber } from "naive-ui";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, readonly, ref, toRef, unref, withCtx } from "vue";
-
-//#region src/components/C_Signature/composables/useSignatureCanvas.ts
-function useSignatureCanvas(options) {
-	const { canvasRef, penConfig, mode, disabled, onStrokeComplete, onDrawStart, onDrawing } = options;
-	const isDrawing = ref(false);
-	const currentStroke = ref([]);
-	let ctx = null;
-	const initCanvas = () => {
-		const canvas = canvasRef.value;
-		if (!canvas) return;
-		ctx = canvas.getContext("2d", { willReadFrequently: true });
-		if (!ctx) return;
-		const dpr = window.devicePixelRatio || 1;
-		const rect = canvas.getBoundingClientRect();
-		canvas.width = rect.width * dpr;
-		canvas.height = rect.height * dpr;
-		canvas.style.width = `${rect.width}px`;
-		canvas.style.height = `${rect.height}px`;
-		ctx.scale(dpr, dpr);
-		ctx.lineCap = "round";
-		ctx.lineJoin = "round";
-	};
-	const getPointFromEvent = (e) => {
-		const canvas = canvasRef.value;
-		if (!canvas) return {
-			x: 0,
-			y: 0
-		};
-		const rect = canvas.getBoundingClientRect();
-		let clientX;
-		let clientY;
-		if ("touches" in e && e.touches.length > 0) ({clientX, clientY} = e.touches[0]);
-		else if ("clientX" in e) ({clientX, clientY} = e);
-		else return {
-			x: 0,
-			y: 0
-		};
-		return {
-			x: clientX - rect.left,
-			y: clientY - rect.top,
-			timestamp: Date.now()
-		};
-	};
-	const drawStroke = (from, to, config, eraserMode = false) => {
-		if (!ctx) return;
-		ctx.save();
-		if (eraserMode) {
-			ctx.globalCompositeOperation = "destination-out";
-			ctx.lineWidth = 20;
-		} else {
-			ctx.globalCompositeOperation = "source-over";
-			ctx.strokeStyle = config.color;
-			ctx.lineWidth = config.width;
-			ctx.globalAlpha = config.opacity;
-		}
-		ctx.beginPath();
-		ctx.moveTo(from.x, from.y);
-		ctx.lineTo(to.x, to.y);
-		ctx.stroke();
-		ctx.restore();
-	};
-	const startDrawing = (e) => {
-		if (disabled.value) return;
-		e.preventDefault();
-		isDrawing.value = true;
-		currentStroke.value = [];
-		const point = getPointFromEvent(e);
-		currentStroke.value.push(point);
-		onDrawStart();
-	};
-	const draw = (e) => {
-		if (!isDrawing.value || disabled.value) return;
-		e.preventDefault();
-		const point = getPointFromEvent(e);
-		const lastPoint = currentStroke.value[currentStroke.value.length - 1];
-		if (lastPoint) drawStroke(lastPoint, point, penConfig.value, mode.value === "eraser");
-		currentStroke.value.push(point);
-		onDrawing(point);
-	};
-	const endDrawing = (e) => {
-		if (!isDrawing.value || disabled.value) return;
-		e.preventDefault();
-		isDrawing.value = false;
-		if (currentStroke.value.length > 0) {
-			onStrokeComplete({
-				points: [...currentStroke.value],
-				color: penConfig.value.color,
-				width: penConfig.value.width,
-				opacity: penConfig.value.opacity,
-				mode: mode.value
-			});
-			currentStroke.value = [];
-		}
-	};
-	const redrawStrokes = (strokes) => {
-		if (!ctx || !canvasRef.value) return;
-		const canvas = canvasRef.value;
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		strokes.forEach((stroke) => {
-			for (let i = 1; i < stroke.points.length; i++) drawStroke(stroke.points[i - 1], stroke.points[i], {
-				color: stroke.color,
-				width: stroke.width,
-				opacity: stroke.opacity
-			}, stroke.mode === "eraser");
-		});
-	};
-	const clearCanvas = () => {
-		if (!ctx || !canvasRef.value) return;
-		ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
-	};
-	const bindEvents = () => {
-		const canvas = canvasRef.value;
-		if (!canvas) return;
-		canvas.addEventListener("mousedown", startDrawing);
-		canvas.addEventListener("mousemove", draw);
-		canvas.addEventListener("mouseup", endDrawing);
-		canvas.addEventListener("mouseleave", endDrawing);
-		canvas.addEventListener("touchstart", startDrawing, { passive: false });
-		canvas.addEventListener("touchmove", draw, { passive: false });
-		canvas.addEventListener("touchend", endDrawing);
-		canvas.addEventListener("touchcancel", endDrawing);
-	};
-	const unbindEvents = () => {
-		const canvas = canvasRef.value;
-		if (!canvas) return;
-		canvas.removeEventListener("mousedown", startDrawing);
-		canvas.removeEventListener("mousemove", draw);
-		canvas.removeEventListener("mouseup", endDrawing);
-		canvas.removeEventListener("mouseleave", endDrawing);
-		canvas.removeEventListener("touchstart", startDrawing);
-		canvas.removeEventListener("touchmove", draw);
-		canvas.removeEventListener("touchend", endDrawing);
-		canvas.removeEventListener("touchcancel", endDrawing);
-	};
-	return {
-		isDrawing: readonly(isDrawing),
-		initCanvas,
-		bindEvents,
-		unbindEvents,
-		redrawStrokes,
-		clearCanvas
-	};
-}
-
-//#endregion
-//#region src/components/C_Signature/composables/useSignatureHistory.ts
-function useSignatureHistory(options = {}) {
-	const { maxHistory = 50, onChange } = options;
-	const strokes = ref([]);
-	const historyStack = ref([]);
-	const historyIndex = ref(-1);
-	const canUndo = computed(() => historyIndex.value > 0);
-	const canRedo = computed(() => historyIndex.value < historyStack.value.length - 1);
-	const addStroke = (stroke) => {
-		strokes.value.push(stroke);
-		saveToHistory();
-	};
-	const saveToHistory = () => {
-		historyStack.value = historyStack.value.slice(0, historyIndex.value + 1);
-		historyStack.value.push([...strokes.value]);
-		historyIndex.value++;
-		if (historyStack.value.length > maxHistory) {
-			historyStack.value.shift();
-			historyIndex.value--;
-		}
-		onChange?.(strokes.value);
-	};
-	const undo = () => {
-		if (!canUndo.value) return false;
-		historyIndex.value--;
-		strokes.value = [...historyStack.value[historyIndex.value]];
-		onChange?.(strokes.value);
-		return true;
-	};
-	const redo = () => {
-		if (!canRedo.value) return false;
-		historyIndex.value++;
-		strokes.value = [...historyStack.value[historyIndex.value]];
-		onChange?.(strokes.value);
-		return true;
-	};
-	const clear = () => {
-		strokes.value = [];
-		historyStack.value = [[]];
-		historyIndex.value = 0;
-		onChange?.(strokes.value);
-	};
-	const loadData = (data) => {
-		strokes.value = [...data];
-		historyStack.value = [[...data]];
-		historyIndex.value = 0;
-		onChange?.(strokes.value);
-	};
-	const isEmpty = computed(() => strokes.value.length === 0);
-	historyStack.value = [[]];
-	historyIndex.value = 0;
-	return {
-		strokes: readonly(strokes),
-		canUndo: readonly(canUndo),
-		canRedo: readonly(canRedo),
-		isEmpty: readonly(isEmpty),
-		addStroke,
-		undo,
-		redo,
-		clear,
-		loadData
-	};
-}
-
-//#endregion
-//#region src/components/C_Signature/composables/useSignatureExport.ts
-function useSignatureExport(options) {
-	const { canvasRef, watermark } = options;
-	const getWatermarkPosition = (canvas, textWidth, fontSize, position) => {
-		const padding = 10;
-		const positions = {
-			"top-left": {
-				x: padding,
-				y: fontSize + padding
-			},
-			"top-right": {
-				x: canvas.width - textWidth - padding,
-				y: fontSize + padding
-			},
-			"bottom-left": {
-				x: padding,
-				y: canvas.height - padding
-			},
-			"bottom-right": {
-				x: canvas.width - textWidth - padding,
-				y: canvas.height - padding
-			}
-		};
-		return positions[position] || positions["bottom-right"];
-	};
-	const drawWatermark = (canvas, text) => {
-		const ctx = canvas.getContext("2d");
-		if (!ctx || !watermark?.value?.show) return;
-		const config = {
-			fontSize: watermark.value.fontSize || 12,
-			color: watermark.value.color || "#999999",
-			position: watermark.value.position || "bottom-right"
-		};
-		ctx.save();
-		ctx.font = `${config.fontSize}px Arial`;
-		ctx.fillStyle = config.color;
-		ctx.textBaseline = "bottom";
-		const textWidth = ctx.measureText(text).width;
-		const { x, y } = getWatermarkPosition(canvas, textWidth, config.fontSize, config.position);
-		ctx.fillText(text, x, y);
-		ctx.restore();
-	};
-	const createTempCanvas = (sourceCanvas, includeBackground, backgroundColor) => {
-		const tempCanvas = document.createElement("canvas");
-		tempCanvas.width = sourceCanvas.width;
-		tempCanvas.height = sourceCanvas.height;
-		const tempCtx = tempCanvas.getContext("2d");
-		if (!tempCtx) throw new Error("无法创建临时 Canvas");
-		if (includeBackground) {
-			tempCtx.fillStyle = backgroundColor;
-			tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
-		}
-		tempCtx.drawImage(sourceCanvas, 0, 0);
-		return {
-			canvas: tempCanvas,
-			ctx: tempCtx
-		};
-	};
-	const prepareExportCanvas = (canvas, options) => {
-		const { includeBackground = false, backgroundColor = "#FFFFFF", includeWatermark = false } = options;
-		const { canvas: tempCanvas } = createTempCanvas(canvas, includeBackground, backgroundColor);
-		if (includeWatermark && watermark?.value?.show && watermark.value.text) drawWatermark(tempCanvas, watermark.value.text);
-		return tempCanvas;
-	};
-	const exportToBlob = (canvas, quality) => {
-		return new Promise((resolve, reject) => {
-			canvas.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("导出失败")), "image/png", quality);
-		});
-	};
-	const exportSignature = async (options = {}) => {
-		const canvas = canvasRef.value;
-		if (!canvas) throw new Error("Canvas 未初始化");
-		const { format = "png", quality = .92 } = options;
-		if (format === "svg") return "data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\"><text>SVG export placeholder</text></svg>";
-		const tempCanvas = prepareExportCanvas(canvas, options);
-		if (format === "blob") return exportToBlob(tempCanvas, quality);
-		const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
-		return tempCanvas.toDataURL(mimeType, quality);
-	};
-	const download = async (filename = "signature", options = {}) => {
-		const format = options.format || "png";
-		const result = await exportSignature({
-			...options,
-			format
-		});
-		if (result instanceof Blob) {
-			const url = URL.createObjectURL(result);
-			const link = document.createElement("a");
-			link.href = url;
-			link.download = `${filename}.${format}`;
-			link.click();
-			URL.revokeObjectURL(url);
-		} else if (typeof result === "string") {
-			const link = document.createElement("a");
-			link.href = result;
-			link.download = `${filename}.${format}`;
-			link.click();
-		}
-	};
-	const loadImage = async (imageUrl) => {
-		const canvas = canvasRef.value;
-		if (!canvas) throw new Error("Canvas 未初始化");
-		const ctx = canvas.getContext("2d");
-		if (!ctx) throw new Error("无法获取 Canvas 上下文");
-		return new Promise((resolve, reject) => {
-			const img = new Image();
-			img.crossOrigin = "anonymous";
-			img.onload = () => {
-				ctx.clearRect(0, 0, canvas.width, canvas.height);
-				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-				resolve();
-			};
-			img.onerror = () => reject(/* @__PURE__ */ new Error(`图片加载失败: ${imageUrl}`));
-			img.src = imageUrl;
-		});
-	};
-	return {
-		exportSignature,
-		download,
-		loadImage
-	};
-}
-
-//#endregion
-//#region src/components/C_Signature/data.ts
-const DEFAULT_PEN_CONFIG = {
-	color: "#000000",
-	width: 2,
-	opacity: 1
-};
-const DEFAULT_WATERMARK_CONFIG = {
-	show: false,
-	text: "",
-	fontSize: 12,
-	color: "#999999",
-	position: "bottom-right"
-};
-const PRESET_COLORS = [
-	"#000000",
-	"#FF0000",
-	"#0000FF",
-	"#00AA00",
-	"#FF6600",
-	"#9900FF"
-];
-
-//#endregion
-//#region src/components/C_Signature/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = { class: "c-signature" };
-const _hoisted_2 = {
-	key: 0,
-	class: "signature-toolbar"
-};
-const _hoisted_3 = { class: "toolbar-section" };
-const _hoisted_4 = {
-	key: 0,
-	class: "toolbar-section"
-};
-const _hoisted_5 = {
-	key: 1,
-	class: "toolbar-section"
-};
-const _hoisted_6 = { class: "toolbar-section" };
-const _hoisted_7 = { class: "toolbar-section" };
-const _hoisted_8 = {
-	key: 0,
-	class: "canvas-placeholder"
-};
-var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "C_Signature",
-	__name: "index",
-	props: {
-		width: { default: "100%" },
-		height: { default: 300 },
-		penConfig: {},
-		eraserConfig: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		readonly: {
-			type: Boolean,
-			default: false
-		},
-		backgroundImage: {},
-		backgroundColor: {},
-		watermark: {},
-		showToolbar: {
-			type: Boolean,
-			default: true
-		},
-		maxHistory: { default: 50 }
-	},
-	emits: [
-		"start-draw",
-		"drawing",
-		"end-draw",
-		"clear",
-		"undo",
-		"redo",
-		"change"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const canvasRef = ref(null);
-		const currentMode = ref("pen");
-		const currentPenConfig = reactive({
-			...DEFAULT_PEN_CONFIG,
-			...props.penConfig
-		});
-		const currentWatermark = reactive({
-			...DEFAULT_WATERMARK_CONFIG,
-			...props.watermark
-		});
-		const { strokes, canUndo, canRedo, isEmpty, addStroke, undo, redo, clear, loadData } = useSignatureHistory({
-			maxHistory: props.maxHistory,
-			onChange: (data) => {
-				canvasInstance.redrawStrokes(data);
-				emit("change", data);
-			}
-		});
-		const canvasInstance = useSignatureCanvas({
-			canvasRef,
-			penConfig: toRef(currentPenConfig),
-			mode: currentMode,
-			disabled: toRef(props, "disabled"),
-			onStrokeComplete: (stroke) => {
-				addStroke(stroke);
-				emit("end-draw", stroke);
-			},
-			onDrawStart: () => emit("start-draw"),
-			onDrawing: (point) => emit("drawing", point)
-		});
-		const exportInstance = useSignatureExport({
-			canvasRef,
-			watermark: toRef(currentWatermark)
-		});
-		const handleUndo = () => {
-			const result = undo();
-			if (result) emit("undo");
-			return result;
-		};
-		const handleRedo = () => {
-			const result = redo();
-			if (result) emit("redo");
-			return result;
-		};
-		const handleClear = () => {
-			clear();
-			canvasInstance.clearCanvas();
-			emit("clear");
-		};
-		const exportSignature = async (options) => {
-			return exportInstance.exportSignature(options);
-		};
-		const download = async (filename, options) => {
-			return exportInstance.download(filename, options);
-		};
-		const loadImage = async (imageUrl) => {
-			await exportInstance.loadImage(imageUrl);
-			clear();
-		};
-		const getSignatureData = () => strokes.value;
-		const loadSignatureData = (data) => loadData(data);
-		const isSignatureEmpty = () => isEmpty.value;
-		onMounted(() => {
-			canvasInstance.initCanvas();
-			canvasInstance.bindEvents();
-			if (props.backgroundImage) loadImage(props.backgroundImage);
-		});
-		onUnmounted(() => canvasInstance.unbindEvents());
-		__expose({
-			clear: handleClear,
-			undo: handleUndo,
-			redo: handleRedo,
-			export: exportSignature,
-			download,
-			loadImage,
-			getSignatureData,
-			loadSignatureData,
-			isEmpty: isSignatureEmpty
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.showToolbar ? (openBlock(), createElementBlock("div", _hoisted_2, [
-				createElementVNode("div", _hoisted_3, [createVNode(unref(NButtonGroup), null, {
-					default: withCtx(() => [createVNode(unref(NButton), {
-						type: currentMode.value === "pen" ? "primary" : "default",
-						size: "small",
-						onClick: _cache[0] || (_cache[0] = ($event) => currentMode.value = "pen")
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, {
-							name: "mdi:draw",
-							size: 16,
-							color: "currentColor"
-						})]),
-						default: withCtx(() => [_cache[4] || (_cache[4] = createTextVNode(" 画笔 ", -1))]),
-						_: 1,
-						__: [4]
-					}, 8, ["type"]), createVNode(unref(NButton), {
-						type: currentMode.value === "eraser" ? "primary" : "default",
-						size: "small",
-						onClick: _cache[1] || (_cache[1] = ($event) => currentMode.value = "eraser")
-					}, {
-						icon: withCtx(() => [createVNode(C_Icon_default, {
-							name: "mdi:eraser",
-							size: 16,
-							color: "currentColor"
-						})]),
-						default: withCtx(() => [_cache[5] || (_cache[5] = createTextVNode(" 橡皮擦 ", -1))]),
-						_: 1,
-						__: [5]
-					}, 8, ["type"])]),
-					_: 1
-				})]),
-				_cache[11] || (_cache[11] = createElementVNode("div", { class: "toolbar-section divider" }, null, -1)),
-				currentMode.value === "pen" ? (openBlock(), createElementBlock("div", _hoisted_4, [_cache[6] || (_cache[6] = createElementVNode("span", { class: "section-label" }, "颜色", -1)), createVNode(unref(NColorPicker), {
-					value: currentPenConfig.color,
-					"onUpdate:value": _cache[2] || (_cache[2] = ($event) => currentPenConfig.color = $event),
-					"show-alpha": false,
-					size: "small",
-					swatches: unref(PRESET_COLORS)
-				}, null, 8, ["value", "swatches"])])) : createCommentVNode("v-if", true),
-				currentMode.value === "pen" ? (openBlock(), createElementBlock("div", _hoisted_5, [_cache[7] || (_cache[7] = createElementVNode("span", { class: "section-label" }, "粗细", -1)), createVNode(unref(NInputNumber), {
-					value: currentPenConfig.width,
-					"onUpdate:value": _cache[3] || (_cache[3] = ($event) => currentPenConfig.width = $event),
-					min: 1,
-					max: 20,
-					size: "small",
-					style: { "width": "80px" }
-				}, null, 8, ["value"])])) : createCommentVNode("v-if", true),
-				_cache[12] || (_cache[12] = createElementVNode("div", { class: "toolbar-section divider" }, null, -1)),
-				createElementVNode("div", _hoisted_6, [createVNode(unref(NButton), {
-					size: "small",
-					disabled: !unref(canUndo),
-					onClick: handleUndo
-				}, {
-					icon: withCtx(() => [createVNode(C_Icon_default, {
-						name: "mdi:undo",
-						size: 16,
-						color: "currentColor"
-					})]),
-					default: withCtx(() => [_cache[8] || (_cache[8] = createTextVNode(" 撤销 ", -1))]),
-					_: 1,
-					__: [8]
-				}, 8, ["disabled"]), createVNode(unref(NButton), {
-					size: "small",
-					disabled: !unref(canRedo),
-					onClick: handleRedo
-				}, {
-					icon: withCtx(() => [createVNode(C_Icon_default, {
-						name: "mdi:redo",
-						size: 16,
-						color: "currentColor"
-					})]),
-					default: withCtx(() => [_cache[9] || (_cache[9] = createTextVNode(" 重做 ", -1))]),
-					_: 1,
-					__: [9]
-				}, 8, ["disabled"])]),
-				_cache[13] || (_cache[13] = createElementVNode("div", { class: "toolbar-section divider" }, null, -1)),
-				createElementVNode("div", _hoisted_7, [createVNode(unref(NButton), {
-					size: "small",
-					type: "error",
-					disabled: unref(isEmpty),
-					onClick: handleClear
-				}, {
-					icon: withCtx(() => [createVNode(C_Icon_default, {
-						name: "mdi:delete-outline",
-						size: 16,
-						color: "currentColor"
-					})]),
-					default: withCtx(() => [_cache[10] || (_cache[10] = createTextVNode(" 清空 ", -1))]),
-					_: 1,
-					__: [10]
-				}, 8, ["disabled"])])
-			])) : createCommentVNode("v-if", true), createElementVNode("div", {
-				class: normalizeClass(["signature-canvas-wrapper", {
-					disabled: _ctx.disabled,
-					readonly: _ctx.readonly
-				}]),
-				style: normalizeStyle({
-					width: typeof _ctx.width === "number" ? `${_ctx.width}px` : _ctx.width,
-					height: typeof _ctx.height === "number" ? `${_ctx.height}px` : _ctx.height,
-					backgroundColor: _ctx.backgroundColor || "transparent"
-				})
-			}, [createElementVNode("canvas", {
-				ref_key: "canvasRef",
-				ref: canvasRef,
-				class: normalizeClass(["signature-canvas", {
-					disabled: _ctx.disabled,
-					readonly: _ctx.readonly
-				}])
-			}, null, 2), unref(isEmpty) && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_8, " 请在此处签名 ")) : createCommentVNode("v-if", true)], 6)]);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/C_Signature/index.vue
-var C_Signature_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1c733bfe"]]);
-
-//#endregion
-export { useSignatureCanvas as i, useSignatureExport as n, useSignatureHistory as r, C_Signature_default as t };
+import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{NButton as n,NButtonGroup as r,NColorPicker as i,NInputNumber as a}from"naive-ui";import{computed as o,createCommentVNode as s,createElementBlock as c,createElementVNode as l,createTextVNode as u,createVNode as d,defineComponent as f,normalizeClass as p,normalizeStyle as m,onMounted as h,onUnmounted as g,openBlock as _,reactive as v,readonly as y,ref as b,toRef as x,unref as S,withCtx as C}from"vue";function w(e){let{canvasRef:t,penConfig:n,mode:r,disabled:i,onStrokeComplete:a,onDrawStart:o,onDrawing:s}=e,c=b(!1),l=b([]),u=null,d=()=>{let e=t.value;if(!e||(u=e.getContext(`2d`,{willReadFrequently:!0}),!u))return;let n=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*n,e.height=r.height*n,e.style.width=`${r.width}px`,e.style.height=`${r.height}px`,u.scale(n,n),u.lineCap=`round`,u.lineJoin=`round`},f=e=>{let n=t.value;if(!n)return{x:0,y:0};let r=n.getBoundingClientRect(),i,a;if(`touches`in e&&e.touches.length>0)({clientX:i,clientY:a}=e.touches[0]);else if(`clientX`in e)({clientX:i,clientY:a}=e);else return{x:0,y:0};return{x:i-r.left,y:a-r.top,timestamp:Date.now()}},p=(e,t,n,r=!1)=>{u&&(u.save(),r?(u.globalCompositeOperation=`destination-out`,u.lineWidth=20):(u.globalCompositeOperation=`source-over`,u.strokeStyle=n.color,u.lineWidth=n.width,u.globalAlpha=n.opacity),u.beginPath(),u.moveTo(e.x,e.y),u.lineTo(t.x,t.y),u.stroke(),u.restore())},m=e=>{if(i.value)return;e.preventDefault(),c.value=!0,l.value=[];let t=f(e);l.value.push(t),o()},h=e=>{if(!c.value||i.value)return;e.preventDefault();let t=f(e),a=l.value[l.value.length-1];a&&p(a,t,n.value,r.value===`eraser`),l.value.push(t),s(t)},g=e=>{!c.value||i.value||(e.preventDefault(),c.value=!1,l.value.length>0&&(a({points:[...l.value],color:n.value.color,width:n.value.width,opacity:n.value.opacity,mode:r.value}),l.value=[]))};return{isDrawing:y(c),initCanvas:d,bindEvents:()=>{let e=t.value;e&&(e.addEventListener(`mousedown`,m),e.addEventListener(`mousemove`,h),e.addEventListener(`mouseup`,g),e.addEventListener(`mouseleave`,g),e.addEventListener(`touchstart`,m,{passive:!1}),e.addEventListener(`touchmove`,h,{passive:!1}),e.addEventListener(`touchend`,g),e.addEventListener(`touchcancel`,g))},unbindEvents:()=>{let e=t.value;e&&(e.removeEventListener(`mousedown`,m),e.removeEventListener(`mousemove`,h),e.removeEventListener(`mouseup`,g),e.removeEventListener(`mouseleave`,g),e.removeEventListener(`touchstart`,m),e.removeEventListener(`touchmove`,h),e.removeEventListener(`touchend`,g),e.removeEventListener(`touchcancel`,g))},redrawStrokes:e=>{if(!u||!t.value)return;let n=t.value;u.clearRect(0,0,n.width,n.height),e.forEach(e=>{for(let t=1;t<e.points.length;t++)p(e.points[t-1],e.points[t],{color:e.color,width:e.width,opacity:e.opacity},e.mode===`eraser`)})},clearCanvas:()=>{!u||!t.value||u.clearRect(0,0,t.value.width,t.value.height)}}}function T(e={}){let{maxHistory:t=50,onChange:n}=e,r=b([]),i=b([]),a=b(-1),s=o(()=>a.value>0),c=o(()=>a.value<i.value.length-1),l=e=>{r.value.push(e),u()},u=()=>{i.value=i.value.slice(0,a.value+1),i.value.push([...r.value]),a.value++,i.value.length>t&&(i.value.shift(),a.value--),n?.(r.value)},d=()=>s.value?(a.value--,r.value=[...i.value[a.value]],n?.(r.value),!0):!1,f=()=>c.value?(a.value++,r.value=[...i.value[a.value]],n?.(r.value),!0):!1,p=()=>{r.value=[],i.value=[[]],a.value=0,n?.(r.value)},m=e=>{r.value=[...e],i.value=[[...e]],a.value=0,n?.(r.value)},h=o(()=>r.value.length===0);return i.value=[[]],a.value=0,{strokes:y(r),canUndo:y(s),canRedo:y(c),isEmpty:y(h),addStroke:l,undo:d,redo:f,clear:p,loadData:m}}function E(e){let{canvasRef:t,watermark:n}=e,r=(e,t,n,r)=>{let i={"top-left":{x:10,y:n+10},"top-right":{x:e.width-t-10,y:n+10},"bottom-left":{x:10,y:e.height-10},"bottom-right":{x:e.width-t-10,y:e.height-10}};return i[r]||i[`bottom-right`]},i=(e,t)=>{let i=e.getContext(`2d`);if(!i||!n?.value?.show)return;let a={fontSize:n.value.fontSize||12,color:n.value.color||`#999999`,position:n.value.position||`bottom-right`};i.save(),i.font=`${a.fontSize}px Arial`,i.fillStyle=a.color,i.textBaseline=`bottom`;let o=i.measureText(t).width,{x:s,y:c}=r(e,o,a.fontSize,a.position);i.fillText(t,s,c),i.restore()},a=(e,t,n)=>{let r=document.createElement(`canvas`);r.width=e.width,r.height=e.height;let i=r.getContext(`2d`);if(!i)throw Error(`无法创建临时 Canvas`);return t&&(i.fillStyle=n,i.fillRect(0,0,r.width,r.height)),i.drawImage(e,0,0),{canvas:r,ctx:i}},o=(e,t)=>{let{includeBackground:r=!1,backgroundColor:o=`#FFFFFF`,includeWatermark:s=!1}=t,{canvas:c}=a(e,r,o);return s&&n?.value?.show&&n.value.text&&i(c,n.value.text),c},s=(e,t)=>new Promise((n,r)=>{e.toBlob(e=>e?n(e):r(Error(`导出失败`)),`image/png`,t)}),c=async(e={})=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);let{format:r=`png`,quality:i=.92}=e;if(r===`svg`)return`data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><text>SVG export placeholder</text></svg>`;let a=o(n,e);if(r===`blob`)return s(a,i);let c=r===`jpeg`?`image/jpeg`:`image/png`;return a.toDataURL(c,i)};return{exportSignature:c,download:async(e=`signature`,t={})=>{let n=t.format||`png`,r=await c({...t,format:n});if(r instanceof Blob){let t=URL.createObjectURL(r),i=document.createElement(`a`);i.href=t,i.download=`${e}.${n}`,i.click(),URL.revokeObjectURL(t)}else if(typeof r==`string`){let t=document.createElement(`a`);t.href=r,t.download=`${e}.${n}`,t.click()}},loadImage:async e=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);let r=n.getContext(`2d`);if(!r)throw Error(`无法获取 Canvas 上下文`);return new Promise((t,i)=>{let a=new Image;a.crossOrigin=`anonymous`,a.onload=()=>{r.clearRect(0,0,n.width,n.height),r.drawImage(a,0,0,n.width,n.height),t()},a.onerror=()=>i(Error(`图片加载失败: ${e}`)),a.src=e})}}}const ee={color:`#000000`,width:2,opacity:1},te={show:!1,text:``,fontSize:12,color:`#999999`,position:`bottom-right`},D=[`#000000`,`#FF0000`,`#0000FF`,`#00AA00`,`#FF6600`,`#9900FF`],O={class:`c-signature`},k={key:0,class:`signature-toolbar`},A={class:`toolbar-section`},j={key:0,class:`toolbar-section`},M={key:1,class:`toolbar-section`},N={class:`toolbar-section`},ne={class:`toolbar-section`},re={key:0,class:`canvas-placeholder`};var P=t(f({name:`C_Signature`,__name:`index`,props:{width:{default:`100%`},height:{default:300},penConfig:{},eraserConfig:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},backgroundImage:{},backgroundColor:{},watermark:{},showToolbar:{type:Boolean,default:!0},maxHistory:{default:50}},emits:[`start-draw`,`drawing`,`end-draw`,`clear`,`undo`,`redo`,`change`],setup(t,{expose:o,emit:f}){let y=t,P=f,F=b(null),I=b(`pen`),L=v({...ee,...y.penConfig}),R=v({...te,...y.watermark}),{strokes:z,canUndo:B,canRedo:V,isEmpty:H,addStroke:U,undo:W,redo:G,clear:K,loadData:q}=T({maxHistory:y.maxHistory,onChange:e=>{J.redrawStrokes(e),P(`change`,e)}}),J=w({canvasRef:F,penConfig:x(L),mode:I,disabled:x(y,`disabled`),onStrokeComplete:e=>{U(e),P(`end-draw`,e)},onDrawStart:()=>P(`start-draw`),onDrawing:e=>P(`drawing`,e)}),Y=E({canvasRef:F,watermark:x(R)}),X=()=>{let e=W();return e&&P(`undo`),e},Z=()=>{let e=G();return e&&P(`redo`),e},Q=()=>{K(),J.clearCanvas(),P(`clear`)},ie=async e=>Y.exportSignature(e),ae=async(e,t)=>Y.download(e,t),$=async e=>{await Y.loadImage(e),K()};return h(()=>{J.initCanvas(),J.bindEvents(),y.backgroundImage&&$(y.backgroundImage)}),g(()=>J.unbindEvents()),o({clear:Q,undo:X,redo:Z,export:ie,download:ae,loadImage:$,getSignatureData:()=>z.value,loadSignatureData:e=>q(e),isEmpty:()=>H.value}),(t,o)=>(_(),c(`div`,O,[t.showToolbar?(_(),c(`div`,k,[l(`div`,A,[d(S(r),null,{default:C(()=>[d(S(n),{type:I.value===`pen`?`primary`:`default`,size:`small`,onClick:o[0]||=e=>I.value=`pen`},{icon:C(()=>[d(e,{name:`mdi:draw`,size:16,color:`currentColor`})]),default:C(()=>[o[4]||=u(` 画笔 `,-1)]),_:1,__:[4]},8,[`type`]),d(S(n),{type:I.value===`eraser`?`primary`:`default`,size:`small`,onClick:o[1]||=e=>I.value=`eraser`},{icon:C(()=>[d(e,{name:`mdi:eraser`,size:16,color:`currentColor`})]),default:C(()=>[o[5]||=u(` 橡皮擦 `,-1)]),_:1,__:[5]},8,[`type`])]),_:1})]),o[11]||=l(`div`,{class:`toolbar-section divider`},null,-1),I.value===`pen`?(_(),c(`div`,j,[o[6]||=l(`span`,{class:`section-label`},`颜色`,-1),d(S(i),{value:L.color,"onUpdate:value":o[2]||=e=>L.color=e,"show-alpha":!1,size:`small`,swatches:S(D)},null,8,[`value`,`swatches`])])):s(`v-if`,!0),I.value===`pen`?(_(),c(`div`,M,[o[7]||=l(`span`,{class:`section-label`},`粗细`,-1),d(S(a),{value:L.width,"onUpdate:value":o[3]||=e=>L.width=e,min:1,max:20,size:`small`,style:{width:`80px`}},null,8,[`value`])])):s(`v-if`,!0),o[12]||=l(`div`,{class:`toolbar-section divider`},null,-1),l(`div`,N,[d(S(n),{size:`small`,disabled:!S(B),onClick:X},{icon:C(()=>[d(e,{name:`mdi:undo`,size:16,color:`currentColor`})]),default:C(()=>[o[8]||=u(` 撤销 `,-1)]),_:1,__:[8]},8,[`disabled`]),d(S(n),{size:`small`,disabled:!S(V),onClick:Z},{icon:C(()=>[d(e,{name:`mdi:redo`,size:16,color:`currentColor`})]),default:C(()=>[o[9]||=u(` 重做 `,-1)]),_:1,__:[9]},8,[`disabled`])]),o[13]||=l(`div`,{class:`toolbar-section divider`},null,-1),l(`div`,ne,[d(S(n),{size:`small`,type:`error`,disabled:S(H),onClick:Q},{icon:C(()=>[d(e,{name:`mdi:delete-outline`,size:16,color:`currentColor`})]),default:C(()=>[o[10]||=u(` 清空 `,-1)]),_:1,__:[10]},8,[`disabled`])])])):s(`v-if`,!0),l(`div`,{class:p([`signature-canvas-wrapper`,{disabled:t.disabled,readonly:t.readonly}]),style:m({width:typeof t.width==`number`?`${t.width}px`:t.width,height:typeof t.height==`number`?`${t.height}px`:t.height,backgroundColor:t.backgroundColor||`transparent`})},[l(`canvas`,{ref_key:`canvasRef`,ref:F,class:p([`signature-canvas`,{disabled:t.disabled,readonly:t.readonly}])},null,2),S(H)&&!t.disabled&&!t.readonly?(_(),c(`div`,re,` 请在此处签名 `)):s(`v-if`,!0)],6)]))}}),[[`__scopeId`,`data-v-1c733bfe`]]);export{w as i,E as n,T as r,P as t};
 //# sourceMappingURL=C_Signature2.js.map