feat: add Polygon

Author: pyjun01

README.md

@@ -11,7 +11,7 @@ Google map react componentize project
 - [x] Controls
 - [x] InfoWindow
 - [x] Polyline
-- [ ] Polygon
+- [x] Polygon
 - [ ] Rectangle
 - [ ] Circle
 - [ ] AdvancedMarkerView

src/components/Polygon/index.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, useEffect, useState } from 'react';
+
+import { PolygonProps } from './type';
+import { useApplyPolygonEvent } from '../../hooks/useApplyPolygonEvent';
+import { useApplyPolygonOptions } from '../../hooks/useApplyPolygonOptions';
+import { passRef } from '../../utils/passRef';
+import { useMapContext } from '../Provider/MapProvider';
+
+export const Polygon = forwardRef<google.maps.Polygon, PolygonProps>(
+  function Polygon(
+    {
+      clickable,
+      draggable,
+      editable,
+      fillColor,
+      fillOpacity,
+      geodesic,
+      paths,
+      strokeColor,
+      strokeOpacity,
+      strokePosition,
+      strokeWeight,
+      visible,
+      zIndex,
+      ...events
+    },
+    ref,
+  ) {
+    const map = useMapContext();
+
+    const [Polygon, setPolygon] = useState<google.maps.Polygon | null>(null);
+
+    useEffect(() => {
+      const Polygon = new google.maps.Polygon({
+        map,
+        clickable,
+        draggable,
+        editable,
+        fillColor,
+        fillOpacity,
+        geodesic,
+        paths,
+        strokeColor,
+        strokeOpacity,
+        strokePosition,
+        strokeWeight,
+        visible,
+        zIndex,
+      });
+
+      setPolygon(Polygon);
+      passRef(ref, Polygon);
+
+      return () => {
+        Polygon.setMap(null);
+      };
+    }, []);
+
+    useApplyPolygonOptions(Polygon, {
+      clickable,
+      draggable,
+      editable,
+      fillColor,
+      fillOpacity,
+      geodesic,
+      paths,
+      strokeColor,
+      strokeOpacity,
+      strokePosition,
+      strokeWeight,
+      visible,
+      zIndex,
+    });
+    useApplyPolygonEvent(Polygon, events);
+
+    return null;
+  },
+);

src/components/Polygon/type.ts

@@ -0,0 +1,17 @@
+export interface PolygonEvent {
+  onClick?: (event: google.maps.PolyMouseEvent) => void;
+  onContextmenu?: (event: google.maps.PolyMouseEvent) => void;
+  onDblClick?: (event: google.maps.PolyMouseEvent) => void;
+  onDrag?: (event: google.maps.MapMouseEvent) => void;
+  onDragEnd?: (event: google.maps.MapMouseEvent) => void;
+  onDragStart?: (event: google.maps.MapMouseEvent) => void;
+  onMouseDown?: (event: google.maps.PolyMouseEvent) => void;
+  onMouseMove?: (event: google.maps.PolyMouseEvent) => void;
+  onMouseOut?: (event: google.maps.PolyMouseEvent) => void;
+  onMouseOver?: (event: google.maps.PolyMouseEvent) => void;
+  onMouseUp?: (event: google.maps.PolyMouseEvent) => void;
+}
+
+export interface PolygonProps
+  extends Partial<Omit<google.maps.PolygonOptions, 'map'>>,
+    PolygonEvent {}

src/components/index.ts

@@ -12,6 +12,8 @@ export * from './Marker/index';
 export * from './Marker/type';
 export * from './Polyline/index';
 export * from './Polyline/type';
+export * from './Polygon/index';
+export * from './Polygon/type';
 export * from './Provider/MapProvider';
 export * from './Provider/MarkerProvider';
 export * from './Provider/CustomMarkerProvider';

src/hooks/useApplyPolygonEvent.ts

@@ -0,0 +1,32 @@
+import { PolygonEvent } from 'src/components/Polygon/type';
+
+import { useMvcObjectEventEffect } from './useMvcObjectEventEffect';
+
+export const useApplyPolygonEvent = (
+  polygon: google.maps.Polygon | null,
+  {
+    onClick,
+    onContextmenu,
+    onDblClick,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    onMouseDown,
+    onMouseMove,
+    onMouseOut,
+    onMouseOver,
+    onMouseUp,
+  }: PolygonEvent,
+) => {
+  useMvcObjectEventEffect(polygon, 'click', onClick);
+  useMvcObjectEventEffect(polygon, 'contextmenu', onContextmenu);
+  useMvcObjectEventEffect(polygon, 'dblclick', onDblClick);
+  useMvcObjectEventEffect(polygon, 'drag', onDrag);
+  useMvcObjectEventEffect(polygon, 'dragend', onDragEnd);
+  useMvcObjectEventEffect(polygon, 'dragstart', onDragStart);
+  useMvcObjectEventEffect(polygon, 'mousedown', onMouseDown);
+  useMvcObjectEventEffect(polygon, 'mousemove', onMouseMove);
+  useMvcObjectEventEffect(polygon, 'mouseout', onMouseOut);
+  useMvcObjectEventEffect(polygon, 'mouseover', onMouseOver);
+  useMvcObjectEventEffect(polygon, 'mouseup', onMouseUp);
+};

src/hooks/useApplyPolygonOptions.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+import { PolygonEvent, PolygonProps } from '../components/Polygon/type';
+
+export const useApplyPolygonOptions = (
+  polyline: google.maps.Polygon | null,
+  { paths, ...options }: Omit<PolygonProps, keyof PolygonEvent>,
+) => {
+  useEffect(() => {
+    polyline?.setOptions(options);
+  }, Object.values(options));
+
+  useEffect(() => {
+    polyline?.setPaths(paths ?? []);
+  }, [paths]);
+};

src/hooks/useApplyPolylineOptions.ts

@@ -11,6 +11,7 @@ export const useApplyPolylineOptions = (
   }, Object.values(options));
 
   useEffect(() => {
+    // console.log(path);
     polyline?.setPath(path ?? []);
   }, [path]);
 };

src/hooks/useMvcObjectEventEffect.ts

@@ -13,4 +13,4 @@ export const useMvcObjectEventEffect = (
     const listener = tg.addListener(key, callback);
 
     return () => google.maps.event.removeListener(listener);
-  }, [callback]);
+  }, [tg, callback]);

src/index.ts

@@ -2,6 +2,7 @@ import {
   Control,
   Marker,
   Polyline,
+  Polygon,
   CustomMarker,
   InfoWindow,
   GoogleMap,
@@ -14,6 +15,7 @@ import type {
   ControlProps,
   MarkerProps,
   PolylineProps,
+  PolygonProps,
   CustomMarkerProps,
   InfoWindowProps,
   GoogleMapProps,
@@ -32,6 +34,7 @@ export {
   Control,
   Marker,
   Polyline,
+  Polygon,
   CustomMarker,
   InfoWindow,
   GoogleMap,
@@ -49,6 +52,7 @@ export type {
   ControlProps,
   MarkerProps,
   PolylineProps,
+  PolygonProps,
   InfoWindowProps,
   CustomMarkerProps,
   GoogleMapProps,
@@ -66,6 +70,7 @@ export default {
   Control,
   Marker,
   Polyline,
+  Polygon,
   CustomMarker,
   InfoWindow,
   GoogleMap,