@mint-ui/map 1.2.0-test.62 → 1.2.0-test.65

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

@@ -24,28 +24,48 @@ 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,
-      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 ? false : _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,
+      _a = props.enableViewportCulling,
+      enableViewportCulling = _a === void 0 ? false : _a,
+      _b = props.cullingMargin,
+      cullingMargin = _b === void 0 ? performance.DEFAULT_CULLING_MARGIN : _b,
+      _c = props.maxCacheSize,
+      maxCacheSize = _c === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _c,
       renderBase = props.renderBase,
-      renderEvent = props.renderEvent,
-      options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
-
+      options = tslib.__rest(props, ["data", "enableViewportCulling", "cullingMargin", "maxCacheSize", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
+
+
+  var _d = hasRenderEvent && 'renderEvent' in props ? props : {
+    disableInteraction: false,
+    enableMultiSelect: false,
+    onClick: undefined,
+    onMouseOut: undefined,
+    onMouseOver: undefined,
+    renderEvent: undefined,
+    selectedItem: undefined,
+    selectedItems: undefined,
+    topOnHover: false,
+    topStageZIndex: undefined
+  },
+      _e = _d.disableInteraction,
+      disableInteraction = _e === void 0 ? false : _e,
+      _f = _d.enableMultiSelect,
+      enableMultiSelect = _f === void 0 ? false : _f,
+      onClick = _d.onClick,
+      onMouseOut = _d.onMouseOut,
+      onMouseOver = _d.onMouseOver,
+      renderEvent = _d.renderEvent,
+      externalSelectedItem = _d.selectedItem,
+      externalSelectedItems = _d.selectedItems,
+      rawTopStageZIndex = _d.topStageZIndex,
+      _g = _d.topOnHover,
+      topOnHover = _g === void 0 ? false : _g; // topOnHover가 false이거나 없으면 topStageZIndex를 사용하지 못하도록 제한
+
+
+  var topStageZIndex = topOnHover && rawTopStageZIndex !== undefined ? rawTopStageZIndex : undefined;
   var controller = MintMapProvider.useMintMapController();
   var context$1 = context.useCanvasContext();
   var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
@@ -53,11 +73,18 @@ var CanvasMarkerLayer = function (props) {
   var divRef = React.useRef(document.createElement('div'));
   var divElement = divRef.current;
   var containerRef = React.useRef(null);
-  var markerRef = React.useRef(); // Konva Refs
+  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); // 상태 관리 Refs (React 리렌더링 최소화)
+  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);
@@ -148,24 +175,34 @@ var CanvasMarkerLayer = function (props) {
 
           var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }) : dataRef.current; // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
+          }) : dataRef.current; // topStageZIndex가 설정되고 topOnHover가 true인 경우 hover된 항목은 Top Layer에서 처리
+          // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
 
-          if (topOnHover && !renderEvent && hovered) {
+          if (topStageZIndex !== undefined && topOnHover && hovered) {
+            visibleItems = visibleItems.filter(function (item) {
+              return item.id !== hovered.id;
+            });
+          } else if (topOnHover && !renderEvent && hovered) {
             visibleItems = visibleItems.filter(function (item) {
               return item.id !== hovered.id;
             });
           } // 일반 항목들 먼저 렌더링
+          // topOnHover가 false이고 renderEvent가 있으면 선택된 항목도 Base Layer에서 렌더링
+          // (Event Layer에서 선택된 항목을 렌더링하지 않으므로)
+          // topOnHover가 true이거나 renderEvent가 없으면 선택된 항목은 Base Layer에서 스킵됨
 
 
+          var baseSelectedIds = !topOnHover && renderEvent ? selectedIdsRef.current : new Set();
           renderBase({
             ctx: ctx,
             hoveredItem: hovered,
             items: visibleItems,
-            selectedIds: selectedIdsRef.current,
+            selectedIds: baseSelectedIds,
             utils: renderUtils
-          }); // hover된 항목을 마지막에 렌더링하여 최상위에 표시
+          }); // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리하므로 여기서는 스킵
+          // hover된 항목을 마지막에 렌더링하여 최상위에 표시
 
