@mint-ui/map 1.2.0-test.2 → 1.2.0-test.20

package/README.md

@@ -129,7 +129,7 @@ npm pack
 #### 5. NPM에 배포
 스코프 패키지(`@mint-ui/map`)는 기본적으로 private이므로 public으로 배포해야 합니다.
 ```bash
-npm publish --access public
+npm publish 
 ```
 
 #### 6. 배포 완료 확인
@@ -154,7 +154,7 @@ npm version patch
 npm pack
 
 # 5단계: 배포
-npm publish --access public
+npm publish 
 ```
 
 ### 현재 패키지 정보
@@ -185,7 +185,7 @@ npm publish --access public
    npm run build
 
    # test tag로 배포
-   npm publish --access public --tag test
+   npm publish  --tag test
    ```
 
 3. **변경사항 커밋 및 푸시**
@@ -202,7 +202,7 @@ npm publish --access public
 
    # 빌드 및 배포
    npm run build
-   npm publish --access public --tag test
+   npm publish  --tag test
 
    # 커밋 및 푸시
    git add .
@@ -215,7 +215,7 @@ npm publish --access public
    git checkout -b 1.2.0-test.2
    npm version 1.2.0-test.2 --no-git-tag-version
    npm run build
-   npm publish --access public --tag test
+   npm publish  --tag test
    git add .
    git commit -m "chore: release 1.2.0-test.2"
    git push origin 1.2.0-test.2
@@ -234,7 +234,7 @@ npm publish --access public
 
    # 빌드 및 배포
    npm run build
-   npm publish --access public
+   npm publish 
 
    # main에 푸시
    git push origin main
@@ -267,5 +267,5 @@ npm install @mint-ui/map@1.2.0-test.1
 ### 주의사항
 - 배포하기 전에 반드시 `npm run build`를 실행해야 합니다
 - 버전은 한 번 배포하면 되돌릴 수 없으니 신중하게 결정하세요
-- 스코프 패키지는 `--access public` 옵션을 반드시 붙여야 합니다
+- 스코프 패키지는 `` 옵션을 반드시 붙여야 합니다
 - test tag로 배포할 때는 `--no-git-tag-version` 옵션을 사용하여 git tag 생성을 방지합니다

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/MintMapCore.js

@@ -8,8 +8,8 @@ var React = require('react');
 var MapTypes = require('../types/MapTypes.js');
 var MintMapProvider = require('./provider/MintMapProvider.js');
 var MintMapCore_module = require('./MintMapCore.module.scss.js');
-require('../types/MapDrawables.js');
-require('../types/MapEventTypes.js');
+require('./advanced/woongCanvas/shared/types.js');
+require('./advanced/woongCanvas/shared/utils.js');
 var context = require('./advanced/woongCanvas/shared/context.js');
 require('./advanced/woongCanvas/shared/performance.js');
 

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

@@ -2,7 +2,4 @@ export * from './shapes';
 export * from './canvas';
 export * from './MapBuildingProjection';
 export * from './MapLoadingComponents';
-export { default as WoongKonvaMarker } from './woongCanvas/WoongKonvaMarker';
-export type { WoongKonvaMarkerProps } from './woongCanvas/WoongKonvaMarker';
-export { KonvaMarkerProvider, LRUCache, SpatialHashGrid, useKonvaMarkerContext } from './woongCanvas/shared';
-export type { RenderUtils, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderBaseParams, RenderAnimationParams, RenderEventParams } from './woongCanvas/shared';
+export * from './woongCanvas';

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

