next-element-vue 0.3.1 → 0.3.2

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.3.1 v
- * 发布日期：2024-06-22
+ * 当前版本：0.3.2 v
+ * 发布日期：2024-06-27
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -3159,6 +3159,8 @@
         settingBtn: !0,
         operations: !0,
         operationsWidth: 260,
+        operationsHeaderAlign: "center",
+        operationsColumnAlign: "center",
         operationsBtnPlain: !1,
         operationsBtnText: !0,
         operationsBtnSize: "small",
@@ -3752,7 +3754,9 @@
                     }, mergeDicData = loopDicData(columnOption.dicData);
                     return vue.createVNode("span", null, [ _formatterColumnValue(row[columnOption.prop], mergeDicData) ]);
                 }
-                return null;
+                return columnOption.cellUnit ? vue.createVNode(vue.Fragment, null, [ vue.createVNode("span", null, [ row[columnOption.prop] ]), vue.createVNode("em", {
+                    class: "cell-unit"
+                }, [ columnOption.cellUnit ]) ]) : null;
             };
             return () => vue.createVNode(vue.Fragment, null, [ !columnOption.hide && vue.createVNode(elementPlus.ElTableColumn, {
                 prop: columnOption.prop,
@@ -3783,8 +3787,8 @@
                     fixed: "right",
                     label: t("next.table.operation"),
                     width: options.operationsWidth,
-                    headerAlign: options.headerAlign,
-                    align: options.cellAlign
+                    headerAlign: valueExist(options.operationsHeaderAlign, options.headerAlign),
+                    align: valueExist(options.operationsColumnAlign, options.cellAlign)
                 }, {
                     default: scoped => vue.createVNode(vue.Fragment, null, [ slots["operation-column-prefix"]?.(scoped, {
                         text: btnText,
@@ -5223,7 +5227,8 @@
                 getFormExpose: () => addEditFormRef.value?.getFormExpose(),
                 updateColumns: ops => {
                     _updateColumnsAll(ops);
-                }
+                },
+                getSearchFormParams: () => _searchFormParams.value
             });
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ vue.createVNode("div", {
                 ref: crudTableRef,
@@ -5734,6 +5739,14 @@
             isFullscreen: {
                 type: Boolean,
                 default: !1
+            },
+            imageIndex: {
+                type: Number,
+                default: 0
+            },
+            imageLength: {
+                type: Number,
+                default: 0
             }
         },
         emits: [ "fullscreen", "save" ],
@@ -5744,6 +5757,7 @@
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(vue.Fragment, null, [ vue.createVNode("ul", {
                 class: [ _ns.be("header", "tool") ]
             }, [ vue.createVNode("li", {
+                class: "hover",
                 onClick: () => emit("save")
             }, [ vue.createVNode("svg", {
                 t: "1719034799379",
@@ -5764,8 +5778,11 @@
                 style: "padding-left: 3px"
             }, [ t("next.labelimg.saveLabel") ]) ]) ]), vue.createVNode("ul", {
                 class: [ _ns.be("header", "tool") ]
-            }, [ vue.createVNode("li", {
-                style: "margin-right: 30px;"
+            }, [ props.imageLength ? vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("第 "), props.imageIndex + 1, vue.createTextVNode(" 张") ]), vue.createVNode("em", {
+                style: "padding: 0 5px;"
+            }, [ vue.createTextVNode("/") ]), vue.createVNode("span", null, [ vue.createTextVNode("共 "), props.imageLength, vue.createTextVNode(" 张") ]) ]) : null, vue.createVNode("li", {
+                style: "margin-right: 30px;",
+                class: "hover"
             }, [ vue.createVNode(elementPlus.ElPopover, {
                 trigger: "hover",
                 placement: "bottom",
@@ -5784,6 +5801,7 @@
                     style: "font-size: 12px;white-space: nowrap;"
                 }, [ vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("W：") ]), vue.createVNode("span", null, [ vue.createTextVNode("鼠标移入图片中，长按W键，鼠标按下左键，移动鼠标开始绘制，鼠标抬起结束绘制") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("A：") ]), vue.createVNode("span", null, [ vue.createTextVNode("A键进入上一张图片进行标注") ]) ]), vue.createVNode("li", null, [ vue.createVNode("span", null, [ vue.createTextVNode("D：") ]), vue.createVNode("span", null, [ vue.createTextVNode("D键进入下一张图片进行标注") ]) ]) ])
             }) ]), props.isFullscreen ? vue.createVNode("li", {
+                class: "hover",
                 onClick: () => switchFillscreen(!1)
             }, [ vue.createVNode(elementPlus.ElTooltip, {
                 placement: "top",
@@ -5803,6 +5821,7 @@
                     "p-id": "5389"
                 }, null) ]) ]
             }) ]) : vue.createVNode("li", {
+                class: "hover",
                 onClick: () => switchFillscreen(!0)
             }, [ vue.createVNode(elementPlus.ElTooltip, {
                 placement: "top",
@@ -6030,7 +6049,7 @@
                 parentRect = props.parentEl.getBoundingClientRect(), document.addEventListener("mousemove", onMousemove), 
                 document.addEventListener("mouseup", onMouseup);
             })), vue.onUnmounted((() => {
-                document.removeEventListener("mousemove", onMousemove, !1), document.removeEventListener("mouseup", onMouseup, !1);
+                document.removeEventListener("mousemove", onMousemove), document.removeEventListener("mouseup", onMouseup);
             })), {
                 onMousedown: e => {
                     e.preventDefault(), isDraggle.value = !0, draggleOffset.value.diff_x = e.offsetX, 
@@ -6038,7 +6057,7 @@
                 },
                 onMouseup: onMouseup,
                 onContextmenu: e => {
-                    e.preventDefault(), emit("contextmenu", e, rect.value);
+                    e.preventDefault(), e.preventDefault(), emit("contextmenu", e, rect.value);
                 },
                 rect: rect,
                 onMousedownDot: (e, corner) => {
@@ -6200,26 +6219,13 @@
                         });
                         drawBaseCanvas.value.updateLabels = updateLabels, drawBaseCanvas.value.addDrawRect = addDrawRect, 
                         drawBaseCanvas.value.hitCanvasLabel = hitCanvasLabel;
-                        const {clearCanvas: clearCanvas} = ((canvas, callback, keyW) => {
+                        const {clearCanvas: clearCanvas, removeEventAll: removeEventAll} = ((canvas, callback, keyW) => {
                             const canvasWidth = canvas.width, canvasHeight = canvas.height, ctx = canvas?.getContext("2d"), clearCanvas = () => {
                                 ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                             };
                             clearCanvas();
                             let startX, startY, endX, endY, isDrawing = !1, isRectDraw = !1, isWKeyPressed = !1;
-                            document.addEventListener("keydown", (event => {
-                                "KeyW" === event.code && (isWKeyPressed = !0, canvas.style.cursor = "crosshair", 
-                                canvas.style.zIndex = "11", keyW && keyW());
-                            })), document.addEventListener("keyup", (event => {
-                                isDrawing || "KeyW" === event.code && (isWKeyPressed = !1, canvas.style.cursor = "unset", 
-                                canvas.style.zIndex = "0");
-                            })), canvas.addEventListener("mousedown", (e => {
-                                isWKeyPressed && (isDrawing = !0, startX = e.offsetX, startY = e.offsetY);
-                            })), canvas.addEventListener("mousemove", (e => {
-                                isDrawing && isWKeyPressed && (isRectDraw = !0, endX = e.offsetX, endY = e.offsetY, 
-                                drawRect());
-                            })), canvas.addEventListener("mouseup", (() => {
-                                if (!isRectDraw) return;
-                                isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", canvas.style.zIndex = "0";
+                            const drawRectDone = () => {
                                 const rectWidth = Math.abs(endX - startX), rectHeight = Math.abs(endY - startY);
                                 startX > endX && (startX = endX), startY > endY && (startY = endY), callback && callback({
                                     startX: startX,
@@ -6231,8 +6237,30 @@
                                 }, {
                                     endX: endX,
                                     endY: endY
-                                }), isRectDraw = !1;
-                            }));
+                                });
+                            }, documentKeydown = event => {
+                                "KeyW" === event.code && (isWKeyPressed = !0, canvas.style.cursor = "crosshair", 
+                                canvas.style.zIndex = "11", keyW && keyW());
+                            }, documentKeyup = event => {
+                                isDrawing || "KeyW" === event.code && (isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                                canvas.style.zIndex = "0");
+                            }, documentMouseup = () => {
+                                isRectDraw && (isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                                canvas.style.zIndex = "0", drawRectDone(), isRectDraw = !1);
+                            };
+                            document.addEventListener("keydown", documentKeydown), document.addEventListener("keyup", documentKeyup), 
+                            document.addEventListener("mouseup", documentMouseup);
+                            const canvasMousedown = e => {
+                                isWKeyPressed && (isDrawing = !0, startX = e.offsetX, startY = e.offsetY);
+                            }, canvasMousemove = e => {
+                                isDrawing && isWKeyPressed && (isRectDraw = !0, endX = e.offsetX, endY = e.offsetY, 
+                                drawRect());
+                            }, canvasMouseup = e => {
+                                e.stopPropagation(), isRectDraw && (isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset", 
+                                canvas.style.zIndex = "0", drawRectDone(), isRectDraw = !1);
+                            };
+                            canvas.addEventListener("mousedown", canvasMousedown), canvas.addEventListener("mousemove", canvasMousemove), 
+                            canvas.addEventListener("mouseup", canvasMouseup);
                             const drawRect = (color = "#f30635") => {
                                 clearCanvas(), ctx.strokeStyle = color, ctx.strokeRect(startX, startY, endX - startX, endY - startY);
                             };
@@ -6240,14 +6268,19 @@
                                 canvas: canvas,
                                 ctx: ctx,
                                 clearCanvas: clearCanvas,
-                                drawRect: drawRect
+                                drawRect: drawRect,
+                                removeEventAll: () => {
+                                    document.removeEventListener("mousedown", documentKeydown), document.removeEventListener("keyup", documentKeyup), 
+                                    document.removeEventListener("mouseup", documentMouseup), canvas.removeEventListener("mousedown", canvasMousedown), 
+                                    canvas.removeEventListener("mousemove", canvasMousemove), canvas.removeEventListener("mouseup", canvasMouseup);
+                                }
                             };
                         })(canvasRectRef.value, ((rect, {endX: endX, endY: endY}) => {
                             activate_add_label.value = rect, drawBaseCanvas.value.addDrawRect(rect), updateContextmenuLabelFixed(endX, endY, rect);
                         }), (() => {
                             onCloseDraggableRectFixed();
                         }));
