From 585cd1e65f84e615b9606d0067086e4c5fd9b736 Mon Sep 17 00:00:00 2001
From: maxmon <541182180@qq.com>
Date: Sun, 16 Apr 2023 18:53:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=85=B3=E7=B3=BB?=
 =?UTF-8?q?=E7=AE=AD=E5=A4=B4=E6=A0=87=E6=B3=A8=EF=BC=8C=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/components/NER/index.vue |  3 +-
 fe/src/components/NLP/rel.vue   | 77 +++++++++++++++++++++++----------
 2 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/fe/src/components/NER/index.vue b/fe/src/components/NER/index.vue
index d175bf8..28003c5 100644
--- a/fe/src/components/NER/index.vue
+++ b/fe/src/components/NER/index.vue
@@ -110,7 +110,7 @@
           </div>
           <CVPoint v-if="projectType === '图片点标注'" :fileContent="nowText" :annoDetails="ners" :nowType="nowType" :types="types" :save="save"></CVPoint>
           <RLHF v-if="projectType === '人类反馈强化学习'" :fileContent="nowText" :annoDetails="ners" :nowType="nowType" :types="types" :save="save"></RLHF>
-          <Rel v-if="projectType === '关系标注'" :relDetails="relDetails" :nowType="nowType" :save="save"></Rel>
+          <Rel v-if="projectType === '关系标注'" :relDetails="relDetails" :nowType="nowType" :types="types" :save="save"></Rel>
         </div>
         <div class="page-btn-box">
           <button class="page-btn" @click="changeIdx(-1, $event)" @mouseover="setFocus('page-up')" @mouseleave="setFocus('')">上一个 {{ fastTypeKey['page-up'] ? `【${fastTypeKey['page-up']}】` : '' }}</button>
@@ -568,6 +568,7 @@ export default {
     startSelect: function (idx, event) {
       if (this.nerProjectType.indexOf(this.projectType) === -1) return
       if (this.nowType.indexOf('关系-') > -1) {
+        if (event.which === 3) return
         if (typeof this.relStartIdx === 'number') {
           console.log(this.relStartIdx, idx)
           this.relDetails.push({
diff --git a/fe/src/components/NLP/rel.vue b/fe/src/components/NLP/rel.vue
index 230d7cc..26404f2 100644
--- a/fe/src/components/NLP/rel.vue
+++ b/fe/src/components/NLP/rel.vue
@@ -1,8 +1,16 @@
 <template>
   <div class="rel-box">
-    <div v-for="(relDetail, idx) in relDetails" :key="idx" class="rel" @click="clickLine(idx)">
-      <div>{{relDetail}}</div>
-    </div>
+    <svg v-for="(relLine, idx) in relLines" :key="idx" class="rel"
+        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">
+        <path d="M2,2 L10,6 L2,10 L6,6 L2,2" :style="`fill:${types[relDetails[idx]['type']]['color']}`"/>
+      </marker>
+      <path :d="relLine"
+        :title="relDetails[idx]['type']"
+        :style="`stroke:${types[relDetails[idx]['type']]['color']};stroke-width:2;fill:#0000;marker-end:url(#arrow)`"
+        @contextmenu="delRel($event, idx)"
+      />
+    </svg>
   </div>
 </template>
 
@@ -18,53 +26,59 @@ export default ({
     },
     relDetails: {
       type: Array,
-      default: undefined,
       required: true
     },
     save: {
       type: Function,
       required: true
+    },
+    types: {
+      type: Object,
+      required: true
     }
   },
   data () {
     return {
       points: [],
       width: 0,
-      height: 0
+      height: 0,
+      relLines: []
     }
   },
   methods: {
     log (...args) {
       console.log(args)
+    },
+    delRel (e, idx) {
+      e.preventDefault()
+      this.relDetails.splice(idx, 1)
+      this.save()
     }
   },
   watch: {
     relDetails: {
       handler (val) {
-        console.log(val)
+        console.log(this.types)
+        let _relLines = []
+        for (let i = 0; i < val.length; i++) {
+          const item = val[i]
+          let startCharDom = document.getElementById(item.start)
+          let endCharDom = document.getElementById(item.end)
+          let sx = startCharDom.offsetLeft + startCharDom.offsetWidth / 2
+          let sy = startCharDom.offsetTop + 9
+          let ex = endCharDom.offsetLeft + endCharDom.offsetWidth / 2
+          let ey = endCharDom.offsetTop + 9
+          let cx = (sx + ex) / 2
+          let cy = (sy + ey) / 2 - 20
+          _relLines.push(`M${sx} ${sy} Q${cx} ${cy} ${ex} ${ey}`)
+        }
+        console.log(_relLines)
+        this.relLines = _relLines
       },
       deep: true
     },
-    delRel: {
-      handler (val) {
-        if (!val) {
-          return
-        }
-        this.relDetails.splice(this.relDetails.indexOf(val), 1)
-        this.save()
-      }
-    },
     nowType: {
       handler (val) {
-        if (!val) {
-          return
-        }
-        if (this.annoDetails.indexOf(val) === -1) {
-          this.annoDetails.push(val)
-        } else {
-          this.annoDetails.splice(this.annoDetails.indexOf(val), 1)
-        }
-        this.save()
       }
     }
   }
@@ -72,4 +86,19 @@ export default ({
 </script>
 
 <style scoped>
+  .rel-box,
+  .rel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    /* background: rgba(0, 0, 0, 0.5); */
+    pointer-events: none;
+  }
+  .rel path {
+    pointer-events: all;
+    cursor: pointer;
+  }
 </style>