@mint-ui/map 1.1.2 → 1.2.0-test.1

package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerHanquf.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { MarkerOptions, Offset, Position } from "../../../types";
+export interface CanvasMarkerRendererParamsHanquf<T> {
+    context: CanvasRenderingContext2D;
+    offset: Offset[];
+    payload?: CanvasMarkerDataHanquf<T>;
+}
+export interface CanvasMarkerOptionHanquf {
+    position?: Position[];
+    visible?: boolean;
+    hitRadius?: number;
+}
+export declare type CanvasMarkerDataHanquf<T> = T & CanvasMarkerOptionHanquf;
+export declare type CanvasMarkerRenderFunctionHanquf<T> = (params: CanvasMarkerRendererParamsHanquf<T>) => void;
+export interface CanvasMarkerPropsHanquf<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
+    renderer: CanvasMarkerRenderFunctionHanquf<T>;
+    data: CanvasMarkerDataHanquf<T>[];
+    onMouseOver?: (item: CanvasMarkerDataHanquf<T>) => void;
+    onMouseOut?: (item: CanvasMarkerDataHanquf<T>) => void;
+    onClick?: (item: CanvasMarkerDataHanquf<T>) => void;
+}
+export declare function CanvasMarkerHanquf<T>({ renderer, data, onMouseOver, onMouseOut, onClick, ...options }: CanvasMarkerPropsHanquf<T>): React.ReactPortal;

package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerHanquf.js

