@veltra/desktop 1.7.7 → 1.7.9

package/dist/components/image-cropper/style2.css

@@ -0,0 +1,205 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：`UITheme.render()` 按主题系列写入 html[data-theme] */
+.u-image-cropper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.u-image-cropper__toolbar {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--u-border-color);
+  background-color: var(--u-bg-color-top);
+}
+.u-image-cropper__tool-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--u-border-color);
+  border-radius: var(--u-radius-small);
+  background-color: var(--u-bg-color-middle);
+}
+.u-image-cropper__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: calc(var(--u-radius-small) - 2px);
+  background: transparent;
+  color: var(--u-text-color-second);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--u-transition-fast) var(--u-transition-ease), color var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-image-cropper__tool:hover {
+  color: var(--u-color-primary);
+  background: var(--u-color-primary-a-10);
+}
+.u-image-cropper__tool.is-active {
+  color: var(--u-color-primary);
+  background: var(--u-color-primary-a-16);
+}
+.u-image-cropper__tool:focus-visible {
+  box-shadow: var(--u-focus-ring);
+}
+.u-image-cropper__tool--icon {
+  width: 28px;
+  padding: 0;
+}
+.u-image-cropper__flip-icon {
+  transform: rotate(90deg);
+}
+.u-image-cropper__canvas {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--u-bg-color-bottom);
+}
+.u-image-cropper__stage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 50% 50%;
+}
+.u-image-cropper__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+.u-image-cropper__mask {
+  position: absolute;
+  background-color: var(--u-bg-color-black-a-70);
+}
+.u-image-cropper__selection {
+  position: absolute;
+  box-sizing: border-box;
+  border-style: solid;
+  border-color: var(--u-text-color-white);
+  border-width: calc(1px * var(--u-image-cropper-inv-scale, 1));
+  cursor: move;
+}
+.u-image-cropper__grid-line {
+  position: absolute;
+  pointer-events: none;
+  background-color: var(--u-text-color-white-a-50);
+}
+.u-image-cropper__grid-line:nth-child(-n+2) {
+  top: 0;
+  bottom: 0;
+  width: calc(1px * var(--u-image-cropper-inv-scale, 1));
+}
+.u-image-cropper__grid-line:nth-child(n+3) {
+  left: 0;
+  right: 0;
+  height: calc(1px * var(--u-image-cropper-inv-scale, 1));
+}
+.u-image-cropper__grid-line:nth-child(1) {
+  left: 33.3333%;
+}
+.u-image-cropper__grid-line:nth-child(2) {
+  left: 66.6667%;
+}
+.u-image-cropper__grid-line:nth-child(3) {
+  top: 33.3333%;
+}
+.u-image-cropper__grid-line:nth-child(4) {
+  top: 66.6667%;
+}
+.u-image-cropper__handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: var(--u-text-color-white);
+  box-shadow: var(--u-shadow-sm);
+  transform: translate(-50%, -50%) scale(var(--u-image-cropper-inv-scale, 1));
+}
+.u-image-cropper__handle[data-handle=nw] {
+  left: 0;
+  top: 0;
+  cursor: nwse-resize;
+}
+.u-image-cropper__handle[data-handle=n] {
+  left: 50%;
+  top: 0;
+  cursor: ns-resize;
+}
+.u-image-cropper__handle[data-handle=ne] {
+  left: 100%;
+  top: 0;
+  cursor: nesw-resize;
+}
+.u-image-cropper__handle[data-handle=e] {
+  left: 100%;
+  top: 50%;
+  cursor: ew-resize;
+}
+.u-image-cropper__handle[data-handle=se] {
+  left: 100%;
+  top: 100%;
+  cursor: nwse-resize;
+}
+.u-image-cropper__handle[data-handle=s] {
+  left: 50%;
+  top: 100%;
+  cursor: ns-resize;
+}
+.u-image-cropper__handle[data-handle=sw] {
+  left: 0;
+  top: 100%;
+  cursor: nesw-resize;
+}
+.u-image-cropper__handle[data-handle=w] {
+  left: 0;
+  top: 50%;
+  cursor: ew-resize;
+}
+.u-image-cropper__preview {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 30%;
+  max-height: 30%;
+  border: 1px solid var(--u-border-color);
+  border-radius: var(--u-radius-small);
+  background-color: var(--u-bg-color-top);
+  box-shadow: var(--u-shadow);
+  overflow: hidden;
+  pointer-events: none;
+}
+.u-image-cropper__preview-canvas {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}

