kfb-view 3.3.7 → 3.3.9

package/src/components/tailoring/index.js

@@ -8,7 +8,26 @@ import {
   pointInOtherPoint,
   isPointInMatrix,
 } from '../../util/calculate';
-import {Point, Rect} from '../../plugin/openseadragon/openseadragon';
+
+const MOVE_BODY = 4;
+const HANDLE_EDGE_TOP = 5;
+const HANDLE_EDGE_RIGHT = 6;
+const HANDLE_EDGE_BOTTOM = 7;
+const HANDLE_EDGE_LEFT = 8;
+const HANDLE_HIT = 28;
+const CORNER_LEN = 20;
+const EDGE_HANDLE_LEN = 14;
+const TOOLBAR_HEIGHT = 44;
+const TOOLBAR_MIN_WIDTH = 520;
+const TOOLBAR_GAP = 5;
+const MIN_SIZE = 40;
+const STYLE_ID = 'kfb-tailoring-styles';
+
+const ASPECT_PRESETS = {
+  '16:9': 16 / 9,
+  '4:3': 4 / 3,
+  '1:1': 1,
+};
 
 /**
  * 用来裁剪/截图
@@ -16,7 +35,6 @@ import {Point, Rect} from '../../plugin/openseadragon/openseadragon';
  */
 export class Tailoring extends ViewerCommon {
   /**
-   * 初始化视图测量工具
    * @param {Object} viewer
    * @param {Object} canvas
    * @param {Object} cache
@@ -29,7 +47,10 @@ export class Tailoring extends ViewerCommon {
     this.tailoringPoints = [];
     this.movePointIndex = -1;
     this.color = '#FFF';
-    this.contents = [];
+    this.aspectMode = 'custom';
+    this.customRatio = 1;
+    this.isUpdatingInputs = false;
+    this.toolbarEl = null;
     this.options = {
       suffix: 'jpeg',
       quality: 0.92,
@@ -37,6 +58,132 @@ export class Tailoring extends ViewerCommon {
       shape: true,
       ...this.options,
     };
+    this.ensureStyles();
+  }
+
+  ensureStyles() {
+    let style = document.getElementById(STYLE_ID);
+    if (!style) {
+      style = document.createElement('style');
+      style.id = STYLE_ID;
+      document.head.appendChild(style);
+    }
+    style.textContent = `
+      .kfb-tailoring-toolbar {
+        position: absolute;
+        z-index: 20;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        height: ${TOOLBAR_HEIGHT}px;
+        padding: 0 12px;
+        box-sizing: border-box;
+        background: rgba(18, 18, 18, 0.92);
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        border-radius: 8px;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+        pointer-events: auto;
+        user-select: none;
+      }
+      .kfb-tailoring-toolbar__main {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+      }
+      .kfb-tailoring-toolbar__ratios {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-shrink: 0;
+      }
+      .kfb-tailoring-toolbar__ratios button {
+        height: 28px;
+        padding: 0 10px;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 14px;
+        background: rgba(255, 255, 255, 0.06);
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 12px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        white-space: nowrap;
+      }
+      .kfb-tailoring-toolbar__ratios button:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.28);
+      }
+      .kfb-tailoring-toolbar__ratios button.is-active {
+        background: #01d0b0;
+        border-color: #01d0b0;
+        color: #fff;
+      }
+      .kfb-tailoring-toolbar__custom {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 12px;
+        flex-shrink: 0;
+      }
+      .kfb-tailoring-toolbar__custom input {
+        width: 62px;
+        height: 28px;
+        padding: 0 6px;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 6px;
+        background: rgba(0, 0, 0, 0.35);
+        color: #fff;
+        font-size: 12px;
+        text-align: center;
+        outline: none;
+      }
+      .kfb-tailoring-toolbar__custom input:focus {
+        border-color: #01d0b0;
+      }
+      .kfb-tailoring-toolbar__actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+        margin-left: auto;
+        padding-left: 8px;
+      }
+      .kfb-tailoring-toolbar__actions button {
+        width: 32px;
+        height: 32px;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 0.15s ease;
+      }
+      .kfb-tailoring-toolbar__cancel {
+        background: rgba(255, 255, 255, 0.08);
+        color: #fff;
+      }
+      .kfb-tailoring-toolbar__cancel:hover {
+        background: rgba(255, 80, 80, 0.35);
+      }
+      .kfb-tailoring-toolbar__confirm {
+        background: rgba(1, 208, 176, 0.2);
+        color: #01d0b0;
+      }
+      .kfb-tailoring-toolbar__confirm:hover {
+        background: rgba(1, 208, 176, 0.45);
+        color: #fff;
+      }
+      .kfb-tailoring-toolbar__actions svg {
+        width: 16px;
+        height: 16px;
+        fill: currentColor;
+      }
+    `;
   }
 
   init({
@@ -45,180 +192,555 @@ export class Tailoring extends ViewerCommon {
          left,
          top,
          color,
-         contents = [],
          shape = true,
          now = false,
+         aspectMode = 'custom',
        }) {
     this.options.shape = shape;
     this.isInTailoring = true;
     this.movePointIndex = -1;
+    this.lastPoint = undefined;
+    this.color = color || '#FFF';
+    this.customRatio = width / height || 1;
+    this.aspectMode = aspectMode in ASPECT_PRESETS || aspectMode === 'custom' ?
+      aspectMode : 'custom';
     const pointList = getRectPoint({x: left, y: top},
       {x: left + width, y: top + height});
     this.tailoringPoints = [
       pointList[0],
       pointList[2],
       pointList[6],
-      pointList[8]];
+      pointList[8],
+    ];
     if (now) {
       this.emitScreenShot();
       this.stopTailoring();
     } else {
-      this.color = color || '#FFF';
-      this.contents = contents?.length ?
-        contents :
-        [];
+      this.canvas.style.pointerEvents = 'none';
+      this.createToolbar();
       this.change();
     }
   }
 
+  getBounds() {
+    const minX = Math.min(...this.tailoringPoints.map(({x}) => x));
+    const minY = Math.min(...this.tailoringPoints.map(({y}) => y));
+    const maxX = Math.max(...this.tailoringPoints.map(({x}) => x));
+    const maxY = Math.max(...this.tailoringPoints.map(({y}) => y));
+    return {
+      minX,
+      minY,
+      maxX,
+      maxY,
+      width: maxX - minX,
+      height: maxY - minY,
+      centerX: (minX + maxX) / 2,
+      centerY: (minY + maxY) / 2,
+    };
+  }
+
+  setBounds(left, top, width, height) {
+    const pointList = getRectPoint(
+      {x: left, y: top},
+      {x: left + width, y: top + height},
+    );
+    this.tailoringPoints = [
+      pointList[0],
+      pointList[2],
+      pointList[6],
+      pointList[8],
+    ];
+  }
+
+  getAspectRatioValue() {
+    if (this.aspectMode === 'custom') {
+      return this.customRatio || 1;
+    }
+    return ASPECT_PRESETS[this.aspectMode];
+  }
+
+  clampBounds() {
+    const bounds = this.getBounds();
+    let {minX, minY, width, height} = bounds;
+    if (width < MIN_SIZE) {
+      width = MIN_SIZE;
+    }
+    if (height < MIN_SIZE) {
+      height = MIN_SIZE;
+    }
+    if (minX < 0) {
+      minX = 0;
+    }
+    if (minY < 0) {
+      minY = 0;
+    }
+    if (minX + width > this.canvas.width) {
+      minX = this.canvas.width - width;
+    }
+    if (minY + height > this.canvas.height) {
+      minY = this.canvas.height - height;
+    }
+    if (minX < 0) {
+      width += minX;
+      minX = 0;
+    }
+    if (minY < 0) {
+      height += minY;
+      minY = 0;
+    }
+    this.setBounds(minX, minY, width, height);
+  }
+
+  applyAspectMode(mode) {
+    this.aspectMode = mode;
+    if (mode === 'custom') {
+      const bounds = this.getBounds();
+      this.customRatio = bounds.width / bounds.height || 1;
+    } else {
+      const ratio = ASPECT_PRESETS[mode];
+      const bounds = this.getBounds();
+      let width = bounds.width;
+      let height = width / ratio;
+      if (height > this.canvas.height) {
+        height = this.canvas.height;
+        width = height * ratio;
+      }
+      if (width > this.canvas.width) {
+        width = this.canvas.width;
+        height = width / ratio;
+      }
+      const left = bounds.centerX - width / 2;
+      const top = bounds.centerY - height / 2;
+      this.setBounds(left, top, width, height);
+      this.clampBounds();
+    }
+    this.updateToolbarState();
+    this.change();
+  }
+
+  applyCustomSize(nextWidth, nextHeight, source = 'width') {
+    const bounds = this.getBounds();
+    let width = bounds.width;
+    let height = bounds.height;
+    if (this.aspectMode === 'custom') {
+      if (source === 'width') {
+        width = Math.max(MIN_SIZE, Math.round(nextWidth));
+      } else {
+        height = Math.max(MIN_SIZE, Math.round(nextHeight));
+      }
+    } else {
+      const ratio = ASPECT_PRESETS[this.aspectMode];
+      if (source === 'width') {
+        width = Math.max(MIN_SIZE, Math.round(nextWidth));
+        height = Math.round(width / ratio);
+      } else {
+        height = Math.max(MIN_SIZE, Math.round(nextHeight));
+        width = Math.round(height * ratio);
+      }
+    }
+    const left = bounds.centerX - width / 2;
+    const top = bounds.centerY - height / 2;
+    this.setBounds(left, top, width, height);
+    this.clampBounds();
+    if (this.aspectMode === 'custom') {
+      const nextBounds = this.getBounds();
+      this.customRatio = nextBounds.width / nextBounds.height || 1;
+    }
+    this.updateToolbarState();
+    this.change();
+  }
+
+  createToolbar() {
+    this.destroyToolbar();
+    const toolbar = document.createElement('div');
+    toolbar.className = 'kfb-tailoring-toolbar';
+    toolbar.innerHTML = `
+      <div class="kfb-tailoring-toolbar__main">
+        <div class="kfb-tailoring-toolbar__ratios">
+          <button type="button" data-ratio="16:9">16:9</button>
+          <button type="button" data-ratio="4:3">4:3</button>
+          <button type="button" data-ratio="1:1">1:1</button>
+          <button type="button" data-ratio="custom">${this.translate('custom')}</button>
+        </div>
+        <div class="kfb-tailoring-toolbar__custom">
+          <input type="number" class="kfb-tailoring-width" min="${MIN_SIZE}" step="1" />
+          <span>×</span>
+          <input type="number" class="kfb-tailoring-height" min="${MIN_SIZE}" step="1" />
+        </div>
+      </div>
+      <div class="kfb-tailoring-toolbar__actions">
+        <button type="button" class="kfb-tailoring-toolbar__cancel" title="${this.translate('cancel')}">
+          <svg viewBox="0 0 1024 1024"><path d="M768 307.552 716.448 256 512 460.448 307.552 256 256 307.552 460.448 512 256 716.448 307.552 768 512 563.552 716.448 768 768 716.448 563.552 512 768 307.552z"/></svg>
+        </button>
+        <button type="button" class="kfb-tailoring-toolbar__confirm" title="${this.translate('confirm')}">
+          <svg viewBox="0 0 1024 1024"><path d="M836.267 311.467 806.4 281.6c-8.533-8.533-21.333-8.533-29.866 0L435.2 622.933c-4.267 4.267-4.267 4.267-8.534 0L264.533 460.8c-8.533-8.533-21.333-8.533-29.866 0l-29.867 29.867c-8.533 8.533-8.533 21.333 0 29.866l217.6 217.6c4.267 4.267 12.8 4.267 17.067 0l396.8-396.8c8.533-8.533 8.533-21.333 0-29.866z"/></svg>
+        </button>
+      </div>
+    `;
+    this.kv.$el.appendChild(toolbar);
+    this.toolbarEl = toolbar;
+
+    toolbar.querySelectorAll('[data-ratio]').forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.applyAspectMode(btn.dataset.ratio);
+      });
+    });
+    toolbar.querySelector('.kfb-tailoring-toolbar__cancel')
+      .addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.stopTailoring();
+      });
+    toolbar.querySelector('.kfb-tailoring-toolbar__confirm')
+      .addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.emitScreenShot();
+        this.stopTailoring();
+      });
+
+    const widthInput = toolbar.querySelector('.kfb-tailoring-width');
+    const heightInput = toolbar.querySelector('.kfb-tailoring-height');
+    widthInput.addEventListener('change', () => {
+      if (this.isUpdatingInputs) return;
+      this.applyCustomSize(Number(widthInput.value), 0, 'width');
+    });
+    heightInput.addEventListener('change', () => {
+      if (this.isUpdatingInputs) return;
+      this.applyCustomSize(0, Number(heightInput.value), 'height');
+    });
+    widthInput.addEventListener('keydown', (e) => e.stopPropagation());
+    heightInput.addEventListener('keydown', (e) => e.stopPropagation());
+
+    this.updateToolbarState();
+    this.updateToolbarPosition();
+  }
+
+  destroyToolbar() {
+    if (this.toolbarEl) {
+      this.toolbarEl.remove();
+      this.toolbarEl = null;
+    }
+  }
+
+  updateToolbarState() {
+    if (!this.toolbarEl) return;
+    const bounds = this.getBounds();
+    this.toolbarEl.querySelectorAll('[data-ratio]').forEach((btn) => {
+      btn.classList.toggle('is-active', btn.dataset.ratio === this.aspectMode);
+    });
+    this.isUpdatingInputs = true;
+    const widthInput = this.toolbarEl.querySelector('.kfb-tailoring-width');
+    const heightInput = this.toolbarEl.querySelector('.kfb-tailoring-height');
+    widthInput.value = Math.round(bounds.width);
+    heightInput.value = Math.round(bounds.height);
+    this.isUpdatingInputs = false;
+  }
+
+  getSizeLabelBounds() {
+    const {minX, minY, width, height} = this.getBounds();
+    const text = `${Math.round(width)} × ${Math.round(height)}`;
+    const ctx = this.canvas.getContext('2d');
+    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif';
+    const padX = 8;
+    const labelH = 22;
+    const labelW = ctx.measureText(text).width + padX * 2;
+    let labelX = minX;
+    let labelY = minY - labelH - 5;
+    if (labelY < 2) {
+      labelY = minY + 5;
+    }
+    return {
+      x: labelX,
+      y: labelY,
+      width: labelW,
+      height: labelH,
+      top: labelY,
+      bottom: labelY + labelH,
+    };
+  }
+
+  updateToolbarPosition() {
+    if (!this.toolbarEl) return;
+    const {minX, minY, maxY} = this.getBounds();
+    const toolbarWidth = TOOLBAR_MIN_WIDTH;
+    let left = minX;
+    let top = maxY + TOOLBAR_GAP;
+    if (left + toolbarWidth > this.canvas.width - 4) {
+      left = Math.max(4, this.canvas.width - toolbarWidth - 4);
+    }
+    if (left < 4) {
+      left = 4;
+    }
+    const labelBounds = this.getSizeLabelBounds();
+    const belowTop = maxY + TOOLBAR_GAP;
+    const aboveTop = labelBounds.top - TOOLBAR_HEIGHT - TOOLBAR_GAP;
+    if (belowTop + TOOLBAR_HEIGHT > this.canvas.height - 4) {
+      if (aboveTop >= 4) {
+        top = aboveTop;
+      } else {
+        top = Math.max(4, aboveTop);
+      }
+    } else {
+      top = belowTop;
+    }
+    this.toolbarEl.style.left = `${left}px`;
+    this.toolbarEl.style.top = `${top}px`;
+    this.toolbarEl.style.width = `${toolbarWidth}px`;
+  }
+
   emitTailoringRegion() {
+    const bounds = this.getBounds();
     this.mitt.$emit(EVENT_TAILORING_REGION, this.viewerElementToImageRectangle({
-      x: this.tailoringPoints[0].x, y: this.tailoringPoints[0].y,
-      width: this.tailoringPoints[3].x - this.tailoringPoints[0].x,
-      height: this.tailoringPoints[3].y - this.tailoringPoints[0].y,
+      x: bounds.minX,
+      y: bounds.minY,
+      width: bounds.width,
+      height: bounds.height,
     }));
   }
 
-  drawRect() {
-    const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
+  drawDimOverlay(ctx) {
+    const {minX, minY, maxX, maxY} = this.getBounds();
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.42)';
+    ctx.fillRect(0, 0, this.canvas.width, minY);
+    ctx.fillRect(0, minY, minX, maxY - minY);
+    ctx.fillRect(maxX, minY, this.canvas.width - maxX, maxY - minY);
+    ctx.fillRect(0, maxY, this.canvas.width, this.canvas.height - maxY);
+  }
+
+  drawSelectionFrame(ctx) {
+    const {minX, minY, width, height} = this.getBounds();
     ctx.strokeStyle = this.color;
-    ctx.lineWidth = 1;
-    ctx.rect(this.tailoringPoints[0].x, this.tailoringPoints[0].y,
-      this.tailoringPoints[3].x - this.tailoringPoints[0].x,
-      this.tailoringPoints[3].y - this.tailoringPoints[0].y);
-    ctx.stroke();
+    ctx.lineWidth = 2;
+    ctx.strokeRect(minX + 0.5, minY + 0.5, width - 1, height - 1);
+  }
+
+  drawCornerHandles(ctx) {
+    const {minX, minY, maxX, maxY} = this.getBounds();
+    const corners = [
+      {x: minX, y: minY},
+      {x: maxX, y: minY},
+      {x: minX, y: maxY},
+      {x: maxX, y: maxY},
+    ];
+    const len = Math.min(
+      CORNER_LEN,
+      (maxX - minX) / 3,
+      (maxY - minY) / 3,
+    );
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 3;
+    ctx.lineCap = 'square';
+    corners.forEach((corner, index) => {
+      ctx.beginPath();
+      if (index === 0) {
+        ctx.moveTo(corner.x, corner.y + len);
+        ctx.lineTo(corner.x, corner.y);
+        ctx.lineTo(corner.x + len, corner.y);
+      } else if (index === 1) {
+        ctx.moveTo(corner.x - len, corner.y);
+        ctx.lineTo(corner.x, corner.y);
+        ctx.lineTo(corner.x, corner.y + len);
+      } else if (index === 2) {
+        ctx.moveTo(corner.x, corner.y - len);
+        ctx.lineTo(corner.x, corner.y);
+        ctx.lineTo(corner.x + len, corner.y);
+      } else {
+        ctx.moveTo(corner.x - len, corner.y);
+        ctx.lineTo(corner.x, corner.y);
+        ctx.lineTo(corner.x, corner.y - len);
+      }
+      ctx.stroke();
+    });
+  }
+
+  drawSizeLabel(ctx) {
+    const labelBounds = this.getSizeLabelBounds();
+    const {width, height} = this.getBounds();
+    const text = `${Math.round(width)} × ${Math.round(height)}`;
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.88)';
+    ctx.fillRect(labelBounds.x, labelBounds.y, labelBounds.width, labelBounds.height);
+    ctx.fillStyle = '#fff';
+    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(text, labelBounds.x + 8, labelBounds.y + labelBounds.height / 2 + 0.5);
   }
 
   drawTailoring() {
-    const minX = Math.min(...this.tailoringPoints.map(({x}) => x));
-    const minY = Math.min(...this.tailoringPoints.map(({y}) => y));
-    const maxX = Math.max(...this.tailoringPoints.map(({x}) => x));
-    const maxY = Math.max(...this.tailoringPoints.map(({y}) => y));
-    const leftTop = {x: minX, y: minY};
-    const rightTop = {x: maxX, y: minY};
-    const leftBottom = {x: minX, y: maxY};
-    const rightBottom = {x: maxX, y: maxY};
-    const distX = maxX - minX > 30 ? 30 : maxX - minX;
-    const distY = maxY - minY > 30 ? 30 : maxY - minY;
-    // const deg = this.viewport.getRotation();
     const ctx = this.canvas.getContext('2d');
-    ctx.beginPath();
-    ctx.strokeStyle = this.color;
-    ctx.lineWidth = 4;
-    ctx.moveTo(leftTop.x, leftTop.y);
-    ctx.lineTo(leftTop.x + distX, leftTop.y);
-    ctx.moveTo(leftTop.x, leftTop.y);
-    ctx.lineTo(leftTop.x, leftTop.y + distY);
-
-    ctx.moveTo(rightTop.x, rightTop.y);
-    ctx.lineTo(rightTop.x - distX, rightTop.y);
-    ctx.moveTo(rightTop.x, rightTop.y);
-    ctx.lineTo(rightTop.x, rightTop.y + distY);
-
-    ctx.moveTo(leftBottom.x, leftBottom.y);
-    ctx.lineTo(leftBottom.x + distX, leftBottom.y);
-    ctx.moveTo(leftBottom.x, leftBottom.y);
-    ctx.lineTo(leftBottom.x, leftBottom.y - distY);
-
-    ctx.moveTo(rightBottom.x, rightBottom.y);
-    ctx.lineTo(rightBottom.x - distX, rightBottom.y);
-    ctx.moveTo(rightBottom.x, rightBottom.y);
-    ctx.lineTo(rightBottom.x, rightBottom.y - distY);
-    ctx.stroke();
-    ctx.beginPath();
+    this.drawDimOverlay(ctx);
+    this.drawSelectionFrame(ctx);
+    this.drawCornerHandles(ctx);
+    this.drawEdgeHandles(ctx);
+    this.drawSizeLabel(ctx);
+  }
+
+  getEdgeMidpoints() {
+    const {minX, minY, maxX, maxY, centerX, centerY} = this.getBounds();
+    return [
+      {x: centerX, y: minY},
+      {x: maxX, y: centerY},
+      {x: centerX, y: maxY},
+      {x: minX, y: centerY},
+    ];
+  }
+
+  drawEdgeHandles(ctx) {
+    const edges = this.getEdgeMidpoints();
+    const halfLen = Math.min(
+      EDGE_HANDLE_LEN / 2,
+      this.getBounds().width / 4,
+      this.getBounds().height / 4,
+    );
     ctx.fillStyle = this.color;
-    ctx.font = '18px Arial';
-    const width = (rightTop.x - leftTop.x).toFixed(2) / 1;
-    const height = (rightBottom.y - rightTop.y).toFixed(2) / 1;
-    ctx.fillText(this.contents?.[2] ?
-      this.contents[2](width, height) :
-      (`${this.translate('area_size')}${width}*${height}，${this.translate('drag_resize')}`), leftTop.x, leftTop.y - 50);
-    ctx.fillText(this.contents?.[0] ?? `${this.translate('complete_screenshot')}`, leftTop.x, leftTop.y - 30);
-    ctx.fillText(this.contents?.[1] ?? `${this.translate('cancel_screenshot')}`, leftTop.x, leftTop.y - 10);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.fillStyle = '#000000';
-    let areaInterval = 4;
-    let areaDist = 100;
-    if (rightTop.x + areaDist + areaInterval > this.canvas.width) {
-      areaDist = -100;
-      areaInterval = -4;
-    }
-    ctx.rect(rightTop.x + areaInterval, rightTop.y, areaDist, 40);
-    ctx.fill();
-    ctx.save();
-    ctx.beginPath();
-    ctx.translate(rightTop.x + areaInterval + areaDist / 2, rightTop.y - 5);
-    ctx.fillStyle = '#ffffff';
-    ctx.drawConfirm();
-    ctx.restore();
-    ctx.save();
-    ctx.beginPath();
-    if (areaDist < 0) {
-      ctx.translate(rightTop.x + areaDist + areaInterval, rightTop.y - 5);
-    } else {
-      ctx.translate(rightTop.x + areaInterval, rightTop.y - 5);
+    edges.forEach((point, index) => {
+      if (index === 0 || index === 2) {
+        ctx.fillRect(point.x - halfLen, point.y - 2, halfLen * 2, 4);
+      } else {
+        ctx.fillRect(point.x - 2, point.y - halfLen, 4, halfLen * 2);
+      }
+    });
+  }
+
+  getCornerIndex({x, y}) {
+    return this.tailoringPoints.findIndex(
+      (point) => pointInOtherPoint(point, {x, y}, HANDLE_HIT),
+    );
+  }
+
+  getEdgeIndex({x, y}) {
+    return this.getEdgeMidpoints().findIndex(
+      (point) => pointInOtherPoint(point, {x, y}, HANDLE_HIT),
+    );
+  }
+
+  getHandleIndex({x, y}) {
+    const corner = this.getCornerIndex({x, y});
+    if (corner !== -1) return corner;
+    const edge = this.getEdgeIndex({x, y});
+    if (edge !== -1) return HANDLE_EDGE_TOP + edge;
+    return -1;
+  }
+
+  getHandleCursor(index) {
+    const cursors = {
+      0: 'nwse-resize',
+      1: 'nesw-resize',
+      2: 'nesw-resize',
+      3: 'nwse-resize',
+      [HANDLE_EDGE_TOP]: 'ns-resize',
+      [HANDLE_EDGE_RIGHT]: 'ew-resize',
+      [HANDLE_EDGE_BOTTOM]: 'ns-resize',
+      [HANDLE_EDGE_LEFT]: 'ew-resize',
+    };
+    return cursors[index] || 'default';
+  }
+
+  isPointOnToolbar({x, y}) {
+    if (!this.toolbarEl) return false;
+    const rect = this.toolbarEl.getBoundingClientRect();
+    const canvasRect = this.canvas.getBoundingClientRect();
+    const localX = rect.left - canvasRect.left;
+    const localY = rect.top - canvasRect.top;
+    return x >= localX && x <= localX + rect.width &&
+      y >= localY && y <= localY + rect.height;
+  }
+
+  isMouseOnToolbar(e) {
+    if (!this.toolbarEl) return false;
+    const rect = this.toolbarEl.getBoundingClientRect();
+    return e.clientX >= rect.left && e.clientX <= rect.right &&
+      e.clientY >= rect.top && e.clientY <= rect.bottom;
+  }
+
+  setViewerCursor(cursor) {
+    const targets = [
+      this.kv.$el,
+      this.viewer.container,
+      this.viewer.canvas,
+      document.getElementById('openseadragon-zrender'),
+    ];
+    const applyCursor = (el) => {
+      if (!el) return;
+      el.style.cursor = cursor;
+      el.querySelectorAll('canvas').forEach((canvas) => {
+        canvas.style.cursor = cursor;
+      });
+    };
+    targets.forEach(applyCursor);
+    if (this.canvas) {
+      this.canvas.style.cursor = cursor;
     }
-    ctx.fillStyle = '#ffffff';
-    ctx.drawCancel();
-    ctx.restore();
   }
 
-  /**
-   * 监听canvas按下事件
-   * @param {Object} e
-   * @param {number} e.x
-   * @param {number} e.y
-   */
+  getCursor({x, y}) {
+    if (this.movePointIndex >= 0 && this.movePointIndex <= HANDLE_EDGE_LEFT) {
+      return this.getHandleCursor(this.movePointIndex);
+    }
+    if (this.movePointIndex === MOVE_BODY) {
+      return 'grabbing';
+    }
+    const handle = this.getHandleIndex({x, y});
+    if (handle !== -1) {
+      return this.getHandleCursor(handle);
+    }
+    if (this.isPointInMatrix({x, y})) {
+      return 'grab';
+    }
+    return 'default';
+  }
+
+  updateCursor(position) {
+    if (!this.isInTailoring) return;
+    const {x, y} = position;
+    if (this.isPointOnToolbar({x, y})) {
+      this.setViewerCursor('default');
+      return;
+    }
+    this.setViewerCursor(this.getCursor({x, y}));
+  }
+
+  onCanvasMove(e) {
+    if (!this.isInTailoring) return;
+    if (this.isMouseOnToolbar(e)) {
+      this.setViewerCursor('default');
+      return;
+    }
+    const rect = this.viewer.canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    this.setViewerCursor(this.getCursor({x, y}));
+  }
+
   onCanvasPress({x, y}) {
-    this.movePointIndex = this.tailoringPoints.findIndex(
-      (point) => pointInOtherPoint(point, {x, y}, 30));
-    const rightTopPoint = this.tailoringPoints[1];
-
-    let areaInterval = 4;
-    let areaDist = 100;
-    let cancelArea = new Rect(rightTopPoint.x + 14, rightTopPoint.y, 30, 40);
-    let confirmArea = new Rect(rightTopPoint.x + 64, rightTopPoint.y, 30, 40);
-    if (rightTopPoint.x + areaDist + areaInterval > this.canvas.width) {
-      cancelArea = new Rect(rightTopPoint.x - 94, rightTopPoint.y, 30, 40);
-      confirmArea = new Rect(rightTopPoint.x - 44, rightTopPoint.y, 30, 40);
-    }
-    const point = new Point(x, y);
-    if (cancelArea.containsPoint(point)) {
-      this.stopTailoring();
+    if (this.isPointOnToolbar({x, y})) {
+      return;
     }
-    if (confirmArea.containsPoint(point)) {
-      this.emitScreenShot();
-      this.stopTailoring();
+    this.movePointIndex = this.getHandleIndex({x, y});
+    if (this.movePointIndex === -1 && this.isPointInMatrix({x, y})) {
+      this.movePointIndex = MOVE_BODY;
+    }
+    this.lastPoint = {x, y};
+    if (this.movePointIndex === MOVE_BODY) {
+      this.setViewerCursor('grabbing');
+    } else if (this.movePointIndex > -1) {
+      this.setViewerCursor(this.getHandleCursor(this.movePointIndex));
     }
   }
 
-  /**
-   * 监听鼠标释放事件
-   * @param {Object} e
-   * @param {number} e.x
-   * @param {number} e.y
-   */
   onCanvasRelease({x, y}) {
+    if (this.movePointIndex !== -1 && this.movePointIndex !== MOVE_BODY) {
+      const bounds = this.getBounds();
+      this.customRatio = bounds.width / bounds.height || 1;
+    }
     this.movePointIndex = -1;
     this.lastPoint = undefined;
+    if (x !== undefined && y !== undefined) {
+      this.updateCursor({x, y});
+    }
   }
 
-  /**
-   * 监听鼠标拖动事件
-   * @param {Object} e
-   * @param {number} e.x
-   * @param {number} e.y
-   */
-  onCanvasDrag({x, y}) {
-    if (this.movePointIndex === -1) return;
-    if (!this.lastPoint) {
-      this.lastPoint = {x, y};
-    }
-    const distX = (x - this.lastPoint.x);
-    const distY = (y - this.lastPoint.y);
-    switch (this.movePointIndex) {
+  resizeCornerFree(index, distX, distY) {
+    switch (index) {
       case 0:
         this.tailoringPoints[0] = {
           x: this.tailoringPoints[0].x + distX,
@@ -275,32 +797,174 @@ export class Tailoring extends ViewerCommon {
           y: this.tailoringPoints[3].y + distY,
         };
         break;
+      default:
+        break;
     }
-    this.tailoringPoints.forEach((i) => {
-      if (i.x < 0) {
-        i.x = 0;
+    this.clampBounds();
+  }
+
+  resizeCornerLocked(index, distX, distY) {
+    const ratio = this.getAspectRatioValue();
+    const bounds = this.getBounds();
+    const dominant = Math.abs(distX) >= Math.abs(distY) ? distX : distY * ratio;
+    let {minX, minY, maxX, maxY} = bounds;
+    let width = bounds.width;
+    let height = bounds.height;
+
+    switch (index) {
+      case 0:
+        width = Math.max(MIN_SIZE, width - dominant);
+        height = width / ratio;
+        minX = maxX - width;
+        minY = maxY - height;
+        break;
+      case 1:
+        width = Math.max(MIN_SIZE, width + dominant);
+        height = width / ratio;
+        minY = maxY - height;
+        maxX = minX + width;
+        break;
+      case 2:
+        width = Math.max(MIN_SIZE, width - dominant);
+        height = width / ratio;
+        minX = maxX - width;
+        maxY = minY + height;
+        break;
+      case 3:
+        width = Math.max(MIN_SIZE, width + dominant);
+        height = width / ratio;
+        maxX = minX + width;
+        maxY = minY + height;
+        break;
+      default:
+        return;
+    }
+    this.setBounds(minX, minY, width, height);
+    this.clampBounds();
+  }
+
+  resizeEdgeFree(index, distX, distY) {
+    const bounds = this.getBounds();
+    switch (index) {
+      case HANDLE_EDGE_TOP: {
+        let minY = bounds.minY + distY;
+        let height = bounds.maxY - minY;
+        if (height < MIN_SIZE) {
+          minY = bounds.maxY - MIN_SIZE;
+          height = MIN_SIZE;
+        }
+        this.setBounds(bounds.minX, minY, bounds.width, height);
+        break;
       }
-      if (i.y < 0) {
-        i.y = 0;
+      case HANDLE_EDGE_BOTTOM: {
+        const height = Math.max(MIN_SIZE, bounds.height + distY);
+        this.setBounds(bounds.minX, bounds.minY, bounds.width, height);
+        break;
       }
-      if (i.x > this.canvas.width) {
-        i.x = this.canvas.width;
+      case HANDLE_EDGE_LEFT: {
+        let minX = bounds.minX + distX;
+        let width = bounds.maxX - minX;
+        if (width < MIN_SIZE) {
+          minX = bounds.maxX - MIN_SIZE;
+          width = MIN_SIZE;
+        }
+        this.setBounds(minX, bounds.minY, width, bounds.height);
+        break;
       }
-      if (i.y > this.canvas.height) {
-        i.y = this.canvas.height;
+      case HANDLE_EDGE_RIGHT: {
+        const width = Math.max(MIN_SIZE, bounds.width + distX);
+        this.setBounds(bounds.minX, bounds.minY, width, bounds.height);
+        break;
       }
-    });
+      default:
+        break;
+    }
+    this.clampBounds();
+  }
+
+  resizeEdgeLocked(index, distX, distY) {
+    const ratio = this.getAspectRatioValue();
+    const bounds = this.getBounds();
+    switch (index) {
+      case HANDLE_EDGE_TOP: {
+        const height = Math.max(MIN_SIZE, bounds.height - distY);
+        const width = height * ratio;
+        const left = bounds.centerX - width / 2;
+        const top = bounds.maxY - height;
+        this.setBounds(left, top, width, height);
+        break;
+      }
+      case HANDLE_EDGE_BOTTOM: {
+        const height = Math.max(MIN_SIZE, bounds.height + distY);
+        const width = height * ratio;
+        const left = bounds.centerX - width / 2;
+        this.setBounds(left, bounds.minY, width, height);
+        break;
+      }
+      case HANDLE_EDGE_LEFT: {
+        const width = Math.max(MIN_SIZE, bounds.width - distX);
+        const height = width / ratio;
+        const top = bounds.centerY - height / 2;
+        const left = bounds.maxX - width;
+        this.setBounds(left, top, width, height);
+        break;
+      }
+      case HANDLE_EDGE_RIGHT: {
+        const width = Math.max(MIN_SIZE, bounds.width + distX);
+        const height = width / ratio;
+        const top = bounds.centerY - height / 2;
+        this.setBounds(bounds.minX, top, width, height);
+        break;
+      }
+      default:
+        break;
+    }
+    this.clampBounds();
+  }
+
+  moveBody(distX, distY) {
+    const bounds = this.getBounds();
+    let left = bounds.minX + distX;
+    let top = bounds.minY + distY;
+    left = Math.max(0, Math.min(left, this.canvas.width - bounds.width));
+    top = Math.max(0, Math.min(top, this.canvas.height - bounds.height));
+    this.setBounds(left, top, bounds.width, bounds.height);
+  }
+
+  onCanvasDrag({x, y}) {
+    if (this.movePointIndex === -1) return;
+    if (!this.lastPoint) {
+      this.lastPoint = {x, y};
+      return;
+    }
+    const distX = x - this.lastPoint.x;
+    const distY = y - this.lastPoint.y;
+    if (this.movePointIndex === MOVE_BODY) {
+      this.moveBody(distX, distY);
+    } else if (this.movePointIndex >= HANDLE_EDGE_TOP) {
+      if (this.aspectMode === 'custom') {
+        this.resizeEdgeFree(this.movePointIndex, distX, distY);
+        const bounds = this.getBounds();
+        this.customRatio = bounds.width / bounds.height || 1;
+      } else {
+        this.resizeEdgeLocked(this.movePointIndex, distX, distY);
+      }
+    } else if (this.aspectMode === 'custom') {
+      this.resizeCornerFree(this.movePointIndex, distX, distY);
+      const bounds = this.getBounds();
+      this.customRatio = bounds.width / bounds.height || 1;
+    } else {
+      this.resizeCornerLocked(this.movePointIndex, distX, distY);
+    }
     this.clearCanvas();
-    this.drawRect();
     this.drawTailoring();
+    this.updateToolbarState();
+    this.updateToolbarPosition();
     this.lastPoint = {x, y};
+    this.updateCursor({x, y});
     this.emitTailoringRegion();
   }
 
-  /**
-   * 监听鼠标按钮事件
-   * @param {Object} e
-   */
   onCanvasKey(e) {
     const {originalEvent} = e;
     if (originalEvent.key === 'Escape') {
@@ -309,49 +973,45 @@ export class Tailoring extends ViewerCommon {
   }
 
   onCanvasDblClick(position) {
+    if (this.isPointOnToolbar(position)) {
+      return;
+    }
     if (this.tailoringPoints.length > 0 && this.isPointInMatrix(position)) {
       this.emitScreenShot();
+      this.stopTailoring();
+    } else {
+      this.stopTailoring();
     }
-    this.stopTailoring();
   }
 
   emitScreenShot() {
     this.emitTailoringRegion();
+    const bounds = this.getBounds();
     this.mitt.$emit(EVENT_TAILORING_SCREENSHOT, {
       base64: this.getScreenCanvasImage(),
       region: this.viewerElementToImageRectangle({
-        x: this.tailoringPoints[0].x, y: this.tailoringPoints[0].y,
-        width: this.tailoringPoints[3].x - this.tailoringPoints[0].x,
-        height: this.tailoringPoints[3].y - this.tailoringPoints[0].y,
+        x: bounds.minX,
+        y: bounds.minY,
+        width: bounds.width,
+        height: bounds.height,
       }),
     });
   }
 
-  /**
-   * 判断鼠标在区域内
-   * @param {Object} point 鼠标位置
-   * @param {number} point.x 鼠标x位置
-   * @param {number} point.y 鼠标y位置
-   * @return {boolean}
-   */
   isPointInMatrix(point) {
-    const minX = Math.min(...this.tailoringPoints.map(({x}) => x));
-    const minY = Math.min(...this.tailoringPoints.map(({y}) => y));
-    const maxX = Math.max(...this.tailoringPoints.map(({x}) => x));
-    const maxY = Math.max(...this.tailoringPoints.map(({y}) => y));
-    const point1 = {x: minX, y: minY};
-    const point2 = {x: maxX, y: minY};
-    const point3 = {x: minX, y: maxY};
-    const point4 = {x: maxX, y: maxY};
-    return isPointInMatrix(point1, point2, point3, point4, point);
+    const {minX, minY, maxX, maxY} = this.getBounds();
+    return isPointInMatrix(
+      {x: minX, y: minY},
+      {x: maxX, y: minY},
+      {x: minX, y: maxY},
+      {x: maxX, y: maxY},
+      point,
+    );
   }
 
   getScreenCanvasImage() {
     const canvas = this.viewer.drawer.canvas;
-    const minX = Math.min(...this.tailoringPoints.map(({x}) => x));
-    const minY = Math.min(...this.tailoringPoints.map(({y}) => y));
-    const maxX = Math.max(...this.tailoringPoints.map(({x}) => x));
-    const maxY = Math.max(...this.tailoringPoints.map(({y}) => y));
+    const {minX, minY, maxX, maxY} = this.getBounds();
     const startPoint = {x: minX, y: minY};
     const endPoint = {x: maxX, y: maxY};
     const ctx = canvas.getContext('2d');
@@ -361,6 +1021,8 @@ export class Tailoring extends ViewerCommon {
     const radioY = canvasHeight / height;
     const disWidth = Math.abs(endPoint.x - startPoint.x) * radioX;
     const disHeight = Math.abs(endPoint.y - startPoint.y) * radioY;
+    const shapeSrcW = Math.abs(endPoint.x - startPoint.x);
+    const shapeSrcH = Math.abs(endPoint.y - startPoint.y);
     if (disWidth.toFixed(5) / 1 === 0 || disHeight.toFixed(5) / 1 === 0) {
       return;
     }
@@ -385,9 +1047,8 @@ export class Tailoring extends ViewerCommon {
       copyCtx.putImageData(imageData, 0, 0, 0, 0, disWidth, disHeight);
       const shapeCanvas = this.kv.shape?.canvas;
       if (shapeCanvas && this.options.shape) {
-        copyCtx.drawImage(shapeCanvas, startPoint.x * radioX,
-          startPoint.y * radioY, disWidth, disHeight, 0, 0, disWidth,
-          disHeight);
+        copyCtx.drawImage(shapeCanvas, startPoint.x, startPoint.y, shapeSrcW,
+          shapeSrcH, 0, 0, disWidth, disHeight);
       }
       if (copyCanvas.width > this.options.resolution) {
         const maxCanvas = document.createElement('canvas');
@@ -401,10 +1062,9 @@ export class Tailoring extends ViewerCommon {
           0, 0, maxCanvas.width, maxCanvas.height);
         return maxCanvas.toDataURL(`image/${this.options.suffix || 'jpeg'}`,
           this.options.quality);
-      } else {
-        return copyCanvas.toDataURL(`image/${this.options.suffix || 'jpeg'}`,
-          this.options.quality);
       }
+      return copyCanvas.toDataURL(`image/${this.options.suffix || 'jpeg'}`,
+        this.options.quality);
     } catch (e) {
       console.error(e);
     }
@@ -412,17 +1072,23 @@ export class Tailoring extends ViewerCommon {
 
   stopTailoring() {
     this.clearCanvas();
+    this.destroyToolbar();
     this.tailoringPoints = [];
     this.isInTailoring = false;
     this.movePointIndex = -1;
     this.lastPoint = undefined;
+    if (this.canvas) {
+      this.canvas.style.pointerEvents = '';
+    }
+    this.setViewerCursor('default');
   }
 
   change() {
     if (!this.isInTailoring) return;
     this.clearCanvas();
     this.emitTailoringRegion();
-    this.drawRect();
     this.drawTailoring();
+    this.updateToolbarState();
+    this.updateToolbarPosition();
   }
 }