From 3513aae088f547edd988febadce8f94d9d98c5c8 Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Fri, 17 Mar 2023 00:30:22 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A7=80=EB=8F=84=20=EB=8F=84=EC=8B=9C?=
 =?UTF-8?q?=20=EB=AF=BC=EA=B0=90=EB=8F=84=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20-=20touchend=EB=8A=94=20touchmove=EC=99=80=EB=8A=94?=
 =?UTF-8?q?=20=EB=B3=84=EA=B0=9C=EC=9D=B4=EB=AF=80=EB=A1=9C=20=ED=95=A8?=
 =?UTF-8?q?=EA=BB=98=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/components/MapCityBasic.vue  | 23 ++++++++++++++++++++---
 hwe/ts/components/MapCityDetail.vue | 26 ++++++++++++++++++++++----
 hwe/ts/components/MapViewer.vue     | 14 ++++++++++----
 3 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue
index e7182383..ce0ccc39 100644
--- a/hwe/ts/components/MapCityBasic.vue
+++ b/hwe/ts/components/MapCityBasic.vue
@@ -15,6 +15,8 @@
         cursor: city.clickable ? 'pointer' : 'default',
       }"
       @click="clicked"
+      @touchstart="touchstart"
+      @touchmove="touchmove"
       @touchend="touchend"
       @mouseenter="mouseenter"
       @mouseleave="mouseleave"
@@ -43,6 +45,7 @@ const emit = defineEmits<{
   (event: "click", evnet: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
+  (event: "touchleave", e: TouchEvent): void;
 }>();
 const props = defineProps({
   city: {
@@ -117,11 +120,25 @@ function mouseleave(event: MouseEvent) {
   emit("mouseleave", event);
 }
 
-function touchend(event: TouchEvent) {
-  event.stopPropagation();
-  emit("click", event);
+let touchOnTrack = false;
+
+function touchstart() {
+  touchOnTrack = true;
 }
 
+function touchmove() {
+  touchOnTrack = false;
+}
+
+function touchend(event: TouchEvent) {
+  if (touchOnTrack) {
+    event.stopPropagation();
+    emit("click", event);
+  }
+  else{
+    emit("touchleave", event);
+  }
+}
 function silent(event: MouseEvent) {
   event.stopPropagation();
 }
diff --git a/hwe/ts/components/MapCityDetail.vue b/hwe/ts/components/MapCityDetail.vue
index d175db28..dd8158fa 100644
--- a/hwe/ts/components/MapCityDetail.vue
+++ b/hwe/ts/components/MapCityDetail.vue
@@ -23,6 +23,8 @@
         cursor: city.clickable ? 'pointer' : 'default',
       }"
       @click="clicked"
+      @touchstart="touchstart"
+      @touchmove="touchmove"
       @touchend="touchend"
       @mouseenter="mouseenter"
       @mouseleave="mouseleave"
@@ -54,6 +56,7 @@ const emit = defineEmits<{
   (event: "click", e: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
+  (event: "touchleave", e: TouchEvent): void;
 }>();
 const props = defineProps({
   city: {
@@ -119,9 +122,24 @@ function mouseleave(event: MouseEvent) {
   emit("mouseleave", event);
 }
 
+let touchOnTrack = false;
+
+function touchstart() {
+  touchOnTrack = true;
+}
+
+function touchmove() {
+  touchOnTrack = false;
+}
+
 function touchend(event: TouchEvent) {
-  event.stopPropagation();
-  emit("click", event);
+  if (touchOnTrack) {
+    event.stopPropagation();
+    emit("click", event);
+  }
+  else{
+    emit("touchleave", event);
+  }
 }
 
 function silent(event: MouseEvent) {
@@ -130,7 +148,7 @@ function silent(event: MouseEvent) {
 </script>
 
 <style lang="scss" scoped>
-.full_width_map{
+.full_width_map {
   a,
   div,
   img,
@@ -148,7 +166,7 @@ function silent(event: MouseEvent) {
   }
 
   span {
-    line-height: 1.0;
+    line-height: 1;
     font-size: 11px;
   }
 }
diff --git a/hwe/ts/components/MapViewer.vue b/hwe/ts/components/MapViewer.vue
index 742f1122..19dca97a 100644
--- a/hwe/ts/components/MapViewer.vue
+++ b/hwe/ts/components/MapViewer.vue
@@ -65,8 +65,9 @@
           :isFullWidth="isFullWidth"
           :href="props.genHref?.call(city, city.id)"
           @click="cityClick(city, $event)"
+          @touchleave="pointerleave(city, $event)"
           @mouseenter="mouseenter(city, $event)"
-          @mouseleave="mouseleave(city, $event)"
+          @mouseleave="pointerleave(city, $event)"
         />
       </template>
       <template v-else
@@ -78,8 +79,9 @@
           :isFullWidth="isFullWidth"
           :href="props.genHref?.call(city, city.id)"
           @click="cityClick(city, $event)"
+          @touchleave="pointerleave(city, $event)"
           @mouseenter="mouseenter(city, $event)"
-          @mouseleave="mouseleave(city, $event)"
+          @mouseleave="pointerleave(city, $event)"
       /></template>
     </div>
     <div
@@ -484,8 +486,12 @@ function mouseenter(city: MapCityParsed, $event: MouseEvent): void {
   }
 }
 
-function mouseleave(city: MapCityParsed, $event: MouseEvent): void {
-  if (cursorType.value == "mouse") {
+function pointerleave(city: MapCityParsed, $event: MouseEvent|TouchEvent): void {
+  if (cursorType.value == "touch") {
+    activatedCity.value = undefined;
+    touchState.value = 0;
+  }
+  else if (cursorType.value == "mouse") {
     activatedCity.value = undefined;
     touchState.value = 0;
   }