package/dist/components/image-cropper/use-image-loader.js

@@ -0,0 +1,59 @@
+import { onBeforeUnmount, shallowRef, watch } from "vue";
+//#region src/components/image-cropper/use-image-loader.ts
+/** 加载 File / Blob / URL 图片源，File / Blob 走 objectURL 并在替换与卸载时释放 */
+function useImageLoader(options) {
+	const { src } = options;
+	const imageUrl = shallowRef("");
+	const loaded = shallowRef(false);
+	const error = shallowRef(false);
+	const naturalWidth = shallowRef(0);
+	const naturalHeight = shallowRef(0);
+	const imageEl = shallowRef();
+	let objectUrl;
+	function revokeObjectUrl() {
+		if (!objectUrl) return;
+		URL.revokeObjectURL(objectUrl);
+		objectUrl = void 0;
+	}
+	function load(source) {
+		revokeObjectUrl();
+		imageUrl.value = "";
+		loaded.value = false;
+		error.value = false;
+		naturalWidth.value = 0;
+		naturalHeight.value = 0;
+		imageEl.value = void 0;
+		if (!source) return;
+		const url = typeof source === "string" ? source : objectUrl = URL.createObjectURL(source);
+		const el = new Image();
+		if (typeof source === "string") el.crossOrigin = "anonymous";
+		el.onload = () => {
+			naturalWidth.value = el.naturalWidth;
+			naturalHeight.value = el.naturalHeight;
+			imageEl.value = el;
+			loaded.value = true;
+		};
+		el.onerror = () => {
+			error.value = true;
+			imageUrl.value = "";
+		};
+		el.src = url;
+		imageUrl.value = url;
+	}
+	watch(src, load, { immediate: true });
+	onBeforeUnmount(() => {
+		revokeObjectUrl();
+	});
+	return {
+		imageUrl,
+		loaded,
+		error,
+		naturalWidth,
+		naturalHeight,
+		imageEl
+	};
+}
+//#endregion
+export { useImageLoader };
+
+//# sourceMappingURL=use-image-loader.js.map

