@mint-ui/map 1.2.0-test.8 → 1.2.0

package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.js

@@ -0,0 +1,962 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var Konva = require('konva');
+var React = require('react');
+var reactDom = require('react-dom');
+var MapDrawables = require('../../../types/MapDrawables.js');
+require('../../../types/MapTypes.js');
+require('../../../types/MapEventTypes.js');
+var MintMapProvider = require('../../provider/MintMapProvider.js');
+var context = require('../shared/context.js');
+var helpers = require('../shared/helpers.js');
+var hooks = require('../shared/hooks.js');
+var performance = require('../shared/performance.js');
+var types = require('../shared/types.js');
+var utils = require('../shared/utils.js');
+var viewport = require('../shared/viewport.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CanvasMarkerLayer = function (props) {
+  // 타입 가드: renderEvent가 있는지 확인
+  var hasRenderEvent = 'renderEvent' in props && props.renderEvent !== undefined; // renderEvent가 있는 경우와 없는 경우를 구분하여 props 추출
+
+  var data = props.data,
+      _a = props.cullingMargin,
+      cullingMargin = _a === void 0 ? performance.DEFAULT_CULLING_MARGIN : _a,
+      onOptimizationDataUpdate = props.onOptimizationDataUpdate,
+      renderBase = props.renderBase,
+      options = tslib.__rest(props, ["data", "cullingMargin", "onOptimizationDataUpdate", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
+
+
+  var _b = hasRenderEvent && 'renderEvent' in props ? props : {
+    disableInteraction: false,
+    onClick: undefined,
+    onMouseOut: undefined,
+    onMouseOver: undefined,
+    renderEvent: undefined,
+    selectedItem: undefined,
+    selectedItems: undefined,
+    topStageZIndex: undefined
+  },
+      _c = _b.disableInteraction,
+      disableInteraction = _c === void 0 ? false : _c,
+      onClick = _b.onClick,
+      onMouseOut = _b.onMouseOut,
+      onMouseOver = _b.onMouseOver,
+      renderEvent = _b.renderEvent,
+      externalSelectedItem = _b.selectedItem,
+      externalSelectedItems = _b.selectedItems,
+      rawTopStageZIndex = _b.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
+
+
+  var topStageZIndex = rawTopStageZIndex;
+  var controller = MintMapProvider.useMintMapController();
+  var context$1 = context.useCanvasContext();
+  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
+
+  var divRef = React.useRef(document.createElement('div'));
+  var divElement = divRef.current;
+  var containerRef = React.useRef(null);
+  var markerRef = React.useRef(); // Top Layer용 별도 DOM Refs (topStageZIndex가 설정된 경우에만 사용)
+
+  var topDivRef = React.useRef(document.createElement('div'));
+  var topDivElement = topDivRef.current;
+  var topContainerRef = React.useRef(null);
+  var topMarkerRef = React.useRef(); // Konva Refs
+
+  var stageRef = React.useRef(null);
+  var baseLayerRef = React.useRef(null);
+  var eventLayerRef = React.useRef(null);
+  var topStageRef = React.useRef(null);
+  var topLayerRef = React.useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
+
+  var dataRef = React.useRef(data);
+  var disableInteractionRef = React.useRef(disableInteraction);
+  var hoveredItemRef = React.useRef(null);
+  var selectedItemRef = React.useRef(externalSelectedItem);
+  var selectedIdsRef = React.useRef(new Set());
+  var selectedItemsMapRef = React.useRef(new Map()); // 드래그 상태 Refs
+
+  var draggingRef = React.useRef(false);
+  var prevCenterOffsetRef = React.useRef(null);
+  var accumTranslateRef = React.useRef({
+    x: 0,
+    y: 0
+  }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
+
+  var dragStartHoveredItemRef = React.useRef(null); // 공유 캐시 사용 (모든 마커 레이어가 공유)
+
+  var sharedMarkerCache = context$1 === null || context$1 === void 0 ? void 0 : context$1.sharedMarkerCache;
+
+  if (!sharedMarkerCache) {
+    throw new Error('CanvasMarkerLayer must be used within CanvasProvider');
+  } // 성능 최적화 Refs
+
+
+  var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
+  var boundingBoxCacheRef = React.useRef(new Map());
+  var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
+
+  var updateViewport = function () {
+    viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
+  }; // 마커 좌표 변환 (위경도 → 화면 좌표, 공유 캐시 사용)
+
+
+  var getOrComputeMarkerOffset = function (markerData) {
+    var cached = sharedMarkerCache.get(markerData.id);
+    if (cached) return cached;
+    var result = utils.computeMarkerOffset(markerData, controller);
+    if (!result) return null;
+    sharedMarkerCache.set(markerData.id, result);
+    return result;
+  }; // 마커 바운딩 박스 계산 (Viewport Culling 및 Hit Test용, 오프셋 지원)
+
+
+  var computeBoundingBox = function (item) {
+    var offset = getOrComputeMarkerOffset(item);
+    if (!offset) return null;
+    var boxWidth = item.boxWidth || 50;
+    var boxHeight = item.boxHeight || 28;
+    var tailHeight = item.tailHeight || 0;
+    var offsetX = item.offsetX || 0;
+    var offsetY = item.offsetY || 0; // 오프셋을 적용한 마커 중심점 기준으로 바운딩 박스 계산
+
+    return {
+      maxX: offset.x + offsetX + boxWidth / 2,
+      maxY: offset.y + offsetY,
+      minX: offset.x + offsetX - boxWidth / 2,
+      minY: offset.y + offsetY - boxHeight - tailHeight
+    };
+  }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
+
+
+  var isInViewport = function (item) {
+    return viewport.isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
+  }; // 공간 인덱스 빌드 (빠른 Hit Test용)
+
+
+  var buildSpatialIndex = function () {
+    hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+  }; // 렌더링 유틸리티 객체
+
+
+  var renderUtils = {
+    getOrComputeMarkerOffset: getOrComputeMarkerOffset,
+    getOrComputePolygonOffsets: function () {
+      return null;
+    }
+  }; // Base Layer 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
+
+  var doRenderBase = function () {
+    var layer = baseLayerRef.current;
+    if (!layer) return;
+    var shape = layer.findOne('.base-render-shape');
+
+    if (!shape) {
+      shape = new Konva__default["default"].Shape({
+        hitStrokeWidth: 0,
+        listening: false,
+        name: 'base-render-shape',
+        perfectDrawEnabled: false,
+        sceneFunc: function (konvaContext) {
+          var ctx = konvaContext; // 뷰포트 컬링: 화면에 보이는 항목만 필터링 (항상 활성화)
+
+          var visibleItems = dataRef.current.filter(function (item) {
+            return isInViewport(item);
+          }); // Base Layer는 기본 마커만 렌더링 (hover된 항목도 포함)
+          // hover 스타일은 Event Layer와 Top Layer에서 덧그려짐
+
+          renderBase({
+            ctx: ctx,
+            hoveredItem: null,
+            items: visibleItems,
+            selectedIds: new Set(),
+            utils: renderUtils
+          });
+        }
+      });
+      layer.add(shape);
+    }
+
+    layer.batchDraw();
+  }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
+
+
+  var doRenderEvent = function () {
+    var layer = eventLayerRef.current;
+    if (!layer || !renderEvent) return;
+    var shape = layer.findOne('.event-render-shape');
+
+    if (!shape) {
+      shape = new Konva__default["default"].Shape({
+        hitStrokeWidth: 0,
+        listening: false,
+        name: 'event-render-shape',
+        perfectDrawEnabled: false,
+        sceneFunc: function (konvaContext) {
+          var ctx = konvaContext;
+          var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
+          var hovered = hoveredItemRef.current; // selectedItem이 있으면 selectedItems 배열에 포함 (renderMarkerEvent가 selectedItems만 사용하므로)
+
+          if (selectedItemRef.current) {
+            // selectedItem이 이미 selectedItems에 포함되어 있지 않으면 추가
+            var selectedItemId_1 = selectedItemRef.current.id;
+
+            if (!selectedItems.some(function (item) {
+              return item.id === selectedItemId_1;
+            })) {
+              selectedItems = tslib.__spreadArray(tslib.__spreadArray([], selectedItems, true), [selectedItemRef.current], false);
+            }
+          } // Event Layer는 hover 효과 및 선택 상태를 덧그림
+          // topStageZIndex가 있으면 hover된 항목은 Top Stage에서도 처리되지만,
+          // Event Layer에서도 hover 스타일을 덧그려서 Base Layer 위에 표시됨
+
+
+          renderEvent({
+            ctx: ctx,
+            hasTopStage: topStageZIndex !== undefined,
+            hoveredItem: hovered,
+            renderSource: types.RenderSource.EVENT,
+            selectedItem: selectedItemRef.current,
+            selectedItems: selectedItems,
+            utils: renderUtils
+          });
+        }
+      });
+      layer.add(shape);
+    }
+
+    layer.batchDraw();
+  }; // Top Layer 렌더링 (hover된 항목만, 별도 캔버스 DOM에 그리기)
+
+
+  var doRenderTop = function () {
+    var stage = topStageRef.current;
+    var layer = topLayerRef.current;
+    if (!stage || !layer || topStageZIndex === undefined) return;
+    var hovered = hoveredItemRef.current;
+    var shape = layer.findOne('.top-render-shape'); // hover된 항목이 없으면 shape 제거
+
+    if (!hovered) {
+      if (shape) {
+        shape.destroy();
+      }
+
+      layer.batchDraw();
+      return;
+    } // shape가 없으면 생성
+
+
+    if (!shape) {
+      shape = new Konva__default["default"].Shape({
+        hitStrokeWidth: 0,
+        listening: false,
+        name: 'top-render-shape',
+        perfectDrawEnabled: false,
+        sceneFunc: function () {} // 초기화만
+
+      });
+      layer.add(shape);
+    } // sceneFunc를 매번 업데이트하여 최신 상태 반영
+
+
+    shape.sceneFunc(function (konvaContext) {
+      var _a;
+
+      var ctx = konvaContext;
+      var currentHovered = hoveredItemRef.current; // hover된 항목이 없으면 아무것도 그리지 않음
+
+      if (!currentHovered) return; // 뷰포트 컬링 확인 (항상 활성화)
+
+      if (!isInViewport(currentHovered)) {
+        return;
+      }
+
+      var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current); // selectedItem이 있으면 hover된 항목이 선택되었는지 확인
+
+      var hoveredIsSelected = selectedItems.some(function (item) {
+        return item.id === currentHovered.id;
+      }) || ((_a = selectedItemRef.current) === null || _a === void 0 ? void 0 : _a.id) === currentHovered.id; // Top Layer에서는 hover된 마커만 hover 스타일로 그리기
+      // renderEvent가 있으면: base는 그리지 않고 event만 그리기 (hover 스타일 적용)
+      // renderEvent가 없으면: base를 hover 스타일로 그리기
+
+      if (renderEvent) {
+        // renderEvent가 있으면 hover 스타일로만 그리기
+        var hoverSelectedItems = hoveredIsSelected ? [currentHovered] : [];
+        renderEvent({
+          ctx: ctx,
+          hasTopStage: true,
+          hoveredItem: currentHovered,
+          renderSource: types.RenderSource.TOP,
+          selectedItem: selectedItemRef.current,
+          selectedItems: hoverSelectedItems,
+          utils: renderUtils
+        });
+      } else {
+        // renderEvent가 없으면 base를 hover 스타일로 그리기
+        renderBase({
+          ctx: ctx,
+          hoveredItem: currentHovered,
+          items: [currentHovered],
+          selectedIds: selectedIdsRef.current,
+          utils: renderUtils
+        });
+      }
+    });
+    layer.batchDraw();
+  }; // 최적화 데이터 업데이트 콜백 호출
+
+
+  var notifyOptimizationData = function () {
+    if (!onOptimizationDataUpdate) return; // 공유 캐시에서 마커 타입 항목만 필터링 (Offset 타입만)
+
+    var allCacheEntries = sharedMarkerCache.getAllEntries();
+    var cacheEntries = allCacheEntries.map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      return [key, value];
+    });
+    var spatialGridCells = spatialIndexRef.current.getAllCells();
+    onOptimizationDataUpdate({
+      cacheEntries: cacheEntries,
+      cacheSize: sharedMarkerCache.size(),
+      spatialGridCells: spatialGridCells
+    });
+  }; // 전체 즉시 렌더링
+
+
+  var renderAllImmediate = function () {
+    updateViewport();
+    buildSpatialIndex();
+    doRenderBase();
+    doRenderEvent(); // 메인 stage의 transform을 topStage에도 동기화
+
+    if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+      topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+    }
+
+    if (topStageZIndex !== undefined) {
+      doRenderTop();
+    } // 최적화 데이터 업데이트 콜백 호출
+
+
+    notifyOptimizationData();
+  }; // 지도 이벤트 핸들러 생성
+
+
+  var _d = hooks.createMapEventHandlers({
+    accumTranslateRef: accumTranslateRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    clearCache: function () {
+      return sharedMarkerCache.clear();
+    },
+    containerRef: containerRef,
+    controller: controller,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdleShared = _d.handleIdle,
+      handleZoomStart = _d.handleZoomStart,
+      handleZoomEnd = _d.handleZoomEnd,
+      handleCenterChangedShared = _d.handleCenterChanged,
+      handleDragStartShared = _d.handleDragStart,
+      handleDragEndShared = _d.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
+
+
+  var handleIdle = function () {
+    handleIdleShared(); // 드래그 완료 시 topStage의 transform도 제거 (메인 stage와 동기화)
+
+    if (topStageZIndex !== undefined && topContainerRef.current) {
+      topContainerRef.current.style.transform = '';
+    }
+  }; // handleCenterChanged 래핑: topStage transform 동기화 추가
+
+
+  var handleCenterChanged = function () {
+    handleCenterChangedShared(); // 드래그 중 메인 stage의 transform을 topStage에도 동기화 (반대 방향 이동 방지)
+
+    if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+      topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+    }
+  };
+
+  var handleDragStart = function () {
+    handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
+
+    dragStartHoveredItemRef.current = hoveredItemRef.current;
+    draggingRef.current = true;
+    controller.setMapCursor('grabbing'); // 메인 stage의 transform을 topStage에도 동기화
+
+    if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+      topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+    }
+  };
+
+  var handleDragEnd = function () {
+    handleDragEndShared();
+    draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
+
+    dragStartHoveredItemRef.current = null;
+    controller.setMapCursor('grab'); // 메인 stage의 transform을 topStage에도 동기화
+
+    if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+      topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+    }
+  }; // Hit Test: 특정 좌표의 마커 찾기
+
+
+  var findData = function (offset) {
+    // topStageZIndex가 설정되어 있으면 hover된 항목을 최우선으로 확인
+    if (topStageZIndex !== undefined && hoveredItemRef.current) {
+      var hovered = hoveredItemRef.current;
+
+      if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
+        return hovered;
+      }
+    } // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
+
+
+    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
+
+    for (var i = candidates.length - 1; i >= 0; i--) {
+      var item = candidates[i];
+
+      if (utils.isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
+        return item;
+      }
+    }
+
+    return null;
+  }; // Hover 상태 설정 및 렌더링
+
+
+  var setHovered = function (hoveredData) {
+    // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
+    if (draggingRef.current) {
+      return;
+    }
+
+    hoveredItemRef.current = hoveredData;
+
+    if (draggingRef.current) {
+      controller.setMapCursor('grabbing');
+    } else {
+      controller.setMapCursor(hoveredData ? 'pointer' : 'grab');
+    }
+
+    if (topStageZIndex !== undefined) {
+      // topStageZIndex가 설정된 경우 Top Layer에서 hover된 항목 렌더링
+      // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+      // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
+      doRenderEvent();
+      doRenderTop();
+    } else if (renderEvent) {
+      // renderEvent가 있을 때는 Event Layer만 업데이트
+      // topStageZIndex가 없으면 Base Layer는 정적이므로 재렌더링 불필요 (성능 우선)
+      // hover 효과는 Event Layer에서만 처리하면 됨
+      doRenderEvent();
+    }
+  }; // 클릭 처리: 선택 상태 업데이트 (단일 선택만 지원)
+
+
+  var handleLocalClick = function (clickedData) {
+    var newSelected = new Set();
+
+    if (!selectedIdsRef.current.has(clickedData.id)) {
+      newSelected.add(clickedData.id);
+      selectedItemsMapRef.current.clear();
+      selectedItemsMapRef.current.set(clickedData.id, clickedData); // externalSelectedItem이 있을 때를 대비해 selectedItemRef도 업데이트
+
+      selectedItemRef.current = clickedData;
+    } else {
+      selectedItemsMapRef.current.clear();
+      selectedItemRef.current = null;
+    }
+
+    selectedIdsRef.current = newSelected; // 선택 상태 변경은 Event Layer에서만 처리 (Base Layer는 정적이므로 재렌더링 불필요)
+
+    doRenderEvent();
+
+    if (topStageZIndex !== undefined) {
+      doRenderTop();
+    }
+  }; // 클릭 이벤트 핸들러
+
+
+  var handleClick = function (event) {
+    if (controller.isMapDragged()) return;
+    if (disableInteractionRef.current) return;
+    var clickedOffset = helpers.validateEvent(event, context$1, controller);
+    if (!clickedOffset) return;
+    var clickedData = findData(clickedOffset);
+    if (!clickedData) return;
+    handleLocalClick(clickedData);
+    onClick === null || onClick === void 0 ? void 0 : onClick(clickedData, selectedIdsRef.current);
+  }; // 마커 바운딩 박스의 왼쪽 상단과 우측 하단을 위도/경도로 변환
+
+
+  var getMarkerBoundingBoxCoordinates = function (item) {
+    if (!item.position) return null;
+    return utils.calculateMarkerBoundingBox({
+      controller: controller,
+      height: item.boxHeight || 28,
+      lat: item.position.lat,
+      lng: item.position.lng,
+      offsetX: item.offsetX || 0,
+      offsetY: item.offsetY || 0,
+      tailHeight: item.tailHeight || 0,
+      width: item.boxWidth || 50
+    });
+  }; // 마우스 이동 이벤트 핸들러 (hover 감지)
+
+
+  var handleMouseMove = function (event) {
+    if (disableInteractionRef.current) return; // 드래그 중에는 hover 상태를 업데이트하지 않음 (드래그 시작 시점의 hover 상태 유지)
+
+    if (draggingRef.current) return;
+    var mouseOffset = helpers.validateEvent(event, context$1, controller);
+    if (!mouseOffset) return;
+    var hoveredItem = findData(mouseOffset);
+    var prevHovered = hoveredItemRef.current;
+    if (prevHovered === hoveredItem) return;
+    setHovered(hoveredItem);
+    if (prevHovered) onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
+
+    if (hoveredItem) {
+      var boundingBox = getMarkerBoundingBoxCoordinates(hoveredItem); // boundingBox를 명시적으로 포함 (CanvasData<T>에 boundingBox 속성이 포함됨)
+
+      var payload = tslib.__assign(tslib.__assign({}, hoveredItem), {
+        boundingBox: boundingBox || undefined
+      });
+
+      onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(payload);
+    }
+  }; // 마우스가 맵 영역을 벗어날 때 hover 상태 초기화
+
+
+  var handleMouseLeave = function () {
+    if (disableInteractionRef.current) return;
+    var prevHovered = hoveredItemRef.current;
+    if (!prevHovered) return;
+    hoveredItemRef.current = null;
+    controller.setMapCursor('grab');
+
+    if (topStageZIndex !== undefined) {
+      // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+      // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
+      doRenderEvent();
+      doRenderTop();
+    } else if (renderEvent) {
+      // renderEvent가 있을 때는 Event Layer만 업데이트
+      // topStageZIndex가 없으면 Base Layer는 정적이므로 재렌더링 불필요 (성능 우선)
+      // hover 효과 제거는 Event Layer에서만 처리하면 됨
+      doRenderEvent();
+    }
+
+    onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
+  }; // DOM 초기화
+
+
+  React.useEffect(function () {
+    divElement.style.width = 'fit-content'; // Top Layer용 div도 초기화 (topStageZIndex가 설정된 경우)
+
+    if (topStageZIndex !== undefined) {
+      topDivElement.style.width = 'fit-content';
+    }
+
+    return function () {
+      if (!markerRef.current) return;
+      controller.clearDrawable(markerRef.current);
+      markerRef.current = undefined;
+    };
+  }, []); // 마커 생성/업데이트
+
+  React.useEffect(function () {
+    if (!options) return;
+    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);
+
+      if (divElement.parentElement) {
+        divElement.parentElement.style.pointerEvents = 'none';
+      }
+
+      if (options.zIndex !== undefined) {
+        controller.setMarkerZIndex(markerRef.current, options.zIndex);
+      }
+    }
+  }, [options]); // Konva 초기화 및 이벤트 리스너 등록
+
+  React.useEffect(function () {
+    var mapDiv = controller.mapDivElement;
+    var stage = new Konva__default["default"].Stage({
+      container: containerRef.current,
+      height: mapDiv.offsetHeight,
+      width: mapDiv.offsetWidth
+    });
+    stageRef.current = stage;
+    var baseLayer = new Konva__default["default"].Layer({
+      listening: false
+    });
+    var eventLayer = new Konva__default["default"].Layer({
+      listening: false
+    });
+    baseLayerRef.current = baseLayer;
+    eventLayerRef.current = eventLayer;
+    stage.add(baseLayer);
+    stage.add(eventLayer);
+    updateViewport(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+    var resizeRafId = null;
+    var resizeObserver = new ResizeObserver(function () {
+      if (resizeRafId !== null) {
+        cancelAnimationFrame(resizeRafId);
+      }
+
+      resizeRafId = requestAnimationFrame(function () {
+        stage.width(mapDiv.offsetWidth);
+        stage.height(mapDiv.offsetHeight);
+        sharedMarkerCache.clear();
+        boundingBoxCacheRef.current.clear();
+        updateViewport();
+        renderAllImmediate();
+        resizeRafId = null;
+      });
+    });
+    resizeObserver.observe(mapDiv);
+    controller.addEventListener('IDLE', handleIdle);
+    controller.addEventListener('ZOOMSTART', handleZoomStart);
+    controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
+    controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
+    controller.addEventListener('CLICK', handleClick);
+    controller.addEventListener('MOUSEMOVE', handleMouseMove);
+    controller.addEventListener('DRAGSTART', handleDragStart);
+    controller.addEventListener('DRAGEND', handleDragEnd);
+    mapDiv.addEventListener('mouseleave', handleMouseLeave);
+    renderAllImmediate(); // Context 사용 시 컴포넌트 등록
+
+    var componentInstance = null;
+
+    if (context$1) {
+      // context를 통한 onMouseOver 호출 시에도 boundingBox를 포함하도록 래핑
+      var wrappedOnMouseOver = onMouseOver ? function (payload) {
+        var boundingBox = getMarkerBoundingBoxCoordinates(payload); // boundingBox를 명시적으로 포함 (CanvasData<T>에 boundingBox 속성이 포함됨)
+
+        var enhancedPayload = tslib.__assign(tslib.__assign({}, payload), {
+          boundingBox: boundingBox || undefined
+        });
+
+        onMouseOver(enhancedPayload);
+      } : undefined;
+      componentInstance = {
+        findData: findData,
+        getSelectedIds: function () {
+          return selectedIdsRef.current;
+        },
+        handleLocalClick: handleLocalClick,
+        hitTest: function (offset) {
+          return findData(offset) !== null;
+        },
+        isInteractionDisabled: function () {
+          return disableInteractionRef.current;
+        },
+        onClick: onClick,
+        onMouseOut: onMouseOut,
+        onMouseOver: wrappedOnMouseOver,
+        setHovered: setHovered,
+        zIndex: currentZIndex
+      };
+      context$1.registerComponent(componentInstance);
+    }
+
+    return function () {
+      if (resizeRafId !== null) {
+        cancelAnimationFrame(resizeRafId);
+      }
+
+      resizeObserver.disconnect();
+      controller.removeEventListener('IDLE', handleIdle);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+      controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
+      controller.removeEventListener('CLICK', handleClick);
+      controller.removeEventListener('MOUSEMOVE', handleMouseMove);
+      controller.removeEventListener('DRAGSTART', handleDragStart);
+      controller.removeEventListener('DRAGEND', handleDragEnd);
+      mapDiv.removeEventListener('mouseleave', handleMouseLeave);
+
+      if (context$1 && componentInstance) {
+        context$1.unregisterComponent(componentInstance);
+      }
+
+      baseLayer.destroyChildren();
+      eventLayer.destroyChildren();
+      stage.destroy(); // 공유 캐시는 cleanup 시 clear하지 않음 (다른 레이어가 사용 중일 수 있음)
+
+      boundingBoxCacheRef.current.clear();
+      spatialIndexRef.current.clear();
+    };
+  }, []); // disableInteraction 동기화
+
+  React.useEffect(function () {
+    disableInteractionRef.current = disableInteraction;
+  }, [disableInteraction]); // Top Layer용 별도 캔버스 DOM 생성 (topStageZIndex가 설정된 경우)
+
+  React.useEffect(function () {
+    if (topStageZIndex === undefined) return;
+    if (!topContainerRef.current) return;
+    var mapDiv = controller.mapDivElement; // Top Layer용 div 요소 설정
+
+    topDivElement.style.width = 'fit-content';
+    var bounds = controller.getCurrBounds();
+
+    var topMarkerOptions = tslib.__assign({
+      position: bounds.nw,
+      zIndex: topStageZIndex
+    }, options); // Top Layer용 Marker 생성 (zIndex: topStageZIndex로 DOM 마커보다 위에 위치)
+
+
+    var topMarker = new MapDrawables.Marker(topMarkerOptions);
+    topMarker.element = topDivElement;
+    controller.createMarker(topMarker);
+    topMarkerRef.current = topMarker;
+
+    if (topDivElement.parentElement) {
+      topDivElement.parentElement.style.pointerEvents = 'none';
+    } // Top Layer Marker의 zIndex 명시적으로 설정
+
+
+    controller.setMarkerZIndex(topMarker, topStageZIndex); // Top Layer용 Konva Stage 생성
+
+    var topStage = new Konva__default["default"].Stage({
+      container: topContainerRef.current,
+      height: mapDiv.offsetHeight,
+      width: mapDiv.offsetWidth
+    });
+    topStageRef.current = topStage;
+    var topLayer = new Konva__default["default"].Layer({
+      listening: false
+    });
+    topLayerRef.current = topLayer;
+    topStage.add(topLayer); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+    var topResizeRafId = null;
+    var topResizeObserver = new ResizeObserver(function () {
+      if (topResizeRafId !== null) {
+        cancelAnimationFrame(topResizeRafId);
+      }
+
+      topResizeRafId = requestAnimationFrame(function () {
+        topStage.width(mapDiv.offsetWidth);
+        topStage.height(mapDiv.offsetHeight);
+        doRenderTop();
+        topResizeRafId = null;
+      });
+    });
+    topResizeObserver.observe(mapDiv); // topMarker position 업데이트 함수
+
+    var updateTopMarkerPosition = function () {
+      if (topMarkerRef.current && markerRef.current) {
+        var currentBounds = controller.getCurrBounds();
+
+        var updatedOptions = tslib.__assign(tslib.__assign({}, options), {
+          position: currentBounds.nw,
+          zIndex: topStageZIndex
+        });
+
+        controller.updateMarker(topMarkerRef.current, updatedOptions); // zIndex 명시적으로 설정
+
+        controller.setMarkerZIndex(topMarkerRef.current, topStageZIndex);
+      }
+    }; // 지도 이벤트 핸들러 등록 (topStage 업데이트용)
+
+
+    var handleTopIdle = function () {
+      // 드래그 완료 후 topMarker의 position을 메인 marker와 동일하게 업데이트
+      updateTopMarkerPosition(); // topStage 크기 업데이트
+
+      if (topStageRef.current) {
+        topStageRef.current.width(mapDiv.offsetWidth);
+        topStageRef.current.height(mapDiv.offsetHeight);
+      } // 드래그 완료 후 transform은 handleIdle에서 제거되므로 여기서는 동기화만
+      // (handleIdle이 먼저 실행되어 transform을 제거한 후, 여기서 position 업데이트)
+
+
+      if (topContainerRef.current && containerRef.current) {
+        topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+      }
+
+      doRenderTop();
+    };
+
+    var handleTopZoomStart = function () {
+      // 메인 stage의 transform을 topStage에도 동기화
+      if (topContainerRef.current && containerRef.current) {
+        topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+      }
+
+      doRenderTop();
+    };
+
+    var handleTopZoomEnd = function () {
+      // 메인 stage의 transform을 topStage에도 동기화
+      if (topContainerRef.current && containerRef.current) {
+        topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+      }
+
+      doRenderTop();
+    };
+
+    var handleTopCenterChanged = function () {
+      // 드래그 중에는 transform만 동기화 (position 업데이트는 드래그 완료 후에만)
+      // 드래그 중에 position을 업데이트하면 transform과 충돌하여 반대 방향으로 이동하는 버그 발생
+      if (!draggingRef.current) {
+        // 드래그가 아닐 때만 topMarker의 position을 업데이트
+        updateTopMarkerPosition();
+      } // topStage 크기 업데이트
+
+
+      if (topStageRef.current) {
+        topStageRef.current.width(mapDiv.offsetWidth);
+        topStageRef.current.height(mapDiv.offsetHeight);
+      } // 메인 stage의 transform을 topStage에도 동기화 (드래그 중 필수)
+
+
+      if (topContainerRef.current && containerRef.current) {
+        topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+      }
+
+      doRenderTop();
+    };
+
+    controller.addEventListener('IDLE', handleTopIdle);
+    controller.addEventListener('ZOOMSTART', handleTopZoomStart);
+    controller.addEventListener('ZOOM_CHANGED', handleTopZoomEnd);
+    controller.addEventListener('CENTER_CHANGED', handleTopCenterChanged);
+    doRenderTop();
+    return function () {
+      if (topResizeRafId !== null) {
+        cancelAnimationFrame(topResizeRafId);
+      }
+
+      topResizeObserver.disconnect();
+      controller.removeEventListener('IDLE', handleTopIdle);
+      controller.removeEventListener('ZOOMSTART', handleTopZoomStart);
+      controller.removeEventListener('ZOOM_CHANGED', handleTopZoomEnd);
+      controller.removeEventListener('CENTER_CHANGED', handleTopCenterChanged);
+
+      if (topLayerRef.current) {
+        topLayerRef.current.destroyChildren();
+      }
+
+      if (topStageRef.current) {
+        topStageRef.current.destroy();
+      }
+
+      if (topMarkerRef.current) {
+        controller.clearDrawable(topMarkerRef.current);
+        topMarkerRef.current = undefined;
+      }
+    };
+  }, [topStageZIndex, renderEvent, options]); // 외부 selectedItems 동기화
+
+  React.useEffect(function () {
+    if (!stageRef.current) return; // externalSelectedItems가 있으면 selectedItem은 무시 (공존 불가)
+
+    if (externalSelectedItems !== undefined) {
+      selectedItemRef.current = undefined;
+      hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
+    } // 선택 상태 변경은 Event Layer에서만 처리 (Base Layer는 정적이므로 재렌더링 불필요)
+
+
+    doRenderEvent();
+
+    if (topStageZIndex !== undefined) {
+      doRenderTop();
+    }
+  }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
+
+  React.useEffect(function () {
+    if (!stageRef.current) return; // externalSelectedItem이 있으면 selectedItems는 무시 (공존 불가)
+
+    if (externalSelectedItem !== undefined) {
+      selectedIdsRef.current.clear();
+      selectedItemsMapRef.current.clear();
+      selectedItemRef.current = externalSelectedItem;
+    } else if (externalSelectedItems === undefined) {
+      // 둘 다 없으면 selectedItemRef만 업데이트 (내부 클릭으로 선택한 항목은 유지)
+      selectedItemRef.current = externalSelectedItem;
+    }
+
+    doRenderEvent();
+
+    if (topStageZIndex !== undefined) {
+      doRenderTop();
+    }
+  }, [externalSelectedItem, externalSelectedItems]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
+
+  React.useEffect(function () {
+    if (!stageRef.current) return;
+    dataRef.current = data;
+
+    if (containerRef.current) {
+      containerRef.current.style.transform = '';
+    }
+
+    prevCenterOffsetRef.current = null;
+    accumTranslateRef.current = {
+      x: 0,
+      y: 0
+    };
+    sharedMarkerCache.clear();
+    boundingBoxCacheRef.current.clear();
+    selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
+    renderAllImmediate();
+  }, [data]);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, reactDom.createPortal(React__default["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      height: '100%',
+      position: 'absolute',
+      width: '100%'
+    }
+  }), divElement), topStageZIndex !== undefined && reactDom.createPortal(React__default["default"].createElement("div", {
+    ref: topContainerRef,
+    style: {
+      height: '100%',
+      position: 'absolute',
+      width: '100%'
+    }
+  }), topDivElement));
+};
+
+exports.CanvasProvider = context.CanvasProvider;
+exports.QueueCache = performance.QueueCache;
+exports.SpatialHashGrid = performance.SpatialHashGrid;
+Object.defineProperty(exports, 'CanvasDataType', {
+    enumerable: true,
+    get: function () { return types.CanvasDataType; }
+});
+Object.defineProperty(exports, 'RenderSource', {
+    enumerable: true,
+    get: function () { return types.RenderSource; }
+});
+exports["default"] = CanvasMarkerLayer;