next-element-vue 0.3.6 → 0.3.7

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.3.6 v
- * 发布日期：2024-09-15
+ * 当前版本：0.3.7 v
+ * 发布日期：2024-09-21
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -5781,7 +5781,7 @@
         },
         emits: [ "fullscreen", "save" ],
         setup(props, {emit: emit}) {
-            const _ns = vue.inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
+            const _ns = vue.inject("ns", {}), scaleTranslateManager = vue.inject("scaleTranslateManager", {}), scaleTranslate = scaleTranslateManager.scaleTranslate, {t: t} = useLocale(), switchFillscreen = val => {
                 emit("fullscreen", val), document.body.style.overflow = val ? "hidden" : "auto";
             };
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
@@ -5808,7 +5808,28 @@
                 style: "padding-left: 3px"
             }, [ t("next.labelimg.saveLabel") ]) ]) ]), vue.createVNode("ul", {
                 class: [ _ns.be("header", "tool") ]
-            }, [ props.imageLength ? vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("第 "), props.imageIndex + 1, vue.createTextVNode(" 张") ]), vue.createVNode("em", {
+            }, [ vue.createVNode("li", {
+                class: "hover",
+                onClick: () => scaleTranslateManager.onResetScaleTranslate()
+            }, [ vue.createVNode("svg", {
+                t: "1725840994827",
+                class: "icon",
+                viewBox: "0 0 1024 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "6051",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M322.794667 445.205333a34.133333 34.133333 0 0 1 2.218666 45.824l-2.218666 2.432a34.133333 34.133333 0 0 1-45.824 2.218667l-2.432-2.218667-149.333334-149.333333a34.133333 34.133333 0 0 1-2.218666-45.824l2.218666-2.432 149.333334-149.333333a34.133333 34.133333 0 0 1 50.474666 45.824l-2.218666 2.432-91.050667 91.050666L640 285.866667c160.234667 0 290.133333 129.898667 290.133333 290.133333 0 158.016-126.314667 286.506667-283.477333 290.048L640 866.133333H234.666667a34.133333 34.133333 0 0 1-3.114667-68.117333L234.666667 797.866667h405.333333c122.538667 0 221.866667-99.328 221.866667-221.866667 0-120.533333-96.106667-218.602667-215.850667-221.781333L640 354.133333l-408.256-0.021333 91.050667 91.093333z",
+                "p-id": "6052"
+            }, null) ]), vue.createVNode("span", {
+                style: "padding-left: 3px"
+            }, [ t("next.labelimg.zoomRestore") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("缩放比例") ]), vue.createVNode("span", null, [ parseInt((100 * scaleTranslate.value.scale).toString()), vue.createTextVNode("%") ]), vue.createVNode("span", {
+                style: "padding: 0 10px;"
+            }, [ vue.createTextVNode("偏移量") ]), vue.createVNode("span", {
+                style: "min-width: 120px; text-align: left;"
+            }, [ vue.createTextVNode("X: "), scaleTranslate.value.x, vue.createTextVNode(", Y: "), scaleTranslate.value.y ]) ]), props.imageLength ? vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("第 "), props.imageIndex + 1, vue.createTextVNode(" 张") ]), vue.createVNode("em", {
                 style: "padding: 0 5px;"
             }, [ vue.createTextVNode("/") ]), vue.createVNode("span", null, [ vue.createTextVNode("共 "), props.imageLength, vue.createTextVNode(" 张") ]) ]) : null, vue.createVNode("li", {
                 style: "margin-right: 30px;",
@@ -5829,7 +5850,7 @@
                 }) ]),
                 default: () => vue.createVNode("ul", {
                     style: "font-size: 12px;white-space: nowrap;"
-                }, [ vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("W：") ]), vue.createVNode("span", null, [ vue.createTextVNode("鼠标移入图片中，长按W键，鼠标按下左键，移动鼠标开始绘制，鼠标抬起结束绘制") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("A：") ]), vue.createVNode("span", null, [ vue.createTextVNode("A键进入上一张图片进行标注") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("D：") ]), vue.createVNode("span", null, [ vue.createTextVNode("D键进入下一张图片进行标注") ]) ]) ])
+                }, [ vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("W：") ]), vue.createVNode("span", null, [ vue.createTextVNode("鼠标移入图片中，长按W键，鼠标按下左键，移动鼠标开始绘制，鼠标抬起结束绘制") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("A：") ]), vue.createVNode("span", null, [ vue.createTextVNode("A键进入上一张图片进行标注") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("D：") ]), vue.createVNode("span", null, [ vue.createTextVNode("D键进入下一张图片进行标注") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("Ctrl+鼠标滚轮：") ]), vue.createVNode("span", null, [ vue.createTextVNode("长按Ctrl+鼠标滚轮对图片进行缩放") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("Ctrl+鼠标左键：") ]), vue.createVNode("span", null, [ vue.createTextVNode("长按Ctrl+鼠标左键对图片进行拖拽移动") ]) ]) ])
             }) ]), props.isFullscreen ? vue.createVNode("li", {
                 class: "hover",
                 onClick: () => switchFillscreen(!1)
@@ -5974,6 +5995,100 @@
             return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
     });
