next-element-vue 0.3.0 → 0.3.2

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.3.0 v
- * 发布日期：2024-06-16
+ * 当前版本：0.3.2 v
+ * 发布日期：2024-06-27
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -794,7 +794,10 @@
             labelimg: {
                 saveTxt: "保存中...",
                 emptyLabelText: "暂无标签数据",
-                confirmDeleteLabel: "确定要删除该标注吗？"
+                confirmDeleteLabel: "确定要删除该标注吗？",
+                saveLabel: "保存当前标注",
+                instructions: "使用说明",
+                labelNoUpdate: "暂无标签数据更新"
             }
         }
     }, enLocale = {
@@ -869,7 +872,10 @@
             labelimg: {
                 saveTxt: "saving...",
                 emptyLabelText: "No label data",
-                confirmDeleteLabel: "Are you sure you want to delete this annotation?"
+                confirmDeleteLabel: "Are you sure you want to delete this annotation?",
+                saveLabel: "save label",
+                instructions: "instructions",
+                labelNoUpdate: "No label data update"
             }
         }
     }, zhtwLocale = {
@@ -944,7 +950,10 @@
             labelimg: {
                 saveTxt: "保存中...",
                 emptyLabelText: "暂无标签数据",
-                confirmDeleteLabel: "确定要删除该标注吗？"
+                confirmDeleteLabel: "确定要删除该标注吗？",
+                saveLabel: "保存当前标注",
+                instructions: "使用说明",
+                labelNoUpdate: "暂无标签数据更新"
             }
         }
     };
@@ -1090,13 +1099,16 @@
         } ],
         userDropdown: [ {
             value: "/",
-            label: "next.layout.home"
+            label: "next.layout.home",
+            svg: '<svg t="1718695810903" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11410" width="16" height="16"><path d="M988.672 502.272l-476.16-476.16-476.16 476.16c-8.704 8.704-8.704 22.528 0 31.232l1.536 1.536c8.704 8.704 22.528 8.704 31.232 0l443.392-443.392 443.392 443.392c8.704 8.704 22.528 8.704 31.232 0l1.536-1.536c8.704-8.704 8.704-22.528 0-31.232z" fill="" p-id="11411"></path><path d="M860.16 534.016c-12.288 0-22.016 9.728-22.016 22.016v333.312c0 54.272-27.648 64-47.104 64h-152.064v-227.84c0-25.088 0-59.392-44.544-59.392H418.816c-44.032 0-44.032 33.28-44.032 59.392v227.84h-153.6c-44.032 0-45.056-64-45.056-64v-333.312c0.512-12.288-8.704-22.528-20.992-23.04-12.288-0.512-22.528 8.704-23.04 20.992v368.64c0 65.536 70.144 75.264 70.144 75.264h217.088v-287.232h176.64v287.232H824.32c39.424 0 57.856-44.032 57.856-75.264v-366.592c0-12.288-9.728-22.016-22.016-22.016z" fill="" p-id="11412"></path></svg>'
         }, {
             value: "/personal",
-            label: "next.layout.personal"
+            label: "next.layout.personal",
+            svg: '<svg t="1718695007028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2161" width="16" height="16"><path d="M512 87.04c-136.704 0-247.808 111.104-247.808 247.808 0 98.816 58.368 184.32 142.336 223.744-155.136 45.568-268.8 188.928-268.8 358.912 0 10.752 8.704 19.456 19.456 19.456 10.752 0 19.456-8.704 19.456-19.456 0-184.832 150.528-335.36 335.36-335.36 136.704 0 247.808-111.104 247.808-247.808S648.704 87.04 512 87.04z m0 456.192c-115.2 0-208.384-93.696-208.384-208.384 0-115.2 93.696-208.384 208.384-208.384 115.2 0 208.384 93.696 208.384 208.384 0 114.688-93.184 208.384-208.384 208.384z m226.816 76.8c-8.704-6.656-20.992-5.12-27.648 3.584-6.656 8.704-5.12 20.992 3.584 27.648 83.968 64 132.096 161.28 132.096 266.752 0 10.752 8.704 19.456 19.456 19.456 10.752 0 19.456-8.704 19.456-19.456 0.512-118.272-53.248-226.816-146.944-297.984z" fill="" p-id="2162"></path></svg>'
         }, {
             value: "logOut",
             label: "next.layout.logOut",
+            svg: '<svg t="1718695049981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2313" width="16" height="16"><path d="M896 928H384a32 32 0 0 1-32-32v-128a32 32 0 0 1 64 0v96h448v-704h-448V256a32 32 0 1 1-64 0V128a32 32 0 0 1 32-32h512a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32z" fill="" p-id="2314"></path><path d="M608 544H192a32 32 0 0 1 0-64h416a32 32 0 0 1 0 64z" fill="" p-id="2315"></path><path d="M256 672a30.08 30.08 0 0 1-22.4-9.6l-128-128a30.72 30.72 0 0 1 0-44.8l128-128a31.36 31.36 0 1 1 44.8 44.8L173.44 512l104.96 105.6a30.72 30.72 0 0 1 0 44.8 30.08 30.08 0 0 1-22.4 9.6z" fill="" p-id="2316"></path></svg>',
             divided: !0
         } ],
         showTabs: !0,
