@mint-ui/map 1.2.0-test.50 → 1.2.0-test.51

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

@@ -26,41 +26,59 @@ export interface PolygonStyleContext {
     isActive: boolean;
 }
 /**
- * 폴리곤 스타일 함수 타입
+ * 폴리곤 스타일 객체
  *
- * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 결정할 수 있습니다.
+ * 상태별 스타일을 정의합니다. 개별 props 방식과 동일한 알고리즘으로 적용됩니다.
+ *
+ * @example
+ * ```typescript
+ * renderStyle={{
+ *   base: { fillColor: 'gray', strokeColor: 'black', lineWidth: 2 },
+ *   selected: { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 },
+ *   active: { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 },
+ *   hovered: { fillColor: 'blue', strokeColor: 'darkblue', lineWidth: 3 }
+ * }}
+ * ```
+ */
+export interface PolygonStyleObject {
+    /** 기본 폴리곤 스타일 (필수) */
+    base: PolygonStyle;
+    /** 선택된 폴리곤 스타일 */
+    selected?: PolygonStyle;
+    /** 활성 폴리곤 스타일 (마지막 선택된 항목) */
+    active?: PolygonStyle;
+    /** 호버된 폴리곤 스타일 */
+    hovered?: PolygonStyle;
+}
+/**
+ * 폴리곤 스타일 커스터마이징 함수 타입
+ *
+ * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
  *
  * @param item 폴리곤 데이터
  * @param context 선택/호버/활성 상태 정보
- * @returns 폴리곤 스타일
+ * @param defaultStyle 기본 스타일 (renderStyle 객체 또는 개별 props로부터 계산된 스타일)
+ * @returns 커스터마이징된 폴리곤 스타일
  *
  * @example
  * ```typescript
- * getStyle={(item, context) => {
+ * customStyle={(item, context, defaultStyle) => {
  *   // item의 속성에 따라 동적으로 스타일 결정
  *   if (item.someProperty > 100) {
  *     return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
  *   }
  *
- *   // 상태 정보를 기반으로 스타일 결정
- *   if (context.isActive) {
- *     return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
- *   }
- *   if (context.isHovered) {
- *     return { fillColor: 'blue', strokeColor: 'darkblue', lineWidth: 3 };
- *   }
- *   if (context.isSelected) {
- *     return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
- *   }
- *
- *   // 기본 스타일
- *   return { fillColor: 'gray', strokeColor: 'black', lineWidth: 2 };
+ *   // 기본 스타일을 기반으로 일부만 수정
+ *   return {
+ *     ...defaultStyle,
+ *     fillColor: context.isActive ? 'yellow' : defaultStyle.fillColor
+ *   };
  * }}
  * ```
  */
-export declare type PolygonStyleFunction<T> = (item: CanvasData<T>, context: PolygonStyleContext) => PolygonStyle;
+export declare type PolygonStyleCustomizer<T> = (item: CanvasData<T>, context: PolygonStyleContext, defaultStyle: PolygonStyle) => PolygonStyle;
 /**
- * 공통 Props (두 방식 모두 공통)
+ * 공통 Props (모든 방식 공통)
  */
 interface CanvasPolygonLayerBaseProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
     /** 렌더링할 폴리곤 데이터 배열 */
@@ -112,40 +130,91 @@ interface CanvasPolygonLayerPropsWithIndividualStyles<T> extends CanvasPolygonLa
     hoveredStrokeColor?: string;
     /** Hover 시 폴리곤 테두리 두께 */
     hoveredLineWidth?: number;
-    /** 함수 방식 props는 사용 불가 */
+    /** 다른 방식 props는 사용 불가 */
     renderStyle?: never;
