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));