feat(ellpise): add Ellpise Component

playground/App.vue

@@ -8,12 +8,16 @@
     :initLayers="initLayers"
     @onLoad="loadMap($event)"
   >
-    <naver-circle
+    <naver-ellipse
+      :bounds="ellipseBounds"
+      @onLoad="loadEllpise($event)"
+    ></naver-ellipse>
+    <!-- <naver-circle
       :latitude="37.566616443521745"
       :longitude="126.97837068565364"
       :radius="100"
       @onLoad="loadCircle($event)"
-    ></naver-circle>
+    ></naver-circle> -->
     <!-- <naver-marker
       :latitude="37.566616443521745"
       :longitude="126.97837068565364"
@@ -45,16 +49,30 @@ import {
   NaverMarker,
   NaverInfoWindow,
   NaverCircle,
+  NaverEllipse,
 } from "../dist/vue3-naver-maps";
 
 export default defineComponent({
-  components: { NaverMaps, NaverMarker, NaverInfoWindow, NaverCircle },
+  components: {
+    NaverMaps,
+    NaverMarker,
+    NaverInfoWindow,
+    NaverCircle,
+    NaverEllipse,
+  },
   name: "App",
   setup: (props, { emit }) => {
     const map = ref<naver.maps.Map>();
     const marker = ref<naver.maps.Marker>();
     const infoWindow = ref<naver.maps.InfoWindow>();
     const circle = ref<naver.maps.Circle>();
+    const ellipse = ref<naver.maps.Ellipse>();
+    const ellipseBounds = ref<naver.maps.BoundsLiteral>({
+      south: 37.566616443521745,
+      north: 38.566616443521745,
+      west: 126.97837068565364,
+      east: 127.97837068565364,
+    });
     const infoWindowOptions = ref<naver.maps.InfoWindowOptions>();
     const isOpen = ref<boolean>(false);
     const mapSize = reactive({
@@ -90,6 +108,10 @@ export default defineComponent({
       circle.value = circleObject;
       console.log(circle.value);
     };
+    const loadEllpise = (ellpiseObject: naver.maps.Ellipse) => {
+      ellipse.value = ellpiseObject;
+      console.log(ellipse.value);
+    };
 
     const openInfoWindow = () => {
       // console.log("openAction: ", infoWindow.value);
@@ -125,6 +147,9 @@ export default defineComponent({
       infoWindowOptions,
       circle,
       loadCircle,
+      ellipse,
+      ellipseBounds,
+      loadEllpise,
     };
   },
 });

src/components/Ellipse.vue

@@ -0,0 +1,63 @@
+<template></template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  PropType,
+  inject,
+  ref,
+  toRefs,
+  onMounted,
+  onUnmounted,
+  watchEffect,
+} from "vue";
+import { naverMapObject } from "../injectionKeys";
+import { UI_EVENT_ELLIPSE, addEventEllipse } from "../utils";
+
+export default defineComponent({
+  name: "Ellpise",
+  emits: [...UI_EVENT_ELLIPSE, "onLoad"],
+  props: {
+    bounds: {
+      type: Object as PropType<naver.maps.Bounds | naver.maps.BoundsLiteral>,
+      required: true,
+    },
+    options: {
+      type: Object as PropType<naver.maps.EllipseOptions>,
+      default: {},
+    },
+  },
+  setup: (props, { emit }) => {
+    const map = inject(naverMapObject)!;
+    const ellipse = ref<naver.maps.Ellipse>();
+    const { bounds, options } = toRefs(props);
+
+    const createEllipse = () => {
+      ellipse.value = new window.naver.maps.Ellipse(
+        Object.assign(
+          {
+            map: map.value!,
+            bounds: bounds.value,
+          },
+          options.value
+        )
+      );
+
+      addEventEllipse(emit, ellipse.value);
+      emit("onLoad", ellipse.value);
+    };
+    const setEllipse = (newOptions: naver.maps.EllipseOptions) => {
+      ellipse.value!.setOptions(newOptions);
+    };
+
+    onMounted(() => {
+      watchEffect(() => {
+        const newOptions = options.value;
+        if (!map.value) return;
+        ellipse.value ? setEllipse(newOptions) : createEllipse();
+      });
+    });
+    onUnmounted(() => ellipse.value!.setMap(null));
+  },
+});
+</script>

src/index.ts

@@ -4,13 +4,14 @@ import NaverMaps from "./components/Map.vue";
 import NaverMarker from "./components/Marker.vue";
 import NaverInfoWindow from "./components/InfoWindow.vue";
 import NaverCircle from "./components/Circle.vue";
+import NaverEllipse from "./components/Ellipse.vue";
 
 // export * from "./apis";
 export { naverV3 } from "./types";
 
 /**
  * Export Components
  */
-export { NaverMaps, NaverMarker, NaverInfoWindow, NaverCircle };
+export { NaverMaps, NaverMarker, NaverInfoWindow, NaverCircle, NaverEllipse };
 
 export default install;

src/utils/eventAction.ts

@@ -3,6 +3,7 @@ import {
   UI_EVENT_OBJECT,
   UI_EVENT_INFOWINDOW,
   UI_EVENT_CIRCLE,
+  UI_EVENT_ELLIPSE,
 } from "./eventList";
 
 export function addEvent(emit: any, target: any, name: string) {
@@ -26,3 +27,7 @@ export function addEventInfoWindow(emit: any, target: naver.maps.InfoWindow) {
 export function addEventCircle(emit: any, target: naver.maps.Circle) {
   UI_EVENT_CIRCLE.forEach((name) => addEvent(emit, target, name));
 }
+
+export function addEventEllipse(emit: any, target: naver.maps.Ellipse) {
+  UI_EVENT_ELLIPSE.forEach((name) => addEvent(emit, target, name));
+}

src/utils/eventList.ts

@@ -102,3 +102,19 @@ export const UI_EVENT_CIRCLE = [
   "visible_changed",
   "zIndex_changed",
 ];
+
+/**
+ * Naver Circle UI Event
+ */
+export const UI_EVENT_ELLIPSE = [
+  "bounds_changed",
+  "click",
+  "clickable_changed",
+  "dblclick",
+  "mousedown",
+  "mouseout",
+  "mouseover",
+  "mouseup",
+  "visible_changed",
+  "zIndex_changed",
+];