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

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

@@ -36,6 +36,8 @@ export interface WoongKonvaMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' |
     maxCacheSize?: number;
     /** 외부에서 제어하는 선택된 항목 배열 (선택) */
     selectedItems?: KonvaCanvasMarkerData<T>[];
+    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
+    selectedItem?: KonvaCanvasMarkerData<T> | null;
 }
 /**
  * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
@@ -46,5 +48,5 @@ export interface WoongKonvaMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' |
  *
  * 주의: JSON.stringify() 사용 금지! (매우 느림)
  */
-declare const WoongKonvaMarker: <T>({ markers, dataType, onClick, onMouseOver, onMouseOut, renderBase, renderAnimation, renderEvent, enableMultiSelect, topOnHover, enableViewportCulling, cullingMargin, maxCacheSize, selectedItems: externalSelectedItems, ...options }: WoongKonvaMarkerProps<T>) => React.ReactPortal;
+declare const WoongKonvaMarker: <T>({ markers, dataType, onClick, onMouseOver, onMouseOut, renderBase, renderAnimation, renderEvent, enableMultiSelect, topOnHover, enableViewportCulling, cullingMargin, maxCacheSize, selectedItems: externalSelectedItems, selectedItem: externalSelectedItem, ...options }: WoongKonvaMarkerProps<T>) => React.ReactPortal;
 export default WoongKonvaMarker;

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

