@mint-ui/map 1.2.0-test.66 → 1.2.0-test.67

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

@@ -164,20 +164,12 @@ var CanvasMarkerLayer = function (props) {
         name: 'base-render-shape',
         perfectDrawEnabled: false,
         sceneFunc: function (konvaContext) {
-          var ctx = konvaContext;
-          var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
+          var ctx = konvaContext; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
           var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }) : dataRef.current; // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리
-
-          if (topStageZIndex !== undefined && hovered) {
-            visibleItems = visibleItems.filter(function (item) {
-              return item.id !== hovered.id;
-            });
-          } // Base Layer는 기본 마커만 렌더링 (성능 최적화)
-          // hover/selected는 Event Layer에서 덧그리므로 Base Layer에서는 제외
-
+          }) : dataRef.current; // Base Layer는 기본 마커만 렌더링 (hover된 항목도 포함)
+          // hover 스타일은 Event Layer와 Top Layer에서 덧그려짐
 
           renderBase({
             ctx: ctx,
@@ -185,8 +177,7 @@ var CanvasMarkerLayer = function (props) {
             items: visibleItems,
             selectedIds: new Set(),
             utils: renderUtils
-          }); // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리하므로 여기서는 스킵
-          // topStageZIndex가 없으면 성능 우선으로 Base Layer 재렌더링 안 함 (hover된 항목이 뒤편 마커 위로 올라갈 수 있음)
+          });
         }
       });
       layer.add(shape);
@@ -221,37 +212,19 @@ var CanvasMarkerLayer = function (props) {
             })) {
               selectedItems = tslib.__spreadArray(tslib.__spreadArray([], selectedItems, true), [selectedItemRef.current], false);
             }
-          } // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리
-          // event 레이어에서는 hover된 항목을 완전히 제외하고 선택된 항목만 렌더링
-
-
-          if (topStageZIndex !== undefined && hovered) {
-            // hover된 항목을 제외한 선택된 항목들 (성능 최적화: 필요할 때만 필터링)
-            var selectedItemsWithoutHovered = selectedItems.length > 0 ? selectedItems.filter(function (item) {
-              return item.id !== hovered.id;
-            }) : selectedItems; // 선택된 항목만 그리기 (hover된 항목은 Top Layer에서 처리)
-
-            renderEvent({
-              ctx: ctx,
-              hoveredItem: null,
-              selectedItem: selectedItemRef.current,
-              selectedItems: selectedItemsWithoutHovered,
-              topOnHover: true,
-              utils: renderUtils
-            });
-          } else {
-            // topStageZIndex가 없으면 hover된 항목을 selectedItems에 추가하지 않음 (성능 우선)
-            // renderEvent 함수가 hoveredItem을 별도로 처리하므로, selectedItems는 그대로 전달
-            // 이렇게 하면 hover 변경 시 선택된 항목들을 다시 그리지 않고 hover된 항목만 업데이트됨
-            renderEvent({
-              ctx: ctx,
-              hoveredItem: hovered,
-              selectedItem: selectedItemRef.current,
-              selectedItems: selectedItems,
-              topOnHover: false,
-              utils: renderUtils
-            });
-          }
+          } // Event Layer는 hover 효과 및 선택 상태를 덧그림
+          // topStageZIndex가 있으면 hover된 항목은 Top Stage에서도 처리되지만,
+          // Event Layer에서도 hover 스타일을 덧그려서 Base Layer 위에 표시됨
+
+
+          renderEvent({
+            ctx: ctx,
+            hasTopStage: topStageZIndex !== undefined,
+            hoveredItem: hovered,
+            selectedItem: selectedItemRef.current,
+            selectedItems: selectedItems,
+            utils: renderUtils
+          });
         }
       });
       layer.add(shape);
