next-element-vue 0.3.4 → 0.3.6

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.3.4 v
- * 发布日期：2024-08-10
+ * 当前版本：0.3.6 v
+ * 发布日期：2024-09-15
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -797,7 +797,8 @@
                 confirmDeleteLabel: "确定要删除该标注吗？",
                 saveLabel: "保存当前标注",
                 instructions: "使用说明",
-                labelNoUpdate: "暂无标签数据更新"
+                labelNoUpdate: "暂无标签数据更新",
+                zoomRestore: "还原"
             },
             labelme: {
                 saveLabel: "保存",
@@ -881,7 +882,8 @@
                 confirmDeleteLabel: "Are you sure you want to delete this annotation?",
                 saveLabel: "save label",
                 instructions: "instructions",
-                labelNoUpdate: "No label data update"
+                labelNoUpdate: "No label data update",
+                zoomRestore: "restore zoom"
             },
             labelme: {
                 saveLabel: "saving...",
@@ -965,7 +967,8 @@
                 confirmDeleteLabel: "确定要删除该标注吗？",
                 saveLabel: "保存当前标注",
                 instructions: "使用说明",
-                labelNoUpdate: "暂无标签数据更新"
+                labelNoUpdate: "暂无标签数据更新",
+                zoomRestore: "还原"
             },
             labelme: {
                 saveLabel: "保存"
@@ -3367,7 +3370,7 @@
                 }
                 if ("select" === col.type) {
                     const placeholder = t("next.form.select") + (col.searchPlaceholder || col.searchLabel || col.label);
-                    return vue.createVNode(elementPlus.ElSelect, {
+                    return !formParams[col.prop] && col.multiple && (formParams[col.prop] = []), vue.createVNode(elementPlus.ElSelect, {
                         modelValue: formParams[col.prop],
                         "onUpdate:modelValue": $event => formParams[col.prop] = $event,
                         clearable: !0,
@@ -5779,7 +5782,7 @@
         emits: [ "fullscreen", "save" ],
         setup(props, {emit: emit}) {
             const _ns = vue.inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
-                emit("fullscreen", val);
+                emit("fullscreen", val), document.body.style.overflow = val ? "hidden" : "auto";
             };
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
                 class: [ _ns.be("header", "tool") ]
@@ -6158,7 +6161,7 @@
         },
         emits: [ "change" ],
         setup(props, {emit: emit, expose: expose}) {
-            const ns = vue.inject("ns", {}), _emit = vue.inject("_emit", null), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), canvasRectRef = vue.ref(), labels = vue.ref([]), drawBaseCanvas = vue.ref({}), formatLabelsType = () => {
+            const ns = vue.inject("ns", {}), _emit = vue.inject("_emit", null), mainBasaeRef = vue.ref(), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), canvasRectRef = vue.ref(), labels = vue.ref([]), drawBaseCanvas = vue.ref({}), formatLabelsType = () => {
                 const _labels = deepClone(labels.value);
                 let yolo_label = [];
                 return {
@@ -6176,22 +6179,39 @@
                 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];
-                    return typeName && (rect.typeName = typeName), rect;
-                })) : [])(rowInfo);
-                const clientHeight = canvasMainRef.value?.clientHeight, ctx = canvasBaseRef.value?.getContext("2d");
+                const ctx = canvasBaseRef.value?.getContext("2d");
                 if (rowInfo?.imageSrc) {
                     const image = new Image;
                     image.src = rowInfo.imageSrc, loadingImage.value = !0, image.onload = () => {
                         loadingImage.value = !1;
-                        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) => {
+                        const {canvasWidth: canvasWidth, canvasHeight: canvasHeight, scaleFactor: scaleFactor, originWidth: originWidth, originHeight: originHeight} = (image => {
+                            const clientWidth = mainBasaeRef.value?.elementInstance.clientWidth, clientHeight = mainBasaeRef.value?.elementInstance.clientHeight;
+                            let {width: width, height: height} = image, scaleFactor = 1;
+                            const scale = width / height;
+                            if (scale > 1 ? (width = clientWidth, height = clientWidth / scale) : (width = clientHeight * scale, 
+                            height = clientHeight), height > clientHeight) {
+                                const scale = height / clientHeight;
+                                height = clientHeight, width /= scale;
+                            } else if (width > clientWidth) {
+                                const scale = width / clientWidth;
+                                width = clientWidth, height /= scale;
+                            }
+                            const canvasWidth = parseInt(width.toString()), canvasHeight = parseInt(height.toString());
+                            return scaleFactor = Number((canvasWidth / canvasHeight).toFixed(2)), {
+                                canvasWidth: canvasWidth,
+                                canvasHeight: canvasHeight,
+                                scaleFactor: scaleFactor,
+                                originWidth: image.width,
+                                originHeight: image.height
+                            };
+                        })(image);
+                        labels.value = ((rowInfo, originWidth, originHeight) => rowInfo.labels ? rowInfo.labels.map((rect => {
+                            const typeName = props.classes[rect.type];
+                            return typeName && (rect.typeName = typeName), rect.originWidth || (rect.originWidth = originWidth), 
+                            rect.originHeight || (rect.originHeight = originHeight), rect;
+                        })) : [])(rowInfo, originWidth, originHeight), image.style.width = canvasWidth + "px", 
+                        image.style.height = canvasHeight + "px", 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));
@@ -6203,8 +6223,10 @@
                             return scale_rects;
                         })(labels.value, canvasHeight);
                         const {updateLabels: updateLabels, addDrawRect: addDrawRect, hitCanvasLabel: hitCanvasLabel} = (options => {
-                            const {ctx: ctx, labels: labels, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = options, updateLabels = () => {
-                                ctx.clearRect(0, 0, canvasWidth, canvasHeight), ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+                            const {canvas: canvas, ctx: ctx, labels: labels, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = options, updateLabels = scaleOffset => {
+                                scaleOffset && (canvas.width = canvasWidth, ctx.save(), ctx.translate(scaleOffset.x, scaleOffset.y), 
+                                ctx.scale(scaleOffset.scale, scaleOffset.scale)), ctx.clearRect(0, 0, canvasWidth, canvasHeight), 
+                                ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
                                 for (let i = 0; i < labels.length; i++) {
                                     const rect = labels[i], {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight, type: type} = rect, color = colors$1[type % colors$1.length];
                                     if (ctx.font = "bold 14px serif", ctx.textBaseline = "top", ctx.save(), ctx.strokeStyle = color, 
@@ -6219,7 +6241,8 @@
                                 updateLabels: updateLabels,
                                 addDrawRect: (rect, color = "#f30635") => {
                                     const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect;
-                                    ctx.strokeStyle = color, ctx.strokeRect(startX, startY, rectWidth, rectHeight);
+                                    ctx.save(), ctx.strokeStyle = color, ctx.strokeRect(startX, startY, rectWidth, rectHeight), 
+                                    ctx.restore();
                                 },
                                 hitCanvasLabel: (x, y) => {
                                     let hit_rect = null, hit_index = null, color = null;
@@ -6246,7 +6269,7 @@
                         });
                         drawBaseCanvas.value.updateLabels = updateLabels, drawBaseCanvas.value.addDrawRect = addDrawRect, 
                         drawBaseCanvas.value.hitCanvasLabel = hitCanvasLabel;
-                        const {clearCanvas: clearCanvas, removeEventAll: removeEventAll} = ((canvas, callback, keyW) => {
+                        const {clearCanvas: clearCanvas, removeEventAll: removeEventAll} = (({canvas: canvas, originWidth: originWidth, originHeight: originHeight}, callback, keyW) => {
                             const canvasWidth = canvas.width, canvasHeight = canvas.height, ctx = canvas?.getContext("2d"), clearCanvas = () => {
                                 ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                             };
@@ -6260,14 +6283,16 @@
                                     rectWidth: rectWidth,
                                     rectHeight: rectHeight,
                                     canvasWidth: canvasWidth,
-                                    canvasHeight: canvasHeight
+                                    canvasHeight: canvasHeight,
+                                    originWidth: originWidth,
+                                    originHeight: originHeight
                                 }, {
                                     endX: endX,
                                     endY: endY
                                 });
                             }, documentKeydown = event => {
-                                "KeyW" === event.code && (isWKeyPressed = !0, canvas.style.cursor = "crosshair", 
-                                canvas.style.zIndex = "11", keyW && keyW());
+                                isWKeyPressed || "KeyW" === event.code && (event.preventDefault(), 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");
@@ -6277,13 +6302,13 @@
                             };
                             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, 
+                            const canvasMousedown = event => {
+                                isWKeyPressed && (isDrawing = !0, startX = event.offsetX, startY = event.offsetY);
+                            }, canvasMousemove = event => {
+                                isDrawing && isWKeyPressed && (isRectDraw = !0, endX = event.offsetX, endY = event.offsetY, 
                                 drawRect());
-                            }, canvasMouseup = e => {
-                                e.stopPropagation(), isRectDraw && (isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                            }, canvasMouseup = event => {
+                                event.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), 
@@ -6297,12 +6322,16 @@
                                 clearCanvas: clearCanvas,
                                 drawRect: drawRect,
                                 removeEventAll: () => {
-                                    document.removeEventListener("mousedown", documentKeydown), document.removeEventListener("keyup", documentKeyup), 
+                                    document.removeEventListener("keydown", 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}) => {
+                        })({
+                            canvas: canvasRectRef.value,
+                            originWidth: originWidth,
+                            originHeight: originHeight
+                        }, ((rect, {endX: endX, endY: endY}) => {
                             activate_add_label.value = rect, drawBaseCanvas.value.addDrawRect(rect), updateContextmenuLabelFixed(endX, endY, rect);
                         }), (() => {
                             onCloseDraggableRectFixed();
@@ -6319,11 +6348,14 @@
                         updateContextmenuLabelFixed(x, y, hit_rect);
                     }));
                 })), canvasBaseRef.value.addEventListener("click", (e => {
+                    if (e.ctrlKey) return;
                     const x = e.offsetX, y = e.offsetY, {hit_rect: hit_rect, hit_index: hit_index, color: color} = drawBaseCanvas.value.hitCanvasLabel(x, y);
                     onCloseDraggableRectFixed(), onCloseContentmenuLabel(), hit_rect && vue.nextTick((() => {
                         updateDraggableRectFixed(x, y, hit_rect, hit_index, color);
                     }));
                 }));
+            }, onWindowWheel = e => {
+                e.ctrlKey && e.preventDefault();
             };
             vue.onMounted((() => {
                 vue.watch((() => props.rowInfo), (info => {
@@ -6332,15 +6364,20 @@
                 }), {
                     deep: !0,
                     immediate: !0
-                }), vue.watch((() => props.contextClientHeight), (height => {
+                }), vue.watch((() => props.classes), (() => {
+                    const rowInfo = vue.toRaw(props.rowInfo);
+                    renderImageLabel(rowInfo);
+                })), vue.watch((() => props.contextClientHeight), (height => {
                     if (valueExist(height)) {
                         canvasMainRef.value.style.height = height + "px";
                         const rowInfo = vue.toRaw(props.rowInfo);
                         renderImageLabel(rowInfo);
                     }
-                }));
+                })), window.addEventListener("wheel", onWindowWheel, {
+                    passive: !1
+                });
             })), vue.onUnmounted((() => {
-                drawBaseCanvas.value.removeEventAll();
+                drawBaseCanvas.value.removeEventAll?.(), window.removeEventListener("wheel", onWindowWheel);
             }));
             const contextmenuLabelFixed = vue.ref({
                 show: !1,
@@ -6384,9 +6421,9 @@
                 draggableRectFixed.value.width = 0, draggableRectFixed.value.height = 0, draggableRectFixed.value.activateRect = null, 
                 draggableRectFixed.value.activateIndex = null, draggableRectFixed.value.color = null;
             }, onDraggleRectResize = rect => {
-                draggableRectFixed.value.activateRect = rect, drawBaseCanvas.value.updateLabels();
+                draggableRectFixed.value.activateRect = rect;
                 const i = labels.value.findIndex((o => isEqual(o, rect)));
-                i > -1 && labels.value.splice(i, 1, rect);
+                i > -1 && labels.value.splice(i, 1, rect), drawBaseCanvas.value.updateLabels();
                 const {rects: rects, label_txt: label_txt} = formatLabelsType();
                 _emit("change", rects, label_txt), emit("change", rects, label_txt);
             }, onContextmenuDraggable = (e, rect) => {
@@ -6430,6 +6467,7 @@
                 }
             });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextSpinLoading, {
+                ref: mainBasaeRef,
                 loading: loadingImage.value,
                 class: [ ns.b("loading") ]
             }, {
@@ -6474,13 +6512,15 @@
         },
         emits: [ "delete", "select" ],
         setup(props, {emit: emit}) {
-            const {t: t} = useLocale(), ns = vue.inject("ns", {}), labels = vue.ref([]);
-            vue.watch((() => props.labels), (rects => {
+            const {t: t} = useLocale(), ns = vue.inject("ns", {}), labels = vue.ref([]), formatLabelsTypeName = labels => labels.length ? labels.map((rect => {
+                const typeName = props.classes[rect.type];
+                return typeName && (rect.typeName = typeName), rect;
+            })) : [];
+            vue.watch((() => props.classes), (() => {
+                labels.value = formatLabelsTypeName(labels.value);
+            })), vue.watch((() => props.labels), (rects => {
                 const _rects = vue.toRaw(rects);
-                labels.value = (labels => labels.length ? labels.map((rect => {
-                    const typeName = props.classes[rect.type];
-                    return typeName && (rect.typeName = typeName), rect;
-                })) : [])(_rects);
+                labels.value = formatLabelsTypeName(_rects);
             }), {
                 deep: !0,
                 immediate: !0
@@ -6860,8 +6900,17 @@
             this.destroyedObservers = callback;
         }
         canvasMouseClick(e) {
-            e.stopPropagation(), this.isDrawing = !0, 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 = !0, this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY;
+            const [x, y] = [ e.offsetX, e.offsetY ];
+            let is_add = !0;
+            for (let i = 0; i < this.vertexes.length; i++) {
+                const p = this.vertexes[i];
+                if (Math.sqrt((x - p[0]) ** 2 + (y - p[1]) ** 2) < 8) {
+                    is_add = !1;
+                    break;
+                }
+            }
+            is_add && this.vertexes.push([ x, y ]), this.vertexes = vertexesUnique(this.vertexes);
         }
         canvasMousemove(e) {
             e.stopPropagation(), this.isDrawing && (this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY, 
@@ -6889,11 +6938,12 @@
         pointCentreIndex;
         vertexRadius;
         edgeCentreRadius;
+        pointRecover;
         observers=[];
         constructor(canvas, ctx) {
             this.canvas = canvas, this.ctx = ctx, this.vertexes = [], this.isEditing = !1, this.canClickEvent = !0, 
             this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1, 
-            this.vertexRadius = 8, this.edgeCentreRadius = 5;
+            this.vertexRadius = 8, this.edgeCentreRadius = 5, this.pointRecover = [];
         }
         drawPolygonPath(vertexes, mouseX, mouseY) {
             const ctx = this.ctx;
@@ -6974,7 +7024,9 @@
         }
         canvasMousedown(e) {
             e.stopPropagation(), e.preventDefault(), this.canClickEvent = !0;
-            const {offsetX: x, offsetY: y} = e, vertex_i = this.pointInVertexes(x, y);
+            const {offsetX: x, offsetY: y} = e;
+            this.pointRecover = [ x, y ];
+            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);
@@ -6985,11 +7037,19 @@
         }
         canvasMouseup(e) {
             e.stopPropagation(), e.preventDefault();
-            const {offsetX: x, offsetY: y} = e;
+            let {offsetX: x, offsetY: y} = e;
+            this.vertexes = vertexesUnique(this.vertexes);
+            for (let i = 0; i < this.vertexes.length; i++) {
+                const p = this.vertexes[i], radius = Math.sqrt((x - p[0]) ** 2 + (y - p[1]) ** 2);
+                if (radius < 8 && radius > 0 && this.pointRecover.length) {
+                    x = this.pointRecover[0], y = this.pointRecover[1], this.pointRecover = [];
+                    break;
+                }
+            }
             this.pointVertexIndex > -1 && this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]), 
             this.pointCentreIndex > -1 && this.vertexes.splice(this.pointCentreIndex, 1, [ x, y ]), 
             this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1, 
-            this.notifyObservers();
+            this.drawPolygon(this.vertexes), this.notifyObservers();
         }
         canvasMouseClick(e) {
             e.stopPropagation();
@@ -7022,15 +7082,17 @@
         canvasWidth;
         canvasHeight;
         paths;
+        scaleX;
+        scaleY;
         editDrawPolygon;
         createPolygonVertexes;
         editVertexes;
         editPolygonObservers=[];
         constructor(options) {
-            const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, paths: paths} = options;
+            const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, paths: paths, scaleX: scaleX, scaleY: scaleY} = options;
             this.canvas = canvas, this.ctx = ctx, this.image = image, this.canvasWidth = canvasWidth, 
-            this.canvasHeight = canvasHeight, this.paths = paths || [], this.editVertexes = [], 
-            this.render(), this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx), 
+            this.canvasHeight = canvasHeight, this.paths = paths || [], this.scaleX = scaleX || 1, 
+            this.scaleY = scaleY || 1, this.editVertexes = [], this.render(), this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx), 
             this.editDrawPolygon = new EditPolygonPath(canvas, ctx), this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
                 this.render(), this.editDrawPolygon.drawPolygon(vertexes, mouseOffset), this.editVertexes = vertexes, 
                 this.notifyObservers();
@@ -7051,12 +7113,14 @@
         }
         drawPolygons(paths) {
             const ctx = this.ctx;
+            ctx.scale(this.scaleX, this.scaleY);
             for (let i = 0; i < paths.length; i++) {
                 const path = paths[i].path;
                 if (!path.length) return;
                 const color = colors[i % colors.length];
-                ctx.beginPath(), ctx.lineWidth = 2, ctx.strokeStyle = color, ctx.fillStyle = hexToRgba(color, .2), 
-                ctx.moveTo(path[0][0], path[0][1]);
+                ctx.beginPath(), ctx.lineWidth = 2, ctx.strokeStyle = color, ctx.fillStyle = hexToRgba(color, .2);
+                const startX = path[0][0], startY = path[0][1];
+                ctx.moveTo(startX, startY);
                 for (let i = 1; i < path.length; i++) {
                     const [x, y] = path[i];
                     ctx.lineTo(x, y);
@@ -7066,7 +7130,7 @@
         }
         initCanvas=() => {
             this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight), this.ctx.drawImage(this.image, 0, 0, this.canvasWidth, this.canvasHeight), 
-            this.drawPolygons(this.paths);
+            this.ctx.save(), this.drawPolygons(this.paths), this.ctx.restore();
         };
         render=() => {
             this.initCanvas();
@@ -7092,22 +7156,40 @@
         },
         emits: [ "editPolygon" ],
         setup(props, {emit: emit, expose: expose}) {
-            const ns = vue.inject("ns", {}), canvasMainRef = vue.ref(), canvasBaseRef = vue.ref(), drawCanvas = vue.ref(), setContainerWidthHeight = (canvasWidth, canvasHeight) => {
+            const ns = vue.inject("ns", {}), mainBasaeRef = vue.ref(), 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");
+                const ctx = canvasBaseRef.value?.getContext("2d");
                 if (rowInfo?.imageSrc) {
                     const image = new Image;
                     image.src = rowInfo.imageSrc, loadingImage.value = !0, image.onload = () => {
                         loadingImage.value = !1;
-                        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);
+                        const {canvasWidth: canvasWidth, canvasHeight: canvasHeight, scaleFactor: scaleFactor, scaleX: scaleX, scaleY: scaleY} = (image => {
+                            const clientWidth = mainBasaeRef.value?.elementInstance.clientWidth, clientHeight = mainBasaeRef.value?.elementInstance.clientHeight;
+                            let {width: width, height: height} = image, scaleFactor = 1;
+                            const aspect_ratio = width / height;
+                            if (aspect_ratio > 1 ? (width = clientWidth, height = clientWidth / aspect_ratio) : (width = clientHeight * aspect_ratio, 
+                            height = clientHeight), height > clientHeight) {
+                                const scale = height / clientHeight;
+                                height = clientHeight, width /= scale;
+                            } else if (width > clientWidth) {
+                                const scale = width / clientWidth;
+                                width = clientWidth, height /= scale;
+                            }
+                            const canvasWidth = parseInt(width.toString()), canvasHeight = parseInt(height.toString());
+                            scaleFactor = Number((canvasWidth / canvasHeight).toFixed(2));
+                            const scaleX = (canvasWidth / image.width).toFixed(8), scaleY = (canvasHeight / image.height).toFixed(8);
+                            return {
+                                canvasWidth: canvasWidth,
+                                canvasHeight: canvasHeight,
+                                scaleFactor: scaleFactor,
+                                scaleX: Number(scaleX),
+                                scaleY: Number(scaleY)
+                            };
+                        })(image);
+                        image.style.width = canvasWidth + "px", image.style.height = canvasHeight + "px", 
                         setContainerWidthHeight(canvasWidth, canvasHeight), drawCanvas.value = new CreateDrawCanvas({
                             canvas: canvasBaseRef.value,
                             ctx: ctx,
@@ -7115,7 +7197,9 @@
                             canvasWidth: canvasWidth,
                             canvasHeight: canvasHeight,
                             scaleFactor: scaleFactor,
-                            paths: rowInfo.labels
+                            paths: rowInfo.labels,
+                            scaleX: scaleX,
+                            scaleY: scaleY
                         }), drawCanvas.value.updatePolygon((vertexes => {
                             emit("editPolygon", {
                                 vertexes: vertexes,
@@ -7151,6 +7235,7 @@
                     }));
                 }
             }), () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(NextSpinLoading, {
+                ref: mainBasaeRef,
                 loading: loadingImage.value,
                 class: [ ns.b("loading") ],
                 style: {
@@ -7184,7 +7269,7 @@
         emits: [ "fullscreen", "save" ],
         setup(props, {emit: emit}) {
             const _ns = vue.inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
-                emit("fullscreen", val);
+                emit("fullscreen", val), document.body.style.overflow = val ? "hidden" : "auto";
             };
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
                 class: [ _ns.be("header", "tool") ]
@@ -7404,20 +7489,25 @@
                 if (loading.value) return;
                 loading.value = !0;
                 const node = currentNode.value;
-                emit("save", {
+                return emit("save", {
                     node: node
                 }, (imageItem => {
                     labelImages.value[activateNodeIndex.value] = imageItem || node, activateNodeIndex.value = index, 
                     loading.value = !1;
                 }), (() => {
                     loading.value = !1;
-                }));
+                })), !0;
             }, isFullscreen = vue.ref(!1), onSwitchFillscreen = val => {
                 isFullscreen.value = val, updateMainContentHeight(), vue.nextTick((() => {
                     canvasContextRef.value.rerenderImage();
                 }));
             }, onEditPlygonChange = plygon => {
-                emit("edit-polygon", plygon);
+                currentNode.value.labels = plygon, emit("edit-polygon", plygon);
+            }, onToolHeaderSave = () => {
+                onChangeActivateNode(activateNodeIndex.value) || elementPlus.ElMessage({
+                    type: "info",
+                    message: t("next.labelimg.labelNoUpdate")
+                });
             };
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
                 ref: layoutLabelRef,
@@ -7438,7 +7528,8 @@
                         isFullscreen: isFullscreen.value,
                         imageIndex: activateNodeIndex.value,
                         imageLength: labelImages.value.length,
-                        onFullscreen: onSwitchFillscreen
+                        onFullscreen: onSwitchFillscreen,
+                        onSave: onToolHeaderSave
                     }, null) ]), vue.createVNode("div", {
                         ref: mainRef,
                         class: [ ns.b("main") ]
@@ -7556,7 +7647,7 @@
         })(app);
     };
     var index = {
-        version: "0.3.4",
+        version: "0.3.6",
         install: install
     };
     exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, exports.NextCrudTableVirtualized = NextCrudTableVirtualized, 
@@ -7603,7 +7694,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.4", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.3.6", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });