@mint-ui/map 1.2.0-test.5 → 1.2.0-test.51

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

@@ -1,1065 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var Konva = require('konva');
-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 types = require('./shared/types.js');
-var utils = require('./shared/utils.js');
-var context = require('./shared/context.js');
-var performance = require('./shared/performance.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
-
-// 메인 컴포넌트
-// ============================================================================
-
-/**
- * Konva 기반 고성능 마커/폴리곤 렌더링 컴포넌트
- *
- * 특징:
- * - Base/Event 레이어 분리로 성능 최적화
- * - LRU 캐시로 좌표 변환 결과 캐싱
- * - Spatial Hash Grid로 빠른 Hit Test
- * - Viewport Culling으로 보이는 영역만 렌더링
- *
- * @template T 마커 데이터의 추가 속성 타입
- */
-
-var WoongKonvaMarkerComponent = function (_a) {
-  var markers = _a.markers,
-      dataType = _a.dataType,
-      onClick = _a.onClick,
-      onMouseOver = _a.onMouseOver,
-      onMouseOut = _a.onMouseOut,
-      renderBase = _a.renderBase,
-      renderAnimation = _a.renderAnimation,
-      renderEvent = _a.renderEvent,
-      _b = _a.enableMultiSelect,
-      enableMultiSelect = _b === void 0 ? false : _b,
-      _c = _a.topOnHover,
-      topOnHover = _c === void 0 ? false : _c,
-      _d = _a.enableViewportCulling,
-      enableViewportCulling = _d === void 0 ? true : _d,
-      _e = _a.cullingMargin,
-      cullingMargin = _e === void 0 ? performance.DEFAULT_CULLING_MARGIN : _e,
-      _f = _a.maxCacheSize,
-      maxCacheSize = _f === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _f,
-      externalSelectedItems = _a.selectedItems,
-      options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems"]); // --------------------------------------------------------------------------
-  // Hooks & Context
-  // --------------------------------------------------------------------------
-
-
-  var controller = MintMapProvider.useMintMapController();
-  var context$1 = context.useKonvaMarkerContext();
-  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(); // --------------------------------------------------------------------------
-  // Konva Refs
-  // --------------------------------------------------------------------------
-
-  var stageRef = React.useRef(null);
-  var baseLayerRef = React.useRef(null);
-  var animationLayerRef = React.useRef(null);
-  var eventLayerRef = React.useRef(null); // --------------------------------------------------------------------------
-  // Data Refs - 선택 및 Hover 상태 관리
-  // --------------------------------------------------------------------------
-
-  /** markers prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
-
-  var markersRef = React.useRef(markers); // --------------------------------------------------------------------------
-  // State Refs - 선택 및 Hover 상태 관리
-  // --------------------------------------------------------------------------
-
-  /** 현재 Hover 중인 항목 */
-
-  var hoveredItemRef = React.useRef(null);
-  /** 마지막으로 클릭된 항목 */
-
-  var lastClickedItemRef = React.useRef(null);
-  /**
-   * 선택된 항목의 ID Set
-   *
-   * 용도:
-   * 1. onClick 콜백에 전달 - onClick(data, selectedIdsRef.current)
-   * 2. 선택 여부 빠른 체크 - selectedIdsRef.current.has(id)
-   * 3. 메모리 효율 - ID만 저장 (작음)
-   *
-   * selectedItemsMapRef와 차이:
-   * - selectedIdsRef: ID만 저장 { "id1", "id2" }
-   * - selectedItemsMapRef: 전체 객체 저장 { id1: {...}, id2: {...} }
-   *
-   * 둘 다 필요: ID만 필요한 곳은 이것, 전체 데이터 필요한 곳은 Map
-   */
-
-  var selectedIdsRef = React.useRef(new Set());
-  /**
-   * 선택된 항목의 실제 데이터 Map (핵심 성능 최적화!)
-   *
-   * 목적: doRenderEvent에서 filter() 순회 제거
-   * - 이전: markersRef.current.filter() → O(전체 마커 수)
-   * - 현재: Map.values() → O(선택된 항목 수)
-   *
-   * 성능 개선: 10,000개 중 1개 선택 시
-   * - 이전: 10,000번 체크
-   * - 현재: 1번 접근 (10,000배 빠름!)
-   */
-
-  var selectedItemsMapRef = React.useRef(new Map()); // --------------------------------------------------------------------------
-  // Drag Refs
-  // --------------------------------------------------------------------------
-
-  var draggingRef = React.useRef(false);
-  var prevCenterOffsetRef = React.useRef(null);
-  var accumTranslateRef = React.useRef({
-    x: 0,
-    y: 0
-  }); // --------------------------------------------------------------------------
-  // Performance Refs (캐싱 & 최적화)
-  // --------------------------------------------------------------------------
-
-  /** 좌표 변환 결과 LRU 캐시 */
-
-  var offsetCacheRef = React.useRef(new performance.LRUCache(maxCacheSize));
-  /** 공간 인덱스 (빠른 Hit Test) */
-
-  var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
-  /** 바운딩 박스 캐시 (Viewport Culling 최적화) */
-
-  var boundingBoxCacheRef = React.useRef(new Map());
-  /** 뷰포트 경계 캐시 (Viewport Culling) */
-
-  var viewportRef = React.useRef(null); // --------------------------------------------------------------------------
-  // 유틸리티 함수: 뷰포트 관리
-  // --------------------------------------------------------------------------
-
-  /**
-   * 현재 뷰포트 영역 계산
-   */
-
-  var updateViewport = function () {
-    if (!stageRef.current) return;
-    var stage = stageRef.current;
-    viewportRef.current = {
-      minX: -cullingMargin,
-      maxX: stage.width() + cullingMargin,
-      minY: -cullingMargin,
-      maxY: stage.height() + cullingMargin
-    };
-  };
-  /**
-   * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
-   */
-
-
-  var isInViewport = function (item) {
-    if (!enableViewportCulling || !viewportRef.current) return true;
-    var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
-
-    var bbox = boundingBoxCacheRef.current.get(item.id);
-
-    if (!bbox) {
-      // 폴리곤인 경우
-      if (dataType === types.CanvasDataType.POLYGON) {
-        var offsets = getOrComputePolygonOffsets(item);
-        if (!offsets) return false; // 바운딩 박스 계산 (최적화: 직접 비교)
-
-        var minX = Infinity,
-            minY = Infinity,
-            maxX = -Infinity,
-            maxY = -Infinity;
-
-        for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
-          var multiPolygon = offsets_1[_i];
-
-          for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
-            var polygonGroup = multiPolygon_1[_a];
-
-            for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
-              var _c = polygonGroup_1[_b],
-                  x = _c[0],
-                  y = _c[1];
-              if (x < minX) minX = x;
-              if (y < minY) minY = y;
-              if (x > maxX) maxX = x;
-              if (y > maxY) maxY = y;
-            }
-          }
-        }
-
-        bbox = {
-          minX: minX,
-          minY: minY,
-          maxX: maxX,
-          maxY: maxY
-        };
-        boundingBoxCacheRef.current.set(item.id, bbox);
-      } // 마커인 경우
-      else {
-        var offset = getOrComputeMarkerOffset(item);
-        if (!offset) return false;
-        var boxWidth = item.boxWidth || 50;
-        var boxHeight = item.boxHeight || 28;
-        bbox = {
-          minX: offset.x - boxWidth / 2,
-          minY: offset.y - boxHeight - 6,
-          maxX: offset.x + boxWidth / 2,
-          maxY: offset.y
-        };
-        boundingBoxCacheRef.current.set(item.id, bbox);
-      }
-    } // 바운딩 박스와 viewport 교차 체크
-
-
-    return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 좌표 변환 캐싱
-  // --------------------------------------------------------------------------
-
-  /**
-   * 폴리곤 좌표 변환 결과를 캐시하고 반환
-   * @param polygonData 폴리곤 데이터
-   * @returns 변환된 좌표 배열 또는 null
-   */
-
-
-  var getOrComputePolygonOffsets = function (polygonData) {
-    var cached = offsetCacheRef.current.get(polygonData.id);
-    if (cached && Array.isArray(cached)) return cached;
-    var result = utils.computePolygonOffsets(polygonData, controller);
-
-    if (result) {
-      offsetCacheRef.current.set(polygonData.id, result);
-    }
-
-    return result;
-  };
-  /**
-   * 마커 좌표 변환 결과를 캐시하고 반환
-   * @param markerData 마커 데이터
-   * @returns 변환된 좌표 또는 null
-   */
-
-
-  var getOrComputeMarkerOffset = function (markerData) {
-    var cached = offsetCacheRef.current.get(markerData.id);
-    if (cached && !Array.isArray(cached)) return cached;
-    var result = utils.computeMarkerOffset(markerData, controller);
-
-    if (result) {
-      offsetCacheRef.current.set(markerData.id, result);
-    }
-
-    return result;
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 공간 인덱싱
-  // --------------------------------------------------------------------------
-
-  /**
-   * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
-   */
-
-
-  var buildSpatialIndex = function () {
-    var spatial = spatialIndexRef.current;
-    spatial.clear();
-    var currentMarkers = markersRef.current;
-
-    for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-      var item = currentMarkers_1[_i];
-
-      if (dataType === types.CanvasDataType.POLYGON) {
-        // 폴리곤: 바운딩 박스 계산 (최적화: 직접 비교)
-        var offsets = getOrComputePolygonOffsets(item);
-
-        if (offsets) {
-          var minX = Infinity,
-              minY = Infinity,
-              maxX = -Infinity,
-              maxY = -Infinity;
-
-          for (var _a = 0, offsets_2 = offsets; _a < offsets_2.length; _a++) {
-            var multiPolygon = offsets_2[_a];
-
-            for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
-              var polygonGroup = multiPolygon_2[_b];
-
-              for (var _c = 0, polygonGroup_2 = polygonGroup; _c < polygonGroup_2.length; _c++) {
-                var _d = polygonGroup_2[_c],
-                    x = _d[0],
-                    y = _d[1];
-                if (x < minX) minX = x;
-                if (y < minY) minY = y;
-                if (x > maxX) maxX = x;
-                if (y > maxY) maxY = y;
-              }
-            }
-          }
-
-          spatial.insert(item, minX, minY, maxX, maxY);
-        }
-      } else {
-        // 마커: 점 기반 바운딩 박스
-        var offset = getOrComputeMarkerOffset(item);
-
-        if (offset) {
-          var boxWidth = item.boxWidth || 50;
-          var boxHeight = item.boxHeight || 28;
-          var tailHeight = 6;
-          var minX = offset.x - boxWidth / 2;
-          var minY = offset.y - boxHeight - tailHeight;
-          var maxX = offset.x + boxWidth / 2;
-          var maxY = offset.y;
-          spatial.insert(item, minX, minY, maxX, maxY);
-        }
-      }
-    }
-  }; // --------------------------------------------------------------------------
-  // 렌더링 함수
-  // --------------------------------------------------------------------------
-
-  /**
-   * 외부 렌더링 함수에 전달할 유틸리티 객체
-   */
-
-
-  var renderUtils = {
-    getOrComputePolygonOffsets: getOrComputePolygonOffsets,
-    getOrComputeMarkerOffset: getOrComputeMarkerOffset
-  };
-  /** Base Layer에서 사용할 빈 Set (재사용) */
-
-  React.useRef(new Set());
-  /**
-   * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
-   *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
-   */
-
-  var doRenderBase = function () {
-    var layer = baseLayerRef.current;
-    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
-
-    var shape = layer.findOne('.base-render-shape');
-
-    if (!shape) {
-      // 최초 생성 (한 번만 실행됨)
-      // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
-      shape = new Konva__default["default"].Shape({
-        name: 'base-render-shape',
-        sceneFunc: function (context, shape) {
-          var ctx = context; // 클로저로 최신 ref 값 참조
-
-          var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
-            return isInViewport(item);
-          }) : markersRef.current;
-          renderBase({
-            ctx: ctx,
-            items: visibleMarkers,
-            selectedIds: selectedIdsRef.current,
-            utils: renderUtils
-          });
-        },
-        perfectDrawEnabled: false,
-        listening: false,
-        hitStrokeWidth: 0
-      });
-      layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
-
-    layer.batchDraw();
-  };
-  /**
-   * Animation 레이어 렌더링 (선택된 마커 애니메이션)
-   *
-   * 🔥 최적화: sceneFunc 내부에서 최신 items 참조
-   * - 선택 변경 시에만 재생성
-   * - 지도 이동 시에는 기존 Animation 계속 실행
-   */
-
-
-  var doRenderAnimation = function () {
-    if (!renderAnimation) return;
-    var layer = animationLayerRef.current;
-    if (!layer) return;
-    renderAnimation({
-      layer: layer,
-      selectedIds: selectedIdsRef.current,
-      items: markersRef.current,
-      utils: renderUtils
-    });
-  };
-  /**
-   * Event 레이어 렌더링 (hover + 선택 상태 표시)
-   *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
-   */
-
-
-  var doRenderEvent = function () {
-    if (!renderEvent) return;
-    var layer = eventLayerRef.current;
-    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
-
-    var shape = layer.findOne('.event-render-shape');
-
-    if (!shape) {
-      // 최초 생성 (한 번만 실행됨)
-      // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
-      shape = new Konva__default["default"].Shape({
-        name: 'event-render-shape',
-        sceneFunc: function (context, shape) {
-          var ctx = context; // 클로저로 최신 ref 값 참조
-
-          var selectedItems = Array.from(selectedItemsMapRef.current.values());
-          renderEvent({
-            ctx: ctx,
-            hoveredItem: hoveredItemRef.current,
-            utils: renderUtils,
-            selectedItems: selectedItems,
-            lastClickedItem: lastClickedItemRef.current
-          });
-        },
-        perfectDrawEnabled: false,
-        listening: false,
-        hitStrokeWidth: 0
-      });
-      layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
-
-    layer.batchDraw();
-  };
-  /**
-   * 전체 즉시 렌더링 (IDLE 시 호출)
-   */
-
-
-  var renderAllImmediate = function () {
-    updateViewport();
-    buildSpatialIndex();
-    doRenderBase();
-    doRenderAnimation();
-    doRenderEvent();
-  }; // --------------------------------------------------------------------------
-  // 이벤트 핸들러: 지도 이벤트
-  // --------------------------------------------------------------------------
-
-  /**
-   * 지도 이동/줌 완료 시 처리
-   */
-
-
-  var handleIdle = function () {
-    prevCenterOffsetRef.current = null;
-    accumTranslateRef.current = {
-      x: 0,
-      y: 0
-    }; // 2. 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
-
-    offsetCacheRef.current.clear();
-    boundingBoxCacheRef.current.clear(); // 3. 마커 위치 업데이트
-
-    var bounds = controller.getCurrBounds();
-
-    var markerOptions = tslib.__assign({
-      position: bounds.nw
-    }, options);
-
-    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 4. transform 제거 전에 새 데이터로 즉시 렌더링 (겹침 방지)
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = '';
-      containerRef.current.style.visibility = '';
-    } // 5. 새 위치에서 렌더링
-
-
-    renderAllImmediate();
-  };
-  /**
-   * 줌 시작 시 처리 (일시적으로 숨김)
-   */
-
-
-  var handleZoomStart = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = 'hidden';
-    }
-  };
-  /**
-   * 줌 종료 시 처리 (다시 표시)
-   */
-
-
-  var handleZoomEnd = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = '';
-    }
-  };
-  /**
-   * 지도 중심 변경 시 처리 (transform으로 이동 추적)
-   */
-
-
-  var handleCenterChanged = function () {
-    var center = controller.getCurrBounds().getCenter();
-    var curr = controller.positionToOffset(center);
-    var prev = prevCenterOffsetRef.current;
-
-    if (!prev) {
-      prevCenterOffsetRef.current = {
-        x: curr.x,
-        y: curr.y
-      };
-      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
-    };
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
-    }
-  }; // --------------------------------------------------------------------------
-  // Hit Test & 상태 관리
-  // --------------------------------------------------------------------------
-
-  /**
-   * 특정 좌표의 마커/폴리곤 데이터 찾기 (Spatial Index 사용)
-   *
-   * topOnHover가 true일 때:
-   * - 현재 hover된 항목을 최우선으로 체크
-   * - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
-   *
-   * @param offset 검사할 좌표
-   * @returns 찾은 마커/폴리곤 데이터 또는 null
-   */
-
-
-  var findData = function (offset) {
-    // topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
-    if (topOnHover && hoveredItemRef.current) {
-      var hovered = hoveredItemRef.current; // 폴리곤인 경우
-
-      if (dataType === types.CanvasDataType.POLYGON) {
-        if (utils.isPointInPolygonData(offset, hovered, getOrComputePolygonOffsets)) {
-          return hovered; // 여전히 hover된 항목 위에 있음
-        }
-      } // 마커인 경우
-      else {
-        if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
-          return hovered; // 여전히 hover된 항목 위에 있음
-        }
-      }
-    } // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
-
-
-    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 데이터 타입에 따라 적절한 히트 테스트 수행
-
-    if (dataType === types.CanvasDataType.MARKER) {
-      // 마커 체크
-      for (var i = candidates.length - 1; i >= 0; i--) {
-        var item = candidates[i];
-
-        if (utils.isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
-          return item;
-        }
-      }
-    } else {
-      // 폴리곤 체크
-      for (var i = candidates.length - 1; i >= 0; i--) {
-        var item = candidates[i];
-
-        if (utils.isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
-          return item;
-        }
-      }
-    }
-
-    return null;
-  };
-  /**
-   * Hover 상태 설정 및 Event 레이어 렌더링
-   *
-   * @param data hover된 마커/폴리곤 데이터 또는 null
-   *
-   * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-   * topOnHover가 true일 때는 Base 레이어도 다시 그려서 z-order 변경
-   */
-
-
-  var setHovered = function (data) {
-    hoveredItemRef.current = data;
-
-    if (draggingRef.current) {
-      controller.setMapCursor('grabbing');
-    } else {
-      controller.setMapCursor(data ? 'pointer' : 'grab');
-    } // 즉시 렌더링 (RAF 없이)
-    // topOnHover는 Event Layer에서만 처리 (Base Layer 재렌더링 제거로 성능 향상)
-
-
-    doRenderEvent();
-  };
-  /**
-   * 클릭 처리 (단일/다중 선택)
-   *
-   * @param data 클릭된 마커/폴리곤 데이터
-   *
-   * 🔥 최적화: 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
-   * - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
-   * - 객체 생성 오버헤드 제거로 1000개 이상도 부드럽게 처리
-   */
-
-
-  var handleLocalClick = function (data) {
-    // 0. 마지막 클릭 항목 저장
-    lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
-
-    if (enableMultiSelect) {
-      // 다중 선택: Set과 Map 동시 업데이트
-      var newSelected = new Set(selectedIdsRef.current);
-
-      if (newSelected.has(data.id)) {
-        newSelected.delete(data.id);
-        selectedItemsMapRef.current.delete(data.id);
-      } else {
-        newSelected.add(data.id);
-        selectedItemsMapRef.current.set(data.id, data);
-      }
-
-      selectedIdsRef.current = newSelected;
-    } else {
-      // 단일 선택: 토글
-      var newSelected = new Set();
-
-      if (!selectedIdsRef.current.has(data.id)) {
-        newSelected.add(data.id);
-        selectedItemsMapRef.current.clear();
-        selectedItemsMapRef.current.set(data.id, data);
-      } else {
-        selectedItemsMapRef.current.clear();
-      }
-
-      selectedIdsRef.current = newSelected;
-    }
-
-    if (!!renderAnimation) {
-      // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
-      doRenderBase(); // 3. Animation Layer 렌더링 (선택된 마커 애니메이션)
-
-      doRenderAnimation();
-    } // 4. Event Layer 렌더링 (hover 처리)
-
-
-    doRenderEvent();
-  }; // --------------------------------------------------------------------------
-  // 이벤트 핸들러: UI 이벤트
-  // --------------------------------------------------------------------------
-
-  /**
-   * 클릭 이벤트 처리
-   */
-
-
-  var handleClick = function (event) {
-    var _a;
-
-    if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-    try {
-      var clickedOffset = controller.positionToOffset(event.param.position);
-      var data = findData(clickedOffset);
-
-      if (data) {
-        handleLocalClick(data);
-        if (onClick) onClick(data, selectedIdsRef.current);
-      }
-    } catch (error) {
-      console.error('[WoongKonvaMarker] handleClick error:', error);
-    }
-  };
-  /**
-   * 마우스 이동 이벤트 처리 (hover 감지)
-   */
-
-
-  var handleMouseMove = function (event) {
-    var _a;
-
-    if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-    try {
-      var mouseOffset = controller.positionToOffset(event.param.position);
-      var hoveredItem = findData(mouseOffset);
-      var prevHovered = hoveredItemRef.current;
-
-      if (prevHovered !== hoveredItem) {
-        setHovered(hoveredItem);
-        if (prevHovered && onMouseOut) onMouseOut(prevHovered);
-        if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
-      }
-    } catch (error) {
-      console.error('[WoongKonvaMarker] handleMouseMove error:', error);
-    }
-  };
-  /**
-   * 드래그 시작 처리 (커서를 grabbing으로 변경)
-   */
-
-
-  var handleDragStart = function () {
-    draggingRef.current = true;
-    controller.setMapCursor('grabbing');
-  };
-  /**
-   * 드래그 종료 처리 (커서를 기본으로 복원)
-   */
-
-
-  var handleDragEnd = function () {
-    draggingRef.current = false;
-    controller.setMapCursor('grab');
-  };
-  /**
-   * 마우스가 canvas를 벗어날 때 hover cleanup
-   */
-
-
-  var handleMouseLeave = function () {
-    var prevHovered = hoveredItemRef.current;
-
-    if (prevHovered) {
-      hoveredItemRef.current = null;
-      controller.setMapCursor('grab');
-      doRenderEvent();
-
-      if (onMouseOut) {
-        onMouseOut(prevHovered);
-      }
-    }
-  }; // --------------------------------------------------------------------------
-  // Lifecycle: DOM 초기화
-  // --------------------------------------------------------------------------
-
-
-  React.useEffect(function () {
-    divElement.style.width = 'fit-content';
-    return function () {
-      if (markerRef.current) {
-        controller.clearDrawable(markerRef.current);
-        markerRef.current = undefined;
-      }
-    };
-  }, []); // --------------------------------------------------------------------------
-  // Lifecycle: 마커 생성/업데이트
-  // --------------------------------------------------------------------------
-
-  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);
-
-        if (divElement.parentElement) {
-          divElement.parentElement.style.pointerEvents = 'none';
-        }
-
-        if (options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, options.zIndex);
-        }
-      }
-    }
-  }, [options]); // --------------------------------------------------------------------------
-  // Lifecycle: Konva 초기화 및 이벤트 리스너 등록
-  // --------------------------------------------------------------------------
-
-  React.useEffect(function () {
-    var mapDiv = controller.mapDivElement;
-    var stage = new Konva__default["default"].Stage({
-      container: containerRef.current,
-      width: mapDiv.offsetWidth,
-      height: mapDiv.offsetHeight
-    });
-    stageRef.current = stage; // 레이어 최적화 설정
-
-    var baseLayer = new Konva__default["default"].Layer({
-      listening: false // 이벤트 리스닝 비활성화로 성능 향상
-
-    });
-    var animationLayer = new Konva__default["default"].Layer({
-      listening: false
-    });
-    var eventLayer = new Konva__default["default"].Layer({
-      listening: false
-    });
-    baseLayerRef.current = baseLayer;
-    animationLayerRef.current = animationLayer;
-    eventLayerRef.current = eventLayer;
-    stage.add(baseLayer);
-
-    if (renderAnimation) {
-      stage.add(animationLayer);
-    }
-
-    stage.add(eventLayer); // 초기 뷰포트 설정
-
-    updateViewport(); // ResizeObserver (맵 크기 변경 감지)
-
-    var resizeRafId = null;
-    var resizeObserver = new ResizeObserver(function () {
-      // RAF로 다음 프레임에 한 번만 실행 (debounce 효과)
-      if (resizeRafId !== null) {
-        cancelAnimationFrame(resizeRafId);
-      }
-
-      resizeRafId = requestAnimationFrame(function () {
-        stage.width(mapDiv.offsetWidth);
-        stage.height(mapDiv.offsetHeight);
-        offsetCacheRef.current.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); // 맵 컨테이너에 mouseleave 이벤트 추가
-
-    mapDiv.addEventListener('mouseleave', handleMouseLeave);
-    renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
-
-    var componentInstance = null;
-
-    if (context$1) {
-      componentInstance = {
-        zIndex: currentZIndex,
-        hitTest: function (offset) {
-          return findData(offset) !== null;
-        },
-        onClick: onClick,
-        onMouseOver: onMouseOver,
-        onMouseOut: onMouseOut,
-        findData: findData,
-        setHovered: setHovered,
-        handleLocalClick: handleLocalClick,
-        getSelectedIds: function () {
-          return selectedIdsRef.current;
-        }
-      };
-      context$1.registerComponent(componentInstance);
-    } // Cleanup 함수
-
-
-    return function () {
-      // RAF 정리
-      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); // Context 정리
-
-      if (context$1 && componentInstance) {
-        context$1.unregisterComponent(componentInstance);
-      } // Konva 리소스 정리
-
-
-      baseLayer.destroyChildren();
-      animationLayer.destroyChildren();
-      eventLayer.destroyChildren();
-      stage.destroy(); // 캐시 정리
-
-      offsetCacheRef.current.clear();
-      boundingBoxCacheRef.current.clear();
-      spatialIndexRef.current.clear();
-    };
-  }, []); // --------------------------------------------------------------------------
-  // Lifecycle: 외부 selectedItems 동기화
-  // --------------------------------------------------------------------------
-
-  React.useEffect(function () {
-    if (!stageRef.current) return; // externalSelectedItems가 undefined면 외부 제어 안 함
-
-    if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화
-
-    var newSelectedIds = new Set();
-    var newSelectedItemsMap = new Map();
-    externalSelectedItems.forEach(function (item) {
-      newSelectedIds.add(item.id);
-      newSelectedItemsMap.set(item.id, item);
-    });
-    selectedIdsRef.current = newSelectedIds;
-    selectedItemsMapRef.current = newSelectedItemsMap; // 렌더링
-
-    doRenderBase();
-    doRenderAnimation();
-    doRenderEvent();
-  }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
-  // --------------------------------------------------------------------------
-  // Lifecycle: 마커 데이터 변경 시 렌더링
-  // --------------------------------------------------------------------------
-
-  React.useEffect(function () {
-    if (!stageRef.current) return; // markersRef 동기화
-
-    markersRef.current = markers; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = '';
-    }
-
-    prevCenterOffsetRef.current = null;
-    accumTranslateRef.current = {
-      x: 0,
-      y: 0
-    }; // 캐시 정리 (새 데이터이므로 기존 캐시는 무효)
-
-    offsetCacheRef.current.clear();
-    boundingBoxCacheRef.current.clear();
-    /**
-     * 선택 상태 동기화 (최적화 버전)
-     *
-     * markers가 변경되면 selectedItemsMapRef도 업데이트 필요
-     * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
-     *
-     * 🔥 중요: 화면 밖 마커도 선택 상태 유지!
-     * - 현재 markers에 있으면 최신 데이터로 업데이트
-     * - 없으면 기존 selectedItemsMapRef의 데이터 유지
-     *
-     * 최적화: markers를 Map으로 먼저 변환하여 find() 순회 제거
-     * - O(전체 마커 수 + 선택된 개수) - 매우 효율적
-     */
-
-    var markersMap = new Map(markers.map(function (m) {
-      return [m.id, m];
-    }));
-    var newSelectedItemsMap = new Map();
-    selectedIdsRef.current.forEach(function (id) {
-      // 현재 markers에 있으면 최신 데이터 사용
-      var currentItem = markersMap.get(id);
-
-      if (currentItem) {
-        newSelectedItemsMap.set(id, currentItem);
-      } else {
-        // 화면 밖이면 기존 데이터 유지
-        var prevItem = selectedItemsMapRef.current.get(id);
-
-        if (prevItem) {
-          newSelectedItemsMap.set(id, prevItem);
-        }
-      }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
-
-    selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
-
-    renderAllImmediate();
-  }, [markers]);
-  return reactDom.createPortal(React__default["default"].createElement("div", {
-    ref: containerRef,
-    style: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%'
-    }
-  }), divElement);
-};
-/**
- * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
- *
- * 비교 전략:
- * 1. markers 배열 비교
- * 2. selectedItems 배열 비교 (외부 제어)
- *
- * 주의: JSON.stringify() 사용 금지! (매우 느림)
- */
-
-
-var WoongKonvaMarker = React__default["default"].memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
-  // 1. markers 비교
-  var prevMarkers = prevProps.markers;
-  var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
-
-  if (prevMarkers !== nextMarkers) {
-    // 길이가 다르면 변경됨
-    if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
-
-    for (var i = 0; i < prevMarkers.length; i++) {
-      if (prevMarkers[i].id !== nextMarkers[i].id) {
-        return false; // 변경됨 → 리렌더링
-      }
-    }
-  } // 2. selectedItems 비교 (참조만 비교)
-
-
-  if (prevProps.selectedItems !== nextProps.selectedItems) {
-    return false; // 변경됨 → 리렌더링
-  }
-
-  return true; // 같음 → 리렌더링 스킵
-});
-
-Object.defineProperty(exports, 'CanvasDataType', {
-    enumerable: true,
-    get: function () { return types.CanvasDataType; }
-});
-exports.KonvaMarkerProvider = context.KonvaMarkerProvider;
-exports.LRUCache = performance.LRUCache;
-exports.SpatialHashGrid = performance.SpatialHashGrid;
-exports["default"] = WoongKonvaMarker;