@veltra/desktop 1.7.8 → 1.7.10

package/src/components/image-cropper/style.scss

@@ -0,0 +1,232 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+
+$root-name: image-cropper;
+@include m.b($root-name) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  @include m.e(toolbar) {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-bottom: 1px solid fn.use-var(border, color);
+    background-color: fn.use-var(bg-color, top);
+  }
+
+  @include m.e(tool-group) {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 2px;
+    border: 1px solid fn.use-var(border, color);
+    border-radius: fn.use-var(radius, small);
+    background-color: fn.use-var(bg-color, middle);
+  }
+
+  @include m.e(tool) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    padding: 0 10px;
+    border: 1px solid transparent;
+    border-radius: calc(#{fn.use-var(radius, small)} - 2px);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    font-size: 12px;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background fn.use-var(transition, fast) fn.use-var(transition, ease),
+      color fn.use-var(transition, fast) fn.use-var(transition, ease);
+
+    &:hover {
+      color: fn.use-var(color, primary);
+      background: fn.color-a(color, 10, primary);
+    }
+
+    &.is-active {
+      color: fn.use-var(color, primary);
+      background: fn.color-a(color, 16, primary);
+    }
+
+    &:focus-visible {
+      box-shadow: fn.use-var(focus-ring);
+    }
+  }
+
+  @include m.em(tool, icon) {
+    width: 28px;
+    padding: 0;
+  }
+
+  // 水平翻转图标：上下箭头旋转为左右指向
+  @include m.e(flip-icon) {
+    transform: rotate(90deg);
+  }
+
+  @include m.e(canvas) {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    background-color: fn.use-var(bg-color, bottom);
+  }
+
+  // 舞台：承载图片与选区层，尺寸为图片原始像素，随 transform 变换
+  @include m.e(stage) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    // 变换原点为中心：旋转 / 翻转绕图片中心进行，不产生位置补偿
+    transform-origin: 50% 50%;
+  }
+
+  @include m.e(image) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    user-select: none;
+  }
+
+  @include m.e(mask) {
+    position: absolute;
+    background-color: fn.color-a(bg-color, 70, black);
+  }
+
+  @include m.e(selection) {
+    position: absolute;
+    box-sizing: border-box;
+    border-style: solid;
+    border-color: fn.use-var(text-color, white);
+    // 选区在舞台内随图片缩放，边框用逆缩放保持屏幕恒定宽度
+    border-width: calc(1px * var(--u-image-cropper-inv-scale, 1));
+    cursor: move;
+  }
+
+  @include m.e(grid-line) {
+    position: absolute;
+    pointer-events: none;
+    background-color: fn.color-a(text-color, 50, white);
+
+    // 前两条为竖线，后两条为横线，与模板中的渲染顺序对应
+    &:nth-child(-n + 2) {
+      top: 0;
+      bottom: 0;
+      width: calc(1px * var(--u-image-cropper-inv-scale, 1));
+    }
+
+    &:nth-child(n + 3) {
+      left: 0;
+      right: 0;
+      height: calc(1px * var(--u-image-cropper-inv-scale, 1));
+    }
+
+    &:nth-child(1) {
+      left: 33.3333%;
+    }
+
+    &:nth-child(2) {
+      left: 66.6667%;
+    }
+
+    &:nth-child(3) {
+      top: 33.3333%;
+    }
+
+    &:nth-child(4) {
+      top: 66.6667%;
+    }
+  }
+
+  @include m.e(handle) {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: fn.use-var(text-color, white);
+    box-shadow: fn.use-var(shadow, sm);
+    // 手柄在舞台内随图片缩放，用逆缩放保持屏幕恒定尺寸
+    transform: translate(-50%, -50%) scale(var(--u-image-cropper-inv-scale, 1));
+
+    &[data-handle='nw'] {
+      left: 0;
+      top: 0;
+      cursor: nwse-resize;
+    }
+
+    &[data-handle='n'] {
+      left: 50%;
+      top: 0;
+      cursor: ns-resize;
+    }
+
+    &[data-handle='ne'] {
+      left: 100%;
+      top: 0;
+      cursor: nesw-resize;
+    }
+
+    &[data-handle='e'] {
+      left: 100%;
+      top: 50%;
+      cursor: ew-resize;
+    }
+
+    &[data-handle='se'] {
+      left: 100%;
+      top: 100%;
+      cursor: nwse-resize;
+    }
+
+    &[data-handle='s'] {
+      left: 50%;
+      top: 100%;
+      cursor: ns-resize;
+    }
+
+    &[data-handle='sw'] {
+      left: 0;
+      top: 100%;
+      cursor: nesw-resize;
+    }
+
+    &[data-handle='w'] {
+      left: 0;
+      top: 50%;
+      cursor: ew-resize;
+    }
+  }
+
+  // 实时预览区：悬浮在画布右下角，不拦截画布交互
+  @include m.e(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 fn.use-var(border, color);
+    border-radius: fn.use-var(radius, small);
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow);
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  @include m.e(preview-canvas) {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}

