next-element-vue 0.3.4 → 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 +165 -74
- package/dist/index.min.js +3 -3
- package/dist/index.umd.js +165 -74
- 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-
|
|
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: "保存"
|
|
@@ -3579,7 +3582,7 @@ var NextSpinLoading$1 = defineComponent({
|
|
|
3579
3582
|
}
|
|
3580
3583
|
if ("select" === col.type) {
|
|
3581
3584
|
const placeholder = t("next.form.select") + (col.searchPlaceholder || col.searchLabel || col.label);
|
|
3582
|
-
return createVNode(ElSelect, {
|
|
3585
|
+
return !formParams[col.prop] && col.multiple && (formParams[col.prop] = []), createVNode(ElSelect, {
|
|
3583
3586
|
modelValue: formParams[col.prop],
|
|
3584
3587
|
"onUpdate:modelValue": $event => formParams[col.prop] = $event,
|
|
3585
3588
|
clearable: !0,
|
|
@@ -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
|
|
@@ -7113,8 +7153,17 @@ class CreatePolygonVertexes {
|
|
|
7113
7153
|
this.destroyedObservers = callback;
|
|
7114
7154
|
}
|
|
7115
7155
|
canvasMouseClick(e) {
|
|
7116
|
-
e.stopPropagation(), this.isDrawing = !0, this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY
|
|
7117
|
-
|
|
7156
|
+
e.stopPropagation(), this.isDrawing = !0, this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY;
|
|
7157
|
+
const [x, y] = [ e.offsetX, e.offsetY ];
|
|
7158
|
+
let is_add = !0;
|
|
7159
|
+
for (let i = 0; i < this.vertexes.length; i++) {
|
|
7160
|
+
const p = this.vertexes[i];
|
|
7161
|
+
if (Math.sqrt((x - p[0]) ** 2 + (y - p[1]) ** 2) < 8) {
|
|
7162
|
+
is_add = !1;
|
|
7163
|
+
break;
|
|
7164
|
+
}
|
|
7165
|
+
}
|
|
7166
|
+
is_add && this.vertexes.push([ x, y ]), this.vertexes = vertexesUnique(this.vertexes);
|
|
7118
7167
|
}
|
|
7119
7168
|
canvasMousemove(e) {
|
|
7120
7169
|
e.stopPropagation(), this.isDrawing && (this.mouseOffset.x = e.offsetX, this.mouseOffset.y = e.offsetY,
|
|
@@ -7143,11 +7192,12 @@ class EditPolygonPath {
|
|
|
7143
7192
|
pointCentreIndex;
|
|
7144
7193
|
vertexRadius;
|
|
7145
7194
|
edgeCentreRadius;
|
|
7195
|
+
pointRecover;
|
|
7146
7196
|
observers=[];
|
|
7147
7197
|
constructor(canvas, ctx) {
|
|
7148
7198
|
this.canvas = canvas, this.ctx = ctx, this.vertexes = [], this.isEditing = !1, this.canClickEvent = !0,
|
|
7149
7199
|
this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1,
|
|
7150
|
-
this.vertexRadius = 8, this.edgeCentreRadius = 5;
|
|
7200
|
+
this.vertexRadius = 8, this.edgeCentreRadius = 5, this.pointRecover = [];
|
|
7151
7201
|
}
|
|
7152
7202
|
drawPolygonPath(vertexes, mouseX, mouseY) {
|
|
7153
7203
|
const ctx = this.ctx;
|
|
@@ -7228,7 +7278,9 @@ class EditPolygonPath {
|
|
|
7228
7278
|
}
|
|
7229
7279
|
canvasMousedown(e) {
|
|
7230
7280
|
e.stopPropagation(), e.preventDefault(), this.canClickEvent = !0;
|
|
7231
|
-
const {offsetX: x, offsetY: y} = e
|
|
7281
|
+
const {offsetX: x, offsetY: y} = e;
|
|
7282
|
+
this.pointRecover = [ x, y ];
|
|
7283
|
+
const vertex_i = this.pointInVertexes(x, y);
|
|
7232
7284
|
isValueExist(vertex_i) && (this.isMoveEditing = !0, this.pointVertexIndex = vertex_i,
|
|
7233
7285
|
this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]));
|
|
7234
7286
|
const i = this.pointInEdgeCentre(x, y);
|
|
@@ -7239,11 +7291,19 @@ class EditPolygonPath {
|
|
|
7239
7291
|
}
|
|
7240
7292
|
canvasMouseup(e) {
|
|
7241
7293
|
e.stopPropagation(), e.preventDefault();
|
|
7242
|
-
|
|
7294
|
+
let {offsetX: x, offsetY: y} = e;
|
|
7295
|
+
this.vertexes = vertexesUnique(this.vertexes);
|
|
7296
|
+
for (let i = 0; i < this.vertexes.length; i++) {
|
|
7297
|
+
const p = this.vertexes[i], radius = Math.sqrt((x - p[0]) ** 2 + (y - p[1]) ** 2);
|
|
7298
|
+
if (radius < 8 && radius > 0 && this.pointRecover.length) {
|
|
7299
|
+
x = this.pointRecover[0], y = this.pointRecover[1], this.pointRecover = [];
|
|
7300
|
+
break;
|
|
7301
|
+
}
|
|
7302
|
+
}
|
|
7243
7303
|
this.pointVertexIndex > -1 && this.vertexes.splice(this.pointVertexIndex, 1, [ x, y ]),
|
|
7244
7304
|
this.pointCentreIndex > -1 && this.vertexes.splice(this.pointCentreIndex, 1, [ x, y ]),
|
|
7245
7305
|
this.isMoveEditing = !1, this.pointVertexIndex = -1, this.pointCentreIndex = -1,
|
|
7246
|
-
this.notifyObservers();
|
|
7306
|
+
this.drawPolygon(this.vertexes), this.notifyObservers();
|
|
7247
7307
|
}
|
|
7248
7308
|
canvasMouseClick(e) {
|
|
7249
7309
|
e.stopPropagation();
|
|
@@ -7277,15 +7337,17 @@ class CreateDrawCanvas {
|
|
|
7277
7337
|
canvasWidth;
|
|
7278
7338
|
canvasHeight;
|
|
7279
7339
|
paths;
|
|
7340
|
+
scaleX;
|
|
7341
|
+
scaleY;
|
|
7280
7342
|
editDrawPolygon;
|
|
7281
7343
|
createPolygonVertexes;
|
|
7282
7344
|
editVertexes;
|
|
7283
7345
|
editPolygonObservers=[];
|
|
7284
7346
|
constructor(options) {
|
|
7285
|
-
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;
|
|
7286
7348
|
this.canvas = canvas, this.ctx = ctx, this.image = image, this.canvasWidth = canvasWidth,
|
|
7287
|
-
this.canvasHeight = canvasHeight, this.paths = paths || [], this.
|
|
7288
|
-
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),
|
|
7289
7351
|
this.editDrawPolygon = new EditPolygonPath(canvas, ctx), this.createPolygonVertexes.vertexesChangeEventListener(((vertexes, mouseOffset) => {
|
|
7290
7352
|
this.render(), this.editDrawPolygon.drawPolygon(vertexes, mouseOffset), this.editVertexes = vertexes,
|
|
7291
7353
|
this.notifyObservers();
|
|
@@ -7306,12 +7368,14 @@ class CreateDrawCanvas {
|
|
|
7306
7368
|
}
|
|
7307
7369
|
drawPolygons(paths) {
|
|
7308
7370
|
const ctx = this.ctx;
|
|
7371
|
+
ctx.scale(this.scaleX, this.scaleY);
|
|
7309
7372
|
for (let i = 0; i < paths.length; i++) {
|
|
7310
7373
|
const path = paths[i].path;
|
|
7311
7374
|
if (!path.length) return;
|
|
7312
7375
|
const color = colors[i % colors.length];
|
|
7313
|
-
ctx.beginPath(), ctx.lineWidth = 2, ctx.strokeStyle = color, ctx.fillStyle = hexToRgba(color, .2)
|
|
7314
|
-
|
|
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);
|
|
7315
7379
|
for (let i = 1; i < path.length; i++) {
|
|
7316
7380
|
const [x, y] = path[i];
|
|
7317
7381
|
ctx.lineTo(x, y);
|
|
@@ -7321,7 +7385,7 @@ class CreateDrawCanvas {
|
|
|
7321
7385
|
}
|
|
7322
7386
|
initCanvas=() => {
|
|
7323
7387
|
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight), this.ctx.drawImage(this.image, 0, 0, this.canvasWidth, this.canvasHeight),
|
|
7324
|
-
this.drawPolygons(this.paths);
|
|
7388
|
+
this.ctx.save(), this.drawPolygons(this.paths), this.ctx.restore();
|
|
7325
7389
|
};
|
|
7326
7390
|
render=() => {
|
|
7327
7391
|
this.initCanvas();
|
|
@@ -7348,22 +7412,40 @@ var CanvasContext = defineComponent({
|
|
|
7348
7412
|
},
|
|
7349
7413
|
emits: [ "editPolygon" ],
|
|
7350
7414
|
setup(props, {emit: emit, expose: expose}) {
|
|
7351
|
-
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) => {
|
|
7352
7416
|
canvasMainRef.value.style.width = canvasWidth + "px", canvasMainRef.value.style.height = canvasHeight + "px",
|
|
7353
7417
|
canvasBaseRef.value.width = canvasWidth, canvasBaseRef.value.height = canvasHeight,
|
|
7354
7418
|
canvasBaseRef.value.style.width = canvasWidth + "px", canvasBaseRef.value.style.height = canvasHeight + "px";
|
|
7355
7419
|
}, loadingImage = ref(!1), renderImageLabel = rowInfo => {
|
|
7356
|
-
const
|
|
7420
|
+
const ctx = canvasBaseRef.value?.getContext("2d");
|
|
7357
7421
|
if (rowInfo?.imageSrc) {
|
|
7358
7422
|
const image = new Image;
|
|
7359
7423
|
image.src = rowInfo.imageSrc, loadingImage.value = !0, image.onload = () => {
|
|
7360
7424
|
loadingImage.value = !1;
|
|
7361
|
-
|
|
7362
|
-
|
|
7363
|
-
|
|
7364
|
-
|
|
7365
|
-
|
|
7366
|
-
|
|
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",
|
|
7367
7449
|
setContainerWidthHeight(canvasWidth, canvasHeight), drawCanvas.value = new CreateDrawCanvas({
|
|
7368
7450
|
canvas: canvasBaseRef.value,
|
|
7369
7451
|
ctx: ctx,
|
|
@@ -7371,7 +7453,9 @@ var CanvasContext = defineComponent({
|
|
|
7371
7453
|
canvasWidth: canvasWidth,
|
|
7372
7454
|
canvasHeight: canvasHeight,
|
|
7373
7455
|
scaleFactor: scaleFactor,
|
|
7374
|
-
paths: rowInfo.labels
|
|
7456
|
+
paths: rowInfo.labels,
|
|
7457
|
+
scaleX: scaleX,
|
|
7458
|
+
scaleY: scaleY
|
|
7375
7459
|
}), drawCanvas.value.updatePolygon((vertexes => {
|
|
7376
7460
|
emit("editPolygon", {
|
|
7377
7461
|
vertexes: vertexes,
|
|
@@ -7407,6 +7491,7 @@ var CanvasContext = defineComponent({
|
|
|
7407
7491
|
}));
|
|
7408
7492
|
}
|
|
7409
7493
|
}), () => createVNode(Fragment, null, [ createVNode(NextSpinLoading, {
|
|
7494
|
+
ref: mainBasaeRef,
|
|
7410
7495
|
loading: loadingImage.value,
|
|
7411
7496
|
class: [ ns.b("loading") ],
|
|
7412
7497
|
style: {
|
|
@@ -7440,7 +7525,7 @@ var CanvasContext = defineComponent({
|
|
|
7440
7525
|
emits: [ "fullscreen", "save" ],
|
|
7441
7526
|
setup(props, {emit: emit}) {
|
|
7442
7527
|
const _ns = inject("ns", {}), {t: t} = useLocale(), switchFillscreen = val => {
|
|
7443
|
-
emit("fullscreen", val);
|
|
7528
|
+
emit("fullscreen", val), document.body.style.overflow = val ? "hidden" : "auto";
|
|
7444
7529
|
};
|
|
7445
7530
|
return () => createVNode(Fragment, null, [ createVNode(Fragment, null, [ createVNode("ul", {
|
|
7446
7531
|
class: [ _ns.be("header", "tool") ]
|
|
@@ -7662,20 +7747,25 @@ var Element = defineComponent({
|
|
|
7662
7747
|
if (loading.value) return;
|
|
7663
7748
|
loading.value = !0;
|
|
7664
7749
|
const node = currentNode.value;
|
|
7665
|
-
emit("save", {
|
|
7750
|
+
return emit("save", {
|
|
7666
7751
|
node: node
|
|
7667
7752
|
}, (imageItem => {
|
|
7668
7753
|
labelImages.value[activateNodeIndex.value] = imageItem || node, activateNodeIndex.value = index,
|
|
7669
7754
|
loading.value = !1;
|
|
7670
7755
|
}), (() => {
|
|
7671
7756
|
loading.value = !1;
|
|
7672
|
-
}));
|
|
7757
|
+
})), !0;
|
|
7673
7758
|
}, isFullscreen = ref(!1), onSwitchFillscreen = val => {
|
|
7674
7759
|
isFullscreen.value = val, updateMainContentHeight(), nextTick((() => {
|
|
7675
7760
|
canvasContextRef.value.rerenderImage();
|
|
7676
7761
|
}));
|
|
7677
7762
|
}, onEditPlygonChange = plygon => {
|
|
7678
|
-
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
|
+
});
|
|
7679
7769
|
};
|
|
7680
7770
|
return () => createVNode(Fragment, null, [ createVNode("div", {
|
|
7681
7771
|
ref: layoutLabelRef,
|
|
@@ -7696,7 +7786,8 @@ var Element = defineComponent({
|
|
|
7696
7786
|
isFullscreen: isFullscreen.value,
|
|
7697
7787
|
imageIndex: activateNodeIndex.value,
|
|
7698
7788
|
imageLength: labelImages.value.length,
|
|
7699
|
-
onFullscreen: onSwitchFillscreen
|
|
7789
|
+
onFullscreen: onSwitchFillscreen,
|
|
7790
|
+
onSave: onToolHeaderSave
|
|
7700
7791
|
}, null) ]), createVNode("div", {
|
|
7701
7792
|
ref: mainRef,
|
|
7702
7793
|
class: [ ns.b("main") ]
|
|
@@ -7808,7 +7899,7 @@ const zoomDialog = app => {
|
|
|
7808
7899
|
}));
|
|
7809
7900
|
}
|
|
7810
7901
|
});
|
|
7811
|
-
}, version = "0.3.
|
|
7902
|
+
}, version = "0.3.6", install = function(app) {
|
|
7812
7903
|
Object.keys(components).forEach((key => {
|
|
7813
7904
|
const component = components[key];
|
|
7814
7905
|
app.component(component.name, component);
|
|
@@ -7818,7 +7909,7 @@ const zoomDialog = app => {
|
|
|
7818
7909
|
};
|
|
7819
7910
|
|
|
7820
7911
|
var index = {
|
|
7821
|
-
version: "0.3.
|
|
7912
|
+
version: "0.3.6",
|
|
7822
7913
|
install: install
|
|
7823
7914
|
};
|
|
7824
7915
|
|