@@ -0,0 +1,413 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var MintMapProvider = require('../../provider/MintMapProvider.js');
+var MapDrawables = require('../../../types/MapDrawables.js');
+require('../../../types/MapTypes.js');
+require('../../../types/MapEventTypes.js');
+var reactDom = require('react-dom');
+var canvasUtil = require('./draw/canvas-util.js');
+var geohash = require('../../util/geohash.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function CanvasMarkerHanquf(_a) {
+  var renderer = _a.renderer,
+      data = _a.data,
+      onMouseOver = _a.onMouseOver,
+      onMouseOut = _a.onMouseOut,
+      onClick = _a.onClick,
+      options = tslib.__rest(_a, ["renderer", "data", "onMouseOver", "onMouseOut", "onClick"]); //controller
+
+
+  var controller = MintMapProvider.useMintMapController(); //element
+
+  var divRef = React.useRef(document.createElement('div'));
+  var divElement = divRef.current; //canvas container ref
+
+  var containerRef = React.useRef(null); //canvas ref
+
+  var canvasRef = React.useRef(null); //canvas context
+
+  var contextRef = React.useRef(); //marker
+
+  var markerRef = React.useRef(); // interaction states
+
+  var hoveredRef = React.useRef(null);
+  var clickedRef = React.useRef(null); // geohash index: hash -> items
+
+  var geoIndexRef = React.useRef(new Map());
+  var geoPrecisionRef = React.useRef(6); // drag translate state
+
+  var prevCenterOffsetRef = React.useRef(null);
+  var accumTranslateRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  var draggingRef = React.useRef(false); //create object
+
+  React.useEffect(function () {
+    divElement.style.width = 'fit-content';
+    divElement.style.pointerEvents = 'none';
+    return function () {
+      if (markerRef.current) {
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined;
+      }
+    };
+  }, []); //create / update object
+
+  React.useEffect(function () {
+    if (options) {
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = tslib.__assign({
+        position: bounds.nw
+      }, options);
+
+      if (markerRef.current) {
+        controller.updateMarker(markerRef.current, markerOptions);
+      } else {
+        markerRef.current = new MapDrawables.Marker(markerOptions);
+        markerRef.current.element = divElement;
+        controller.createMarker(markerRef.current); //disablePointerEvent 처리
+
+        if (divElement.parentElement) {
+          divElement.style.pointerEvents = 'none';
+          divElement.parentElement.style.pointerEvents = 'none';
+        } //z-index 처리
+
+
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        }
+      }
+    }
+  }, [options]);
+
+  var handleIdle = function () {
+    // 클리어
+    canvasUtil.clearRect(canvasRef.current, contextRef.current); // 표시 복구 (드래그/줌 중 숨김 처리 복원)
+
+    containerRef.current && (containerRef.current.style.visibility = ''); // 드래그 종료 처리: 변환 초기화 및 기준 위치 갱신
+
+    draggingRef.current = false;
+    prevCenterOffsetRef.current = null;
+    accumTranslateRef.current = {
+      x: 0,
+      y: 0
+    };
+
+    if (containerRef.current) {
+      containerRef.current.style.transform = '';
+    } // 마커 이동
+
+
+    var bounds = controller.getCurrBounds();
+
+    var markerOptions = tslib.__assign({
+      position: bounds.nw
+    }, options);
+
+    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링 (hover/click item last)
+
+    canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+  };
+
+  var handleZoomStart = function () {
+    containerRef.current && (containerRef.current.style.visibility = 'hidden');
+  };
+
+  var handleZoomEnd = function () {
+    containerRef.current && (containerRef.current.style.visibility = '');
+  }; //initialize
+
+
+  React.useEffect(function () {
+    var resizeObserver; // hover/out 공통 처리기 (mouse 좌표 기반)
+
+    var updateHoverByMouseXY = function (mouseX, mouseY) {
+      var hit = hitTest(mouseX, mouseY);
+
+      if ((hit === null || hit === void 0 ? void 0 : hit.item) !== hoveredRef.current) {
+        if (hoveredRef.current && onMouseOut) {
+          onMouseOut(hoveredRef.current);
+        }
+
+        hoveredRef.current = (hit === null || hit === void 0 ? void 0 : hit.item) || null;
+
+        if ((hit === null || hit === void 0 ? void 0 : hit.item) && onMouseOver) {
+          onMouseOver(hit.item);
+        }
+
+        canvasUtil.clearRect(canvasRef.current, contextRef.current);
+        canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+      }
+    };
+
+    var handleMouseLeave = function () {
+      console.log('handleMouseLeave');
+
+      if (hoveredRef.current && onMouseOut) {
+        onMouseOut(hoveredRef.current);
+      }
+
+      hoveredRef.current = null;
+      canvasUtil.clearRect(canvasRef.current, contextRef.current);
+      canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+    }; // 지도 이벤트 → 화면 좌표 변환
+
+
+    var parseEventToOffset = function (e) {
+      var mapType = controller.getMapType();
+      var latlng = (e === null || e === void 0 ? void 0 : e.latlng) || (e === null || e === void 0 ? void 0 : e.latLng);
+
+      if (!latlng) {
+        return null;
+      }
+
+      var pos = {
+        lat: 0,
+        lng: 0
+      }; //@ts-ignore
+
+      if (mapType === 'naver') {
+        pos.lat = latlng._lat;
+        pos.lng = latlng._lng; //@ts-ignore
+      } else if (mapType === 'google') {
+        pos.lat = latlng.lat();
+        pos.lng = latlng.lng(); //@ts-ignore
+      } else if (mapType === 'kakao') {
+        pos.lat = latlng.Ma;
+        pos.lng = latlng.La;
+      } else {
+        return null;
+      }
+
+      var offset = controller.positionToOffset(pos);
+      return offset;
+    };
+
+    var handleMapMouseMove = function (e) {
+      if (draggingRef.current) {
+        return;
+      }
+
+      var offset = parseEventToOffset(e);
+      if (!offset) return;
+      updateHoverByMouseXY(offset.x, offset.y);
+    };
+
+    var handleMapClick = function (e) {
+      console.log('handleClick');
+      var offset = parseEventToOffset(e);
+      if (!offset) return;
+      var hit = hitTest(offset.x, offset.y);
+
+      if (hit === null || hit === void 0 ? void 0 : hit.item) {
+        clickedRef.current = hit.item;
+        onClick && onClick(hit.item);
+        canvasUtil.clearRect(canvasRef.current, contextRef.current);
+        canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+      }
+    };
+
+    if (canvasRef.current && containerRef.current) {
+      // 리사이즈 처리
+      resizeObserver = new ResizeObserver(function () {
+        // 클리어
+        canvasUtil.clearRect(canvasRef.current, contextRef.current); // 스케일링
+
+        canvasRef.current && contextRef.current && canvasUtil.scaleCanvas(controller, canvasRef.current, contextRef.current); // 렌더링 (respect hover/click ordering)
+
+        canvasUtil.renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+      });
+      resizeObserver.observe(controller.mapDivElement); // IDLE 이벤트 등록
+
+      controller.addEventListener('IDLE', handleIdle); // 줌 처리
+
+      controller.addEventListener('ZOOMSTART', handleZoomStart);
+      controller.addEventListener('ZOOM_CHANGED', handleZoomEnd); // 2d 컨텍스트
+
+      contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
+
+      if (contextRef.current) {
+        canvasUtil.scaleCanvas(controller, canvasRef.current, contextRef.current);
+      } // 지도 이벤트 구독 (부모 pointer-events:none 이어도 동작)
+
+
+      var map = controller.getMap();
+
+      if (map) {
+        //@ts-ignore
+        map.addListener('mousemove', handleMapMouseMove); //@ts-ignore
+
+        map.addListener('click', handleMapClick); //@ts-ignore
+
+        map.addListener('center_changed', function () {
+          // 드래그 중에는 리렌더 대신 transform 으로만 추종
+          var center = controller.getCurrBounds().getCenter();
+          var curr = controller.positionToOffset(center);
+          var prev = prevCenterOffsetRef.current;
+
+          if (!prev) {
+            prevCenterOffsetRef.current = {
+              x: curr.x,
+              y: curr.y
+            };
+            draggingRef.current = true;
+            return;
+          }
+
+          var dx = prev.x - curr.x;
+          var dy = prev.y - curr.y;
+          accumTranslateRef.current = {
+            x: accumTranslateRef.current.x + dx,
+            y: accumTranslateRef.current.y + dy
+          };
+          prevCenterOffsetRef.current = {
+            x: curr.x,
+            y: curr.y
+          };
+          draggingRef.current = true;
+
+          if (containerRef.current) {
+            containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+          }
+        }); //@ts-ignore
+
+        map.addListener('idle', handleIdle);
+      } // 마우스가 지도 영역을 벗어나는 경우 처리
+
+
+      controller.mapDivElement.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+      controller.mapDivElement && controller.mapDivElement.removeEventListener('mouseleave', handleMouseLeave);
+      controller.removeEventListener('IDLE', handleIdle);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+    };
+  }, []); // data ref
+
+  var dataRef = React.useRef(data);
+  React.useEffect(function () {
+    dataRef.current = data; // rebuild geohash index
+
+    var map = new Map();
+    var precision = geoPrecisionRef.current;
+
+    for (var _i = 0, _a = data || []; _i < _a.length; _i++) {
+      var item = _a[_i];
+      var pos = item.position && item.position[0];
+      if (!pos) continue;
+      var hash = geohash.geohashEncode(pos.lat, pos.lng, precision);
+      var list = map.get(hash) || [];
+      list.push(item);
+      map.set(hash, list);
+    }
+
+    geoIndexRef.current = map;
+  }, [data]); // renderer ref
+
+  var rendererRef = React.useRef(renderer);
+  React.useEffect(function () {
+    rendererRef.current = renderer;
+  }, [renderer]); // Build ordered list so hovered/clicked items render last (on top) within this canvas layer
+
+  var buildOrderedData = function () {
+    var base = dataRef.current || [];
+    var result = [];
+    var hoverItem;
+    var clickItem;
+
+    for (var _i = 0, base_1 = base; _i < base_1.length; _i++) {
+      var item = base_1[_i];
+
+      if (clickedRef.current && item === clickedRef.current) {
+        clickItem = item;
+      } else if (hoveredRef.current && item === hoveredRef.current) {
+        hoverItem = item;
+      } else {
+        result.push(item);
+      }
+    }
+
+    if (hoverItem) result.push(hoverItem);
+    if (clickItem) result.push(clickItem);
+    return result;
+  }; // Geohash-accelerated hit-test
+
+
+  var hitTest = function (mouseX, mouseY) {
+    // convert mouse offset -> lat/lng then geohash it
+    var pos = controller.offsetToPosition({
+      x: mouseX,
+      y: mouseY
+    });
+    var precision = geoPrecisionRef.current;
+    var baseHash = geohash.geohashEncode(pos.lat, pos.lng, precision);
+    var buckets = geohash.geohashNeighbors(baseHash); // collect candidates from buckets (preserve ordering for top-most first)
+
+    var set = new Set();
+    var ordered = buildOrderedData();
+
+    for (var _i = 0, buckets_1 = buckets; _i < buckets_1.length; _i++) {
+      var b = buckets_1[_i];
+      var list = geoIndexRef.current.get(b);
+      if (!list) continue;
+
+      for (var _a = 0, list_1 = list; _a < list_1.length; _a++) {
+        var it = list_1[_a];
+        set.add(it);
+      }
+    } // iterate from top-most
+
+
+    for (var i = ordered.length - 1; i >= 0; i--) {
+      var item = ordered[i];
+      if (!set.has(item)) continue;
+      if (item.visible === false) continue;
+      var p = item.position && item.position[0];
+      if (!p) continue;
+      var off = controller.positionToOffset(p);
+      var r = Math.max(2, item.hitRadius || 20);
+      var dx = mouseX - off.x;
+      var dy = mouseY - off.y;
+
+      if (dx * dx + dy * dy <= r * r) {
+        return {
+          item: item
+        };
+      }
+    }
+
+    return null;
+  }; // Initial render
+
+
+  canvasUtil.renderMain(controller, renderer, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+  return reactDom.createPortal(React__default["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  }, React__default["default"].createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      pointerEvents: 'revert-layer'
+    }
+  })), divElement);
+}
+
+exports.CanvasMarkerHanquf = CanvasMarkerHanquf;

