@mint-ui/map 1.2.0-test.31 → 1.2.0-test.32

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

@@ -1,162 +0,0 @@
-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로 렌더링**
- * - **Multi-Layer 아키텍처**: Base/Animation/Event 레이어 분리
- * - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
- * - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
- * - **Viewport Culling**: 화면에 보이는 영역만 렌더링
- * - **Discriminated Union Props**: 타입 안전한 MARKER/POLYGON 모드
- *
- * ## 🎯 사용 방법
- *
- * ### 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)"  // optional
- *   hoveredStrokeColor="rgba(0, 100, 200, 1)"    // optional
- *   hoveredLineWidth={3}                         // optional
- *   enableMultiSelect={true}
- *   onClick={handleClick}
- * />
- * ```
- *
- * ### 2️⃣ MARKER 모드 (커스텀 렌더링)
- * ```tsx
- * <WoongCanvasLayer
- *   dataType={CanvasDataType.MARKER}
- *   data={markers}
- *   renderBase={renderMarkerBase}              // required
- *   renderAnimation={renderMarkerAnimation}    // optional
- *   renderEvent={renderMarkerEvent}            // optional
- *   topOnHover={true}
- *   onClick={handleClick}
- * />
- * ```
- *
- * ## 📊 데이터 형식
- * ```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,
- *     // 커스텀 데이터
- *     ...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 https://github.com/your-repo/docs/WoongCanvasLayer.md} 전체 문서
- */
-export default WoongCanvasLayer;

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

@@ -1,3 +0,0 @@
-export { default as WoongCanvasLayer } from "./WoongCanvasLayer";
-export * from "./WoongCanvasLayer";
-export * from "./shared";

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