+    class CanvasSceneDragZoom {
+        canvas;
+        canvasWidth;
+        canvasHeight;
+        ctx;
+        scaleFactor=1;
+        preScaleFactor=1;
+        offset={
+            x: 0,
+            y: 0
+        };
+        preOffset={
+            x: 0,
+            y: 0
+        };
+        mousePositioin={
+            x: 0,
+            y: 0
+        };
+        maxScale=8;
+        minScale=.5;
+        scaleStep=.1;
+        clickX=0;
+        clickY=0;
+        observers=[];
+        constructor(canvas) {
+            this.canvas = canvas, this.canvasWidth = canvas.width, this.canvasHeight = canvas.height, 
+            this.ctx = canvas.getContext("2d"), this.canvasMousedown = this.canvasMousedown.bind(this), 
+            this.canvasMousemove = this.canvasMousemove.bind(this), this.canvasMouseup = this.canvasMouseup.bind(this), 
+            this.canvas.addEventListener("mousedown", this.canvasMousedown), this.canvas.addEventListener("wheel", this.canvasMousewheel, {
+                passive: !1
+            }), window.addEventListener("wheel", this.onWindowWheel, {
+                passive: !1
+            });
+        }
+        notifyObservers(scale, offset) {
+            this.observers.forEach((listener => {
+                listener({
+                    scale: scale,
+                    ...offset
+                });
+            }));
+        }
+        changeZoom(callback) {
+            this.observers.push(callback);
+        }
+        reset() {
+            this.scaleFactor = 1, this.preScaleFactor = 1, this.offset = {
+                x: 0,
+                y: 0
+            }, this.preOffset = {
+                x: 0,
+                y: 0
+            }, this.mousePositioin = {
+                x: 0,
+                y: 0
+            }, this.zoom();
+        }
+        render() {
+            this.canvas.width = this.canvasWidth, this.notifyObservers(this.scaleFactor, this.offset);
+        }
+        zoom() {
+            const offset_x = this.mousePositioin.x - (this.mousePositioin.x - this.offset.x) * this.scaleFactor / this.preScaleFactor, offset_y = this.mousePositioin.y - (this.mousePositioin.y - this.offset.y) * this.scaleFactor / this.preScaleFactor;
+            this.offset.x = Math.ceil(offset_x), this.offset.y = Math.ceil(offset_y), this.render(), 
+            this.preScaleFactor = this.scaleFactor, this.preOffset.x = this.offset.x, this.preOffset.y = this.offset.y;
+        }
+        onWindowWheel=e => {
+            e.ctrlKey && e.preventDefault();
+        };
+        canvasMousewheel=event => {
+            event.preventDefault(), event.ctrlKey && (this.mousePositioin.x = event.offsetX, 
+            this.mousePositioin.y = event.offsetY, event.deltaY > 0 ? (this.scaleFactor = parseFloat((this.scaleFactor + this.scaleStep).toFixed(1)), 
+            this.scaleFactor > this.maxScale && (this.scaleFactor = this.maxScale)) : (this.scaleFactor = parseFloat((this.scaleFactor - this.scaleStep).toFixed(1)), 
+            this.scaleFactor < this.minScale && (this.scaleFactor = this.minScale)), this.zoom());
+        };
+        canvasMousedown(event) {
+            event.preventDefault(), 0 === event.button && event.ctrlKey && (this.clickX = event.offsetX, 
+            this.clickY = event.offsetY, this.canvas.addEventListener("mousemove", this.canvasMousemove), 
+            this.canvas.addEventListener("mouseup", this.canvasMouseup));
+        }
+        canvasMousemove(event) {
+            event.preventDefault(), event.ctrlKey && (this.offset.x = Math.ceil(this.preOffset.x + (event.offsetX - this.clickX)), 
+            this.offset.y = Math.ceil(this.preOffset.y + (event.offsetY - this.clickY)), this.render());
+        }
+        canvasMouseup(event) {
+            event.preventDefault(), event.ctrlKey && (this.preOffset.x = this.offset.x, this.preOffset.y = this.offset.y, 
+            this.canvas.removeEventListener("mousemove", this.canvasMousemove), this.canvas.removeEventListener("mouseup", this.canvasMouseup));
+        }
+        destroy() {
+            this.canvas.removeEventListener("mousedown", this.canvasMousedown), this.canvas.removeEventListener("mousemove", this.canvasMousemove), 
+            this.canvas.removeEventListener("mouseup", this.canvasMouseup), this.canvas.removeEventListener("wheel", this.canvasMousewheel), 
+            window.removeEventListener("wheel", this.onWindowWheel);
+        }
+    }
     const {hexToRgb: hexToRgb} = useChangeColor();
     var DraggableRect = vue.defineComponent({
         props: {
@@ -5992,7 +6107,7 @@
         },
         emits: [ "draggle-resize", "contextmenu" ],
         setup(props, {emit: emit}) {
-            const isDraggle = vue.ref(!1), isResizeCorner = vue.ref({
+            const scaleTranslate = vue.inject("scaleTranslateManager", {}).scaleTranslate, isDraggle = vue.ref(!1), isResizeCorner = vue.ref({
                 topLeft: !1,
                 topCenter: !1,
                 topRight: !1,
@@ -6012,66 +6127,68 @@
                 isResizeCorner.value.rightCenter = !1, isResizeCorner.value.bottomLeft = !1, isResizeCorner.value.bottomCenter = !1, 
                 isResizeCorner.value.bottomRight = !1, emit("draggle-resize", rect.value);
             }, onMousemove = e => {
+                const {scale: scale, x: x, y: y} = scaleTranslate.value, min_size = 30 / scale, startX = Math.ceil(rect.value.startX * scale + x), startY = Math.ceil(rect.value.startY * scale + y);
                 if (isDraggle.value) {
-                    const newLeft = e.clientX - parentRect.left - draggleOffset.value.diff_x, newTop = e.clientY - parentRect.top - draggleOffset.value.diff_y;
-                    rect.value.startX = Math.max(0, Math.min(newLeft, parentRect.width - rect.value.rectWidth)), 
-                    rect.value.startY = Math.max(0, Math.min(newTop, parentRect.height - rect.value.rectHeight));
+                    const newLeft = e.clientX - parentRect.left - draggleOffset.value.diff_x, newTop = e.clientY - parentRect.top - draggleOffset.value.diff_y, offsetX = Math.ceil((newLeft - x) / scale), offsetY = Math.ceil((newTop - y) / scale);
+                    rect.value.startX = Math.max(0, Math.min(offsetX, parentRect.width - rect.value.rectWidth)), 
+                    rect.value.startY = Math.max(0, Math.min(offsetY, parentRect.height - rect.value.rectHeight));
                 }
                 if (isResizeCorner.value.bottomCenter) {
-                    let newHeight = e.clientY - parentRect.top - rect.value.startY;
-                    newHeight < 30 && (newHeight = 30), newHeight + rect.value.startY > parentRect.height && (newHeight = parentRect.height - rect.value.startY), 
+                    let newHeight = Math.floor((e.clientY - parentRect.top - startY) / scale);
+                    newHeight < min_size && (newHeight = min_size), newHeight + rect.value.startY > parentRect.height && (newHeight = parentRect.height - rect.value.startY), 
                     rect.value.rectHeight = newHeight;
                 }
                 if (isResizeCorner.value.topCenter) {
-                    let newTop = e.clientY - parentRect.top, newHeight = rect.value.startY - newTop + rect.value.rectHeight;
+                    let newTop = Math.floor((e.clientY - parentRect.top - y) / scale), newHeight = rect.value.startY - newTop + rect.value.rectHeight;
                     if (newTop < 0) return;
-                    if (newHeight < 30) return;
+                    if (newHeight < min_size) return;
                     rect.value.rectHeight = newHeight, rect.value.startY = Math.max(0, Math.min(newTop, parentRect.height - rect.value.rectHeight));
                 }
                 if (isResizeCorner.value.leftCenter) {
-                    let newLeft = e.clientX - parentRect.left, newWidth = rect.value.startX - newLeft + rect.value.rectWidth;
+                    let newLeft = Math.floor((e.clientX - parentRect.left - x) / scale), newWidth = rect.value.startX - newLeft + rect.value.rectWidth;
                     if (newLeft < 0) return;
-                    if (newWidth < 30) return;
+                    if (newWidth < min_size) return;
                     rect.value.startX = Math.max(0, Math.min(newLeft, parentRect.width - rect.value.rectWidth)), 
                     rect.value.rectWidth = newWidth;
                 }
                 if (isResizeCorner.value.rightCenter) {
-                    let newWidth = e.clientX - parentRect.left - rect.value.startX;
-                    newWidth < 30 && (newWidth = 30), newWidth + rect.value.startX > parentRect.width && (newWidth = parentRect.width - rect.value.startX), 
+                    let newWidth = Math.floor((e.clientX - parentRect.left - startX) / scale);
+                    newWidth < min_size && (newWidth = min_size), newWidth + rect.value.startX > parentRect.width && (newWidth = parentRect.width - rect.value.startX), 
                     rect.value.rectWidth = newWidth;
                 }
                 if (isResizeCorner.value.bottomRight) {
-                    let newWidth = e.clientX - parentRect.left - rect.value.startX, newHeight = e.clientY - parentRect.top - rect.value.startY;
-                    newWidth < 30 && (newWidth = 30), newHeight < 30 && (newHeight = 30), newWidth + rect.value.startX > parentRect.width && (newWidth = parentRect.width - rect.value.startX), 
+                    let newWidth = Math.floor((e.clientX - parentRect.left - startX) / scale), newHeight = Math.floor((e.clientY - parentRect.top - startY) / scale);
+                    newWidth < min_size && (newWidth = min_size), newHeight < min_size && (newHeight = min_size), 
+                    newWidth + rect.value.startX > parentRect.width && (newWidth = parentRect.width - rect.value.startX), 
                     newHeight + rect.value.startY > parentRect.height && (newHeight = parentRect.height - rect.value.startY), 
                     rect.value.rectWidth = newWidth, rect.value.rectHeight = newHeight;
                 }
                 if (isResizeCorner.value.bottomLeft) {
-                    let newLeft = e.clientX - parentRect.left, newWidth = rect.value.startX - newLeft + rect.value.rectWidth, newHeight = e.clientY - parentRect.top - rect.value.startY;
+                    let newLeft = Math.floor((e.clientX - parentRect.left - x) / scale), newWidth = rect.value.startX - newLeft + rect.value.rectWidth, newHeight = Math.floor((e.clientY - parentRect.top - startY) / scale);
                     if (newLeft < 0) return;
-                    if (newWidth < 30) return;
-                    newHeight < 30 && (newHeight = 30), newHeight + rect.value.startY > parentRect.height && (newHeight = parentRect.height - rect.value.startY), 
+                    if (newWidth < min_size) return;
+                    newHeight < min_size && (newHeight = min_size), newHeight + rect.value.startY > parentRect.height && (newHeight = parentRect.height - rect.value.startY), 
                     rect.value.startX = Math.max(0, Math.min(newLeft, parentRect.width - rect.value.rectWidth)), 
                     rect.value.rectWidth = newWidth, rect.value.rectHeight = newHeight;
                 }
                 if (isResizeCorner.value.topLeft) {
-                    let newTop = e.clientY - parentRect.top, newHeight = rect.value.startY - newTop + rect.value.rectHeight;
+                    let newTop = Math.floor((e.clientY - parentRect.top - y) / scale), newHeight = rect.value.startY - newTop + rect.value.rectHeight;
                     if (newTop < 0) return;
-                    if (newHeight < 30) return;
+                    if (newHeight < min_size) return;
                     rect.value.rectHeight = newHeight, rect.value.startY = Math.max(0, Math.min(newTop, parentRect.height - rect.value.rectHeight));
-                    let newLeft = e.clientX - parentRect.left, newWidth = rect.value.startX - newLeft + rect.value.rectWidth;
+                    let newLeft = Math.floor((e.clientX - parentRect.left - x) / scale), newWidth = rect.value.startX - newLeft + rect.value.rectWidth;
                     if (newLeft < 0) return;
-                    if (newWidth < 30) return;
+                    if (newWidth < min_size) return;
                     rect.value.startX = Math.max(0, Math.min(newLeft, parentRect.width - rect.value.rectWidth)), 
                     rect.value.rectWidth = newWidth;
                 }
                 if (isResizeCorner.value.topRight) {
-                    let newTop = e.clientY - parentRect.top, newHeight = rect.value.startY - newTop + rect.value.rectHeight;
+                    let newTop = Math.floor((e.clientY - parentRect.top - y) / scale), newHeight = rect.value.startY - newTop + rect.value.rectHeight;
                     if (newTop < 0) return;
-                    if (newHeight < 30) return;
+                    if (newHeight < min_size) return;
                     rect.value.rectHeight = newHeight, rect.value.startY = Math.max(0, Math.min(newTop, parentRect.height - rect.value.rectHeight));
-                    let newWidth = e.clientX - parentRect.left - rect.value.startX;
-                    newWidth < 30 && (newWidth = 30), newWidth + rect.value.startX > parentRect.width && (newWidth = parentRect.width - rect.value.startX), 
+                    let newWidth = Math.floor((e.clientX - parentRect.left - startX) / scale);
+                    newWidth < min_size && (newWidth = min_size), newWidth + rect.value.startX > parentRect.width && (newWidth = parentRect.width - rect.value.startX), 
                     rect.value.rectWidth = newWidth;
                 }
             };
@@ -6096,11 +6213,23 @@
             };
         },
         render() {
-            const _ns = vue.inject("ns", {}), props = this.$props;
+            const _ns = vue.inject("ns", {}), scaleTranslate = vue.inject("scaleTranslateManager", {}).scaleTranslate, props = this.$props;
             return vue.createVNode("div", {
                 class: [ _ns.b("draggable-rect") ],
                 style: (() => {
-                    const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = this.rect, style = {
+                    const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = ((rect, scaleOffset) => {
+                        const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect, {scale: scale, x: x, y: y} = scaleOffset;
+                        return {
+                            startX: Math.ceil(startX * scale + x),
+                            startY: Math.ceil(startY * scale + y),
+                            rectWidth: Math.ceil(rectWidth * scale),
+                            rectHeight: Math.ceil(rectHeight * scale),
+                            canvasWidth: rect.canvasWidth,
+                            canvasHeight: rect.canvasHeight,
+                            originWidth: rect.originWidth,
+                            originHeight: rect.originHeight
+                        };
+                    })(this.rect, scaleTranslate.value), style = {
                         top: startY + "px",
                         left: startX + "px",
                         width: rectWidth + "px",
@@ -6161,7 +6290,7 @@
         },
         emits: [ "change" ],
         setup(props, {emit: emit, expose: expose}) {
-            const ns = vue.inject("ns", {}), _emit = vue.inject("_emit", null), mainBasaeRef = vue.ref(), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), canvasRectRef = vue.ref(), labels = vue.ref([]), drawBaseCanvas = vue.ref({}), formatLabelsType = () => {
+            const ns = vue.inject("ns", {}), _emit = vue.inject("_emit", null), scaleTranslateManager = vue.inject("scaleTranslateManager", {}), mainBasaeRef = vue.ref(), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), canvasRectRef = vue.ref(), labels = vue.ref([]), drawBaseCanvas = vue.ref({}), canvasDragZoom = vue.ref(), formatLabelsType = () => {
                 const _labels = deepClone(labels.value);
                 let yolo_label = [];
                 return {
@@ -6223,9 +6352,9 @@
                             return scale_rects;
                         })(labels.value, canvasHeight);
                         const {updateLabels: updateLabels, addDrawRect: addDrawRect, hitCanvasLabel: hitCanvasLabel} = (options => {
-                            const {canvas: canvas, ctx: ctx, labels: labels, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = options, updateLabels = scaleOffset => {
-                                scaleOffset && (canvas.width = canvasWidth, ctx.save(), ctx.translate(scaleOffset.x, scaleOffset.y), 
-                                ctx.scale(scaleOffset.scale, scaleOffset.scale)), ctx.clearRect(0, 0, canvasWidth, canvasHeight), 
+                            const {canvas: canvas, ctx: ctx, labels: labels, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, scaleOffset: scaleOffset} = options, updateLabels = () => {
+                                canvas.width = canvasWidth, scaleOffset.value && (ctx.save(), ctx.translate(scaleOffset.value.x, scaleOffset.value.y), 
+                                ctx.scale(scaleOffset.value.scale, scaleOffset.value.scale)), ctx.clearRect(0, 0, canvasWidth, canvasHeight), 
                                 ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
                                 for (let i = 0; i < labels.length; i++) {
                                     const rect = labels[i], {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight, type: type} = rect, color = colors$1[type % colors$1.length];
@@ -6265,7 +6394,8 @@
                             canvasWidth: canvasWidth,
                             canvasHeight: canvasHeight,
                             labels: labels.value,
-                            scaleFactor: scaleFactor
+                            scaleFactor: scaleFactor,
+                            scaleOffset: scaleTranslateManager.scaleTranslate
                         });
                         drawBaseCanvas.value.updateLabels = updateLabels, drawBaseCanvas.value.addDrawRect = addDrawRect, 
                         drawBaseCanvas.value.hitCanvasLabel = hitCanvasLabel;
@@ -6332,30 +6462,45 @@
                             originWidth: originWidth,
                             originHeight: originHeight
                         }, ((rect, {endX: endX, endY: endY}) => {
-                            activate_add_label.value = rect, drawBaseCanvas.value.addDrawRect(rect), updateContextmenuLabelFixed(endX, endY, rect);
+                            activate_add_label.value = rect;
+                            const newRect = ((rect, scaleOffset) => {
+                                const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect, {scale: scale, x: x, y: y} = scaleOffset;
+                                return {
+                                    startX: Math.ceil((startX - x) / scale),
+                                    startY: Math.ceil((startY - y) / scale),
+                                    rectWidth: Math.ceil(rectWidth / scale),
+                                    rectHeight: Math.ceil(rectHeight / scale),
+                                    canvasWidth: rect.canvasWidth,
+                                    canvasHeight: rect.canvasHeight,
+                                    originWidth: rect.originWidth,
+                                    originHeight: rect.originHeight
+                                };
+                            })(rect, scaleTranslateManager.scaleTranslate.value);
+                            drawBaseCanvas.value.addDrawRect(newRect), updateContextmenuLabelFixed(endX, endY, newRect);
                         }), (() => {
                             onCloseDraggableRectFixed();
                         }));
-                        drawBaseCanvas.value.clearCanvasRect = clearCanvas, drawBaseCanvas.value.removeEventAll = removeEventAll;
+                        drawBaseCanvas.value.clearCanvasRect = clearCanvas, drawBaseCanvas.value.removeEventAll = removeEventAll, 
+                        canvasDragZoom.value = new CanvasSceneDragZoom(canvasBaseRef.value), canvasDragZoom.value.changeZoom((scaleOffset => {
+                            scaleTranslateManager.onChangeScaleTranslate(scaleOffset), drawBaseCanvas.value.updateLabels();
+                        }));
                     }, image.onerror = () => {
                         loadingImage.value = !1;
                     };
                 }
                 canvasBaseRef.value.addEventListener("contextmenu", (e => {
                     e.preventDefault();
-                    const x = e.offsetX, y = e.offsetY, {hit_rect: hit_rect} = drawBaseCanvas.value.hitCanvasLabel(x, y);
+                    const offsetX = e.offsetX, offsetY = e.offsetY, {scale: scale, x: x, y: y} = scaleTranslateManager.scaleTranslate.value, new_x = Math.floor((offsetX - x) / scale), new_y = Math.floor((offsetY - y) / scale), {hit_rect: hit_rect} = drawBaseCanvas.value.hitCanvasLabel(new_x, new_y);
                     onCloseContentmenuLabel(), onCloseDraggableRectFixed(), hit_rect && vue.nextTick((() => {
-                        updateContextmenuLabelFixed(x, y, hit_rect);
+                        updateContextmenuLabelFixed(offsetX, offsetY, hit_rect);
                     }));
                 })), canvasBaseRef.value.addEventListener("click", (e => {
                     if (e.ctrlKey) return;
-                    const x = e.offsetX, y = e.offsetY, {hit_rect: hit_rect, hit_index: hit_index, color: color} = drawBaseCanvas.value.hitCanvasLabel(x, y);
+                    const offsetX = e.offsetX, offsetY = e.offsetY, {scale: scale, x: x, y: y} = scaleTranslateManager.scaleTranslate.value, new_x = Math.floor((offsetX - x) / scale), new_y = Math.floor((offsetY - y) / scale), {hit_rect: hit_rect, hit_index: hit_index, color: color} = drawBaseCanvas.value.hitCanvasLabel(new_x, new_y);
                     onCloseDraggableRectFixed(), onCloseContentmenuLabel(), hit_rect && vue.nextTick((() => {
-                        updateDraggableRectFixed(x, y, hit_rect, hit_index, color);
+                        updateDraggableRectFixed(offsetX, offsetY, hit_rect, hit_index, color);
                     }));
                 }));
-            }, onWindowWheel = e => {
-                e.ctrlKey && e.preventDefault();
             };
             vue.onMounted((() => {
                 vue.watch((() => props.rowInfo), (info => {
@@ -6373,11 +6518,9 @@
                         const rowInfo = vue.toRaw(props.rowInfo);
                         renderImageLabel(rowInfo);
                     }
-                })), window.addEventListener("wheel", onWindowWheel, {
-                    passive: !1
-                });
+                }));
             })), vue.onUnmounted((() => {
-                drawBaseCanvas.value.removeEventAll?.(), window.removeEventListener("wheel", onWindowWheel);
+                drawBaseCanvas.value.removeEventAll?.(), canvasDragZoom.value.destroy();
             }));
             const contextmenuLabelFixed = vue.ref({
                 show: !1,
@@ -6464,6 +6607,9 @@
                         const rowInfo = vue.toRaw(props.rowInfo);
                         renderImageLabel(rowInfo);
                     }));
+                },
+                resetScaleOffset: () => {
+                    canvasDragZoom.value.reset();
                 }
             });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextSpinLoading, {
@@ -6663,7 +6809,11 @@
                     label_txt: label_txt
                 }, (imageItem => {
                     labelImages.value[activateNodeIndex.value] = imageItem || node, activateNodeIndex.value = index, 
-                    loading.value = !1;
+                    loading.value = !1, scaleTranslate.value = {
+                        scale: 1,
+                        x: 0,
+                        y: 0
+                    };
                 }), (() => {
                     loading.value = !1;
                 })), !0);