@@ -1463,7 +1475,18 @@
     }, null, -1) ];
     var view_default = export_helper_default(view_vue_vue_type_script_lang_default, [ [ "render", function(_ctx, _cache, $props, $setup, $data, $options) {
         return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1283, _hoisted_3282);
-    } ], [ "__file", "view.vue" ] ]), LayoutSetting = vue.defineComponent({
+    } ], [ "__file", "view.vue" ] ]), warning_vue_vue_type_script_lang_default = {
+        name: "Warning"
+    }, _hoisted_1288 = {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+    }, _hoisted_3287 = [ vue.createElementVNode("path", {
+        fill: "currentColor",
+        d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm48-176a48 48 0 1 1-96 0 48 48 0 0 1 96 0zm-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z"
+    }, null, -1) ];
+    var warning_default = export_helper_default(warning_vue_vue_type_script_lang_default, [ [ "render", function(_ctx, _cache, $props, $setup, $data, $options) {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1288, _hoisted_3287);
+    } ], [ "__file", "warning.vue" ] ]), LayoutSetting = vue.defineComponent({
         setup() {},
         render() {
             const _slots = vue.inject("__slots__", {}), _ns = vue.inject("__ns__", {}), _config = vue.inject("options", {}), _updateOptions = vue.inject("updateOptions", null), settingConfig = vue.reactive({
@@ -1592,16 +1615,13 @@
                     class: _ns.be("config-bar-item", "label")
                 }, [ vue.createTextVNode("是否显示标签栏") ]), vue.createVNode("div", {
                     class: _ns.be("config-bar-item", "value")
-                }, [ vue.createVNode(vue.resolveComponent("el-switch"), {
+                }, [ vue.createVNode(elementPlus.ElSwitch, {
                     modelValue: _config.showTabs,
                     "onUpdate:modelValue": $event => _config.showTabs = $event
                 }, null) ]) ]), _slots.setting?.() ]
             });
         }
     });