@@ -316,10 +289,10 @@ var CanvasMarkerLayer = function (props) {
         var hoverSelectedItems = hoveredIsSelected ? [currentHovered] : [];
         renderEvent({
           ctx: ctx,
+          hasTopStage: true,
           hoveredItem: currentHovered,
           selectedItem: selectedItemRef.current,
           selectedItems: hoverSelectedItems,
-          topOnHover: true,
           utils: renderUtils
         });
       } else {
@@ -458,8 +431,8 @@ var CanvasMarkerLayer = function (props) {
 
     if (topStageZIndex !== undefined) {
       // topStageZIndex가 설정된 경우 Top Layer에서 hover된 항목 렌더링
-      // Base Layer는 hover 상태 변경 시 재렌더링 불필요 (sceneFunc 내에서 hover 항목 제외 처리)
-      // Event Layer는 선택된 항목만 렌더링하므로 업데이트 필요
+      // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+      // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
       doRenderEvent();
       doRenderTop();
     } else if (renderEvent) {
@@ -554,8 +527,8 @@ var CanvasMarkerLayer = function (props) {
     controller.setMapCursor('grab');
 
     if (topStageZIndex !== undefined) {
-      // Base Layer는 hover 상태 변경 시 재렌더링 불필요 (sceneFunc 내에서 hover 항목 제외 처리)
-      // Event Layer는 선택된 항목만 렌더링하므로 업데이트 필요
+      // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+      // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
       doRenderEvent();
       doRenderTop();
     } else if (renderEvent) {

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

@@ -129,8 +129,8 @@ export interface RenderEventParams<T> {
     utils: RenderUtils<T>;
     selectedItems?: CanvasData<T>[];
     selectedItem?: CanvasData<T> | null;
-    /** hover 시 마커를 최상단으로 표시할지 여부 (기본값: false) */
-    topOnHover?: boolean;
+    /** topStageZIndex가 설정되어 있는지 여부 (기본값: false) */
+    hasTopStage?: boolean;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Event Layer

package/dist/index.es.js

@@ -4075,20 +4075,12 @@ var CanvasMarkerLayer = function (props) {
         name: 'base-render-shape',
         perfectDrawEnabled: false,
         sceneFunc: function (konvaContext) {
-          var ctx = konvaContext;
-          var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
+          var ctx = konvaContext; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
           var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
             return isInViewport$1(item);
-          }) : dataRef.current; // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리
-
-          if (topStageZIndex !== undefined && hovered) {
-            visibleItems = visibleItems.filter(function (item) {
-              return item.id !== hovered.id;
-            });
-          } // Base Layer는 기본 마커만 렌더링 (성능 최적화)
-          // hover/selected는 Event Layer에서 덧그리므로 Base Layer에서는 제외
-
+          }) : dataRef.current; // Base Layer는 기본 마커만 렌더링 (hover된 항목도 포함)
+          // hover 스타일은 Event Layer와 Top Layer에서 덧그려짐
 
           renderBase({
             ctx: ctx,
@@ -4096,8 +4088,7 @@ var CanvasMarkerLayer = function (props) {
             items: visibleItems,
             selectedIds: new Set(),
             utils: renderUtils
-          }); // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리하므로 여기서는 스킵
-          // topStageZIndex가 없으면 성능 우선으로 Base Layer 재렌더링 안 함 (hover된 항목이 뒤편 마커 위로 올라갈 수 있음)
+          });
         }
       });
       layer.add(shape);
@@ -4132,37 +4123,19 @@ var CanvasMarkerLayer = function (props) {
             })) {
               selectedItems = __spreadArray(__spreadArray([], selectedItems, true), [selectedItemRef.current], false);
             }