-          if (topOnHover && !renderEvent && hovered) {
+          if (topStageZIndex === undefined && topOnHover && !renderEvent && hovered) {
             if (!enableViewportCullingRef.current || isInViewport(hovered)) {
               renderBase({
                 ctx: ctx,
@@ -199,9 +236,24 @@ var CanvasMarkerLayer = function (props) {
         sceneFunc: function (konvaContext) {
           var ctx = konvaContext;
           var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
-          var hovered = hoveredItemRef.current;
+          var hovered = hoveredItemRef.current; // topStageZIndex가 설정되고 topOnHover가 true이면 hover된 항목은 Top Layer에서 처리
+          // event 레이어에서는 hover된 항목을 완전히 제외하고 선택된 항목만 렌더링
+
+          if (topStageZIndex !== undefined && topOnHover && hovered) {
+            // hover된 항목을 제외한 선택된 항목들
+            var selectedItemsWithoutHovered = selectedItems.filter(function (item) {
+              return item.id !== hovered.id;
+            }); // 선택된 항목만 그리기 (hover된 항목은 Top Layer에서 처리)
 
-          if (topOnHover && hovered) {
+            renderEvent({
+              ctx: ctx,
+              hoveredItem: null,
+              selectedItem: selectedItemRef.current,
+              selectedItems: selectedItemsWithoutHovered,
+              topOnHover: topOnHover,
+              utils: renderUtils
+            });
+          } else if (topOnHover && hovered) {
             renderEvent({
               ctx: ctx,
               hoveredItem: null,
@@ -209,6 +261,7 @@ var CanvasMarkerLayer = function (props) {
               selectedItems: selectedItems.filter(function (item) {
                 return item.id !== hovered.id;
               }),
+              topOnHover: topOnHover,
               utils: renderUtils
             });
 
@@ -222,15 +275,25 @@ var CanvasMarkerLayer = function (props) {
                 hoveredItem: hovered,
                 selectedItem: selectedItemRef.current,
                 selectedItems: hoverSelectedItems,
+                topOnHover: topOnHover,
                 utils: renderUtils
               });
             }
           } else {
+            // topOnHover가 false일 때는 hover된 항목을 나중에 그리지 않음
+            // 하지만 hover 스타일은 적용해야 하므로, hover된 항목이 selectedItems에 포함되어 있지 않으면 추가
+            // renderEvent 함수에 topOnHover 정보를 전달하여,
+            // renderEvent 함수 내부에서 topOnHover가 false일 때는 hover된 항목을 마지막에 그리지 않도록 함
+            var hoveredIsSelected = hovered ? selectedItems.some(function (item) {
+              return item.id === hovered.id;
+            }) : false;
+            var finalSelectedItems = hovered && !hoveredIsSelected && !topOnHover ? tslib.__spreadArray(tslib.__spreadArray([], selectedItems, true), [hovered], false) : selectedItems;
             renderEvent({
               ctx: ctx,
               hoveredItem: hovered,
               selectedItem: selectedItemRef.current,
-              selectedItems: selectedItems,
+              selectedItems: finalSelectedItems,
+              topOnHover: topOnHover,
               utils: renderUtils
             });
           }
@@ -239,6 +302,79 @@ var CanvasMarkerLayer = function (props) {
       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 || !topOnHover) 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 ctx = konvaContext;
+      var currentHovered = hoveredItemRef.current; // hover된 항목이 없으면 아무것도 그리지 않음
+
+      if (!currentHovered) return; // 뷰포트 컬링 확인
+
+      if (enableViewportCullingRef.current && !isInViewport(currentHovered)) {
+        return;
+      }
+
+      var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
+      var hoveredIsSelected = selectedItems.some(function (item) {
+        return item.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,
+          hoveredItem: currentHovered,
+          selectedItem: selectedItemRef.current,
+          selectedItems: hoverSelectedItems,
+          topOnHover: topOnHover,
+          utils: renderUtils
+        });
+      } else {
+        // renderEvent가 없으면 base를 hover 스타일로 그리기
+        renderBase({
+          ctx: ctx,
+          hoveredItem: currentHovered,
+          items: [currentHovered],
+          selectedIds: selectedIdsRef.current,
+          utils: renderUtils
+        });
+      }
+    });
     layer.batchDraw();
   }; // 전체 즉시 렌더링
 
@@ -250,11 +386,19 @@ var CanvasMarkerLayer = function (props) {
 
     buildSpatialIndex();
     doRenderBase();
-    doRenderEvent();
+    doRenderEvent(); // 메인 stage의 transform을 topStage에도 동기화
+
+    if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+      topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+    }
+
+    if (topStageZIndex !== undefined && topOnHover) {
+      doRenderTop();
+    }
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _g = hooks.createMapEventHandlers({
+  var _h = hooks.createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
     containerRef: containerRef,
@@ -265,19 +409,23 @@ var CanvasMarkerLayer = function (props) {
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _g.handleIdle,
-      handleZoomStart = _g.handleZoomStart,
-      handleZoomEnd = _g.handleZoomEnd,
-      handleCenterChanged = _g.handleCenterChanged,
-      handleDragStartShared = _g.handleDragStart,
-      handleDragEndShared = _g.handleDragEnd;
+      handleIdle = _h.handleIdle,
+      handleZoomStart = _h.handleZoomStart,
+      handleZoomEnd = _h.handleZoomEnd,
+      handleCenterChanged = _h.handleCenterChanged,
+      handleDragStartShared = _h.handleDragStart,
+      handleDragEndShared = _h.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
 
     dragStartHoveredItemRef.current = hoveredItemRef.current;
     draggingRef.current = true;
-    controller.setMapCursor('grabbing');
+    controller.setMapCursor('grabbing'); // 메인 stage의 transform을 topStage에도 동기화
+
+    if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+      topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+    }
   };
 
   var handleDragEnd = function () {
@@ -285,7 +433,11 @@ var CanvasMarkerLayer = function (props) {
     draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
 
     dragStartHoveredItemRef.current = null;
-    controller.setMapCursor('grab');
+    controller.setMapCursor('grab'); // 메인 stage의 transform을 topStage에도 동기화
+
+    if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+      topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+    }
   }; // Hit Test: 특정 좌표의 마커 찾기
 
 
@@ -328,7 +480,19 @@ var CanvasMarkerLayer = function (props) {
       controller.setMapCursor(hoveredData ? 'pointer' : 'grab');
     }
 
-    if (renderEvent) {
+    if (topStageZIndex !== undefined && topOnHover) {
+      // topStageZIndex가 설정되고 topOnHover가 true인 경우 Top Layer에서 hover된 항목 렌더링
+      // base 레이어와 event 레이어도 업데이트 (hover된 항목 제외)
+      doRenderBase();
+      doRenderEvent();
+      doRenderTop();
+    } else if (renderEvent) {
+      // renderEvent가 있을 때는 Event Layer 업데이트
+      // topOnHover가 false일 때는 Base Layer에서도 hover 스타일을 적용해야 하므로 Base Layer도 업데이트
+      if (!topOnHover) {
+        doRenderBase();
+      }
+
       doRenderEvent();
     } else if (topOnHover) {
       doRenderBase();
@@ -365,6 +529,10 @@ var CanvasMarkerLayer = function (props) {
 
     doRenderBase();
     doRenderEvent();
+
+    if (topStageZIndex !== undefined && topOnHover) {
+      doRenderTop();
+    }
   }; // 클릭 이벤트 핸들러
 
 
@@ -425,13 +593,33 @@ var CanvasMarkerLayer = function (props) {
     if (!prevHovered) return;
     hoveredItemRef.current = null;
     controller.setMapCursor('grab');
-    doRenderEvent();
+
+    if (topStageZIndex !== undefined && topOnHover) {
+      // base 레이어와 event 레이어도 업데이트 (hover된 항목 다시 표시)
+      doRenderBase();
+      doRenderEvent();
+      doRenderTop();
+    } else if (renderEvent) {
+      // renderEvent가 있을 때는 Event Layer 업데이트
+      // topOnHover가 false일 때는 Base Layer에서도 hover 스타일을 제거해야 하므로 Base Layer도 업데이트
+      if (!topOnHover) {
+        doRenderBase();
+      }
+
+      doRenderEvent();
+    }
+
     onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
   }; // DOM 초기화
 
 
   React.useEffect(function () {
-    divElement.style.width = 'fit-content';
+    divElement.style.width = 'fit-content'; // Top Layer용 div도 초기화 (topStageZIndex가 설정되고 topOnHover가 true인 경우)
+
+    if (topStageZIndex !== undefined && topOnHover) {
+      topDivElement.style.width = 'fit-content';
+    }
+
     return function () {
       if (!markerRef.current) return;
       controller.clearDrawable(markerRef.current);
@@ -449,19 +637,18 @@ var CanvasMarkerLayer = function (props) {
 
     if (markerRef.current) {
       controller.updateMarker(markerRef.current, markerOptions);
-      return;
-    }
-
-    markerRef.current = new MapDrawables.Marker(markerOptions);
-    markerRef.current.element = divElement;
-    controller.createMarker(markerRef.current);
+    } else {
+      markerRef.current = new MapDrawables.Marker(markerOptions);
+      markerRef.current.element = divElement;
+      controller.createMarker(markerRef.current);
 
-    if (divElement.parentElement) {
-      divElement.parentElement.style.pointerEvents = 'none';
-    }
+      if (divElement.parentElement) {
+        divElement.parentElement.style.pointerEvents = 'none';
+      }
 
-    if (options.zIndex !== undefined) {
-      controller.setMarkerZIndex(markerRef.current, options.zIndex);
+      if (options.zIndex !== undefined) {
+        controller.setMarkerZIndex(markerRef.current, options.zIndex);
+      }
     }
   }, [options]); // Konva 초기화 및 이벤트 리스너 등록
 
@@ -615,19 +802,179 @@ var CanvasMarkerLayer = function (props) {
 
       renderAllImmediate();
     }
-  }, [enableViewportCulling]); // 외부 selectedItems 동기화
+  }, [enableViewportCulling]); // Top Layer용 별도 캔버스 DOM 생성 (topStageZIndex가 설정되고 topOnHover가 true인 경우)
+
+  React.useEffect(function () {
+    if (topStageZIndex === undefined || !topOnHover) 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);
+      } // 메인 stage의 transform을 topStage에도 동기화
+
+
+      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 () {
+      // topMarker의 position을 메인 marker와 동일하게 업데이트
+      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;
     hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
     doRenderBase();
     doRenderEvent();
+
+    if (topStageZIndex !== undefined && topOnHover) {
+      doRenderTop();
+    }
   }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
 
   React.useEffect(function () {
     if (!stageRef.current) return;
     selectedItemRef.current = externalSelectedItem;
     doRenderEvent();
+
+    if (topStageZIndex !== undefined && topOnHover) {
+      doRenderTop();
+    }
   }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
 
   React.useEffect(function () {
@@ -648,14 +995,21 @@ var CanvasMarkerLayer = function (props) {
     selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();
   }, [data]);
-  return reactDom.createPortal(React__default["default"].createElement("div", {
+  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);
+  }), divElement), topStageZIndex !== undefined && reactDom.createPortal(React__default["default"].createElement("div", {
+    ref: topContainerRef,
+    style: {
+      height: '100%',
+      position: 'absolute',
+      width: '100%'
+    }
+  }), topDivElement));
 };
 
 exports.CanvasProvider = context.CanvasProvider;