@@ -0,0 +1,227 @@
+import React from "react";
+import { MarkerOptions } from "../../../types";
+import { KonvaCanvasData, CanvasDataType, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "./shared";
+export { KonvaMarkerProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "./shared";
+export type { KonvaCanvasOption, Paths, KonvaCanvasData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "./shared";
+/**
+ * 공통 Props (MARKER와 POLYGON 모두 사용)
+ */
+interface WoongCanvasLayerBaseProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
+    /** 렌더링할 데이터 배열 (마커 또는 폴리곤) */
+    data: KonvaCanvasData<T>[];
+    /** 마커 클릭 시 호출되는 콜백 (선택) */
+    onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
+    /** 마커에 마우스 오버 시 호출되는 콜백 (선택) */
+    onMouseOver?: (payload: KonvaCanvasData<T>) => void;
+    /** 마커에서 마우스 아웃 시 호출되는 콜백 (선택) */
+    onMouseOut?: (payload: KonvaCanvasData<T>) => void;
+    /** 다중 선택 활성화 여부 (기본: false) */
+    enableMultiSelect?: boolean;
+    /** hover 시 마커를 최상단으로 표시 (기본: false) */
+    topOnHover?: boolean;
+    /** 뷰포트 컬링 활성화 여부 (기본: true) */
+    enableViewportCulling?: boolean;
+    /** 뷰포트 컬링 여유 공간 (기본: 100px) */
+    cullingMargin?: number;
+    /** LRU 캐시 최대 크기 (기본: 10000) */
+    maxCacheSize?: number;
+    /** 외부에서 제어하는 선택된 항목 배열 (선택) */
+    selectedItems?: KonvaCanvasData<T>[];
+    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
+    selectedItem?: KonvaCanvasData<T> | null;
+    /** 상호작용 비활성화 (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>;
+declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.ReactPortal;
+/**
+ * 🚀 WoongCanvasLayer - Konva 기반 초고성능 마커/폴리곤 렌더링 컴포넌트
+ *
+ * 30,000개 이상의 마커/폴리곤을 60fps로 렌더링하는 최적화된 Canvas 레이어 시스템입니다.
+ *
+ * ## 🎯 주요 특징
+ * - **30,000개 이상의 폴리곤/마커를 60fps로 렌더링**
+ * - **Multi-Layer 아키텍처**: Base/Animation/Event 레이어 분리
+ * - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
+ * - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
+ * - **Viewport Culling**: 화면에 보이는 영역만 렌더링
+ * - **Discriminated Union Props**: 타입 안전한 MARKER/POLYGON 모드
+ * - **topOnHover + renderEvent 조합**: hover된 항목을 최상단에 표시
+ *
+ * ## 📋 Props API
+ *
+ * ### 공통 Props (MARKER & POLYGON 모두 사용)
+ * @param data - 렌더링할 데이터 배열
+ * @param dataType - 'MARKER' 또는 'POLYGON'
+ * @param onClick - 클릭 시 호출되는 콜백 함수
+ * @param onMouseOver - Hover 시작 시 호출되는 콜백 함수
+ * @param onMouseOut - Hover 종료 시 호출되는 콜백 함수
+ * @param enableMultiSelect - 다중 선택 활성화 여부 (기본: false)
+ * @param topOnHover - Hover 시 최상단 표시 여부 (기본: false)
+ * @param enableViewportCulling - 뷰포트 컬링 활성화 여부 (기본: true)
+ * @param cullingMargin - 컬링 여유 공간 (기본: 100px)
+ * @param maxCacheSize - LRU 캐시 최대 크기 (기본: 30000)
+ * @param selectedItems - 외부 제어 선택 상태
+ * @param selectedItem - 단일 선택 아이템
+ * @param disableInteraction - 모든 상호작용 비활성화 (기본: false)
+ * @param zIndex - 레이어 순서 (기본: 0)
+ * @param visible - 표시 여부 (기본: true)
+ *
+ * ### MARKER 타입 전용 Props
+ * @param renderBase - Base Layer 렌더링 함수 (필수)
+ * @param renderAnimation - Animation Layer 렌더링 함수 (선택)
+ * @param renderEvent - Event Layer 렌더링 함수 (선택)
+ *
+ * ### POLYGON 타입 전용 Props
+ * @param baseFillColor - 기본 채우기 색상 (필수)
+ * @param baseStrokeColor - 기본 테두리 색상 (필수)
+ * @param baseLineWidth - 기본 테두리 두께 (필수)
+ * @param selectedFillColor - 선택 채우기 색상 (선택)
+ * @param selectedStrokeColor - 선택 테두리 색상 (선택)
+ * @param selectedLineWidth - 선택 테두리 두께 (선택)
+ * @param activeFillColor - 마지막 선택 채우기 색상 (선택)
+ * @param activeStrokeColor - 마지막 선택 테두리 색상 (선택)
+ * @param activeLineWidth - 마지막 선택 테두리 두께 (선택)
+ * @param hoveredFillColor - Hover 채우기 색상 (선택)
+ * @param hoveredStrokeColor - Hover 테두리 색상 (선택)
+ * @param hoveredLineWidth - Hover 테두리 두께 (선택)
+ *
+ * ## 🎯 사용 방법
+ *
+ * ### 1️⃣ POLYGON 모드 (자동 렌더링)
+ * ```tsx
+ * <WoongCanvasLayer
+ *   dataType={CanvasDataType.POLYGON}
+ *   data={polygons}
+ *   baseFillColor="rgba(255, 100, 100, 0.5)"
+ *   baseStrokeColor="rgba(200, 50, 50, 0.8)"
+ *   baseLineWidth={2}
+ *   selectedFillColor="rgba(255, 193, 7, 0.7)"
+ *   selectedStrokeColor="rgba(255, 152, 0, 1)"
+ *   selectedLineWidth={4}
+ *   hoveredFillColor="rgba(100, 150, 255, 0.8)"
+ *   hoveredStrokeColor="rgba(0, 100, 200, 1)"
+ *   hoveredLineWidth={3}
+ *   enableMultiSelect={true}
+ *   onClick={handleClick}
+ * />
+ * ```
+ *
+ * ### 2️⃣ MARKER 모드 (커스텀 렌더링)
+ * ```tsx
+ * <WoongCanvasLayer
+ *   dataType={CanvasDataType.MARKER}
+ *   data={markers}
+ *   renderBase={renderMarkerBase}
+ *   renderAnimation={renderMarkerAnimation}
+ *   renderEvent={renderMarkerEvent}
+ *   topOnHover={true}
+ *   onClick={handleClick}
+ * />
+ * ```
+ *
+ * ### 3️⃣ topOnHover + renderEvent 조합
+ *
+ * `topOnHover={true}`와 `renderEvent`를 함께 사용하면 hover된 항목이 최상단에 표시됩니다:
+ *
+ * ```tsx
+ * <WoongCanvasLayer
+ *   dataType={CanvasDataType.MARKER}
+ *   data={markers}
+ *   renderBase={renderMarkerBase}
+ *   renderEvent={renderMarkerEvent}
+ *   topOnHover={true}
+ *   onClick={handleClick}
+ * />
+ * ```
+ *
+ * **동작 방식:**
+ * 1. **Base Layer**: hover된 항목을 제외하고 일반 항목들 렌더링
+ * 2. **Event Layer**:
+ *    - 먼저 hover된 항목을 제외한 나머지 항목들 렌더링
+ *    - 그 다음 hover된 항목을 최상단에 렌더링 (시각적 우선순위)
+ *
+ * ## 📊 데이터 형식
+ * ```typescript
+ * const data: KonvaCanvasData<T>[] = [
+ *   {
+ *     id: 'unique-id',
+ *     position: new Position(lat, lng),
+ *     // POLYGON: paths 필수
+ *     paths: [[[lat, lng], [lat, lng], ...]],
+ *     // MARKER: boxWidth/boxHeight 권장 (Hit Test 정확도)
+ *     boxWidth: 60,
+ *     boxHeight: 75,
+ *     tailHeight: 9,  // 꼬리 높이 (Viewport Culling용, Hit Test 제외)
+ *     // 커스텀 데이터
+ *     ...customData
+ *   }
+ * ];
+ * ```
+ *
+ * ## ⚡ 성능 최적화 팁
+ * 1. **동적 boxWidth 계산**: `measureText()`로 실제 너비 계산 후 전달
+ * 2. **enableViewportCulling**: 대량 데이터 시 필수 (기본 true)
+ * 3. **selectedItems 외부 관리**: 상태를 외부에서 관리하여 리렌더링 최소화
+ * 4. **React.memo 최적화**: 컴포넌트가 자동으로 불필요한 리렌더링 방지
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ *
+ * @example
+ * // 동적 boxWidth 계산 예시
+ * const tempCtx = document.createElement('canvas').getContext('2d');
+ * tempCtx.font = 'bold 15px Arial';
+ * const boxWidth = Math.max(60, tempCtx.measureText(text).width + 20);
+ *
+ * @see {@link ./README.md} 전체 문서
+ * @version 2.2.1
+ * @since 2.0.0
+ */
+export default WoongCanvasLayer;