@mint-ui/map 1.2.0-test.56 → 1.2.0-test.58

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MarkerOptions } from '../../../types';
+import { MarkerOptions, Position } from '../../../types';
 import { CanvasData, CustomRenderBase, CustomRenderEvent } from '../shared';
 export { CanvasDataType, CanvasProvider, LRUCache, SpatialHashGrid } from '../shared';
 export type { CanvasData, CanvasOption, CustomRenderBase, CustomRenderEvent, RenderBaseParams, RenderEventParams, RenderUtils } from '../shared';
@@ -14,7 +14,12 @@ export interface CanvasMarkerLayerProps<T> extends Pick<MarkerOptions, 'zIndex'
     /** 마커 클릭 시 호출되는 콜백 함수 */
     onClick?: (payload: CanvasData<T>, selectedIds: Set<string>) => void;
     /** 마커에 마우스 오버 시 호출되는 콜백 함수 */
-    onMouseOver?: (payload: CanvasData<T>) => void;
+    onMouseOver?: (payload: CanvasData<T> & {
+        boundingBox?: {
+            bottomRight: Position;
+            leftTop: Position;
+        };
+    }) => void;
     /** 마커에서 마우스 아웃 시 호출되는 콜백 함수 */
     onMouseOut?: (payload: CanvasData<T>) => void;
     /** 다중 선택 활성화 여부 (기본값: false) */
@@ -33,8 +38,6 @@ export interface CanvasMarkerLayerProps<T> extends Pick<MarkerOptions, 'zIndex'
     selectedItem?: CanvasData<T> | null;
     /** 상호작용 비활성화 여부 (기본값: false) */
     disableInteraction?: boolean;
-    /** hover 시 레이어의 z-index를 변경할 값 (지정 시 hover 시에만 적용) */
-    hoverZIndex?: number;
     /** Base Layer 렌더링 함수 (필수) */
     renderBase: CustomRenderBase<T>;
     /** Event Layer 렌더링 함수 (선택) */

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

@@ -7,7 +7,7 @@ var Konva = require('konva');
 var React = require('react');
 var reactDom = require('react-dom');
 var MapDrawables = require('../../../types/MapDrawables.js');
-require('../../../types/MapTypes.js');
+var MapTypes = require('../../../types/MapTypes.js');
 require('../../../types/MapEventTypes.js');
 var MintMapProvider = require('../../provider/MintMapProvider.js');
 var context = require('../shared/context.js');
@@ -42,10 +42,9 @@ var CanvasMarkerLayer = function (props) {
       externalSelectedItem = props.selectedItem,
       _f = props.disableInteraction,
       disableInteraction = _f === void 0 ? false : _f,
-      hoverZIndex = props.hoverZIndex,
       renderBase = props.renderBase,
       renderEvent = props.renderEvent,
-      options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "hoverZIndex", "renderBase", "renderEvent"]);
+      options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
 
   var controller = MintMapProvider.useMintMapController();
   var context$1 = context.useCanvasContext();
@@ -75,9 +74,7 @@ var CanvasMarkerLayer = function (props) {
     y: 0
   }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
 
-  var dragStartHoveredItemRef = React.useRef(null); // 원래 z-index 저장 (hoverZIndex 사용 시 복원용)
-
-  var originalZIndexRef = React.useRef(currentZIndex); // 성능 최적화 Refs
+  var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
 
   var offsetCacheRef = React.useRef(new performance.LRUCache(maxCacheSize));
   var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
@@ -323,21 +320,7 @@ var CanvasMarkerLayer = function (props) {
       return;
     }
 
