@mint-ui/map 1.2.0-test.8 → 1.2.0

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

@@ -0,0 +1,303 @@
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+ *
+ * 세 가지 스타일 지정 방식을 지원하는 렌더링 함수를 제공합니다:
+ * 1. 개별 props 방식: renderPolygonBase, renderPolygonEvent
+ * 2. 객체 방식: renderPolygonBaseWithObject, renderPolygonEventWithObject
+ * 3. 함수 방식: renderPolygonBaseWithCustomStyle, renderPolygonEventWithCustomStyle
+ */
+import type { PolygonStyleCustomizer, PolygonStyleObject } from './CanvasPolygonLayer';
+import { CustomRenderBase, CustomRenderEvent } from '../shared/types';
+/**
+ * 폴리곤 그리기 파라미터 인터페이스
+ */
+interface DrawPolygonParams {
+    /** Canvas 2D 렌더링 컨텍스트 */
+    ctx: CanvasRenderingContext2D;
+    /** 변환된 폴리곤 좌표 배열 (4차원: [MultiPolygon][Polygon][Point][x/y]) */
+    polygonOffsets: number[][][][];
+    /** 도넛 폴리곤 여부 (구멍이 있는 폴리곤) */
+    isDonutPolygon: boolean;
+    /** 채우기 색상 */
+    fillColor: string;
+    /** 테두리 색상 */
+    strokeColor: string;
+    /** 테두리 두께 */
+    lineWidth: number;
+}
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ *
+ * Canvas 2D Context를 사용하여 폴리곤을 그립니다.
+ * 도넛 폴리곤의 경우 evenodd fill rule을 사용하여 구멍을 처리합니다.
+ *
+ * @param params 폴리곤 그리기 파라미터
+ *
+ * @remarks
+ * - **도넛 폴리곤 처리**:
+ *   - 외부 폴리곤과 내부 구멍들을 같은 path에 추가
+ *   - `fill('evenodd')`를 사용하여 구멍 뚫기
+ * - **일반 폴리곤 처리**: 각 폴리곤 그룹을 개별적으로 그리기
+ * - **성능**: O(n), n은 폴리곤의 총 좌표 수
+ *
+ * @example
+ * ```typescript
+ * drawPolygon({
+ *   ctx,
+ *   polygonOffsets: [[[[100, 200], [200, 200], [200, 100], [100, 100]]]],
+ *   isDonutPolygon: false,
+ *   fillColor: 'rgba(255, 0, 0, 0.5)',
+ *   strokeColor: 'rgba(255, 0, 0, 1)',
+ *   lineWidth: 2
+ * });
+ * ```
+ */
+export declare const drawPolygon: ({ ctx, fillColor, isDonutPolygon, lineWidth, polygonOffsets, strokeColor }: DrawPolygonParams) => void;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택되지 않은 폴리곤만 렌더링하며, 선택된 항목은 Event Layer에서 처리됩니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param baseFillColor 기본 폴리곤 채우기 색상
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
+ * @returns Base Layer 렌더링 함수
+ *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
+ * @example
+ * ```typescript
+ * const renderBase = renderPolygonBase(
+ *   'rgba(255, 100, 100, 0.5)',
+ *   'rgba(200, 50, 50, 0.8)',
+ *   2
+ * );
+ * ```
+ */
+export declare const renderPolygonBase: <T = unknown>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택된 항목, hover된 항목, 마지막 선택된 항목을 각각 다른 스타일로 렌더링합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @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 렌더링 함수
+ *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - hover된 항목이 선택되어 있으면 active 스타일 적용
+ *
+ * @example
+ * ```typescript
+ * 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
+ * );
+ * ```
+ */
+export declare const renderPolygonEvent: <T = unknown>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor: string | undefined, selectedStrokeColor: string | undefined, selectedLineWidth: number | undefined, activeFillColor: string | undefined, activeStrokeColor: string | undefined, activeLineWidth: number | undefined, hoveredFillColor: string | undefined, hoveredStrokeColor: string | undefined, hoveredLineWidth: number | undefined) => CustomRenderEvent<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (객체 방식)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 객체를 사용하여 기본 스타일을 적용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 객체
+ * @returns Base Layer 렌더링 함수
+ *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
+ * @example
+ * ```typescript
+ * 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 = unknown>(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 = unknown>(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) => {
+ *     if (item.someProperty > 100) {
+ *       return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
+ *     }
+ *     // 아무것도 반환하지 않으면 그리지 않음
+ *   }
+ * );
+ * ```
+ */
+export declare const renderPolygonBaseWithCustomStyle: <T = unknown>(customStyle: PolygonStyleCustomizer<T>) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (커스터마이징 방식)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle 함수를 사용하여 각 폴리곤의 스타일을 자유롭게 커스터마이징합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수
+ * @returns Event Layer 렌더링 함수
+ *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
+ * @example
+ * ```typescript
+ * const renderEvent = renderPolygonEventWithCustomStyle<MyDataType>(
+ *   (item, context) => {
+ *     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 };
+ *     }
+ *     // 아무것도 반환하지 않으면 그리지 않음
+ *   }
+ * );
+ * ```
+ */
+export declare const renderPolygonEventWithCustomStyle: <T = unknown>(customStyle: PolygonStyleCustomizer<T>) => CustomRenderEvent<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (하이브리드 방식: customStyle + 개별 props)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (fallback용)
+ * @returns Base Layer 렌더링 함수
+ */
+export declare const renderPolygonBaseWithHybrid: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (하이브리드 방식: customStyle + 개별 props)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (fallback용)
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상 (fallback용)
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (fallback용)
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (fallback용)
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (fallback용)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (fallback용)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (fallback용)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (fallback용)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (fallback용)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (fallback용)
+ * @returns Event Layer 렌더링 함수
+ */
+export declare const renderPolygonEventWithHybrid: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor: string | undefined, selectedStrokeColor: string | undefined, selectedLineWidth: number | undefined, activeFillColor: string | undefined, activeStrokeColor: string | undefined, activeLineWidth: number | undefined, hoveredFillColor: string | undefined, hoveredStrokeColor: string | undefined, hoveredLineWidth: number | undefined) => CustomRenderEvent<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (하이브리드 방식: customStyle + renderStyle)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param renderStyle 폴리곤 스타일 객체 (fallback용)
+ * @returns Base Layer 렌더링 함수
+ */
+export declare const renderPolygonBaseWithHybridObject: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, renderStyle: PolygonStyleObject) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (하이브리드 방식: customStyle + renderStyle)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param renderStyle 폴리곤 스타일 객체 (fallback용)
+ * @returns Event Layer 렌더링 함수
+ */
+export declare const renderPolygonEventWithHybridObject: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, renderStyle: PolygonStyleObject) => CustomRenderEvent<T>;
+export {};