next-element-vue 0.3.5 → 0.3.6
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 +2 -2
- package/dist/index.js +138 -67
- package/dist/index.min.js +3 -3
- package/dist/index.umd.js +138 -67
- package/dist/index.umd.min.js +3 -3
- package/dist/packages/components/labelimg/src/hooks/canvas-context-hook.d.ts +47 -2
- package/dist/packages/components/labelimg/src/widgets/draggable-rect.d.ts +2 -0
- package/dist/packages/components/labelme/src/hooks/canvas-content.d.ts +4 -0
- package/dist/packages/hooks/use-locale/index.d.ts +1 -0
- package/dist/packages/locale/lang/en.d.ts +1 -0
- package/dist/packages/locale/lang/zh-cn.d.ts +1 -0
- package/dist/packages/locale/lang/zh-tw.d.ts +1 -0
- package/package.json +2 -2
package/dist/index.css
CHANGED
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
.next-upload .el-upload-list__item-thumbnail{-o-object-fit:cover;object-fit:cover}
|
|
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
|
-
.next-labelimg-loading .next-spin-loading-mask__text{text-shadow:unset}.next-labelimg
|
|
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)}
|
|
15
|
+
.next-labelimg-loading .next-spin-loading-mask__text{text-shadow:unset}.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.el-scrollbar{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADZJREFUOE9jZKAQMFKon2HUAAYah8HZs2f/MzAw3DY2NlbDFVt4Y4FiA4hJI6PpgNbpgJhYAAB1/AoRxXg31wAAAABJRU5ErkJggg==)}.next-labelimg-main__content.el-scrollbar .el-scrollbar__wrap{width:100%}.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;height:100%;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-fullscreen{background-color:#fff;bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;transition:all .3s;z-index:999}.next-labelimg-preview{display:inline-block;height:100%}
|
|
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;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADZJREFUOE9jZKAQMFKon2HUAAYah8HZs2f/MzAw3DY2NlbDFVt4Y4FiA4hJI6PpgNbpgJhYAAB1/AoRxXg31wAAAABJRU5ErkJggg==);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-09-
|
|
5
|
+
* 当前版本：0.3.6 v
|
|
6
|
+
* 发布日期：2024-09-15
|
|
7
7
|
* 地 址：https://www.npmjs.com/package/next-element-vue
|
|
8
8
|
*/
|
|
9
9
|
|
|
@@ -895,7 +895,8 @@ var merge = createAssigner((function(object, source, srcIndex) {
|
|
|
895
895
|
confirmDeleteLabel: "确定要删除该标注吗？",
|
|
896
896
|
saveLabel: "保存当前标注",
|
|
897
897
|
instructions: "使用说明",
|
|
898
|
-
labelNoUpdate: "暂无标签数据更新"
|
|
898
|
+
labelNoUpdate: "暂无标签数据更新",
|
|
899
|
+
zoomRestore: "还原"
|
|
899
900
|
},
|
|
900
901
|
labelme: {
|
|
901
902
|
saveLabel: "保存",
|
|
@@ -979,7 +980,8 @@ var merge = createAssigner((function(object, source, srcIndex) {
|
|
|
979
980
|
confirmDeleteLabel: "Are you sure you want to delete this annotation?",
|
|
980
981
|
saveLabel: "save label",
|
|
981
982
|
instructions: "instructions",
|
|
982
|
-
labelNoUpdate: "No label data update"
|
|
983
|
+
labelNoUpdate: "No label data update",
|
|
984
|
+
zoomRestore: "restore zoom"
|
|
983
985
|
},
|
|
984
986
|
labelme: {
|
|
985
987
|
saveLabel: "saving...",
|
|
@@ -1063,7 +1065,8 @@ var merge = createAssigner((function(object, source, srcIndex) {
|
|
|
1063
1065
|
confirmDeleteLabel: "确定要删除该标注吗？",
|
|
1064
1066
|
saveLabel: "保存当前标注",
|
|
1065
1067
|
instructions: "使用说明",
|
|
1066
|
-
labelNoUpdate: "暂无标签数据更新"
|
|
1068
|
+
labelNoUpdate: "暂无标签数据更新",
|
|
1069
|
+
zoomRestore: "还原"
|
|
1067
1070
|
},
|
|
1068
1071
|
labelme: {
|
|
1069
1072
|
saveLabel: "保存"
|
|
@@ -6022,7 +6025,7 @@ var ToolHeader = defineComponent({
|
|
|
6022
6025
|
emits: [ "fullscreen", "save" ],
|
|
6023
6026
|
setup(props, {emit: emit}) {
|
|
6024
6027
|
const _ns = inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
|
|
6025
|
-
emit("fullscreen", val);
|
|
6028
|
+
emit("fullscreen", val), document.body.style.overflow = val ? "hidden" : "auto";
|
|
6026
6029
|
};
|
|
6027
6030
|
return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("ul", {
|
|
6028
6031
|
class: [ _ns.be("header", "tool") ]
|
|
@@ -6405,7 +6408,7 @@ var DraggableRect = defineComponent({
|
|
|
6405
6408
|
},
|
|
6406
6409
|
emits: [ "change" ],
|
|
6407
6410
|
setup(props, {emit: emit, expose: expose}) {
|
|
6408
|
-
const ns = inject("ns", {}), _emit = inject("_emit", null), canvasMainRef = ref(), canvasBaseRef = ref(), canvasRectRef = ref(), labels = ref([]), drawBaseCanvas = ref({}), formatLabelsType = () => {
|
|
6411
|
+
const ns = inject("ns", {}), _emit = inject("_emit", null), mainBasaeRef = ref(), canvasMainRef = ref(), canvasBaseRef = ref(), canvasRectRef = ref(), labels = ref([]), drawBaseCanvas = ref({}), formatLabelsType = () => {
|
|
6409
6412
|
const _labels = deepClone(labels.value);
|
|
6410
6413
|
let yolo_label = [];
|
|
6411
6414
|
return {
|
|
@@ -6423,22 +6426,39 @@ var DraggableRect = defineComponent({
|
|
|
6423
6426
|
canvasRectRef.value.width = canvasWidth, canvasRectRef.value.height = canvasHeight,
|
|
6424
6427
|
canvasRectRef.value.style.width = canvasWidth + "px", canvasRectRef.value.style.height = canvasHeight + "px";
|
|
6425
6428
|
}, loadingImage = ref(!1), renderImageLabel = rowInfo => {
|
|
6426
|
-
|
|
6427
|
-
const typeName = props.classes[rect.type];
|
|
6428
|
-
return typeName && (rect.typeName = typeName), rect;
|
|
6429
|
-
})) : [])(rowInfo);
|
|
6430
|
-
const clientHeight = canvasMainRef.value?.clientHeight, ctx = canvasBaseRef.value?.getContext("2d");
|
|
6429
|
+
const ctx = canvasBaseRef.value?.getContext("2d");
|
|
6431
6430
|
if (rowInfo?.imageSrc) {
|
|
6432
6431
|
const image = new Image;
|
|
6433
6432
|
image.src = rowInfo.imageSrc, loadingImage.value = !0, image.onload = () => {
|
|
6434
6433
|
loadingImage.value = !1;
|
|
6435
|
-
|
|
6436
|
-
|
|
6437
|
-
|
|
6438
|
-
|
|
6439
|
-
|
|
6440
|
-
|
|
6441
|
-
|
|
6434
|
+
const {canvasWidth: canvasWidth, canvasHeight: canvasHeight, scaleFactor: scaleFactor, originWidth: originWidth, originHeight: originHeight} = (image => {
|
|
6435
|
+
const clientWidth = mainBasaeRef.value?.elementInstance.clientWidth, clientHeight = mainBasaeRef.value?.elementInstance.clientHeight;
|
|
6436
|
+
let {width: width, height: height} = image, scaleFactor = 1;
|
|
6437
|
+
const scale = width / height;
|
|
6438
|
+
if (scale > 1 ? (width = clientWidth, height = clientWidth / scale) : (width = clientHeight * scale,
|
|
6439
|
+
height = clientHeight), height > clientHeight) {
|
|
6440
|
+
const scale = height / clientHeight;
|
|
6441
|
+
height = clientHeight, width /= scale;
|
|
6442
|
+
} else if (width > clientWidth) {
|
|
6443
|
+
const scale = width / clientWidth;
|
|
6444
|
+
width = clientWidth, height /= scale;
|
|
6445
|
+
}
|
|
6446
|
+
const canvasWidth = parseInt(width.toString()), canvasHeight = parseInt(height.toString());
|
|
6447
|
+
return scaleFactor = Number((canvasWidth / canvasHeight).toFixed(2)), {
|
|
6448
|
+
canvasWidth: canvasWidth,
|
|
6449
|
+
canvasHeight: canvasHeight,
|
|
6450
|
+
scaleFactor: scaleFactor,
|
|
6451
|
+
originWidth: image.width,
|
|
6452
|
+
originHeight: image.height
|
|
6453
|
+
};
|
|
6454
|
+
})(image);
|
|
6455
|
+
labels.value = ((rowInfo, originWidth, originHeight) => rowInfo.labels ? rowInfo.labels.map((rect => {
|
|
6456
|
+
const typeName = props.classes[rect.type];
|
|
6457
|
+
return typeName && (rect.typeName = typeName), rect.originWidth || (rect.originWidth = originWidth),
|
|
6458
|
+
rect.originHeight || (rect.originHeight = originHeight), rect;
|
|
6459
|
+
})) : [])(rowInfo, originWidth, originHeight), image.style.width = canvasWidth + "px",
|
|
6460
|
+
image.style.height = canvasHeight + "px", setContainerWidthHeight(canvasWidth, canvasHeight),
|
|
6461
|
+
labels.value = ((labels, canvasHeight) => {
|
|
6442
6462
|
let scale_rects = [];
|
|
6443
6463
|
for (let i = 0; i < labels.length; i++) {
|
|
6444
6464
|
const rect = labels[i], scale = parseFloat((canvasHeight / rect.canvasHeight).toFixed(3));
|
|
@@ -6450,8 +6470,10 @@ var DraggableRect = defineComponent({
|
|
|
6450
6470
|
return scale_rects;
|
|
6451
6471
|
})(labels.value, canvasHeight);
|
|
6452
6472
|
const {updateLabels: updateLabels, addDrawRect: addDrawRect, hitCanvasLabel: hitCanvasLabel} = (options => {
|
|
6453
|
-
const {ctx: ctx, labels: labels, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = options, updateLabels =
|
|
6454
|
-
|
|
6473
|
+
const {canvas: canvas, ctx: ctx, labels: labels, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight} = options, updateLabels = scaleOffset => {
|
|
6474
|
+
scaleOffset && (canvas.width = canvasWidth, ctx.save(), ctx.translate(scaleOffset.x, scaleOffset.y),
|
|
6475
|
+
ctx.scale(scaleOffset.scale, scaleOffset.scale)), ctx.clearRect(0, 0, canvasWidth, canvasHeight),
|
|
6476
|
+
ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
|
|
6455
6477
|
for (let i = 0; i < labels.length; i++) {
|
|
6456
6478
|
const rect = labels[i], {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight, type: type} = rect, color = colors$1[type % colors$1.length];
|
|
6457
6479
|
if (ctx.font = "bold 14px serif", ctx.textBaseline = "top", ctx.save(), ctx.strokeStyle = color,
|
|
@@ -6466,7 +6488,8 @@ var DraggableRect = defineComponent({
|
|
|
6466
6488
|
updateLabels: updateLabels,
|
|
6467
6489
|
addDrawRect: (rect, color = "#f30635") => {
|
|
6468
6490
|
const {startX: startX, startY: startY, rectWidth: rectWidth, rectHeight: rectHeight} = rect;
|
|
6469
|
-
ctx.strokeStyle = color, ctx.strokeRect(startX, startY, rectWidth, rectHeight)
|
|
6491
|
+
ctx.save(), ctx.strokeStyle = color, ctx.strokeRect(startX, startY, rectWidth, rectHeight),
|
|
6492
|
+
ctx.restore();
|
|
6470
6493
|
},
|
|
6471
6494
|
hitCanvasLabel: (x, y) => {
|
|
6472
6495
|
let hit_rect = null, hit_index = null, color = null;
|
|
@@ -6493,7 +6516,7 @@ var DraggableRect = defineComponent({
|
|
|
6493
6516
|
});
|
|
6494
6517
|
drawBaseCanvas.value.updateLabels = updateLabels, drawBaseCanvas.value.addDrawRect = addDrawRect,
|
|
6495
6518
|
drawBaseCanvas.value.hitCanvasLabel = hitCanvasLabel;
|
|
6496
|
-
const {clearCanvas: clearCanvas, removeEventAll: removeEventAll} = ((canvas, callback, keyW) => {
|
|
6519
|
+
const {clearCanvas: clearCanvas, removeEventAll: removeEventAll} = (({canvas: canvas, originWidth: originWidth, originHeight: originHeight}, callback, keyW) => {
|
|
6497
6520
|
const canvasWidth = canvas.width, canvasHeight = canvas.height, ctx = canvas?.getContext("2d"), clearCanvas = () => {
|
|
6498
6521
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
6499
6522
|
};
|
|
@@ -6507,14 +6530,16 @@ var DraggableRect = defineComponent({
|
|
|
6507
6530
|
rectWidth: rectWidth,
|
|
6508
6531
|
rectHeight: rectHeight,
|
|
6509
6532
|
canvasWidth: canvasWidth,
|
|
6510
|
-
canvasHeight: canvasHeight
|
|
6533
|
+
canvasHeight: canvasHeight,
|
|
6534
|
+
originWidth: originWidth,
|
|
6535
|
+
originHeight: originHeight
|
|
6511
6536
|
}, {
|
|
6512
6537
|
endX: endX,
|
|
6513
6538
|
endY: endY
|
|
6514
6539
|
});
|
|
6515
6540
|
}, documentKeydown = event => {
|
|
6516
|
-
"KeyW" === event.code && (isWKeyPressed = !0,
|
|
6517
|
-
canvas.style.zIndex = "11", keyW && keyW());
|
|
6541
|
+
isWKeyPressed || "KeyW" === event.code && (event.preventDefault(), isWKeyPressed = !0,
|
|
6542
|
+
canvas.style.cursor = "crosshair", canvas.style.zIndex = "11", keyW && keyW());
|
|
6518
6543
|
}, documentKeyup = event => {
|
|
6519
6544
|
isDrawing || "KeyW" === event.code && (isWKeyPressed = !1, canvas.style.cursor = "unset",
|
|
6520
6545
|
canvas.style.zIndex = "0");
|
|
@@ -6524,13 +6549,13 @@ var DraggableRect = defineComponent({
|
|
|
6524
6549
|
};
|
|
6525
6550
|
document.addEventListener("keydown", documentKeydown), document.addEventListener("keyup", documentKeyup),
|
|
6526
6551
|
document.addEventListener("mouseup", documentMouseup);
|
|
6527
|
-
const canvasMousedown =
|
|
6528
|
-
isWKeyPressed && (isDrawing = !0, startX =
|
|
6529
|
-
}, canvasMousemove =
|
|
6530
|
-
isDrawing && isWKeyPressed && (isRectDraw = !0, endX =
|
|
6552
|
+
const canvasMousedown = event => {
|
|
6553
|
+
isWKeyPressed && (isDrawing = !0, startX = event.offsetX, startY = event.offsetY);
|
|
6554
|
+
}, canvasMousemove = event => {
|
|
6555
|
+
isDrawing && isWKeyPressed && (isRectDraw = !0, endX = event.offsetX, endY = event.offsetY,
|
|
6531
6556
|
drawRect());
|
|
6532
|
-
}, canvasMouseup =
|
|
6533
|
-
|
|
6557
|
+
}, canvasMouseup = event => {
|
|
6558
|
+
event.stopPropagation(), isRectDraw && (isDrawing = !1, isWKeyPressed = !1, canvas.style.cursor = "unset",
|
|
6534
6559
|
canvas.style.zIndex = "0", drawRectDone(), isRectDraw = !1);
|
|
6535
6560
|
};
|
|
6536
6561
|
canvas.addEventListener("mousedown", canvasMousedown), canvas.addEventListener("mousemove", canvasMousemove),
|
|
@@ -6544,12 +6569,16 @@ var DraggableRect = defineComponent({
|
|
|
6544
6569
|
clearCanvas: clearCanvas,
|
|
6545
6570
|
drawRect: drawRect,
|
|
6546
6571
|
removeEventAll: () => {
|
|
6547
|
-
document.removeEventListener("
|
|
6572
|
+
document.removeEventListener("keydown", documentKeydown), document.removeEventListener("keyup", documentKeyup),
|
|
6548
6573
|
document.removeEventListener("mouseup", documentMouseup), canvas.removeEventListener("mousedown", canvasMousedown),
|
|
6549
6574
|
canvas.removeEventListener("mousemove", canvasMousemove), canvas.removeEventListener("mouseup", canvasMouseup);
|
|
6550
6575
|
}
|
|
6551
6576
|
};
|
|
6552
|
-
})(
|
|
6577
|
+
})({
|
|
6578
|
+
canvas: canvasRectRef.value,
|
|
6579
|
+
originWidth: originWidth,
|
|
6580
|
+
originHeight: originHeight
|
|
6581
|
+
}, ((rect, {endX: endX, endY: endY}) => {
|
|
6553
6582
|
activate_add_label.value = rect, drawBaseCanvas.value.addDrawRect(rect), updateContextmenuLabelFixed(endX, endY, rect);
|
|
6554
6583
|
}), (() => {
|
|
6555
6584
|
onCloseDraggableRectFixed();
|
|
@@ -6566,11 +6595,14 @@ var DraggableRect = defineComponent({
|
|
|
6566
6595
|
updateContextmenuLabelFixed(x, y, hit_rect);
|
|
6567
6596
|
}));
|
|
6568
6597
|
})), canvasBaseRef.value.addEventListener("click", (e => {
|
|
6598
|
+
if (e.ctrlKey) return;
|
|
6569
6599
|
const x = e.offsetX, y = e.offsetY, {hit_rect: hit_rect, hit_index: hit_index, color: color} = drawBaseCanvas.value.hitCanvasLabel(x, y);
|
|
6570
6600
|
onCloseDraggableRectFixed(), onCloseContentmenuLabel(), hit_rect && nextTick((() => {
|
|
6571
6601
|
updateDraggableRectFixed(x, y, hit_rect, hit_index, color);
|
|
6572
6602
|
}));
|
|
6573
6603
|
}));
|
|
6604
|
+
}, onWindowWheel = e => {
|
|
6605
|
+
e.ctrlKey && e.preventDefault();
|
|
6574
6606
|
};
|
|
6575
6607
|
onMounted((() => {
|
|
6576
6608
|
watch((() => props.rowInfo), (info => {
|
|
@@ -6579,15 +6611,20 @@ var DraggableRect = defineComponent({
|
|
|
6579
6611
|
}), {
|
|
6580
6612
|
deep: !0,
|
|
6581
6613
|
immediate: !0
|
|
6582
|
-
}), watch((() => props.
|
|
6614
|
+
}), watch((() => props.classes), (() => {
|
|
6615
|
+
const rowInfo = toRaw(props.rowInfo);
|
|
6616
|
+
renderImageLabel(rowInfo);
|
|
6617
|
+
})), watch((() => props.contextClientHeight), (height => {
|
|
6583
6618
|
if (valueExist(height)) {
|
|
6584
6619
|
canvasMainRef.value.style.height = height + "px";
|
|
6585
6620
|
const rowInfo = toRaw(props.rowInfo);
|
|
6586
6621
|
renderImageLabel(rowInfo);
|
|
6587
6622
|
}
|
|
6588
|
-
}))
|
|
6623
|
+
})), window.addEventListener("wheel", onWindowWheel, {
|
|
6624
|
+
passive: !1
|
|
6625
|
+
});
|
|
6589
6626
|
})), onUnmounted((() => {
|
|
6590
|
-
drawBaseCanvas.value.removeEventAll();
|
|
6627
|
+
drawBaseCanvas.value.removeEventAll?.(), window.removeEventListener("wheel", onWindowWheel);
|
|
6591
6628
|
}));
|
|
6592
6629
|
const contextmenuLabelFixed = ref({
|
|
6593
6630
|
show: !1,
|
|
@@ -6631,9 +6668,9 @@ var DraggableRect = defineComponent({
|
|
|
6631
6668
|
draggableRectFixed.value.width = 0, draggableRectFixed.value.height = 0, draggableRectFixed.value.activateRect = null,
|
|
6632
6669
|
draggableRectFixed.value.activateIndex = null, draggableRectFixed.value.color = null;
|
|
6633
6670
|
}, onDraggleRectResize = rect => {
|
|
6634
|
-
draggableRectFixed.value.activateRect = rect
|
|
6671
|
+
draggableRectFixed.value.activateRect = rect;
|
|
6635
6672
|
const i = labels.value.findIndex((o => isEqual(o, rect)));
|
|
6636
|
-
i > -1 && labels.value.splice(i, 1, rect);
|
|
6673
|
+
i > -1 && labels.value.splice(i, 1, rect), drawBaseCanvas.value.updateLabels();
|
|
6637
6674
|
const {rects: rects, label_txt: label_txt} = formatLabelsType();
|
|
6638
6675
|
_emit("change", rects, label_txt), emit("change", rects, label_txt);
|
|
6639
6676
|
}, onContextmenuDraggable = (e, rect) => {
|
|
@@ -6677,6 +6714,7 @@ var DraggableRect = defineComponent({
|
|
|
6677
6714
|
}
|
|
6678
6715
|
});
|
|
6679
6716
|
return () => createVNode(Fragment, null, [ createVNode(NextSpinLoading, {
|
|
6717
|
+
ref: mainBasaeRef,
|
|
6680
6718
|
loading: loadingImage.value,
|
|
6681
6719
|
class: [ ns.b("loading") ]
|
|
6682
6720
|
}, {
|
|
@@ -6721,13 +6759,15 @@ var DraggableRect = defineComponent({
|
|
|
6721
6759
|
},
|
|
6722
6760
|
emits: [ "delete", "select" ],
|
|
6723
6761
|
setup(props, {emit: emit}) {
|
|
6724
|
-
const {t: t} = useLocale(), ns = inject("ns", {}), labels = ref([])
|
|
6725
|
-
|
|
6762
|
+
const {t: t} = useLocale(), ns = inject("ns", {}), labels = ref([]), formatLabelsTypeName = labels => labels.length ? labels.map((rect => {
|
|
6763
|
+
const typeName = props.classes[rect.type];
|
|
6764
|
+
return typeName && (rect.typeName = typeName), rect;
|
|
6765
|
+
})) : [];
|
|
6766
|
+
watch((() => props.classes), (() => {
|
|
6767
|
+
labels.value = formatLabelsTypeName(labels.value);
|
|
6768
|
+
})), watch((() => props.labels), (rects => {
|
|
6726
6769
|
const _rects = toRaw(rects);
|
|
6727
|
-
labels.value = (
|
|
6728
|
-
const typeName = props.classes[rect.type];
|
|
6729
|
-
return typeName && (rect.typeName = typeName), rect;
|
|
6730
|
-
})) : [])(_rects);
|
|
6770
|
+
labels.value = formatLabelsTypeName(_rects);
|
|
6731
6771
|
}), {
|
|
6732
6772
|
deep: !0,
|
|
6733
6773
|
immediate: !0
|
|
@@ -7297,15 +7337,17 @@ class CreateDrawCanvas {
|
|
|
7297
7337
|
canvasWidth;
|
|
7298
7338
|
canvasHeight;
|
|
7299
7339
|
paths;
|
|
7340
|
+
scaleX;
|
|
7341
|
+
scaleY;
|
|
7300
7342
|
editDrawPolygon;
|
|
7301
7343
|
createPolygonVertexes;
|
|
7302
7344
|
editVertexes;
|
|
7303
7345
|
editPolygonObservers=[];
|
|
7304
7346
|
constructor(options) {
|
|
7305
|
-
const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, paths: paths} = options;
|
|
7347
|
+
const {canvas: canvas, ctx: ctx, image: image, canvasWidth: canvasWidth, canvasHeight: canvasHeight, paths: paths, scaleX: scaleX, scaleY: scaleY} = options;
|
|
7306
7348
|
this.canvas = canvas, this.ctx = ctx, this.image = image, this.canvasWidth = canvasWidth,
|
|
7307
|
-
this.canvasHeight = canvasHeight, this.paths = paths || [], this.
|
|
7308
|
-
this.render(), this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx),
|
|
7349
|
+
this.canvasHeight = canvasHeight, this.paths = paths || [], this.scaleX = scaleX || 1,
|
|
7350
|
+
this.scaleY = scaleY || 1, this.editVertexes = [], this.render(), this.createPolygonVertexes = new CreatePolygonVertexes(canvas, ctx),
|
|
7309
7351
|
this.editDrawPolygon = new EditPolygonPath(canvas, ctx), this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
|
|
7310
7352
|
this.render(), this.editDrawPolygon.drawPolygon(vertexes, mouseOffset), this.editVertexes = vertexes,
|
|
7311
7353
|
this.notifyObservers();
|
|
@@ -7326,12 +7368,14 @@ class CreateDrawCanvas {
|
|
|
7326
7368
|
}
|
|
7327
7369
|
drawPolygons(paths) {
|
|
7328
7370
|
const ctx = this.ctx;
|
|
7371
|
+
ctx.scale(this.scaleX, this.scaleY);
|
|
7329
7372
|
for (let i = 0; i < paths.length; i++) {
|
|
7330
7373
|
const path = paths[i].path;
|
|
7331
7374
|
if (!path.length) return;
|
|
7332
7375
|
const color = colors[i % colors.length];
|
|
7333
|
-
ctx.beginPath(), ctx.lineWidth = 2, ctx.strokeStyle = color, ctx.fillStyle = hexToRgba(color, .2)
|
|
7334
|
-
|
|
7376
|
+
ctx.beginPath(), ctx.lineWidth = 2, ctx.strokeStyle = color, ctx.fillStyle = hexToRgba(color, .2);
|
|
7377
|
+
const startX = path[0][0], startY = path[0][1];
|
|
7378
|
+
ctx.moveTo(startX, startY);
|
|
7335
7379
|
for (let i = 1; i < path.length; i++) {
|
|
7336
7380
|
const [x, y] = path[i];
|
|
7337
7381
|
ctx.lineTo(x, y);
|
|
@@ -7341,7 +7385,7 @@ class CreateDrawCanvas {
|
|
|
7341
7385
|
}
|
|
7342
7386
|
initCanvas=() => {
|
|
7343
7387
|
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight), this.ctx.drawImage(this.image, 0, 0, this.canvasWidth, this.canvasHeight),
|
|
7344
|
-
this.drawPolygons(this.paths);
|
|
7388
|
+
this.ctx.save(), this.drawPolygons(this.paths), this.ctx.restore();
|
|
7345
7389
|
};
|
|
7346
7390
|
render=() => {
|
|
7347
7391
|
this.initCanvas();
|
|
@@ -7368,22 +7412,40 @@ var CanvasContext = defineComponent({
|
|
|
7368
7412
|
},
|
|
7369
7413
|
emits: [ "editPolygon" ],
|
|
7370
7414
|
setup(props, {emit: emit, expose: expose}) {
|
|
7371
|
-
const ns = inject("ns", {}), canvasMainRef = ref(), canvasBaseRef = ref(), drawCanvas = ref(), setContainerWidthHeight = (canvasWidth, canvasHeight) => {
|
|
7415
|
+
const ns = inject("ns", {}), mainBasaeRef = ref(), canvasMainRef = ref(), canvasBaseRef = ref(), drawCanvas = ref(), setContainerWidthHeight = (canvasWidth, canvasHeight) => {
|
|
7372
7416
|
canvasMainRef.value.style.width = canvasWidth + "px", canvasMainRef.value.style.height = canvasHeight + "px",
|
|
7373
7417
|
canvasBaseRef.value.width = canvasWidth, canvasBaseRef.value.height = canvasHeight,
|
|
7374
7418
|
canvasBaseRef.value.style.width = canvasWidth + "px", canvasBaseRef.value.style.height = canvasHeight + "px";
|
|
7375
7419
|
}, loadingImage = ref(!1), renderImageLabel = rowInfo => {
|
|
7376
|
-
const
|
|
7420
|
+
const ctx = canvasBaseRef.value?.getContext("2d");
|
|
7377
7421
|
if (rowInfo?.imageSrc) {
|
|
7378
7422
|
const image = new Image;
|
|
7379
7423
|
image.src = rowInfo.imageSrc, loadingImage.value = !0, image.onload = () => {
|
|
7380
7424
|
loadingImage.value = !1;
|
|
7381
|
-
|
|
7382
|
-
|
|
7383
|
-
|
|
7384
|
-
|
|
7385
|
-
|
|
7386
|
-
|
|
7425
|
+
const {canvasWidth: canvasWidth, canvasHeight: canvasHeight, scaleFactor: scaleFactor, scaleX: scaleX, scaleY: scaleY} = (image => {
|
|
7426
|
+
const clientWidth = mainBasaeRef.value?.elementInstance.clientWidth, clientHeight = mainBasaeRef.value?.elementInstance.clientHeight;
|
|
7427
|
+
let {width: width, height: height} = image, scaleFactor = 1;
|
|
7428
|
+
const aspect_ratio = width / height;
|
|
7429
|
+
if (aspect_ratio > 1 ? (width = clientWidth, height = clientWidth / aspect_ratio) : (width = clientHeight * aspect_ratio,
|
|
7430
|
+
height = clientHeight), height > clientHeight) {
|
|
7431
|
+
const scale = height / clientHeight;
|
|
7432
|
+
height = clientHeight, width /= scale;
|
|
7433
|
+
} else if (width > clientWidth) {
|
|
7434
|
+
const scale = width / clientWidth;
|
|
7435
|
+
width = clientWidth, height /= scale;
|
|
7436
|
+
}
|
|
7437
|
+
const canvasWidth = parseInt(width.toString()), canvasHeight = parseInt(height.toString());
|
|
7438
|
+
scaleFactor = Number((canvasWidth / canvasHeight).toFixed(2));
|
|
7439
|
+
const scaleX = (canvasWidth / image.width).toFixed(8), scaleY = (canvasHeight / image.height).toFixed(8);
|
|
7440
|
+
return {
|
|
7441
|
+
canvasWidth: canvasWidth,
|
|
7442
|
+
canvasHeight: canvasHeight,
|
|
7443
|
+
scaleFactor: scaleFactor,
|
|
7444
|
+
scaleX: Number(scaleX),
|
|
7445
|
+
scaleY: Number(scaleY)
|
|
7446
|
+
};
|
|
7447
|
+
})(image);
|
|
7448
|
+
image.style.width = canvasWidth + "px", image.style.height = canvasHeight + "px",
|
|
7387
7449
|
setContainerWidthHeight(canvasWidth, canvasHeight), drawCanvas.value = new CreateDrawCanvas({
|
|
7388
7450
|
canvas: canvasBaseRef.value,
|
|
7389
7451
|
ctx: ctx,
|
|
@@ -7391,7 +7453,9 @@ var CanvasContext = defineComponent({
|
|
|
7391
7453
|
canvasWidth: canvasWidth,
|
|
7392
7454
|
canvasHeight: canvasHeight,
|
|
7393
7455
|
scaleFactor: scaleFactor,
|
|
7394
|
-
paths: rowInfo.labels
|
|
7456
|
+
paths: rowInfo.labels,
|
|
7457
|
+
scaleX: scaleX,
|
|
7458
|
+
scaleY: scaleY
|
|
7395
7459
|
}), drawCanvas.value.updatePolygon((vertexes => {
|
|
7396
7460
|
emit("editPolygon", {
|
|
7397
7461
|
vertexes: vertexes,
|
|
@@ -7427,6 +7491,7 @@ var CanvasContext = defineComponent({
|
|
|
7427
7491
|
}));
|
|
7428
7492
|
}
|
|
7429
7493
|
}), () => createVNode(Fragment, null, [ createVNode(NextSpinLoading, {
|
|
7494
|
+
ref: mainBasaeRef,
|
|
7430
7495
|
loading: loadingImage.value,
|
|
7431
7496
|
class: [ ns.b("loading") ],
|
|
7432
7497
|
style: {
|
|
@@ -7460,7 +7525,7 @@ var CanvasContext = defineComponent({
|
|
|
7460
7525
|
emits: [ "fullscreen", "save" ],
|
|
7461
7526
|
setup(props, {emit: emit}) {
|
|
7462
7527
|
const _ns = inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
|
|
7463
|
-
emit("fullscreen", val);
|
|
7528
|
+
emit("fullscreen", val), document.body.style.overflow = val ? "hidden" : "auto";
|
|
7464
7529
|
};
|
|
7465
7530
|
return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("ul", {
|
|
7466
7531
|
class: [ _ns.be("header", "tool") ]
|
|
@@ -7682,20 +7747,25 @@ var Element = defineComponent({
|
|
|
7682
7747
|
if (loading.value) return;
|
|
7683
7748
|
loading.value = !0;
|
|
7684
7749
|
const node = currentNode.value;
|
|
7685
|
-
emit("save", {
|
|
7750
|
+
return emit("save", {
|
|
7686
7751
|
node: node
|
|
7687
7752
|
}, (imageItem => {
|
|
7688
7753
|
labelImages.value[activateNodeIndex.value] = imageItem || node, activateNodeIndex.value = index,
|
|
7689
7754
|
loading.value = !1;
|
|
7690
7755
|
}), (() => {
|
|
7691
7756
|
loading.value = !1;
|
|
7692
|
-
}));
|
|
7757
|
+
})), !0;
|
|
7693
7758
|
}, isFullscreen = ref(!1), onSwitchFillscreen = val => {
|
|
7694
7759
|
isFullscreen.value = val, updateMainContentHeight(), nextTick((() => {
|
|
7695
7760
|
canvasContextRef.value.rerenderImage();
|
|
7696
7761
|
}));
|
|
7697
7762
|
}, onEditPlygonChange = plygon => {
|
|
7698
|
-
emit("edit-polygon", plygon);
|
|
7763
|
+
currentNode.value.labels = plygon, emit("edit-polygon", plygon);
|
|
7764
|
+
}, onToolHeaderSave = () => {
|
|
7765
|
+
onChangeActivateNode(activateNodeIndex.value) || ElMessage({
|
|
7766
|
+
type: "info",
|
|
7767
|
+
message: t("next.labelimg.labelNoUpdate")
|
|
7768
|
+
});
|
|
7699
7769
|
};
|
|
7700
7770
|
return () => createVNode(Fragment, null, [ createVNode("div", {
|
|
7701
7771
|
ref: layoutLabelRef,
|
|
@@ -7716,7 +7786,8 @@ var Element = defineComponent({
|
|
|
7716
7786
|
isFullscreen: isFullscreen.value,
|
|
7717
7787
|
imageIndex: activateNodeIndex.value,
|
|
7718
7788
|
imageLength: labelImages.value.length,
|
|
7719
|
-
onFullscreen: onSwitchFillscreen
|
|
7789
|
+
onFullscreen: onSwitchFillscreen,
|
|
7790
|
+
onSave: onToolHeaderSave
|
|
7720
7791
|
}, null) ]), createVNode("div", {
|
|
7721
7792
|
ref: mainRef,
|
|
7722
7793
|
class: [ ns.b("main") ]
|
|
@@ -7828,7 +7899,7 @@ const zoomDialog = app => {
|
|
|
7828
7899
|
}));
|
|
7829
7900
|
}
|
|
7830
7901
|
});
|
|
7831
|
-
}, version = "0.3.
|
|
7902
|
+
}, version = "0.3.6", install = function(app) {
|
|
7832
7903
|
Object.keys(components).forEach((key => {
|
|
7833
7904
|
const component = components[key];
|
|
7834
7905
|
app.component(component.name, component);
|
|
@@ -7838,7 +7909,7 @@ const zoomDialog = app => {
|
|
|
7838
7909
|
};
|
|
7839
7910
|
|
|
7840
7911
|
var index = {
|
|
7841
|
-
version: "0.3.
|
|
7912
|
+
version: "0.3.6",
|
|
7842
7913
|
install: install
|
|
7843
7914
|
};
|
|
7844
7915
|
|