next-element-vue 0.3.7 → 0.3.9

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.3.7 v
- * 发布日期：2024-09-21
+ * 当前版本：0.3.9 v
+ * 发布日期：2024-11-12
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -1813,15 +1813,18 @@
                 return isHeaderBarColorGradual ? {
                     background: `linear-gradient(to bottom , ${color}, ${getLightColor$3(color, .5)})`
                 } : "";
-            }));
-            return vue.createVNode("header", {
+            })), __slots_header_tools = {};
+            return slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
+            slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]()), 
+            vue.createVNode("header", {
                 class: _ns.b("header"),
                 style: headerStyle.value
             }, [ vue.createVNode(LogoView, null, null), vue.createVNode("div", {
                 class: _ns.bf("header", "right")
-            }, [ vue.createVNode(HeaderTools, null, {
-                default: () => [ slots[slots_config_headerToolsPrefix]?.(), slots[slots_config_headerToolsSuffix]?.() ]
-            }) ]) ]);
+            }, [ vue.createVNode(HeaderTools, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? __slots_header_tools : {
+                default: () => [ __slots_header_tools ]
+            })) ]) ]);
+            var s;
         }
     });
     function getDefaultExportFromCjs(x) {
@@ -2635,21 +2638,29 @@
         render() {
             const slots = this.$slots, _config = vue.inject("options", {}), _emit = vue.inject("__emit__", {});
             slots.menu;
+            const __slots_header_tools = {};
+            slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
+            slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
             const isTabs = vue.ref(!!slots.tabs);
             return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), vue.createVNode(elementPlus.ElContainer, {
                 class: ns$j.b()
             }, {
-                default: () => [ vue.createVNode(Sidebar$2, null, null), vue.createVNode("div", {
-                    class: [ ns$j.b("content") ]
-                }, [ vue.createVNode(Header$3, null, null), _config.showTabs ? slots.tabs ? slots.tabs?.() : vue.createVNode(NextTabs, {
-                    tabs: _config.tabs,
-                    activeTab: _config.activeTab,
-                    onChange: (...arg) => _emit("tabsChange", ...arg),
-                    onSelect: (...arg) => _emit("tabsSelect", ...arg),
-                    onClose: (...arg) => _emit("tabsClose", ...arg)
-                }, null) : null, vue.createVNode("main", {
-                    class: [ ns$j.bf("main"), ns$j.is("layout-tabs", isTabs.value) ]
-                }, [ slots.default?.() ]) ]) ]
+                default: () => {
+                    return [ vue.createVNode(Sidebar$2, null, null), vue.createVNode("div", {
+                        class: [ ns$j.b("content") ]
+                    }, [ vue.createVNode(Header$3, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? __slots_header_tools : {
+                        default: () => [ __slots_header_tools ]
+                    })), _config.showTabs ? slots.tabs ? slots.tabs?.() : vue.createVNode(NextTabs, {
+                        tabs: _config.tabs,
+                        activeTab: _config.activeTab,
+                        onChange: (...arg) => _emit("tabsChange", ...arg),
+                        onSelect: (...arg) => _emit("tabsSelect", ...arg),
+                        onClose: (...arg) => _emit("tabsClose", ...arg)
+                    }, null) : null, vue.createVNode("main", {
+                        class: [ ns$j.bf("main"), ns$j.is("layout-tabs", isTabs.value) ]
+                    }, [ slots.default?.() ]) ]) ];
+                    var s;
+                }
             });
         }
     });
@@ -2661,21 +2672,26 @@
                 return isHeaderBarColorGradual ? {
                     background: `linear-gradient(to bottom , ${color}, ${getLightColor$2(color, .5)})`
                 } : "";