-          } // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리
-          // event 레이어에서는 hover된 항목을 완전히 제외하고 선택된 항목만 렌더링
-
-
-          if (topStageZIndex !== undefined && hovered) {
-            // hover된 항목을 제외한 선택된 항목들 (성능 최적화: 필요할 때만 필터링)
-            var selectedItemsWithoutHovered = selectedItems.length > 0 ? selectedItems.filter(function (item) {
-              return item.id !== hovered.id;
-            }) : selectedItems; // 선택된 항목만 그리기 (hover된 항목은 Top Layer에서 처리)
-
-            renderEvent({
-              ctx: ctx,
-              hoveredItem: null,
-              selectedItem: selectedItemRef.current,
-              selectedItems: selectedItemsWithoutHovered,
-              topOnHover: true,
-              utils: renderUtils
-            });
-          } else {
-            // topStageZIndex가 없으면 hover된 항목을 selectedItems에 추가하지 않음 (성능 우선)
-            // renderEvent 함수가 hoveredItem을 별도로 처리하므로, selectedItems는 그대로 전달
-            // 이렇게 하면 hover 변경 시 선택된 항목들을 다시 그리지 않고 hover된 항목만 업데이트됨
-            renderEvent({
-              ctx: ctx,
-              hoveredItem: hovered,
-              selectedItem: selectedItemRef.current,
-              selectedItems: selectedItems,
-              topOnHover: false,
-              utils: renderUtils
-            });
-          }
+          } // Event Layer는 hover 효과 및 선택 상태를 덧그림
+          // topStageZIndex가 있으면 hover된 항목은 Top Stage에서도 처리되지만,
+          // Event Layer에서도 hover 스타일을 덧그려서 Base Layer 위에 표시됨
+
+
+          renderEvent({
+            ctx: ctx,
+            hasTopStage: topStageZIndex !== undefined,
+            hoveredItem: hovered,
+            selectedItem: selectedItemRef.current,
+            selectedItems: selectedItems,
+            utils: renderUtils
+          });
         }
       });
       layer.add(shape);
@@ -4227,10 +4200,10 @@ var CanvasMarkerLayer = function (props) {
         var hoverSelectedItems = hoveredIsSelected ? [currentHovered] : [];
         renderEvent({
           ctx: ctx,
+          hasTopStage: true,
           hoveredItem: currentHovered,
           selectedItem: selectedItemRef.current,
           selectedItems: hoverSelectedItems,
-          topOnHover: true,
           utils: renderUtils
         });
       } else {
@@ -4369,8 +4342,8 @@ var CanvasMarkerLayer = function (props) {
 
     if (topStageZIndex !== undefined) {
       // topStageZIndex가 설정된 경우 Top Layer에서 hover된 항목 렌더링
-      // Base Layer는 hover 상태 변경 시 재렌더링 불필요 (sceneFunc 내에서 hover 항목 제외 처리)
-      // Event Layer는 선택된 항목만 렌더링하므로 업데이트 필요
+      // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+      // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
       doRenderEvent();
       doRenderTop();
     } else if (renderEvent) {
@@ -4465,8 +4438,8 @@ var CanvasMarkerLayer = function (props) {
     controller.setMapCursor('grab');
 
     if (topStageZIndex !== undefined) {
-      // Base Layer는 hover 상태 변경 시 재렌더링 불필요 (sceneFunc 내에서 hover 항목 제외 처리)
-      // Event Layer는 선택된 항목만 렌더링하므로 업데이트 필요
+      // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+      // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
       doRenderEvent();
       doRenderTop();
     } else if (renderEvent) {

package/dist/index.umd.js

@@ -4079,20 +4079,12 @@
           name: 'base-render-shape',
           perfectDrawEnabled: false,
           sceneFunc: function (konvaContext) {
-            var ctx = konvaContext;
-            var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
+            var ctx = konvaContext; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
             var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
               return isInViewport$1(item);
-            }) : dataRef.current; // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리
-
-            if (topStageZIndex !== undefined && hovered) {
-              visibleItems = visibleItems.filter(function (item) {
-                return item.id !== hovered.id;
-              });
-            } // Base Layer는 기본 마커만 렌더링 (성능 최적화)
-            // hover/selected는 Event Layer에서 덧그리므로 Base Layer에서는 제외
-
+            }) : dataRef.current; // Base Layer는 기본 마커만 렌더링 (hover된 항목도 포함)
+            // hover 스타일은 Event Layer와 Top Layer에서 덧그려짐
 
             renderBase({
               ctx: ctx,
@@ -4100,8 +4092,7 @@
               items: visibleItems,
               selectedIds: new Set(),
               utils: renderUtils
-            }); // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리하므로 여기서는 스킵
-            // topStageZIndex가 없으면 성능 우선으로 Base Layer 재렌더링 안 함 (hover된 항목이 뒤편 마커 위로 올라갈 수 있음)
+            });
           }
         });
         layer.add(shape);
