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

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

@@ -22,7 +22,7 @@ export interface Paths {
  * Konva 캔버스 마커/폴리곤의 기본 필수 속성
  * (렌더링에 필요한 최소 정보)
  */
-export interface KonvaCanvasMarkerOption {
+export interface KonvaCanvasOption {
     id: string;
     position: Position;
     boxWidth?: number;
@@ -35,97 +35,247 @@ export interface KonvaCanvasMarkerOption {
  * @template T 서버에서 받은 원본 데이터 타입 (예: Marker, Polygon)
  * @example
  * // API에서 받은 Marker 타입을 그대로 유지하면서 캔버스 렌더링 정보 추가
- * type MarkerWithCanvas = KonvaCanvasMarkerData<Marker>
+ * type MarkerWithCanvas = KonvaCanvasData<Marker>
  * // { raId, lat, lng, buildingName, totalArea } + { id, position, boxWidth, ... }
  */
-export declare type KonvaCanvasMarkerData<T = {}> = T & KonvaCanvasMarkerOption;
+export declare type KonvaCanvasData<T = {}> = T & KonvaCanvasOption;
 /**
- * 렌더링 유틸리티 함수들
+ * 🛠️ 렌더링 유틸리티 함수들
+ *
+ * WoongCanvasLayer가 제공하는 헬퍼 함수 모음입니다.
+ * 커스텀 렌더링 함수 내에서 좌표 변환 시 사용하세요.
+ *
+ * ## 주요 기능
+ * - **자동 캐싱**: 좌표 변환 결과를 LRU 캐시에 저장 (성능 최적화)
+ * - **지도 좌표 → 화면 좌표**: 위경도를 픽셀 좌표로 자동 변환
+ * - **null 안전성**: 변환 실패 시 null 반환 (안전한 예외 처리)
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ *
+ * @example
+ * // 마커 렌더링 예시
+ * const renderBase = ({ ctx, items, utils }) => {
+ *   for (const item of items) {
+ *     const offset = utils.getOrComputeMarkerOffset(item);
+ *     if (!offset) continue; // 변환 실패 시 스킵
+ *
+ *     ctx.fillRect(offset.x, offset.y, 50, 50);
+ *   }
+ * };
+ *
+ * @example
+ * // 폴리곤 렌더링 예시
+ * const renderBase = ({ ctx, items, utils }) => {
+ *   for (const item of items) {
+ *     const offsets = utils.getOrComputePolygonOffsets(item);
+ *     if (!offsets) continue;
+ *
+ *     for (const multiPolygon of offsets) {
+ *       for (const polygon of multiPolygon) {
+ *         ctx.beginPath();
+ *         ctx.moveTo(polygon[0][0], polygon[0][1]);
+ *         for (let i = 1; i < polygon.length; i++) {
+ *           ctx.lineTo(polygon[i][0], polygon[i][1]);
+ *         }
+ *         ctx.closePath();
+ *         ctx.fill();
+ *       }
+ *     }
+ *   }
+ * };
  */
 export interface RenderUtils<T> {
-    getOrComputePolygonOffsets: (polygonData: KonvaCanvasMarkerData<T>) => number[][][][] | null;
-    getOrComputeMarkerOffset: (markerData: KonvaCanvasMarkerData<T>) => Offset | null;
+    /**
+     * 폴리곤의 위경도 좌표를 화면 픽셀 좌표로 변환합니다.
+     *
+     * - **자동 캐싱**: 동일한 폴리곤은 캐시에서 즉시 반환 (성능 최적화)
+     * - **MultiPolygon 지원**: GeoJSON MultiPolygon 형식 지원
+     * - **Donut Polygon 지원**: 구멍이 있는 폴리곤 지원
+     *
+     * @param polygonData 폴리곤 데이터 (paths 필드 필수)
+     * @returns 변환된 픽셀 좌표 배열 (4차원 배열) 또는 null (변환 실패 시)
+     *
+     * @example
+     * const offsets = utils.getOrComputePolygonOffsets(polygonItem);
+     * if (!offsets) return; // 변환 실패
+     *
+     * // offsets 구조: [MultiPolygon][Polygon][Point][x/y]
+     * for (const multiPolygon of offsets) {
+     *   for (const polygon of multiPolygon) {
+     *     ctx.beginPath();
+     *     ctx.moveTo(polygon[0][0], polygon[0][1]);
+     *     for (let i = 1; i < polygon.length; i++) {
+     *       ctx.lineTo(polygon[i][0], polygon[i][1]);
+     *     }
+     *     ctx.closePath();
+     *     ctx.fill();
+     *   }
+     * }
+     */
+    getOrComputePolygonOffsets: (polygonData: KonvaCanvasData<T>) => number[][][][] | null;
+    /**
+     * 마커의 위경도 좌표를 화면 픽셀 좌표로 변환합니다.
+     *
+     * - **자동 캐싱**: 동일한 마커는 캐시에서 즉시 반환 (성능 최적화)
+     * - **중심점 기준**: 반환된 좌표는 마커의 중심점 (x, y)
+     *
+     * @param markerData 마커 데이터 (position 필드 필수)
+     * @returns 변환된 픽셀 좌표 { x, y } 또는 null (변환 실패 시)
+     *
+     * @example
+     * const offset = utils.getOrComputeMarkerOffset(markerItem);
+     * if (!offset) return; // 변환 실패
+     *
+     * // offset.x, offset.y는 화면 픽셀 좌표
+     * const boxWidth = markerItem.boxWidth || 60;
+     * const boxHeight = markerItem.boxHeight || 75;
+     *
+     * // 중앙 정렬, 하단 기준으로 그리기
+     * ctx.fillRect(
+     *   offset.x - boxWidth / 2,
+     *   offset.y - boxHeight,
+     *   boxWidth,
+     *   boxHeight
+     * );
+     */
+    getOrComputeMarkerOffset: (markerData: KonvaCanvasData<T>) => Offset | null;
 }
 /**
  * 커스텀 렌더링 함수 파라미터 - Base Layer
+ *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 (선택)
  */
-export interface RenderBaseParams<T> {
+export interface RenderBaseParams<T, C = any> {
     /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
     ctx: CanvasRenderingContext2D;
     /** 렌더링할 마커 데이터 배열 */
-    items: KonvaCanvasMarkerData<T>[];
+    items: KonvaCanvasData<T>[];
     /** 현재 선택된 마커 ID Set */
     selectedIds: Set<string>;
     /** 렌더링 유틸리티 함수들 */
     utils: RenderUtils<T>;
+    /** 렌더링 설정 (색상, 표시 여부, 모양 등) */
+    config?: C;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Base Layer
  *
  * 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
  *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 - 렌더링 옵션 (색상, 표시 여부, 모양 등)
+ *
  * @example
- * const renderBase = ({ ctx, items, selectedIds, utils }) => {
+ * // 기본 사용 (config 없이)
+ * const renderBase: CustomRenderBase<Marker> = ({ ctx, items, selectedIds, utils }) => {
  *   for (const item of items) {
  *     if (selectedIds.has(item.id)) continue;
  *     const pos = utils.getOrComputeMarkerOffset(item);
- *     ctx.fillRect(pos.x, pos.y, 50, 50); // 순수 Canvas API!
+ *     ctx.fillRect(pos.x, pos.y, 50, 50);
+ *   }
+ * };
+ *
+ * @example
+ * // config 사용
+ * interface MarkerRenderConfig {
+ *   showLabel: boolean;
+ *   color: string;
+ *   shape: 'circle' | 'square';
+ * }
+ *
+ * const renderBase: CustomRenderBase<Marker, MarkerRenderConfig> = ({ ctx, items, config, utils }) => {
+ *   for (const item of items) {
+ *     const pos = utils.getOrComputeMarkerOffset(item);
+ *     ctx.fillStyle = config?.color || 'blue';
+ *     if (config?.shape === 'circle') {
+ *       ctx.arc(pos.x, pos.y, 10, 0, Math.PI * 2);
+ *     } else {
+ *       ctx.fillRect(pos.x, pos.y, 20, 20);
+ *     }
+ *     ctx.fill();
  *   }
  * };
  */
-export declare type CustomRenderBase<T> = (params: RenderBaseParams<T>) => void;
+export declare type CustomRenderBase<T, C = any> = (params: RenderBaseParams<T, C>) => void;
 /**
  * 커스텀 렌더링 함수 파라미터 - Animation Layer
+ *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 (선택)
  */
-export interface RenderAnimationParams<T> {
+export interface RenderAnimationParams<T, C = any> {
     /** Konva Layer 인스턴스 */
     layer: Konva.Layer;
     /** 현재 선택된 마커 ID Set */
     selectedIds: Set<string>;
     /** 전체 마커 데이터 배열 */
-    items: KonvaCanvasMarkerData<T>[];
+    items: KonvaCanvasData<T>[];
     /** 렌더링 유틸리티 함수들 */
     utils: RenderUtils<T>;
+    /** 렌더링 설정 (애니메이션 속도, 효과 등) */
+    config?: C;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Animation Layer (선택)
  *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 - 애니메이션 옵션
+ *
  * @example
- * const renderAnimation = ({ layer, selectedIds, items, utils }) => {
- *   for (const id of selectedIds) {
- *     const item = items.find(i => i.id === id);
- *     // Konva 애니메이션 구현
- *   }
+ * // config 사용
+ * interface AnimationConfig {
+ *   speed: number;
+ *   bounceHeight: number;
+ * }
+ *
+ * const renderAnimation: CustomRenderAnimation<Marker, AnimationConfig> = ({ layer, selectedIds, items, config, utils }) => {
+ *   const bounceHeight = config?.bounceHeight || 15;
+ *   // Konva 애니메이션 구현
  * };
  */
-export declare type CustomRenderAnimation<T> = (params: RenderAnimationParams<T>) => void;
+export declare type CustomRenderAnimation<T, C = any> = (params: RenderAnimationParams<T, C>) => void;
 /**
  * 커스텀 렌더링 함수 파라미터 - Event Layer
+ *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 (선택)
  */
-export interface RenderEventParams<T> {
+export interface RenderEventParams<T, C = any> {
     /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
     ctx: CanvasRenderingContext2D;
     /** 현재 hover된 마커 데이터 */
-    hoveredItem: KonvaCanvasMarkerData<T> | null;
+    hoveredItem: KonvaCanvasData<T> | null;
     /** 렌더링 유틸리티 함수들 */
     utils: RenderUtils<T>;
     /** 현재 선택된 마커 데이터 배열 (선택 강조용) */
-    selectedItems?: KonvaCanvasMarkerData<T>[];
+    selectedItems?: KonvaCanvasData<T>[];
     /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
-    selectedItem?: KonvaCanvasMarkerData<T> | null;
+    selectedItem?: KonvaCanvasData<T> | null;
+    /** 렌더링 설정 (hover 색상, 선택 효과 등) */
+    config?: C;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Event Layer
  *
  * 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
  *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 - 이벤트 렌더링 옵션
+ *
  * @example
- * const renderEvent = ({ ctx, hoveredItem, utils, selectedItems }) => {
+ * // config 사용
+ * interface EventRenderConfig {
+ *   hoverColor: string;
+ *   selectedColor: string;
+ * }
+ *
+ * const renderEvent: CustomRenderEvent<Marker, EventRenderConfig> = ({ ctx, hoveredItem, config, utils }) => {
  *   if (hoveredItem) {
  *     const pos = utils.getOrComputeMarkerOffset(hoveredItem);
- *     ctx.fillStyle = 'red';
- *     ctx.fillRect(pos.x, pos.y, 50, 50); // 순수 Canvas API!
+ *     ctx.fillStyle = config?.hoverColor || 'red';
+ *     ctx.fillRect(pos.x, pos.y, 50, 50);
  *   }
  * };
  */
-export declare type CustomRenderEvent<T> = (params: RenderEventParams<T>) => void;
+export declare type CustomRenderEvent<T, C = any> = (params: RenderEventParams<T, C>) => void;

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

@@ -1,14 +1,14 @@
 import { Offset } from "../../../../types";
 import { MintMapController } from "../../../MintMapController";
-import { KonvaCanvasMarkerData } from "./types";
+import { KonvaCanvasData } from "./types";
 /**
  * 폴리곤 offset 계산
  */
-export declare const computePolygonOffsets: (polygonData: KonvaCanvasMarkerData<any>, controller: MintMapController) => number[][][][] | null;
+export declare const computePolygonOffsets: (polygonData: KonvaCanvasData<any>, controller: MintMapController) => number[][][][] | null;
 /**
  * 마커 offset 계산
  */
-export declare const computeMarkerOffset: (markerData: KonvaCanvasMarkerData<any>, controller: MintMapController) => Offset | null;
+export declare const computeMarkerOffset: (markerData: KonvaCanvasData<any>, controller: MintMapController) => Offset | null;
 /**
  * Point-in-Polygon 알고리즘
  */
@@ -24,9 +24,25 @@ export declare const isPointInPolygon: (point: Offset, polygon: number[][]) => b
  * - 도넛 폴리곤 A: isDonutPolygon=true
  * - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
  */
-export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasMarkerData<any>, getPolygonOffsets: (data: KonvaCanvasMarkerData<any>) => number[][][][] | null) => boolean;
+export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasData<any>, getPolygonOffsets: (data: KonvaCanvasData<any>) => number[][][][] | null) => boolean;
 /**
  * 마커 히트 테스트
  */
-export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasMarkerData<any>, getMarkerOffset: (data: KonvaCanvasMarkerData<any>) => Offset | null) => boolean;
+export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasData<any>, getMarkerOffset: (data: KonvaCanvasData<any>) => Offset | null) => boolean;
 export declare const hexToRgba: (hexColor: string, alpha?: number) => string;
+/**
+ * 텍스트 박스의 너비를 계산합니다.
+ *
+ * @param {Object} params - 파라미터 객체
+ * @param {string} params.text - 측정할 텍스트
+ * @param {string} params.fontConfig - 폰트 설정 (예: 'bold 16px Arial')
+ * @param {number} params.padding - 텍스트 박스에 적용할 패딩 값
+ * @param {number} params.minWidth - 최소 너비
+ * @returns {number} 계산된 텍스트 박스의 너비
+ */
+export declare const calculateTextBoxWidth: ({ text, fontConfig, padding, minWidth, }: {
+    text: string;
+    fontConfig: string;
+    padding: number;
+    minWidth: number;
+}) => number;

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

@@ -173,7 +173,31 @@ var hexToRgba = function (hexColor, alpha) {
 
   throw new Error('Invalid hex color format');
 };
+var tempCanvas = document.createElement('canvas');
+var tempCtx = tempCanvas.getContext('2d');
+/**
+ * 텍스트 박스의 너비를 계산합니다.
+ *
+ * @param {Object} params - 파라미터 객체
+ * @param {string} params.text - 측정할 텍스트
+ * @param {string} params.fontConfig - 폰트 설정 (예: 'bold 16px Arial')
+ * @param {number} params.padding - 텍스트 박스에 적용할 패딩 값
+ * @param {number} params.minWidth - 최소 너비
+ * @returns {number} 계산된 텍스트 박스의 너비
+ */
+
+var calculateTextBoxWidth = function (_a) {
+  var text = _a.text,
+      fontConfig = _a.fontConfig,
+      padding = _a.padding,
+      minWidth = _a.minWidth;
+  if (!tempCtx) return 0;
+  tempCtx.font = fontConfig;
+  var textWidth = tempCtx.measureText(text).width;
+  return Math.max(minWidth, textWidth + padding);
+};
 
+exports.calculateTextBoxWidth = calculateTextBoxWidth;
 exports.computeMarkerOffset = computeMarkerOffset;
 exports.computePolygonOffsets = computePolygonOffsets;
 exports.hexToRgba = hexToRgba;

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

@@ -22,6 +22,7 @@ require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
 require('../core/advanced/woongCanvas/WoongCanvasLayer.js');
 require('../core/advanced/woongCanvas/shared/types.js');
+require('../core/advanced/woongCanvas/shared/utils.js');
 require('../core/advanced/woongCanvas/shared/context.js');
 require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');

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

@@ -23,6 +23,7 @@ require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
 require('../core/advanced/woongCanvas/WoongCanvasLayer.js');
 require('../core/advanced/woongCanvas/shared/types.js');
+require('../core/advanced/woongCanvas/shared/utils.js');
 require('../core/advanced/woongCanvas/shared/context.js');
 require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -22,6 +22,7 @@ require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
 require('../core/advanced/woongCanvas/WoongCanvasLayer.js');
 require('../core/advanced/woongCanvas/shared/types.js');
+require('../core/advanced/woongCanvas/shared/utils.js');
 require('../core/advanced/woongCanvas/shared/context.js');
 require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');