From f2499675ab9493eaeb63805679a588770e0ee947 Mon Sep 17 00:00:00 2001 From: Hide_D Date: Wed, 20 Apr 2022 01:27:00 +0900 Subject: [PATCH] =?UTF-8?q?feat,wip:=20=EB=8F=84=EC=8B=9C=20=ED=84=B0?= =?UTF-8?q?=EC=B9=98&=ED=81=B4=EB=A6=AD=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hwe/ts/components/MapCityBasic.vue | 8 ++- hwe/ts/components/MapCityDetail.vue | 8 ++- hwe/ts/components/StaticMapTemplate.vue | 75 +++++++++++++++++++------ 3 files changed, 72 insertions(+), 19 deletions(-) diff --git a/hwe/ts/components/MapCityBasic.vue b/hwe/ts/components/MapCityBasic.vue index 9c6fb700..43b47e22 100644 --- a/hwe/ts/components/MapCityBasic.vue +++ b/hwe/ts/components/MapCityBasic.vue @@ -18,6 +18,7 @@ cursor: city.clickable ? 'pointer' : 'default', }" @click="clicked" + @touchend="touchend" @mouseenter="mouseenter" @mouseleave="mouseleave" > @@ -42,7 +43,7 @@ import type { MapCityParsed } from "@/map"; import { toRef, type PropType } from "vue"; const emit = defineEmits<{ - (event: "click", evnet: MouseEvent): void; + (event: "click", evnet: MouseEvent|TouchEvent): void; (event: "mouseenter", e: MouseEvent): void; (event: "mouseleave", e: MouseEvent): void; }>(); @@ -92,6 +93,11 @@ function mouseleave(event: MouseEvent) { emit("mouseleave", event); } +function touchend(event: TouchEvent) { + event.stopPropagation(); + emit("click", event); +} + function silent(event: MouseEvent) { event.stopPropagation(); } diff --git a/hwe/ts/components/MapCityDetail.vue b/hwe/ts/components/MapCityDetail.vue index 81814f9b..886d717d 100644 --- a/hwe/ts/components/MapCityDetail.vue +++ b/hwe/ts/components/MapCityDetail.vue @@ -26,6 +26,7 @@ cursor: city.clickable?'pointer':'default', }" @click="clicked" + @touchend="touchend" @mouseenter="mouseenter" @mouseleave="mouseleave" > @@ -52,7 +53,7 @@ import type { MapCityParsed } from "@/map"; import { toRef, type PropType } from "vue"; const emit = defineEmits<{ - (event: "click", e: MouseEvent): void; + (event: "click", e: MouseEvent|TouchEvent): void; (event: "mouseenter", e: MouseEvent): void; (event: "mouseleave", e: MouseEvent): void; }>(); @@ -93,6 +94,11 @@ function mouseleave(event: MouseEvent) { emit("mouseleave", event); } +function touchend(event: TouchEvent) { + event.stopPropagation(); + emit("click", event); +} + function silent(event: MouseEvent){ event.stopPropagation(); } diff --git a/hwe/ts/components/StaticMapTemplate.vue b/hwe/ts/components/StaticMapTemplate.vue index dca27591..eeb86db5 100644 --- a/hwe/ts/components/StaticMapTemplate.vue +++ b/hwe/ts/components/StaticMapTemplate.vue @@ -22,7 +22,7 @@ > -
+
@@ -42,7 +42,7 @@ display: deviceType != 'mouseOnly' ? 'block' : 'none', }" type="button" - :class="['btn btn-secondary map_toggle_double_tap btn-sm btn-minimum', toggleSingleTap ? 'active' : '']" + :class="['btn btn-secondary map_toggle_single_tap btn-sm btn-minimum', toggleSingleTap ? 'active' : '']" data-bs-toggle="button" :aria-pressed="toggleSingleTap" autocomplete="off" @@ -59,9 +59,9 @@ :city="city" :image-path="imagePath" :is-my-city="city.id === drawableMap.myCity" - @click="emit('city-click', city, $event)" - @mouseenter="activatedCity = city" - @mouseleave="activatedCity = undefined" + @click="cityClick(city, $event)" + @mouseenter="mouseenter(city, $event)" + @mouseleave="mouseleave(city, $event)" />
>(); const map_area = ref>(); const { elementX: cursorX, elementY: cursorY, isOutside } = useMouseInElement(map_area); const { width: tooltipWidth } = useElementSize(tooltipDom); - +const { sourceType: cursorType } = useMouse(); const emit = defineEmits<{ - (event: "city-click", city: MapCityParsed, e: MouseEvent): void; + (event: "city-click", city: MapCityParsed, e: MouseEvent | TouchEvent): void; (event: "parsed", drawable: MapCityDrawable): void; }>(); @@ -201,7 +200,7 @@ const props = defineProps({ required: true, }, isDetailMap: { type: Boolean, default: undefined, required: false }, - clickableAll: { type: Boolean, default: undefined, required: false }, + disallowClick: { type: Boolean, default: undefined, required: false }, hrefTemplate: { type: String, default: "#", required: false }, /// clickable, 소속 국가, 첩보 여부 등을 반환여부를 설정 neutralView: { type: Boolean, default: false, required: false }, @@ -362,9 +361,14 @@ function convertCityObjs(obj: MapResult): MapCityDrawable { } function mergeClickable(city: MapCityParsedNation): MapCityParsedClickable { - //clickable = (defaultCity << 4 ) | (remainSpy << 3) | (ourCity << 2) | (shownByGeneral << 1) | clickableAll + //clickable = (defaultCity << 4 ) | (remainSpy << 3) | (ourCity << 2) | (shownByGeneral << 1) const id = city.id; const nationID = city.nationID; + + if (props.disallowClick) { + return { ...city, clickable: 0 }; + } + let clickable = 16; if (id in spyList) { clickable |= spyList[id] << 3; @@ -378,9 +382,6 @@ function convertCityObjs(obj: MapResult): MapCityDrawable { if (myCity !== null && id == myCity) { clickable |= 2; } - if (props.clickableAll) { - clickable |= 1; - } return { ...city, @@ -410,6 +411,46 @@ watch( drawableMap.value = convertCityObjs(mapInfo); } ); + +const touchState = ref(0); +function cityClick(city: MapCityParsed, $event: MouseEvent | TouchEvent): void { + if (cursorType.value == "touch") { + if (touchState.value == 1 && activatedCity.value?.id !== city.id) { + touchState.value = 0; + activatedCity.value = undefined; + } + if (touchState.value == 0) { + touchState.value = 1; + activatedCity.value = city; + $event.preventDefault(); + if (!toggleSingleTap.value) { + return; + } + } + } + emit("city-click", city, $event); +} + +function clickOutside($event: MouseEvent): void { + $event.preventDefault(); + $event.stopPropagation(); + touchState.value = 0; + activatedCity.value = undefined; +} + +function mouseenter(city: MapCityParsed, $event: MouseEvent): void { + if (cursorType.value == "mouse") { + activatedCity.value = city; + touchState.value = 0; + } +} + +function mouseleave(city: MapCityParsed, $event: MouseEvent): void { + if (cursorType.value == "mouse") { + activatedCity.value = undefined; + touchState.value = 0; + } +} /* function setMouseWork(obj: MapCityDrawable) { initTooltip($(drawTarget));