@@ -55,7 +55,8 @@ var WoongKonvaMarkerComponent = function (_a) {
       _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"]); // --------------------------------------------------------------------------
+      externalSelectedItem = _a.selectedItem,
+      options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -89,9 +90,9 @@ var WoongKonvaMarkerComponent = function (_a) {
   /** 현재 Hover 중인 항목 */
 
   var hoveredItemRef = React.useRef(null);
-  /** 마지막으로 클릭된 항목 */
+  /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
 
-  var lastClickedItemRef = React.useRef(null);
+  var selectedItemRef = React.useRef(externalSelectedItem);
   /**
    * 선택된 항목의 ID Set
    *
@@ -419,6 +420,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var doRenderEvent = function () {
+    if (!onClick && !onMouseOver && !onMouseOut) return;
     if (!renderEvent) return;
     var layer = eventLayerRef.current;
     if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
@@ -439,7 +441,7 @@ var WoongKonvaMarkerComponent = function (_a) {
             hoveredItem: hoveredItemRef.current,
             utils: renderUtils,
             selectedItems: selectedItems,
-            lastClickedItem: lastClickedItemRef.current
+            selectedItem: selectedItemRef.current
           });
         },
         perfectDrawEnabled: false,
@@ -619,6 +621,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var setHovered = function (data) {
+    if (!onMouseOver && !onMouseOut) return;
     hoveredItemRef.current = data;
 
     if (draggingRef.current) {
@@ -643,8 +646,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var handleLocalClick = function (data) {
-    // 0. 마지막 클릭 항목 저장
-    lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
+    if (!onClick) return; // 1. 선택 상태 업데이트
 
     if (enableMultiSelect) {
       // 다중 선택: Set과 Map 동시 업데이트
@@ -695,6 +697,7 @@ var WoongKonvaMarkerComponent = function (_a) {
   var handleClick = function (event) {
     var _a;
 
+    if (!onClick) return;
     if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
     try {
@@ -703,7 +706,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
       if (data) {
         handleLocalClick(data);
-        if (onClick) onClick(data, selectedIdsRef.current);
+        onClick(data, selectedIdsRef.current);
       }
     } catch (error) {
       console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -717,6 +720,7 @@ var WoongKonvaMarkerComponent = function (_a) {
   var handleMouseMove = function (event) {
     var _a;
 
+    if (!onMouseOver && !onMouseOut) 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 +761,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var handleMouseLeave = function () {
+    if (!onMouseOver && !onMouseOut) return;
     var prevHovered = hoveredItemRef.current;
 
     if (prevHovered) {
@@ -910,7 +915,11 @@ var WoongKonvaMarkerComponent = function (_a) {
       controller.removeEventListener('ZOOMSTART', handleZoomStart);
       controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
       controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
-      controller.removeEventListener('CLICK', handleClick);
+
+      if (onClick) {
+        controller.removeEventListener('CLICK', handleClick);
+      }
+
       controller.removeEventListener('MOUSEMOVE', handleMouseMove);
       controller.removeEventListener('DRAGSTART', handleDragStart);
       controller.removeEventListener('DRAGEND', handleDragEnd);
@@ -953,6 +962,16 @@ var WoongKonvaMarkerComponent = function (_a) {
     doRenderEvent();
   }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
   // --------------------------------------------------------------------------
+  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
+  // --------------------------------------------------------------------------
+
+  React.useEffect(function () {
+    if (!stageRef.current) return; // Ref 동기화
+
+    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
+
+    doRenderEvent();
+  }, [externalSelectedItem]); // --------------------------------------------------------------------------
   // Lifecycle: 마커 데이터 변경 시 렌더링
   // --------------------------------------------------------------------------
 

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

@@ -111,8 +111,8 @@ export interface RenderEventParams<T> {
     utils: RenderUtils<T>;
     /** 현재 선택된 마커 데이터 배열 (선택 강조용) */
     selectedItems?: KonvaCanvasMarkerData<T>[];
-    /** 마지막으로 클릭된 마커 데이터 */
-    lastClickedItem: KonvaCanvasMarkerData<T> | null;
+    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
+    selectedItem?: KonvaCanvasMarkerData<T> | null;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Event Layer

package/dist/index.es.js

@@ -5405,7 +5405,8 @@ var WoongKonvaMarkerComponent = function (_a) {
       _f = _a.maxCacheSize,
       maxCacheSize = _f === void 0 ? DEFAULT_MAX_CACHE_SIZE : _f,
       externalSelectedItems = _a.selectedItems,
-      options = __rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems"]); // --------------------------------------------------------------------------
+      externalSelectedItem = _a.selectedItem,
+      options = __rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -5439,9 +5440,9 @@ var WoongKonvaMarkerComponent = function (_a) {
   /** 현재 Hover 중인 항목 */
 
   var hoveredItemRef = useRef(null);
-  /** 마지막으로 클릭된 항목 */
+  /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
 
-  var lastClickedItemRef = useRef(null);
+  var selectedItemRef = useRef(externalSelectedItem);
   /**
    * 선택된 항목의 ID Set
    *
@@ -5769,6 +5770,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var doRenderEvent = function () {
+    if (!onClick && !onMouseOver && !onMouseOut) return;
     if (!renderEvent) return;
     var layer = eventLayerRef.current;
     if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
@@ -5789,7 +5791,7 @@ var WoongKonvaMarkerComponent = function (_a) {
             hoveredItem: hoveredItemRef.current,
             utils: renderUtils,
             selectedItems: selectedItems,
-            lastClickedItem: lastClickedItemRef.current
+            selectedItem: selectedItemRef.current
           });
         },
         perfectDrawEnabled: false,
@@ -5969,6 +5971,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var setHovered = function (data) {
+    if (!onMouseOver && !onMouseOut) return;
     hoveredItemRef.current = data;
 
     if (draggingRef.current) {
@@ -5993,8 +5996,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var handleLocalClick = function (data) {
-    // 0. 마지막 클릭 항목 저장
-    lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
+    if (!onClick) return; // 1. 선택 상태 업데이트
 
     if (enableMultiSelect) {
       // 다중 선택: Set과 Map 동시 업데이트
@@ -6045,6 +6047,7 @@ var WoongKonvaMarkerComponent = function (_a) {
   var handleClick = function (event) {
     var _a;
 
+    if (!onClick) return;
     if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
     try {
@@ -6053,7 +6056,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
       if (data) {
         handleLocalClick(data);
-        if (onClick) onClick(data, selectedIdsRef.current);
+        onClick(data, selectedIdsRef.current);
       }
     } catch (error) {
       console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -6067,6 +6070,7 @@ var WoongKonvaMarkerComponent = function (_a) {
   var handleMouseMove = function (event) {
     var _a;
 
+    if (!onMouseOver && !onMouseOut) return;
     if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
     try {
@@ -6107,6 +6111,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var handleMouseLeave = function () {
+    if (!onMouseOver && !onMouseOut) return;
     var prevHovered = hoveredItemRef.current;
 
     if (prevHovered) {
@@ -6260,7 +6265,11 @@ var WoongKonvaMarkerComponent = function (_a) {
       controller.removeEventListener('ZOOMSTART', handleZoomStart);
       controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
       controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
-      controller.removeEventListener('CLICK', handleClick);
+
+      if (onClick) {
+        controller.removeEventListener('CLICK', handleClick);
+      }
+
       controller.removeEventListener('MOUSEMOVE', handleMouseMove);
       controller.removeEventListener('DRAGSTART', handleDragStart);
       controller.removeEventListener('DRAGEND', handleDragEnd);
@@ -6303,6 +6312,16 @@ var WoongKonvaMarkerComponent = function (_a) {
     doRenderEvent();
   }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
   // --------------------------------------------------------------------------
+  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
+  // --------------------------------------------------------------------------
+
+  useEffect(function () {
+    if (!stageRef.current) return; // Ref 동기화
+
+    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
+
+    doRenderEvent();
+  }, [externalSelectedItem]); // --------------------------------------------------------------------------
   // Lifecycle: 마커 데이터 변경 시 렌더링
   // --------------------------------------------------------------------------
 

package/dist/index.umd.js

@@ -5409,7 +5409,8 @@
         _f = _a.maxCacheSize,
         maxCacheSize = _f === void 0 ? 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"]); // --------------------------------------------------------------------------
+        externalSelectedItem = _a.selectedItem,
+        options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem"]); // --------------------------------------------------------------------------
     // Hooks & Context
     // --------------------------------------------------------------------------
 
@@ -5443,9 +5444,9 @@
     /** 현재 Hover 중인 항목 */
 
     var hoveredItemRef = React.useRef(null);
-    /** 마지막으로 클릭된 항목 */
+    /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
 
-    var lastClickedItemRef = React.useRef(null);
+    var selectedItemRef = React.useRef(externalSelectedItem);
     /**
      * 선택된 항목의 ID Set
      *
@@ -5773,6 +5774,7 @@
 
 
     var doRenderEvent = function () {
+      if (!onClick && !onMouseOver && !onMouseOut) return;
       if (!renderEvent) return;
       var layer = eventLayerRef.current;
       if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
@@ -5793,7 +5795,7 @@
               hoveredItem: hoveredItemRef.current,
               utils: renderUtils,
               selectedItems: selectedItems,
-              lastClickedItem: lastClickedItemRef.current
+              selectedItem: selectedItemRef.current
             });
           },
           perfectDrawEnabled: false,
@@ -5973,6 +5975,7 @@
 
 
     var setHovered = function (data) {
+      if (!onMouseOver && !onMouseOut) return;
       hoveredItemRef.current = data;
 
       if (draggingRef.current) {
@@ -5997,8 +6000,7 @@
 
 
     var handleLocalClick = function (data) {
-      // 0. 마지막 클릭 항목 저장
-      lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
+      if (!onClick) return; // 1. 선택 상태 업데이트
 
       if (enableMultiSelect) {
         // 다중 선택: Set과 Map 동시 업데이트
@@ -6049,6 +6051,7 @@
     var handleClick = function (event) {
       var _a;
 
+      if (!onClick) return;
       if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
       try {
@@ -6057,7 +6060,7 @@
 
         if (data) {
           handleLocalClick(data);
-          if (onClick) onClick(data, selectedIdsRef.current);
+          onClick(data, selectedIdsRef.current);
         }
       } catch (error) {
         console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -6071,6 +6074,7 @@
     var handleMouseMove = function (event) {
       var _a;
 
+      if (!onMouseOver && !onMouseOut) return;
       if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
       try {
@@ -6111,6 +6115,7 @@
 
 
     var handleMouseLeave = function () {
+      if (!onMouseOver && !onMouseOut) return;
       var prevHovered = hoveredItemRef.current;
 
       if (prevHovered) {
@@ -6264,7 +6269,11 @@
         controller.removeEventListener('ZOOMSTART', handleZoomStart);
         controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
         controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
-        controller.removeEventListener('CLICK', handleClick);
+
+        if (onClick) {
+          controller.removeEventListener('CLICK', handleClick);
+        }
+
         controller.removeEventListener('MOUSEMOVE', handleMouseMove);
         controller.removeEventListener('DRAGSTART', handleDragStart);
         controller.removeEventListener('DRAGEND', handleDragEnd);
@@ -6307,6 +6316,16 @@
       doRenderEvent();
     }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
     // --------------------------------------------------------------------------
+    // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (!stageRef.current) return; // Ref 동기화
+
+      selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
+
+      doRenderEvent();
+    }, [externalSelectedItem]); // --------------------------------------------------------------------------
     // Lifecycle: 마커 데이터 변경 시 렌더링
     // --------------------------------------------------------------------------
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "1.2.0-test.5",
+  "version": "1.2.0-test.7",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",