feat: add Circle

Author: pyjun01

README.md

@@ -13,7 +13,7 @@ Google map react componentize project
 - [x] Polyline
 - [x] Polygon
 - [x] Rectangle
-- [ ] Circle
+- [x] Circle
 - [ ] AdvancedMarkerView
 - [ ] MarkerClusterer
 - [ ] HeatmapLayer

src/components/Circle/index.tsx

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

src/components/Circle/type.ts

@@ -0,0 +1,55 @@
+export interface CircleEvent {
+  onCenterChanged?: (circle: google.maps.Circle) => void;
+  onClick?: (
+    circle: google.maps.Circle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onContextmenu?: (
+    circle: google.maps.Circle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onDblClick?: (
+    circle: google.maps.Circle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onDrag?: (
+    circle: google.maps.Circle,
+    event: google.maps.MapMouseEvent,
+  ) => void;
+  onDragEnd?: (
+    circle: google.maps.Circle,
+    event: google.maps.MapMouseEvent,
+  ) => void;
+  onDragStart?: (
+    circle: google.maps.Circle,
+    event: google.maps.MapMouseEvent,
+  ) => void;
+  onMouseDown?: (
+    circle: google.maps.Circle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onMouseMove?: (
+    circle: google.maps.Circle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onMouseOut?: (
+    circle: google.maps.Circle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onMouseOver?: (
+    circle: google.maps.Circle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onMouseUp?: (
+    circle: google.maps.Circle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+  onRadiusChanged?: (
+    circle: google.maps.Circle,
+    event: google.maps.PolyMouseEvent,
+  ) => void;
+}
+
+export interface CircleProps
+  extends Partial<Omit<google.maps.CircleOptions, 'map'>>,
+    CircleEvent {}

src/components/index.ts

@@ -16,6 +16,8 @@ export * from './Polygon/index';
 export * from './Polygon/type';
 export * from './Rectangle/index';
 export * from './Rectangle/type';
+export * from './Circle/index';
+export * from './Circle/type';
 export * from './Provider/MapProvider';
 export * from './Provider/MarkerProvider';
 export * from './Provider/CustomMarkerProvider';

src/hooks/useApplyCircleEvent.ts

@@ -0,0 +1,34 @@
+import { CircleEvent } from 'src/components/Circle/type';
+
+import { useMvcObjectEventEffect } from './useMvcObjectEventEffect';
+
+export const useApplyCircleEvent = (
+  circle: google.maps.Circle | null,
+  {
+    onCenterChanged,
+    onClick,
+    onDblClick,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    onMouseDown,
+    onMouseMove,
+    onMouseOut,
+    onMouseOver,
+    onMouseUp,
+    onRadiusChanged,
+  }: CircleEvent,
+) => {
+  useMvcObjectEventEffect(circle, 'center_changed', onCenterChanged);
+  useMvcObjectEventEffect(circle, 'click', onClick);
+  useMvcObjectEventEffect(circle, 'dblclick', onDblClick);
+  useMvcObjectEventEffect(circle, 'drag', onDrag);
+  useMvcObjectEventEffect(circle, 'dragend', onDragEnd);
+  useMvcObjectEventEffect(circle, 'dragstart', onDragStart);
+  useMvcObjectEventEffect(circle, 'mousedown', onMouseDown);
+  useMvcObjectEventEffect(circle, 'mousemove', onMouseMove);
+  useMvcObjectEventEffect(circle, 'mouseout', onMouseOut);
+  useMvcObjectEventEffect(circle, 'mouseover', onMouseOver);
+  useMvcObjectEventEffect(circle, 'mouseup', onMouseUp);
+  useMvcObjectEventEffect(circle, 'radius_changed', onRadiusChanged);
+};

src/hooks/useApplyCircleOptions.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+import { CircleEvent, CircleProps } from '../components/Circle/type';
+
+export const useApplyCircleOptions = (
+  circle: google.maps.Circle | null,
+  { center, ...options }: Omit<CircleProps, keyof CircleEvent>,
+) => {
+  useEffect(() => {
+    circle?.setOptions(options);
+  }, Object.values(options));
+
+  useEffect(() => {
+    circle?.setCenter(center ?? null);
+  }, [center]);
+};

src/index.ts

@@ -4,6 +4,7 @@ import {
   Polyline,
   Polygon,
   Rectangle,
+  Circle,
   CustomMarker,
   InfoWindow,
   GoogleMap,
@@ -18,6 +19,7 @@ import type {
   PolylineProps,
   PolygonProps,
   RectangleProps,
+  CircleProps,
   CustomMarkerProps,
   InfoWindowProps,
   GoogleMapProps,
@@ -38,6 +40,7 @@ export {
   Polyline,
   Polygon,
   Rectangle,
+  Circle,
   CustomMarker,
   InfoWindow,
   GoogleMap,
@@ -57,6 +60,7 @@ export type {
   PolylineProps,
   PolygonProps,
   RectangleProps,
+  CircleProps,
   InfoWindowProps,
   CustomMarkerProps,
   GoogleMapProps,
@@ -76,6 +80,7 @@ export default {
   Polyline,
   Polygon,
   Rectangle,
+  Circle,
   CustomMarker,
   InfoWindow,
   GoogleMap,