next-element-vue 0.3.0 → 0.3.1

package/dist/index.js

@@ -2,14 +2,14 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.3.0 v
- * 发布日期：2024-06-16
+ * 当前版本：0.3.1 v
+ * 发布日期：2024-06-22
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
 import { getCurrentInstance, inject, ref, computed, unref, isRef, defineComponent, createVNode, Fragment, openBlock, createElementBlock, createElementVNode, reactive, createTextVNode, resolveComponent, Teleport, isVNode, onUnmounted, provide, watch, markRaw, watchEffect, h, onMounted, toRaw, render, nextTick, toRef } from "vue";
 
-import { localeContextKey as localeContextKey$1, ElMessage, ElTooltip, ElScrollbar, ElDivider, ElColorPicker, ElSwitch, ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem, ElDrawer, ElMenuItem, ElSubMenu, ElMenu, ElContainer, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElInputNumber, ElForm, ElRow, ElButton, ElTable, ElTableColumn, ElCheckbox, ElMessageBox, ElPagination, ElDialog, ElTag, ElRadioGroup, ElRadio, ElUpload, ElImageViewer, ElImage, ElTreeSelect, ElTimeSelect, ElCheckboxGroup, ElEmpty, ElPopconfirm } from "element-plus";
+import { localeContextKey as localeContextKey$1, ElMessage, ElTooltip, ElScrollbar, ElDivider, ElColorPicker, ElSwitch, ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem, ElDrawer, ElMenuItem, ElSubMenu, ElMenu, ElContainer, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElInputNumber, ElForm, ElRow, ElButton, ElTable, ElTableColumn, ElCheckbox, ElMessageBox, ElPagination, ElDialog, ElTag, ElRadioGroup, ElRadio, ElUpload, ElImageViewer, ElImage, ElTreeSelect, ElTimeSelect, ElCheckboxGroup, ElEmpty, ElPopover, ElPopconfirm } from "element-plus";
 
 import { useDateFormat, useNow, useFullscreen } from "@vueuse/core";
 