@@ -1,234 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-/**
- * 폴리곤 렌더링 유틸리티
- *
- * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
- */
-
-/**
- * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
- */
-var drawPolygon = function (_a) {
-  var ctx = _a.ctx,
-      polygonOffsets = _a.polygonOffsets,
-      isDonutPolygon = _a.isDonutPolygon,
-      fillColor = _a.fillColor,
-      strokeColor = _a.strokeColor,
-      lineWidth = _a.lineWidth;
-
-  for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
-    var multiPolygon = polygonOffsets_1[_i];
-
-    if (isDonutPolygon) {
-      ctx.beginPath(); // 1. 외부 폴리곤 그리기
-
-      if (multiPolygon[0] && multiPolygon[0].length > 0) {
-        ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
-
-        for (var i = 1; i < multiPolygon[0].length; i++) {
-          ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
-        }
-
-        ctx.closePath();
-      } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
-
-
-      for (var j = 1; j < multiPolygon.length; j++) {
-        var innerPolygon = multiPolygon[j];
-        if (innerPolygon.length === 0) continue;
-        ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
-
-        for (var i = 1; i < innerPolygon.length; i++) {
-          ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
-        }
-
-        ctx.closePath();
-      } // 3. evenodd fill rule로 구멍 뚫기
-
-
-      ctx.fillStyle = fillColor;
-      ctx.fill('evenodd'); // 4. 외곽선 그리기
-
-      ctx.strokeStyle = strokeColor;
-      ctx.lineWidth = lineWidth;
-      ctx.stroke();
-    } else {
-      // 일반 폴리곤
-      for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
-        var polygonGroup = multiPolygon_1[_b];
-        if (!polygonGroup.length) continue;
-        ctx.beginPath();
-        var firstPoint = polygonGroup[0];
-        ctx.moveTo(firstPoint[0], firstPoint[1]);
-
-        for (var i = 1; i < polygonGroup.length; i++) {
-          var point = polygonGroup[i];
-          ctx.lineTo(point[0], point[1]);
-        }
-
-        ctx.closePath();
-        ctx.fillStyle = fillColor;
-        ctx.strokeStyle = strokeColor;
-        ctx.lineWidth = lineWidth;
-        ctx.fill();
-        ctx.stroke();
-      }
-    }
-  }
-};
-/**
- * 폴리곤 Base 렌더링 함수
- *
- * @param baseFillColor 기본 폴리곤 채우기 색상
- * @param baseStrokeColor 기본 폴리곤 테두리 색상
- * @param baseLineWidth 기본 폴리곤 테두리 두께
- * @returns Base Layer 렌더링 함수
- *
- * @example
- * const renderBase = renderPolygonBase(
- *   'rgba(255, 100, 100, 0.5)',
- *   'rgba(200, 50, 50, 0.8)',
- *   2
- * );
- */
-
-var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
-  return function (_a) {
-    var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
-
-    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
-
-      if (selectedIds.has(item.id)) continue;
-      if (!item.paths) continue;
-      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-      if (!polygonOffsets) continue;
-      drawPolygon({
-        ctx: ctx,
-        polygonOffsets: polygonOffsets,
-        isDonutPolygon: item.isDonutPolygon || false,
-        fillColor: baseFillColor,
-        strokeColor: baseStrokeColor,
-        lineWidth: baseLineWidth
-      });
-    }
-  };
-};
-/**
- * 폴리곤 Event 렌더링 함수
- *
- * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
- * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
- * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
- * @param selectedFillColor 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
- * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
- * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
- * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
- * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
- * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
- * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
- * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
- * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
- * @returns Event Layer 렌더링 함수
- *
- * @example
- * const renderEvent = renderPolygonEvent(
- *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
- *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
- *   2,                            // baseLineWidth
- *   'rgba(255, 193, 7, 0.7)',    // selectedFillColor
- *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
- *   4                             // selectedLineWidth
- * );
- */
-
-var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
-  // 기본값 설정 (base 기준)
-  var _selectedFillColor = selectedFillColor || baseFillColor;
-
-  var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
-
-  var _selectedLineWidth = selectedLineWidth || baseLineWidth;
-
-  var _activeFillColor = activeFillColor || _selectedFillColor;
-
-  var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
-
-  var _activeLineWidth = activeLineWidth || _selectedLineWidth;
-
-  var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
-
-  var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
-
-  var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
-
-  return function (_a) {
-    var ctx = _a.ctx,
-        hoveredItem = _a.hoveredItem,
-        utils = _a.utils,
-        selectedItems = _a.selectedItems,
-        selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
-
-    if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
-      for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
-        var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
-
-        if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
-        if (!item.paths) continue;
-        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-        if (!polygonOffsets) continue;
-        drawPolygon({
-          ctx: ctx,
-          polygonOffsets: polygonOffsets,
-          isDonutPolygon: item.isDonutPolygon || false,
-          fillColor: _selectedFillColor,
-          strokeColor: _selectedStrokeColor,
-          lineWidth: _selectedLineWidth
-        });
-      }
-    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
-
-
-    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
-      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
-
-      if (polygonOffsets) {
-        drawPolygon({
-          ctx: ctx,
-          polygonOffsets: polygonOffsets,
-          isDonutPolygon: selectedItem.isDonutPolygon || false,
-          fillColor: _activeFillColor,
-          strokeColor: _activeStrokeColor,
-          lineWidth: _activeLineWidth
-        });
-      }
-    } // 3. 호버된 항목 그리기 (가장 위에 표시)
-
-
-    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
-      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
-      if (!polygonOffsets) return;
-      var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
-        return item.id === hoveredItem.id;
-      });
-      drawPolygon({
-        ctx: ctx,
-        polygonOffsets: polygonOffsets,
-        isDonutPolygon: hoveredItem.isDonutPolygon || false,
-        fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
-        strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
-        lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
-      });
-    }
-  };
-};
-
-exports.drawPolygon = drawPolygon;
-exports.renderPolygonBase = renderPolygonBase;
-exports.renderPolygonEvent = renderPolygonEvent;