From e21855b49261c285ada7aec1f84a8a5e0e2c7d0a Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Thu, 7 Jul 2022 16:29:00 +0900
Subject: [PATCH] Prevent emitting drag point event

---
 .../components/tasks/segmentation/VRegion.vue | 28 +++++++++++++------
 .../tasks/segmentation/VSegmentation.vue      |  1 -
 .../models/tasks/segmentation/Polygon.ts      |  4 +++
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/frontend/components/tasks/segmentation/VRegion.vue b/frontend/components/tasks/segmentation/VRegion.vue
index c7734b88..4b91aa05 100644
--- a/frontend/components/tasks/segmentation/VRegion.vue
+++ b/frontend/components/tasks/segmentation/VRegion.vue
@@ -1,7 +1,7 @@
 <template>
   <v-group>
     <v-polygon
-      :polygon="polygon"
+      :polygon="writablePolygon"
       :closed="true"
       :color="color"
       :draggable="true"
@@ -9,7 +9,7 @@
       :max-height="maxHeight"
       :max-width="maxWidth"
       :scale="scale"
-      @click="$emit('click-polygon', polygon)"
+      @click="$emit('click-polygon', writablePolygon)"
       @dragstart="onDragStart"
       @dragend="onDragEnd"
     />
@@ -27,7 +27,7 @@
         }"
       />
       <v-line
-        v-for="(lineSegment, insertIndex) in polygon.lineSegments"
+        v-for="(lineSegment, insertIndex) in writablePolygon.lineSegments"
         :key="insertIndex"
         :config="{
           draggable: false,
@@ -41,11 +41,11 @@
         }"
         @mousemove="onMouseMoveLine($event, lineSegment)"
         @mouseleave="hideAnchorPoint"
-        @click="handleClickLine($event, polygon, insertIndex + 1)"
+        @click="handleClickLine($event, writablePolygon, insertIndex + 1)"
       />
       <v-point
-        v-for="(point, index) in polygon.toPoints()"
-        :key="`${polygon.id}-${index}`"
+        v-for="(point, index) in writablePolygon.toPoints()"
+        :key="`${writablePolygon.id}-${index}`"
         :color="index === selectedPoint ? color : 'white'"
         :point="point"
         :index="index"
@@ -116,7 +116,8 @@ export default Vue.extend({
 
   data() {
     return {
-      isMoving: false
+      isMoving: false,
+      writablePolygon: this.polygon
     }
   },
 
@@ -126,6 +127,16 @@ export default Vue.extend({
     }
   },
 
+  watch: {
+    polygon: {
+      handler(newPolygon: Polygon) {
+        this.writablePolygon = newPolygon
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+
   methods: {
     onDragStart() {
       this.isMoving = true
@@ -137,7 +148,8 @@ export default Vue.extend({
     },
 
     handleDragMovePoint(index: number, x: number, y: number) {
-      this.$emit('drag-move-point', this.polygon, index, x, y)
+      this.writablePolygon.movePoint(index, x, y)
+      this.writablePolygon = this.writablePolygon.clone()
     },
 
     handleDragEndPoint(index: number, x: number, y: number) {
diff --git a/frontend/components/tasks/segmentation/VSegmentation.vue b/frontend/components/tasks/segmentation/VSegmentation.vue
index 64401b55..62ca67aa 100644
--- a/frontend/components/tasks/segmentation/VSegmentation.vue
+++ b/frontend/components/tasks/segmentation/VSegmentation.vue
@@ -34,7 +34,6 @@
         @click-line="insertPoint"
         @click-polygon="updateSelectedPolygon"
         @drag-end-polygon="translatePolygon"
-        @drag-move-point="movePoint"
         @drag-end-point="movePoint"
         @double-click-point="removePoint"
       />
diff --git a/frontend/domain/models/tasks/segmentation/Polygon.ts b/frontend/domain/models/tasks/segmentation/Polygon.ts
index 2eb403bb..443dae61 100644
--- a/frontend/domain/models/tasks/segmentation/Polygon.ts
+++ b/frontend/domain/models/tasks/segmentation/Polygon.ts
@@ -27,6 +27,10 @@ export default class Polygon {
     }
   }
 
+  clone(): Polygon {
+    return new Polygon(this.labelId, this.flattenedPoints, this.id)
+  }
+
   translate(x: number, y: number): void {
     const vector = new Vector(x, y)
     this.points = this.points.map((point) => point.translate(vector))