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

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

@@ -54,29 +54,36 @@ export interface PolygonStyleObject {
  * 폴리곤 스타일 커스터마이징 함수 타입
  *
  * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+ * 스타일을 반환하지 않거나 null/undefined를 반환하면 해당 폴리곤을 그리지 않습니다.
  *
  * @param item 폴리곤 데이터
  * @param context 선택/호버/활성 상태 정보
- * @param defaultStyle 기본 스타일 (renderStyle 객체 또는 개별 props로부터 계산된 스타일)
- * @returns 커스터마이징된 폴리곤 스타일
+ * @returns 커스터마이징된 폴리곤 스타일 (반환하지 않거나 null/undefined면 그리지 않음)
  *
  * @example
  * ```typescript
- * customStyle={(item, context, defaultStyle) => {
+ * customStyle={(item, context) => {
  *   // item의 속성에 따라 동적으로 스타일 결정
  *   if (item.someProperty > 100) {
  *     return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
  *   }
  *
- *   // 기본 스타일을 기반으로 일부만 수정
- *   return {
- *     ...defaultStyle,
- *     fillColor: context.isActive ? 'yellow' : defaultStyle.fillColor
- *   };
+ *   // 상태 정보를 기반으로 스타일 결정
+ *   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 null 또는 return undefined도 가능)
  * }}
  * ```
  */
-export declare type PolygonStyleCustomizer<T> = (item: CanvasData<T>, context: PolygonStyleContext, defaultStyle: PolygonStyle) => PolygonStyle;
+export declare type PolygonStyleCustomizer<T> = (item: CanvasData<T>, context: PolygonStyleContext) => PolygonStyle | null | undefined;
 /**
  * 공통 Props (모든 방식 공통)
  */
@@ -135,7 +142,7 @@ interface CanvasPolygonLayerPropsWithIndividualStyles<T> extends CanvasPolygonLa
     customStyle?: never;
 }
 /**
- * 객체 Props 방식 (새로운 방식)
+ * 객체 Props 방식
  *
  * renderStyle 객체가 있으면 자동으로 객체 방식으로 인식됩니다.
  * 상태별 스타일을 정의하면 개별 props 방식과 동일한 알고리즘으로 적용됩니다.
@@ -148,10 +155,6 @@ interface CanvasPolygonLayerPropsWithIndividualStyles<T> extends CanvasPolygonLa
  *   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> {
@@ -181,10 +184,11 @@ interface CanvasPolygonLayerPropsWithObjectStyle<T> extends CanvasPolygonLayerBa
  *
  * customStyle 함수가 있으면 자동으로 함수 방식으로 인식됩니다.
  * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+ * 스타일을 반환하지 않거나 null/undefined를 반환하면 해당 폴리곤을 그리지 않습니다.
  *
  * @example
  * ```typescript
- * customStyle={(item, context, defaultStyle) => {
+ * customStyle={(item, context) => {
  *   // item의 속성에 따라 동적으로 스타일 결정
  *   if (item.someProperty > 100) {
  *     return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
@@ -201,8 +205,7 @@ interface CanvasPolygonLayerPropsWithObjectStyle<T> extends CanvasPolygonLayerBa
  *     return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
  *   }
  *
- *   // 기본 스타일
- *   return { fillColor: 'gray', strokeColor: 'black', lineWidth: 2 };
+ *   // 아무것도 반환하지 않으면 그리지 않음 (return null 또는 return undefined도 가능)
  * }}
  * ```
  */
@@ -211,7 +214,7 @@ interface CanvasPolygonLayerPropsWithCustomStyle<T> extends CanvasPolygonLayerBa
      * 폴리곤 스타일 커스터마이징 함수
      *
      * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
-     * defaultStyle은 내부에서 계산된 기본 스타일입니다.
+     * 스타일을 반환하지 않거나 null/undefined를 반환하면 해당 폴리곤을 그리지 않습니다.
      */
     customStyle: PolygonStyleCustomizer<T>;
     /** 다른 방식 props는 사용 불가 */