@@ -6696,8 +6846,20 @@
                 isFullscreen.value = val, updateMainContentHeight(), vue.nextTick((() => {
                     canvasContextRef.value.rerenderImage();
                 }));
-            };
-            expose({
+            }, scaleTranslate = vue.ref({
+                scale: 1,
+                x: 0,
+                y: 0
+            });
+            vue.provide("scaleTranslateManager", {
+                scaleTranslate: scaleTranslate,
+                onChangeScaleTranslate: val => {
+                    scaleTranslate.value = val;
+                },
+                onResetScaleTranslate: () => {
+                    canvasContextRef.value.resetScaleOffset();
+                }
+            }), expose({
                 convertToLabel: convertToLabel,
                 canvertToCanvas: canvertToCanvas
             });
@@ -7647,7 +7809,7 @@
         })(app);
     };
     var index = {
-        version: "0.3.6",
+        version: "0.3.7",
         install: install
     };
     exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, exports.NextCrudTableVirtualized = NextCrudTableVirtualized, 
@@ -7694,7 +7856,7 @@
     }), exports.useGetDerivedNamespace = useGetDerivedNamespace, exports.useLanguage = (locale, lang) => {
         const localeRef = vue.isRef(locale) ? locale : vue.ref(locale), nextLang = localeLang[lang] || localeLang["zh-cn"];
         localeRef.value.name = lang, localeRef.value.next = nextLang.next;
-    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.3.6", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.3.7", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });