next-element-vue 0.3.3 → 0.3.4

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.3.3 v
- * 发布日期：2024-07-23
+ * 当前版本：0.3.4 v
+ * 发布日期：2024-08-10
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -798,6 +798,12 @@
                 saveLabel: "保存当前标注",
                 instructions: "使用说明",
                 labelNoUpdate: "暂无标签数据更新"
+            },
+            labelme: {
+                saveLabel: "保存",
+                createPolygon: "创建多边形",
+                editPolygon: "编辑多边形",
+                deletePolyton: "删除多边形"
             }
         }
     }, enLocale = {
@@ -876,6 +882,12 @@
                 saveLabel: "save label",
                 instructions: "instructions",
                 labelNoUpdate: "No label data update"
+            },
+            labelme: {
+                saveLabel: "saving...",
+                createPolygon: "create polygon",
+                editPolygon: "edit polygon",
+                deletePolyton: "delete polygon"
             }
         }
     }, zhtwLocale = {
@@ -954,6 +966,9 @@
                 saveLabel: "保存当前标注",
                 instructions: "使用说明",
                 labelNoUpdate: "暂无标签数据更新"
+            },
+            labelme: {
+                saveLabel: "保存"
             }
         }
     };
@@ -3289,7 +3304,7 @@
                     return start.setTime(start.getTime() - 94608e6), [ start, end ];
                 }
             } ], _onChangeNumberRange = (value, key) => {
-                formParams.value[key] = value;
+                formParams[key] = value;
             }, renderColItemContent = col => {
                 const _disabled = valueExist(col.searchDisabled, col.disabled, !1);
                 if (slots[searchFormSlotName(col.prop)]) return slots[searchFormSlotName(col.prop)]({
@@ -3320,7 +3335,7 @@
                         placeholder: placeholder,
                         onInput: e => ((val, key) => {
                             const value = val.replace(/\D/g, "");
-                            formParams.value[key] = value;
+                            formParams[key] = value;
                         })(e, col.prop)
                     }, {
                         prefix: col.prefix ? () => col.prefix(formParams, col) : null,
@@ -3341,7 +3356,7 @@
                             let value = val;
                             value = value.replace(/[^0-9\.]/g, ""), value = value.replace(/^\./, "0."), value = value.replace(/\.{2,}/g, "."), 
                             value = value.replace(".", "DUMMY"), value = value.replace(/\./g, ""), value = value.replace("DUMMY", "."), 
-                            formParams.value[key] = value;
+                            formParams[key] = value;
                         })(e, col.prop)
                     }, {
                         prefix: col.prefix ? () => col.prefix(formParams, col) : null,
@@ -6853,13 +6868,14 @@
             this.canvas.style.cursor = "crosshair");
         }
         canvasMouseDblclick(e) {
-            e.stopPropagation(), 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), 
+            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();
         }
         destroyed() {
-            this.isDrawing = !1, this.vertexes = [], this.vertexesObservers = [], this.canvas.removeEventListener("click", this.canvasMouseClick), 
-            this.canvas.removeEventListener("mousemove", this.canvasMousemove), this.canvas.removeEventListener("dblclick", this.canvasMouseDblclick);
+            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);
         }
     }
     class EditPolygonPath {
@@ -6958,14 +6974,11 @@
         }
         canvasMousedown(e) {
             e.stopPropagation(), e.preventDefault(), this.canClickEvent = !0;
-            const {offsetX: x, offsetY: y} = e;
-            if (this.isEditing) {
-                const vertex_i = this.pointInVertexes(x, y);
-                isValueExist(vertex_i) && (this.isMoveEditing = !0, this.pointVertexIndex = vertex_i, 
-                this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]));
-                const i = this.pointInEdgeCentre(x, y);
-                isValueExist(i) && (this.isMoveEditing = !0, this.pointCentreIndex = i + 1, this.vertexes.splice(this.pointCentreIndex, 0, [ x, y ]));
-            }
+            const {offsetX: x, offsetY: y} = e, vertex_i = this.pointInVertexes(x, y);
+            isValueExist(vertex_i) && (this.isMoveEditing = !0, this.pointVertexIndex = vertex_i, 
+            this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]));
+            const i = this.pointInEdgeCentre(x, y);
+            isValueExist(i) && (this.isMoveEditing = !0, this.pointCentreIndex = i + 1, this.vertexes.splice(this.pointCentreIndex, 0, [ x, y ])), 
             setTimeout((() => {
                 this.canClickEvent = !1;
             }), 200);
