fix: update UI Event

Dongkyuuuu · Sep 27, 2021 · 2d6a8d7 · 2d6a8d7
1 parent d275f30
commit 2d6a8d7
Show file tree

Hide file tree

Showing 12 changed files with 233 additions and 81 deletions.
diff --git a/docs/guide/Infowindow.md b/docs/guide/Infowindow.md
@@ -80,3 +80,23 @@ export default {
 :::info 알림
 Marker는 필수적으로 Props로 넘겨주어야 합니다.
 :::
+
+## UI 이벤트
+
+이벤트에 대한 자세한 설명은 [이벤트 상세설명](https://navermaps.github.io/maps.js.ncp/docs/naver.maps.InfoWindow.html#toc17__anchor)에서 확인 가능합니다.
+
+- anchorColor_changed
+- anchorSize_changed
+- anchorSkew_changed
+- backgroundColor_changed
+- borderColor_changed
+- borderWidth_changed
+- close
+- content_changed
+- disableAnchor_changed
+- disableAutoPan_changed
+- maxWidth_changed
+- open
+- pixelOffset_changed
+- position_changed
+- zIndex_changed
diff --git a/docs/guide/Maps.md b/docs/guide/Maps.md
@@ -66,3 +66,58 @@ export default {
 :::info 알림
 기본 값은 네이버에서 제공하는 기본 값으로 설정 됩니다.
 :::
+
+## UI 이벤트
+
+이벤트에 대한 자세한 설명은 [이벤트 상세설명](https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html#toc38__anchor)에서 확인 가능합니다.
+
+### Mouse
+
+- mousedown
+- mouseup
+- click
+- dblclick
+- rightclick
+- mouseover
+- mouseout
+- mousemove
+
+### Drag
+
+- dragstart
+- drag
+- dragen
+
+### Touch
+
+- touchstart
+- touchmove
+- touchend
+- pinchstart
+- pinch
+- pinchend
+- tap
+- longtap
+- twofingertap
+- doubletap
+
+### Map
+
+- addLayer
+- bounds_changed
+- center_changed
+- centerPoint_changed
+- idle
+- init_stylemap
+- keydown
+- keyup
+- mapType_changed
+- mapTypeId_changed
+- panning
+- projection_changed
+- removeLayer
+- resize
+- size_changed
+- tilesloaded
+- zoom_changed
+- zooming
diff --git a/docs/guide/Marker.md b/docs/guide/Marker.md
@@ -49,3 +49,35 @@ export default {
 :::info 알림
 HtmlIcon을 사용하지 않으면 네이버 기본 마커 스타일이 적용 됩니다.
 :::
+
+## UI 이벤트
+
+### Mouse
+
+- mousedown
+- mouseup
+- click
+- dblclick
+- rightclick
+- mouseover
+- mouseout
+- mousemove
+
+### Drag
+
+- dragstart
+- drag
+- dragen
+
+### Touch
+
+- touchstart
+- touchmove
+- touchend
+- pinchstart
+- pinch
+- pinchend
+- tap
+- longtap
+- twofingertap
+- doubletap
diff --git a/docs/guide/index.md b/docs/guide/index.md
@@ -52,33 +52,4 @@ const LatLng = new window.naver.maps.LatLng(37, 127);
 
 컴포넌트에서 `v-on` directive를 이용해서 네이버에서 제공하는 UI 이벤트를 사용할 수 있습니다. UI이벤트는 표준 DOM(Document Object Model) 이벤트처럼 보이나 실제로는 NAVER 지도 API v3의 이벤트입니다.
 
-### 목록
-
-- mousedown
-- mouseup
-- click
-- dblclick
-- rightclick
-- mouseover
-- mouseout
-- mousemove
-- dragstart
-- drag
-- dragend
-- touchstart
-- touchmove
-- touchend
-- pinchstart
-- pinch
-- pinchend
-- tap
-- longtap
-- twofingertap
-- doubletap
-
-#### `NaverMaps`에서만 사용가능
-
-- addLayer
-- bounds_changed
-- center_changed
-- centerPoint_changed
+자세한 이벤트 목록은 각 컴포넌트 가이드에서 확인 가능합니다.
diff --git a/docs/index.md b/docs/index.md
@@ -26,3 +26,7 @@ footer: MIT Licensed | Copyright © 2021-present DongKyuuuu
 - `NaverMaps` : 네이버 지도 컴포넌트
 - `NaverMarker` : 마커 컴포넌트
 - `NaverInfoWindow` : 인포윈도우 컴포넌트
+
+## 사용
+
+VSCode Extension인 [`Vue Language Features (Volar)`](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)와 타입스크립트를 사용하면, IntelliSense를 통해 편하게 개발 가능합니다. 사용하길 권장합니다!
diff --git a/playground/App.vue b/playground/App.vue
@@ -16,6 +16,7 @@
     </naver-marker>
     <naver-info-window
       :marker="marker"
+      :isOpen="isOpen"
       style="background-color: white; padding: 8px; width: 200px; height: 100px"
       @onLoad="loadInfoWindow($event)"
     >
@@ -45,7 +46,7 @@ export default defineComponent({
     const map = ref<naver.maps.Map>();
     const marker = ref<naver.maps.Marker>();
     const infoWindow = ref<naver.maps.InfoWindow>();
-    const isOpen = ref<boolean>(true);
+    const isOpen = ref<boolean>(false);
     const mapSize = reactive({
       width: "400px",
       height: "400px",

diff --git a/src/components/InfoWindow.vue b/src/components/InfoWindow.vue
@@ -18,11 +18,12 @@ import {
   onMounted,
   watch,
 } from "vue";
+import { addEventInfoWindow, UI_EVENT_INFOWINDOW } from "../utils";
 import { naverMapObject } from "../injectionKeys";
 
 export default defineComponent({
   name: "InfoWindow",
-  emits: ["onLoad"],
+  emits: ["onLoad", ...UI_EVENT_INFOWINDOW],
   props: {
     marker: {
       type: Object as PropType<naver.maps.Marker>,
@@ -42,8 +43,6 @@ export default defineComponent({
     const statusInfoWindow = (open: boolean) => {
       if (open) infoWindow.value!.open(map.value!, marker!.value!);
       else infoWindow.value!.close();
-
-      emit("onLoad", infoWindow.value);
     };
     const createInfoWindow = () => {
       infoWindow.value = new window.naver.maps.InfoWindow(
@@ -55,6 +54,10 @@ export default defineComponent({
         )
       );
 
+      /**
+       * add Infowindow Event
+       */
+      addEventInfoWindow(emit, infoWindow.value);
       emit("onLoad", infoWindow.value!);
       statusInfoWindow(isOpen.value);
     };

diff --git a/src/components/Marker.vue b/src/components/Marker.vue
@@ -17,13 +17,13 @@ import {
   PropType,
   onMounted,
 } from "vue";
-import { addEventMarker, UI_EVENT } from "../utils";
+import { addEventMarker, UI_EVENT_OBJECT } from "../utils";
 import { naverMapObject } from "../injectionKeys";
 import type { naverV3 } from "../types";
 
 export default defineComponent({
   name: "Marker",
-  emits: ["onLoad", ...UI_EVENT],
+  emits: ["onLoad", ...UI_EVENT_OBJECT],
   props: {
     latitude: { type: Number, required: true },
     longitude: { type: Number, required: true },

diff --git a/src/utils/event.ts b/src/utils/event.ts
diff --git a/src/utils/eventAction.ts b/src/utils/eventAction.ts
@@ -0,0 +1,22 @@
+import {
+  UI_EVENT_MAP,
+  UI_EVENT_OBJECT,
+  UI_EVENT_INFOWINDOW,
+} from "./eventList";
+
+export function addEvent(emit: any, target: any, name: string) {
+  window.naver.maps.Event.addListener(target, name, (event) => {
+    emit(name, event);
+  });
+}
+
+export function addEventMap(emit: any, target: naver.maps.Map) {
+  UI_EVENT_MAP.forEach((name) => addEvent(emit, target, name));
+}
+
+export function addEventMarker(emit: any, target: naver.maps.Marker) {
+  UI_EVENT_OBJECT.forEach((name) => addEvent(emit, target, name));
+}
+export function addEventInfoWindow(emit: any, target: naver.maps.InfoWindow) {
+  UI_EVENT_INFOWINDOW.forEach((name) => addEvent(emit, target, name));
+}
diff --git a/src/utils/eventList.ts b/src/utils/eventList.ts
@@ -0,0 +1,87 @@
+/**
+ * Naver Mouse UI Event
+ */
+export const UI_EVENT_MOUSE = [
+  "mousedown",
+  "mouseup",
+  "click",
+  "dblclick",
+  "rightclick",
+  "mouseover",
+  "mouseout",
+  "mousemove",
+];
+/**
+ * Naver Drag UI Event
+ */
+export const UI_EVENT_DRAG = ["dragstart", "drag", "dragend"];
+/**
+ * Naver Touch UI Event
+ */
+export const UI_EVENT_TOUCH = [
+  "touchstart",
+  "touchmove",
+  "touchend",
+  "pinchstart",
+  "pinch",
+  "pinchend",
+  "tap",
+  "longtap",
+  "twofingertap",
+  "doubletap",
+];
+
+/**
+ * Naver Object UI Event
+ */
+export const UI_EVENT_OBJECT = [
+  ...UI_EVENT_MOUSE,
+  ...UI_EVENT_DRAG,
+  ...UI_EVENT_TOUCH,
+];
+
+/**
+ * Naver Map UI Event
+ */
+export const UI_EVENT_MAP = [
+  ...UI_EVENT_OBJECT,
+  "addLayer",
+  "bounds_changed",
+  "center_changed",
+  "centerPoint_changed",
+  "idle",
+  "init_stylemap",
+  "keydown",
+  "keyup",
+  "mapType_changed",
+  "mapTypeId_changed",
+  "panning",
+  "projection_changed",
+  "removeLayer",
+  "resize",
+  "size_changed",
+  "tilesloaded",
+  "zoom_changed",
+  "zooming",
+];
+
+/**
+ * Naver InfoWindow UI Event
+ */
+export const UI_EVENT_INFOWINDOW = [
+  "anchorColor_changed",
+  "anchorSize_changed",
+  "anchorSkew_changed",
+  "backgroundColor_changed",
+  "borderColor_changed",
+  "borderWidth_changed",
+  "close",
+  "content_changed",
+  "disableAnchor_changed",
+  "disableAutoPan_changed",
+  "maxWidth_changed",
+  "open",
+  "pixelOffset_changed",
+  "position_changed",
+  "zIndex_changed",
+];
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from "./map";
-export * from "./event";
+export * from "./eventAction";
+export * from "./eventList";