react-kakao-maps-sdk/esm/components/MarkerClusterer.js

React components for using kakao map api

import React, { useMemo, useImperativeHandle, useLayoutEffect } from 'react';
import { s as shimExports } from '../node_modules/.pnpm/use-sync-external-store@1.6.0_react@19.2.4/node_modules/use-sync-external-store/shim/index.js';
import { useKakaoEvent } from '../hooks/useKakaoEvent.js';
import { useMap } from '../hooks/useMap.js';
import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js';
import { useKakaoMapsSetEffect } from '../hooks/useKakaoMapsSetEffect.js';
import { createMarkerClustererRedrawVersionStore } from './MarkerClusterer.store.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const KakaoMapMarkerClustererContext = /*#__PURE__*/React.createContext(null);
const MarkerClusterer = /*#__PURE__*/React.forwardRef(function MarkerClusterer(_ref, ref) {
  let {
    onClusterclick,
    onClusterdblclick,
    onClustered,
    onClusterout,
    onClusterover,
    onClusterrightclick,
    onCreate,
    ...props
  } = _ref;
  const {
    children,
    averageCenter,
    calculator,
    clickable,
    disableClickZoom,
    gridSize,
    hoverable,
    minClusterSize,
    minLevel,
    styles,
    texts
  } = props;
  const map = useMap(`MarkerClusterer`);
  const redrawVersionStore = useMemo(() => createMarkerClustererRedrawVersionStore(), []);
  const markerClusterer = useMemo(() => {
    if (!window.kakao.maps.MarkerClusterer) {
      console.warn("clusterer 라이브러리를 별도 로드 해야 사용 가능합니다. `https://apis.map.kakao.com/web/guide/#loadlibrary`");
      return;
    }
    return new kakao.maps.MarkerClusterer({
      averageCenter,
      calculator,
      clickable,
      disableClickZoom,
      gridSize,
      hoverable,
      minClusterSize,
      minLevel,
      styles,
      texts
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const contextValue = useMemo(() => ({
    addMarker: marker => {
      markerClusterer?.addMarker(marker, true);
      redrawVersionStore.requestRedraw();
    },
    removeMarker: marker => {
      markerClusterer?.removeMarker(marker, true);
      redrawVersionStore.requestRedraw();
    }
  }), [markerClusterer, redrawVersionStore]);
  useImperativeHandle(ref, () => markerClusterer, [markerClusterer]);
  useLayoutEffect(() => {
    if (!markerClusterer) return;
    markerClusterer.setMap(map);
    return () => {
      markerClusterer.setMap(null);
    };
  }, [map, markerClusterer]);
  useLayoutEffect(() => {
    if (markerClusterer && onCreate) onCreate(markerClusterer);
  }, [markerClusterer, onCreate]);
  useKakaoMapsSetEffect(markerClusterer, "setGridSize", gridSize);
  useKakaoMapsSetEffect(markerClusterer, "setMinClusterSize", minClusterSize);
  useKakaoMapsSetEffect(markerClusterer, "setAverageCenter", averageCenter);
  useKakaoMapsSetEffect(markerClusterer, "setMinLevel", minLevel);
  useKakaoMapsSetEffect(markerClusterer, "setTexts", texts);
  useKakaoMapsSetEffect(markerClusterer, "setCalculator", calculator);
  useKakaoMapsSetEffect(markerClusterer, "setStyles", styles);
  useKakaoEvent(markerClusterer, "clustered", onClustered);
  useKakaoEvent(markerClusterer, "clusterclick", onClusterclick);
  useKakaoEvent(markerClusterer, "clusterover", onClusterover);
  useKakaoEvent(markerClusterer, "clusterout", onClusterout);
  useKakaoEvent(markerClusterer, "clusterdblclick", onClusterdblclick);
  useKakaoEvent(markerClusterer, "clusterrightclick", onClusterrightclick);
  if (!markerClusterer) {
    return null;
  }
  return /*#__PURE__*/jsxs(KakaoMapMarkerClustererContext.Provider, {
    value: contextValue,
    children: [children, /*#__PURE__*/jsx(MarkerClustererRedraw, {
      markerClusterer: markerClusterer,
      redrawVersionStore: redrawVersionStore
    })]
  });
});
const MarkerClustererRedraw = _ref2 => {
  let {
    markerClusterer,
    redrawVersionStore
  } = _ref2;
  const redrawVersion = shimExports.useSyncExternalStore(redrawVersionStore.subscribe, redrawVersionStore.getSnapshot, redrawVersionStore.getSnapshot);
  useIsomorphicLayoutEffect(() => {
    if (redrawVersion === 0) return;
    markerClusterer.redraw();
    redrawVersionStore.completeRedraw();
  }, [markerClusterer, redrawVersionStore, redrawVersion]);
  return null;
};

export { KakaoMapMarkerClustererContext, MarkerClusterer };