-    var prevHovered = hoveredItemRef.current;
-    hoveredItemRef.current = hoveredData; // hoverZIndex가 설정되어 있고 마커가 존재할 때 z-index 변경
-
-    if (hoverZIndex !== undefined && markerRef.current) {
-      // hover 상태가 변경될 때만 z-index 업데이트
-      if (prevHovered !== hoveredData) {
-        // 이전 hover가 끝났을 때 원래 z-index로 복원
-        if (prevHovered && !hoveredData) {
-          controller.setMarkerZIndex(markerRef.current, originalZIndexRef.current);
-        } // 새로운 hover가 시작될 때 hoverZIndex로 변경
-        else if (hoveredData && !prevHovered) {
-          controller.setMarkerZIndex(markerRef.current, hoverZIndex);
-        }
-      }
-    }
+    hoveredItemRef.current = hoveredData;
 
     if (draggingRef.current) {
       controller.setMapCursor('grabbing');
@@ -394,6 +377,29 @@ var CanvasMarkerLayer = function (props) {
     if (!clickedData) return;
     handleLocalClick(clickedData);
     onClick === null || onClick === void 0 ? void 0 : onClick(clickedData, selectedIdsRef.current);
+  }; // 마커 바운딩 박스의 왼쪽 상단과 우측 하단을 위도/경도로 변환
+
+
+  var getMarkerBoundingBoxCoordinates = function (item) {
+    try {
+      var offset = getOrComputeMarkerOffset(item);
+      if (!offset) return null;
+      var boundingBox = computeBoundingBox(item);
+      if (!boundingBox) return null; // 왼쪽 상단 좌표 (minX, minY)
+
+      var leftTopOffset = new MapTypes.Offset(boundingBox.minX, boundingBox.minY);
+      var leftTop = controller.offsetToPosition(leftTopOffset); // 우측 하단 좌표 (maxX, maxY)
+
+      var bottomRightOffset = new MapTypes.Offset(boundingBox.maxX, boundingBox.maxY);
+      var bottomRight = controller.offsetToPosition(bottomRightOffset);
+      return {
+        bottomRight: bottomRight,
+        leftTop: leftTop
+      };
+    } catch (error) {
+      console.error('[CanvasMarkerLayer] getMarkerBoundingBoxCoordinates error:', error, item);
+      return null;
+    }
   }; // 마우스 이동 이벤트 핸들러 (hover 감지)
 
 
@@ -408,7 +414,16 @@ var CanvasMarkerLayer = function (props) {
     if (prevHovered === hoveredItem) return;
     setHovered(hoveredItem);
     if (prevHovered) onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
-    if (hoveredItem) onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(hoveredItem);
+
+    if (hoveredItem) {
+      var boundingBox = getMarkerBoundingBoxCoordinates(hoveredItem); // boundingBox를 항상 포함하도록 수정
+
+      var payload = tslib.__assign(tslib.__assign({}, hoveredItem), {
+        boundingBox: boundingBox || undefined
+      });
+
+      onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(payload);
+    }
   }; // 마우스가 맵 영역을 벗어날 때 hover 상태 초기화
 
 
@@ -416,12 +431,7 @@ var CanvasMarkerLayer = function (props) {
     if (disableInteractionRef.current) return;
     var prevHovered = hoveredItemRef.current;
     if (!prevHovered) return;
-    hoveredItemRef.current = null; // hoverZIndex가 설정되어 있으면 원래 z-index로 복원
-
-    if (hoverZIndex !== undefined && markerRef.current) {
-      controller.setMarkerZIndex(markerRef.current, originalZIndexRef.current);
-    }
-
+    hoveredItemRef.current = null;
     controller.setMapCursor('grab');
     doRenderEvent();
     onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
@@ -446,16 +456,7 @@ var CanvasMarkerLayer = function (props) {
     }, options);
 
     if (markerRef.current) {
-      controller.updateMarker(markerRef.current, markerOptions); // z-index가 변경되었을 때 originalZIndexRef 업데이트
-
-      if (options.zIndex !== undefined) {
-        originalZIndexRef.current = options.zIndex; // hover 상태가 아닐 때만 z-index 업데이트 (hover 중이면 hoverZIndex 유지)
-
-        if (!hoveredItemRef.current || hoverZIndex === undefined) {
-          controller.setMarkerZIndex(markerRef.current, options.zIndex);
-        }
-      }
-
+      controller.updateMarker(markerRef.current, markerOptions);
       return;
     }
 
@@ -468,7 +469,6 @@ var CanvasMarkerLayer = function (props) {
     }
 
     if (options.zIndex !== undefined) {
-      originalZIndexRef.current = options.zIndex;
       controller.setMarkerZIndex(markerRef.current, options.zIndex);
     }
   }, [options]); // Konva 초기화 및 이벤트 리스너 등록