-            }));
-            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("header", {
-                class: _ns.b("header"),
-                style: headerStyle.value
-            }, [ vue.createVNode(LogoView, null, null), vue.createVNode("div", {
-                class: _ns.bf("header", "menu")
-            }, [ slots[slots_config_headerMenu] ? slots[slots_config_headerMenu]() : vue.createVNode(NextMenu, {
-                menuTree: _config.menuTree,
-                router: _config.menuRouter,
-                mode: _config.menuMode
-            }, null) ]), vue.createVNode("div", {
-                class: _ns.bf("header", "right")
-            }, [ vue.createVNode(HeaderTools, null, {
-                default: () => [ slots[slots_config_headerToolsPrefix]?.(), slots[slots_config_headerToolsSuffix]?.() ]
-            }) ]) ]) ]);
+            })), __slots_header_tools = {};
+            slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
+            slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
+            return () => {
+                return vue.createVNode(vue.Fragment, null, [ vue.createVNode("header", {
+                    class: _ns.b("header"),
+                    style: headerStyle.value
+                }, [ vue.createVNode(LogoView, null, null), vue.createVNode("div", {
+                    class: _ns.bf("header", "menu")
+                }, [ slots[slots_config_headerMenu] ? slots[slots_config_headerMenu]() : vue.createVNode(NextMenu, {
+                    menuTree: _config.menuTree,
+                    router: _config.menuRouter,
+                    mode: _config.menuMode
+                }, null) ]), vue.createVNode("div", {
+                    class: _ns.bf("header", "right")
+                }, [ vue.createVNode(HeaderTools, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? __slots_header_tools : {
+                    default: () => [ __slots_header_tools ]
+                })) ]) ]) ]);
+                var s;
+            };
         }
     });
     const ns$i = useNamespace("layout-transverse");
@@ -2711,17 +2727,22 @@
                 return isHeaderBarColorGradual ? {
                     background: `linear-gradient(to bottom , ${color}, ${getLightColor$1(color, .5)})`
                 } : "";