package/dist/components/image-cropper/use-image-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-loader.js","names":[],"sources":["../../../src/components/image-cropper/use-image-loader.ts"],"sourcesContent":["import { onBeforeUnmount, shallowRef, watch, type ShallowRef } from 'vue'\n\ninterface UseImageLoaderOptions {\n  /** 图片源（File / Blob / URL） */\n  src: () => File | Blob | string | undefined\n}\n\ninterface UseImageLoaderReturn {\n  /** 用于渲染的图片地址 */\n  imageUrl: ShallowRef<string>\n  /** 是否加载完成 */\n  loaded: ShallowRef<boolean>\n  /** 是否加载失败 */\n  error: ShallowRef<boolean>\n  /** 图片原始宽度 */\n  naturalWidth: ShallowRef<number>\n  /** 图片原始高度 */\n  naturalHeight: ShallowRef<number>\n  /** 已加载完成的图片元素，供画布绘制（预览 / getResult 输出） */\n  imageEl: ShallowRef<HTMLImageElement | undefined>\n}\n\n/** 加载 File / Blob / URL 图片源，File / Blob 走 objectURL 并在替换与卸载时释放 */\nexport function useImageLoader(options: UseImageLoaderOptions): UseImageLoaderReturn {\n  const { src } = options\n\n  const imageUrl = shallowRef('')\n  const loaded = shallowRef(false)\n  const error = shallowRef(false)\n  const naturalWidth = shallowRef(0)\n  const naturalHeight = shallowRef(0)\n  const imageEl = shallowRef<HTMLImageElement>()\n\n  let objectUrl: string | undefined\n\n  function revokeObjectUrl() {\n    if (!objectUrl) return\n    URL.revokeObjectURL(objectUrl)\n    objectUrl = undefined\n  }\n\n  function load(source: File | Blob | string | undefined) {\n    revokeObjectUrl()\n    imageUrl.value = ''\n    loaded.value = false\n    error.value = false\n    naturalWidth.value = 0\n    naturalHeight.value = 0\n    imageEl.value = undefined\n\n    if (!source) return\n\n    const url = typeof source === 'string' ? source : (objectUrl = URL.createObjectURL(source))\n    const el = new Image()\n    // URL 源尽量走跨域匿名加载，保证后续画布导出不被污染\n    if (typeof source === 'string') el.crossOrigin = 'anonymous'\n\n    el.onload = () => {\n      naturalWidth.value = el.naturalWidth\n      naturalHeight.value = el.naturalHeight\n      imageEl.value = el\n      loaded.value = true\n    }\n    el.onerror = () => {\n      error.value = true\n      imageUrl.value = ''\n    }\n    el.src = url\n    imageUrl.value = url\n  }\n\n  watch(src, load, { immediate: true })\n\n  onBeforeUnmount(() => {\n    revokeObjectUrl()\n  })\n\n  return { imageUrl, loaded, error, naturalWidth, naturalHeight, imageEl }\n}\n"],"mappings":";;;AAuBA,SAAgB,eAAe,SAAsD;CACnF,MAAM,EAAE,QAAQ;CAEhB,MAAM,WAAW,WAAW,EAAE;CAC9B,MAAM,SAAS,WAAW,KAAK;CAC/B,MAAM,QAAQ,WAAW,KAAK;CAC9B,MAAM,eAAe,WAAW,CAAC;CACjC,MAAM,gBAAgB,WAAW,CAAC;CAClC,MAAM,UAAU,WAA6B;CAE7C,IAAI;CAEJ,SAAS,kBAAkB;EACzB,IAAI,CAAC,WAAW;EAChB,IAAI,gBAAgB,SAAS;EAC7B,YAAY,KAAA;CACd;CAEA,SAAS,KAAK,QAA0C;EACtD,gBAAgB;EAChB,SAAS,QAAQ;EACjB,OAAO,QAAQ;EACf,MAAM,QAAQ;EACd,aAAa,QAAQ;EACrB,cAAc,QAAQ;EACtB,QAAQ,QAAQ,KAAA;EAEhB,IAAI,CAAC,QAAQ;EAEb,MAAM,MAAM,OAAO,WAAW,WAAW,SAAU,YAAY,IAAI,gBAAgB,MAAM;EACzF,MAAM,KAAK,IAAI,MAAM;EAErB,IAAI,OAAO,WAAW,UAAU,GAAG,cAAc;EAEjD,GAAG,eAAe;GAChB,aAAa,QAAQ,GAAG;GACxB,cAAc,QAAQ,GAAG;GACzB,QAAQ,QAAQ;GAChB,OAAO,QAAQ;EACjB;EACA,GAAG,gBAAgB;GACjB,MAAM,QAAQ;GACd,SAAS,QAAQ;EACnB;EACA,GAAG,MAAM;EACT,SAAS,QAAQ;CACnB;CAEA,MAAM,KAAK,MAAM,EAAE,WAAW,KAAK,CAAC;CAEpC,sBAAsB;EACpB,gBAAgB;CAClB,CAAC;CAED,OAAO;EAAE;EAAU;EAAQ;EAAO;EAAc;EAAe;CAAQ;AACzE"}

package/dist/components/image-cropper/use-preview.js

@@ -0,0 +1,44 @@
+import { drawCropToCanvas } from "./draw-crop.js";
+import { watch } from "vue";
+//#region src/components/image-cropper/use-preview.ts
+/**
+* 实时预览：选区或旋转 / 翻转变换变化时把当前裁剪结果重绘到预览画布。
+* 画布按显示尺寸（等比缩放到画布区 30% 以内）绘制，不能靠 CSS max-width/max-height 约束
+* ——父级为 shrink-to-fit 宽度时百分比 max 约束失效，画布会按原尺寸溢出被裁剪
+*/
+function usePreview(options) {
+	const { canvas, image, selection, transform, canvasSize } = options;
+	watch([
+		canvas,
+		image,
+		selection,
+		() => transform.rotation,
+		() => transform.flipX,
+		() => transform.flipY,
+		() => {
+			const size = canvasSize();
+			return [size.width, size.height];
+		}
+	], () => {
+		const el = canvas.value;
+		const img = image.value;
+		const sel = selection.value;
+		if (!el || !img || !sel) return;
+		const swapped = transform.rotation % 180 !== 0;
+		const baseW = swapped ? sel.height : sel.width;
+		const baseH = swapped ? sel.width : sel.height;
+		const size = canvasSize();
+		const scale = Math.min(size.width * .3 / baseW, size.height * .3 / baseH, 1);
+		drawCropToCanvas(img, sel, transform, el, {
+			width: baseW * scale,
+			height: baseH * scale
+		});
+	}, {
+		flush: "post",
+		immediate: true
+	});
+}
+//#endregion
+export { usePreview };
+
+//# sourceMappingURL=use-preview.js.map

package/dist/components/image-cropper/use-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-preview.js","names":[],"sources":["../../../src/components/image-cropper/use-preview.ts"],"sourcesContent":["import { watch, type ShallowRef } from 'vue'\n\nimport { drawCropToCanvas, type CropTransform } from './draw-crop'\nimport type { SelectionRect } from './use-selection'\n\ninterface UsePreviewOptions {\n  /** 预览画布元素 */\n  canvas: ShallowRef<HTMLCanvasElement | undefined>\n  /** 舞台内的图片元素（已加载完成） */\n  image: ShallowRef<HTMLImageElement | undefined>\n  /** 当前选区（图片像素坐标） */\n  selection: ShallowRef<SelectionRect | null>\n  /** 影响裁剪输出的变换（缩放 / 平移不影响输出，仅旋转 / 翻转触发重绘） */\n  transform: CropTransform\n  /** 裁剪画布区尺寸，预览显示尺寸以它的 30% 为上限 */\n  canvasSize: () => { width: number; height: number }\n}\n\n/**\n * 实时预览：选区或旋转 / 翻转变换变化时把当前裁剪结果重绘到预览画布。\n * 画布按显示尺寸（等比缩放到画布区 30% 以内）绘制，不能靠 CSS max-width/max-height 约束\n * ——父级为 shrink-to-fit 宽度时百分比 max 约束失效，画布会按原尺寸溢出被裁剪\n */\nexport function usePreview(options: UsePreviewOptions): void {\n  const { canvas, image, selection, transform, canvasSize } = options\n\n  watch(\n    [\n      canvas,\n      image,\n      selection,\n      () => transform.rotation,\n      () => transform.flipX,\n      () => transform.flipY,\n      () => {\n        const size = canvasSize()\n        return [size.width, size.height]\n      }\n    ],\n    () => {\n      const el = canvas.value\n      const img = image.value\n      const sel = selection.value\n      if (!el || !img || !sel) return\n\n      // 与 drawCropToCanvas 相同的宽高交换规则，先求旋转后的基准尺寸\n      const swapped = transform.rotation % 180 !== 0\n      const baseW = swapped ? sel.height : sel.width\n      const baseH = swapped ? sel.width : sel.height\n\n      const size = canvasSize()\n      const scale = Math.min((size.width * 0.3) / baseW, (size.height * 0.3) / baseH, 1)\n      drawCropToCanvas(img, sel, transform, el, { width: baseW * scale, height: baseH * scale })\n    },\n    // post：等待 v-if 切换后画布元素完成挂载\n    { flush: 'post', immediate: true }\n  )\n}\n"],"mappings":";;;;;;;;AAuBA,SAAgB,WAAW,SAAkC;CAC3D,MAAM,EAAE,QAAQ,OAAO,WAAW,WAAW,eAAe;CAE5D,MACE;EACE;EACA;EACA;QACM,UAAU;QACV,UAAU;QACV,UAAU;QACV;GACJ,MAAM,OAAO,WAAW;GACxB,OAAO,CAAC,KAAK,OAAO,KAAK,MAAM;EACjC;CACF,SACM;EACJ,MAAM,KAAK,OAAO;EAClB,MAAM,MAAM,MAAM;EAClB,MAAM,MAAM,UAAU;EACtB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK;EAGzB,MAAM,UAAU,UAAU,WAAW,QAAQ;EAC7C,MAAM,QAAQ,UAAU,IAAI,SAAS,IAAI;EACzC,MAAM,QAAQ,UAAU,IAAI,QAAQ,IAAI;EAExC,MAAM,OAAO,WAAW;EACxB,MAAM,QAAQ,KAAK,IAAK,KAAK,QAAQ,KAAO,OAAQ,KAAK,SAAS,KAAO,OAAO,CAAC;EACjF,iBAAiB,KAAK,KAAK,WAAW,IAAI;GAAE,OAAO,QAAQ;GAAO,QAAQ,QAAQ;EAAM,CAAC;CAC3F,GAEA;EAAE,OAAO;EAAQ,WAAW;CAAK,CACnC;AACF"}

package/dist/components/image-cropper/use-selection.js

@@ -0,0 +1,183 @@
+import { onBeforeUnmount, shallowRef, watch } from "vue";
+//#region src/components/image-cropper/use-selection.ts
+/** 全部手柄方位 */
+const SELECTION_HANDLES = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+];
+/** 选区最小边长（图片像素） */
+const MIN_SIZE = 20;
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), Math.max(min, max));
+}
+/** 裁剪选区交互：整体拖动 + 8 个手柄调整大小，支持宽高比约束与图片边界钳制 */
+function useSelection(options) {
+	const { target, imageWidth, imageHeight, toImageDelta, aspectRatio } = options;
+	const selection = shallowRef(null);
+	/** 有效宽高比，非法值视为自由比例 */
+	function validRatio() {
+		const ratio = aspectRatio();
+		return ratio && ratio > 0 ? ratio : void 0;
+	}
+	/** 尺寸与位置钳制在图片像素范围内 */
+	function clampRect(rect) {
+		const W = imageWidth();
+		const H = imageHeight();
+		const width = clamp(rect.width, Math.min(MIN_SIZE, W), W);
+		const height = clamp(rect.height, Math.min(MIN_SIZE, H), H);
+		return {
+			width,
+			height,
+			x: clamp(rect.x, 0, W - width),
+			y: clamp(rect.y, 0, H - height)
+		};
+	}
+	/** 以选区中心为锚按比例重算选区 */
+	function applyRatio(sel, ratio) {
+		const W = imageWidth();
+		const H = imageHeight();
+		const cx = sel.x + sel.width / 2;
+		const cy = sel.y + sel.height / 2;
+		let width = sel.width;
+		let height = width / ratio;
+		if (height > H) {
+			height = H;
+			width = height * ratio;
+		}
+		if (width > W) {
+			width = W;
+			height = width / ratio;
+		}
+		return clampRect({
+			x: cx - width / 2,
+			y: cy - height / 2,
+			width,
+			height
+		});
+	}
+	function initSelection() {
+		const W = imageWidth();
+		const H = imageHeight();
+		if (!W || !H) {
+			selection.value = null;
+			return;
+		}
+		let width = W * .8;
+		let height = H * .8;
+		const ratio = validRatio();
+		if (ratio) {
+			if (width / height > ratio) width = height * ratio;
+			else height = width / ratio;
+		}
+		selection.value = {
+			x: (W - width) / 2,
+			y: (H - height) / 2,
+			width,
+			height
+		};
+	}
+	function clearSelection() {
+		selection.value = null;
+	}
+	watch(() => aspectRatio(), () => {
+		const ratio = validRatio();
+		if (!ratio || !selection.value) return;
+		selection.value = applyRatio(selection.value, ratio);
+	});
+	let session = null;
+	function handleMousedown(e) {
+		const sel = selection.value;
+		if (e.button !== 0 || !sel) return;
+		e.stopPropagation();
+		e.preventDefault();
+		session = {
+			mode: e.target?.closest("[data-handle]")?.getAttribute("data-handle") ?? "move",
+			startX: e.clientX,
+			startY: e.clientY,
+			origin: { ...sel }
+		};
+		document.addEventListener("mousemove", handleMousemove, { passive: true });
+		document.addEventListener("mouseup", handleMouseup);
+	}
+	function handleMousemove(e) {
+		if (!session) return;
+		const { x: dx, y: dy } = toImageDelta(e.clientX - session.startX, e.clientY - session.startY);
+		selection.value = session.mode === "move" ? moveSelection(session.origin, dx, dy) : resizeSelection(session.origin, session.mode, dx, dy);
+	}
+	function handleMouseup() {
+		session = null;
+		cleanup();
+	}
+	function cleanup() {
+		document.removeEventListener("mousemove", handleMousemove);
+		document.removeEventListener("mouseup", handleMouseup);
+	}
+	function moveSelection(origin, dx, dy) {
+		return clampRect({
+			...origin,
+			x: origin.x + dx,
+			y: origin.y + dy
+		});
+	}
+	function resizeSelection(origin, handle, dx, dy) {
+		const W = imageWidth();
+		const H = imageHeight();
+		const right = origin.x + origin.width;
+		const bottom = origin.y + origin.height;
+		const cx = origin.x + origin.width / 2;
+		const cy = origin.y + origin.height / 2;
+		const ratio = validRatio();
+		const west = handle.includes("w");
+		const east = handle.includes("e");
+		const north = handle.includes("n");
+		const south = handle.includes("s");
+		let width = origin.width + (east ? dx : west ? -dx : 0);
+		let height = origin.height + (south ? dy : north ? -dy : 0);
+		const maxWidth = east ? W - origin.x : west ? right : 2 * Math.min(cx, W - cx);
+		const maxHeight = south ? H - origin.y : north ? bottom : 2 * Math.min(cy, H - cy);
+		if (ratio) {
+			if ((east || west) && !north && !south) height = width / ratio;
+			else if ((north || south) && !east && !west) width = height * ratio;
+			else {
+				const widthFromHeight = height * ratio;
+				width = Math.abs(width - origin.width) >= Math.abs(widthFromHeight - origin.width) ? width : widthFromHeight;
+				height = width / ratio;
+			}
+			const maxCoupledWidth = Math.min(maxWidth, maxHeight * ratio);
+			width = clamp(width, Math.min(MIN_SIZE, maxCoupledWidth), maxCoupledWidth);
+			height = width / ratio;
+		} else {
+			width = clamp(width, Math.min(MIN_SIZE, maxWidth), maxWidth);
+			height = clamp(height, Math.min(MIN_SIZE, maxHeight), maxHeight);
+		}
+		return clampRect({
+			x: west ? right - width : east ? origin.x : cx - width / 2,
+			y: north ? bottom - height : south ? origin.y : cy - height / 2,
+			width,
+			height
+		});
+	}
+	watch(target, (el, oldEl) => {
+		oldEl?.removeEventListener("mousedown", handleMousedown);
+		el?.addEventListener("mousedown", handleMousedown);
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		target.value?.removeEventListener("mousedown", handleMousedown);
+		cleanup();
+	});
+	return {
+		selection,
+		initSelection,
+		clearSelection
+	};
+}
+//#endregion
+export { SELECTION_HANDLES, useSelection };
+
+//# sourceMappingURL=use-selection.js.map

package/dist/components/image-cropper/use-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection.js","names":[],"sources":["../../../src/components/image-cropper/use-selection.ts"],"sourcesContent":["import { onBeforeUnmount, shallowRef, watch, type Ref, type ShallowRef } from 'vue'\n\n/** 裁剪选区（图片像素坐标） */\nexport interface SelectionRect {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\n/** 手柄方位：四角 + 四边 */\nexport type SelectionHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'\n\n/** 全部手柄方位 */\nexport const SELECTION_HANDLES: SelectionHandle[] = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w']\n\n/** 选区最小边长（图片像素） */\nconst MIN_SIZE = 20\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), Math.max(min, max))\n}\n\ninterface UseSelectionOptions {\n  /** 选区元素（mousedown 交互目标，手柄通过 data-handle 标识） */\n  target: ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>\n  /** 图片原始宽（图片像素） */\n  imageWidth: () => number\n  /** 图片原始高（图片像素） */\n  imageHeight: () => number\n  /** 屏幕位移换算为图片像素位移（由 use-transform 提供，考虑缩放 / 旋转 / 翻转） */\n  toImageDelta: (dx: number, dy: number) => { x: number; y: number }\n  /** 宽高比约束（宽 / 高），不传或 <= 0 为自由比例 */\n  aspectRatio: () => number | undefined\n}\n\ninterface UseSelectionReturn {\n  /** 当前选区（图片像素坐标） */\n  selection: ShallowRef<SelectionRect | null>\n  /** 以图片居中约 80% 区域初始化选区（受宽高比约束） */\n  initSelection: () => void\n  /** 清空选区 */\n  clearSelection: () => void\n}\n\n/** 裁剪选区交互：整体拖动 + 8 个手柄调整大小，支持宽高比约束与图片边界钳制 */\nexport function useSelection(options: UseSelectionOptions): UseSelectionReturn {\n  const { target, imageWidth, imageHeight, toImageDelta, aspectRatio } = options\n\n  const selection = shallowRef<SelectionRect | null>(null)\n\n  /** 有效宽高比，非法值视为自由比例 */\n  function validRatio() {\n    const ratio = aspectRatio()\n    return ratio && ratio > 0 ? ratio : undefined\n  }\n\n  /** 尺寸与位置钳制在图片像素范围内 */\n  function clampRect(rect: SelectionRect): SelectionRect {\n    const W = imageWidth()\n    const H = imageHeight()\n    const width = clamp(rect.width, Math.min(MIN_SIZE, W), W)\n    const height = clamp(rect.height, Math.min(MIN_SIZE, H), H)\n    return { width, height, x: clamp(rect.x, 0, W - width), y: clamp(rect.y, 0, H - height) }\n  }\n\n  /** 以选区中心为锚按比例重算选区 */\n  function applyRatio(sel: SelectionRect, ratio: number): SelectionRect {\n    const W = imageWidth()\n    const H = imageHeight()\n    const cx = sel.x + sel.width / 2\n    const cy = sel.y + sel.height / 2\n\n    let width = sel.width\n    let height = width / ratio\n    if (height > H) {\n      height = H\n      width = height * ratio\n    }\n    if (width > W) {\n      width = W\n      height = width / ratio\n    }\n\n    return clampRect({ x: cx - width / 2, y: cy - height / 2, width, height })\n  }\n\n  function initSelection() {\n    const W = imageWidth()\n    const H = imageHeight()\n    if (!W || !H) {\n      selection.value = null\n      return\n    }\n\n    let width = W * 0.8\n    let height = H * 0.8\n    const ratio = validRatio()\n    // 在居中 80% 框内内接指定比例\n    if (ratio) {\n      if (width / height > ratio) width = height * ratio\n      else height = width / ratio\n    }\n\n    selection.value = { x: (W - width) / 2, y: (H - height) / 2, width, height }\n  }\n\n  function clearSelection() {\n    selection.value = null\n  }\n\n  // 宽高比变化时以选区中心为锚按比例重算\n  watch(\n    () => aspectRatio(),\n    () => {\n      const ratio = validRatio()\n      if (!ratio || !selection.value) return\n      selection.value = applyRatio(selection.value, ratio)\n    }\n  )\n\n  // ---------- 拖动交互（参照 useDrag 模式：mousedown 起，document 级 move/up 收尾） ----------\n\n  interface DragSession {\n    /** 'move' 为整体拖动，其余为手柄方位 */\n    mode: 'move' | SelectionHandle\n    startX: number\n    startY: number\n    origin: SelectionRect\n  }\n\n  let session: DragSession | null = null\n\n  function handleMousedown(e: MouseEvent) {\n    const sel = selection.value\n    if (e.button !== 0 || !sel) return\n    // 阻止冒泡与默认行为：避免触发画布层交互（P3 平移）与原生选中\n    e.stopPropagation()\n    e.preventDefault()\n\n    const handle = (e.target as HTMLElement | null)\n      ?.closest('[data-handle]')\n      ?.getAttribute('data-handle')\n\n    session = {\n      mode: (handle as SelectionHandle | null) ?? 'move',\n      startX: e.clientX,\n      startY: e.clientY,\n      origin: { ...sel }\n    }\n\n    document.addEventListener('mousemove', handleMousemove, { passive: true })\n    document.addEventListener('mouseup', handleMouseup)\n  }\n\n  function handleMousemove(e: MouseEvent) {\n    if (!session) return\n\n    // 屏幕位移换算为图片像素位移（含缩放 / 旋转 / 翻转）\n    const { x: dx, y: dy } = toImageDelta(e.clientX - session.startX, e.clientY - session.startY)\n    selection.value =\n      session.mode === 'move'\n        ? moveSelection(session.origin, dx, dy)\n        : resizeSelection(session.origin, session.mode, dx, dy)\n  }\n\n  function handleMouseup() {\n    session = null\n    cleanup()\n  }\n\n  function cleanup() {\n    document.removeEventListener('mousemove', handleMousemove)\n    document.removeEventListener('mouseup', handleMouseup)\n  }\n\n  function moveSelection(origin: SelectionRect, dx: number, dy: number): SelectionRect {\n    return clampRect({ ...origin, x: origin.x + dx, y: origin.y + dy })\n  }\n\n  function resizeSelection(\n    origin: SelectionRect,\n    handle: SelectionHandle,\n    dx: number,\n    dy: number\n  ): SelectionRect {\n    const W = imageWidth()\n    const H = imageHeight()\n    const right = origin.x + origin.width\n    const bottom = origin.y + origin.height\n    const cx = origin.x + origin.width / 2\n    const cy = origin.y + origin.height / 2\n    const ratio = validRatio()\n\n    const west = handle.includes('w')\n    const east = handle.includes('e')\n    const north = handle.includes('n')\n    const south = handle.includes('s')\n\n    // 候选尺寸：被拖动的边随指针位移，对侧保持不动\n    let width = origin.width + (east ? dx : west ? -dx : 0)\n    let height = origin.height + (south ? dy : north ? -dy : 0)\n\n    // 各轴最大尺寸：拖动边受图片边界限制，未拖动的轴绕中心扩展\n    const maxWidth = east ? W - origin.x : west ? right : 2 * Math.min(cx, W - cx)\n    const maxHeight = south ? H - origin.y : north ? bottom : 2 * Math.min(cy, H - cy)\n\n    if (ratio) {\n      if ((east || west) && !north && !south) {\n        // 横向边中手柄：宽度驱动，高度按比例绕中心联动\n        height = width / ratio\n      } else if ((north || south) && !east && !west) {\n        // 纵向边中手柄：高度驱动，宽度按比例绕中心联动\n        width = height * ratio\n      } else {\n        // 角手柄：取位移更大的一侧驱动，单方向拖动也能生效\n        const widthFromHeight = height * ratio\n        width =\n          Math.abs(width - origin.width) >= Math.abs(widthFromHeight - origin.width)\n            ? width\n            : widthFromHeight\n        height = width / ratio\n      }\n      const maxCoupledWidth = Math.min(maxWidth, maxHeight * ratio)\n      width = clamp(width, Math.min(MIN_SIZE, maxCoupledWidth), maxCoupledWidth)\n      height = width / ratio\n    } else {\n      width = clamp(width, Math.min(MIN_SIZE, maxWidth), maxWidth)\n      height = clamp(height, Math.min(MIN_SIZE, maxHeight), maxHeight)\n    }\n\n    return clampRect({\n      x: west ? right - width : east ? origin.x : cx - width / 2,\n      y: north ? bottom - height : south ? origin.y : cy - height / 2,\n      width,\n      height\n    })\n  }\n\n  watch(\n    target,\n    (el, oldEl) => {\n      oldEl?.removeEventListener('mousedown', handleMousedown)\n      el?.addEventListener('mousedown', handleMousedown)\n    },\n    { immediate: true }\n  )\n\n  onBeforeUnmount(() => {\n    target.value?.removeEventListener('mousedown', handleMousedown)\n    cleanup()\n  })\n\n  return { selection, initSelection, clearSelection }\n}\n"],"mappings":"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"}