+    customStyle?: never;
+}
+/**
+ * 객체 Props 방식 (새로운 방식)
+ *
+ * renderStyle 객체가 있으면 자동으로 객체 방식으로 인식됩니다.
+ * 상태별 스타일을 정의하면 개별 props 방식과 동일한 알고리즘으로 적용됩니다.
+ *
+ * @example
+ * ```typescript
+ * renderStyle={{
+ *   base: { fillColor: 'gray', strokeColor: 'black', lineWidth: 2 },
+ *   selected: { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 },
+ *   active: { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 },
+ *   hovered: { fillColor: 'blue', strokeColor: 'darkblue', lineWidth: 3 }
+ * }}
+ * customStyle={(item, context, defaultStyle) => {
+ *   // 기본 스타일을 기반으로 추가 커스터마이징
+ *   return { ...defaultStyle, fillColor: item.someProperty > 100 ? 'red' : defaultStyle.fillColor };
+ * }}
+ * ```
+ */
+interface CanvasPolygonLayerPropsWithObjectStyle<T> extends CanvasPolygonLayerBaseProps<T> {
+    /**
+     * 폴리곤 스타일 객체
+     *
+     * 상태별 스타일을 정의합니다. 개별 props 방식과 동일한 알고리즘으로 적용됩니다.
+     */
+    renderStyle: PolygonStyleObject;
+    /** 다른 방식 props는 사용 불가 */
+    baseFillColor?: never;
+    baseStrokeColor?: never;
+    baseLineWidth?: never;
+    selectedFillColor?: never;
+    selectedStrokeColor?: never;
+    selectedLineWidth?: never;
+    activeFillColor?: never;
+    activeStrokeColor?: never;
+    activeLineWidth?: never;
+    hoveredFillColor?: never;
+    hoveredStrokeColor?: never;
+    hoveredLineWidth?: never;
+    customStyle?: never;
 }
 /**
- * 함수 Props 방식 (새로운 방식)
+ * 함수 Props 방식 (커스터마이징 방식)
  *
- * renderStyle 함수가 있으면 자동으로 함수 방식으로 인식됩니다.
+ * customStyle 함수가 있으면 자동으로 함수 방식으로 인식됩니다.
  * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
  *
  * @example
  * ```typescript
- * renderStyle={(item, context) => {
+ * customStyle={(item, context, defaultStyle) => {
  *   // item의 속성에 따라 동적으로 스타일 결정
  *   if (item.someProperty > 100) {
  *     return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
  *   }
+ *
  *   // 상태 정보를 기반으로 스타일 결정
  *   if (context.isActive) {
  *     return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
  *   }
- *   // ...
+ *   if (context.isHovered) {
+ *     return { fillColor: 'blue', strokeColor: 'darkblue', lineWidth: 3 };
+ *   }
+ *   if (context.isSelected) {
+ *     return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
+ *   }
+ *
+ *   // 기본 스타일
+ *   return { fillColor: 'gray', strokeColor: 'black', lineWidth: 2 };
  * }}
  * ```
  */