-    function _isSlot$8(s) {
-        return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
-    }
     var HeaderTools = vue.defineComponent({
         setup() {
             const locale = vue.inject(localeContextKey, vue.ref()), config = vue.inject("options", {}), {t: t} = useLocale(), {toggle: toggle, isFullscreen: isFullscreen} = core.useFullscreen(), language = vue.ref(vue.computed((() => config.language)).value), settingDrawer = vue.ref(!1);
@@ -1653,14 +1673,15 @@
                 }) ]),
                 dropdown: () => {
                     let _slot;
-                    return vue.createVNode(elementPlus.ElDropdownMenu, null, _isSlot$8(_slot = _languageDropdown.map((item => vue.createVNode(elementPlus.ElDropdownItem, {
+                    return vue.createVNode(elementPlus.ElDropdownMenu, null, "function" == typeof (s = _slot = _languageDropdown.map((item => vue.createVNode(elementPlus.ElDropdownItem, {
                         command: item.value,
                         disabled: this.language === item.value
                     }, {
                         default: () => [ item.label ]
-                    })))) ? _slot : {
+                    })))) || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s) ? _slot : {
                         default: () => [ _slot ]
                     });
+                    var s;
                 }
             }) ]), vue.createVNode("li", null, [ vue.createVNode("span", {
                 style: {
@@ -1697,6 +1718,7 @@
             }) ]) ]), slots[slots_config_headerToolsSuffix]?.(), vue.createVNode("li", null, [ vue.createVNode(elementPlus.ElDropdown, {
                 "show-timeout": 70,
                 "hide-timeout": 80,
+                "popper-class": _ns.be("header-tools", "userDropdown"),
                 onCommand: command => {
                     _emit("changeUserDropdown", command), _config.onChangeUserDropdown && _config.onChangeUserDropdown(command);
                 }
@@ -1712,15 +1734,17 @@
                     default: () => [ vue.createVNode(arrow_down_default, null, null) ]
                 }) ]),
                 dropdown: () => vue.createVNode(elementPlus.ElDropdownMenu, null, {
-                    default: () => [ _userDropdown?.map((item => {
-                        let _slot2;
-                        return vue.createVNode(elementPlus.ElDropdownItem, {
-                            command: item.value,
-                            divided: !!item.divided
-                        }, _isSlot$8(_slot2 = _t(item.label)) ? _slot2 : {
-                            default: () => [ _slot2 ]
-                        });
-                    })) ]
+                    default: () => [ _userDropdown?.map((item => vue.createVNode(elementPlus.ElDropdownItem, {
+                        command: item.value,
+                        divided: !!item.divided
+                    }, {
+                        default: () => [ item.svg ? vue.createVNode("span", {
+                            innerHTML: item.svg,
+                            class: "item-svg"
+                        }, null) : null, item.iconfont ? vue.createVNode("i", {
+                            class: item.iconfont
+                        }, null) : null, _t(item.label) ]
+                    }))) ]
                 })
             }) ]), vue.createVNode("li", null, [ vue.createVNode("span", {
                 style: {
@@ -3135,6 +3159,8 @@
         settingBtn: !0,
         operations: !0,
         operationsWidth: 260,
+        operationsHeaderAlign: "center",
+        operationsColumnAlign: "center",
         operationsBtnPlain: !1,
         operationsBtnText: !0,
         operationsBtnSize: "small",
@@ -3728,7 +3754,9 @@
                     }, mergeDicData = loopDicData(columnOption.dicData);
                     return vue.createVNode("span", null, [ _formatterColumnValue(row[columnOption.prop], mergeDicData) ]);
                 }
-                return null;
+                return columnOption.cellUnit ? vue.createVNode(vue.Fragment, null, [ vue.createVNode("span", null, [ row[columnOption.prop] ]), vue.createVNode("em", {
+                    class: "cell-unit"
+                }, [ columnOption.cellUnit ]) ]) : null;
             };
             return () => vue.createVNode(vue.Fragment, null, [ !columnOption.hide && vue.createVNode(elementPlus.ElTableColumn, {
                 prop: columnOption.prop,
@@ -3759,8 +3787,8 @@
                     fixed: "right",
                     label: t("next.table.operation"),
                     width: options.operationsWidth,
-                    headerAlign: options.headerAlign,
-                    align: options.cellAlign
+                    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,
@@ -4155,7 +4183,7 @@
                         }
                     })(event, vue.toRaw(row))
                 }, null) : vue.createVNode(elementPlus.ElRadio, {
-                    label: value,
+                    value: value,
                     onChange: () => {
                         sinleSelection.value = value, multipleSelection.value = [ row ];
                     }
@@ -4717,7 +4745,7 @@
                 }, {
                     default: () => [ col.dicData && col.dicData.map((item => vue.createVNode(elementPlus.ElRadio, {
                         key: item.value,
-                        label: item.value,
+                        value: item.value,
                         disabled: valueExist(item.disabled, !1)
                     }, {
                         default: () => [ item.label ]
@@ -5199,7 +5227,8 @@
                 getFormExpose: () => addEditFormRef.value?.getFormExpose(),
                 updateColumns: ops => {
                     _updateColumnsAll(ops);
-                }
+                },
+                getSearchFormParams: () => _searchFormParams.value
             });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
                 ref: crudTableRef,
@@ -5704,7 +5733,117 @@
         name: "NextDragResize",
         props: {},
         setup: () => () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, null) ])
-    })), colors = [ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ], convertToLabel = rect => {
+    }));
+    var ToolHeader = vue.defineComponent({
+        props: {
+            isFullscreen: {
+                type: Boolean,
+                default: !1
+            },
+            imageIndex: {
+                type: Number,
+                default: 0
+            },
+            imageLength: {
+                type: Number,
+                default: 0
+            }
+        },
+        emits: [ "fullscreen", "save" ],
+        setup(props, {emit: emit}) {
+            const _ns = vue.inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
+                emit("fullscreen", val);
+            };
+            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
+                class: [ _ns.be("header", "tool") ]
+            }, [ vue.createVNode("li", {
+                class: "hover",
+                onClick: () => emit("save")
+            }, [ vue.createVNode("svg", {
+                t: "1719034799379",
+                class: "icon",
+                viewBox: "0 0 1024 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "4272",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M831.4 252.2L711.5 132.4c-10.3-10.3-24.2-16.1-38.8-16.1h-450c-23.3 0-42.2 18.9-42.2 42.2v709.4c0 23.3 18.9 42.2 42.2 42.2h582.6c23.3 0 42.2-18.9 42.2-42.2V291c-0.1-14.5-5.8-28.5-16.1-38.8zM619.6 159v159.8c0 4-3.3 7.3-7.3 7.3H387.2c-4 0-7.3-3.3-7.3-7.3V159h239.7z m67.7 708.4H340.8v-292c0-3.9 3.2-7.1 7.1-7.1h332.4c3.9 0 7.1 3.2 7.1 7.1v292z m117.4 0H730v-292c0-27.5-22.3-49.8-49.8-49.8H347.8c-27.5 0-49.8 22.3-49.8 49.8v292h-74.7V159.1h113.9v159.8c0 27.6 22.4 50.1 50.1 50.1h225.1c27.6 0 50.1-22.4 50.1-50.1V159h10.4c3.2 0 6.3 1.3 8.6 3.6l119.9 119.9c2.3 2.3 3.6 5.3 3.6 8.6l-0.3 576.3z",
+                "p-id": "4273"
+            }, null), vue.createVNode("path", {
+                d: "M536 196.3h42.7v87.2H536zM368.7 641.2h220.7v42.7H368.7zM368.7 744h170.9v42.7H368.7z",
+                "p-id": "4274"
+            }, null) ]), vue.createVNode("span", {
+                style: "padding-left: 3px"
+            }, [ t("next.labelimg.saveLabel") ]) ]) ]), vue.createVNode("ul", {
+                class: [ _ns.be("header", "tool") ]
+            }, [ props.imageLength ? vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("第 "), props.imageIndex + 1, vue.createTextVNode(" 张") ]), vue.createVNode("em", {
+                style: "padding: 0 5px;"
+            }, [ vue.createTextVNode("/") ]), vue.createVNode("span", null, [ vue.createTextVNode("共 "), props.imageLength, vue.createTextVNode(" 张") ]) ]) : null, vue.createVNode("li", {
+                style: "margin-right: 30px;",
+                class: "hover"
+            }, [ vue.createVNode(elementPlus.ElPopover, {
+                trigger: "hover",
+                placement: "bottom",
+                width: "none"
+            }, {
+                reference: () => vue.createVNode("div", {
+                    class: "flex-center"
+                }, [ vue.createVNode("span", {
+                    style: "padding-right: 3px"
+                }, [ t("next.labelimg.instructions") ]), vue.createVNode(elementPlus.ElIcon, {
+                    size: 14
+                }, {
+                    default: () => [ vue.createVNode(warning_default, null, null) ]
+                }) ]),
+                default: () => vue.createVNode("ul", {
+                    style: "font-size: 12px;white-space: nowrap;"
+                }, [ vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("W：") ]), vue.createVNode("span", null, [ vue.createTextVNode("鼠标移入图片中，长按W键，鼠标按下左键，移动鼠标开始绘制，鼠标抬起结束绘制") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("A：") ]), vue.createVNode("span", null, [ vue.createTextVNode("A键进入上一张图片进行标注") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("D：") ]), vue.createVNode("span", null, [ vue.createTextVNode("D键进入下一张图片进行标注") ]) ]) ])
+            }) ]), props.isFullscreen ? vue.createVNode("li", {
+                class: "hover",
+                onClick: () => switchFillscreen(!1)
+            }, [ vue.createVNode(elementPlus.ElTooltip, {
+                placement: "top",
+                content: "取消全屏"
+            }, {
+                default: () => [ vue.createVNode("svg", {
+                    t: "1719035442027",
+                    class: "icon",
+                    viewBox: "0 0 1024 1024",
+                    version: "1.1",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    "p-id": "5388",
+                    width: "18",
+                    height: "18"
+                }, [ vue.createVNode("path", {
+                    d: "M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z",
+                    "p-id": "5389"
+                }, null) ]) ]
+            }) ]) : vue.createVNode("li", {
+                class: "hover",
+                onClick: () => switchFillscreen(!0)
+            }, [ vue.createVNode(elementPlus.ElTooltip, {
+                placement: "top",
+                content: "全屏"
+            }, {
+                default: () => [ vue.createVNode("svg", {
+                    t: "1719035375323",
+                    class: "icon",
+                    viewBox: "0 0 1024 1024",
+                    version: "1.1",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    "p-id": "5241",
+                    width: "18",
+                    height: "18"
+                }, [ vue.createVNode("path", {
+                    d: "M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z",
+                    "p-id": "5242"
+                }, null) ]) ]
+            }) ]) ]) ]) ]);
+        }
+    });
+    const colors = [ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ], convertToLabel = rect => {
         const label_type = rect.type, x_center = rect.startX + rect.rectWidth / 2, y_center = rect.startY + rect.rectHeight / 2;
         return [ label_type, parseFloat((x_center / rect.canvasWidth).toFixed(6)), parseFloat((y_center / rect.canvasHeight).toFixed(6)), parseFloat((rect.rectWidth / rect.canvasWidth).toFixed(6)), parseFloat((rect.rectHeight / rect.canvasHeight).toFixed(6)) ];
     }, canvertToCanvas = (labelData, canvasWidth, canvasHeight) => {
@@ -5757,7 +5896,7 @@
                 labelRectWidthHeight.value.width = clientWidth, labelRectWidthHeight.value.height = clientHeight;
             }));
             const labelMenuRef = vue.ref(), labelStyleFixed = vue.computed((() => {
-                const {left: left, top: top, canvasHeight: canvasHeight} = props.labelRect, height_diff = top + labelRectWidthHeight.value.height - canvasHeight;
+                const {left: left, top: top} = props.labelRect, height_diff = top + labelRectWidthHeight.value.height - window.innerHeight;
                 let y = top;
                 return height_diff > 0 && (y -= height_diff), {
                     top: y + "px",
@@ -5910,7 +6049,7 @@
                 parentRect = props.parentEl.getBoundingClientRect(), document.addEventListener("mousemove", onMousemove), 
                 document.addEventListener("mouseup", onMouseup);
             })), vue.onUnmounted((() => {
-                document.removeEventListener("mousemove", onMousemove, !1), document.removeEventListener("mouseup", onMouseup, !1);
+                document.removeEventListener("mousemove", onMousemove), document.removeEventListener("mouseup", onMouseup);
             })), {
                 onMousedown: e => {
                     e.preventDefault(), isDraggle.value = !0, draggleOffset.value.diff_x = e.offsetX, 
@@ -5918,7 +6057,7 @@
                 },
                 onMouseup: onMouseup,
                 onContextmenu: e => {
-                    e.preventDefault(), emit("contextmenu", e, rect.value);
+                    e.preventDefault(), e.preventDefault(), emit("contextmenu", e, rect.value);
                 },
                 rect: rect,
                 onMousedownDot: (e, corner) => {
@@ -6003,6 +6142,12 @@
                     })),
                     label_txt: yolo_label.join("\n")
                 };