-                        drawBaseCanvas.value.clearCanvasRect = clearCanvas;
+                        drawBaseCanvas.value.clearCanvasRect = clearCanvas, drawBaseCanvas.value.removeEventAll = removeEventAll;
                     }, image.onerror = () => {
                         loadingImage.value = !1;
                     };
@@ -6279,6 +6312,8 @@
                         renderImageLabel(rowInfo);
                     }
                 }));
+            })), vue.onUnmounted((() => {
+                drawBaseCanvas.value.removeEventAll();
             }));
             const contextmenuLabelFixed = vue.ref({
                 show: !1,
@@ -6354,8 +6389,8 @@
                 onCloseContentmenuLabel: onCloseContentmenuLabel,
                 onSelectedLabel: (rect, index) => {
                     onCloseDraggableRectFixed(), vue.nextTick((() => {
-                        const {startX: x, startY: y, type: type} = rect;
-                        updateDraggableRectFixed(x, y, rect, index, colors[type]);
+                        const {startX: x, startY: y, type: type} = rect, color = colors[type];
+                        updateDraggableRectFixed(x, y, labels.value[index], index, color);
                     }));
                 },
                 onDeleteLabel: onDeleteLabel,
@@ -6440,7 +6475,7 @@
                 class: "label-line"
             }, null), vue.createVNode("span", null, [ rect.typeName ]) ]), vue.createVNode(elementPlus.ElPopconfirm, {
                 title: t("next.labelimg.confirmDeleteLabel"),
-                width: 180,
+                width: 200,
                 onConfirm: () => (rect => {
                     emit("delete", rect);
                 })(rect)
@@ -6617,6 +6652,8 @@
                         class: [ ns$1.b("header") ]
                     }, [ slots.header ? slots.header() : vue.createVNode(ToolHeader, {
                         isFullscreen: isFullscreen.value,
+                        imageIndex: activateNodeIndex.value,
+                        imageLength: labelImages.value.length,
                         onFullscreen: onSwitchFillscreen,
                         onSave: () => {
                             onChangeActivateNode(activateNodeIndex.value) || elementPlus.ElMessage({
@@ -6821,7 +6858,7 @@
         })(app);
     };
     var index = {
-        version: "0.3.1",
+        version: "0.3.2",
         install: install
     };
     exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, exports.NextCrudTableVirtualized = NextCrudTableVirtualized, 
@@ -6867,7 +6904,7 @@
     }), exports.useGetDerivedNamespace = useGetDerivedNamespace, exports.useLanguage = (locale, lang) => {
         const localeRef = vue.isRef(locale) ? locale : vue.ref(locale), nextLang = localeLang[lang] || localeLang["zh-cn"];
         localeRef.value.name = lang, localeRef.value.next = nextLang.next;
-    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.3.1", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.3.2", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });