@mint-ui/map 1.2.0-test.10 → 1.2.0-test.11

package/dist/components/mint-map/core/MintMapController.d.ts

@@ -24,6 +24,7 @@ export declare abstract class MintMapController {
     abstract updateMarker(marker: Marker, options: MarkerOptions): void;
     abstract clearDrawable(drawable: Drawable): boolean;
     abstract markerToTheTop(marker: Marker): void;
+    abstract restoreMarkerZIndex(marker: Marker): void;
     abstract isMapDragged(): boolean;
     abstract setMapDragged(value: boolean): void;
     abstract setMarkerZIndex(marker: Marker, zIndex: number): void;

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

@@ -4,26 +4,17 @@ import { KonvaCanvasMarkerData, CanvasDataType, CustomRenderBase, CustomRenderAn
 export { KonvaMarkerProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "./shared";
 export type { KonvaCanvasMarkerOption, Paths, KonvaCanvasMarkerData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "./shared";
 /**
- * WoongKonvaMarker 컴포넌트 Props
- * @template T 마커 데이터의 추가 속성 타입
+ * 공통 Props (MARKER와 POLYGON 모두 사용)
  */
-export interface WoongKonvaMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
+interface WoongCanvasLayerBaseProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
     /** 렌더링할 마커 데이터 배열 */
     markers: KonvaCanvasMarkerData<T>[];
-    /** 데이터 타입 (MARKER 또는 POLYGON) */
-    dataType: CanvasDataType;
     /** 마커 클릭 시 호출되는 콜백 (선택) */
     onClick?: (payload: KonvaCanvasMarkerData<T>, selectedIds: Set<string>) => void;
     /** 마커에 마우스 오버 시 호출되는 콜백 (선택) */
     onMouseOver?: (payload: KonvaCanvasMarkerData<T>) => void;
     /** 마커에서 마우스 아웃 시 호출되는 콜백 (선택) */
     onMouseOut?: (payload: KonvaCanvasMarkerData<T>) => void;
-    /** Base Layer 렌더링 함수 (필수) */
-    renderBase: CustomRenderBase<T>;
-    /** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
-    renderAnimation?: CustomRenderAnimation<T>;
-    /** Event Layer 렌더링 함수 (선택) */
-    renderEvent?: CustomRenderEvent<T>;
     /** 다중 선택 활성화 여부 (기본: false) */
     enableMultiSelect?: boolean;
     /** hover 시 마커를 최상단으로 표시 (기본: false) */
@@ -41,6 +32,54 @@ export interface WoongKonvaMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' |
     /** 상호작용 비활성화 (hover, click 등 모든 이벤트 차단) */
     disableInteraction?: boolean;
 }
+/**
+ * MARKER 타입 Props - 커스텀 렌더링 필수
+ */
+interface WoongCanvasLayerPropsForMarker<T> extends WoongCanvasLayerBaseProps<T> {
+    /** 데이터 타입 */
+    dataType: CanvasDataType.MARKER;
+    /** Base Layer 렌더링 함수 (필수) */
+    renderBase: CustomRenderBase<T>;
+    /** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
+    renderAnimation?: CustomRenderAnimation<T>;
+    /** Event Layer 렌더링 함수 (선택) */
+    renderEvent?: CustomRenderEvent<T>;
+}
+/**
+ * POLYGON 타입 Props - 스타일 속성으로 내부 처리
+ */
+interface WoongCanvasLayerPropsForPolygon<T> extends WoongCanvasLayerBaseProps<T> {
+    /** 데이터 타입 */
+    dataType: CanvasDataType.POLYGON;
+    /** 기본 폴리곤 채우기 색상 (필수) */
+    baseFillColor: string;
+    /** 기본 폴리곤 테두리 색상 (필수) */
+    baseStrokeColor: string;
+    /** 기본 폴리곤 테두리 두께 (필수) */
+    baseLineWidth: number;
+    /** 선택된 폴리곤 채우기 색상 (필수) */
+    selectedFillColor: string;
+    /** 선택된 폴리곤 테두리 색상 (필수) */
+    selectedStrokeColor: string;
+    /** 선택된 폴리곤 테두리 두께 (필수) */
+    selectedLineWidth: number;
+    /** 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor) */
+    activeFillColor?: string;
+    /** 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor) */
+    activeStrokeColor?: string;
+    /** 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth) */
+    activeLineWidth?: number;
+    /** Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor) */
+    hoveredFillColor?: string;
+    /** Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor) */
+    hoveredStrokeColor?: string;
+    /** Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth) */
+    hoveredLineWidth?: number;
+}
+/**
+ * 최종 Props 타입 - Discriminated Union
+ */
+export declare type WoongCanvasLayerProps<T> = WoongCanvasLayerPropsForMarker<T> | WoongCanvasLayerPropsForPolygon<T>;
 /**
  * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
  *
@@ -50,5 +89,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, selectedItem: externalSelectedItem, disableInteraction, ...options }: WoongKonvaMarkerProps<T>) => React.ReactPortal;
-export default WoongKonvaMarker;
+declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.ReactPortal;
+export default WoongCanvasLayer;

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 }; }
 
@@ -35,30 +36,27 @@ var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
  * @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,
-      externalSelectedItem = _a.selectedItem,
-      _g = _a.disableInteraction,
-      disableInteraction = _g === void 0 ? false : _g,
-      options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
+var WoongCanvasLayerComponent = function (props) {
+  var markers = props.markers,
+      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, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -336,7 +334,7 @@ var WoongKonvaMarkerComponent = function (_a) {
       }
     }
   }; // --------------------------------------------------------------------------
-  // 렌더링 함수
+  // 렌더링 함수 결정 (dataType에 따라)
   // --------------------------------------------------------------------------
 
   /**
@@ -351,6 +349,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.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
+  }();
   /**
    * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
    *
@@ -1056,13 +1066,11 @@ var WoongKonvaMarkerComponent = function (_a) {
   }, [markers]);
   return reactDom.createPortal(React__default["default"].createElement("div", {
     ref: containerRef,
-    style: tslib.__assign({
+    style: {
       position: 'absolute',
       width: '100%',
       height: '100%'
-    }, disableInteraction && {
-      pointerEvents: 'none'
-    })
+    }
   }), divElement);
 };
 /**
@@ -1076,7 +1084,7 @@ var WoongKonvaMarkerComponent = function (_a) {
  */
 
 
-var WoongKonvaMarker = React__default["default"].memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
+var WoongCanvasLayer = React__default["default"].memo(WoongCanvasLayerComponent, function (prevProps, nextProps) {
   // 1. markers 비교
   var prevMarkers = prevProps.markers;
   var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
@@ -1127,4 +1135,4 @@ Object.defineProperty(exports, 'CanvasDataType', {
 exports.KonvaMarkerProvider = context.KonvaMarkerProvider;
 exports.LRUCache = performance.LRUCache;
 exports.SpatialHashGrid = performance.SpatialHashGrid;
-exports["default"] = WoongKonvaMarker;
+exports["default"] = WoongCanvasLayer;

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

@@ -1,3 +1,3 @@
-export { default as WoongKonvaMarker } from "./WoongKonvaMarker";
-export * from "./WoongKonvaMarker";
+export { default as WoongCanvasLayer } from "./WoongCanvasLayer";
+export * from "./WoongCanvasLayer";
 export * from "./shared";

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

@@ -0,0 +1,59 @@
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ */
+import { CustomRenderBase, CustomRenderEvent, KonvaCanvasMarkerData } from "./types";
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ */
+export declare const drawPolygon: ({ ctx, polygonOffsets, isDonutPolygon, fillColor, strokeColor, lineWidth }: {
+    ctx: CanvasRenderingContext2D;
+    polygonOffsets: number[][][][];
+    isDonutPolygon: boolean;
+    fillColor: string;
+    strokeColor: string;
+    lineWidth: number;
+}) => void;
+/**
+ * 폴리곤 Base 렌더링 함수
+ *
+ * @param baseFillColor 기본 폴리곤 채우기 색상
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
+ * @returns Base Layer 렌더링 함수
+ *
+ * @example
+ * const renderBase = renderPolygonBase(
+ *   'rgba(255, 100, 100, 0.5)',
+ *   'rgba(200, 50, 50, 0.8)',
+ *   2
+ * );
+ */
+export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<KonvaCanvasMarkerData<T>>;
+/**
+ * 폴리곤 Event 렌더링 함수
+ *
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @returns Event Layer 렌더링 함수
+ *
+ * @example
+ * const renderEvent = renderPolygonEvent(
+ *   'rgba(255, 193, 7, 0.7)',
+ *   'rgba(255, 152, 0, 1)',
+ *   4,
+ *   'rgba(255, 0, 0, 0.8)',
+ *   undefined,
+ *   undefined,
+ *   'rgba(100, 150, 255, 0.8)'
+ * );
+ */
+export declare const renderPolygonEvent: <T = any>(selectedFillColor: string, selectedStrokeColor: string, selectedLineWidth: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<KonvaCanvasMarkerData<T>>;

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

@@ -0,0 +1,226 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ */
+
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ */
+var drawPolygon = function (_a) {
+  var ctx = _a.ctx,
+      polygonOffsets = _a.polygonOffsets,
+      isDonutPolygon = _a.isDonutPolygon,
+      fillColor = _a.fillColor,
+      strokeColor = _a.strokeColor,
+      lineWidth = _a.lineWidth;
+
+  for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+    var multiPolygon = polygonOffsets_1[_i];
+
+    if (isDonutPolygon) {
+      ctx.beginPath(); // 1. 외부 폴리곤 그리기
+
+      if (multiPolygon[0] && multiPolygon[0].length > 0) {
+        ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
+
+        for (var i = 1; i < multiPolygon[0].length; i++) {
+          ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
+        }
+
+        ctx.closePath();
+      } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
+
+
+      for (var j = 1; j < multiPolygon.length; j++) {
+        var innerPolygon = multiPolygon[j];
+        if (innerPolygon.length === 0) continue;
+        ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
+
+        for (var i = 1; i < innerPolygon.length; i++) {
+          ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
+        }
+
+        ctx.closePath();
+      } // 3. evenodd fill rule로 구멍 뚫기
+
+
+      ctx.fillStyle = fillColor;
+      ctx.fill('evenodd'); // 4. 외곽선 그리기
+
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = lineWidth;
+      ctx.stroke();
+    } else {
+      // 일반 폴리곤
+      for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
+        var polygonGroup = multiPolygon_1[_b];
+        if (!polygonGroup.length) continue;
+        ctx.beginPath();
+        var firstPoint = polygonGroup[0];
+        ctx.moveTo(firstPoint[0], firstPoint[1]);
+
+        for (var i = 1; i < polygonGroup.length; i++) {
+          var point = polygonGroup[i];
+          ctx.lineTo(point[0], point[1]);
+        }
+
+        ctx.closePath();
+        ctx.fillStyle = fillColor;
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = lineWidth;
+        ctx.fill();
+        ctx.stroke();
+      }
+    }
+  }
+};
+/**
+ * 폴리곤 Base 렌더링 함수
+ *
+ * @param baseFillColor 기본 폴리곤 채우기 색상
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
+ * @returns Base Layer 렌더링 함수
+ *
+ * @example
+ * const renderBase = renderPolygonBase(
+ *   'rgba(255, 100, 100, 0.5)',
+ *   'rgba(200, 50, 50, 0.8)',
+ *   2
+ * );
+ */
+
+var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        items = _a.items,
+        selectedIds = _a.selectedIds,
+        utils = _a.utils;
+
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
+
+      if (selectedIds.has(item.id)) continue;
+      if (!item.paths) continue;
+      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+      if (!polygonOffsets) continue;
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: item.isDonutPolygon || false,
+        fillColor: baseFillColor,
+        strokeColor: baseStrokeColor,
+        lineWidth: baseLineWidth
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Event 렌더링 함수
+ *
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @returns Event Layer 렌더링 함수
+ *
+ * @example
+ * const renderEvent = renderPolygonEvent(
+ *   'rgba(255, 193, 7, 0.7)',
+ *   'rgba(255, 152, 0, 1)',
+ *   4,
+ *   'rgba(255, 0, 0, 0.8)',
+ *   undefined,
+ *   undefined,
+ *   'rgba(100, 150, 255, 0.8)'
+ * );
+ */
+
+var renderPolygonEvent = function (selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+  // 기본값 설정 (selected 기준)
+  var _activeFillColor = activeFillColor || selectedFillColor;
+
+  var _activeStrokeColor = activeStrokeColor || selectedStrokeColor;
+
+  var _activeLineWidth = activeLineWidth || selectedLineWidth;
+
+  var _hoveredFillColor = hoveredFillColor || selectedFillColor;
+
+  var _hoveredStrokeColor = hoveredStrokeColor || selectedStrokeColor;
+
+  var _hoveredLineWidth = hoveredLineWidth || selectedLineWidth;
+
+  return function (_a) {
+    var ctx = _a.ctx,
+        hoveredItem = _a.hoveredItem,
+        utils = _a.utils,
+        selectedItems = _a.selectedItems,
+        selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+
+    if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+      for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
+        var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+        if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
+        if (!item.paths) continue;
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue;
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: selectedFillColor,
+          strokeColor: selectedStrokeColor,
+          lineWidth: selectedLineWidth
+        });
+      }
+    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+      if (polygonOffsets) {
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: selectedItem.isDonutPolygon || false,
+          fillColor: _activeFillColor,
+          strokeColor: _activeStrokeColor,
+          lineWidth: _activeLineWidth
+        });
+      }
+    } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+      if (!polygonOffsets) return;
+      var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
+        return item.id === hoveredItem.id;
+      });
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: hoveredItem.isDonutPolygon || false,
+        fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
+        strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
+        lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
+      });
+    }
+  };
+};
+
+exports.drawPolygon = drawPolygon;
+exports.renderPolygonBase = renderPolygonBase;
+exports.renderPolygonEvent = renderPolygonEvent;

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

@@ -29,3 +29,4 @@ export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData:
  * 마커 히트 테스트
  */
 export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasMarkerData<any>, getMarkerOffset: (data: KonvaCanvasMarkerData<any>) => Offset | null) => boolean;
+export declare const hexToRgba: (hexColor: string, alpha?: number) => string;

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

@@ -156,9 +156,27 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
   var y = markerOffset.y - boxHeight - tailHeight;
   return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
 };
+var hexToRgba = function (hexColor, alpha) {
+  if (alpha === void 0) {
+    alpha = 1;
+  } // NOTE: 입력된 hexColor에서 "#" 제거
+
+
+  var hex = hexColor.replace('#', ''); // NOTE: 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
+
+  if (hex.length === 6) {
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 4), 16);
+    var b = parseInt(hex.substring(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+  }
+
+  throw new Error('Invalid hex color format');
+};
 
 exports.computeMarkerOffset = computeMarkerOffset;
 exports.computePolygonOffsets = computePolygonOffsets;
+exports.hexToRgba = hexToRgba;
 exports.isPointInMarkerData = isPointInMarkerData;
 exports.isPointInPolygon = isPointInPolygon;
 exports.isPointInPolygonData = isPointInPolygonData;

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js

@@ -172,7 +172,7 @@ function MapMarkerWrapper(_a) {
   var onMouseOverHandler = function (e) {
     var _a;
 
-    var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
+    var marker = markerRef.current;
 
     if (marker) {
       var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -185,6 +185,25 @@ function MapMarkerWrapper(_a) {
 
       next && topOnHover && controller.markerToTheTop(marker);
     }
+  }; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
+
+
+  var onMouseLeaveHandler = function (e) {
+    var _a;
+
+    var marker = markerRef.current;
+
+    if (marker) {
+      var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
+      var next = true;
+
+      if (mouseOutHandler) {
+        var hasNext = mouseOutHandler(e);
+        hasNext !== undefined && (next = hasNext);
+      }
+
+      next && topOnHover && controller.restoreMarkerZIndex(marker);
+    }
   }; //create object
 
 
@@ -202,10 +221,12 @@ function MapMarkerWrapper(_a) {
     }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
 
     divElement.addEventListener('mouseover', onMouseOverHandler);
+    divElement.addEventListener('mouseleave', onMouseLeaveHandler);
     return function () {
       divElement.removeEventListener('click', onClickHandler);
       divElement.removeEventListener('mousedown', onMousedownHandler);
       divElement.removeEventListener('mouseover', onMouseOverHandler);
+      divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
 
       if (markerRef.current) {
         controller.clearDrawable(markerRef.current);

package/dist/components/mint-map/google/GoogleMintMapController.d.ts

@@ -28,6 +28,7 @@ export declare class GoogleMintMapController extends MintMapController {
     private getMaxZIndex;
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
+    restoreMarkerZIndex(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
     private dragged;
     isMapDragged(): boolean;

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -20,7 +20,7 @@ var polygon = require('../core/util/polygon.js');
 require('../naver/NaverMintMapController.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
-require('../core/advanced/woongCanvas/WoongKonvaMarker.js');
+require('../core/advanced/woongCanvas/WoongCanvasLayer.js');
 require('../core/advanced/woongCanvas/shared/types.js');
 require('../core/advanced/woongCanvas/shared/context.js');
 require('../core/advanced/woongCanvas/shared/performance.js');
@@ -340,6 +340,10 @@ function (_super) {
     }
   };
 
+  GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
+    // 이 기능은 Naver Maps에서만 사용 가능합니다.
+  };
+
   GoogleMintMapController.prototype.clearDrawable = function (drawable) {
     if (drawable && drawable.native) {
       if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {

package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts

@@ -31,6 +31,7 @@ export declare class KakaoMintMapController extends MintMapController {
     private getMaxZIndex;
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
+    restoreMarkerZIndex(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
     private dragged;
     isMapDragged(): boolean;

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -21,7 +21,7 @@ var polygon = require('../core/util/polygon.js');
 require('../naver/NaverMintMapController.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
-require('../core/advanced/woongCanvas/WoongKonvaMarker.js');
+require('../core/advanced/woongCanvas/WoongCanvasLayer.js');
 require('../core/advanced/woongCanvas/shared/types.js');
 require('../core/advanced/woongCanvas/shared/context.js');
 require('../core/advanced/woongCanvas/shared/performance.js');
@@ -348,6 +348,10 @@ function (_super) {
     }
   };
 
+  KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
+    // 이 기능은 Naver Maps에서만 사용 가능합니다.
+  };
+
   KakaoMintMapController.prototype.clearDrawable = function (drawable) {
     var _this = this;