@granite-js/naver-map 1.0.0

package/src/internals/useMapOverlay.ts

@@ -0,0 +1,59 @@
+import { useEffect, useLayoutEffect } from 'react';
+import type { View } from 'react-native';
+import { type MapContextValue, useMapContext } from './context';
+import { useOverlayId } from './id';
+
+interface MapOverlayProps<EventListeners, Props> {
+  registrySelector: (c: MapContextValue) => Map<string, Partial<EventListeners>>;
+  methods: MapOverlayMethods<Props>;
+  props: Props;
+  eventListeners: Partial<EventListeners>;
+}
+
+interface MapOverlayMethods<Props> {
+  add: (v: View, id: string, args: Props) => void;
+  update: (v: View, id: string, args: Props) => void;
+  remove: (v: View, id: string) => void;
+}
+
+export function useMapOverlay<EventListeners, Props>({
+  props,
+  eventListeners,
+  methods,
+  registrySelector,
+}: MapOverlayProps<EventListeners, Props>) {
+  const id = useOverlayId();
+  const mapContext = useMapContext();
+
+  useEffect(() => {
+    if (!mapContext) {
+      return;
+    }
+
+    const registry = registrySelector(mapContext);
+    registry.set(id, eventListeners);
+    return () => {
+      registry.delete(id);
+    };
+  }, [id, mapContext, registrySelector, eventListeners]);
+
+  useLayoutEffect(() => {
+    console.log('[useMapOverlay] useLayoutEffect - mapContext:', mapContext ? 'exists' : 'null', 'id:', id);
+    if (!mapContext) {
+      return;
+    }
+
+    const { mapView } = mapContext;
+    console.log('[useMapOverlay] calling methods.add for id:', id);
+    methods.add(mapView, id, props);
+    return () => methods.remove(mapView, id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, mapContext, methods]);
+
+  useLayoutEffect(() => {
+    if (!mapContext) {
+      return;
+    }
+    methods.update(mapContext.mapView, id, props);
+  }, [id, mapContext, methods, props]);
+}

package/src/internals/usePreservedReference.ts

@@ -0,0 +1,41 @@
+import { useRef } from 'react';
+
+/**
+ * Returns a memoized reference that only changes when the object's content changes.
+ * This is useful for preventing unnecessary re-renders when object references change
+ * but the content remains the same.
+ */
+export function usePreservedReference<T>(value: T): T {
+  const ref = useRef<T>(value);
+
+  if (!shallowEqual(ref.current, value)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}
+
+function shallowEqual<T>(a: T, b: T): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+    return false;
+  }
+
+  const keysA = Object.keys(a) as (keyof T)[];
+  const keysB = Object.keys(b) as (keyof T)[];
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  for (const key of keysA) {
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/overlays/ArrowheadPath.ts

@@ -0,0 +1,71 @@
+import { type View } from 'react-native';
+import { processColorInput } from '../internals/colorUtils';
+import { useMapOverlay } from '../internals/useMapOverlay';
+import { usePreservedReference } from '../internals/usePreservedReference';
+import { Commands } from '../specs/GraniteNaverMapViewNativeComponent';
+import type { Coord } from '../types/Coord';
+
+export interface ArrowheadPathProps {
+  coordinates: Coord[];
+  color?: number | string;
+  outlineColor?: number | string;
+  width?: number;
+  outlineWidth?: number;
+  headSizeRatio?: number;
+  zIndex?: number;
+}
+
+const add = (v: View, id: string, args: ArrowheadPathProps) => {
+  const color = processColorInput(args.color, 0xff000000);
+  const outlineColor = processColorInput(args.outlineColor, 0xffffffff);
+  const coordsJson = JSON.stringify(args.coordinates);
+
+  Commands.addArrowheadPath(
+    v as any,
+    id,
+    coordsJson,
+    args.width ?? 5,
+    args.outlineWidth ?? 1,
+    color,
+    outlineColor,
+    args.headSizeRatio ?? 3,
+    args.zIndex ?? 0
+  );
+};
+
+const update = (v: View, id: string, args: ArrowheadPathProps) => {
+  const color = processColorInput(args.color, 0xff000000);
+  const outlineColor = processColorInput(args.outlineColor, 0xffffffff);
+  const coordsJson = JSON.stringify(args.coordinates);
+
+  Commands.updateArrowheadPath(
+    v as any,
+    id,
+    coordsJson,
+    args.width ?? 5,
+    args.outlineWidth ?? 1,
+    color,
+    outlineColor,
+    args.headSizeRatio ?? 3,
+    args.zIndex ?? 0
+  );
+};
+
+const remove = (v: View, id: string) => {
+  Commands.removeArrowheadPath(v as any, id);
+};
+
+const methods = { add, update, remove };
+
+export function ArrowheadPath(props: ArrowheadPathProps) {
+  const preserved = usePreservedReference(props);
+
+  useMapOverlay<object, ArrowheadPathProps>({
+    registrySelector: (c) => c.markers,
+    methods,
+    props: preserved,
+    eventListeners: {},
+  });
+
+  return null;
+}

package/src/overlays/Circle.ts

@@ -0,0 +1,68 @@
+import { type View } from 'react-native';
+import { processColorInput } from '../internals/colorUtils';
+import { useMapOverlay } from '../internals/useMapOverlay';
+import { usePreservedReference } from '../internals/usePreservedReference';
+import { Commands } from '../specs/GraniteNaverMapViewNativeComponent';
+import type { Coord } from '../types/Coord';
+
+export interface CircleProps {
+  center: Coord;
+  radius: number;
+  fillColor?: number | string;
+  strokeColor?: number | string;
+  strokeWidth?: number;
+  zIndex?: number;
+}
+
+const add = (v: View, id: string, args: CircleProps) => {
+  const fillColor = processColorInput(args.fillColor, 0x80000000);
+  const strokeColor = processColorInput(args.strokeColor, 0xff000000);
+
+  Commands.addCircle(
+    v as any,
+    id,
+    args.center.latitude,
+    args.center.longitude,
+    args.radius,
+    fillColor,
+    strokeColor,
+    args.strokeWidth ?? 0,
+    args.zIndex ?? 0
+  );
+};
+
+const update = (v: View, id: string, args: CircleProps) => {
+  const fillColor = processColorInput(args.fillColor, 0x80000000);
+  const strokeColor = processColorInput(args.strokeColor, 0xff000000);
+
+  Commands.updateCircle(
+    v as any,
+    id,
+    args.center.latitude,
+    args.center.longitude,
+    args.radius,
+    fillColor,
+    strokeColor,
+    args.strokeWidth ?? 0,
+    args.zIndex ?? 0
+  );
+};
+
+const remove = (v: View, id: string) => {
+  Commands.removeCircle(v as any, id);
+};
+
+const methods = { add, update, remove };
+
+export function Circle(props: CircleProps) {
+  const preserved = usePreservedReference(props);
+
+  useMapOverlay<object, CircleProps>({
+    registrySelector: (c) => c.markers,
+    methods,
+    props: preserved,
+    eventListeners: {},
+  });
+
+  return null;
+}

package/src/overlays/GroundOverlay.ts

@@ -0,0 +1,62 @@
+import { type View } from 'react-native';
+import { useMapOverlay } from '../internals/useMapOverlay';
+import { usePreservedReference } from '../internals/usePreservedReference';
+import { Commands } from '../specs/GraniteNaverMapViewNativeComponent';
+import type { Coord } from '../types/Coord';
+
+export interface GroundOverlayProps {
+  bounds: {
+    northEast: Coord;
+    southWest: Coord;
+  };
+  image: string;
+  alpha?: number;
+  zIndex?: number;
+}
+
+const add = (v: View, id: string, args: GroundOverlayProps) => {
+  Commands.addGroundOverlay(
+    v as any,
+    id,
+    args.bounds.southWest.latitude,
+    args.bounds.southWest.longitude,
+    args.bounds.northEast.latitude,
+    args.bounds.northEast.longitude,
+    args.image,
+    args.alpha ?? 1,
+    args.zIndex ?? 0
+  );
+};
+
+const update = (v: View, id: string, args: GroundOverlayProps) => {
+  Commands.updateGroundOverlay(
+    v as any,
+    id,
+    args.bounds.southWest.latitude,
+    args.bounds.southWest.longitude,
+    args.bounds.northEast.latitude,
+    args.bounds.northEast.longitude,
+    args.image,
+    args.alpha ?? 1,
+    args.zIndex ?? 0
+  );
+};
+
+const remove = (v: View, id: string) => {
+  Commands.removeGroundOverlay(v as any, id);
+};
+
+const methods = { add, update, remove };
+
+export function GroundOverlay(props: GroundOverlayProps) {
+  const preserved = usePreservedReference(props);
+
+  useMapOverlay<object, GroundOverlayProps>({
+    registrySelector: (c) => c.markers,
+    methods,
+    props: preserved,
+    eventListeners: {},
+  });
+
+  return null;
+}

package/src/overlays/InfoWindow.ts

@@ -0,0 +1,68 @@
+import { type View } from 'react-native';
+import { useMapOverlay } from '../internals/useMapOverlay';
+import { usePreservedReference } from '../internals/usePreservedReference';
+import { Commands } from '../specs/GraniteNaverMapViewNativeComponent';
+import type { Coord } from '../types/Coord';
+
+export interface InfoWindowProps {
+  coordinate: Coord;
+  text: string;
+  alpha?: number;
+  zIndex?: number;
+  offsetX?: number;
+  offsetY?: number;
+  onPress?: () => void;
+}
+
+export interface InfoWindowEventListeners {
+  onPress?: () => void;
+}
+
+const add = (v: View, id: string, args: InfoWindowProps) => {
+  Commands.addInfoWindow(
+    v as any,
+    id,
+    args.coordinate.latitude,
+    args.coordinate.longitude,
+    args.text,
+    args.alpha ?? 1,
+    args.zIndex ?? 0,
+    args.offsetX ?? 0,
+    args.offsetY ?? 0
+  );
+};
+
+const update = (v: View, id: string, args: InfoWindowProps) => {
+  Commands.updateInfoWindow(
+    v as any,
+    id,
+    args.coordinate.latitude,
+    args.coordinate.longitude,
+    args.text,
+    args.alpha ?? 1,
+    args.zIndex ?? 0,
+    args.offsetX ?? 0,
+    args.offsetY ?? 0
+  );
+};
+
+const remove = (v: View, id: string) => {
+  Commands.removeInfoWindow(v as any, id);
+};
+
+const methods = { add, update, remove };
+
+export function InfoWindow(props: InfoWindowProps) {
+  const preserved = usePreservedReference(props);
+
+  useMapOverlay<InfoWindowEventListeners, InfoWindowProps>({
+    registrySelector: (c) => c.markers,
+    methods,
+    props: preserved,
+    eventListeners: {
+      onPress: props.onPress,
+    },
+  });
+
+  return null;
+}

package/src/overlays/Marker.ts

@@ -0,0 +1,83 @@
+import { type View } from 'react-native';
+import { processColorInput } from '../internals/colorUtils';
+import { useMapOverlay } from '../internals/useMapOverlay';
+import { usePreservedReference } from '../internals/usePreservedReference';
+import { Commands } from '../specs/GraniteNaverMapViewNativeComponent';
+import type { Coord } from '../types/Coord';
+
+export interface MarkerProps extends MarkerEventListeners {
+  coordinate: Coord;
+  pinColor?: number | string;
+  image?: string;
+  rotation?: number;
+  flat?: boolean;
+  width?: number;
+  height?: number;
+  alpha?: number;
+  zIndex?: number;
+}
+
+export interface MarkerEventListeners {
+  onPress?: () => void;
+}
+
+const add = (v: View, id: string, args: MarkerProps) => {
+  // pinColor: 0 means use default icon, otherwise process the color
+  const pinColor = args.pinColor != null ? processColorInput(args.pinColor, 0) : 0;
+
+  Commands.addMarker(
+    v as any,
+    id,
+    args.coordinate.latitude,
+    args.coordinate.longitude,
+    args.width ?? 0,
+    args.height ?? 0,
+    args.zIndex ?? 0,
+    args.rotation ?? 0,
+    args.flat ?? false,
+    args.alpha ?? 1,
+    pinColor,
+    args.image ?? ''
+  );
+};
+
+const update = (v: View, id: string, args: MarkerProps) => {
+  // pinColor: 0 means use default icon, otherwise process the color
+  const pinColor = args.pinColor != null ? processColorInput(args.pinColor, 0) : 0;
+
+  Commands.updateMarker(
+    v as any,
+    id,
+    args.coordinate.latitude,
+    args.coordinate.longitude,
+    args.width ?? 0,
+    args.height ?? 0,
+    args.zIndex ?? 0,
+    args.rotation ?? 0,
+    args.flat ?? false,
+    args.alpha ?? 1,
+    pinColor,
+    args.image ?? ''
+  );
+};
+
+const remove = (v: View, id: string) => {
+  Commands.removeMarker(v as any, id);
+};
+
+const methods = { add, update, remove };
+
+export function Marker(props: MarkerProps) {
+  const preserved = usePreservedReference(props);
+
+  useMapOverlay<MarkerEventListeners, MarkerProps>({
+    registrySelector: (c) => c.markers,
+    methods,
+    props: preserved,
+    eventListeners: {
+      onPress: props.onPress,
+    },
+  });
+
+  return null;
+}

package/src/overlays/Path.ts

@@ -0,0 +1,87 @@
+import { type View } from 'react-native';
+import { processColorInput } from '../internals/colorUtils';
+import { useMapOverlay } from '../internals/useMapOverlay';
+import { usePreservedReference } from '../internals/usePreservedReference';
+import { Commands } from '../specs/GraniteNaverMapViewNativeComponent';
+import type { Coord } from '../types/Coord';
+
+export interface PathProps {
+  coordinates: Coord[];
+  color?: number | string;
+  outlineColor?: number | string;
+  passedColor?: number | string;
+  passedOutlineColor?: number | string;
+  width?: number;
+  outlineWidth?: number;
+  patternImage?: string;
+  patternInterval?: number;
+  progress?: number;
+  zIndex?: number;
+}
+
+const add = (v: View, id: string, args: PathProps) => {
+  const color = processColorInput(args.color, 0xff000000);
+  const outlineColor = processColorInput(args.outlineColor, 0xffffffff);
+  const passedColor = processColorInput(args.passedColor, 0xff808080);
+  const passedOutlineColor = processColorInput(args.passedOutlineColor, 0xffffffff);
+  const coordsJson = JSON.stringify(args.coordinates);
+
+  Commands.addPath(
+    v as any,
+    id,
+    coordsJson,
+    args.width ?? 5,
+    args.outlineWidth ?? 1,
+    color,
+    outlineColor,
+    passedColor,
+    passedOutlineColor,
+    args.patternImage ?? '',
+    args.patternInterval ?? 0,
+    args.progress ?? 0,
+    args.zIndex ?? 0
+  );
+};
+
+const update = (v: View, id: string, args: PathProps) => {
+  const color = processColorInput(args.color, 0xff000000);
+  const outlineColor = processColorInput(args.outlineColor, 0xffffffff);
+  const passedColor = processColorInput(args.passedColor, 0xff808080);
+  const passedOutlineColor = processColorInput(args.passedOutlineColor, 0xffffffff);
+  const coordsJson = JSON.stringify(args.coordinates);
+
+  Commands.updatePath(
+    v as any,
+    id,
+    coordsJson,
+    args.width ?? 5,
+    args.outlineWidth ?? 1,
+    color,
+    outlineColor,
+    passedColor,
+    passedOutlineColor,
+    args.patternImage ?? '',
+    args.patternInterval ?? 0,
+    args.progress ?? 0,
+    args.zIndex ?? 0
+  );
+};
+
+const remove = (v: View, id: string) => {
+  Commands.removePath(v as any, id);
+};
+
+const methods = { add, update, remove };
+
+export function Path(props: PathProps) {
+  const preserved = usePreservedReference(props);
+
+  useMapOverlay<object, PathProps>({
+    registrySelector: (c) => c.markers,
+    methods,
+    props: preserved,
+    eventListeners: {},
+  });
+
+  return null;
+}

package/src/overlays/Polygon.ts

@@ -0,0 +1,83 @@
+import { type View } from 'react-native';
+import { processColorInput } from '../internals/colorUtils';
+import { useMapOverlay } from '../internals/useMapOverlay';
+import { usePreservedReference } from '../internals/usePreservedReference';
+import { Commands } from '../specs/GraniteNaverMapViewNativeComponent';
+import type { Coord } from '../types/Coord';
+
+export interface PolygonProps {
+  coordinates: Coord[];
+  holes?: Coord[][];
+  fillColor?: number | string;
+  strokeColor?: number | string;
+  strokeWidth?: number;
+  zIndex?: number;
+}
+
+// Close the ring by adding the first coordinate at the end if not already closed
+const closeRing = (coords: Coord[]): Coord[] => {
+  if (coords.length < 3) {
+    return coords;
+  }
+  const first = coords[0]!;
+  const last = coords[coords.length - 1]!;
+  if (first.latitude === last.latitude && first.longitude === last.longitude) {
+    return coords; // Already closed
+  }
+  return [...coords, first];
+};
+
+const add = (v: View, id: string, args: PolygonProps) => {
+  const fillColor = processColorInput(args.fillColor, 0x80000000);
+  const strokeColor = processColorInput(args.strokeColor, 0xff000000);
+  const coordsJson = JSON.stringify(closeRing(args.coordinates));
+  const holesJson = JSON.stringify((args.holes ?? []).map(closeRing));
+
+  Commands.addPolygon(
+    v as any,
+    id,
+    coordsJson,
+    holesJson,
+    fillColor,
+    strokeColor,
+    args.strokeWidth ?? 0,
+    args.zIndex ?? 0
+  );
+};
+
+const update = (v: View, id: string, args: PolygonProps) => {
+  const fillColor = processColorInput(args.fillColor, 0x80000000);
+  const strokeColor = processColorInput(args.strokeColor, 0xff000000);
+  const coordsJson = JSON.stringify(closeRing(args.coordinates));
+  const holesJson = JSON.stringify((args.holes ?? []).map(closeRing));
+
+  Commands.updatePolygon(
+    v as any,
+    id,
+    coordsJson,
+    holesJson,
+    fillColor,
+    strokeColor,
+    args.strokeWidth ?? 0,
+    args.zIndex ?? 0
+  );
+};
+
+const remove = (v: View, id: string) => {
+  Commands.removePolygon(v as any, id);
+};
+
+const methods = { add, update, remove };
+
+export function Polygon(props: PolygonProps) {
+  const preserved = usePreservedReference(props);
+
+  useMapOverlay<object, PolygonProps>({
+    registrySelector: (c) => c.markers,
+    methods,
+    props: preserved,
+    eventListeners: {},
+  });
+
+  return null;
+}