@@ -6981,8 +6994,7 @@
         canvasMouseClick(e) {
             e.stopPropagation();
             const {offsetX: x, offsetY: y} = e;
-            if (this.isEditing && this.canClickEvent) {
-                e.stopImmediatePropagation();
+            if (this.canClickEvent) {
                 const i = this.pointInVertexes(x, y);
                 if (isValueExist(i)) {
                     if (this.vertexes.length <= 3) return;
@@ -7018,8 +7030,8 @@
             const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, paths: paths} = options;
             this.canvas = canvas, this.ctx = ctx, this.image = image, this.canvasWidth = canvasWidth, 
             this.canvasHeight = canvasHeight, this.paths = paths || [], this.editVertexes = [], 
-            this.render(), this.editDrawPolygon = new EditPolygonPath(canvas, ctx), this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx), 
-            this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
+            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 => {
@@ -7079,8 +7091,12 @@
             }
         },
         emits: [ "editPolygon" ],
-        setup(props, {emit: emit}) {
-            const ns = vue.inject("ns", {}), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), drawCanvas = vue.ref(), loadingImage = vue.ref(!1), renderImageLabel = rowInfo => {
+        setup(props, {emit: emit, expose: expose}) {
+            const ns = vue.inject("ns", {}), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), drawCanvas = 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";
+            }, loadingImage = vue.ref(!1), renderImageLabel = rowInfo => {
                 const clientHeight = canvasMainRef.value?.clientHeight, ctx = canvasBaseRef.value?.getContext("2d");
                 if (rowInfo?.imageSrc) {
                     const image = new Image;
@@ -7092,11 +7108,7 @@
                             height = clientHeight, image.style.height = height + "px", width /= scale;
                         }
                         const canvasHeight = height, 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";
-                        })(canvasWidth, canvasHeight), drawCanvas.value = new CreateDrawCanvas({
+                        setContainerWidthHeight(canvasWidth, canvasHeight), drawCanvas.value = new CreateDrawCanvas({
                             canvas: canvasBaseRef.value,
                             ctx: ctx,
                             image: image,
@@ -7131,9 +7143,19 @@
                     }
                 }));
             }));
-            return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextSpinLoading, {
+            return expose({
+                rerenderImage: () => {
+                    setContainerWidthHeight(0, 0), vue.nextTick((() => {
+                        const rowInfo = vue.toRaw(props.rowInfo);
+                        renderImageLabel(rowInfo);
+                    }));
+                }
+            }), () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextSpinLoading, {
                 loading: loadingImage.value,
-                class: [ ns.b("loading") ]
+                class: [ ns.b("loading") ],
+                style: {
+                    height: "100%"
+                }
             }, {
                 default: () => [ vue.createVNode("div", {
                     ref: canvasMainRef,
@@ -7144,11 +7166,173 @@
                 }, null) ]) ]
             }) ]);
         }
