new_org
/
whale-anno
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化箭头展示，并适配屏幕变化

This commit is contained in:
maxmon 2023-04-16 19:13:49 +08:00
parent 585cd1e65f
commit 383534037a
1 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
fe/src/components/NLP/rel.vue
View File

@ -2,12 +2,12 @@
<div class="rel-box"> <div class="rel-box">
<svg v-for="(relLine, idx) in relLines" :key="idx" class="rel" <svg v-for="(relLine, idx) in relLines" :key="idx" class="rel"
xmlns="http://www.w3.org/2000/svg" version="1.1" > xmlns="http://www.w3.org/2000/svg" version="1.1" >
<marker id="arrow" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" viewBox="0 0 12 12" refX="6" refY="6" orient="auto"> <marker id="arrow" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" :style="`fill:${types[relDetails[idx]['type']]['color']}`"/> <path d="M2,2 L10,6 L2,10 L6,6 L2,2" :style="`fill:${types[relDetails[idx]['type']]['color']}`"/>
</marker> </marker>
<path :d="relLine" <path :d="relLine"
:title="relDetails[idx]['type']" :title="relDetails[idx]['type']"
:style="`stroke:${types[relDetails[idx]['type']]['color']};stroke-width:2;fill:#0000;marker-end:url(#arrow)`" :style="`stroke:${types[relDetails[idx]['type']]['color']};stroke-width:3;fill:#0000;marker-end:url(#arrow)`"
@contextmenu="delRel($event, idx)" @contextmenu="delRel($event, idx)"
/> />
</svg> </svg>
@ -15,7 +15,6 @@
</template> </template>
<script> <script>
export default ({ export default ({
name: 'Rel', name: 'Rel',
props: { props: {
@ -53,11 +52,12 @@ export default ({
e.preventDefault() e.preventDefault()
this.relDetails.splice(idx, 1) this.relDetails.splice(idx, 1)
this.save() this.save()
}
}, },
watch: { calRelLines (val) {
relDetails: { console.log('21341234');
handler (val) { if (!val) {
val = this.relDetails
}
console.log(this.types) console.log(this.types)
let _relLines = [] let _relLines = []
for (let i = 0; i < val.length; i++) { for (let i = 0; i < val.length; i++) {
@ -74,6 +74,12 @@ export default ({
} }
console.log(_relLines) console.log(_relLines)
this.relLines = _relLines this.relLines = _relLines
}
},
watch: {
relDetails: {
handler (val) {
this.calRelLines(val)
}, },
deep: true deep: true
}, },
@ -81,6 +87,12 @@ export default ({
handler (val) { handler (val) {
} }
} }
},
mounted () {
let that = this
window.onresize = function () {
that.calRelLines()
}
} }
}) })
</script> </script>
@ -101,4 +113,8 @@ export default ({
pointer-events: all; pointer-events: all;
cursor: pointer; cursor: pointer;
} }
.rel:hover {
/* 抬起来一些 */
opacity: 0.5;
}
</style> </style>