@@ -247,6 +250,11 @@ declare const CanvasPolygonLayer: <T>(props: CanvasPolygonLayerProps<T>) => Reac
 /**
  * CanvasPolygonLayer - Konva 기반 고성능 폴리곤 렌더링 컴포넌트
  *
+ * 세 가지 스타일 지정 방식을 지원합니다 (mutually exclusive):
+ * 1. 개별 props 방식: baseFillColor, baseStrokeColor, baseLineWidth 등 개별 props 사용
+ * 2. 객체 방식: renderStyle 객체로 상태별 스타일 정의
+ * 3. 함수 방식: customStyle 함수로 완전한 커스터마이징 (스타일을 반환하지 않으면 그리지 않음)
+ *
  * @template T 폴리곤 데이터의 추가 속성 타입
  */
 export default CanvasPolygonLayer;

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

@@ -3,6 +3,11 @@
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
  * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+ *
+ * 세 가지 스타일 지정 방식을 지원하는 렌더링 함수를 제공합니다:
+ * 1. 개별 props 방식: renderPolygonBase, renderPolygonEvent
+ * 2. 객체 방식: renderPolygonBaseWithObject, renderPolygonEventWithObject
+ * 3. 함수 방식: renderPolygonBaseWithCustomStyle, renderPolygonEventWithCustomStyle
  */
 import { CustomRenderBase, CustomRenderEvent } from "../shared/types";
 import type { PolygonStyleObject, PolygonStyleCustomizer } from "./CanvasPolygonLayer";