+    }), HeaderTool = 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: "tool-item",
+                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("p", {
+                class: "label-text"
+            }, [ t("next.labelme.saveLabel") ]) ]), vue.createVNode("li", {
+                class: "tool-item"
+            }, [ vue.createVNode("svg", {
+                t: "1721826305513",
+                class: "icon",
+                viewBox: "0 0 1025 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "6215",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M358.5 1021.5c-52.93 0-96-43.07-96-96 0-13.12 2.6-25.84 7.74-37.81l0.12-0.27-141.99-184.66-0.34 0.11a95.806 95.806 0 0 1-29.53 4.64c-52.93 0-96-43.07-96-96s43.07-96 96-96c7.56 0 15.09 0.89 22.41 2.64l0.36 0.09 213.67-370.08-0.16-0.25c-9.34-15.12-14.28-32.54-14.28-50.39 0-52.93 43.07-96 96-96 40.36 0 76.66 25.5 90.34 63.46l0.09 0.26 300.27 61.72 0.19-0.26c18.01-25.16 47.21-40.18 78.11-40.18 52.93 0 96 43.07 96 96 0 36.49-20.26 69.36-52.88 85.79l-0.31 0.16 41.76 393.5 0.25 0.12a96.184 96.184 0 0 1 39.11 34.79c9.85 15.41 15.06 33.27 15.06 51.65 0 52.93-43.07 96-96 96-31.18 0-60.53-15.24-78.52-40.76l-0.22-0.31-396.7 138.78-0.05 0.29c-8.2 45.76-47.94 78.97-94.5 78.97z m0-192c34.03 0 64.82 17.44 82.36 46.66l0.21 0.35L832.93 739.4l0.03-0.32c3.81-39.11 31.82-72.49 69.7-83.05l0.41-0.11-40.34-380.14-0.34-0.08c-39.73-9.82-68.86-43.81-72.49-84.56l-0.03-0.37-283.9-58.36-0.15 0.39c-7 17.7-19.01 32.81-34.72 43.69-16.08 11.13-34.96 17.02-54.59 17.02-9.75 0-19.37-1.46-28.59-4.33l-0.38-0.12L176.19 555.1l0.19 0.26c11.86 16.42 18.12 35.83 18.12 56.14 0 17.74-4.88 35.06-14.11 50.11l-0.18 0.29 136.28 177.25 0.37-0.18c13.04-6.28 27.05-9.47 41.64-9.47z",
+                "p-id": "6216"
+            }, null), vue.createVNode("path", {
+                d: "M416.5 2c40.15 0 76.26 25.37 89.87 63.13l0.19 0.53 0.55 0.11 299.68 61.6 0.64 0.13 0.38-0.53c8.66-12.1 20.19-22.15 33.34-29.06C854.71 90.77 870.06 87 885.5 87c52.66 0 95.5 42.84 95.5 95.5 0 18.03-5.05 35.58-14.6 50.77a95.81 95.81 0 0 1-38 34.57l-0.62 0.31 0.07 0.69 41.7 392.88 0.06 0.55 0.5 0.24c15.91 7.71 29.36 19.68 38.91 34.61 9.8 15.33 14.98 33.09 14.98 51.38 0 52.66-42.84 95.5-95.5 95.5-31.02 0-60.22-15.16-78.11-40.55l-0.43-0.62-0.71 0.25-396.09 138.59-0.55 0.19-0.1 0.57c-3.9 21.77-15.4 41.67-32.39 56.03-17.2 14.54-39.08 22.54-61.62 22.54-52.66 0-95.5-42.84-95.5-95.5 0-13.05 2.59-25.71 7.7-37.61l0.23-0.54-0.36-0.46-141.59-184.16-0.43-0.56-0.67 0.22A95.43 95.43 0 0 1 98.5 707C45.84 707 3 664.16 3 611.5S45.84 516 98.5 516c7.52 0 15.01 0.88 22.29 2.62l0.73 0.17 0.37-0.65 213.33-369.5 0.3-0.52-0.31-0.51c-9.29-15.04-14.2-32.37-14.2-50.12C321 44.84 363.84 2 416.5 2m0 191c-9.7 0-19.27-1.45-28.44-4.31l-0.76-0.24-0.4 0.69-210.98 365.43-0.32 0.56 0.38 0.52C187.77 571.99 194 591.3 194 611.5c0 17.64-4.85 34.88-14.03 49.85l-0.36 0.59 0.42 0.55 135.82 176.65 0.5 0.64 0.73-0.35c12.97-6.26 26.91-9.43 41.42-9.43 16.79 0 33.3 4.42 47.75 12.78a96.095 96.095 0 0 1 34.18 33.63l0.42 0.7 0.77-0.27 391.17-136.87 0.6-0.21 0.06-0.64c1.88-19.33 9.53-37.41 22.11-52.28 12.44-14.71 28.77-25.2 47.22-30.35l0.82-0.23-0.09-0.84-40.26-379.37-0.07-0.7-0.68-0.17c-39.52-9.77-68.5-43.58-72.11-84.12l-0.07-0.74-0.73-0.15-283.12-58.2-0.82-0.17-0.31 0.78c-6.96 17.61-18.91 32.64-34.54 43.46-15.99 11.11-34.77 16.96-54.3 16.96m0-192C363.2 1 320 44.2 320 97.5c0 18.58 5.26 35.93 14.35 50.65l-213.33 369.5A96.669 96.669 0 0 0 98.5 515C45.2 515 2 558.2 2 611.5S45.2 708 98.5 708a96.5 96.5 0 0 0 29.69-4.66l141.59 184.15c-5 11.66-7.78 24.51-7.78 38.01 0 53.3 43.2 96.5 96.5 96.5 47.46 0 86.91-34.25 94.99-79.39l396.08-138.59C867.04 828.81 895.88 845 928.5 845c53.3 0 96.5-43.2 96.5-96.5 0-38.22-22.23-71.26-54.46-86.88l-41.7-392.88C960.37 252.86 982 220.21 982 182.5c0-53.3-43.2-96.5-96.5-96.5-32.37 0-61.01 15.94-78.51 40.39l-299.68-61.6C493.91 27.59 458.31 1 416.5 1z m0 193c40.77 0 75.63-25.28 89.77-61.03l283.12 58.2c3.69 41.4 33.52 75.27 72.87 85l40.26 379.37c-37.74 10.53-66.15 43.41-70.06 83.49L441.29 875.9c-16.87-28.1-47.63-46.9-82.79-46.9-15 0-29.2 3.42-41.86 9.53L180.82 661.88c8.99-14.66 14.18-31.91 14.18-50.38 0-21.07-6.76-40.56-18.22-56.43l210.98-365.42c9.08 2.83 18.73 4.35 28.74 4.35z",
+                "p-id": "6217"
+            }, null) ]), vue.createVNode("p", {
+                class: "label-text"
+            }, [ t("next.labelme.createPolygon") ]) ]), vue.createVNode("li", {
+                class: "tool-item"
+            }, [ vue.createVNode("svg", {
+                t: "1721826424613",
+                class: "icon",
+                viewBox: "0 0 1024 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "7356",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M102.4 870.4v51.2h102.4v51.2H51.2v-102.4h51.2z m870.4-51.2v153.6h-102.4v-51.2h51.2v-102.4h51.2zM409.6 921.6v51.2H358.4v-51.2h51.2z m102.4 0v51.2H460.8v-51.2h51.2z m102.4 0v51.2h-51.2v-51.2h51.2z m102.4 0v51.2h-51.2v-51.2h51.2z m102.4 0v51.2h-51.2v-51.2h51.2zM307.2 921.6v51.2H256v-51.2h51.2z m204.8-742.4a51.2 51.2 0 0 1 51.0464 55.0912l118.8352 68.608a102.4 102.4 0 1 1 96.1536 157.3888v155.136a51.2 51.2 0 1 1-51.6096 80.0256L556.3392 793.6a51.2 51.2 0 1 1-88.7296 0.0512l-169.984-98.2016A51.1488 51.1488 0 0 1 204.8 665.6a51.2 51.2 0 0 1 41.1136-50.176V408.576a51.2 51.2 0 1 1 51.712-79.9744l163.3792-94.3616L460.8 230.4a51.2 51.2 0 0 1 45.2096-50.8416zM102.4 768v51.2H51.2v-51.2h51.2z m870.4-51.2v51.2h-51.2v-51.2h51.2zM297.0624 412.8768l0.1024 222.208 1.024 1.536L486.4 745.2672v-188.928a51.2 51.2 0 0 1-25.2416-38.4L460.8 512v-0.8704L297.0624 412.8768z m399.0528 18.432L563.2 511.1808 563.2 512a51.2 51.2 0 0 1-25.5488 44.3392l-0.0512 188.8768 188.2624-108.6976 0.9216-1.28V452.096a102.6048 102.6048 0 0 1-30.6688-20.7872zM102.4 665.6v51.2H51.2v-51.2h51.2z m870.4-51.2v51.2h-51.2v-51.2h51.2zM102.4 563.2v51.2H51.2v-51.2h51.2z m870.4-51.2v51.2h-51.2v-51.2h51.2zM102.4 460.8v51.2H51.2V460.8h51.2z m387.584-184.1664L326.6048 370.8928l160.6144 96.256a50.8416 50.8416 0 0 1 18.7904-5.9904L512 460.8c9.0112 0 17.5104 2.3552 24.832 6.4l132.9664-79.7184a102.4 102.4 0 0 1-4.0448-34.7648l-131.7888-76.032a50.9952 50.9952 0 0 1-43.9808 0zM972.8 409.6v51.2h-51.2V409.6h51.2zM102.4 358.4v51.2H51.2V358.4h51.2z m870.4-51.2v51.2h-51.2V307.2h51.2zM102.4 256v51.2H51.2V256h51.2z m870.4-51.2v51.2h-51.2V204.8h51.2zM153.6 51.2v51.2H102.4v102.4H51.2V51.2h102.4z m819.2 0v102.4h-51.2V102.4h-102.4V51.2h153.6z m-409.6 0v51.2h-51.2V51.2h51.2z m102.4 0v51.2h-51.2V51.2h51.2z m102.4 0v51.2h-51.2V51.2h51.2zM256 51.2v51.2H204.8V51.2h51.2z m102.4 0v51.2H307.2V51.2h51.2z m102.4 0v51.2H409.6V51.2h51.2z",
+                "p-id": "7357"
+            }, null) ]), vue.createVNode("p", {
+                class: "label-text"
+            }, [ t("next.labelme.editPolygon") ]) ]), vue.createVNode("li", {
+                class: "tool-item"
+            }, [ vue.createVNode("svg", {
+                t: "1721826579655",
+                class: "icon",
+                viewBox: "0 0 1024 1024",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg",
+                "p-id": "10996",
+                width: "18",
+                height: "18"
+            }, [ vue.createVNode("path", {
+                d: "M847.743 223.953H640.639c-3.132-68.921-60.177-124.029-129.858-124.029s-126.726 55.108-129.858 124.029H173.256c-17.673 0-32 14.327-32 32s14.327 32 32 32h674.487c17.673 0 32-14.327 32-32s-14.327-32-32-32z m-336.962-60.03c34.379 0 62.689 26.426 65.718 60.029H445.064c3.029-33.603 31.338-60.029 65.717-60.029zM767.743 351.79c-17.673 0-32 14.327-32 32v478.173H288.256V383.79c0-17.673-14.327-32-32-32s-32 14.327-32 32v510.173c0 17.673 14.327 32 32 32h511.487c17.673 0 32-14.327 32-32V383.79c0-17.673-14.327-32-32-32z",
+                "p-id": "10997"
+            }, null), vue.createVNode("path", {
+                d: "M449.306 732.802V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z m191.534 0V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z",
+                "p-id": "10998"
+            }, null) ]), vue.createVNode("p", {
+                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", {
+                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: "tool-item"
+            }, [ 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("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: "tool-item",
+                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: "tool-item",
+                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) ]) ]
+            }) ]) ]) ]) ]);
+        }
     }), defaultConfig = {
         minContentHeight: 500
     };
     const ns = useNamespace("labelme");