-interface CanvasPolygonLayerPropsWithFunctionStyle<T> extends CanvasPolygonLayerBaseProps<T> {
+interface CanvasPolygonLayerPropsWithCustomStyle<T> extends CanvasPolygonLayerBaseProps<T> {
     /**
-     * 폴리곤 스타일 함수 (item 데이터와 상태 정보를 기반으로 스타일 반환)
+     * 폴리곤 스타일 커스터마이징 함수
      *
-     * @param item 폴리곤 데이터 (item의 속성을 기반으로 자유롭게 스타일 커스터마이징 가능)
-     * @param context 선택/호버/활성 상태 정보
-     * @returns 폴리곤 스타일
+     * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+     * defaultStyle은 내부에서 계산된 기본 스타일입니다.
      */
-    renderStyle: PolygonStyleFunction<T>;
-    /** 개별 props는 사용 불가 */
+    customStyle: PolygonStyleCustomizer<T>;
+    /** 다른 방식 props는 사용 불가 */
     baseFillColor?: never;
     baseStrokeColor?: never;
     baseLineWidth?: never;
@@ -158,22 +227,22 @@ interface CanvasPolygonLayerPropsWithFunctionStyle<T> extends CanvasPolygonLayer
     hoveredFillColor?: never;
     hoveredStrokeColor?: never;
     hoveredLineWidth?: never;
+    renderStyle?: never;
 }
 /**
  * CanvasPolygonLayer Props (Discriminated Union)
  *
- * 두 가지 스타일 지정 방식을 지원:
+ * 세 가지 스타일 지정 방식을 지원:
  * 1. 개별 props 방식: baseFillColor, baseStrokeColor, baseLineWidth가 있으면 자동으로 개별 props 방식
- * 2. 함수 방식: renderStyle 함수가 있으면 자동으로 함수 방식
- *
- * 두 방식은 동시에 사용할 수 없습니다 (mutually exclusive).
- * styleMode prop은 필요 없으며, renderStyle 또는 baseFillColor의 존재 여부로 자동 판단됩니다.
+ * 2. 객체 방식: renderStyle 객체가 있으면 자동으로 객체 방식
+ * 3. 함수 방식: customStyle 함수가 있으면 자동으로 함수 방식
  *
- * 함수 방식에서는 item 데이터를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+ * 세 방식은 동시에 사용할 수 없습니다 (mutually exclusive).
+ * styleMode prop은 필요 없으며, 각 prop의 존재 여부로 자동 판단됩니다.
  *
  * @template T 폴리곤 데이터의 추가 속성 타입
  */
-export declare type CanvasPolygonLayerProps<T> = CanvasPolygonLayerPropsWithIndividualStyles<T> | CanvasPolygonLayerPropsWithFunctionStyle<T>;
+export declare type CanvasPolygonLayerProps<T> = CanvasPolygonLayerPropsWithIndividualStyles<T> | CanvasPolygonLayerPropsWithObjectStyle<T> | CanvasPolygonLayerPropsWithCustomStyle<T>;
 declare const CanvasPolygonLayer: <T>(props: CanvasPolygonLayerProps<T>) => React.ReactPortal;
 /**
  * CanvasPolygonLayer - Konva 기반 고성능 폴리곤 렌더링 컴포넌트

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

@@ -39,13 +39,16 @@ 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"]); // renderStyle이 있으면 함수 방식, baseFillColor가 있으면 개별 props 방식
+      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // 세 가지 방식 중 하나만 선택: customStyle > renderStyle > 개별 props
 
 
-  var isFunctionMode = 'renderStyle' in props && props.renderStyle !== undefined; // 개별 props 방식일 때만 추출
+  var isCustomStyleMode = 'customStyle' in props && props.customStyle !== undefined;
+  var isObjectMode = !isCustomStyleMode && 'renderStyle' in props && props.renderStyle !== undefined;
+  var isIndividualMode = !isCustomStyleMode && !isObjectMode; // 각 방식별 props 추출
 
-  var individualProps = isFunctionMode ? undefined : props;
-  var functionProps = isFunctionMode ? props : undefined; // --------------------------------------------------------------------------
+  var customStyleProps = isCustomStyleMode ? props : undefined;
+  var objectProps = isObjectMode ? props : undefined;
+  var individualProps = isIndividualMode ? props : undefined; // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -152,11 +155,11 @@ var CanvasPolygonLayer = function (props) {
     }
   }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
 
-  var renderBase = isFunctionMode && functionProps ? renderer.renderPolygonBaseWithFunction(functionProps.renderStyle) : individualProps ? renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth) : function () {
-    throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+  var renderBase = isCustomStyleMode && customStyleProps ? renderer.renderPolygonBaseWithCustomStyle(customStyleProps.customStyle) : isObjectMode && objectProps ? renderer.renderPolygonBaseWithObject(objectProps.renderStyle) : isIndividualMode && individualProps ? renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth) : function () {
+    throw new Error('Invalid props: one of customStyle, renderStyle, or individual style props must be provided');
   }();
-  var renderEvent = isFunctionMode && functionProps ? renderer.renderPolygonEventWithFunction(functionProps.renderStyle) : individualProps ? 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) : function () {
-    throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+  var renderEvent = isCustomStyleMode && customStyleProps ? renderer.renderPolygonEventWithCustomStyle(customStyleProps.customStyle) : isObjectMode && objectProps ? renderer.renderPolygonEventWithObject(objectProps.renderStyle) : isIndividualMode && individualProps ? 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) : function () {
+    throw new Error('Invalid props: one of customStyle, renderStyle, or individual style props must be provided');
   }(); // Base Layer 렌더링 (뷰포트 컬링 적용)
 
   var doRenderBase = function () {

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

@@ -5,7 +5,7 @@
  * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
  */
 import { CustomRenderBase, CustomRenderEvent } from "../shared/types";
-import type { PolygonStyleFunction } from "./CanvasPolygonLayer";
+import type { PolygonStyleObject, PolygonStyleCustomizer } from "./CanvasPolygonLayer";
 /**
  * 폴리곤 그리기 파라미터 인터페이스
  */
@@ -119,13 +119,13 @@ export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStr
  */
 export declare const renderPolygonEvent: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor?: string, selectedStrokeColor?: string, selectedLineWidth?: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<T>;
 /**
- * 폴리곤 Base 렌더링 함수 팩토리 (함수 방식)
+ * 폴리곤 Base 렌더링 함수 팩토리 (객체 방식)
  *
  * Base Layer에서 사용할 렌더링 함수를 생성합니다.
- * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ * renderStyle 객체를 사용하여 기본 스타일을 적용합니다.
  *
  * @template T 폴리곤 데이터의 추가 속성 타입
- * @param renderStyle 폴리곤 스타일 함수
+ * @param renderStyle 폴리곤 스타일 객체
  * @returns Base Layer 렌더링 함수
  *
  * @remarks
@@ -135,49 +135,103 @@ export declare const renderPolygonEvent: <T = any>(baseFillColor: string, baseSt
  *
  * @example
  * ```typescript
- * const renderBase = renderPolygonBaseWithFunction<MyDataType>(
- *   (item, context) => ({
- *     fillColor: 'rgba(255, 100, 100, 0.5)',
- *     strokeColor: 'rgba(200, 50, 50, 0.8)',
- *     lineWidth: 2
- *   })
+ * const renderBase = renderPolygonBaseWithObject<MyDataType>({
+ *   base: { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 }
+ * });
+ * ```
+ */
+export declare const renderPolygonBaseWithObject: <T = any>(renderStyle: PolygonStyleObject) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (객체 방식)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 객체를 사용하여 개별 props 방식과 동일한 알고리즘으로 스타일을 적용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 객체
+ * @returns Event Layer 렌더링 함수
+ *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - **알고리즘**: 개별 props 방식과 동일
+ *   - 기본값 설정: selected/active/hovered가 없으면 base 또는 상위 값 사용
+ *   - 선택된 항목: selected 스타일
+ *   - 마지막 선택된 항목 (호버 안 됨): active 스타일
+ *   - 호버된 항목: 선택되어 있으면 active, 아니면 hovered 스타일
+ *
+ * @example
+ * ```typescript
+ * const renderEvent = renderPolygonEventWithObject<MyDataType>({
+ *   base: { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 },
+ *   selected: { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 },
+ *   active: { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 },
+ *   hovered: { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 }
+ * });
+ * ```
+ */
+export declare const renderPolygonEventWithObject: <T = any>(renderStyle: PolygonStyleObject) => CustomRenderEvent<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (커스터마이징 방식)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle 함수를 사용하여 각 폴리곤의 스타일을 자유롭게 커스터마이징합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수
+ * @returns Base Layer 렌더링 함수
+ *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
+ * @example
+ * ```typescript
+ * const renderBase = renderPolygonBaseWithCustomStyle<MyDataType>(
+ *   (item, context, defaultStyle) => {
+ *     if (item.someProperty > 100) {
+ *       return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
+ *     }
+ *     return defaultStyle;
+ *   }
  * );
  * ```
  */
-export declare const renderPolygonBaseWithFunction: <T = any>(renderStyle: PolygonStyleFunction<T>) => CustomRenderBase<T>;
+export declare const renderPolygonBaseWithCustomStyle: <T = any>(customStyle: PolygonStyleCustomizer<T>) => CustomRenderBase<T>;
 /**
- * 폴리곤 Event 렌더링 함수 팩토리 (함수 방식)
+ * 폴리곤 Event 렌더링 함수 팩토리 (커스터마이징 방식)
  *
  * Event Layer에서 사용할 렌더링 함수를 생성합니다.
- * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ * customStyle 함수를 사용하여 각 폴리곤의 스타일을 자유롭게 커스터마이징합니다.
  *
  * @template T 폴리곤 데이터의 추가 속성 타입
- * @param renderStyle 폴리곤 스타일 함수
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수
  * @returns Event Layer 렌더링 함수
  *
  * @remarks
  * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
  * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
  * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
- * - hover된 항목이 선택되어 있으면 active 스타일 적용
  *
  * @example
  * ```typescript
- * const renderEvent = renderPolygonEventWithFunction<MyDataType>(
- *   (item, context) => {
+ * const renderEvent = renderPolygonEventWithCustomStyle<MyDataType>(
+ *   (item, context, defaultStyle) => {
  *     if (context.isActive) {
- *       return { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 };
+ *       return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
  *     }
  *     if (context.isHovered) {
- *       return { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 };
+ *       return { fillColor: 'blue', strokeColor: 'darkblue', lineWidth: 3 };
  *     }
  *     if (context.isSelected) {
- *       return { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 };
+ *       return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
  *     }
- *     return { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 };
+ *     return defaultStyle;
  *   }
  * );
  * ```
  */
-export declare const renderPolygonEventWithFunction: <T = any>(renderStyle: PolygonStyleFunction<T>) => CustomRenderEvent<T>;
+export declare const renderPolygonEventWithCustomStyle: <T = any>(customStyle: PolygonStyleCustomizer<T>) => CustomRenderEvent<T>;
 export {};