@@ -190,11 +195,11 @@ export declare const renderPolygonEventWithObject: <T = any>(renderStyle: Polygo
  * @example
  * ```typescript
  * const renderBase = renderPolygonBaseWithCustomStyle<MyDataType>(
- *   (item, context, defaultStyle) => {
+ *   (item, context) => {
  *     if (item.someProperty > 100) {
  *       return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
  *     }
- *     return defaultStyle;
+ *     // 아무것도 반환하지 않으면 그리지 않음
  *   }
  * );
  * ```
@@ -218,7 +223,7 @@ export declare const renderPolygonBaseWithCustomStyle: <T = any>(customStyle: Po
  * @example
  * ```typescript
  * const renderEvent = renderPolygonEventWithCustomStyle<MyDataType>(
- *   (item, context, defaultStyle) => {
+ *   (item, context) => {
  *     if (context.isActive) {
  *       return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
  *     }
@@ -228,7 +233,7 @@ export declare const renderPolygonBaseWithCustomStyle: <T = any>(customStyle: Po
  *     if (context.isSelected) {
  *       return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
  *     }
- *     return defaultStyle;
+ *     // 아무것도 반환하지 않으면 그리지 않음
  *   }
  * );
  * ```

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

@@ -7,13 +7,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
  * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+ *
+ * 세 가지 스타일 지정 방식을 지원하는 렌더링 함수를 제공합니다:
+ * 1. 개별 props 방식: renderPolygonBase, renderPolygonEvent
+ * 2. 객체 방식: renderPolygonBaseWithObject, renderPolygonEventWithObject
+ * 3. 함수 방식: renderPolygonBaseWithCustomStyle, renderPolygonEventWithCustomStyle
  */
-// 기본 스타일 상수 (customStyle 방식에서 사용)
-var DEFAULT_BASE_STYLE = {
-  fillColor: 'rgba(128, 128, 128, 0.5)',
-  strokeColor: 'rgba(0, 0, 0, 0.8)',
-  lineWidth: 2
-};
+
 /**
  * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
  *
@@ -41,7 +41,6 @@ var DEFAULT_BASE_STYLE = {
  * });
  * ```
  */
-
 var drawPolygon = function (_a) {
   var ctx = _a.ctx,
       polygonOffsets = _a.polygonOffsets,
@@ -471,11 +470,11 @@ var renderPolygonEventWithObject = function (renderStyle) {
  * @example
  * ```typescript
  * const renderBase = renderPolygonBaseWithCustomStyle<MyDataType>(
- *   (item, context, defaultStyle) => {
+ *   (item, context) => {
  *     if (item.someProperty > 100) {
  *       return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
  *     }
- *     return defaultStyle;
+ *     // 아무것도 반환하지 않으면 그리지 않음
  *   }
  * );
  * ```
@@ -496,14 +495,16 @@ var renderPolygonBaseWithCustomStyle = function (customStyle) {
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
       var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-      if (!polygonOffsets) continue; // Base Layer는 선택되지 않은 항목만 그리므로 기본 스타일 사용
+      if (!polygonOffsets) continue; // Base Layer는 선택되지 않은 항목만 그리므로
 
       var context = {
         isSelected: false,
         isHovered: false,
         isActive: false
       };
-      var style = customStyle(item, context, DEFAULT_BASE_STYLE); // 폴리곤 그리기
+      var style = customStyle(item, context); // null 또는 undefined를 반환하면 그리지 않음
+
+      if (!style) continue; // 폴리곤 그리기
 
       drawPolygon({
         ctx: ctx,
@@ -534,7 +535,7 @@ var renderPolygonBaseWithCustomStyle = function (customStyle) {
  * @example
  * ```typescript
  * const renderEvent = renderPolygonEventWithCustomStyle<MyDataType>(
- *   (item, context, defaultStyle) => {
+ *   (item, context) => {
  *     if (context.isActive) {
  *       return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
  *     }
@@ -544,7 +545,7 @@ var renderPolygonBaseWithCustomStyle = function (customStyle) {
  *     if (context.isSelected) {
  *       return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
  *     }
- *     return defaultStyle;
+ *     // 아무것도 반환하지 않으면 그리지 않음
  *   }
  * );
  * ```
@@ -577,7 +578,9 @@ var renderPolygonEventWithCustomStyle = function (customStyle) {
           isHovered: false,
           isActive: false
         };
-        var style = customStyle(item, context, DEFAULT_BASE_STYLE);
+        var style = customStyle(item, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) continue;
         drawPolygon({
           ctx: ctx,
           polygonOffsets: polygonOffsets,
@@ -599,7 +602,9 @@ var renderPolygonEventWithCustomStyle = function (customStyle) {
           isHovered: false,
           isActive: true
         };
-        var style = customStyle(selectedItem, context, DEFAULT_BASE_STYLE);
+        var style = customStyle(selectedItem, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) return;
         drawPolygon({
           ctx: ctx,
           polygonOffsets: polygonOffsets,
@@ -623,7 +628,9 @@ var renderPolygonEventWithCustomStyle = function (customStyle) {
         isHovered: !isSelected,
         isActive: isSelected && hoveredItem.id === selectedItemId
       };
-      var style = customStyle(hoveredItem, context, DEFAULT_BASE_STYLE);
+      var style = customStyle(hoveredItem, context); // null 또는 undefined를 반환하면 그리지 않음
+
+      if (!style) return;
       drawPolygon({
         ctx: ctx,
         polygonOffsets: polygonOffsets,

package/dist/index.es.js

@@ -5756,13 +5756,13 @@ var CanvasMarkerLayer = function (props) {
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
  * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+ *
+ * 세 가지 스타일 지정 방식을 지원하는 렌더링 함수를 제공합니다:
+ * 1. 개별 props 방식: renderPolygonBase, renderPolygonEvent
+ * 2. 객체 방식: renderPolygonBaseWithObject, renderPolygonEventWithObject
+ * 3. 함수 방식: renderPolygonBaseWithCustomStyle, renderPolygonEventWithCustomStyle
  */
-// 기본 스타일 상수 (customStyle 방식에서 사용)
-var DEFAULT_BASE_STYLE = {
-  fillColor: 'rgba(128, 128, 128, 0.5)',
-  strokeColor: 'rgba(0, 0, 0, 0.8)',
-  lineWidth: 2
-};
+
 /**
  * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
  *
@@ -5790,7 +5790,6 @@ var DEFAULT_BASE_STYLE = {
  * });
  * ```
  */
-
 var drawPolygon = function (_a) {
   var ctx = _a.ctx,
       polygonOffsets = _a.polygonOffsets,
@@ -6220,11 +6219,11 @@ var renderPolygonEventWithObject = function (renderStyle) {
  * @example
  * ```typescript
  * const renderBase = renderPolygonBaseWithCustomStyle<MyDataType>(
- *   (item, context, defaultStyle) => {
+ *   (item, context) => {
  *     if (item.someProperty > 100) {
  *       return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
  *     }
- *     return defaultStyle;
+ *     // 아무것도 반환하지 않으면 그리지 않음
  *   }
  * );
  * ```
@@ -6245,14 +6244,16 @@ var renderPolygonBaseWithCustomStyle = function (customStyle) {
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
       var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-      if (!polygonOffsets) continue; // Base Layer는 선택되지 않은 항목만 그리므로 기본 스타일 사용
+      if (!polygonOffsets) continue; // Base Layer는 선택되지 않은 항목만 그리므로
 
       var context = {
         isSelected: false,
         isHovered: false,
         isActive: false
       };
-      var style = customStyle(item, context, DEFAULT_BASE_STYLE); // 폴리곤 그리기
+      var style = customStyle(item, context); // null 또는 undefined를 반환하면 그리지 않음
+
+      if (!style) continue; // 폴리곤 그리기
 
       drawPolygon({
         ctx: ctx,
@@ -6283,7 +6284,7 @@ var renderPolygonBaseWithCustomStyle = function (customStyle) {
  * @example
  * ```typescript
  * const renderEvent = renderPolygonEventWithCustomStyle<MyDataType>(
- *   (item, context, defaultStyle) => {
+ *   (item, context) => {
  *     if (context.isActive) {
  *       return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
  *     }
@@ -6293,7 +6294,7 @@ var renderPolygonBaseWithCustomStyle = function (customStyle) {
  *     if (context.isSelected) {
  *       return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
  *     }
- *     return defaultStyle;
+ *     // 아무것도 반환하지 않으면 그리지 않음
  *   }
  * );
  * ```
@@ -6326,7 +6327,9 @@ var renderPolygonEventWithCustomStyle = function (customStyle) {
           isHovered: false,
           isActive: false
         };
-        var style = customStyle(item, context, DEFAULT_BASE_STYLE);
+        var style = customStyle(item, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) continue;
         drawPolygon({
           ctx: ctx,
           polygonOffsets: polygonOffsets,
@@ -6348,7 +6351,9 @@ var renderPolygonEventWithCustomStyle = function (customStyle) {
           isHovered: false,
           isActive: true
         };
-        var style = customStyle(selectedItem, context, DEFAULT_BASE_STYLE);
+        var style = customStyle(selectedItem, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) return;
         drawPolygon({
           ctx: ctx,
           polygonOffsets: polygonOffsets,
@@ -6372,7 +6377,9 @@ var renderPolygonEventWithCustomStyle = function (customStyle) {
         isHovered: !isSelected,
         isActive: isSelected && hoveredItem.id === selectedItemId
       };
-      var style = customStyle(hoveredItem, context, DEFAULT_BASE_STYLE);
+      var style = customStyle(hoveredItem, context); // null 또는 undefined를 반환하면 그리지 않음
+
+      if (!style) return;
       drawPolygon({
         ctx: ctx,
         polygonOffsets: polygonOffsets,

package/dist/index.umd.js

@@ -5760,13 +5760,13 @@
    *
    * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
    * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+   *
+   * 세 가지 스타일 지정 방식을 지원하는 렌더링 함수를 제공합니다:
+   * 1. 개별 props 방식: renderPolygonBase, renderPolygonEvent
+   * 2. 객체 방식: renderPolygonBaseWithObject, renderPolygonEventWithObject
+   * 3. 함수 방식: renderPolygonBaseWithCustomStyle, renderPolygonEventWithCustomStyle
    */
-  // 기본 스타일 상수 (customStyle 방식에서 사용)
-  var DEFAULT_BASE_STYLE = {
-    fillColor: 'rgba(128, 128, 128, 0.5)',
-    strokeColor: 'rgba(0, 0, 0, 0.8)',
-    lineWidth: 2
-  };
+
   /**
    * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
    *
@@ -5794,7 +5794,6 @@
    * });
    * ```
    */
-
   var drawPolygon = function (_a) {
     var ctx = _a.ctx,
         polygonOffsets = _a.polygonOffsets,
@@ -6224,11 +6223,11 @@
    * @example
    * ```typescript
    * const renderBase = renderPolygonBaseWithCustomStyle<MyDataType>(
-   *   (item, context, defaultStyle) => {
+   *   (item, context) => {
    *     if (item.someProperty > 100) {
    *       return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
    *     }
-   *     return defaultStyle;
+   *     // 아무것도 반환하지 않으면 그리지 않음
    *   }
    * );
    * ```
@@ -6249,14 +6248,16 @@
         if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
         var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-        if (!polygonOffsets) continue; // Base Layer는 선택되지 않은 항목만 그리므로 기본 스타일 사용
+        if (!polygonOffsets) continue; // Base Layer는 선택되지 않은 항목만 그리므로
 
         var context = {
           isSelected: false,
           isHovered: false,
           isActive: false
         };
-        var style = customStyle(item, context, DEFAULT_BASE_STYLE); // 폴리곤 그리기
+        var style = customStyle(item, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) continue; // 폴리곤 그리기
 
         drawPolygon({
           ctx: ctx,
@@ -6287,7 +6288,7 @@
    * @example
    * ```typescript
    * const renderEvent = renderPolygonEventWithCustomStyle<MyDataType>(
-   *   (item, context, defaultStyle) => {
+   *   (item, context) => {
    *     if (context.isActive) {
    *       return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
    *     }
@@ -6297,7 +6298,7 @@
    *     if (context.isSelected) {
    *       return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
    *     }
-   *     return defaultStyle;
+   *     // 아무것도 반환하지 않으면 그리지 않음
    *   }
    * );
    * ```
@@ -6330,7 +6331,9 @@
             isHovered: false,
             isActive: false
           };
-          var style = customStyle(item, context, DEFAULT_BASE_STYLE);
+          var style = customStyle(item, context); // null 또는 undefined를 반환하면 그리지 않음
+
+          if (!style) continue;
           drawPolygon({
             ctx: ctx,
             polygonOffsets: polygonOffsets,
@@ -6352,7 +6355,9 @@
             isHovered: false,
             isActive: true
           };
-          var style = customStyle(selectedItem, context, DEFAULT_BASE_STYLE);
+          var style = customStyle(selectedItem, context); // null 또는 undefined를 반환하면 그리지 않음
+
+          if (!style) return;
           drawPolygon({
             ctx: ctx,
             polygonOffsets: polygonOffsets,
@@ -6376,7 +6381,9 @@
           isHovered: !isSelected,
           isActive: isSelected && hoveredItem.id === selectedItemId
         };
-        var style = customStyle(hoveredItem, context, DEFAULT_BASE_STYLE);
+        var style = customStyle(hoveredItem, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) return;
         drawPolygon({
           ctx: ctx,
           polygonOffsets: polygonOffsets,

package/package.json

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