package/src/components/image-cropper/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/image-cropper/use-image-loader.ts

@@ -0,0 +1,79 @@
+import { onBeforeUnmount, shallowRef, watch, type ShallowRef } from 'vue'
+
+interface UseImageLoaderOptions {
+  /** 图片源（File / Blob / URL） */
+  src: () => File | Blob | string | undefined
+}
+
+interface UseImageLoaderReturn {
+  /** 用于渲染的图片地址 */
+  imageUrl: ShallowRef<string>
+  /** 是否加载完成 */
+  loaded: ShallowRef<boolean>
+  /** 是否加载失败 */
+  error: ShallowRef<boolean>
+  /** 图片原始宽度 */
+  naturalWidth: ShallowRef<number>
+  /** 图片原始高度 */
+  naturalHeight: ShallowRef<number>
+  /** 已加载完成的图片元素，供画布绘制（预览 / getResult 输出） */
+  imageEl: ShallowRef<HTMLImageElement | undefined>
+}
+
+/** 加载 File / Blob / URL 图片源，File / Blob 走 objectURL 并在替换与卸载时释放 */
+export function useImageLoader(options: UseImageLoaderOptions): UseImageLoaderReturn {
+  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<HTMLImageElement>()
+
+  let objectUrl: string | undefined
+
+  function revokeObjectUrl() {
+    if (!objectUrl) return
+    URL.revokeObjectURL(objectUrl)
+    objectUrl = undefined
+  }
+
+  function load(source: File | Blob | string | undefined) {
+    revokeObjectUrl()
+    imageUrl.value = ''
+    loaded.value = false
+    error.value = false
+    naturalWidth.value = 0
+    naturalHeight.value = 0
+    imageEl.value = undefined
+
+    if (!source) return
+
+    const url = typeof source === 'string' ? source : (objectUrl = URL.createObjectURL(source))
+    const el = new Image()
+    // URL 源尽量走跨域匿名加载，保证后续画布导出不被污染
+    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 }
+}

package/src/components/image-cropper/use-preview.ts

@@ -0,0 +1,58 @@
+import { watch, type ShallowRef } from 'vue'
+
+import { drawCropToCanvas, type CropTransform } from './draw-crop'
+import type { SelectionRect } from './use-selection'
+
+interface UsePreviewOptions {
+  /** 预览画布元素 */
+  canvas: ShallowRef<HTMLCanvasElement | undefined>
+  /** 舞台内的图片元素（已加载完成） */
+  image: ShallowRef<HTMLImageElement | undefined>
+  /** 当前选区（图片像素坐标） */
+  selection: ShallowRef<SelectionRect | null>
+  /** 影响裁剪输出的变换（缩放 / 平移不影响输出，仅旋转 / 翻转触发重绘） */
+  transform: CropTransform
+  /** 裁剪画布区尺寸，预览显示尺寸以它的 30% 为上限 */
+  canvasSize: () => { width: number; height: number }
+}
+
+/**
+ * 实时预览：选区或旋转 / 翻转变换变化时把当前裁剪结果重绘到预览画布。
+ * 画布按显示尺寸（等比缩放到画布区 30% 以内）绘制，不能靠 CSS max-width/max-height 约束
+ * ——父级为 shrink-to-fit 宽度时百分比 max 约束失效，画布会按原尺寸溢出被裁剪
+ */
+export function usePreview(options: UsePreviewOptions): void {
+  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
+
+      // 与 drawCropToCanvas 相同的宽高交换规则，先求旋转后的基准尺寸
+      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 * 0.3) / baseW, (size.height * 0.3) / baseH, 1)
+      drawCropToCanvas(img, sel, transform, el, { width: baseW * scale, height: baseH * scale })
+    },
+    // post：等待 v-if 切换后画布元素完成挂载
+    { flush: 'post', immediate: true }
+  )
+}