@@ -4136,37 +4127,19 @@
               })) {
                 selectedItems = tslib.__spreadArray(tslib.__spreadArray([], selectedItems, true), [selectedItemRef.current], false);
               }
-            } // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리
-            // event 레이어에서는 hover된 항목을 완전히 제외하고 선택된 항목만 렌더링
-
-
-            if (topStageZIndex !== undefined && hovered) {
-              // hover된 항목을 제외한 선택된 항목들 (성능 최적화: 필요할 때만 필터링)
-              var selectedItemsWithoutHovered = selectedItems.length > 0 ? selectedItems.filter(function (item) {
-                return item.id !== hovered.id;
-              }) : selectedItems; // 선택된 항목만 그리기 (hover된 항목은 Top Layer에서 처리)
-
-              renderEvent({
-                ctx: ctx,
-                hoveredItem: null,
-                selectedItem: selectedItemRef.current,
-                selectedItems: selectedItemsWithoutHovered,
-                topOnHover: true,
-                utils: renderUtils
-              });
-            } else {
-              // topStageZIndex가 없으면 hover된 항목을 selectedItems에 추가하지 않음 (성능 우선)
-              // renderEvent 함수가 hoveredItem을 별도로 처리하므로, selectedItems는 그대로 전달
-              // 이렇게 하면 hover 변경 시 선택된 항목들을 다시 그리지 않고 hover된 항목만 업데이트됨
-              renderEvent({
-                ctx: ctx,
-                hoveredItem: hovered,
-                selectedItem: selectedItemRef.current,
-                selectedItems: selectedItems,
-                topOnHover: false,
-                utils: renderUtils
-              });
-            }
+            } // Event Layer는 hover 효과 및 선택 상태를 덧그림
+            // topStageZIndex가 있으면 hover된 항목은 Top Stage에서도 처리되지만,
+            // Event Layer에서도 hover 스타일을 덧그려서 Base Layer 위에 표시됨
+
+
+            renderEvent({
+              ctx: ctx,
+              hasTopStage: topStageZIndex !== undefined,
+              hoveredItem: hovered,
+              selectedItem: selectedItemRef.current,
+              selectedItems: selectedItems,
+              utils: renderUtils
+            });
           }
         });
         layer.add(shape);
@@ -4231,10 +4204,10 @@
           var hoverSelectedItems = hoveredIsSelected ? [currentHovered] : [];
           renderEvent({
             ctx: ctx,
+            hasTopStage: true,
             hoveredItem: currentHovered,
             selectedItem: selectedItemRef.current,
             selectedItems: hoverSelectedItems,
-            topOnHover: true,
             utils: renderUtils
           });
         } else {
@@ -4373,8 +4346,8 @@
 
       if (topStageZIndex !== undefined) {
         // topStageZIndex가 설정된 경우 Top Layer에서 hover된 항목 렌더링
-        // Base Layer는 hover 상태 변경 시 재렌더링 불필요 (sceneFunc 내에서 hover 항목 제외 처리)
-        // Event Layer는 선택된 항목만 렌더링하므로 업데이트 필요
+        // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+        // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
         doRenderEvent();
         doRenderTop();
       } else if (renderEvent) {
@@ -4469,8 +4442,8 @@
       controller.setMapCursor('grab');
 
       if (topStageZIndex !== undefined) {
-        // Base Layer는 hover 상태 변경 시 재렌더링 불필요 (sceneFunc 내에서 hover 항목 제외 처리)
-        // Event Layer는 선택된 항목만 렌더링하므로 업데이트 필요
+        // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+        // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
         doRenderEvent();
         doRenderTop();
       } else if (renderEvent) {

package/package.json

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