next-element-vue 0.3.6 → 0.3.7

package/dist/index.css

@@ -12,5 +12,5 @@
 .next-upload .el-upload-list__item-thumbnail{-o-object-fit:cover;object-fit:cover}
 .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{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-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)}

package/dist/index.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
  */
 
@@ -6024,7 +6024,7 @@ var ToolHeader = 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", {
@@ -6051,7 +6051,28 @@ var ToolHeader = defineComponent({
             style: "padding-left: 3px"
         }, [ t("next.labelimg.saveLabel") ]) ]) ]), 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;",
@@ -6072,7 +6093,7 @@ var ToolHeader = defineComponent({
             }) ]),
             default: () => createVNode("ul", {
                 style: "font-size: 12px;white-space: nowrap;"
-            }, [ createVNode("li", null, [ createVNode("span", null, [ createTextVNode("W：") ]), createVNode("span", null, [ createTextVNode("鼠标移入图片中，长按W键，鼠标按下左键，移动鼠标开始绘制，鼠标抬起结束绘制") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("A：") ]), createVNode("span", null, [ createTextVNode("A键进入上一张图片进行标注") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("D：") ]), createVNode("span", null, [ createTextVNode("D键进入下一张图片进行标注") ]) ]) ])
+            }, [ createVNode("li", null, [ createVNode("span", null, [ createTextVNode("W：") ]), createVNode("span", null, [ createTextVNode("鼠标移入图片中，长按W键，鼠标按下左键，移动鼠标开始绘制，鼠标抬起结束绘制") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("A：") ]), createVNode("span", null, [ createTextVNode("A键进入上一张图片进行标注") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("D：") ]), createVNode("span", null, [ createTextVNode("D键进入下一张图片进行标注") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("Ctrl+鼠标滚轮：") ]), createVNode("span", null, [ createTextVNode("长按Ctrl+鼠标滚轮对图片进行缩放") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("Ctrl+鼠标左键：") ]), createVNode("span", null, [ createTextVNode("长按Ctrl+鼠标左键对图片进行拖拽移动") ]) ]) ])
         }) ]), props.isFullscreen ? createVNode("li", {
             class: "hover",
             onClick: () => switchFillscreen(!1)
@@ -6220,6 +6241,101 @@ var ContextMenuLabel = defineComponent({
     }
 });
 
+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 = defineComponent({
@@ -6239,7 +6355,7 @@ var DraggableRect = defineComponent({
     },
     emits: [ "draggle-resize", "contextmenu" ],
     setup(props, {emit: emit}) {
-        const isDraggle = ref(!1), isResizeCorner = ref({
+        const scaleTranslate = inject("scaleTranslateManager", {}).scaleTranslate, isDraggle = ref(!1), isResizeCorner = ref({
             topLeft: !1,
             topCenter: !1,
             topRight: !1,
@@ -6259,66 +6375,68 @@ var DraggableRect = defineComponent({
             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;
             }
         };
@@ -6343,11 +6461,23 @@ var DraggableRect = defineComponent({
         };
     },
     render() {
-        const _ns = inject("ns", {}), props = this.$props;
+        const _ns = inject("ns", {}), scaleTranslate = inject("scaleTranslateManager", {}).scaleTranslate, props = this.$props;
         return 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",
@@ -6408,7 +6538,7 @@ var DraggableRect = defineComponent({
     },
     emits: [ "change" ],
     setup(props, {emit: emit, expose: expose}) {
-        const ns = inject("ns", {}), _emit = inject("_emit", null), mainBasaeRef = ref(), canvasMainRef = ref(), canvasBaseRef = ref(), canvasRectRef = ref(), labels = ref([]), drawBaseCanvas = ref({}), formatLabelsType = () => {
+        const ns = inject("ns", {}), _emit = inject("_emit", null), scaleTranslateManager = inject("scaleTranslateManager", {}), mainBasaeRef = ref(), canvasMainRef = ref(), canvasBaseRef = ref(), canvasRectRef = ref(), labels = ref([]), drawBaseCanvas = ref({}), canvasDragZoom = ref(), formatLabelsType = () => {
             const _labels = deepClone(labels.value);
             let yolo_label = [];
             return {
@@ -6470,9 +6600,9 @@ var DraggableRect = defineComponent({
                         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];
@@ -6512,7 +6642,8 @@ var DraggableRect = defineComponent({
                         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;
@@ -6579,30 +6710,45 @@ var DraggableRect = defineComponent({
                         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 && 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 && nextTick((() => {
-                    updateDraggableRectFixed(x, y, hit_rect, hit_index, color);
+                    updateDraggableRectFixed(offsetX, offsetY, hit_rect, hit_index, color);
                 }));
             }));
-        }, onWindowWheel = e => {
-            e.ctrlKey && e.preventDefault();
         };
         onMounted((() => {
             watch((() => props.rowInfo), (info => {
@@ -6620,11 +6766,9 @@ var DraggableRect = defineComponent({
                     const rowInfo = toRaw(props.rowInfo);
                     renderImageLabel(rowInfo);
                 }
-            })), window.addEventListener("wheel", onWindowWheel, {
-                passive: !1
-            });
+            }));
         })), onUnmounted((() => {
-            drawBaseCanvas.value.removeEventAll?.(), window.removeEventListener("wheel", onWindowWheel);
+            drawBaseCanvas.value.removeEventAll?.(), canvasDragZoom.value.destroy();
         }));
         const contextmenuLabelFixed = ref({
             show: !1,
@@ -6711,6 +6855,9 @@ var DraggableRect = defineComponent({
                     const rowInfo = toRaw(props.rowInfo);
                     renderImageLabel(rowInfo);
                 }));
+            },
+            resetScaleOffset: () => {
+                canvasDragZoom.value.reset();
             }
         });
         return () => createVNode(Fragment, null, [ createVNode(NextSpinLoading, {
@@ -6912,7 +7059,11 @@ var Element$1 = defineComponent({
                 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);
@@ -6945,8 +7096,20 @@ var Element$1 = defineComponent({
             isFullscreen.value = val, updateMainContentHeight(), nextTick((() => {
                 canvasContextRef.value.rerenderImage();
             }));
-        };
-        expose({
+        }, scaleTranslate = ref({
+            scale: 1,
+            x: 0,
+            y: 0
+        });
+        provide("scaleTranslateManager", {
+            scaleTranslate: scaleTranslate,
+            onChangeScaleTranslate: val => {
+                scaleTranslate.value = val;
+            },
+            onResetScaleTranslate: () => {
+                canvasContextRef.value.resetScaleOffset();
+            }
+        }), expose({
             convertToLabel: convertToLabel,
             canvertToCanvas: canvertToCanvas
         });
@@ -7899,7 +8062,7 @@ const zoomDialog = app => {
             }));
         }
     });
-}, version = "0.3.6", install = function(app) {
+}, version = "0.3.7", install = function(app) {
     Object.keys(components).forEach((key => {
         const component = components[key];
         app.component(component.name, component);
@@ -7909,7 +8072,7 @@ const zoomDialog = app => {
 };
 
 var index = {
-    version: "0.3.6",
+    version: "0.3.7",
     install: install
 };