@@ -532,6 +532,24 @@ var CanvasMarkerLayer = function (props) {
     var componentInstance = null;
 
     if (context$1) {
+      // context를 통한 onMouseOver 호출 시에도 boundingBox를 포함하도록 래핑
+      var wrappedOnMouseOver = onMouseOver ? function (payload) {
+        var boundingBox = getMarkerBoundingBoxCoordinates(payload);
+
+        if (boundingBox) {
+          var enhancedPayload = tslib.__assign(tslib.__assign({}, payload), {
+            boundingBox: boundingBox
+          });
+
+          onMouseOver(enhancedPayload);
+        } else {
+          var enhancedPayload = tslib.__assign(tslib.__assign({}, payload), {
+            boundingBox: undefined
+          });
+
+          onMouseOver(enhancedPayload);
+        }
+      } : undefined;
       componentInstance = {
         findData: findData,
         getSelectedIds: function () {
@@ -546,7 +564,7 @@ var CanvasMarkerLayer = function (props) {
         },
         onClick: onClick,
         onMouseOut: onMouseOut,
-        onMouseOver: onMouseOver,
+        onMouseOver: wrappedOnMouseOver,
         setHovered: setHovered,
         zIndex: currentZIndex
       };

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

@@ -139,7 +139,13 @@ interface CanvasPolygonLayerPropsWithIndividualStyles<T> extends CanvasPolygonLa
     hoveredLineWidth?: number;
     /** 다른 방식 props는 사용 불가 */
     renderStyle?: never;
-    customStyle?: never;
+    /**
+     * 폴리곤 스타일 커스터마이징 함수 (선택)
+     *
+     * customStyle이 제공되면 우선적으로 사용되며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+     * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+     */
+    customStyle?: PolygonStyleCustomizer<T>;
 }
 /**
  * 객체 Props 방식
@@ -171,13 +177,19 @@ interface CanvasPolygonLayerPropsWithObjectStyle<T> extends CanvasPolygonLayerBa
     baseFillColor?: never;
     baseLineWidth?: never;
     baseStrokeColor?: never;
-    customStyle?: never;
     hoveredFillColor?: never;
     hoveredLineWidth?: never;
     hoveredStrokeColor?: never;
     selectedFillColor?: never;
     selectedLineWidth?: never;
     selectedStrokeColor?: never;
+    /**
+     * 폴리곤 스타일 커스터마이징 함수 (선택)
+     *
+     * customStyle이 제공되면 우선적으로 사용되며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+     * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+     */
+    customStyle?: PolygonStyleCustomizer<T>;
 }
 /**
  * 함수 Props 방식 (커스터마이징 방식)
@@ -240,7 +252,8 @@ interface CanvasPolygonLayerPropsWithCustomStyle<T> extends CanvasPolygonLayerBa
  * 2. 객체 방식: renderStyle 객체가 있으면 자동으로 객체 방식
  * 3. 함수 방식: customStyle 함수가 있으면 자동으로 함수 방식
  *
- * 세 방식은 동시에 사용할 수 없습니다 (mutually exclusive).
+ * customStyle은 개별 props 방식 또는 renderStyle 객체 방식과 함께 사용할 수 있습니다.
+ * customStyle이 제공되면 우선적으로 사용되며, null/undefined를 반환하면 기본 스타일을 사용합니다.
  * styleMode prop은 필요 없으며, 각 prop의 존재 여부로 자동 판단됩니다.
  *
  * @template T 폴리곤 데이터의 추가 속성 타입

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

@@ -39,14 +39,14 @@ var CanvasPolygonLayer = function (props) {
       externalSelectedItem = props.selectedItem,
       _e = props.disableInteraction,
       disableInteraction = _e === void 0 ? false : _e,
-      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // 세 가지 방식 중 하나만 선택: customStyle > renderStyle > 개별 props
+      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
 
 
-  var isCustomStyleMode = 'customStyle' in props && props.customStyle !== undefined;
-  var isObjectMode = !isCustomStyleMode && 'renderStyle' in props && props.renderStyle !== undefined;
-  var isIndividualMode = !isCustomStyleMode && !isObjectMode; // 각 방식별 props 추출
+  var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
+  var isObjectMode = 'renderStyle' in props && props.renderStyle !== undefined;
+  var isIndividualMode = 'baseFillColor' in props && props.baseFillColor !== undefined; // 각 방식별 props 추출
 
-  var customStyleProps = isCustomStyleMode ? props : undefined;
+  var customStyle = hasCustomStyle ? props.customStyle : undefined;
   var individualProps = isIndividualMode ? props : undefined;
   var objectProps = isObjectMode ? props : undefined; // --------------------------------------------------------------------------
   // Hooks & Context
@@ -156,17 +156,32 @@ var CanvasPolygonLayer = function (props) {
   }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
 
   var renderBase;
-  var renderEvent;
-
-  if (isCustomStyleMode && customStyleProps) {
-    renderBase = renderer.renderPolygonBaseWithCustomStyle(customStyleProps.customStyle);
-    renderEvent = renderer.renderPolygonEventWithCustomStyle(customStyleProps.customStyle);
-  } else if (isObjectMode && objectProps) {
-    renderBase = renderer.renderPolygonBaseWithObject(objectProps.renderStyle);
-    renderEvent = renderer.renderPolygonEventWithObject(objectProps.renderStyle);
+  var renderEvent; // customStyle이 있으면 하이브리드 방식 사용, 없으면 기존 방식 사용
+
+  if (isObjectMode && objectProps) {
+    if (hasCustomStyle) {
+      // customStyle + renderStyle 하이브리드
+      renderBase = renderer.renderPolygonBaseWithHybridObject(customStyle, objectProps.renderStyle);
+      renderEvent = renderer.renderPolygonEventWithHybridObject(customStyle, objectProps.renderStyle);
+    } else {
+      // renderStyle만 사용
+      renderBase = renderer.renderPolygonBaseWithObject(objectProps.renderStyle);
+      renderEvent = renderer.renderPolygonEventWithObject(objectProps.renderStyle);
+    }
   } else if (isIndividualMode && individualProps) {
-    renderBase = renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
-    renderEvent = renderer.renderPolygonEvent(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth);
+    if (hasCustomStyle) {
+      // customStyle + 개별 props 하이브리드
+      renderBase = renderer.renderPolygonBaseWithHybrid(customStyle, individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
+      renderEvent = renderer.renderPolygonEventWithHybrid(customStyle, individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth);
+    } else {
+      // 개별 props만 사용
+      renderBase = renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
+      renderEvent = renderer.renderPolygonEvent(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth);
+    }
+  } else if (hasCustomStyle && customStyle) {
+    // customStyle만 사용 (기존 방식)
+    renderBase = renderer.renderPolygonBaseWithCustomStyle(customStyle);
+    renderEvent = renderer.renderPolygonEventWithCustomStyle(customStyle);
   } else {
     throw new Error('Invalid props: one of customStyle, renderStyle, or individual style props must be provided');
   } // Base Layer 렌더링 (뷰포트 컬링 적용)

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

@@ -239,4 +239,65 @@ export declare const renderPolygonBaseWithCustomStyle: <T = unknown>(customStyle
  * ```
  */
 export declare const renderPolygonEventWithCustomStyle: <T = unknown>(customStyle: PolygonStyleCustomizer<T>) => CustomRenderEvent<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (하이브리드 방식: customStyle + 개별 props)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (fallback용)
+ * @returns Base Layer 렌더링 함수
+ */
+export declare const renderPolygonBaseWithHybrid: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (하이브리드 방식: customStyle + 개별 props)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (fallback용)
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상 (fallback용)
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (fallback용)
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (fallback용)
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (fallback용)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (fallback용)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (fallback용)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (fallback용)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (fallback용)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (fallback용)
+ * @returns Event Layer 렌더링 함수
+ */
+export declare const renderPolygonEventWithHybrid: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor: string | undefined, selectedStrokeColor: string | undefined, selectedLineWidth: number | undefined, activeFillColor: string | undefined, activeStrokeColor: string | undefined, activeLineWidth: number | undefined, hoveredFillColor: string | undefined, hoveredStrokeColor: string | undefined, hoveredLineWidth: number | undefined) => CustomRenderEvent<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (하이브리드 방식: customStyle + renderStyle)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param renderStyle 폴리곤 스타일 객체 (fallback용)
+ * @returns Base Layer 렌더링 함수
+ */
+export declare const renderPolygonBaseWithHybridObject: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, renderStyle: PolygonStyleObject) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (하이브리드 방식: customStyle + renderStyle)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param renderStyle 폴리곤 스타일 객체 (fallback용)
+ * @returns Event Layer 렌더링 함수
+ */
+export declare const renderPolygonEventWithHybridObject: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, renderStyle: PolygonStyleObject) => CustomRenderEvent<T>;
 export {};