-    const NextLabelme = withInstall(vue.defineComponent({
+    var Element = vue.defineComponent({
         name: "NextLabelme",
         props: {
             className: {
@@ -7172,14 +7356,14 @@
                 default: () => []
             }
         },
-        emits: [ "change", "edit-polygon" ],
-        setup(props, {emit: emit}) {
+        emits: [ "change", "save", "edit-polygon", "prev-click", "next-click" ],
+        setup(props, {emit: emit, slots: slots}) {
             const _config = deepClone(defaultConfig), _options = vue.computed((() => {
                 const cfg = vue.unref(props.options);
                 return merge$1(_config, cfg);
             })), options = vue.unref(_options);
-            vue.provide("ns", ns), useLocale();
-            const activateNodeIndex = vue.ref(0), classes = vue.ref(props.classes), labelImages = vue.ref(deepClone(props.data));
+            vue.provide("ns", ns);
+            const {t: t} = useLocale(), activateNodeIndex = vue.ref(0), classes = vue.ref(props.classes), labelImages = vue.ref(deepClone(props.data));
             vue.watch((() => props.data), (data => {
                 labelImages.value = deepClone(data);
             }), {
@@ -7195,28 +7379,122 @@
                 if (!labelImages.value) return {};
                 const node = labelImages.value[activateNodeIndex.value] || {};
                 return deepClone(node);
-            })), mainContentHeight = vue.ref(options.minContentHeight), mainRef = vue.ref(), isFullscreen = vue.ref(!1), onEditPlygonChange = plygon => {
+            })), loading = vue.ref(!1), mainContentHeight = vue.ref(options.minContentHeight), canvasContextRef = vue.ref(), layoutLabelRef = vue.ref(), headerRef = vue.ref(), mainRef = vue.ref(), footerRef = vue.ref(), 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), window.removeEventListener("resize", updateMainContentHeight);
+            }));
+            const onKeydownPrevNext = () => {}, onPaginationPrev = () => {
+                const imageLength = labelImages.value.length;
+                let i = activateNodeIndex.value - 1;
+                i < 0 && (i = imageLength - 1), onChangeActivateNode(i), emit("prev-click");
+            }, onPaginationNext = () => {
+                const imageLength = labelImages.value.length;
+                let i = activateNodeIndex.value + 1;
+                i >= imageLength && (i = 0), onChangeActivateNode(i), emit("next-click");
+            }, onChangeActivateNode = index => {
+                if (loading.value) return;
+                loading.value = !0;
+                const node = currentNode.value;
+                emit("save", {
+                    node: node
+                }, (imageItem => {
+                    labelImages.value[activateNodeIndex.value] = imageItem || node, activateNodeIndex.value = index, 
+                    loading.value = !1;
+                }), (() => {
+                    loading.value = !1;
+                }));
+            }, isFullscreen = vue.ref(!1), onSwitchFillscreen = val => {
+                isFullscreen.value = val, updateMainContentHeight(), vue.nextTick((() => {
+                    canvasContextRef.value.rerenderImage();
+                }));
+            }, onEditPlygonChange = plygon => {
                 emit("edit-polygon", plygon);
             };
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
+                ref: layoutLabelRef,
                 class: [ ns.b(), props.className, isFullscreen.value ? ns.b("fullscreen") : "" ],
                 style: {
                     ...props.style
                 }