-            }));
-            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("header", {
-                class: _ns.b("header"),
-                style: headerStyle.value
-            }, [ vue.createVNode(LogoView, null, null), vue.createVNode("div", {
-                class: _ns.bf("header", "menu")
-            }, null), vue.createVNode("div", {
-                class: _ns.bf("header", "right")
-            }, [ vue.createVNode(HeaderTools, null, {
-                default: () => [ slots[slots_config_headerToolsPrefix]?.(), slots[slots_config_headerToolsSuffix]?.() ]
-            }) ]) ]) ]);
+            })), __slots_header_tools = {};
+            slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
+            slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
+            return () => {
+                return vue.createVNode(vue.Fragment, null, [ vue.createVNode("header", {
+                    class: _ns.b("header"),
+                    style: headerStyle.value
+                }, [ vue.createVNode(LogoView, null, null), vue.createVNode("div", {
+                    class: _ns.bf("header", "menu")
+                }, null), vue.createVNode("div", {
+                    class: _ns.bf("header", "right")
+                }, [ vue.createVNode(HeaderTools, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? __slots_header_tools : {
+                    default: () => [ __slots_header_tools ]
+                })) ]) ]) ]);
+                var s;
+            };
         }
     }), Sidebar$1 = vue.defineComponent({
         setup: () => ({
@@ -2777,17 +2798,22 @@
                 return isHeaderBarColorGradual ? {
                     background: `linear-gradient(to bottom , ${color}, ${getLightColor(color, .5)})`
                 } : "";
-            }));
-            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("header", {
-                class: _ns.b("header"),
-                style: headerStyle.value
-            }, [ vue.createVNode(LogoView, null, null), vue.createVNode("div", {
-                class: _ns.bf("header", "menu")
-            }, [ slots[slots_config_headerMenu]?.() ]), vue.createVNode("div", {
-                class: _ns.bf("header", "right")
-            }, [ vue.createVNode(HeaderTools, null, {
-                default: () => [ slots[slots_config_headerToolsPrefix]?.(), slots[slots_config_headerToolsSuffix]?.() ]
-            }) ]) ]) ]);
+            })), __slots_header_tools = {};
+            slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
+            slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
+            return () => {
+                return vue.createVNode(vue.Fragment, null, [ vue.createVNode("header", {
+                    class: _ns.b("header"),
+                    style: headerStyle.value
+                }, [ vue.createVNode(LogoView, null, null), vue.createVNode("div", {
+                    class: _ns.bf("header", "menu")
+                }, [ slots[slots_config_headerMenu]?.() ]), vue.createVNode("div", {
+                    class: _ns.bf("header", "right")
+                }, [ vue.createVNode(HeaderTools, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? __slots_header_tools : {
+                    default: () => [ __slots_header_tools ]
+                })) ]) ]) ]);
+                var s;
+            };
         }
     }), Sidebar = vue.defineComponent({
         setup: () => ({
@@ -2814,8 +2840,14 @@
         render() {
             const slots = this.$slots, _config = vue.inject("options", {}), _emit = vue.inject("__emit__", {});
             slots.menu;
+            const __slots_header_tools = {};
+            slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
+            slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
             const isTabs = vue.ref(!!slots.tabs);
-            return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), vue.createVNode(vue.Fragment, null, [ vue.createVNode(Header, null, null), vue.createVNode("div", {
+            return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), vue.createVNode(vue.Fragment, null, [ vue.createVNode(Header, null, (s = __slots_header_tools, 
+            "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? __slots_header_tools : {
+                default: () => [ __slots_header_tools ]
+            })), vue.createVNode("div", {
                 class: [ ns$g.b("content"), ns$g.is("layout-tabs", isTabs.value) ]
             }, [ vue.createVNode(Sidebar, null, null), vue.createVNode("div", {
                 class: ns$g.b("container")
@@ -2828,6 +2860,7 @@
             }, null) : null, vue.createVNode("main", {
                 class: [ ns$g.b("main") ]
             }, [ slots.default?.() ]) ]) ]) ]);
+            var s;
         }
     });
     const ns$f = useNamespace("layout"), layouts = {
@@ -3808,7 +3841,11 @@
                 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 vue.createVNode(elementPlus.ElTableColumn, {
                     fixed: "right",
                     label: t("next.table.operation"),
@@ -3816,10 +3853,9 @@
                     headerAlign: valueExist(options.operationsHeaderAlign, options.headerAlign),
                     align: valueExist(options.operationsColumnAlign, options.cellAlign)
                 }, {
-                    default: scoped => vue.createVNode(vue.Fragment, null, [ slots["operation-column-prefix"]?.(scoped, {
-                        text: btnText,
-                        plain: btnPlain,
-                        size: btnSize
+                    default: scoped => vue.createVNode(vue.Fragment, null, [ slots["operation-column-prefix"]?.({
+                        scoped: scoped,
+                        btn: btnCfg
                     }), options.editBtn ? vue.createVNode(elementPlus.ElTooltip, {
                         enterable: !1,
                         effect: "dark",
@@ -3899,10 +3935,9 @@
                             }),
                             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
                     }) ])
                 });
             };
@@ -4637,9 +4672,9 @@
                     return vue.createVNode(elementPlus.ElInput, {
                         modelValue: formParams[col.prop],
                         "onUpdate:modelValue": $event => formParams[col.prop] = $event,
-                        clearable: !0,
+                        clearable: valueExist(col.clearable, !0),
                         readonly: valueExist(col.readonly, !1),
-                        disabled: col.disabled,
+                        disabled: valueExist(col.disabled, !1),
                         placeholder: placeholder,
                         onChange: event => col.onChange?.(event, col, formParams, formColumns)
                     }, {
@@ -4655,7 +4690,7 @@
                         modelValue: formParams[col.prop],
                         "onUpdate:modelValue": $event => formParams[col.prop] = $event,
                         type: "password",
-                        clearable: !0,
+                        clearable: valueExist(col.clearable, !0),
                         "show-password": !0,
                         readonly: valueExist(col.readonly, !1),
                         disabled: col.disabled,
@@ -4673,7 +4708,7 @@
                     return vue.createVNode(elementPlus.ElInput, {
                         modelValue: formParams[col.prop],
                         "onUpdate:modelValue": $event => formParams[col.prop] = $event,
-                        clearable: !0,
+                        clearable: valueExist(col.clearable, !0),
                         readonly: valueExist(col.readonly, !1),
                         disabled: col.disabled,
                         placeholder: placeholder,
@@ -4694,7 +4729,7 @@
                     return vue.createVNode(elementPlus.ElInput, {
                         modelValue: formParams[col.prop],
                         "onUpdate:modelValue": $event => formParams[col.prop] = $event,
-                        clearable: !0,
+                        clearable: valueExist(col.clearable, !0),
                         readonly: valueExist(col.readonly, !1),
                         disabled: col.disabled,
                         placeholder: placeholder,
@@ -4718,7 +4753,7 @@
                         modelValue: formParams[col.prop],
                         "onUpdate:modelValue": $event => formParams[col.prop] = $event,
                         type: "textarea",
-                        clearable: !0,
+                        clearable: valueExist(col.clearable, !0),
                         readonly: valueExist(col.readonly, !1),
                         disabled: col.disabled,
                         placeholder: placeholder,
@@ -4736,8 +4771,9 @@
                         modelValue: formParams[col.prop],
                         "onUpdate:modelValue": $event => formParams[col.prop] = $event,
                         placeholder: placeholder,
-                        clearable: !0,
-                        disabled: col.disabled,
+                        clearable: valueExist(col.clearable, !0),
+                        disabled: valueExist(col.disabled, !1),
+                        readonly: valueExist(col.readonly, !1),
                         multiple: valueExist(col.multiple, !1),
                         "collapse-tags-tooltip": !0,
                         onChange: event => col.onChange?.(event, col, formParams, formColumns)
@@ -4758,8 +4794,10 @@
                         start: "00:00",
                         step: "00:30",
                         end: "23:59",
-                        editable: !1,
-                        disabled: col.disabled,
+                        clearable: valueExist(col.clearable, !0),
+                        editable: valueExist(col.editable, !1),
+                        disabled: valueExist(col.disabled, !1),
+                        readonly: valueExist(col.readonly, !1),
                         placeholder: placeholder,
                         onChange: event => col.onChange?.(event, col, formParams, formColumns)
                     }, {
@@ -4770,7 +4808,8 @@
                 if ("radio" === col.type) return vue.createVNode(elementPlus.ElRadioGroup, {
                     modelValue: formParams[col.prop],
                     "onUpdate:modelValue": $event => formParams[col.prop] = $event,
-                    disabled: col.disabled,
+                    disabled: valueExist(col.disabled, !1),
+                    readonly: valueExist(col.readonly, !1),
                     onChange: event => col.onChange?.(event, col, formParams, formColumns)
                 }, {
                     default: () => [ col.dicData && col.dicData.map((item => vue.createVNode(elementPlus.ElRadio, {
@@ -4785,7 +4824,8 @@
                 vue.createVNode(elementPlus.ElCheckboxGroup, {
                     modelValue: formParams[col.prop],
                     "onUpdate:modelValue": $event => formParams[col.prop] = $event,
-                    disabled: col.disabled,
+                    disabled: valueExist(col.disabled, !1),
+                    readonly: valueExist(col.readonly, !1),
                     onChange: event => col.onChange?.(event, col, formParams, formColumns)
                 }, {
                     default: () => [ col.dicData && col.dicData.map((item => vue.createVNode(elementPlus.ElCheckbox, {
@@ -4805,10 +4845,11 @@
                         type: "date",
                         valueFormat: col.format || "YYYY-MM-DD",
                         format: col.format || "YYYY-MM-DD",
-                        clearable: !0,
+                        clearable: valueExist(col.clearable, !0),
                         disabledDate: col.disabledDate || _defaultDisabledDate,
-                        disabled: col.disabled,
-                        editable: col.editable
+                        editable: valueExist(col.editable, !1),
+                        disabled: valueExist(col.disabled, !1),
+                        readonly: valueExist(col.readonly, !1)
                     }, null);
                 }
                 if ("datetime" === col.type) {
@@ -4820,10 +4861,11 @@
                         type: "datetime",
                         valueFormat: col.format || "YYYY-MM-DD HH:mm:ss",
                         format: col.format || "YYYY-MM-DD HH:mm:ss",
-                        clearable: !0,
+                        clearable: valueExist(col.clearable, !0),
                         disabledDate: col.disabledDate || _defaultDisabledDate,
-                        disabled: col.disabled,
-                        editable: col.editable
+                        editable: valueExist(col.editable, !1),
+                        disabled: valueExist(col.disabled, !1),
+                        readonly: valueExist(col.readonly, !1)
                     }, null);
                 }
                 if ("datetimerange" === col.type) {
@@ -4835,13 +4877,14 @@
                         type: "datetimerange",
                         valueFormat: col.format || "YYYY-MM-DD HH:mm:ss",
                         format: col.format || "YYYY-MM-DD HH:mm:ss",
-                        clearable: !0,
                         "range-separator": t("next.date.rangeSeparator"),
                         "start-placeholder": t("next.date.startPlaceholder"),
                         "end-placeholder": t("next.date.endPlaceholder"),
                         disabledDate: col.disabledDate || _defaultDisabledDate,
-                        disabled: col.disabled,
-                        editable: col.editable,
+                        clearable: valueExist(col.clearable, !0),
+                        editable: valueExist(col.editable, !1),
+                        disabled: valueExist(col.disabled, !1),
+                        readonly: valueExist(col.readonly, !1),
                         shortcuts: col.shortcuts || _defaultShortcuts
                     }, null);
                 }
@@ -4859,7 +4902,7 @@
                     "onUpdate:modelValue": $event => formParams[col.prop] = $event,
                     formParams: formParams,
                     column: col,
-                    disabled: col.disabled,
+                    disabled: valueExist(col.disabled, !1),
                     onSelect: rows => ((rows, col) => {
                         rows && (col.tableSelectRows = rows);
                         const {value: value} = col.tableSelectProps || {};
@@ -4868,15 +4911,15 @@
                 }, null) : "uploadImage" === col.type ? vue.createVNode(UploadImage, {
                     modelValue: formParams[col.prop],
                     "onUpdate:modelValue": $event => formParams[col.prop] = $event,
-                    disabled: col.disabled,
-                    multiple: col.multiple,
+                    disabled: valueExist(col.disabled, !1),
+                    multiple: valueExist(col.multiple, !1),
                     limit: col.limit,
                     onChange: (...arg) => col.onChange?.(...arg, col, formParams, formColumns),
                     onExceed: (...arg) => col.onExceed?.(...arg, col, formParams, formColumns)
                 }, null) : "treeSelect" === col.type ? vue.createVNode(treeSelect, {
                     modelValue: formParams[col.prop],
                     "onUpdate:modelValue": $event => formParams[col.prop] = $event,
-                    disabled: col.disabled,
+                    disabled: valueExist(col.disabled, !1),
                     column: col,
                     formParams: formParams
                 }, null) : void 0;
@@ -5048,7 +5091,7 @@
                             append: valueExist(col.formAppend, col.append, null),
                             hide: valueExist(col.formHide, col.hide, !1),
                             disabled: valueExist(col.formDisabled, col.disabled, !1),
-                            clearable: valueExist(col.formClearable, col.clearable, !1),
+                            clearable: valueExist(col.formClearable, col.clearable, !0),
                             readonly: valueExist(col.formReadonly, col.readonly, !1),
                             tip: valueExist(col.formTip, col.tip, null),
                             rules: valueExist(col.formRules, col.rules, null),
@@ -6356,12 +6399,14 @@
                                 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();
                                 }
@@ -6369,8 +6414,10 @@
                             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) => {
@@ -7025,7 +7072,10 @@
             }, null) ]) ]);
         }
     });
-    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;
         ctx;
@@ -7081,9 +7131,9 @@
         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);
@@ -7102,11 +7152,22 @@
         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;
+        }
+        getTransformPoint(x, y) {
+            const transformMatrix = this.ctx.getTransform(), scaleX = parseFloat(transformMatrix.a.toFixed(1)), scaleY = parseFloat(transformMatrix.d.toFixed(1)), translateX = Math.ceil(transformMatrix.e), translateY = Math.ceil(transformMatrix.f);
+            return [ Math.floor((x - translateX) / scaleX), Math.floor((y - translateY) / scaleY) ];
+        }
         drawPolygonPath(vertexes, mouseX, mouseY) {
             const ctx = this.ctx;
             if (!vertexes.length) return;
@@ -7138,11 +7199,11 @@
             this.drawPolygonEdgeCentre(vertexes));
         }
         pointInVertexes(x, y) {
-            const vertexes = this.vertexes;
+            const [_x, _y] = this.getTransformPoint(x, y), vertexes = this.vertexes;
             let aimIndex = null;
             for (let i = 0; i < vertexes.length; i++) {
                 const [vertex_x, vertex_y] = vertexes[i];
-                if (isPointInCircle(x, y, vertex_x, vertex_y, this.vertexRadius)) {
+                if (isPointInCircle(_x, _y, vertex_x, vertex_y, this.vertexRadius)) {
                     this.canvas.style.cursor = "pointer", aimIndex = i;
                     break;
                 }
@@ -7151,11 +7212,11 @@
             return aimIndex;
         }
         pointInEdgeCentre(x, y) {
-            const vertexes = this.vertexes;
+            const [_x, _y] = this.getTransformPoint(x, y), vertexes = this.vertexes;
             let aimIndex = null;
             for (let i = 0; i < vertexes.length; i++) {
                 const start = vertexes[i % vertexes.length], end = vertexes[(i + 1) % vertexes.length], vertex_x = start[0] + (end[0] - start[0]) / 2, vertex_y = start[1] + (end[1] - start[1]) / 2;
-                if (isPointInCircle(x, y, vertex_x, vertex_y, this.edgeCentreRadius)) {
+                if (isPointInCircle(_x, _y, vertex_x, vertex_y, this.edgeCentreRadius)) {
                     this.canvas.style.cursor = "pointer", aimIndex = i;
                     break;
                 }
@@ -7164,9 +7225,9 @@
             return aimIndex;
         }
         pointInVertexesOrEdgeCentre(x, y) {
-            const vertexes = this.vertexes;
+            const [_x, _y] = this.getTransformPoint(x, y), vertexes = this.vertexes;
             for (let i = 0; i < vertexes.length; i++) {
-                const [vertex_x, vertex_y] = vertexes[i], isInVertex = isPointInCircle(x, y, vertex_x, vertex_y, this.vertexRadius), start = vertexes[i % vertexes.length], end = vertexes[(i + 1) % vertexes.length], edge_center_x = start[0] + (end[0] - start[0]) / 2, edge_center_y = start[1] + (end[1] - start[1]) / 2, isInEdgeCenter = isPointInCircle(x, y, edge_center_x, edge_center_y, this.edgeCentreRadius);
+                const [vertex_x, vertex_y] = vertexes[i], isInVertex = isPointInCircle(_x, _y, vertex_x, vertex_y, this.vertexRadius), start = vertexes[i % vertexes.length], end = vertexes[(i + 1) % vertexes.length], edge_center_x = start[0] + (end[0] - start[0]) / 2, edge_center_y = start[1] + (end[1] - start[1]) / 2, isInEdgeCenter = isPointInCircle(_x, _y, edge_center_x, edge_center_y, this.edgeCentreRadius);
                 if (isInVertex || isInEdgeCenter) {
                     this.canvas.style.cursor = "pointer";
                     break;
@@ -7211,7 +7272,7 @@
             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();
@@ -7220,7 +7281,8 @@
                 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();
                 }
             }
         }
@@ -7231,7 +7293,7 @@
             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);
@@ -7243,26 +7305,32 @@
         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() {
@@ -7270,17 +7338,22 @@
                 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++) {
@@ -7290,15 +7363,18 @@
                 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;
+            shapes?.length && 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();
         }
     }
     var CanvasContext = vue.defineComponent({
@@ -7316,9 +7392,9 @@
                 default: () => ({})
             }
         },
-        emits: [ "editPolygon" ],
+        emits: [ "editPolygon", "changePolygon" ],
         setup(props, {emit: emit, expose: expose}) {
-            const ns = vue.inject("ns", {}), mainBasaeRef = vue.ref(), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), drawCanvas = vue.ref(), setContainerWidthHeight = (canvasWidth, canvasHeight) => {
+            const ns = vue.inject("ns", {}), scaleTranslateManager = vue.inject("scaleTranslateManager", {}), mainBasaeRef = vue.ref(), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), drawCanvas = vue.ref(), canvasDragZoom = vue.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";
@@ -7328,7 +7404,7 @@
                     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;
@@ -7348,7 +7424,9 @@
                                 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", 
@@ -7359,15 +7437,25 @@
                             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;
@@ -7388,6 +7476,8 @@
                         renderImageLabel(rowInfo);
                     }
                 }));
+            })), vue.onUnmounted((() => {
+                drawCanvas.value.destroy(), canvasDragZoom.value.destroy();
             }));
             return expose({
                 rerenderImage: () => {
@@ -7395,6 +7485,9 @@
                         const rowInfo = vue.toRaw(props.rowInfo);
                         renderImageLabel(rowInfo);
                     }));