@@ -892,7 +892,10 @@ var merge = createAssigner((function(object, source, srcIndex) {
         labelimg: {
             saveTxt: "保存中...",
             emptyLabelText: "暂无标签数据",
-            confirmDeleteLabel: "确定要删除该标注吗？"
+            confirmDeleteLabel: "确定要删除该标注吗？",
+            saveLabel: "保存当前标注",
+            instructions: "使用说明",
+            labelNoUpdate: "暂无标签数据更新"
         }
     }
 }, enLocale = {
@@ -967,7 +970,10 @@ var merge = createAssigner((function(object, source, srcIndex) {
         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 = {
@@ -1042,7 +1048,10 @@ var merge = createAssigner((function(object, source, srcIndex) {
         labelimg: {
             saveTxt: "保存中...",
             emptyLabelText: "暂无标签数据",
-            confirmDeleteLabel: "确定要删除该标注吗？"
+            confirmDeleteLabel: "确定要删除该标注吗？",
+            saveLabel: "保存当前标注",
+            instructions: "使用说明",
+            labelNoUpdate: "暂无标签数据更新"
         }
     }
 };
@@ -1225,13 +1234,16 @@ var defaultConfig$4 = {
     } ],
     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,
@@ -1624,7 +1636,19 @@ var tools_default = export_helper_default(tools_vue_vue_type_script_lang_default
 
 var view_default = export_helper_default(view_vue_vue_type_script_lang_default, [ [ "render", function(_ctx, _cache, $props, $setup, $data, $options) {
     return openBlock(), createElementBlock("svg", _hoisted_1283, _hoisted_3282);
-} ], [ "__file", "view.vue" ] ]), LayoutSetting = 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 = [ 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 openBlock(), createElementBlock("svg", _hoisted_1288, _hoisted_3287);
+} ], [ "__file", "warning.vue" ] ]), LayoutSetting = defineComponent({
     setup() {},
     render() {
         const _slots = inject("__slots__", {}), _ns = inject("__ns__", {}), _config = inject("options", {}), _updateOptions = inject("updateOptions", null), settingConfig = reactive({
@@ -1753,7 +1777,7 @@ var view_default = export_helper_default(view_vue_vue_type_script_lang_default,
                 class: _ns.be("config-bar-item", "label")
             }, [ createTextVNode("是否显示标签栏") ]), createVNode("div", {
                 class: _ns.be("config-bar-item", "value")
-            }, [ createVNode(resolveComponent("el-switch"), {
+            }, [ createVNode(ElSwitch, {
                 modelValue: _config.showTabs,
                 "onUpdate:modelValue": $event => _config.showTabs = $event
             }, null) ]) ]), _slots.setting?.() ]
@@ -1761,10 +1785,6 @@ var view_default = export_helper_default(view_vue_vue_type_script_lang_default,
     }
 });
 
-function _isSlot$8(s) {
-    return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s);
-}
-
 var HeaderTools = defineComponent({
     setup() {
         const locale = inject(localeContextKey, ref()), config = inject("options", {}), {t: t} = useLocale(), {toggle: toggle, isFullscreen: isFullscreen} = useFullscreen(), language = ref(computed((() => config.language)).value), settingDrawer = ref(!1);
@@ -1816,14 +1836,15 @@ var HeaderTools = defineComponent({
             }) ]),
             dropdown: () => {
                 let _slot;
-                return createVNode(ElDropdownMenu, null, _isSlot$8(_slot = _languageDropdown.map((item => createVNode(ElDropdownItem, {
+                return createVNode(ElDropdownMenu, null, "function" == typeof (s = _slot = _languageDropdown.map((item => createVNode(ElDropdownItem, {
                     command: item.value,
                     disabled: this.language === item.value
                 }, {
                     default: () => [ item.label ]
-                })))) ? _slot : {
+                })))) || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? _slot : {
                     default: () => [ _slot ]
                 });
+                var s;
             }
         }) ]), createVNode("li", null, [ createVNode("span", {
             style: {
@@ -1860,6 +1881,7 @@ var HeaderTools = defineComponent({
         }) ]) ]), slots[slots_config_headerToolsSuffix]?.(), createVNode("li", null, [ createVNode(ElDropdown, {
             "show-timeout": 70,
             "hide-timeout": 80,
+            "popper-class": _ns.be("header-tools", "userDropdown"),
             onCommand: command => {
                 _emit("changeUserDropdown", command), _config.onChangeUserDropdown && _config.onChangeUserDropdown(command);
             }
@@ -1875,15 +1897,17 @@ var HeaderTools = defineComponent({
                 default: () => [ createVNode(arrow_down_default, null, null) ]
             }) ]),
             dropdown: () => createVNode(ElDropdownMenu, null, {
-                default: () => [ _userDropdown?.map((item => {
-                    let _slot2;
-                    return createVNode(ElDropdownItem, {
-                        command: item.value,
-                        divided: !!item.divided
-                    }, _isSlot$8(_slot2 = _t(item.label)) ? _slot2 : {
-                        default: () => [ _slot2 ]
-                    });
-                })) ]
+                default: () => [ _userDropdown?.map((item => createVNode(ElDropdownItem, {
+                    command: item.value,
+                    divided: !!item.divided
+                }, {
+                    default: () => [ item.svg ? createVNode("span", {
+                        innerHTML: item.svg,
+                        class: "item-svg"
+                    }, null) : null, item.iconfont ? createVNode("i", {
+                        class: item.iconfont
+                    }, null) : null, _t(item.label) ]
+                }))) ]
             })
         }) ]), createVNode("li", null, [ createVNode("span", {
             style: {
@@ -4381,7 +4405,7 @@ const ns$8 = useNamespace("form"), InputTableSelect = defineComponent({
                     }
                 })(event, toRaw(row))
             }, null) : createVNode(ElRadio, {
-                label: value,
+                value: value,
                 onChange: () => {
                     sinleSelection.value = value, multipleSelection.value = [ row ];
                 }
@@ -4947,7 +4971,7 @@ var Element$6 = defineComponent({
             }, {
                 default: () => [ col.dicData && col.dicData.map((item => createVNode(ElRadio, {
                     key: item.value,
-                    label: item.value,
+                    value: item.value,
                     disabled: valueExist(item.disabled, !1)
                 }, {
                     default: () => [ item.label ]
@@ -5947,7 +5971,105 @@ const NextDragResize = withInstall(defineComponent({
     name: "NextDragResize",
     props: {},
     setup: () => () => createVNode(Fragment, null, [ createVNode(Fragment, null, null) ])
-})), colors = [ "#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc" ], convertToLabel = rect => {
+}));
+
+var ToolHeader = defineComponent({
+    props: {
+        isFullscreen: {
+            type: Boolean,
+            default: !1
+        }
+    },
+    emits: [ "fullscreen", "save" ],
+    setup(props, {emit: emit}) {
+        const _ns = inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
+            emit("fullscreen", val);
+        };
+        return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("ul", {
+            class: [ _ns.be("header", "tool") ]
+        }, [ createVNode("li", {
+            onClick: () => emit("save")
+        }, [ 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"
+        }, [ 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), createVNode("path", {
+            d: "M536 196.3h42.7v87.2H536zM368.7 641.2h220.7v42.7H368.7zM368.7 744h170.9v42.7H368.7z",
+            "p-id": "4274"
+        }, null) ]), createVNode("span", {
+            style: "padding-left: 3px"
+        }, [ t("next.labelimg.saveLabel") ]) ]) ]), createVNode("ul", {
+            class: [ _ns.be("header", "tool") ]
+        }, [ createVNode("li", {
+            style: "margin-right: 30px;"
+        }, [ createVNode(ElPopover, {
+            trigger: "hover",
+            placement: "bottom",
+            width: "none"
+        }, {
+            reference: () => createVNode("div", {
+                class: "flex-center"
+            }, [ createVNode("span", {
+                style: "padding-right: 3px"
+            }, [ t("next.labelimg.instructions") ]), createVNode(ElIcon, {
+                size: 14
+            }, {
+                default: () => [ createVNode(warning_default, null, null) ]
+            }) ]),
+            default: () => createVNode("ul", {
+                style: "font-size: 12px;white-space: nowrap;"
+            }, [ createVNode("li", null, [ createVNode("span", null, [ createTextVNode("W：") ]), createVNode("span", null, [ createTextVNode("鼠标移入图片中，长按W键，鼠标按下左键，移动鼠标开始绘制，鼠标抬起结束绘制") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("A：") ]), createVNode("span", null, [ createTextVNode("A键进入上一张图片进行标注") ]) ]), createVNode("li", null, [ createVNode("span", null, [ createTextVNode("D：") ]), createVNode("span", null, [ createTextVNode("D键进入下一张图片进行标注") ]) ]) ])
+        }) ]), props.isFullscreen ? createVNode("li", {
+            onClick: () => switchFillscreen(!1)
+        }, [ createVNode(ElTooltip, {
+            placement: "top",
+            content: "取消全屏"
+        }, {
+            default: () => [ 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"
+            }, [ 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) ]) ]
+        }) ]) : createVNode("li", {
+            onClick: () => switchFillscreen(!0)
+        }, [ createVNode(ElTooltip, {
+            placement: "top",
+            content: "全屏"
+        }, {
+            default: () => [ 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"
+            }, [ 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) => {
@@ -6001,7 +6123,7 @@ var ContextMenuLabel = defineComponent({
             labelRectWidthHeight.value.width = clientWidth, labelRectWidthHeight.value.height = clientHeight;
         }));
         const labelMenuRef = ref(), labelStyleFixed = 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",
@@ -6249,6 +6371,12 @@ var DraggableRect = defineComponent({
                 })),
                 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 = ref(!1), renderImageLabel = rowInfo => {
             labels.value = (rowInfo => rowInfo.labels ? rowInfo.labels.map((rect => {
                 const typeName = props.classes[rect.type];
@@ -6259,14 +6387,13 @@ var DraggableRect = defineComponent({
                 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));
@@ -6407,9 +6534,11 @@ var DraggableRect = defineComponent({
             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, 
@@ -6477,7 +6606,14 @@ var DraggableRect = defineComponent({
                     updateDraggableRectFixed(x, y, rect, index, colors[type]);
                 }));
             },
-            onDeleteLabel: onDeleteLabel
+            onDeleteLabel: onDeleteLabel,
+            rerenderImage: () => {
+                setContainerWidthHeight(0, 0), onCloseContentmenuLabel(), onCloseDraggableRectFixed(), 
+                nextTick((() => {
+                    const rowInfo = toRaw(props.rowInfo);
+                    renderImageLabel(rowInfo);
+                }));
+            }
         });
         return () => createVNode(Fragment, null, [ createVNode(NextSpinLoading, {
             loading: loadingImage.value,
@@ -6510,6 +6646,9 @@ var DraggableRect = defineComponent({
     }
 }), RightLabel = defineComponent({
     props: {
+        contentHeight: {
+            type: Number
+        },
         classes: {
             type: Array,
             default: () => []
@@ -6533,7 +6672,10 @@ var DraggableRect = defineComponent({
             immediate: !0
         });
         const renderContent = () => createVNode("div", {
-            class: [ ns.b("right") ]
+            class: [ ns.b("right") ],
+            style: {
+                height: props.contentHeight + "px"
+            }
         }, [ labels.value.length ? createVNode("ul", null, [ labels.value.map(((rect, index) => createVNode("li", {
             key: index,
             onClick: () => ((rect, index) => {
@@ -6567,7 +6709,7 @@ var DraggableRect = defineComponent({
         return () => createVNode(Fragment, null, [ renderContent() ]);
     }
 }), defaultConfig = {
-    mainContentHeight: 600
+    minContentHeight: 500
 };
 
 const ns$1 = useNamespace("labelimg");
@@ -6581,9 +6723,7 @@ var Element = defineComponent({
         },
         style: {
             type: Object,
-            default: () => ({
-                position: "unset"
-            })
+            default: () => ({})
         },
         rowKey: {
             type: String,
@@ -6666,9 +6806,8 @@ var Element = defineComponent({
             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 => {
@@ -6676,7 +6815,7 @@ var Element = defineComponent({
                 loading.value = !1;
             }), (() => {
                 loading.value = !1;
-            }));
+            })), !0);
         }, onPaginationPrev = () => {
             const imageLength = labelImages.value.length;
             let i = activateNodeIndex.value - 1;
@@ -6685,30 +6824,35 @@ var Element = defineComponent({
             const imageLength = labelImages.value.length;
             let i = activateNodeIndex.value + 1;
             i >= imageLength && (i = 0), onChangeActivateNode(i), emit("next-click");
-        }, canvasContextRef = ref(), layoutLabelRef = ref(), headerRef = ref(), mainRef = ref(), footerRef = ref(), mainContentHeight = ref(options.mainContentHeight);
-        onMounted((() => {
-            document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value, (() => {
-                nextTick((() => {
-                    layoutLabelRef.value.style.position = "unset";
-                    const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
-                    mainContentHeight.value = contentHeight;
-                }));
+        }, canvasContextRef = ref(), layoutLabelRef = ref(), headerRef = ref(), mainRef = ref(), footerRef = ref(), mainContentHeight = ref(options.minContentHeight), updateMainContentHeight = () => {
+            nextTick((() => {
+                const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
+                mainContentHeight.value = contentHeight;
             }));
+        };
+        onMounted((() => {
+            document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, (() => {
+                updateMainContentHeight();
+            })), window.addEventListener("resize", updateMainContentHeight);
         })), 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 = ref(!1), onSwitchFillscreen = val => {
+            isFullscreen.value = val, updateMainContentHeight(), nextTick((() => {
+                canvasContextRef.value.rerenderImage();
+            }));
         };
         expose({
             convertToLabel: convertToLabel,
             canvertToCanvas: canvertToCanvas
         });
-        return () => createVNode(Fragment, null, [ createVNode("div", {
+        const renderContent = () => 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
             }
@@ -6721,21 +6865,35 @@ var Element = defineComponent({
                 default: () => [ createVNode("header", {
                     ref: headerRef,
                     class: [ ns$1.b("header") ]
-                }, [ slots.header ? slots.header() : createVNode(Fragment, null, [ createVNode("ul", null, null), createVNode("ul", null, null) ]) ]), createVNode("div", {
-                    ref: mainRef,
-                    class: [ ns$1.b("main") ],
-                    style: {
-                        height: mainContentHeight.value + "px"
+                }, [ slots.header ? slots.header() : createVNode(ToolHeader, {
+                    isFullscreen: isFullscreen.value,
+                    onFullscreen: onSwitchFillscreen,
+                    onSave: () => {
+                        onChangeActivateNode(activateNodeIndex.value) || ElMessage({
+                            type: "info",
+                            message: t("next.labelimg.labelNoUpdate")
+                        });
                     }
-                }, [ createVNode("div", {
+                }, null) ]), createVNode("div", {
+                    ref: mainRef,
+                    class: [ ns$1.b("main") ]
+                }, [ createVNode(ElScrollbar, {
                     class: [ ns$1.be("main", "content") ]
-                }, [ createVNode(CanvasContext, {
-                    ref: canvasContextRef,
-                    contextClientHeight: mainContentHeight.value,
-                    classes: classes.value,
-                    rowInfo: currentNode.value,
-                    onChange: onChangeNodeRect
-                }, null) ]), createVNode(RightLabel, {
+                }, {
+                    default: () => [ createVNode("div", {
+                        class: [ ns$1.be("main", "content") ],
+                        style: {
+                            height: mainContentHeight.value + "px"
+                        }
+                    }, [ createVNode(CanvasContext, {
+                        ref: canvasContextRef,
+                        contextClientHeight: mainContentHeight.value,
+                        classes: classes.value,
+                        rowInfo: currentNode.value,
+                        onChange: onChangeNodeRect
+                    }, null) ]) ]
+                }), createVNode(RightLabel, {
+                    contentHeight: mainContentHeight.value,
                     classes: classes.value,
                     labels: activateNodeLabels.value,
                     onDelete: onDeleteLabelNode,
@@ -6780,7 +6938,8 @@ var Element = defineComponent({
                     default: () => [ createVNode(arrow_right_default, null, null) ]
                 }) ]) ]) ]
             }) ]
-        }) ]) ]);
+        }) ]);
+        return () => createVNode(Fragment, null, [ renderContent() ]);
     }
 });
 
@@ -6908,7 +7067,7 @@ const zoomDialog = app => {
             }));
         }
     });
-}, version = "0.3.0", install = function(app) {
+}, version = "0.3.1", install = function(app) {
     Object.keys(components).forEach((key => {
         const component = components[key];
         app.component(component.name, component);
@@ -6918,7 +7077,7 @@ const zoomDialog = app => {
 };
 
 var index = {
-    version: "0.3.0",
+    version: "0.3.1",
     install: install
 };