package/src/components/image-cropper/use-selection.ts

@@ -0,0 +1,255 @@
+import { onBeforeUnmount, shallowRef, watch, type Ref, type ShallowRef } from 'vue'
+
+/** 裁剪选区（图片像素坐标） */
+export interface SelectionRect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/** 手柄方位：四角 + 四边 */
+export type SelectionHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
+
+/** 全部手柄方位 */
+export const SELECTION_HANDLES: SelectionHandle[] = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w']
+
+/** 选区最小边长（图片像素） */
+const MIN_SIZE = 20
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), Math.max(min, max))
+}
+
+interface UseSelectionOptions {
+  /** 选区元素（mousedown 交互目标，手柄通过 data-handle 标识） */
+  target: ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>
+  /** 图片原始宽（图片像素） */
+  imageWidth: () => number
+  /** 图片原始高（图片像素） */
+  imageHeight: () => number
+  /** 屏幕位移换算为图片像素位移（由 use-transform 提供，考虑缩放 / 旋转 / 翻转） */
+  toImageDelta: (dx: number, dy: number) => { x: number; y: number }
+  /** 宽高比约束（宽 / 高），不传或 <= 0 为自由比例 */
+  aspectRatio: () => number | undefined
+}
+
+interface UseSelectionReturn {
+  /** 当前选区（图片像素坐标） */
+  selection: ShallowRef<SelectionRect | null>
+  /** 以图片居中约 80% 区域初始化选区（受宽高比约束） */
+  initSelection: () => void
+  /** 清空选区 */
+  clearSelection: () => void
+}
+
+/** 裁剪选区交互：整体拖动 + 8 个手柄调整大小，支持宽高比约束与图片边界钳制 */
+export function useSelection(options: UseSelectionOptions): UseSelectionReturn {
+  const { target, imageWidth, imageHeight, toImageDelta, aspectRatio } = options
+
+  const selection = shallowRef<SelectionRect | null>(null)
+
+  /** 有效宽高比，非法值视为自由比例 */
+  function validRatio() {
+    const ratio = aspectRatio()
+    return ratio && ratio > 0 ? ratio : undefined
+  }
+
+  /** 尺寸与位置钳制在图片像素范围内 */
+  function clampRect(rect: SelectionRect): SelectionRect {
+    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: SelectionRect, ratio: number): SelectionRect {
+    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 * 0.8
+    let height = H * 0.8
+    const ratio = validRatio()
+    // 在居中 80% 框内内接指定比例
+    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)
+    }
+  )
+
+  // ---------- 拖动交互（参照 useDrag 模式：mousedown 起，document 级 move/up 收尾） ----------
+
+  interface DragSession {
+    /** 'move' 为整体拖动，其余为手柄方位 */
+    mode: 'move' | SelectionHandle
+    startX: number
+    startY: number
+    origin: SelectionRect
+  }
+
+  let session: DragSession | null = null
+
+  function handleMousedown(e: MouseEvent) {
+    const sel = selection.value
+    if (e.button !== 0 || !sel) return
+    // 阻止冒泡与默认行为：避免触发画布层交互（P3 平移）与原生选中
+    e.stopPropagation()
+    e.preventDefault()
+
+    const handle = (e.target as HTMLElement | null)
+      ?.closest('[data-handle]')
+      ?.getAttribute('data-handle')
+
+    session = {
+      mode: (handle as SelectionHandle | null) ?? 'move',
+      startX: e.clientX,
+      startY: e.clientY,
+      origin: { ...sel }
+    }
+
+    document.addEventListener('mousemove', handleMousemove, { passive: true })
+    document.addEventListener('mouseup', handleMouseup)
+  }
+
+  function handleMousemove(e: MouseEvent) {
+    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: SelectionRect, dx: number, dy: number): SelectionRect {
+    return clampRect({ ...origin, x: origin.x + dx, y: origin.y + dy })
+  }
+
+  function resizeSelection(
+    origin: SelectionRect,
+    handle: SelectionHandle,
+    dx: number,
+    dy: number
+  ): SelectionRect {
+    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 }
+}