-            }, [ vue.createVNode("div", {
-                ref: mainRef,
-                class: [ ns.b("main") ]
-            }, [ vue.createVNode("div", {
-                class: [ ns.be("main", "content") ],
-                style: {
-                    height: mainContentHeight.value + "px"
-                }
-            }, [ vue.createVNode(CanvasContext, {
-                rowInfo: currentNode.value,
-                onEditPolygon: onEditPlygonChange
-            }, null) ]) ]) ]) ]);
+            }, [ vue.createVNode(NextSpinLoading, {
+                loading: loading.value,
+                tip: t("next.labelimg.saveTxt"),
+                class: [ ns.b("loading") ]
+            }, {
+                default: () => [ vue.createVNode(elementPlus.ElScrollbar, null, {
+                    default: () => [ vue.createVNode("header", {
+                        ref: headerRef,
+                        class: [ ns.b("header") ]
+                    }, [ slots.header ? slots.header() : vue.createVNode(HeaderTool, {
+                        isFullscreen: isFullscreen.value,
+                        imageIndex: activateNodeIndex.value,
+                        imageLength: labelImages.value.length,
+                        onFullscreen: onSwitchFillscreen
+                    }, null) ]), vue.createVNode("div", {
+                        ref: mainRef,
+                        class: [ ns.b("main") ]
+                    }, [ vue.createVNode("div", {
+                        class: [ ns.be("main", "content") ],
+                        style: {
+                            height: mainContentHeight.value + "px"
+                        }
+                    }, [ vue.createVNode(CanvasContext, {
+                        ref: canvasContextRef,
+                        rowInfo: currentNode.value,
+                        onEditPolygon: onEditPlygonChange
+                    }, null) ]) ]), vue.createVNode("footer", {
+                        ref: footerRef,
+                        class: [ ns.b("footer") ]
+                    }, [ vue.createVNode("div", {
+                        class: [ ns.be("footer", "left") ]
+                    }, [ vue.createVNode(elementPlus.ElIcon, {
+                        size: 24,
+                        color: "#797979",
+                        onClick: onPaginationPrev
+                    }, {
+                        default: () => [ vue.createVNode(arrow_left_default, null, null) ]
+                    }) ]), vue.createVNode("div", {
+                        class: [ ns.be("footer", "center") ]
+                    }, [ vue.createVNode(elementPlus.ElScrollbar, null, {
+                        default: () => [ vue.createVNode("ul", {
+                            class: [ ns.bem("footer", "center", "list") ]
+                        }, [ labelImages.value.map(((item, index) => vue.createVNode("li", {
+                            key: index,
+                            onClick: () => onChangeActivateNode(index),
+                            class: {
+                                "is-activate": activateNodeIndex.value === index
+                            }
+                        }, [ vue.createVNode(elementPlus.ElImage, {
+                            style: "height: 100%",
+                            src: item.imageSrc,
+                            "zoom-rate": 1.2,
+                            "max-scale": 2,
+                            "min-scale": .2,
+                            fit: "cover"
+                        }, null) ]))) ]) ]
+                    }) ]), vue.createVNode("div", {
+                        class: [ ns.be("footer", "right") ]
+                    }, [ vue.createVNode(elementPlus.ElIcon, {
+                        size: 24,
+                        color: "#797979",
+                        onClick: onPaginationNext
+                    }, {
+                        default: () => [ vue.createVNode(arrow_right_default, null, null) ]
+                    }) ]) ]) ]
+                }) ]
+            }) ]) ]);
         }
-    }));
+    });
+    const NextLabelme = withInstall(Element);
     var components = Object.freeze({
         __proto__: null,
         NextContainer: NextContainer,
@@ -7278,7 +7556,7 @@
         })(app);
     };
     var index = {
-        version: "0.3.3",
+        version: "0.3.4",
         install: install
     };
     exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, exports.NextCrudTableVirtualized = NextCrudTableVirtualized, 
@@ -7325,7 +7603,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.3", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.3.4", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });