next-element-vue 0.3.3 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.js +355 -56
- package/dist/index.min.js +3 -3
- package/dist/index.umd.js +354 -56
- package/dist/index.umd.min.js +3 -3
- package/dist/packages/components/labelme/index.d.ts +4 -1
- package/dist/packages/components/labelme/src/index.d.ts +4 -1
- package/dist/packages/components/labelme/src/widgets/header-tool.d.ts +35 -0
- package/dist/packages/hooks/use-locale/index.d.ts +3 -0
- package/dist/packages/locale/lang/en.d.ts +6 -0
- package/dist/packages/locale/lang/zh-cn.d.ts +6 -0
- package/dist/packages/locale/lang/zh-tw.d.ts +3 -0
- package/package.json +4 -4
package/dist/index.css
CHANGED
|
@@ -13,4 +13,4 @@
|
|
|
13
13
|
.next-video-player{border-radius:5px;height:100%;min-height:200px;overflow:hidden;position:relative;width:100%}.next-video-player .vjs-default-skin{height:100%!important;left:0;min-height:200px;padding:unset!important;position:absolute;top:0;width:100%}.next-video-player .screemshot-btn{align-items:center;background-color:rgba(0,0,0,.6);border-radius:50%;cursor:pointer;display:inline-flex;height:45px;justify-content:center;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:all .5s ease-in-out;width:45px}.next-video-player .screemshot-btn i{transition:all .3s ease-in-out}.next-video-player .screemshot-btn:hover i{transform:scale(1.1)}.next-video-player:hover .screemshot-btn{opacity:1}.next-video-player-recongition{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:99}
|
|
14
14
|
.next-drag-resize{position:relative}
|
|
15
15
|
.next-labelimg-loading .next-spin-loading-mask__text{text-shadow:unset}.next-labelimg-fullscreen{background-color:#fff;bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;transition:all .3s;z-index:999}.next-labelimg{border:1px solid #eee;border-radius:3px;box-sizing:border-box;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.next-labelimg-header{box-shadow:0 0 4px 0 rgba(0,0,0,.15);font-size:12px;justify-content:space-between;padding:10px 12px}.next-labelimg-header,.next-labelimg-header__tool,.next-labelimg-header__tool>li{align-items:center;display:flex}.next-labelimg-header__tool>li{cursor:pointer;margin:0 6px}.next-labelimg-header__tool>li.hover:hover{color:var(--el-color-primary)}.next-labelimg-header__tool>li.hover:hover svg{fill:var(--el-color-primary)}.next-labelimg-main{align-items:center;display:flex;justify-content:space-between}.next-labelimg-main__content{align-items:center;display:flex;flex:1 1 100%;justify-content:center}.next-labelimg-main .next-labelimg-loading{align-items:center;display:flex;justify-content:center;width:100%}.next-labelimg-main .next-labelimg-canvas{height:100%;min-height:500px;position:relative;width:100%}.next-labelimg-main .next-labelimg-canvas__context{height:100%;position:absolute;width:100%;z-index:3}.next-labelimg-main .next-labelimg-canvas__rect{height:100%;position:absolute;width:100%;z-index:1}.next-labelimg-main .next-labelimg-right{box-sizing:border-box;flex:0 0 200px;height:inherit;padding:10px;text-align:left}.next-labelimg-main .next-labelimg-right>ul{border-radius:5px;box-shadow:0 0 4px 0 rgba(0,0,0,.15);box-sizing:border-box;height:100%;padding:10px}.next-labelimg-main .next-labelimg-right>ul li{align-items:center;border:1px solid #ddd;border-radius:3px;display:flex;font-size:12px;justify-content:space-between;line-height:20px;margin:5px 0;padding:3px 6px}.next-labelimg-main .next-labelimg-right>ul li .el-icon{cursor:pointer}.next-labelimg-main .next-labelimg-right>ul li:hover{border:1px solid var(--el-color-primary)}.next-labelimg-main .next-labelimg-right>ul li .label-line{border-radius:3px;display:inline-block;height:10px;margin-right:6px;width:3px}.next-labelimg-footer{align-items:center;display:flex;justify-content:space-between;padding:20px 12px 8px}.next-labelimg-footer .left-right,.next-labelimg-footer .next-labelimg-footer__left,.next-labelimg-footer .next-labelimg-footer__right{align-items:center;display:flex;flex:0 0 50px;justify-content:center}.next-labelimg-footer .left-right .el-icon:hover,.next-labelimg-footer .next-labelimg-footer__left .el-icon:hover,.next-labelimg-footer .next-labelimg-footer__right .el-icon:hover{cursor:pointer}.next-labelimg-footer__center{flex:1 1 auto}.next-labelimg-footer__center--list{align-items:center;display:flex;flex-wrap:nowrap;justify-content:flex-start;min-height:80px}.next-labelimg-footer__center--list>li{background-color:#fff;border:1px solid #eee;box-sizing:border-box;cursor:pointer;flex:0 0 100px;height:80px;margin:0 5px;overflow:hidden;text-align:center}.next-labelimg-footer__center--list>li.is-activate,.next-labelimg-footer__center--list>li:hover{border:1px solid var(--el-color-primary)}.next-labelimg .next-labelimg-contextmenu-label{background-color:#fff;border-radius:8px;box-shadow:0 0 50px 3px #ccc;padding:10px 15px;position:fixed;transition:all .3s;white-space:nowrap;z-index:9999}.next-labelimg .next-labelimg-contextmenu-label>.label-head{align-items:center;display:flex;font-size:14px;justify-content:space-between;padding-bottom:10px}.next-labelimg .next-labelimg-contextmenu-label>.label-head .el-icon{transition:all .3s}.next-labelimg .next-labelimg-contextmenu-label>.label-head .el-icon:hover{cursor:pointer;transform:rotate(90deg)}.next-labelimg .next-labelimg-contextmenu-label>.label-main{scrollbar-face-color:transparent;scrollbar-3dlight-color:#aaa;scrollbar-highlight-color:#aaa;scrollbar-shadow-color:#aaa;scrollbar-base-color:#aaa;scrollbar-track-color:transparent;scrollbar-arrow-color:transparent;max-height:300px;overflow-y:auto}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar{background-color:transparent;border-radius:6px;height:10px;max-width:6px;width:6px}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-thumb{background-color:hsla(0,0%,67%,.2);border-radius:6px}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-thumb:hover{background-color:#aaa}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-thumb:inactive{background-color:#eee}.next-labelimg .next-labelimg-contextmenu-label>.label-main:hover::-webkit-scrollbar-thumb{background-color:hsla(0,0%,67%,.5)}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-track-piece{background-color:transparent;border-radius:6px}.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-resizer,.next-labelimg .next-labelimg-contextmenu-label>.label-main::-webkit-scrollbar-corner{background-color:transparent}.next-labelimg .next-labelimg-contextmenu-label>.label-main>li{align-items:center;display:flex;font-size:12px;padding:3px 0}.next-labelimg .next-labelimg-contextmenu-label>.label-main>li .label-line{border-radius:3px;display:inline-block;height:10px;margin-right:6px;width:3px}.next-labelimg .next-labelimg-contextmenu-label>.label-main>li.activate-label{color:var(--el-color-primary)}.next-labelimg .next-labelimg-draggable-rect{background-color:hsla(0,0%,99%,.5);cursor:move;position:absolute;z-index:999}.next-labelimg .next-labelimg-draggable-rect__resize{height:100%;position:relative;width:100%}.next-labelimg .next-labelimg-draggable-rect__resize .bottom-center,.next-labelimg .next-labelimg-draggable-rect__resize .bottom-left,.next-labelimg .next-labelimg-draggable-rect__resize .bottom-right,.next-labelimg .next-labelimg-draggable-rect__resize .dot,.next-labelimg .next-labelimg-draggable-rect__resize .left-center,.next-labelimg .next-labelimg-draggable-rect__resize .right-center,.next-labelimg .next-labelimg-draggable-rect__resize .top-center,.next-labelimg .next-labelimg-draggable-rect__resize .top-left,.next-labelimg .next-labelimg-draggable-rect__resize .top-right{background-color:var(--el-color-primary);border:1px solid var(--el-color-primary);box-sizing:border-box;height:10px;position:absolute;width:10px}.next-labelimg .next-labelimg-draggable-rect__resize .top-left{cursor:nw-resize;left:-5px;top:-5px}.next-labelimg .next-labelimg-draggable-rect__resize .top-center{cursor:s-resize;left:50%;top:-5px;transform:translateX(-50%)}.next-labelimg .next-labelimg-draggable-rect__resize .top-right{cursor:sw-resize;right:-5px;top:-5px}.next-labelimg .next-labelimg-draggable-rect__resize .left-center{cursor:w-resize;left:-5px;top:50%;transform:translateY(-50%)}.next-labelimg .next-labelimg-draggable-rect__resize .right-center{cursor:w-resize;right:-5px;top:50%;transform:translateY(-50%)}.next-labelimg .next-labelimg-draggable-rect__resize .bottom-left{bottom:-5px;cursor:sw-resize;left:-5px}.next-labelimg .next-labelimg-draggable-rect__resize .bottom-center{bottom:-5px;cursor:s-resize;left:50%;transform:translateX(-50%)}.next-labelimg .next-labelimg-draggable-rect__resize .bottom-right{bottom:-5px;cursor:nw-resize;right:-5px}.next-labelimg-preview{display:inline-block;height:100%}
|
|
16
|
-
.next-labelme-loading .next-spin-loading-mask__text{text-shadow:unset}.next-labelme{border:1px solid #eee;border-radius:3px;box-sizing:border-box;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.next-labelme-main{align-items:center;display:flex;justify-content:space-between}.next-labelme-main__content{align-items:center;display:flex;flex:1 1 100%;justify-content:center}.next-labelme-main .next-labelme-loading{align-items:center;display:flex;justify-content:center;width:100%}.next-labelme-main .next-labelme-canvas{height:100%;min-height:500px;position:relative;width:100%}.next-labelme-main .next-labelme-canvas__context{height:100%;position:absolute;width:100%;z-index:3}.next-labelme-main .next-labelme-canvas__rect{height:100%;position:absolute;width:100%;z-index:1}
|
|
16
|
+
.next-labelme-loading .next-spin-loading-mask__text{text-shadow:unset}.next-labelme-fullscreen{background-color:#fff;bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;transition:all .3s;z-index:999}.next-labelme{border:1px solid #eee;border-radius:3px;box-sizing:border-box;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.next-labelme-header{box-shadow:0 0 4px 0 rgba(0,0,0,.15);font-size:12px;justify-content:space-between;padding:10px 12px}.next-labelme-header,.next-labelme-header__tool,.next-labelme-header__tool>li{align-items:center;display:flex}.next-labelme-header__tool>li{cursor:pointer;justify-content:center;margin:0 6px;text-align:center}.next-labelme-header__tool>li>.label-text{line-height:normal;margin:0;padding:5px 8px}.next-labelme-header__tool>li.tool-item{flex-direction:column}.next-labelme-header__tool>li.tool-item:hover{color:var(--el-color-primary)}.next-labelme-header__tool>li.tool-item:hover svg{fill:var(--el-color-primary)}.next-labelme-main{align-items:center;display:flex;justify-content:space-between}.next-labelme-main__content{align-items:center;display:flex;flex:1 1 100%;height:100%;justify-content:center}.next-labelme-main .next-labelme-loading{align-items:center;display:flex;justify-content:center;width:100%}.next-labelme-main .next-labelme-canvas{height:100%;min-height:500px;position:relative;width:100%}.next-labelme-main .next-labelme-canvas__context{height:100%;position:absolute;width:100%;z-index:3}.next-labelme-main .next-labelme-canvas__rect{height:100%;position:absolute;width:100%;z-index:1}.next-labelme-footer{align-items:center;display:flex;justify-content:space-between;padding:20px 12px 8px}.next-labelme-footer .left-right,.next-labelme-footer .next-labelme-footer__left,.next-labelme-footer .next-labelme-footer__right{align-items:center;display:flex;flex:0 0 50px;justify-content:center}.next-labelme-footer .left-right .el-icon:hover,.next-labelme-footer .next-labelme-footer__left .el-icon:hover,.next-labelme-footer .next-labelme-footer__right .el-icon:hover{cursor:pointer}.next-labelme-footer__center{flex:1 1 auto}.next-labelme-footer__center--list{align-items:center;display:flex;flex-wrap:nowrap;justify-content:flex-start;min-height:80px}.next-labelme-footer__center--list>li{background-color:#fff;border:1px solid #eee;box-sizing:border-box;cursor:pointer;flex:0 0 100px;height:80px;margin:0 5px;overflow:hidden;text-align:center}.next-labelme-footer__center--list>li.is-activate,.next-labelme-footer__center--list>li:hover{border:1px solid var(--el-color-primary)}
|
package/dist/index.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* 作 者：huangteng
|
|
4
4
|
* 邮 箱：htengweb@163.com
|
|
5
|
-
* 当前版本：0.3.
|
|
6
|
-
* 发布日期：2024-
|
|
5
|
+
* 当前版本：0.3.5 v
|
|
6
|
+
* 发布日期：2024-09-03
|
|
7
7
|
* 地 址：https://www.npmjs.com/package/next-element-vue
|
|
8
8
|
*/
|
|
9
9
|
|
|
@@ -896,6 +896,12 @@ var merge = createAssigner((function(object, source, srcIndex) {
|
|
|
896
896
|
saveLabel: "保存当前标注",
|
|
897
897
|
instructions: "使用说明",
|
|
898
898
|
labelNoUpdate: "暂无标签数据更新"
|
|
899
|
+
},
|
|
900
|
+
labelme: {
|
|
901
|
+
saveLabel: "保存",
|
|
902
|
+
createPolygon: "创建多边形",
|
|
903
|
+
editPolygon: "编辑多边形",
|
|
904
|
+
deletePolyton: "删除多边形"
|
|
899
905
|
}
|
|
900
906
|
}
|
|
901
907
|
}, enLocale = {
|
|
@@ -974,6 +980,12 @@ var merge = createAssigner((function(object, source, srcIndex) {
|
|
|
974
980
|
saveLabel: "save label",
|
|
975
981
|
instructions: "instructions",
|
|
976
982
|
labelNoUpdate: "No label data update"
|
|
983
|
+
},
|
|
984
|
+
labelme: {
|
|
985
|
+
saveLabel: "saving...",
|
|
986
|
+
createPolygon: "create polygon",
|
|
987
|
+
editPolygon: "edit polygon",
|
|
988
|
+
deletePolyton: "delete polygon"
|
|
977
989
|
}
|
|
978
990
|
}
|
|
979
991
|
}, zhtwLocale = {
|
|
@@ -1052,6 +1064,9 @@ var merge = createAssigner((function(object, source, srcIndex) {
|
|
|
1052
1064
|
saveLabel: "保存当前标注",
|
|
1053
1065
|
instructions: "使用说明",
|
|
1054
1066
|
labelNoUpdate: "暂无标签数据更新"
|
|
1067
|
+
},
|
|
1068
|
+
labelme: {
|
|
1069
|
+
saveLabel: "保存"
|
|
1055
1070
|
}
|
|
1056
1071
|
}
|
|
1057
1072
|
};
|
|
@@ -3501,7 +3516,7 @@ var NextSpinLoading$1 = defineComponent({
|
|
|
3501
3516
|
return start.setTime(start.getTime() - 94608e6), [ start, end ];
|
|
3502
3517
|
}
|
|
3503
3518
|
} ], _onChangeNumberRange = (value, key) => {
|
|
3504
|
-
formParams
|
|
3519
|
+
formParams[key] = value;
|
|
3505
3520
|
}, renderColItemContent = col => {
|
|
3506
3521
|
const _disabled = valueExist(col.searchDisabled, col.disabled, !1);
|
|
3507
3522
|
if (slots[searchFormSlotName(col.prop)]) return slots[searchFormSlotName(col.prop)]({
|
|
@@ -3532,7 +3547,7 @@ var NextSpinLoading$1 = defineComponent({
|
|
|
3532
3547
|
placeholder: placeholder,
|
|
3533
3548
|
onInput: e => ((val, key) => {
|
|
3534
3549
|
const value = val.replace(/\D/g, "");
|
|
3535
|
-
formParams
|
|
3550
|
+
formParams[key] = value;
|
|
3536
3551
|
})(e, col.prop)
|
|
3537
3552
|
}, {
|
|
3538
3553
|
prefix: col.prefix ? () => col.prefix(formParams, col) : null,
|
|
@@ -3553,7 +3568,7 @@ var NextSpinLoading$1 = defineComponent({
|
|
|
3553
3568
|
let value = val;
|
|
3554
3569
|
value = value.replace(/[^0-9\.]/g, ""), value = value.replace(/^\./, "0."), value = value.replace(/\.{2,}/g, "."),
|
|
3555
3570
|
value = value.replace(".", "DUMMY"), value = value.replace(/\./g, ""), value = value.replace("DUMMY", "."),
|
|
3556
|
-
formParams
|
|
3571
|
+
formParams[key] = value;
|
|
3557
3572
|
})(e, col.prop)
|
|
3558
3573
|
}, {
|
|
3559
3574
|
prefix: col.prefix ? () => col.prefix(formParams, col) : null,
|
|
@@ -3564,7 +3579,7 @@ var NextSpinLoading$1 = defineComponent({
|
|
|
3564
3579
|
}
|
|
3565
3580
|
if ("select" === col.type) {
|
|
3566
3581
|
const placeholder = t("next.form.select") + (col.searchPlaceholder || col.searchLabel || col.label);
|
|
3567
|
-
return createVNode(ElSelect, {
|
|
3582
|
+
return !formParams[col.prop] && col.multiple && (formParams[col.prop] = []), createVNode(ElSelect, {
|
|
3568
3583
|
modelValue: formParams[col.prop],
|
|
3569
3584
|
"onUpdate:modelValue": $event => formParams[col.prop] = $event,
|
|
3570
3585
|
clearable: !0,
|
|
@@ -7098,21 +7113,31 @@ class CreatePolygonVertexes {
|
|
|
7098
7113
|
this.destroyedObservers = callback;
|
|
7099
7114
|
}
|
|
7100
7115
|
canvasMouseClick(e) {
|
|
7101
|
-
e.stopPropagation(), this.isDrawing = !0, this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY
|
|
7102
|
-
|
|
7116
|
+
e.stopPropagation(), this.isDrawing = !0, this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY;
|
|
7117
|
+
const [x, y] = [ e.offsetX, e.offsetY ];
|
|
7118
|
+
let is_add = !0;
|
|
7119
|
+
for (let i = 0; i < this.vertexes.length; i++) {
|
|
7120
|
+
const p = this.vertexes[i];
|
|
7121
|
+
if (Math.sqrt((x - p[0]) ** 2 + (y - p[1]) ** 2) < 8) {
|
|
7122
|
+
is_add = !1;
|
|
7123
|
+
break;
|
|
7124
|
+
}
|
|
7125
|
+
}
|
|
7126
|
+
is_add && this.vertexes.push([ x, y ]), this.vertexes = vertexesUnique(this.vertexes);
|
|
7103
7127
|
}
|
|
7104
7128
|
canvasMousemove(e) {
|
|
7105
7129
|
e.stopPropagation(), this.isDrawing && (this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY,
|
|
7106
7130
|
this.canvas.style.cursor = "crosshair");
|
|
7107
7131
|
}
|
|
7108
7132
|
canvasMouseDblclick(e) {
|
|
7109
|
-
e.stopPropagation(), this.canvas.style.cursor = "unset", this.mouseOffset.x = e.offsetX,
|
|
7110
|
-
this.mouseOffset.y = e.offsetY, this.vertexes.push([ e.offsetX, e.offsetY ]), this.vertexes = vertexesUnique(this.vertexes),
|
|
7133
|
+
e.stopPropagation(), this.isDrawing && (this.canvas.style.cursor = "unset", this.mouseOffset.x = e.offsetX,
|
|
7134
|
+
this.mouseOffset.y = e.offsetY, this.vertexes.push([ e.offsetX, e.offsetY ]), this.vertexes = vertexesUnique(this.vertexes)),
|
|
7111
7135
|
this.notifyDestryedListerers(), this.destroyed();
|
|
7112
7136
|
}
|
|
7113
7137
|
destroyed() {
|
|
7114
|
-
this.isDrawing = !1, this.vertexes = [], this.vertexesObservers = [], this.
|
|
7115
|
-
|
|
7138
|
+
this.isDrawing = !1, this.vertexes = [], this.vertexesObservers = [], this.destroyedObservers = () => {
|
|
7139
|
+
this.canvas.removeEventListener("click", this.canvasMouseClick);
|
|
7140
|
+
}, this.canvas.removeEventListener("mousemove", this.canvasMousemove), this.canvas.removeEventListener("dblclick", this.canvasMouseDblclick);
|
|
7116
7141
|
}
|
|
7117
7142
|
}
|
|
7118
7143
|
|
|
@@ -7127,11 +7152,12 @@ class EditPolygonPath {
|
|
|
7127
7152
|
pointCentreIndex;
|
|
7128
7153
|
vertexRadius;
|
|
7129
7154
|
edgeCentreRadius;
|
|
7155
|
+
pointRecover;
|
|
7130
7156
|
observers=[];
|
|
7131
7157
|
constructor(canvas, ctx) {
|
|
7132
7158
|
this.canvas = canvas, this.ctx = ctx, this.vertexes = [], this.isEditing = !1, this.canClickEvent = !0,
|
|
7133
7159
|
this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1,
|
|
7134
|
-
this.vertexRadius = 8, this.edgeCentreRadius = 5;
|
|
7160
|
+
this.vertexRadius = 8, this.edgeCentreRadius = 5, this.pointRecover = [];
|
|
7135
7161
|
}
|
|
7136
7162
|
drawPolygonPath(vertexes, mouseX, mouseY) {
|
|
7137
7163
|
const ctx = this.ctx;
|
|
@@ -7213,30 +7239,36 @@ class EditPolygonPath {
|
|
|
7213
7239
|
canvasMousedown(e) {
|
|
7214
7240
|
e.stopPropagation(), e.preventDefault(), this.canClickEvent = !0;
|
|
7215
7241
|
const {offsetX: x, offsetY: y} = e;
|
|
7216
|
-
|
|
7217
|
-
|
|
7218
|
-
|
|
7219
|
-
|
|
7220
|
-
|
|
7221
|
-
|
|
7222
|
-
}
|
|
7242
|
+
this.pointRecover = [ x, y ];
|
|
7243
|
+
const vertex_i = this.pointInVertexes(x, y);
|
|
7244
|
+
isValueExist(vertex_i) && (this.isMoveEditing = !0, this.pointVertexIndex = vertex_i,
|
|
7245
|
+
this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]));
|
|
7246
|
+
const i = this.pointInEdgeCentre(x, y);
|
|
7247
|
+
isValueExist(i) && (this.isMoveEditing = !0, this.pointCentreIndex = i + 1, this.vertexes.splice(this.pointCentreIndex, 0, [ x, y ])),
|
|
7223
7248
|
setTimeout((() => {
|
|
7224
7249
|
this.canClickEvent = !1;
|
|
7225
7250
|
}), 200);
|
|
7226
7251
|
}
|
|
7227
7252
|
canvasMouseup(e) {
|
|
7228
7253
|
e.stopPropagation(), e.preventDefault();
|
|
7229
|
-
|
|
7254
|
+
let {offsetX: x, offsetY: y} = e;
|
|
7255
|
+
this.vertexes = vertexesUnique(this.vertexes);
|
|
7256
|
+
for (let i = 0; i < this.vertexes.length; i++) {
|
|
7257
|
+
const p = this.vertexes[i], radius = Math.sqrt((x - p[0]) ** 2 + (y - p[1]) ** 2);
|
|
7258
|
+
if (radius < 8 && radius > 0 && this.pointRecover.length) {
|
|
7259
|
+
x = this.pointRecover[0], y = this.pointRecover[1], this.pointRecover = [];
|
|
7260
|
+
break;
|
|
7261
|
+
}
|
|
7262
|
+
}
|
|
7230
7263
|
this.pointVertexIndex > -1 && this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]),
|
|
7231
7264
|
this.pointCentreIndex > -1 && this.vertexes.splice(this.pointCentreIndex, 1, [ x, y ]),
|
|
7232
7265
|
this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1,
|
|
7233
|
-
this.notifyObservers();
|
|
7266
|
+
this.drawPolygon(this.vertexes), this.notifyObservers();
|
|
7234
7267
|
}
|
|
7235
7268
|
canvasMouseClick(e) {
|
|
7236
7269
|
e.stopPropagation();
|
|
7237
7270
|
const {offsetX: x, offsetY: y} = e;
|
|
7238
|
-
if (this.
|
|
7239
|
-
e.stopImmediatePropagation();
|
|
7271
|
+
if (this.canClickEvent) {
|
|
7240
7272
|
const i = this.pointInVertexes(x, y);
|
|
7241
7273
|
if (isValueExist(i)) {
|
|
7242
7274
|
if (this.vertexes.length <= 3) return;
|
|
@@ -7273,8 +7305,8 @@ class CreateDrawCanvas {
|
|
|
7273
7305
|
const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, paths: paths} = options;
|
|
7274
7306
|
this.canvas = canvas, this.ctx = ctx, this.image = image, this.canvasWidth = canvasWidth,
|
|
7275
7307
|
this.canvasHeight = canvasHeight, this.paths = paths || [], this.editVertexes = [],
|
|
7276
|
-
this.render(), this.
|
|
7277
|
-
this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
|
|
7308
|
+
this.render(), this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx),
|
|
7309
|
+
this.editDrawPolygon = new EditPolygonPath(canvas, ctx), this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
|
|
7278
7310
|
this.render(), this.editDrawPolygon.drawPolygon(vertexes, mouseOffset), this.editVertexes = vertexes,
|
|
7279
7311
|
this.notifyObservers();
|
|
7280
7312
|
})), this.createPolygonVertexes.onDestroyed((vertexes => {
|
|
@@ -7335,8 +7367,12 @@ var CanvasContext = defineComponent({
|
|
|
7335
7367
|
}
|
|
7336
7368
|
},
|
|
7337
7369
|
emits: [ "editPolygon" ],
|
|
7338
|
-
setup(props, {emit: emit}) {
|
|
7339
|
-
const ns = inject("ns", {}), canvasMainRef = ref(), canvasBaseRef = ref(), drawCanvas = ref(),
|
|
7370
|
+
setup(props, {emit: emit, expose: expose}) {
|
|
7371
|
+
const ns = inject("ns", {}), canvasMainRef = ref(), canvasBaseRef = ref(), drawCanvas = ref(), setContainerWidthHeight = (canvasWidth, canvasHeight) => {
|
|
7372
|
+
canvasMainRef.value.style.width = canvasWidth + "px", canvasMainRef.value.style.height = canvasHeight + "px",
|
|
7373
|
+
canvasBaseRef.value.width = canvasWidth, canvasBaseRef.value.height = canvasHeight,
|
|
7374
|
+
canvasBaseRef.value.style.width = canvasWidth + "px", canvasBaseRef.value.style.height = canvasHeight + "px";
|
|
7375
|
+
}, loadingImage = ref(!1), renderImageLabel = rowInfo => {
|
|
7340
7376
|
const clientHeight = canvasMainRef.value?.clientHeight, ctx = canvasBaseRef.value?.getContext("2d");
|
|
7341
7377
|
if (rowInfo?.imageSrc) {
|
|
7342
7378
|
const image = new Image;
|
|
@@ -7348,11 +7384,7 @@ var CanvasContext = defineComponent({
|
|
|
7348
7384
|
height = clientHeight, image.style.height = height + "px", width /= scale;
|
|
7349
7385
|
}
|
|
7350
7386
|
const canvasHeight = height, scaleFactor = parseFloat((canvasHeight / height).toFixed(3)), canvasWidth = Math.ceil(width * scaleFactor);
|
|
7351
|
-
(
|
|
7352
|
-
canvasMainRef.value.style.width = canvasWidth + "px", canvasMainRef.value.style.height = canvasHeight + "px",
|
|
7353
|
-
canvasBaseRef.value.width = canvasWidth, canvasBaseRef.value.height = canvasHeight,
|
|
7354
|
-
canvasBaseRef.value.style.width = canvasWidth + "px", canvasBaseRef.value.style.height = canvasHeight + "px";
|
|
7355
|
-
})(canvasWidth, canvasHeight), drawCanvas.value = new CreateDrawCanvas({
|
|
7387
|
+
setContainerWidthHeight(canvasWidth, canvasHeight), drawCanvas.value = new CreateDrawCanvas({
|
|
7356
7388
|
canvas: canvasBaseRef.value,
|
|
7357
7389
|
ctx: ctx,
|
|
7358
7390
|
image: image,
|
|
@@ -7387,9 +7419,19 @@ var CanvasContext = defineComponent({
|
|
|
7387
7419
|
}
|
|
7388
7420
|
}));
|
|
7389
7421
|
}));
|
|
7390
|
-
return (
|
|
7422
|
+
return expose({
|
|
7423
|
+
rerenderImage: () => {
|
|
7424
|
+
setContainerWidthHeight(0, 0), nextTick((() => {
|
|
7425
|
+
const rowInfo = toRaw(props.rowInfo);
|
|
7426
|
+
renderImageLabel(rowInfo);
|
|
7427
|
+
}));
|
|
7428
|
+
}
|
|
7429
|
+
}), () => createVNode(Fragment, null, [ createVNode(NextSpinLoading, {
|
|
7391
7430
|
loading: loadingImage.value,
|
|
7392
|
-
class: [ ns.b("loading") ]
|
|
7431
|
+
class: [ ns.b("loading") ],
|
|
7432
|
+
style: {
|
|
7433
|
+
height: "100%"
|
|
7434
|
+
}
|
|
7393
7435
|
}, {
|
|
7394
7436
|
default: () => [ createVNode("div", {
|
|
7395
7437
|
ref: canvasMainRef,
|
|
@@ -7400,13 +7442,175 @@ var CanvasContext = defineComponent({
|
|
|
7400
7442
|
}, null) ]) ]
|
|
7401
7443
|
}) ]);
|
|
7402
7444
|
}
|
|
7445
|
+
}), HeaderTool = defineComponent({
|
|
7446
|
+
props: {
|
|
7447
|
+
isFullscreen: {
|
|
7448
|
+
type: Boolean,
|
|
7449
|
+
default: !1
|
|
7450
|
+
},
|
|
7451
|
+
imageIndex: {
|
|
7452
|
+
type: Number,
|
|
7453
|
+
default: 0
|
|
7454
|
+
},
|
|
7455
|
+
imageLength: {
|
|
7456
|
+
type: Number,
|
|
7457
|
+
default: 0
|
|
7458
|
+
}
|
|
7459
|
+
},
|
|
7460
|
+
emits: [ "fullscreen", "save" ],
|
|
7461
|
+
setup(props, {emit: emit}) {
|
|
7462
|
+
const _ns = inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
|
|
7463
|
+
emit("fullscreen", val);
|
|
7464
|
+
};
|
|
7465
|
+
return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("ul", {
|
|
7466
|
+
class: [ _ns.be("header", "tool") ]
|
|
7467
|
+
}, [ createVNode("li", {
|
|
7468
|
+
class: "tool-item",
|
|
7469
|
+
onClick: () => emit("save")
|
|
7470
|
+
}, [ createVNode("svg", {
|
|
7471
|
+
t: "1719034799379",
|
|
7472
|
+
class: "icon",
|
|
7473
|
+
viewBox: "0 0 1024 1024",
|
|
7474
|
+
version: "1.1",
|
|
7475
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7476
|
+
"p-id": "4272",
|
|
7477
|
+
width: "18",
|
|
7478
|
+
height: "18"
|
|
7479
|
+
}, [ createVNode("path", {
|
|
7480
|
+
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",
|
|
7481
|
+
"p-id": "4273"
|
|
7482
|
+
}, null), createVNode("path", {
|
|
7483
|
+
d: "M536 196.3h42.7v87.2H536zM368.7 641.2h220.7v42.7H368.7zM368.7 744h170.9v42.7H368.7z",
|
|
7484
|
+
"p-id": "4274"
|
|
7485
|
+
}, null) ]), createVNode("p", {
|
|
7486
|
+
class: "label-text"
|
|
7487
|
+
}, [ t("next.labelme.saveLabel") ]) ]), createVNode("li", {
|
|
7488
|
+
class: "tool-item"
|
|
7489
|
+
}, [ createVNode("svg", {
|
|
7490
|
+
t: "1721826305513",
|
|
7491
|
+
class: "icon",
|
|
7492
|
+
viewBox: "0 0 1025 1024",
|
|
7493
|
+
version: "1.1",
|
|
7494
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7495
|
+
"p-id": "6215",
|
|
7496
|
+
width: "18",
|
|
7497
|
+
height: "18"
|
|
7498
|
+
}, [ createVNode("path", {
|
|
7499
|
+
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",
|
|
7500
|
+
"p-id": "6216"
|
|
7501
|
+
}, null), createVNode("path", {
|
|
7502
|
+
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",
|
|
7503
|
+
"p-id": "6217"
|
|
7504
|
+
}, null) ]), createVNode("p", {
|
|
7505
|
+
class: "label-text"
|
|
7506
|
+
}, [ t("next.labelme.createPolygon") ]) ]), createVNode("li", {
|
|
7507
|
+
class: "tool-item"
|
|
7508
|
+
}, [ createVNode("svg", {
|
|
7509
|
+
t: "1721826424613",
|
|
7510
|
+
class: "icon",
|
|
7511
|
+
viewBox: "0 0 1024 1024",
|
|
7512
|
+
version: "1.1",
|
|
7513
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7514
|
+
"p-id": "7356",
|
|
7515
|
+
width: "18",
|
|
7516
|
+
height: "18"
|
|
7517
|
+
}, [ createVNode("path", {
|
|
7518
|
+
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",
|
|
7519
|
+
"p-id": "7357"
|
|
7520
|
+
}, null) ]), createVNode("p", {
|
|
7521
|
+
class: "label-text"
|
|
7522
|
+
}, [ t("next.labelme.editPolygon") ]) ]), createVNode("li", {
|
|
7523
|
+
class: "tool-item"
|
|
7524
|
+
}, [ createVNode("svg", {
|
|
7525
|
+
t: "1721826579655",
|
|
7526
|
+
class: "icon",
|
|
7527
|
+
viewBox: "0 0 1024 1024",
|
|
7528
|
+
version: "1.1",
|
|
7529
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7530
|
+
"p-id": "10996",
|
|
7531
|
+
width: "18",
|
|
7532
|
+
height: "18"
|
|
7533
|
+
}, [ createVNode("path", {
|
|
7534
|
+
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",
|
|
7535
|
+
"p-id": "10997"
|
|
7536
|
+
}, null), createVNode("path", {
|
|
7537
|
+
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",
|
|
7538
|
+
"p-id": "10998"
|
|
7539
|
+
}, null) ]), createVNode("p", {
|
|
7540
|
+
class: "label-text"
|
|
7541
|
+
}, [ t("next.labelme.deletePolyton") ]) ]) ]), createVNode("ul", {
|
|
7542
|
+
class: [ _ns.be("header", "tool") ]
|
|
7543
|
+
}, [ props.imageLength ? createVNode("li", null, [ createVNode("span", null, [ createTextVNode("第 "), props.imageIndex + 1, createTextVNode(" 张") ]), createVNode("em", {
|
|
7544
|
+
style: "padding: 0 5px;"
|
|
7545
|
+
}, [ createTextVNode("/") ]), createVNode("span", null, [ createTextVNode("共 "), props.imageLength, createTextVNode(" 张") ]) ]) : null, createVNode("li", {
|
|
7546
|
+
style: "margin-right: 30px;",
|
|
7547
|
+
class: "tool-item"
|
|
7548
|
+
}, [ createVNode(ElPopover, {
|
|
7549
|
+
trigger: "hover",
|
|
7550
|
+
placement: "bottom",
|
|
7551
|
+
width: "none"
|
|
7552
|
+
}, {
|
|
7553
|
+
reference: () => createVNode("div", {
|
|
7554
|
+
class: "flex-center"
|
|
7555
|
+
}, [ createVNode("span", {
|
|
7556
|
+
style: "padding-right: 3px"
|
|
7557
|
+
}, [ t("next.labelimg.instructions") ]), createVNode(ElIcon, {
|
|
7558
|
+
size: 14
|
|
7559
|
+
}, {
|
|
7560
|
+
default: () => [ createVNode(warning_default, null, null) ]
|
|
7561
|
+
}) ]),
|
|
7562
|
+
default: () => createVNode("ul", {
|
|
7563
|
+
style: "font-size: 12px;white-space: nowrap;"
|
|
7564
|
+
}, [ 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键进入下一张图片进行标注") ]) ]) ])
|
|
7565
|
+
}) ]), props.isFullscreen ? createVNode("li", {
|
|
7566
|
+
class: "tool-item",
|
|
7567
|
+
onClick: () => switchFillscreen(!1)
|
|
7568
|
+
}, [ createVNode(ElTooltip, {
|
|
7569
|
+
placement: "top",
|
|
7570
|
+
content: "取消全屏"
|
|
7571
|
+
}, {
|
|
7572
|
+
default: () => [ createVNode("svg", {
|
|
7573
|
+
t: "1719035442027",
|
|
7574
|
+
class: "icon",
|
|
7575
|
+
viewBox: "0 0 1024 1024",
|
|
7576
|
+
version: "1.1",
|
|
7577
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7578
|
+
"p-id": "5388",
|
|
7579
|
+
width: "18",
|
|
7580
|
+
height: "18"
|
|
7581
|
+
}, [ createVNode("path", {
|
|
7582
|
+
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",
|
|
7583
|
+
"p-id": "5389"
|
|
7584
|
+
}, null) ]) ]
|
|
7585
|
+
}) ]) : createVNode("li", {
|
|
7586
|
+
class: "tool-item",
|
|
7587
|
+
onClick: () => switchFillscreen(!0)
|
|
7588
|
+
}, [ createVNode(ElTooltip, {
|
|
7589
|
+
placement: "top",
|
|
7590
|
+
content: "全屏"
|
|
7591
|
+
}, {
|
|
7592
|
+
default: () => [ createVNode("svg", {
|
|
7593
|
+
t: "1719035375323",
|
|
7594
|
+
class: "icon",
|
|
7595
|
+
viewBox: "0 0 1024 1024",
|
|
7596
|
+
version: "1.1",
|
|
7597
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7598
|
+
"p-id": "5241",
|
|
7599
|
+
width: "18",
|
|
7600
|
+
height: "18"
|
|
7601
|
+
}, [ createVNode("path", {
|
|
7602
|
+
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",
|
|
7603
|
+
"p-id": "5242"
|
|
7604
|
+
}, null) ]) ]
|
|
7605
|
+
}) ]) ]) ]) ]);
|
|
7606
|
+
}
|
|
7403
7607
|
}), defaultConfig = {
|
|
7404
7608
|
minContentHeight: 500
|
|
7405
7609
|
};
|
|
7406
7610
|
|
|
7407
7611
|
const ns = useNamespace("labelme");
|
|
7408
7612
|
|
|
7409
|
-
|
|
7613
|
+
var Element = defineComponent({
|
|
7410
7614
|
name: "NextLabelme",
|
|
7411
7615
|
props: {
|
|
7412
7616
|
className: {
|
|
@@ -7430,14 +7634,14 @@ const NextLabelme = withInstall(defineComponent({
|
|
|
7430
7634
|
default: () => []
|
|
7431
7635
|
}
|
|
7432
7636
|
},
|
|
7433
|
-
emits: [ "change", "edit-polygon" ],
|
|
7434
|
-
setup(props, {emit: emit}) {
|
|
7637
|
+
emits: [ "change", "save", "edit-polygon", "prev-click", "next-click" ],
|
|
7638
|
+
setup(props, {emit: emit, slots: slots}) {
|
|
7435
7639
|
const _config = deepClone(defaultConfig), _options = computed((() => {
|
|
7436
7640
|
const cfg = unref(props.options);
|
|
7437
7641
|
return merge$1(_config, cfg);
|
|
7438
7642
|
})), options = unref(_options);
|
|
7439
|
-
provide("ns", ns)
|
|
7440
|
-
const activateNodeIndex = ref(0), classes = ref(props.classes), labelImages = ref(deepClone(props.data));
|
|
7643
|
+
provide("ns", ns);
|
|
7644
|
+
const {t: t} = useLocale(), activateNodeIndex = ref(0), classes = ref(props.classes), labelImages = ref(deepClone(props.data));
|
|
7441
7645
|
watch((() => props.data), (data => {
|
|
7442
7646
|
labelImages.value = deepClone(data);
|
|
7443
7647
|
}), {
|
|
@@ -7453,28 +7657,123 @@ const NextLabelme = withInstall(defineComponent({
|
|
|
7453
7657
|
if (!labelImages.value) return {};
|
|
7454
7658
|
const node = labelImages.value[activateNodeIndex.value] || {};
|
|
7455
7659
|
return deepClone(node);
|
|
7456
|
-
})), mainContentHeight = ref(options.minContentHeight), mainRef = ref(),
|
|
7660
|
+
})), loading = ref(!1), mainContentHeight = ref(options.minContentHeight), canvasContextRef = ref(), layoutLabelRef = ref(), headerRef = ref(), mainRef = ref(), footerRef = ref(), updateMainContentHeight = () => {
|
|
7661
|
+
nextTick((() => {
|
|
7662
|
+
const contentHeight = (layoutLabelRef.value?.clientHeight || 0) - ((headerRef.value?.clientHeight || 0) + (footerRef.value?.clientHeight || 0));
|
|
7663
|
+
mainContentHeight.value = contentHeight;
|
|
7664
|
+
}));
|
|
7665
|
+
};
|
|
7666
|
+
onMounted((() => {
|
|
7667
|
+
document.addEventListener("keydown", onKeydownPrevNext), elementResize(layoutLabelRef.value.parentElement, (() => {
|
|
7668
|
+
updateMainContentHeight();
|
|
7669
|
+
})), window.addEventListener("resize", updateMainContentHeight);
|
|
7670
|
+
})), onUnmounted((() => {
|
|
7671
|
+
document.removeEventListener("keydown", onKeydownPrevNext), window.removeEventListener("resize", updateMainContentHeight);
|
|
7672
|
+
}));
|
|
7673
|
+
const onKeydownPrevNext = () => {}, onPaginationPrev = () => {
|
|
7674
|
+
const imageLength = labelImages.value.length;
|
|
7675
|
+
let i = activateNodeIndex.value - 1;
|
|
7676
|
+
i < 0 && (i = imageLength - 1), onChangeActivateNode(i), emit("prev-click");
|
|
7677
|
+
}, onPaginationNext = () => {
|
|
7678
|
+
const imageLength = labelImages.value.length;
|
|
7679
|
+
let i = activateNodeIndex.value + 1;
|
|
7680
|
+
i >= imageLength && (i = 0), onChangeActivateNode(i), emit("next-click");
|
|
7681
|
+
}, onChangeActivateNode = index => {
|
|
7682
|
+
if (loading.value) return;
|
|
7683
|
+
loading.value = !0;
|
|
7684
|
+
const node = currentNode.value;
|
|
7685
|
+
emit("save", {
|
|
7686
|
+
node: node
|
|
7687
|
+
}, (imageItem => {
|
|
7688
|
+
labelImages.value[activateNodeIndex.value] = imageItem || node, activateNodeIndex.value = index,
|
|
7689
|
+
loading.value = !1;
|
|
7690
|
+
}), (() => {
|
|
7691
|
+
loading.value = !1;
|
|
7692
|
+
}));
|
|
7693
|
+
}, isFullscreen = ref(!1), onSwitchFillscreen = val => {
|
|
7694
|
+
isFullscreen.value = val, updateMainContentHeight(), nextTick((() => {
|
|
7695
|
+
canvasContextRef.value.rerenderImage();
|
|
7696
|
+
}));
|
|
7697
|
+
}, onEditPlygonChange = plygon => {
|
|
7457
7698
|
emit("edit-polygon", plygon);
|
|
7458
7699
|
};
|
|
7459
7700
|
return () => createVNode(Fragment, null, [ createVNode("div", {
|
|
7701
|
+
ref: layoutLabelRef,
|
|
7460
7702
|
class: [ ns.b(), props.className, isFullscreen.value ? ns.b("fullscreen") : "" ],
|
|
7461
7703
|
style: {
|
|
7462
7704
|
...props.style
|
|
7463
7705
|
}
|
|
7464
|
-
}, [ createVNode(
|
|
7465
|
-
|
|
7466
|
-
|
|
7467
|
-
|
|
7468
|
-
|
|
7469
|
-
|
|
7470
|
-
|
|
7471
|
-
|
|
7472
|
-
|
|
7473
|
-
|
|
7474
|
-
|
|
7475
|
-
|
|
7706
|
+
}, [ createVNode(NextSpinLoading, {
|
|
7707
|
+
loading: loading.value,
|
|
7708
|
+
tip: t("next.labelimg.saveTxt"),
|
|
7709
|
+
class: [ ns.b("loading") ]
|
|
7710
|
+
}, {
|
|
7711
|
+
default: () => [ createVNode(ElScrollbar, null, {
|
|
7712
|
+
default: () => [ createVNode("header", {
|
|
7713
|
+
ref: headerRef,
|
|
7714
|
+
class: [ ns.b("header") ]
|
|
7715
|
+
}, [ slots.header ? slots.header() : createVNode(HeaderTool, {
|
|
7716
|
+
isFullscreen: isFullscreen.value,
|
|
7717
|
+
imageIndex: activateNodeIndex.value,
|
|
7718
|
+
imageLength: labelImages.value.length,
|
|
7719
|
+
onFullscreen: onSwitchFillscreen
|
|
7720
|
+
}, null) ]), createVNode("div", {
|
|
7721
|
+
ref: mainRef,
|
|
7722
|
+
class: [ ns.b("main") ]
|
|
7723
|
+
}, [ createVNode("div", {
|
|
7724
|
+
class: [ ns.be("main", "content") ],
|
|
7725
|
+
style: {
|
|
7726
|
+
height: mainContentHeight.value + "px"
|
|
7727
|
+
}
|
|
7728
|
+
}, [ createVNode(CanvasContext, {
|
|
7729
|
+
ref: canvasContextRef,
|
|
7730
|
+
rowInfo: currentNode.value,
|
|
7731
|
+
onEditPolygon: onEditPlygonChange
|
|
7732
|
+
}, null) ]) ]), createVNode("footer", {
|
|
7733
|
+
ref: footerRef,
|
|
7734
|
+
class: [ ns.b("footer") ]
|
|
7735
|
+
}, [ createVNode("div", {
|
|
7736
|
+
class: [ ns.be("footer", "left") ]
|
|
7737
|
+
}, [ createVNode(ElIcon, {
|
|
7738
|
+
size: 24,
|
|
7739
|
+
color: "#797979",
|
|
7740
|
+
onClick: onPaginationPrev
|
|
7741
|
+
}, {
|
|
7742
|
+
default: () => [ createVNode(arrow_left_default, null, null) ]
|
|
7743
|
+
}) ]), createVNode("div", {
|
|
7744
|
+
class: [ ns.be("footer", "center") ]
|
|
7745
|
+
}, [ createVNode(ElScrollbar, null, {
|
|
7746
|
+
default: () => [ createVNode("ul", {
|
|
7747
|
+
class: [ ns.bem("footer", "center", "list") ]
|
|
7748
|
+
}, [ labelImages.value.map(((item, index) => createVNode("li", {
|
|
7749
|
+
key: index,
|
|
7750
|
+
onClick: () => onChangeActivateNode(index),
|
|
7751
|
+
class: {
|
|
7752
|
+
"is-activate": activateNodeIndex.value === index
|
|
7753
|
+
}
|
|
7754
|
+
}, [ createVNode(ElImage, {
|
|
7755
|
+
style: "height: 100%",
|
|
7756
|
+
src: item.imageSrc,
|
|
7757
|
+
"zoom-rate": 1.2,
|
|
7758
|
+
"max-scale": 2,
|
|
7759
|
+
"min-scale": .2,
|
|
7760
|
+
fit: "cover"
|
|
7761
|
+
}, null) ]))) ]) ]
|
|
7762
|
+
}) ]), createVNode("div", {
|
|
7763
|
+
class: [ ns.be("footer", "right") ]
|
|
7764
|
+
}, [ createVNode(ElIcon, {
|
|
7765
|
+
size: 24,
|
|
7766
|
+
color: "#797979",
|
|
7767
|
+
onClick: onPaginationNext
|
|
7768
|
+
}, {
|
|
7769
|
+
default: () => [ createVNode(arrow_right_default, null, null) ]
|
|
7770
|
+
}) ]) ]) ]
|
|
7771
|
+
}) ]
|
|
7772
|
+
}) ]) ]);
|
|
7476
7773
|
}
|
|
7477
|
-
})
|
|
7774
|
+
});
|
|
7775
|
+
|
|
7776
|
+
const NextLabelme = withInstall(Element);
|
|
7478
7777
|
|
|
7479
7778
|
var components = Object.freeze({
|
|
7480
7779
|
__proto__: null,
|
|
@@ -7529,7 +7828,7 @@ const zoomDialog = app => {
|
|
|
7529
7828
|
}));
|
|
7530
7829
|
}
|
|
7531
7830
|
});
|
|
7532
|
-
}, version = "0.3.
|
|
7831
|
+
}, version = "0.3.5", install = function(app) {
|
|
7533
7832
|
Object.keys(components).forEach((key => {
|
|
7534
7833
|
const component = components[key];
|
|
7535
7834
|
app.component(component.name, component);
|
|
@@ -7539,7 +7838,7 @@ const zoomDialog = app => {
|
|
|
7539
7838
|
};
|
|
7540
7839
|
|
|
7541
7840
|
var index = {
|
|
7542
|
-
version: "0.3.
|
|
7841
|
+
version: "0.3.5",
|
|
7543
7842
|
install: install
|
|
7544
7843
|
};
|
|
7545
7844
|
|