+            }, 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", 
+                canvasRectRef.value.width = canvasWidth, canvasRectRef.value.height = canvasHeight, 
+                canvasRectRef.value.style.width = canvasWidth + "px", canvasRectRef.value.style.height = canvasHeight + "px";
             }, loadingImage = vue.ref(!1), renderImageLabel = rowInfo => {
                 labels.value = (rowInfo => rowInfo.labels ? rowInfo.labels.map((rect => {
                     const typeName = props.classes[rect.type];
@@ -6013,14 +6158,13 @@
                     const image = new Image;
                     image.src = rowInfo.imageSrc, loadingImage.value = !0, image.onload = () => {
                         loadingImage.value = !1;
-                        const {width: width, height: height} = image, canvasHeight = clientHeight, scaleFactor = parseFloat((canvasHeight / height).toFixed(3)), canvasWidth = Math.ceil(width * scaleFactor);
-                        ((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", 
-                            canvasRectRef.value.width = canvasWidth, canvasRectRef.value.height = canvasHeight, 
-                            canvasRectRef.value.style.width = canvasWidth + "px", canvasRectRef.value.style.height = canvasHeight + "px";
-                        })(canvasWidth, canvasHeight), labels.value = ((labels, canvasHeight) => {
+                        let {width: width, height: height} = image;
+                        if (height > clientHeight) {
+                            const scale = height / clientHeight;
+                            height = clientHeight, image.style.height = height + "px", width /= scale;
+                        }
+                        const canvasHeight = height, scaleFactor = parseFloat((canvasHeight / height).toFixed(3)), canvasWidth = Math.ceil(width * scaleFactor);
+                        setContainerWidthHeight(canvasWidth, canvasHeight), labels.value = ((labels, canvasHeight) => {
                             let scale_rects = [];
                             for (let i = 0; i < labels.length; i++) {
                                 const rect = labels[i], scale = parseFloat((canvasHeight / rect.canvasHeight).toFixed(3));
@@ -6075,26 +6219,13 @@
                         });
                         drawBaseCanvas.value.updateLabels = updateLabels, drawBaseCanvas.value.addDrawRect = addDrawRect, 
                         drawBaseCanvas.value.hitCanvasLabel = hitCanvasLabel;
-                        const {clearCanvas: clearCanvas} = ((canvas, callback, keyW) => {
+                        const {clearCanvas: clearCanvas, removeEventAll: removeEventAll} = ((canvas, callback, keyW) => {
                             const canvasWidth = canvas.width, canvasHeight = canvas.height, ctx = canvas?.getContext("2d"), clearCanvas = () => {
                                 ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                             };
                             clearCanvas();
                             let startX, startY, endX, endY, isDrawing = !1, isRectDraw = !1, isWKeyPressed = !1;
-                            document.addEventListener("keydown", (event => {
-                                "KeyW" === event.code && (isWKeyPressed = !0, canvas.style.cursor = "crosshair", 
-                                canvas.style.zIndex = "11", keyW && keyW());
-                            })), document.addEventListener("keyup", (event => {
-                                isDrawing || "KeyW" === event.code && (isWKeyPressed = !1, canvas.style.cursor = "unset", 
-                                canvas.style.zIndex = "0");
-                            })), canvas.addEventListener("mousedown", (e => {
-                                isWKeyPressed && (isDrawing = !0, startX = e.offsetX, startY = e.offsetY);
-                            })), canvas.addEventListener("mousemove", (e => {
-                                isDrawing && isWKeyPressed && (isRectDraw = !0, endX = e.offsetX, endY = e.offsetY, 
-                                drawRect());
-                            })), canvas.addEventListener("mouseup", (() => {
-                                if (!isRectDraw) return;
-                                isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", canvas.style.zIndex = "0";
+                            const drawRectDone = () => {
                                 const rectWidth = Math.abs(endX - startX), rectHeight = Math.abs(endY - startY);
                                 startX > endX && (startX = endX), startY > endY && (startY = endY), callback && callback({
                                     startX: startX,
@@ -6106,8 +6237,30 @@
                                 }, {
                                     endX: endX,
                                     endY: endY
-                                }), isRectDraw = !1;
-                            }));
+                                });
+                            }, documentKeydown = event => {
+                                "KeyW" === event.code && (isWKeyPressed = !0, canvas.style.cursor = "crosshair", 
+                                canvas.style.zIndex = "11", keyW && keyW());
+                            }, documentKeyup = event => {
+                                isDrawing || "KeyW" === event.code && (isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                                canvas.style.zIndex = "0");
+                            }, documentMouseup = () => {
+                                isRectDraw && (isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                                canvas.style.zIndex = "0", drawRectDone(), isRectDraw = !1);
+                            };
+                            document.addEventListener("keydown", documentKeydown), document.addEventListener("keyup", documentKeyup), 
+                            document.addEventListener("mouseup", documentMouseup);
+                            const canvasMousedown = e => {
+                                isWKeyPressed && (isDrawing = !0, startX = e.offsetX, startY = e.offsetY);
+                            }, canvasMousemove = e => {
+                                isDrawing && isWKeyPressed && (isRectDraw = !0, endX = e.offsetX, endY = e.offsetY, 
+                                drawRect());
+                            }, canvasMouseup = e => {
+                                e.stopPropagation(), isRectDraw && (isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                                canvas.style.zIndex = "0", drawRectDone(), isRectDraw = !1);
+                            };
+                            canvas.addEventListener("mousedown", canvasMousedown), canvas.addEventListener("mousemove", canvasMousemove), 
+                            canvas.addEventListener("mouseup", canvasMouseup);
                             const drawRect = (color = "#f30635") => {
                                 clearCanvas(), ctx.strokeStyle = color, ctx.strokeRect(startX, startY, endX - startX, endY - startY);
                             };
@@ -6115,14 +6268,19 @@
                                 canvas: canvas,
                                 ctx: ctx,
                                 clearCanvas: clearCanvas,
-                                drawRect: drawRect
+                                drawRect: drawRect,
+                                removeEventAll: () => {
+                                    document.removeEventListener("mousedown", documentKeydown), document.removeEventListener("keyup", documentKeyup), 
+                                    document.removeEventListener("mouseup", documentMouseup), canvas.removeEventListener("mousedown", canvasMousedown), 
+                                    canvas.removeEventListener("mousemove", canvasMousemove), canvas.removeEventListener("mouseup", canvasMouseup);
+                                }
                             };
                         })(canvasRectRef.value, ((rect, {endX: endX, endY: endY}) => {
                             activate_add_label.value = rect, drawBaseCanvas.value.addDrawRect(rect), updateContextmenuLabelFixed(endX, endY, rect);
                         }), (() => {
                             onCloseDraggableRectFixed();
                         }));
-                        drawBaseCanvas.value.clearCanvasRect = clearCanvas;
+                        drawBaseCanvas.value.clearCanvasRect = clearCanvas, drawBaseCanvas.value.removeEventAll = removeEventAll;
                     }, image.onerror = () => {
                         loadingImage.value = !1;
                     };
@@ -6154,6 +6312,8 @@
                         renderImageLabel(rowInfo);
                     }
                 }));
+            })), vue.onUnmounted((() => {
+                drawBaseCanvas.value.removeEventAll();
             }));
             const contextmenuLabelFixed = vue.ref({
                 show: !1,
@@ -6161,9 +6321,11 @@
                 left: 0,
                 activateRect: null
             }), updateContextmenuLabelFixed = (x, y, rect) => {
-                contextmenuLabelFixed.value.show = !0, contextmenuLabelFixed.value.left = x, contextmenuLabelFixed.value.top = y, 
-                contextmenuLabelFixed.value.canvasWidth = canvasBaseRef.value.width, contextmenuLabelFixed.value.canvasHeight = canvasBaseRef.value.height, 
-                contextmenuLabelFixed.value.activateRect = rect, activate_add_label.value = rect;
+                const contextRect = canvasBaseRef.value.getBoundingClientRect();
+                contextmenuLabelFixed.value.show = !0, contextmenuLabelFixed.value.left = x + contextRect.x, 
+                contextmenuLabelFixed.value.top = y + contextRect.y, contextmenuLabelFixed.value.canvasWidth = canvasBaseRef.value.width, 
+                contextmenuLabelFixed.value.canvasHeight = canvasBaseRef.value.height, contextmenuLabelFixed.value.activateRect = rect, 
+                activate_add_label.value = rect;
             }, onCloseContentmenuLabel = () => {
                 contextmenuLabelFixed.value.show = !1, contextmenuLabelFixed.value.top = 0, contextmenuLabelFixed.value.left = 0, 
                 contextmenuLabelFixed.value.activateRect = null, activate_add_label.value = null, 
@@ -6227,11 +6389,18 @@
                 onCloseContentmenuLabel: onCloseContentmenuLabel,
                 onSelectedLabel: (rect, index) => {
                     onCloseDraggableRectFixed(), vue.nextTick((() => {
-                        const {startX: x, startY: y, type: type} = rect;
-                        updateDraggableRectFixed(x, y, rect, index, colors[type]);
+                        const {startX: x, startY: y, type: type} = rect, color = colors[type];
+                        updateDraggableRectFixed(x, y, labels.value[index], index, color);
                     }));
                 },
-                onDeleteLabel: onDeleteLabel
+                onDeleteLabel: onDeleteLabel,
+                rerenderImage: () => {
+                    setContainerWidthHeight(0, 0), onCloseContentmenuLabel(), onCloseDraggableRectFixed(), 
+                    vue.nextTick((() => {
+                        const rowInfo = vue.toRaw(props.rowInfo);
+                        renderImageLabel(rowInfo);
+                    }));
+                }
             });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextSpinLoading, {
                 loading: loadingImage.value,
@@ -6264,6 +6433,9 @@
         }
     }), RightLabel = vue.defineComponent({
         props: {
+            contentHeight: {
+                type: Number
+            },
             classes: {
                 type: Array,
                 default: () => []
@@ -6287,7 +6459,10 @@
                 immediate: !0
             });
             const renderContent = () => vue.createVNode("div", {
-                class: [ ns.b("right") ]
+                class: [ ns.b("right") ],
+                style: {
+                    height: props.contentHeight + "px"
+                }
             }, [ labels.value.length ? vue.createVNode("ul", null, [ labels.value.map(((rect, index) => vue.createVNode("li", {
                 key: index,
                 onClick: () => ((rect, index) => {
@@ -6300,7 +6475,7 @@
                 class: "label-line"
             }, null), vue.createVNode("span", null, [ rect.typeName ]) ]), vue.createVNode(elementPlus.ElPopconfirm, {
                 title: t("next.labelimg.confirmDeleteLabel"),
-                width: 180,
+                width: 200,
                 onConfirm: () => (rect => {
                     emit("delete", rect);
                 })(rect)
@@ -6321,7 +6496,7 @@
             return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
     }), defaultConfig = {
-        mainContentHeight: 600
+        minContentHeight: 500
     };
     const ns$1 = useNamespace("labelimg");
     var Element = vue.defineComponent({
@@ -6333,9 +6508,7 @@
             },
             style: {
                 type: Object,
-                default: () => ({
-                    position: "unset"
-                })
+                default: () => ({})
             },
             rowKey: {
                 type: String,
@@ -6418,9 +6591,8 @@
                 if (loading.value) return;
                 loading.value = !0;
                 const {node: node, label_txt: label_txt} = formatNodeLabels();
-                if (canvasContextRef.value.onCloseDraggableRectFixed(), isChangeNodeLabels()) return activateNodeIndex.value = index, 
-                void (loading.value = !1);
-                emit("save", {
+                return canvasContextRef.value.onCloseDraggableRectFixed(), isChangeNodeLabels() ? (activateNodeIndex.value = index, 
+                loading.value = !1, !1) : (emit("save", {
                     node: node,
                     label_txt: label_txt
                 }, (imageItem => {
@@ -6428,7 +6600,7 @@
                     loading.value = !1;
                 }), (() => {
                     loading.value = !1;
-                }));
+                })), !0);
             }, onPaginationPrev = () => {
                 const imageLength = labelImages.value.length;
                 let i = activateNodeIndex.value - 1;
@@ -6437,30 +6609,35 @@
                 const imageLength = labelImages.value.length;
                 let i = activateNodeIndex.value + 1;
                 i >= imageLength && (i = 0), onChangeActivateNode(i), emit("next-click");
-            }, canvasContextRef = vue.ref(), layoutLabelRef = vue.ref(), headerRef = vue.ref(), mainRef = vue.ref(), footerRef = vue.ref(), mainContentHeight = vue.ref(options.mainContentHeight);
-            vue.onMounted((() => {
-                document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value, (() => {
-                    vue.nextTick((() => {
-                        layoutLabelRef.value.style.position = "unset";
-                        const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
-                        mainContentHeight.value = contentHeight;
-                    }));
+            }, canvasContextRef = vue.ref(), layoutLabelRef = vue.ref(), headerRef = vue.ref(), mainRef = vue.ref(), footerRef = vue.ref(), mainContentHeight = vue.ref(options.minContentHeight), updateMainContentHeight = () => {
+                vue.nextTick((() => {
+                    const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
+                    mainContentHeight.value = contentHeight;
                 }));
+            };
+            vue.onMounted((() => {
+                document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, (() => {
+                    updateMainContentHeight();
+                })), window.addEventListener("resize", updateMainContentHeight);
             })), vue.onUnmounted((() => {
-                document.removeEventListener("keydown", onKeydownPrevNext);
+                document.removeEventListener("keydown", onKeydownPrevNext), window.removeEventListener("resize", updateMainContentHeight);
             }));
             const onSelectLabelNode = (rect, index) => {
                 canvasContextRef.value.onSelectedLabel(rect, index);
             }, onDeleteLabelNode = rect => {
                 canvasContextRef.value.onDeleteLabel(rect);
+            }, isFullscreen = vue.ref(!1), onSwitchFillscreen = val => {
+                isFullscreen.value = val, updateMainContentHeight(), vue.nextTick((() => {
+                    canvasContextRef.value.rerenderImage();
+                }));
             };
             expose({
                 convertToLabel: convertToLabel,
                 canvertToCanvas: canvertToCanvas
             });
-            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
+            const renderContent = () => vue.createVNode("div", {
                 ref: layoutLabelRef,
-                class: [ ns$1.b(), props.className ],
+                class: [ ns$1.b(), props.className, isFullscreen.value ? ns$1.b("fullscreen") : "" ],
                 style: {
                     ...props.style
                 }
@@ -6473,21 +6650,37 @@
                     default: () => [ vue.createVNode("header", {
                         ref: headerRef,
                         class: [ ns$1.b("header") ]
-                    }, [ slots.header ? slots.header() : vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", null, null), vue.createVNode("ul", null, null) ]) ]), vue.createVNode("div", {
-                        ref: mainRef,
-                        class: [ ns$1.b("main") ],
-                        style: {
-                            height: mainContentHeight.value + "px"
+                    }, [ slots.header ? slots.header() : vue.createVNode(ToolHeader, {
+                        isFullscreen: isFullscreen.value,
+                        imageIndex: activateNodeIndex.value,
+                        imageLength: labelImages.value.length,
+                        onFullscreen: onSwitchFillscreen,
+                        onSave: () => {
+                            onChangeActivateNode(activateNodeIndex.value) || elementPlus.ElMessage({
+                                type: "info",
+                                message: t("next.labelimg.labelNoUpdate")
+                            });
                         }
-                    }, [ vue.createVNode("div", {
+                    }, null) ]), vue.createVNode("div", {
+                        ref: mainRef,
+                        class: [ ns$1.b("main") ]
+                    }, [ vue.createVNode(elementPlus.ElScrollbar, {
                         class: [ ns$1.be("main", "content") ]
-                    }, [ vue.createVNode(CanvasContext, {
-                        ref: canvasContextRef,
-                        contextClientHeight: mainContentHeight.value,
-                        classes: classes.value,
-                        rowInfo: currentNode.value,
-                        onChange: onChangeNodeRect
-                    }, null) ]), vue.createVNode(RightLabel, {
+                    }, {
+                        default: () => [ vue.createVNode("div", {
+                            class: [ ns$1.be("main", "content") ],
+                            style: {
+                                height: mainContentHeight.value + "px"
+                            }
+                        }, [ vue.createVNode(CanvasContext, {
+                            ref: canvasContextRef,
+                            contextClientHeight: mainContentHeight.value,
+                            classes: classes.value,
+                            rowInfo: currentNode.value,
+                            onChange: onChangeNodeRect
+                        }, null) ]) ]
+                    }), vue.createVNode(RightLabel, {
+                        contentHeight: mainContentHeight.value,
                         classes: classes.value,
                         labels: activateNodeLabels.value,
                         onDelete: onDeleteLabelNode,
@@ -6532,7 +6725,8 @@
                         default: () => [ vue.createVNode(arrow_right_default, null, null) ]
                     }) ]) ]) ]
                 }) ]
-            }) ]) ]);
+            }) ]);
+            return () => vue.createVNode(vue.Fragment, null, [ renderContent() ]);
         }
     });
     const ns = useNamespace("labelimg-preview");
@@ -6664,7 +6858,7 @@
         })(app);
     };
     var index = {
-        version: "0.3.0",
+        version: "0.3.2",
         install: install
     };
     exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, exports.NextCrudTableVirtualized = NextCrudTableVirtualized, 
@@ -6710,7 +6904,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.0", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.3.2", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });