@mint-ui/map 1.2.0-test.3 → 1.2.0-test.31

package/dist/components/mint-map/core/advanced/woongCanvas/{WoongKonvaMarker.js → WoongCanvasLayer.js}

@@ -14,6 +14,7 @@ var types = require('./shared/types.js');
 var utils = require('./shared/utils.js');
 var context = require('./shared/context.js');
 var performance = require('./shared/performance.js');
+var renderer = require('./shared/renderer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,39 +24,27 @@ 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"]); // --------------------------------------------------------------------------
+var WoongCanvasLayer = function (props) {
+  var data = props.data,
+      dataType = props.dataType,
+      onClick = props.onClick,
+      onMouseOver = props.onMouseOver,
+      onMouseOut = props.onMouseOut,
+      _a = props.enableMultiSelect,
+      enableMultiSelect = _a === void 0 ? false : _a,
+      _b = props.topOnHover,
+      topOnHover = _b === void 0 ? false : _b,
+      _c = props.enableViewportCulling,
+      enableViewportCulling = _c === void 0 ? true : _c,
+      _d = props.cullingMargin,
+      cullingMargin = _d === void 0 ? performance.DEFAULT_CULLING_MARGIN : _d,
+      _e = props.maxCacheSize,
+      maxCacheSize = _e === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _e,
+      externalSelectedItems = props.selectedItems,
+      externalSelectedItem = props.selectedItem,
+      _f = props.disableInteraction,
+      disableInteraction = _f === void 0 ? false : _f,
+      options = tslib.__rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -80,18 +69,21 @@ var WoongKonvaMarkerComponent = function (_a) {
   // Data Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
-  /** markers prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
+  /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-  var markersRef = React.useRef(markers); // --------------------------------------------------------------------------
+  var dataRef = React.useRef(data); // --------------------------------------------------------------------------
   // State Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
+  /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
+
+  var disableInteractionRef = React.useRef(disableInteraction);
   /** 현재 Hover 중인 항목 */
 
   var hoveredItemRef = React.useRef(null);
-  /** 마지막으로 클릭된 항목 */
+  /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
 
-  var lastClickedItemRef = React.useRef(null);
+  var selectedItemRef = React.useRef(externalSelectedItem);
   /**
    * 선택된 항목의 ID Set
    *
@@ -174,55 +166,11 @@ var WoongKonvaMarkerComponent = function (_a) {
     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);
-      }
+      // 바운딩 박스 계산 (공통 함수 사용)
+      var computed = computeBoundingBox(item);
+      if (!computed) return false;
+      bbox = computed;
+      boundingBoxCacheRef.current.set(item.id, bbox);
     } // 바운딩 박스와 viewport 교차 체크
 
 
@@ -251,6 +199,7 @@ var WoongKonvaMarkerComponent = function (_a) {
   };
   /**
    * 마커 좌표 변환 결과를 캐시하고 반환
+   *
    * @param markerData 마커 데이터
    * @returns 변환된 좌표 또는 null
    */
@@ -267,6 +216,71 @@ var WoongKonvaMarkerComponent = function (_a) {
 
     return result;
   }; // --------------------------------------------------------------------------
+  // 유틸리티 함수: 바운딩 박스 계산
+  // --------------------------------------------------------------------------
+
+  /**
+   * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
+   *
+   * 🎯 마커의 경우:
+   * - boxHeight: 본체만 (Hit Test 영역)
+   * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+   *
+   * @param item 마커 또는 폴리곤 데이터
+   * @returns 바운딩 박스 또는 null
+   */
+
+
+  var computeBoundingBox = function (item) {
+    if (dataType === types.CanvasDataType.POLYGON) {
+      // 폴리곤: 모든 좌표의 최소/최대값 계산
+      var offsets = getOrComputePolygonOffsets(item);
+      if (!offsets) return null;
+      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;
+          }
+        }
+      }
+
+      return {
+        minX: minX,
+        minY: minY,
+        maxX: maxX,
+        maxY: maxY
+      };
+    } else {
+      // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
+      var offset = getOrComputeMarkerOffset(item);
+      if (!offset) return null;
+      var boxWidth = item.boxWidth || 50;
+      var boxHeight = item.boxHeight || 28;
+      var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
+
+      return {
+        minX: offset.x - boxWidth / 2,
+        minY: offset.y - boxHeight - tailHeight,
+        maxX: offset.x + boxWidth / 2,
+        maxY: offset.y
+      };
+    }
+  }; // --------------------------------------------------------------------------
   // 유틸리티 함수: 공간 인덱싱
   // --------------------------------------------------------------------------
 
@@ -278,59 +292,19 @@ var WoongKonvaMarkerComponent = function (_a) {
   var buildSpatialIndex = function () {
     var spatial = spatialIndexRef.current;
     spatial.clear();
-    var currentMarkers = markersRef.current;
+    var currentData = dataRef.current;
 
-    for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-      var item = currentMarkers_1[_i];
+    for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
+      var item = currentData_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;
-              }
-            }
-          }
+      var bbox = computeBoundingBox(item);
 
-          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);
-        }
+      if (bbox) {
+        spatial.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
       }
     }
   }; // --------------------------------------------------------------------------
-  // 렌더링 함수
+  // 렌더링 함수 결정 (dataType에 따라)
   // --------------------------------------------------------------------------
 
   /**
@@ -345,6 +319,18 @@ var WoongKonvaMarkerComponent = function (_a) {
   /** Base Layer에서 사용할 빈 Set (재사용) */
 
   React.useRef(new Set());
+  /**
+   * 실제 사용할 렌더링 함수 결정
+   * - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
+   * - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
+   */
+
+  var renderBase = dataType === types.CanvasDataType.MARKER ? props.renderBase : renderer.renderPolygonBase(props.baseFillColor, props.baseStrokeColor, props.baseLineWidth);
+  var renderAnimation = dataType === types.CanvasDataType.MARKER ? props.renderAnimation : undefined;
+  var renderEvent = dataType === types.CanvasDataType.MARKER ? props.renderEvent : function () {
+    var polygonProps = props;
+    return renderer.renderPolygonEvent(polygonProps.baseFillColor, polygonProps.baseStrokeColor, polygonProps.baseLineWidth, polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
+  }();
   /**
    * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
    *
@@ -352,6 +338,10 @@ var WoongKonvaMarkerComponent = function (_a) {
    * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
    * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
    * 3. 클로저로 최신 데이터 참조
+   *
+   * 🎯 topOnHover 지원:
+   * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
+   * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
    */
 
   var doRenderBase = function () {
@@ -366,17 +356,42 @@ var WoongKonvaMarkerComponent = function (_a) {
       shape = new Konva__default["default"].Shape({
         name: 'base-render-shape',
         sceneFunc: function (context, shape) {
-          var ctx = context; // 클로저로 최신 ref 값 참조
+          var ctx = context;
+          var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
 
-          var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
+          var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }) : markersRef.current;
+          }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+
+          if (topOnHover && !renderEvent && hovered) {
+            // hover된 항목 제외하고 렌더링
+            visibleItems = visibleItems.filter(function (item) {
+              return item.id !== hovered.id;
+            });
+          } // 일반 항목 렌더링
+
+
           renderBase({
             ctx: ctx,
-            items: visibleMarkers,
+            items: visibleItems,
             selectedIds: selectedIdsRef.current,
+            hoveredItem: hovered,
             utils: renderUtils
-          });
+          }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
+
+          if (topOnHover && !renderEvent && hovered) {
+            var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+
+            if (isHoveredInViewport) {
+              renderBase({
+                ctx: ctx,
+                items: [hovered],
+                selectedIds: selectedIdsRef.current,
+                hoveredItem: hovered,
+                utils: renderUtils
+              });
+            }
+          }
         },
         perfectDrawEnabled: false,
         listening: false,
@@ -404,7 +419,7 @@ var WoongKonvaMarkerComponent = function (_a) {
     renderAnimation({
       layer: layer,
       selectedIds: selectedIdsRef.current,
-      items: markersRef.current,
+      items: dataRef.current,
       utils: renderUtils
     });
   };
@@ -419,9 +434,9 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var doRenderEvent = function () {
-    if (!renderEvent) return;
     var layer = eventLayerRef.current;
-    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+    if (!layer) return;
+    if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
 
     var shape = layer.findOne('.event-render-shape');
 
@@ -434,13 +449,47 @@ var WoongKonvaMarkerComponent = function (_a) {
           var ctx = context; // 클로저로 최신 ref 값 참조
 
           var selectedItems = Array.from(selectedItemsMapRef.current.values());
-          renderEvent({
-            ctx: ctx,
-            hoveredItem: hoveredItemRef.current,
-            utils: renderUtils,
-            selectedItems: selectedItems,
-            lastClickedItem: lastClickedItemRef.current
-          });
+          var hovered = hoveredItemRef.current; // topOnHover가 true이면 hover된 항목을 최상단에 렌더링
+
+          if (topOnHover && hovered) {
+            // 1. 먼저 일반 항목들 렌더링 (hover된 항목 제외)
+            renderEvent({
+              ctx: ctx,
+              hoveredItem: null,
+              utils: renderUtils,
+              selectedItems: selectedItems.filter(function (item) {
+                return item.id !== hovered.id;
+              }),
+              selectedItem: selectedItemRef.current
+            }); // 2. hover된 항목을 최상단에 렌더링
+
+            var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+
+            if (isHoveredInViewport) {
+              // hover된 항목이 선택되어 있다면 hoverSelectedItems에 포함시켜서 
+              // renderEvent에서 hover 스타일만 적용되도록 함
+              var hoveredIsSelected = selectedItems.some(function (item) {
+                return item.id === hovered.id;
+              });
+              var hoverSelectedItems = hoveredIsSelected ? [hovered] : [];
+              renderEvent({
+                ctx: ctx,
+                hoveredItem: hovered,
+                utils: renderUtils,
+                selectedItems: hoverSelectedItems,
+                selectedItem: selectedItemRef.current
+              });
+            }
+          } else {
+            // topOnHover가 false이거나 hover된 항목이 없으면 일반 렌더링
+            renderEvent({
+              ctx: ctx,
+              hoveredItem: hovered,
+              utils: renderUtils,
+              selectedItems: selectedItems,
+              selectedItem: selectedItemRef.current
+            });
+          }
         },
         perfectDrawEnabled: false,
         listening: false,
@@ -609,12 +658,15 @@ var WoongKonvaMarkerComponent = function (_a) {
     return null;
   };
   /**
-   * Hover 상태 설정 및 Event 레이어 렌더링
+   * Hover 상태 설정 및 레이어 렌더링
    *
    * @param data hover된 마커/폴리곤 데이터 또는 null
    *
    * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-   * topOnHover가 true일 때는 Base 레이어도 다시 그려서 z-order 변경
+   *
+   * 🎯 topOnHover 지원:
+   * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
+   * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
    */
 
 
@@ -626,10 +678,15 @@ var WoongKonvaMarkerComponent = function (_a) {
     } else {
       controller.setMapCursor(data ? 'pointer' : 'grab');
     } // 즉시 렌더링 (RAF 없이)
-    // topOnHover는 Event Layer에서만 처리 (Base Layer 재렌더링 제거로 성능 향상)
 
 
-    doRenderEvent();
+    if (renderEvent) {
+      // renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
+      doRenderEvent();
+    } else if (topOnHover) {
+      // renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
+      doRenderBase();
+    }
   };
   /**
    * 클릭 처리 (단일/다중 선택)
@@ -643,9 +700,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var handleLocalClick = function (data) {
-    // 0. 마지막 클릭 항목 저장
-    lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
-
+    // 1. 선택 상태 업데이트
     if (enableMultiSelect) {
       // 다중 선택: Set과 Map 동시 업데이트
       var newSelected = new Set(selectedIdsRef.current);
@@ -695,15 +750,20 @@ var WoongKonvaMarkerComponent = function (_a) {
   var handleClick = function (event) {
     var _a;
 
+    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
     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);
+      var data_1 = findData(clickedOffset);
 
-      if (data) {
-        handleLocalClick(data);
-        if (onClick) onClick(data, selectedIdsRef.current);
+      if (data_1) {
+        handleLocalClick(data_1);
+
+        if (onClick) {
+          onClick(data_1, selectedIdsRef.current);
+        }
       }
     } catch (error) {
       console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -717,6 +777,8 @@ var WoongKonvaMarkerComponent = function (_a) {
   var handleMouseMove = function (event) {
     var _a;
 
+    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
     if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
     try {
@@ -757,6 +819,8 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var handleMouseLeave = function () {
+    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
     var prevHovered = hoveredItemRef.current;
 
     if (prevHovered) {
@@ -891,7 +955,11 @@ var WoongKonvaMarkerComponent = function (_a) {
         handleLocalClick: handleLocalClick,
         getSelectedIds: function () {
           return selectedIdsRef.current;
-        }
+        },
+        isInteractionDisabled: function () {
+          return disableInteractionRef.current;
+        } // 🚫 상호작용 비활성화 여부 반환
+
       };
       context$1.registerComponent(componentInstance);
     } // Cleanup 함수
@@ -930,7 +998,14 @@ var WoongKonvaMarkerComponent = function (_a) {
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
-  }, []); // --------------------------------------------------------------------------
+  }, []); // 초기화는 한 번만
+  // --------------------------------------------------------------------------
+  // Lifecycle: disableInteraction 동기화
+  // --------------------------------------------------------------------------
+
+  React.useEffect(function () {
+    disableInteractionRef.current = disableInteraction;
+  }, [disableInteraction]); // --------------------------------------------------------------------------
   // Lifecycle: 외부 selectedItems 동기화
   // --------------------------------------------------------------------------
 
@@ -953,13 +1028,23 @@ var WoongKonvaMarkerComponent = function (_a) {
     doRenderEvent();
   }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
   // --------------------------------------------------------------------------
-  // Lifecycle: 마커 데이터 변경 시 렌더링
+  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
   // --------------------------------------------------------------------------
 
   React.useEffect(function () {
-    if (!stageRef.current) return; // markersRef 동기화
+    if (!stageRef.current) return; // Ref 동기화
+
+    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
 
-    markersRef.current = markers; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    doRenderEvent();
+  }, [externalSelectedItem]); // --------------------------------------------------------------------------
+  // Lifecycle: 데이터 변경 시 렌더링
+  // --------------------------------------------------------------------------
+
+  React.useEffect(function () {
+    if (!stageRef.current) return; // dataRef 동기화
+
+    dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
     if (containerRef.current) {
       containerRef.current.style.transform = '';
@@ -976,24 +1061,24 @@ var WoongKonvaMarkerComponent = function (_a) {
     /**
      * 선택 상태 동기화 (최적화 버전)
      *
-     * markers가 변경되면 selectedItemsMapRef도 업데이트 필요
+     * data가 변경되면 selectedItemsMapRef도 업데이트 필요
      * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
      *
-     * 🔥 중요: 화면 밖 마커도 선택 상태 유지!
-     * - 현재 markers에 있으면 최신 데이터로 업데이트
+     * 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
+     * - 현재 data에 있으면 최신 데이터로 업데이트
      * - 없으면 기존 selectedItemsMapRef의 데이터 유지
      *
-     * 최적화: markers를 Map으로 먼저 변환하여 find() 순회 제거
-     * - O(전체 마커 수 + 선택된 개수) - 매우 효율적
+     * 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
+     * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
      */
 
-    var markersMap = new Map(markers.map(function (m) {
+    var dataMap = new Map(data.map(function (m) {
       return [m.id, m];
     }));
     var newSelectedItemsMap = new Map();
     selectedIdsRef.current.forEach(function (id) {
-      // 현재 markers에 있으면 최신 데이터 사용
-      var currentItem = markersMap.get(id);
+      // 현재 data에 있으면 최신 데이터 사용
+      var currentItem = dataMap.get(id);
 
       if (currentItem) {
         newSelectedItemsMap.set(id, currentItem);
@@ -1005,12 +1090,12 @@ var WoongKonvaMarkerComponent = function (_a) {
           newSelectedItemsMap.set(id, prevItem);
         }
       }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
+    }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
 
     selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 
     renderAllImmediate();
-  }, [markers]);
+  }, [data]);
   return reactDom.createPortal(React__default["default"].createElement("div", {
     ref: containerRef,
     style: {
@@ -1020,40 +1105,6 @@ var WoongKonvaMarkerComponent = function (_a) {
     }
   }), divElement);
 };
-/**
- * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
- *
- * 비교 전략:
- * 1. markers 배열 비교
- * 2. selectedItems 배열 비교 (외부 제어)
- *
- * 주의: JSON.stringify() 사용 금지! (매우 느림)
- */
-
-
-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,
@@ -1062,3 +1113,4 @@ Object.defineProperty(exports, 'CanvasDataType', {
 exports.KonvaMarkerProvider = context.KonvaMarkerProvider;
 exports.LRUCache = performance.LRUCache;
 exports.SpatialHashGrid = performance.SpatialHashGrid;
+exports["default"] = WoongCanvasLayer;