+                },
+                resetScaleOffset: () => {
+                    canvasDragZoom.value.reset();
                 }
             }), () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextSpinLoading, {
                 ref: mainBasaeRef,
@@ -7430,7 +7523,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", {
@@ -7511,7 +7604,28 @@
                 class: "label-text"
             }, [ t("next.labelme.deletePolyton") ]) ]) ]), 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;",
@@ -7603,7 +7717,7 @@
                 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 = vue.computed((() => {
                 const cfg = vue.unref(props.options);
@@ -7663,14 +7777,29 @@
                 isFullscreen.value = val, updateMainContentHeight(), vue.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) || elementPlus.ElMessage({
                     type: "info",
                     message: t("next.labelimg.labelNoUpdate")
                 });
-            };
+            }, scaleTranslate = vue.ref({
+                scale: 1,
+                x: 0,
+                y: 0
+            });
+            vue.provide("scaleTranslateManager", {
+                scaleTranslate: scaleTranslate,
+                onChangeScaleTranslate: val => {
+                    scaleTranslate.value = val;
+                },
+                onResetScaleTranslate: () => {
+                    canvasContextRef.value.resetScaleOffset();
+                }
+            });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
                 ref: layoutLabelRef,
                 class: [ ns.b(), props.className, isFullscreen.value ? ns.b("fullscreen") : "" ],
@@ -7703,7 +7832,8 @@
                     }, [ vue.createVNode(CanvasContext, {
                         ref: canvasContextRef,
                         rowInfo: currentNode.value,
-                        onEditPolygon: onEditPlygonChange
+                        onEditPolygon: onEditPlygon,
+                        onChangePolygon: onChangePolygon
                     }, null) ]) ]), vue.createVNode("footer", {
                         ref: footerRef,
                         class: [ ns.b("footer") ]
@@ -7809,7 +7939,7 @@
         })(app);
     };
     var index = {
-        version: "0.3.7",
+        version: "0.3.9",
         install: install
     };
     exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, exports.NextCrudTableVirtualized = NextCrudTableVirtualized, 
@@ -7856,7 +7986,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.7", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.3.9", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });