react-naver-maps/dist/chunk-EZGOYYQX.mjs

React Navermaps API integration for modern development.

import {
  usePrevious
} from "./chunk-DEGB326C.mjs";
import {
  useNavermaps
} from "./chunk-2R4EMKHB.mjs";
import {
  HandleEvents
} from "./chunk-533MYCRP.mjs";
import {
  useContainerContext
} from "./chunk-HTJMMZVM.mjs";
import {
  NaverMapContext
} from "./chunk-OHKTFK4Q.mjs";
import {
  EventTargetContext
} from "./chunk-YH7PRLMG.mjs";

// src/naver-map.tsx
import pick from "lodash.pick";
import upperfirst from "lodash.upperfirst";
import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var basicMapOptionKeys = [
  "background",
  "baseTileOpacity",
  "disableDoubleClickZoom",
  "disableDoubleTapZoom",
  "disableKineticPan",
  "disableTwoFingerTapZoom",
  "draggable",
  "keyboardShortcuts",
  "logoControl",
  "logoControlOptions",
  "mapDataControl",
  "mapDataControlOptions",
  "mapTypeControl",
  "mapTypeControlOptions",
  "mapTypes",
  "maxBounds",
  "maxZoom",
  "minZoom",
  "padding",
  "pinchZoom",
  "resizeOrigin",
  "scaleControl",
  "scaleControlOptions",
  "scrollWheel",
  "overlayZoomEffect",
  "tileSpare",
  "tileTransition",
  "zoomControl",
  "zoomControlOptions",
  "zoomOrigin",
  "blankTileImage"
];
var kvoKeys = [
  "mapTypeId",
  "size",
  "bounds",
  "center",
  "zoom",
  "centerPoint"
];
var kvoEvents = [
  ...kvoKeys.map((key) => `${key}_changed`),
  "mapType_changed"
];
var uiEvents = [
  "mousedown",
  "mouseup",
  "click",
  "dblclick",
  "rightclick",
  "mouseover",
  "mouseout",
  "mousemove",
  "dragstart",
  "drag",
  "dragend",
  "touchstart",
  "touchmove",
  "touchend",
  "pinchstart",
  "pinch",
  "pinchend",
  "tap",
  "longtap",
  "twofingertap",
  "doubletap"
];
var mapOnlyEvents = [
  "addLayer",
  "idle",
  "init",
  "keydown",
  "keyup",
  "panning",
  "projection_changed",
  "removeLayer",
  "resize",
  "tilesloaded",
  "zooming"
];
var events = [...uiEvents, ...kvoEvents, ...mapOnlyEvents];
var defaultOptionKeyMap = {
  mapTypeId: "defaultMapTypeId",
  size: "defaultSize",
  bounds: "defaultBounds",
  center: "defaultCenter",
  zoom: "defaultZoom",
  centerPoint: "defaultCenterPoint"
};
var NaverMap = forwardRef(function NaverMap2(props, ref) {
  const navermaps = useNavermaps();
  const { element: mapDiv } = useContainerContext();
  const [nmap, setNmap] = useState();
  const nmapRef = useRef();
  useLayoutEffect(() => {
    if (!mapDiv) {
      throw new Error("react-naver-maps: MapDiv is not found. Did you correctly wrap with `MapDiv`?");
    }
    const basicMapOptions = pick(props, basicMapOptionKeys);
    const kvos = kvoKeys.reduce((acc, key) => {
      if (props[defaultOptionKeyMap[key]]) {
        return {
          ...acc,
          [key]: props[defaultOptionKeyMap[key]]
        };
      }
      if (props[key]) {
        return {
          ...acc,
          [key]: props[key]
        };
      }
      return acc;
    }, {});
    const _nmap = new navermaps.Map(mapDiv, { ...basicMapOptions, ...kvos });
    setNmap(_nmap);
    nmapRef.current = _nmap;
    return () => {
      _nmap.destroy();
    };
  }, []);
  const uncontrolledOmittedProps = Object.keys(props).reduce((acc, key) => {
    if (key in defaultOptionKeyMap && props[defaultOptionKeyMap[key]]) {
      return acc;
    }
    return {
      ...acc,
      [key]: props[key]
    };
  }, {});
  useImperativeHandle(ref, () => nmapRef.current);
  return /* @__PURE__ */ jsx(Fragment, {
    children: nmap && /* @__PURE__ */ jsx(NaverMapCore, {
      ...uncontrolledOmittedProps,
      nmap
    })
  });
});
function NaverMapCore({ nmap, children, ...mapProps }) {
  const basicMapOptions = pick(mapProps, basicMapOptionKeys);
  const {
    mapTypeId,
    size,
    bounds,
    center,
    centerPoint,
    zoom
  } = mapProps;
  const prevKVOs = usePrevious({
    mapTypeId,
    size,
    bounds,
    center,
    centerPoint,
    zoom
  }, [
    mapTypeId,
    size,
    bounds,
    center,
    centerPoint,
    zoom
  ]);
  function getDirtyKVOs(keys) {
    return keys.reduce((acc, key) => {
      const currentValue = nmap[`get${upperfirst(key)}`]();
      const propValue = mapProps[key];
      if (!propValue || prevKVOs && prevKVOs[key] === propValue) {
        return acc;
      }
      const isEqual = typeof currentValue.equals === "function" ? currentValue.equals(propValue) : currentValue === propValue;
      if (isEqual) {
        return acc;
      }
      return {
        ...acc,
        [key]: propValue
      };
    }, {});
  }
  useLayoutEffect(() => {
    nmap.setOptions(basicMapOptions);
  }, [Object.values(basicMapOptions)]);
  useLayoutEffect(() => {
    const updated = getDirtyKVOs(["size"]).size;
    if (updated) {
      nmap.setSize(updated);
    }
  }, [size]);
  useLayoutEffect(() => {
    const updated = getDirtyKVOs(["mapTypeId"]).mapTypeId;
    if (updated) {
      nmap.setMapTypeId(updated);
    }
  }, [mapTypeId]);
  useLayoutEffect(() => {
    const dirties = getDirtyKVOs(["bounds", "center", "centerPoint", "zoom"]);
    if (dirties.bounds) {
      nmap.fitBounds(dirties.bounds);
      return;
    }
    if (dirties.center && dirties.zoom) {
      nmap.morph(dirties.center, dirties.zoom);
      return;
    }
    if (dirties.centerPoint) {
      nmap.setCenterPoint(dirties.centerPoint);
    }
    if (dirties.center) {
      nmap.panTo(dirties.center, {});
    }
    if (dirties.zoom) {
      nmap.setZoom(dirties.zoom);
    }
  }, [bounds, center, centerPoint, zoom]);
  return /* @__PURE__ */ jsx(NaverMapContext.Provider, {
    value: nmap,
    children: /* @__PURE__ */ jsx(EventTargetContext.Provider, {
      value: nmap,
      children: /* @__PURE__ */ jsxs(Fragment, {
        children: [
          /* @__PURE__ */ jsx(HandleEvents, {
            events,
            listeners: mapProps
          }),
          children
        ]
      })
    })
  });
}

export {
  NaverMap
};
//# sourceMappingURL=chunk-EZGOYYQX.mjs.map