next-element-vue 0.3.7 → 0.3.8

package/dist/index.css

@@ -13,4 +13,4 @@
 .next-video-player{border-radius:5px;height:100%;min-height:200px;overflow:hidden;position:relative;width:100%}.next-video-player .vjs-default-skin{height:100%!important;left:0;min-height:200px;padding:unset!important;position:absolute;top:0;width:100%}.next-video-player .screemshot-btn{align-items:center;background-color:rgba(0,0,0,.6);border-radius:50%;cursor:pointer;display:inline-flex;height:45px;justify-content:center;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:all .5s ease-in-out;width:45px}.next-video-player .screemshot-btn i{transition:all .3s ease-in-out}.next-video-player .screemshot-btn:hover i{transform:scale(1.1)}.next-video-player:hover .screemshot-btn{opacity:1}.next-video-player-recongition{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:99}
 .next-drag-resize{position:relative}
 .next-labelimg-loading .next-spin-loading-mask__text{text-shadow:unset}.next-labelimg{border:1px solid #eee;border-radius:3px;box-sizing:border-box;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.next-labelimg-header{box-shadow:0 0 4px 0 rgba(0,0,0,.15);font-size:12px;justify-content:space-between;padding:10px 12px}.next-labelimg-header,.next-labelimg-header__tool,.next-labelimg-header__tool>li{align-items:center;display:flex}.next-labelimg-header__tool>li{cursor:pointer;margin:0 6px}.next-labelimg-header__tool>li.hover:hover{color:var(--el-color-primary)}.next-labelimg-header__tool>li.hover:hover svg{fill:var(--el-color-primary)}.next-labelimg-main{align-items:center;display:flex;justify-content:space-between}.next-labelimg-main__content.el-scrollbar{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADZJREFUOE9jZKAQMFKon2HUAAYah8HZs2f/MzAw3DY2NlbDFVt4Y4FiA4hJI6PpgNbpgJhYAAB1/AoRxXg31wAAAABJRU5ErkJggg==)}.next-labelimg-main__content.el-scrollbar .el-scrollbar__wrap{width:100%}.next-labelimg-main__content{align-items:center;display:flex;flex:1 1 100%;justify-content:center}.next-labelimg-main .next-labelimg-loading{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.next-labelimg-main .next-labelimg-canvas{border:1px solid #eee;height:100%;min-height:500px;position:relative;width:100%}.next-labelimg-main .next-labelimg-canvas__context{height:100%;position:absolute;width:100%;z-index:3}.next-labelimg-main .next-labelimg-canvas__rect{height:100%;position:absolute;width:100%;z-index:1}.next-labelimg-main .next-labelimg-right{box-sizing:border-box;flex:0 0 200px;height:inherit;padding:10px;text-align:left}.next-labelimg-main .next-labelimg-right>ul{border-radius:5px;box-shadow:0 0 4px 0 rgba(0,0,0,.15);box-sizing:border-box;height:100%;padding:10px}.next-labelimg-main .next-labelimg-right>ul li{align-items:center;border:1px solid #ddd;border-radius:3px;display:flex;font-size:12px;justify-content:space-between;line-height:20px;margin:5px 0;padding:3px 6px}.next-labelimg-main .next-labelimg-right>ul li .el-icon{cursor:pointer}.next-labelimg-main .next-labelimg-right>ul li:hover{border:1px solid var(--el-color-primary)}.next-labelimg-main .next-labelimg-right>ul li .label-line{border-radius:3px;display:inline-block;height:10px;margin-right:6px;width:3px}.next-labelimg-footer{align-items:center;display:flex;justify-content:space-between;padding:20px 12px 8px}.next-labelimg-footer .left-right,.next-labelimg-footer .next-labelimg-footer__left,.next-labelimg-footer .next-labelimg-footer__right{align-items:center;display:flex;flex:0 0 50px;justify-content:center}.next-labelimg-footer .left-right .el-icon:hover,.next-labelimg-footer .next-labelimg-footer__left .el-icon:hover,.next-labelimg-footer .next-labelimg-footer__right .el-icon:hover{cursor:pointer}.next-labelimg-footer__center{flex:1 1 auto}.next-labelimg-footer__center--list{align-items:center;display:flex;flex-wrap:nowrap;justify-content:flex-start;min-height:80px}.next-labelimg-footer__center--list>li{background-color:#fff;border:1px solid #eee;box-sizing:border-box;cursor:pointer;flex:0 0 100px;height:80px;margin:0 5px;overflow:hidden;text-align:center}.next-labelimg-footer__center--list>li.is-activate,.next-labelimg-footer__center--list>li:hover{border:1px solid var(--el-color-primary)}.next-labelimg .next-labelimg-contextmenu-label{background-color:#fff;border-radius:8px;box-shadow:0 0 50px 3px #ccc;padding:10px 15px;position:fixed;transition:all .3s;white-space:nowrap;z-index:9999}.next-labelimg .next-labelimg-contextmenu-label>.label-head{align-items:center;display:flex;font-size:14px;justify-content:space-between;padding-bottom:10px}.next-labelimg .next-labelimg-contextmenu-label>.label-head .el-icon{transition:all .3s}.next-labelimg .next-labelimg-contextmenu-label>.label-head .el-icon:hover{cursor:pointer;transform:rotate(90deg)}.next-labelimg .next-labelimg-contextmenu-label>.label-main{scrollbar-face-color:transparent;scrollbar-3dlight-color:#aaa;scrollbar-highlight-color:#aaa;scrollbar-shadow-color:#aaa;scrollbar-base-color:#aaa;scrollbar-track-color:transparent;scrollbar-arrow-color:transparent;max-height:300px;overflow-y:auto}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar{background-color:transparent;border-radius:6px;height:10px;max-width:6px;width:6px}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-thumb{background-color:hsla(0,0%,67%,.2);border-radius:6px}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-thumb:hover{background-color:#aaa}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-thumb:inactive{background-color:#eee}.next-labelimg .next-labelimg-contextmenu-label>.label-main:hover::-webkit-scrollbar-thumb{background-color:hsla(0,0%,67%,.5)}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-track-piece{background-color:transparent;border-radius:6px}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-resizer,.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-corner{background-color:transparent}.next-labelimg .next-labelimg-contextmenu-label>.label-main>li{align-items:center;display:flex;font-size:12px;padding:3px 0}.next-labelimg .next-labelimg-contextmenu-label>.label-main>li .label-line{border-radius:3px;display:inline-block;height:10px;margin-right:6px;width:3px}.next-labelimg .next-labelimg-contextmenu-label>.label-main>li.activate-label{color:var(--el-color-primary)}.next-labelimg .next-labelimg-draggable-rect{background-color:hsla(0,0%,99%,.5);cursor:move;position:absolute;z-index:999}.next-labelimg .next-labelimg-draggable-rect__resize{height:100%;position:relative;width:100%}.next-labelimg .next-labelimg-draggable-rect__resize .bottom-center,.next-labelimg .next-labelimg-draggable-rect__resize .bottom-left,.next-labelimg .next-labelimg-draggable-rect__resize .bottom-right,.next-labelimg .next-labelimg-draggable-rect__resize .dot,.next-labelimg .next-labelimg-draggable-rect__resize .left-center,.next-labelimg .next-labelimg-draggable-rect__resize .right-center,.next-labelimg .next-labelimg-draggable-rect__resize .top-center,.next-labelimg .next-labelimg-draggable-rect__resize .top-left,.next-labelimg .next-labelimg-draggable-rect__resize .top-right{background-color:var(--el-color-primary);border:1px solid var(--el-color-primary);box-sizing:border-box;height:10px;position:absolute;width:10px}.next-labelimg .next-labelimg-draggable-rect__resize .top-left{cursor:nw-resize;left:-5px;top:-5px}.next-labelimg .next-labelimg-draggable-rect__resize .top-center{cursor:s-resize;left:50%;top:-5px;transform:translateX(-50%)}.next-labelimg .next-labelimg-draggable-rect__resize .top-right{cursor:sw-resize;right:-5px;top:-5px}.next-labelimg .next-labelimg-draggable-rect__resize .left-center{cursor:w-resize;left:-5px;top:50%;transform:translateY(-50%)}.next-labelimg .next-labelimg-draggable-rect__resize .right-center{cursor:w-resize;right:-5px;top:50%;transform:translateY(-50%)}.next-labelimg .next-labelimg-draggable-rect__resize .bottom-left{bottom:-5px;cursor:sw-resize;left:-5px}.next-labelimg .next-labelimg-draggable-rect__resize .bottom-center{bottom:-5px;cursor:s-resize;left:50%;transform:translateX(-50%)}.next-labelimg .next-labelimg-draggable-rect__resize .bottom-right{bottom:-5px;cursor:nw-resize;right:-5px}.next-labelimg-fullscreen{background-color:#fff;bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;transition:all .3s;z-index:999}.next-labelimg-preview{display:inline-block;height:100%}
-.next-labelme-loading .next-spin-loading-mask__text{text-shadow:unset}.next-labelme-fullscreen{background-color:#fff;bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;transition:all .3s;z-index:999}.next-labelme{border:1px solid #eee;border-radius:3px;box-sizing:border-box;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.next-labelme-header{box-shadow:0 0 4px 0 rgba(0,0,0,.15);font-size:12px;justify-content:space-between;padding:10px 12px}.next-labelme-header,.next-labelme-header__tool,.next-labelme-header__tool>li{align-items:center;display:flex}.next-labelme-header__tool>li{cursor:pointer;justify-content:center;margin:0 6px;text-align:center}.next-labelme-header__tool>li>.label-text{line-height:normal;margin:0;padding:5px 8px}.next-labelme-header__tool>li.tool-item{flex-direction:column}.next-labelme-header__tool>li.tool-item:hover{color:var(--el-color-primary)}.next-labelme-header__tool>li.tool-item:hover svg{fill:var(--el-color-primary)}.next-labelme-main{align-items:center;display:flex;justify-content:space-between}.next-labelme-main__content{align-items:center;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADZJREFUOE9jZKAQMFKon2HUAAYah8HZs2f/MzAw3DY2NlbDFVt4Y4FiA4hJI6PpgNbpgJhYAAB1/AoRxXg31wAAAABJRU5ErkJggg==);display:flex;flex:1 1 100%;height:100%;justify-content:center}.next-labelme-main .next-labelme-loading{align-items:center;display:flex;justify-content:center;width:100%}.next-labelme-main .next-labelme-canvas{height:100%;min-height:500px;position:relative;width:100%}.next-labelme-main .next-labelme-canvas__context{height:100%;position:absolute;width:100%;z-index:3}.next-labelme-main .next-labelme-canvas__rect{height:100%;position:absolute;width:100%;z-index:1}.next-labelme-footer{align-items:center;display:flex;justify-content:space-between;padding:20px 12px 8px}.next-labelme-footer .left-right,.next-labelme-footer .next-labelme-footer__left,.next-labelme-footer .next-labelme-footer__right{align-items:center;display:flex;flex:0 0 50px;justify-content:center}.next-labelme-footer .left-right .el-icon:hover,.next-labelme-footer .next-labelme-footer__left .el-icon:hover,.next-labelme-footer .next-labelme-footer__right .el-icon:hover{cursor:pointer}.next-labelme-footer__center{flex:1 1 auto}.next-labelme-footer__center--list{align-items:center;display:flex;flex-wrap:nowrap;justify-content:flex-start;min-height:80px}.next-labelme-footer__center--list>li{background-color:#fff;border:1px solid #eee;box-sizing:border-box;cursor:pointer;flex:0 0 100px;height:80px;margin:0 5px;overflow:hidden;text-align:center}.next-labelme-footer__center--list>li.is-activate,.next-labelme-footer__center--list>li:hover{border:1px solid var(--el-color-primary)}
+.next-labelme-loading .next-spin-loading-mask__text{text-shadow:unset}.next-labelme-fullscreen{background-color:#fff;bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;transition:all .3s;z-index:999}.next-labelme{border:1px solid #eee;border-radius:3px;box-sizing:border-box;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.next-labelme-header{box-shadow:0 0 4px 0 rgba(0,0,0,.15);font-size:12px;justify-content:space-between;padding:10px 12px}.next-labelme-header,.next-labelme-header__tool,.next-labelme-header__tool>li{align-items:center;display:flex}.next-labelme-header__tool>li{cursor:pointer;justify-content:center;margin:0 6px;text-align:center}.next-labelme-header__tool>li>.label-text{line-height:normal;margin:0;padding:5px 8px}.next-labelme-header__tool>li.tool-item{flex-direction:column}.next-labelme-header__tool>li.tool-item:hover{color:var(--el-color-primary)}.next-labelme-header__tool>li.tool-item:hover svg{fill:var(--el-color-primary)}.next-labelme-main{align-items:center;display:flex;justify-content:space-between}.next-labelme-main__content{align-items:center;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADZJREFUOE9jZKAQMFKon2HUAAYah8HZs2f/MzAw3DY2NlbDFVt4Y4FiA4hJI6PpgNbpgJhYAAB1/AoRxXg31wAAAABJRU5ErkJggg==);display:flex;flex:1 1 100%;height:100%;justify-content:center}.next-labelme-main .next-labelme-loading{align-items:center;display:flex;justify-content:center;width:100%}.next-labelme-main .next-labelme-canvas{border:1px solid #eee;height:100%;min-height:500px;position:relative;width:100%}.next-labelme-main .next-labelme-canvas__context{height:100%;position:absolute;width:100%;z-index:3}.next-labelme-main .next-labelme-canvas__rect{height:100%;position:absolute;width:100%;z-index:1}.next-labelme-footer{align-items:center;display:flex;justify-content:space-between;padding:20px 12px 8px}.next-labelme-footer .left-right,.next-labelme-footer .next-labelme-footer__left,.next-labelme-footer .next-labelme-footer__right{align-items:center;display:flex;flex:0 0 50px;justify-content:center}.next-labelme-footer .left-right .el-icon:hover,.next-labelme-footer .next-labelme-footer__left .el-icon:hover,.next-labelme-footer .next-labelme-footer__right .el-icon:hover{cursor:pointer}.next-labelme-footer__center{flex:1 1 auto}.next-labelme-footer__center--list{align-items:center;display:flex;flex-wrap:nowrap;justify-content:flex-start;min-height:80px}.next-labelme-footer__center--list>li{background-color:#fff;border:1px solid #eee;box-sizing:border-box;cursor:pointer;flex:0 0 100px;height:80px;margin:0 5px;overflow:hidden;text-align:center}.next-labelme-footer__center--list>li.is-activate,.next-labelme-footer__center--list>li:hover{border:1px solid var(--el-color-primary)}

package/dist/index.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.3.7 v
- * 发布日期：2024-09-21
+ * 当前版本：0.3.8 v
+ * 发布日期：2024-09-26
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -4024,7 +4024,11 @@ var TableColumnOperations = defineComponent({
             const {operationsBtnPlain: operationsBtnPlain, operationsBtnText: operationsBtnText} = options;
             return operationsBtnText || operationsBtnPlain;
         })), renderContent = () => {
-            const btnText = options.operationsBtnText, btnPlain = options.operationsBtnPlain, btnSize = options.operationsBtnSize;
+            const btnText = options.operationsBtnText, btnPlain = options.operationsBtnPlain, btnSize = options.operationsBtnSize, btnCfg = {
+                text: btnText,
+                plain: btnPlain,
+                size: btnSize
+            };
             return createVNode(ElTableColumn, {
                 fixed: "right",
                 label: t("next.table.operation"),
@@ -4032,10 +4036,9 @@ var TableColumnOperations = defineComponent({
                 headerAlign: valueExist(options.operationsHeaderAlign, options.headerAlign),
                 align: valueExist(options.operationsColumnAlign, options.cellAlign)
             }, {
-                default: scoped => createVNode(Fragment, null, [ slots["operation-column-prefix"]?.(scoped, {
-                    text: btnText,
-                    plain: btnPlain,
-                    size: btnSize
+                default: scoped => createVNode(Fragment, null, [ slots["operation-column-prefix"]?.({
+                    scoped: scoped,
+                    btn: btnCfg
                 }), options.editBtn ? createVNode(ElTooltip, {
                     enterable: !1,
                     effect: "dark",
@@ -4115,10 +4118,9 @@ var TableColumnOperations = defineComponent({
                         }),
                         default: () => t("next.table.delete")
                     }) ]
-                }) : null, slots["operation-column-suffix"]?.(scoped, {
-                    text: btnText,
-                    plain: btnPlain,
-                    size: btnSize
+                }) : null, slots["operation-column-suffix"]?.({
+                    scoped: scoped,
+                    btn: btnCfg
                 }) ])
             });
         };
@@ -6604,12 +6606,14 @@ var DraggableRect = defineComponent({
                             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);
+                            const scale = scaleOffset.value?.scale || 1, fontSize = 14 / scale, fontPadding = 6 / scale, lineWidth = 2 / scale;
                             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];
-                                if (ctx.font = "bold 14px serif", ctx.textBaseline = "top", ctx.save(), ctx.strokeStyle = color, 
-                                ctx.strokeRect(startX, startY, rectWidth, rectHeight), isValueExist(rect.typeName) || isValueExist(rect.type)) {
+                                if (ctx.font = `bold ${fontSize}px serif`, ctx.textBaseline = "top", ctx.save(), 
+                                ctx.strokeStyle = color, ctx.lineWidth = lineWidth, ctx.strokeRect(startX, startY, rectWidth, rectHeight), 
+                                isValueExist(rect.typeName) || isValueExist(rect.type)) {
                                     const text = rect.typeName || rect.type;
-                                    ctx.fillStyle = color, ctx.fillText(text, startX + 6, startY + 6);
+                                    ctx.fillStyle = color, ctx.fillText(text, startX + fontPadding, startY + fontPadding);
                                 }
                                 ctx.restore();
                             }
@@ -6617,8 +6621,10 @@ var DraggableRect = defineComponent({
                         return updateLabels(), {
                             updateLabels: updateLabels,
                             addDrawRect: (rect, color = "#f30635") => {
-                                const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect;
-                                ctx.save(), ctx.strokeStyle = color, ctx.strokeRect(startX, startY, rectWidth, rectHeight), 
+                                const scale = scaleOffset.value?.scale || 1, {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect;
+                                ctx.save();
+                                const lineWidth = 2 / scale;
+                                ctx.lineWidth = lineWidth, ctx.strokeStyle = color, ctx.strokeRect(startX, startY, rectWidth, rectHeight), 
                                 ctx.restore();
                             },
                             hitCanvasLabel: (x, y) => {
@@ -7278,7 +7284,10 @@ var preview = defineComponent({
     }
 });
 
-const NextLabelimg = withInstall(Element$1), NextLabelimgPreview = withInstall(preview), isPointInCircle = (mouseX, mouseY, circleX, circleY, radius) => Math.sqrt(Math.pow(mouseX - circleX, 2) + Math.pow(mouseY - circleY, 2)) < radius, vertexesUnique = vertexes => Array.from(new Set(vertexes.map((item => JSON.stringify(item))))).map((item => JSON.parse(item))), {hexToRgba: hexToRgba} = useChangeColor(), colors = [ "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ];
+const NextLabelimg = withInstall(Element$1), NextLabelimgPreview = withInstall(preview), isPointInCircle = (mouseX, mouseY, circleX, circleY, radius) => Math.sqrt(Math.pow(mouseX - circleX, 2) + Math.pow(mouseY - circleY, 2)) < radius, vertexesUnique = vertexes => Array.from(new Set(vertexes.map((item => JSON.stringify(item))))).map((item => JSON.parse(item))), vertexesToScale = (vertexes, scaleX, scaleY, isMultiply = !0) => vertexes?.length ? vertexes.map((item => ((vertex, scaleX, scaleY, isMultiply = !0) => {
+    const [x, y] = vertex;
+    return isMultiply ? [ x * scaleX, y * scaleY ] : [ x / scaleX, y / scaleY ];
+})(item, scaleX, scaleY, isMultiply))) : [], {hexToRgba: hexToRgba} = useChangeColor(), colors = [ "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ];
 
 class CreatePolygonVertexes {
     canvas;
@@ -7335,9 +7344,9 @@ class CreatePolygonVertexes {
     canvasMouseDblclick(e) {
         e.stopPropagation(), this.isDrawing && (this.canvas.style.cursor = "unset", this.mouseOffset.x = e.offsetX, 
         this.mouseOffset.y = e.offsetY, this.vertexes.push([ e.offsetX, e.offsetY ]), this.vertexes = vertexesUnique(this.vertexes)), 
-        this.notifyDestryedListerers(), this.destroyed();
+        this.notifyDestryedListerers(), this.destroy();
     }
-    destroyed() {
+    destroy() {
         this.isDrawing = !1, this.vertexes = [], this.vertexesObservers = [], this.destroyedObservers = () => {
             this.canvas.removeEventListener("click", this.canvasMouseClick);
         }, this.canvas.removeEventListener("mousemove", this.canvasMousemove), this.canvas.removeEventListener("dblclick", this.canvasMouseDblclick);
@@ -7357,11 +7366,18 @@ class EditPolygonPath {
     edgeCentreRadius;
     pointRecover;
     observers=[];
+    editPolygonObserver;
     constructor(canvas, ctx) {
         this.canvas = canvas, this.ctx = ctx, this.vertexes = [], this.isEditing = !1, this.canClickEvent = !0, 
         this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1, 
         this.vertexRadius = 8, this.edgeCentreRadius = 5, this.pointRecover = [];
     }
+    notifyEditPolygonObserver() {
+        this.editPolygonObserver?.(this.vertexes);
+    }
+    onEditPolygon(callback) {
+        this.editPolygonObserver = callback;
+    }
     drawPolygonPath(vertexes, mouseX, mouseY) {
         const ctx = this.ctx;
         if (!vertexes.length) return;
@@ -7466,7 +7482,7 @@ class EditPolygonPath {
         this.pointVertexIndex > -1 && this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]), 
         this.pointCentreIndex > -1 && this.vertexes.splice(this.pointCentreIndex, 1, [ x, y ]), 
         this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1, 
-        this.drawPolygon(this.vertexes), this.notifyObservers();
+        this.drawPolygon(this.vertexes), this.notifyObservers(), this.notifyEditPolygonObserver();
     }
     canvasMouseClick(e) {
         e.stopPropagation();
@@ -7475,7 +7491,8 @@ class EditPolygonPath {
             const i = this.pointInVertexes(x, y);
             if (isValueExist(i)) {
                 if (this.vertexes.length <= 3) return;
-                this.vertexes.splice(i, 1), this.drawPolygon(this.vertexes), this.notifyObservers();
+                this.vertexes.splice(i, 1), this.drawPolygon(this.vertexes), this.notifyObservers(), 
+                this.notifyEditPolygonObserver();
             }
         }
     }
@@ -7486,7 +7503,7 @@ class EditPolygonPath {
         this.pointCentreIndex > -1 && this.vertexes.splice(this.pointCentreIndex, 1, [ x, y ]), 
         this.notifyObservers());
     }
-    destroyed() {
+    destroy() {
         this.vertexes = [], this.observers = [], this.isEditing = !1, this.canvas.removeEventListener("mousedown", this.canvasMousedown), 
         this.canvas.removeEventListener("mouseup", this.canvasMouseup), this.canvas.removeEventListener("click", this.canvasMouseClick), 
         this.canvas.removeEventListener("mousemove", this.canvasMousemove);
@@ -7499,26 +7516,32 @@ class CreateDrawCanvas {
     image;
     canvasWidth;
     canvasHeight;
-    paths;
+    scaleOffset;
+    labels;
     scaleX;
     scaleY;
     editDrawPolygon;
     createPolygonVertexes;
     editVertexes;
     editPolygonObservers=[];
+    drawnPolygonObserver;
     constructor(options) {
-        const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, paths: paths, scaleX: scaleX, scaleY: scaleY} = options;
+        const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, labels: labels, scaleX: scaleX, scaleY: scaleY, scaleOffset: scaleOffset} = options;
         this.canvas = canvas, this.ctx = ctx, this.image = image, this.canvasWidth = canvasWidth, 
-        this.canvasHeight = canvasHeight, this.paths = paths || [], this.scaleX = scaleX || 1, 
-        this.scaleY = scaleY || 1, this.editVertexes = [], this.render(), this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx), 
-        this.editDrawPolygon = new EditPolygonPath(canvas, ctx), this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
+        this.canvasHeight = canvasHeight, this.scaleOffset = scaleOffset, this.labels = labels || {}, 
+        this.scaleX = scaleX || 1, this.scaleY = scaleY || 1, this.editVertexes = [], this.render(), 
+        this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx), this.editDrawPolygon = new EditPolygonPath(canvas, ctx), 
+        this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
             this.render(), this.editDrawPolygon.drawPolygon(vertexes, mouseOffset), this.editVertexes = vertexes, 
             this.notifyObservers();
         })), this.createPolygonVertexes.onDestroyed((vertexes => {
-            this.render(), this.editDrawPolygon.drawPolygon(vertexes), this.editDrawPolygon.updatePolygon((vertexes => {
+            this.editVertexes = vertexes, this.render(), this.editDrawPolygon.drawPolygon(vertexes), 
+            this.editDrawPolygon.updatePolygon((vertexes => {
                 this.render(), this.editDrawPolygon.drawPolygon(vertexes), this.editVertexes = vertexes, 
                 this.notifyObservers();
-            }));
+            })), this.editDrawPolygon.onEditPolygon((vertexes => {
+                this.editVertexes = vertexes, this.notifyDrawnPolygonObservers();
+            })), this.notifyDrawnPolygonObservers();
         }));
     }
     notifyObservers() {
@@ -7526,17 +7549,22 @@ class CreateDrawCanvas {
             listener(this.editVertexes);
         }));
     }
+    notifyDrawnPolygonObservers() {
+        this.drawnPolygonObserver?.(this.editVertexes);
+    }
     updatePolygon(callback) {
         this.editPolygonObservers.push(callback);
     }
-    drawPolygons(paths) {
-        const ctx = this.ctx;
-        ctx.scale(this.scaleX, this.scaleY);
-        for (let i = 0; i < paths.length; i++) {
-            const path = paths[i].path;
+    onDrawnPolygon(callback) {
+        this.drawnPolygonObserver = callback;
+    }
+    drawPolygons(shapes) {
+        const ctx = this.ctx, {scale: scale} = this.scaleOffset.value, scaleX = this.scaleX, scaleY = this.scaleY;
+        for (let i = 0; i < shapes.length; i++) {
+            const item = shapes[i], path = vertexesToScale(item.points, scaleX, scaleY);
             if (!path.length) return;
             const color = colors[i % colors.length];
-            ctx.beginPath(), ctx.lineWidth = 2, ctx.strokeStyle = color, ctx.fillStyle = hexToRgba(color, .2);
+            ctx.beginPath(), ctx.lineWidth = 2 / scale, ctx.strokeStyle = color, ctx.fillStyle = hexToRgba(color, .2);
             const startX = path[0][0], startY = path[0][1];
             ctx.moveTo(startX, startY);
             for (let i = 1; i < path.length; i++) {
@@ -7546,15 +7574,18 @@ class CreateDrawCanvas {
             ctx.closePath(), ctx.stroke(), ctx.fill();
         }
     }
-    initCanvas=() => {
+    drawCanvas=() => {
         this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight), this.ctx.drawImage(this.image, 0, 0, this.canvasWidth, this.canvasHeight), 
-        this.ctx.save(), this.drawPolygons(this.paths), this.ctx.restore();
+        this.ctx.save();
+        const shapes = this.labels.shapes;
+        this.drawPolygons(shapes), this.ctx.restore();
     };
     render=() => {
-        this.initCanvas();
+        this.canvas.width = this.canvasWidth, this.scaleOffset.value && (this.ctx.translate(this.scaleOffset.value.x, this.scaleOffset.value.y), 
+        this.ctx.scale(this.scaleOffset.value.scale, this.scaleOffset.value.scale)), this.drawCanvas();
     };
-    destroyed() {
-        this.paths = [], this.editDrawPolygon.destroyed(), this.createPolygonVertexes.destroyed();
+    destroy() {
+        this.labels = {}, this.editDrawPolygon.destroy(), this.createPolygonVertexes.destroy();
     }
 }
 
@@ -7573,9 +7604,9 @@ var CanvasContext = defineComponent({
             default: () => ({})
         }
     },
-    emits: [ "editPolygon" ],
+    emits: [ "editPolygon", "changePolygon" ],
     setup(props, {emit: emit, expose: expose}) {
-        const ns = inject("ns", {}), mainBasaeRef = ref(), canvasMainRef = ref(), canvasBaseRef = ref(), drawCanvas = ref(), setContainerWidthHeight = (canvasWidth, canvasHeight) => {
+        const ns = inject("ns", {}), scaleTranslateManager = inject("scaleTranslateManager", {}), mainBasaeRef = ref(), canvasMainRef = ref(), canvasBaseRef = ref(), drawCanvas = ref(), canvasDragZoom = ref(), setContainerWidthHeight = (canvasWidth, canvasHeight) => {
             canvasMainRef.value.style.width = canvasWidth + "px", canvasMainRef.value.style.height = canvasHeight + "px", 
             canvasBaseRef.value.width = canvasWidth, canvasBaseRef.value.height = canvasHeight, 
             canvasBaseRef.value.style.width = canvasWidth + "px", canvasBaseRef.value.style.height = canvasHeight + "px";
@@ -7585,7 +7616,7 @@ var CanvasContext = defineComponent({
                 const image = new Image;
                 image.src = rowInfo.imageSrc, loadingImage.value = !0, image.onload = () => {
                     loadingImage.value = !1;
-                    const {canvasWidth: canvasWidth, canvasHeight: canvasHeight, scaleFactor: scaleFactor, scaleX: scaleX, scaleY: scaleY} = (image => {
+                    const {canvasWidth: canvasWidth, canvasHeight: canvasHeight, scaleFactor: scaleFactor, scaleX: scaleX, scaleY: scaleY, originWidth: originWidth, originHeight: originHeight} = (image => {
                         const clientWidth = mainBasaeRef.value?.elementInstance.clientWidth, clientHeight = mainBasaeRef.value?.elementInstance.clientHeight;
                         let {width: width, height: height} = image, scaleFactor = 1;
                         const aspect_ratio = width / height;
@@ -7605,7 +7636,9 @@ var CanvasContext = defineComponent({
                             canvasHeight: canvasHeight,
                             scaleFactor: scaleFactor,
                             scaleX: Number(scaleX),
-                            scaleY: Number(scaleY)
+                            scaleY: Number(scaleY),
+                            originWidth: image.width,
+                            originHeight: image.height
                         };
                     })(image);
                     image.style.width = canvasWidth + "px", image.style.height = canvasHeight + "px", 
@@ -7616,15 +7649,25 @@ var CanvasContext = defineComponent({
                         canvasWidth: canvasWidth,
                         canvasHeight: canvasHeight,
                         scaleFactor: scaleFactor,
-                        paths: rowInfo.labels,
+                        labels: rowInfo.labels,
                         scaleX: scaleX,
-                        scaleY: scaleY
+                        scaleY: scaleY,
+                        scaleOffset: scaleTranslateManager.scaleTranslate
                     }), drawCanvas.value.updatePolygon((vertexes => {
-                        emit("editPolygon", {
+                        emit("changePolygon", {
                             vertexes: vertexes,
                             canvasWidth: canvasWidth,
                             canvasHeight: canvasHeight
                         });
+                    })), drawCanvas.value.onDrawnPolygon((vertexes => {
+                        const new_vertexes = vertexesToScale(vertexes, scaleX, scaleY, !1);
+                        emit("editPolygon", {
+                            vertexes: new_vertexes,
+                            originWidth: originWidth,
+                            originHeight: originHeight
+                        });
+                    })), canvasDragZoom.value = new CanvasSceneDragZoom(canvasBaseRef.value), canvasDragZoom.value.changeZoom((scaleOffset => {
+                        scaleTranslateManager.onChangeScaleTranslate(scaleOffset), drawCanvas.value.render();
                     }));
                 }, image.onerror = () => {
                     loadingImage.value = !1;
@@ -7645,6 +7688,8 @@ var CanvasContext = defineComponent({
                     renderImageLabel(rowInfo);
                 }
             }));
+        })), onUnmounted((() => {
+            drawCanvas.value.destroy(), canvasDragZoom.value.destroy();
         }));
         return expose({
             rerenderImage: () => {
@@ -7652,6 +7697,9 @@ var CanvasContext = defineComponent({
                     const rowInfo = toRaw(props.rowInfo);
                     renderImageLabel(rowInfo);
                 }));
+            },
+            resetScaleOffset: () => {
+                canvasDragZoom.value.reset();
             }
         }), () => createVNode(Fragment, null, [ createVNode(NextSpinLoading, {
             ref: mainBasaeRef,
@@ -7687,7 +7735,7 @@ var CanvasContext = defineComponent({
     },
     emits: [ "fullscreen", "save" ],
     setup(props, {emit: emit}) {
-        const _ns = inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
+        const _ns = inject("ns", {}), scaleTranslateManager = inject("scaleTranslateManager", {}), scaleTranslate = scaleTranslateManager.scaleTranslate, {t: t} = useLocale(), switchFillscreen = val => {
             emit("fullscreen", val), document.body.style.overflow = val ? "hidden" : "auto";
         };
         return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("ul", {
@@ -7768,7 +7816,28 @@ var CanvasContext = defineComponent({
             class: "label-text"
         }, [ t("next.labelme.deletePolyton") ]) ]) ]), createVNode("ul", {
             class: [ _ns.be("header", "tool") ]
-        }, [ props.imageLength ? createVNode("li", null, [ createVNode("span", null, [ createTextVNode("第 "), props.imageIndex + 1, createTextVNode(" 张") ]), createVNode("em", {
+        }, [ createVNode("li", {
+            class: "hover",
+            onClick: () => scaleTranslateManager.onResetScaleTranslate()
+        }, [ 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"
+        }, [ 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) ]), createVNode("span", {
+            style: "padding-left: 3px"
+        }, [ t("next.labelimg.zoomRestore") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("缩放比例") ]), createVNode("span", null, [ parseInt((100 * scaleTranslate.value.scale).toString()), createTextVNode("%") ]), createVNode("span", {
+            style: "padding: 0 10px;"
+        }, [ createTextVNode("偏移量") ]), createVNode("span", {
+            style: "min-width: 120px; text-align: left;"
+        }, [ createTextVNode("X: "), scaleTranslate.value.x, createTextVNode(", Y: "), scaleTranslate.value.y ]) ]), props.imageLength ? createVNode("li", null, [ createVNode("span", null, [ createTextVNode("第 "), props.imageIndex + 1, createTextVNode(" 张") ]), createVNode("em", {
             style: "padding: 0 5px;"
         }, [ createTextVNode("/") ]), createVNode("span", null, [ createTextVNode("共 "), props.imageLength, createTextVNode(" 张") ]) ]) : null, createVNode("li", {
             style: "margin-right: 30px;",
@@ -7862,7 +7931,7 @@ var Element = defineComponent({
             default: () => []
         }
     },
-    emits: [ "change", "save", "edit-polygon", "prev-click", "next-click" ],
+    emits: [ "change", "save", "edit-polygon", "change-polygon", "prev-click", "next-click" ],
     setup(props, {emit: emit, slots: slots}) {
         const _config = deepClone(defaultConfig), _options = computed((() => {
             const cfg = unref(props.options);
@@ -7922,14 +7991,29 @@ var Element = defineComponent({
             isFullscreen.value = val, updateMainContentHeight(), nextTick((() => {
                 canvasContextRef.value.rerenderImage();
             }));
-        }, onEditPlygonChange = plygon => {
-            currentNode.value.labels = plygon, emit("edit-polygon", plygon);
+        }, onChangePolygon = node => {
+            currentNode.value.labels = node, emit("change-polygon", node);
+        }, onEditPlygon = node => {
+            currentNode.value.labels = node, emit("edit-polygon", node);
         }, onToolHeaderSave = () => {
             onChangeActivateNode(activateNodeIndex.value) || ElMessage({
                 type: "info",
                 message: t("next.labelimg.labelNoUpdate")
             });
-        };
+        }, scaleTranslate = ref({
+            scale: 1,
+            x: 0,
+            y: 0
+        });
+        provide("scaleTranslateManager", {
+            scaleTranslate: scaleTranslate,
+            onChangeScaleTranslate: val => {
+                scaleTranslate.value = val;
+            },
+            onResetScaleTranslate: () => {
+                canvasContextRef.value.resetScaleOffset();
+            }
+        });
         return () => createVNode(Fragment, null, [ createVNode("div", {
             ref: layoutLabelRef,
             class: [ ns.b(), props.className, isFullscreen.value ? ns.b("fullscreen") : "" ],
@@ -7962,7 +8046,8 @@ var Element = defineComponent({
                 }, [ createVNode(CanvasContext, {
                     ref: canvasContextRef,
                     rowInfo: currentNode.value,
-                    onEditPolygon: onEditPlygonChange
+                    onEditPolygon: onEditPlygon,
+                    onChangePolygon: onChangePolygon
                 }, null) ]) ]), createVNode("footer", {
                     ref: footerRef,
                     class: [ ns.b("footer") ]
@@ -8062,7 +8147,7 @@ const zoomDialog = app => {
             }));
         }
     });
-}, version = "0.3.7", install = function(app) {
+}, version = "0.3.8", install = function(app) {
     Object.keys(components).forEach((key => {
         const component = components[key];
         app.component(component.name, component);
@@ -8072,7 +8157,7 @@ const zoomDialog = app => {
 };
 
 var index = {
-    version: "0.3.7",
+    version: "0.3.8",
     install: install
 };