package/dist/components/mint-map/core/advanced/canvas/index.d.ts

@@ -1 +1,3 @@
 export * from './CanvasMarker';
+export * from './CanvasMarkerHanquf';
+export * from './CanvasMarkerClaude';

package/dist/components/mint-map/core/advanced/woongCanvas/ClusterMarker.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface Cluster {
+    buildingCnt: number;
+    lat: number;
+    lng: number;
+}
+export interface ClusterMarkerProps {
+    cluster: Cluster;
+}
+declare const ClusterMarker: ({ cluster }: ClusterMarkerProps) => JSX.Element;
+export default ClusterMarker;

package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { MarkerOptions } from "../../../types";
+import { CanvasMarkerData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "./shared";
+export { KonvaMarkerProvider, LRUCache, SpatialHashGrid } from "./shared";
+export type { CanvasMarkerOption, Paths, CanvasMarkerData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "./shared";
+/**
+ * WoongKonvaMarker 컴포넌트 Props
+ * @template T 마커 데이터의 추가 속성 타입
+ */
+export interface WoongKonvaMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
+    /** 렌더링할 마커 데이터 배열 */
+    markers: CanvasMarkerData<T>[];
+    /** 마커 클릭 시 호출되는 콜백 */
+    onClick?: (payload: CanvasMarkerData<T>, selectedIds: Set<string>) => void;
+    /** 마커에 마우스 오버 시 호출되는 콜백 */
+    onMouseOver?: (payload: CanvasMarkerData<T>) => void;
+    /** 마커에서 마우스 아웃 시 호출되는 콜백 */
+    onMouseOut?: (payload: CanvasMarkerData<T>) => void;
+    /** Base Layer 렌더링 함수 (필수) */
+    renderBase: CustomRenderBase<T>;
+    /** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
+    renderAnimation?: CustomRenderAnimation<T>;
+    /** Event Layer 렌더링 함수 (필수) */
+    renderEvent: CustomRenderEvent<T>;
+    /** 다중 선택 활성화 여부 (기본: false) */
+    enableMultiSelect?: boolean;
+    /** hover 시 마커를 최상단으로 표시 (기본: false) */
+    topOnHover?: boolean;
+    /** 뷰포트 컬링 활성화 여부 (기본: true) */
+    enableViewportCulling?: boolean;
+    /** 뷰포트 컬링 여유 공간 (기본: 100px) */
+    cullingMargin?: number;
+    /** LRU 캐시 최대 크기 (기본: 10000) */
+    maxCacheSize?: number;
+    /** 외부에서 제어하는 선택된 항목 배열 (선택) */
+    selectedItems?: CanvasMarkerData<T>[];
+}
+/**
+ * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
+ *
+ * 비교 전략:
+ * 1. markers 배열 비교
+ * 2. selectedItems 배열 비교 (외부 제어)
+ *
+ * 주의: JSON.stringify() 사용 금지! (매우 느림)
+ */
+declare const WoongKonvaMarker: <T>({ markers, onClick, onMouseOver, onMouseOut, renderBase, renderAnimation, renderEvent, enableMultiSelect, topOnHover, enableViewportCulling, cullingMargin, maxCacheSize, selectedItems: externalSelectedItems, ...options }: WoongKonvaMarkerProps<T>) => React.ReactPortal;
+export default WoongKonvaMarker;

package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { Offset } from "../../../../types";
+import { CanvasMarkerData } from "./types";
+/**
+ * 다중 WoongKonvaMarker 인스턴스를 관리하기 위한 Context
+ *
+ * 용도:
+ * - zIndex 기반 이벤트 우선순위 처리
+ * - 전역 클릭/호버 이벤트 조정
+ * - 여러 레이어 간 상호작용 관리
+ */
+export interface ComponentInstance<T> {
+    zIndex: number;
+    hitTest: (offset: Offset) => boolean;
+    onClick?: (payload: CanvasMarkerData<T>, selectedIds: Set<string>) => void;
+    onMouseOver?: (payload: CanvasMarkerData<T>) => void;
+    onMouseOut?: (payload: CanvasMarkerData<T>) => void;
+    findData: (offset: Offset) => CanvasMarkerData<T> | null;
+    setHovered: (data: CanvasMarkerData<T> | null) => void;
+    handleLocalClick: (data: CanvasMarkerData<T>) => void;
+    getSelectedIds: () => Set<string>;
+}
+interface KonvaMarkerContextValue {
+    registerComponent: <T>(instance: ComponentInstance<T>) => void;
+    unregisterComponent: <T>(instance: ComponentInstance<T>) => void;
+}
+export declare const KonvaMarkerProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useKonvaMarkerContext: () => KonvaMarkerContextValue | null;
+export {};

package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.js

@@ -0,0 +1,159 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var MintMapProvider = require('../../../provider/MintMapProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var KonvaMarkerContext = React.createContext(null);
+var KonvaMarkerProvider = function (_a) {
+  var children = _a.children;
+  var controller = MintMapProvider.useMintMapController(); // Refs
+
+  var componentsRef = React.useRef([]);
+  var currentHoveredRef = React.useRef(null);
+  var currentHoveredDataRef = React.useRef(null);
+  var draggingRef = React.useRef(false);
+  /**
+   * 컴포넌트 등록 (zIndex 내림차순 정렬)
+   * 높은 zIndex가 먼저 처리됨
+   */
+
+  var registerComponent = React.useCallback(function (instance) {
+    componentsRef.current.push(instance);
+    componentsRef.current.sort(function (a, b) {
+      return b.zIndex - a.zIndex;
+    });
+  }, []);
+  /**
+   * 컴포넌트 등록 해제
+   */
+
+  var unregisterComponent = React.useCallback(function (instance) {
+    // Hover 중이던 컴포넌트면 초기화
+    if (currentHoveredRef.current === instance) {
+      currentHoveredRef.current = null;
+      currentHoveredDataRef.current = null;
+    }
+
+    componentsRef.current = componentsRef.current.filter(function (c) {
+      return c !== instance;
+    });
+  }, []);
+  /**
+   * 전역 클릭 핸들러 (zIndex 우선순위)
+   */
+
+  var handleGlobalClick = React.useCallback(function (event) {
+    var _a;
+
+    if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
+    var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
+
+    for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
+      var component = _b[_i];
+      var data = component.findData(clickedOffset);
+
+      if (data) {
+        component.handleLocalClick(data);
+
+        if (component.onClick) {
+          component.onClick(data, component.getSelectedIds());
+        }
+
+        return; // 첫 번째 히트만 처리
+      }
+    }
+  }, [controller]);
+  /**
+   * 전역 마우스 이동 핸들러 (zIndex 우선순위)
+   */
+
+  var handleGlobalMouseMove = React.useCallback(function (event) {
+    var _a;
+
+    if (draggingRef.current || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
+    var mouseOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회하여 Hover 대상 찾기
+
+    var newHoveredComponent = null;
+    var newHoveredData = null;
+
+    for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
+      var component = _b[_i];
+      var data = component.findData(mouseOffset);
+
+      if (data) {
+        newHoveredComponent = component;
+        newHoveredData = data;
+        break; // 첫 번째 히트만 처리
+      }
+    } // Hover 상태 변경 감지 (최적화: 별도 ref로 직접 비교)
+
+
+    if (currentHoveredRef.current !== newHoveredComponent || currentHoveredDataRef.current !== newHoveredData) {
+      // 이전 hover 해제
+      if (currentHoveredRef.current) {
+        currentHoveredRef.current.setHovered(null);
+
+        if (currentHoveredRef.current.onMouseOut && currentHoveredDataRef.current) {
+          currentHoveredRef.current.onMouseOut(currentHoveredDataRef.current);
+        }
+      } // 새 hover 설정
+
+
+      if (newHoveredComponent && newHoveredData) {
+        newHoveredComponent.setHovered(newHoveredData);
+
+        if (newHoveredComponent.onMouseOver) {
+          newHoveredComponent.onMouseOver(newHoveredData);
+        }
+      }
+
+      currentHoveredRef.current = newHoveredComponent;
+      currentHoveredDataRef.current = newHoveredData;
+    }
+  }, [controller]);
+  /**
+   * 줌/드래그 시작 (마우스 이동 이벤트 무시)
+   */
+
+  var handleZoomStart = React.useCallback(function () {
+    draggingRef.current = true;
+  }, []);
+  /**
+   * 지도 idle (마우스 이동 이벤트 재개)
+   */
+
+  var handleIdle = React.useCallback(function () {
+    draggingRef.current = false;
+  }, []); // 이벤트 리스너 등록
+
+  React.useEffect(function () {
+    controller.addEventListener('CLICK', handleGlobalClick);
+    controller.addEventListener('MOUSEMOVE', handleGlobalMouseMove);
+    controller.addEventListener('ZOOMSTART', handleZoomStart);
+    controller.addEventListener('IDLE', handleIdle);
+    return function () {
+      controller.removeEventListener('CLICK', handleGlobalClick);
+      controller.removeEventListener('MOUSEMOVE', handleGlobalMouseMove);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('IDLE', handleIdle);
+    };
+  }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]); // Context value 메모이제이션
+
+  var contextValue = React.useMemo(function () {
+    return {
+      registerComponent: registerComponent,
+      unregisterComponent: unregisterComponent
+    };
+  }, [registerComponent, unregisterComponent]);
+  return React__default["default"].createElement(KonvaMarkerContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+exports.KonvaMarkerProvider = KonvaMarkerProvider;