feat(Rectangle): add Rectangle Component

playground/App.vue

@@ -8,10 +8,14 @@
     :initLayers="initLayers"
     @onLoad="loadMap($event)"
   >
-    <naver-ellipse
+    <naver-rectangle
+      :bounds="rectangleBounds"
+      @onLoad="loadRectangle($event)"
+    ></naver-rectangle>
+    <!-- <naver-ellipse
       :bounds="ellipseBounds"
       @onLoad="loadEllpise($event)"
-    ></naver-ellipse>
+    ></naver-ellipse> -->
     <!-- <naver-circle
       :latitude="37.566616443521745"
       :longitude="126.97837068565364"
@@ -50,6 +54,7 @@ import {
   NaverInfoWindow,
   NaverCircle,
   NaverEllipse,
+  NaverRectangle,
 } from "../dist/vue3-naver-maps";
 
 export default defineComponent({
@@ -59,6 +64,7 @@ export default defineComponent({
     NaverInfoWindow,
     NaverCircle,
     NaverEllipse,
+    NaverRectangle,
   },
   name: "App",
   setup: (props, { emit }) => {
@@ -73,6 +79,13 @@ export default defineComponent({
       west: 126.97837068565364,
       east: 127.97837068565364,
     });
+    const rectangle = ref<naver.maps.Rectangle>();
+    const rectangleBounds = 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({
@@ -112,6 +125,10 @@ export default defineComponent({
       ellipse.value = ellpiseObject;
       console.log(ellipse.value);
     };
+    const loadRectangle = (rectangleObject: naver.maps.Rectangle) => {
+      rectangle.value = rectangleObject;
+      console.log(rectangle.value);
+    };
 
     const openInfoWindow = () => {
       // console.log("openAction: ", infoWindow.value);
@@ -150,6 +167,9 @@ export default defineComponent({
       ellipse,
       ellipseBounds,
       loadEllpise,
+      rectangle,
+      rectangleBounds,
+      loadRectangle,
     };
   },
 });

src/components/Rectangle.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_RECTANGLE, addEventRectangle } from "../utils";
+
+export default defineComponent({
+  name: "Rectangle",
+  emits: [...UI_EVENT_RECTANGLE, "onLoad"],
+  props: {
+    bounds: {
+      type: Object as PropType<naver.maps.Bounds | naver.maps.BoundsLiteral>,
+      required: true,
+    },
+    options: {
+      type: Object as PropType<naver.maps.RectangleOptions>,
+      default: {},
+    },
+  },
+  setup: (props, { emit }) => {
+    const map = inject(naverMapObject)!;
+    const rectangle = ref<naver.maps.Rectangle>();
+    const { bounds, options } = toRefs(props);
+
+    const createRectangle = () => {
+      rectangle.value = new window.naver.maps.Rectangle(
+        Object.assign(
+          {
+            map: map.value!,
+            bounds: bounds.value,
+          },
+          options.value
+        )
+      );
+
+      addEventRectangle(emit, rectangle.value);
+      emit("onLoad", rectangle.value);
+    };
+    const setRectangle = (newOptions: naver.maps.RectangleOptions) => {
+      rectangle.value!.setOptions(newOptions);
+    };
+
+    onMounted(() => {
+      watchEffect(() => {
+        const newOptions = options.value;
+        if (!map.value) return;
+        rectangle.value ? setRectangle(newOptions) : createRectangle();
+      });
+    });
+    onUnmounted(() => rectangle.value!.setMap(null));
+  },
+});
+</script>

src/index.ts

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

src/utils/eventAction.ts

@@ -4,6 +4,7 @@ import {
   UI_EVENT_INFOWINDOW,
   UI_EVENT_CIRCLE,
   UI_EVENT_ELLIPSE,
+  UI_EVENT_RECTANGLE,
 } from "./eventList";
 
 export function addEvent(emit: any, target: any, name: string) {
@@ -31,3 +32,7 @@ export function addEventCircle(emit: any, target: naver.maps.Circle) {
 export function addEventEllipse(emit: any, target: naver.maps.Ellipse) {
   UI_EVENT_ELLIPSE.forEach((name) => addEvent(emit, target, name));
 }
+
+export function addEventRectangle(emit: any, target: naver.maps.Rectangle) {
+  UI_EVENT_RECTANGLE.forEach((name) => addEvent(emit, target, name));
+}

src/utils/eventList.ts

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