@mint-ui/map 1.1.1 → 1.2.0-test.1

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

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './utils';
+export * from './context';
+export * from './performance';

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

@@ -0,0 +1,161 @@
+/**
+ * 공간 인덱스 그리드 셀 크기 (px)
+ *
+ * 최적값 계산:
+ * - 목표: 클릭 시 셀당 10~30개 항목만 체크 (빠른 Hit Test)
+ * - 화면 크기: 1920×1080 기준
+ * - 30,000개 항목 → 50px 셀 크기 = 약 800개 셀 = 셀당 ~37개
+ *
+ * 성능 비교 (30,000개 기준):
+ * - 200px: 셀당 ~577개 → Hit Test O(577) ❌ 느림
+ * - 50px:  셀당 ~37개  → Hit Test O(37)  ✅ 15배 빠름!
+ *
+ * 트레이드오프:
+ * - 작을수록: Hit Test 빠름, 메모리 사용량 증가
+ * - 클수록: 메모리 효율적, Hit Test 느림
+ */
+export declare const SPATIAL_GRID_CELL_SIZE = 50;
+/**
+ * 뷰포트 컬링 여유 공간 (px)
+ *
+ * 화면 밖 100px까지 렌더링하여 스크롤 시 부드러운 전환
+ * 30,000개 중 실제 렌더링: 화면에 보이는 1,000~3,000개만
+ */
+export declare const DEFAULT_CULLING_MARGIN = 100;
+/**
+ * LRU 캐시 최대 항목 수
+ *
+ * 좌표 변환 결과 캐싱 (positionToOffset 연산 비용 절약)
+ *
+ * 최적값 계산:
+ * - 전체 항목: 30,000개
+ * - 캐시 크기: 30,000개 → 100% 히트율 (메모리: ~2.4MB)
+ *
+ * 메모리 사용량 (항목당 ~80 bytes):
+ * - 10,000개: ~800KB  → 캐시 히트율 33% ❌
+ * - 30,000개: ~2.4MB  → 캐시 히트율 100% ✅
+ *
+ * zoom/pan 시 어차피 clear() 호출되므로 메모리 누적 없음
+ */
+export declare const DEFAULT_MAX_CACHE_SIZE = 30000;
+/**
+ * LRU (Least Recently Used) Cache
+ * 메모리 제한을 위한 캐시 구현 (최적화 버전)
+ *
+ * 개선 사항:
+ * 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
+ * 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
+ * 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
+ */
+export declare class LRUCache<K, V> {
+    private cache;
+    private maxSize;
+    constructor(maxSize?: number);
+    /**
+     * 캐시에서 값 조회
+     *
+     * 최적화: delete+set 제거
+     * - 이전: 매번 delete+set으로 LRU 갱신 (해시 재계산 비용)
+     * - 현재: 단순 조회만 수행 (O(1) 해시 조회)
+     *
+     * 트레이드오프:
+     * - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
+     * - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
+     *
+     * WoongKonvaMarker 사용 사례에 최적:
+     * - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
+     * - 접근 빈도 추적보다 빠른 조회가 더 중요
+     */
+    get(key: K): V | undefined;
+    /**
+     * 캐시에 값 저장 (버그 수정 + 최적화)
+     *
+     * 수정 사항:
+     * 1. 기존 키 업데이트 시 크기 체크 누락 버그 수정
+     * 2. 로직 명확화: 기존 항목/신규 항목 분리 처리
+     */
+    set(key: K, value: V): void;
+    clear(): void;
+    size(): number;
+    has(key: K): boolean;
+}
+/**
+ * Spatial Hash Grid (공간 해시 그리드)
+ * 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
+ *
+ * 개선 사항:
+ * 1. 중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전
+ * 2. 메모리 누수 방지: 기존 항목 자동 제거
+ * 3. 성능 최적화: 불필요한 배열 생성 최소화
+ *
+ * 사용 사례:
+ * - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
+ * - 30,000개 항목 → 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
+ */
+export declare class SpatialHashGrid<T> {
+    private cellSize;
+    private grid;
+    private itemToCells;
+    constructor(cellSize?: number);
+    /**
+     * 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
+     */
+    private getCellKey;
+    /**
+     * 바운딩 박스가 걸치는 모든 셀 키 배열 반환
+     */
+    private getCellsForBounds;
+    /**
+     * 항목 추가 (바운딩 박스 기반)
+     *
+     * 개선 사항:
+     * - 중복 삽입 방지: 기존 항목이 있으면 먼저 제거 후 재삽입
+     * - 메모리 누수 방지: 이전 셀 참조 완전 제거
+     */
+    insert(item: T, minX: number, minY: number, maxX: number, maxY: number): void;
+    /**
+     * 항목 제거
+     *
+     * 추가된 메서드: 메모리 누수 방지 및 업데이트 지원
+     */
+    remove(item: T): void;
+    /**
+     * 항목 위치 업데이트
+     *
+     * 추가된 메서드: remove + insert의 편의 함수
+     */
+    update(item: T, minX: number, minY: number, maxX: number, maxY: number): void;
+    /**
+     * 점 주변의 항목 조회 (1개 셀만)
+     *
+     * 성능: O(해당 셀의 항목 수) - 보통 ~10개
+     */
+    queryPoint(x: number, y: number): T[];
+    /**
+     * 영역 내 항목 조회
+     *
+     * 성능: O(셀 개수 × 셀당 평균 항목 수)
+     * Set으로 중복 제거 보장
+     */
+    queryBounds(minX: number, minY: number, maxX: number, maxY: number): T[];
+    /**
+     * 항목 존재 여부 확인
+     *
+     * 추가된 메서드: 빠른 존재 여부 체크
+     */
+    has(item: T): boolean;
+    /**
+     * 전체 초기화
+     */
+    clear(): void;
+    /**
+     * 통계 정보
+     *
+     * 개선: totalItems는 실제 고유 항목 수를 정확히 반환
+     */
+    stats(): {
+        totalCells: number;
+        totalItems: number;
+        avgItemsPerCell: number;
+    };
+}

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

@@ -0,0 +1,121 @@
+import Konva from "konva";
+import { Position, Offset } from "../../../../types";
+/**
+ * 폴리곤 경로 정의
+ */
+export interface Paths {
+    type: string;
+    coordinates: number[][][][];
+}
+/**
+ * 캔버스 마커/폴리곤 기본 옵션
+ */
+/**
+ * 캔버스 마커/폴리곤의 기본 필수 속성
+ * (렌더링에 필요한 최소 정보)
+ */
+export interface CanvasMarkerOption {
+    id: string;
+    position: Position[];
+    boxWidth?: number;
+    boxHeight?: number;
+    paths?: Paths;
+    isDonutPolygon?: boolean;
+}
+/**
+ * 서버 데이터와 캔버스 옵션을 결합한 타입
+ * @template T 서버에서 받은 원본 데이터 타입 (예: Marker, Polygon)
+ * @example
+ * // API에서 받은 Marker 타입을 그대로 유지하면서 캔버스 렌더링 정보 추가
+ * type MarkerWithCanvas = CanvasMarkerData<Marker>
+ * // { raId, lat, lng, buildingName, totalArea } + { id, position, boxWidth, ... }
+ */
+export declare type CanvasMarkerData<T = {}> = T & CanvasMarkerOption;
+/**
+ * 렌더링 유틸리티 함수들
+ */
+export interface RenderUtils<T> {
+    getOrComputePolygonOffsets: (polygonData: CanvasMarkerData<T>) => number[][][][] | null;
+    getOrComputeMarkerOffset: (markerData: CanvasMarkerData<T>) => Offset | null;
+}
+/**
+ * 커스텀 렌더링 함수 파라미터 - Base Layer
+ */
+export interface RenderBaseParams<T> {
+    /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
+    ctx: CanvasRenderingContext2D;
+    /** 렌더링할 마커 데이터 배열 */
+    items: CanvasMarkerData<T>[];
+    /** 현재 선택된 마커 ID Set */
+    selectedIds: Set<string>;
+    /** 렌더링 유틸리티 함수들 */
+    utils: RenderUtils<T>;
+}
+/**
+ * 커스텀 렌더링 함수 타입 - Base Layer
+ *
+ * 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
+ *
+ * @example
+ * const renderBase = ({ 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!
+ *   }
+ * };
+ */
+export declare type CustomRenderBase<T> = (params: RenderBaseParams<T>) => void;
+/**
+ * 커스텀 렌더링 함수 파라미터 - Animation Layer
+ */
+export interface RenderAnimationParams<T> {
+    /** Konva Layer 인스턴스 */
+    layer: Konva.Layer;
+    /** 현재 선택된 마커 ID Set */
+    selectedIds: Set<string>;
+    /** 전체 마커 데이터 배열 */
+    items: CanvasMarkerData<T>[];
+    /** 렌더링 유틸리티 함수들 */
+    utils: RenderUtils<T>;
+}
+/**
+ * 커스텀 렌더링 함수 타입 - Animation Layer (선택)
+ *
+ * @example
+ * const renderAnimation = ({ layer, selectedIds, items, utils }) => {
+ *   for (const id of selectedIds) {
+ *     const item = items.find(i => i.id === id);
+ *     // Konva 애니메이션 구현
+ *   }
+ * };
+ */
+export declare type CustomRenderAnimation<T> = (params: RenderAnimationParams<T>) => void;
+/**
+ * 커스텀 렌더링 함수 파라미터 - Event Layer
+ */
+export interface RenderEventParams<T> {
+    /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
+    ctx: CanvasRenderingContext2D;
+    /** 현재 hover된 마커 데이터 */
+    hoveredItem: CanvasMarkerData<T> | null;
+    /** 렌더링 유틸리티 함수들 */
+    utils: RenderUtils<T>;
+    /** 현재 선택된 마커 데이터 배열 (선택 강조용) */
+    selectedItems?: CanvasMarkerData<T>[];
+}
+/**
+ * 커스텀 렌더링 함수 타입 - Event Layer
+ *
+ * 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
+ *
+ * @example
+ * const renderEvent = ({ ctx, hoveredItem, utils, selectedItems }) => {
+ *   if (hoveredItem) {
+ *     const pos = utils.getOrComputeMarkerOffset(hoveredItem);
+ *     ctx.fillStyle = 'red';
+ *     ctx.fillRect(pos.x, pos.y, 50, 50); // 순수 Canvas API!
+ *   }
+ * };
+ */
+export declare type CustomRenderEvent<T> = (params: RenderEventParams<T>) => void;

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

@@ -0,0 +1,23 @@
+import { Offset } from "../../../../types";
+import { MintMapController } from "../../../MintMapController";
+import { CanvasMarkerData } from "./types";
+/**
+ * 폴리곤 offset 계산
+ */
+export declare const computePolygonOffsets: (polygonData: CanvasMarkerData<any>, controller: MintMapController) => number[][][][] | null;
+/**
+ * 마커 offset 계산
+ */
+export declare const computeMarkerOffset: (markerData: CanvasMarkerData<any>, controller: MintMapController) => Offset | null;
+/**
+ * Point-in-Polygon 알고리즘
+ */
+export declare const isPointInPolygon: (point: Offset, polygon: number[][]) => boolean;
+/**
+ * 폴리곤 히트 테스트
+ */
+export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: CanvasMarkerData<any>, getPolygonOffsets: (data: CanvasMarkerData<any>) => number[][][][] | null) => boolean;
+/**
+ * 마커 히트 테스트
+ */
+export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: CanvasMarkerData<any>, getMarkerOffset: (data: CanvasMarkerData<any>) => Offset | null) => boolean;

package/dist/components/mint-map/core/util/geohash.d.ts

@@ -0,0 +1,2 @@
+export declare function geohashEncode(lat: number, lon: number, precision?: number): string;
+export declare function geohashNeighbors(hash: string): string[];

package/dist/components/mint-map/core/util/geohash.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// Lightweight Geohash encoder and neighbor utilities
+var BASE32 = '0123456789bcdefghjkmnpqrstuvwxyz';
+var NEIGHBORS = {
+  n: {
+    even: {
+      border: 'prxz',
+      neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
+    },
+    odd: {
+      border: 'bcfguvyz',
+      neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
+    }
+  },
+  s: {
+    even: {
+      border: '028b',
+      neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
+    },
+    odd: {
+      border: '0145hjnp',
+      neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
+    }
+  },
+  e: {
+    even: {
+      border: 'bcfguvyz',
+      neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
+    },
+    odd: {
+      border: 'prxz',
+      neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
+    }
+  },
+  w: {
+    even: {
+      border: '0145hjnp',
+      neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
+    },
+    odd: {
+      border: '028b',
+      neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
+    }
+  }
+};
+function geohashEncode(lat, lon, precision) {
+  if (precision === void 0) {
+    precision = 6;
+  }
+
+  var idx = 0;
+  var bit = 0;
+  var evenBit = true;
+  var geohash = '';
+  var latMin = -90,
+      latMax = 90;
+  var lonMin = -180,
+      lonMax = 180;
+
+  while (geohash.length < precision) {
+    if (evenBit) {
+      var lonMid = (lonMin + lonMax) / 2;
+
+      if (lon >= lonMid) {
+        idx = idx * 2 + 1;
+        lonMin = lonMid;
+      } else {
+        idx = idx * 2;
+        lonMax = lonMid;
+      }
+    } else {
+      var latMid = (latMin + latMax) / 2;
+
+      if (lat >= latMid) {
+        idx = idx * 2 + 1;
+        latMin = latMid;
+      } else {
+        idx = idx * 2;
+        latMax = latMid;
+      }
+    }
+
+    evenBit = !evenBit;
+
+    if (++bit == 5) {
+      geohash += BASE32.charAt(idx);
+      bit = 0;
+      idx = 0;
+    }
+  }
+
+  return geohash;
+}
+
+function adjacent(hash, dir) {
+  var lastChr = hash[hash.length - 1];
+  var type = hash.length % 2 ? 'odd' : 'even'; // @ts-ignore
+
+  var border = NEIGHBORS[dir][type].border; // @ts-ignore
+
+  var neighbor = NEIGHBORS[dir][type].neighbor;
+  var base = hash.substring(0, hash.length - 1);
+
+  if (border.indexOf(lastChr) !== -1) {
+    base = adjacent(base, dir);
+  }
+
+  var pos = neighbor.indexOf(lastChr);
+  var nextChr = BASE32.charAt(pos);
+  return base + nextChr;
+}
+
+function geohashNeighbors(hash) {
+  var n = adjacent(hash, 'n');
+  var s = adjacent(hash, 's');
+  var e = adjacent(hash, 'e');
+  var w = adjacent(hash, 'w');
+  return [hash, n, s, e, w, adjacent(n, 'e'), adjacent(n, 'w'), adjacent(s, 'e'), adjacent(s, 'w')];
+}
+
+exports.geohashEncode = geohashEncode;
+exports.geohashNeighbors = geohashNeighbors;

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

@@ -18,6 +18,7 @@ require('../core/util/animation.js');
 require('../core/util/geo.js');
 var polygon = require('../core/util/polygon.js');
 require('../naver/NaverMintMapController.js');
+require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
 require('../core/wrapper/MapControlWrapper.js');
 

package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="kakaomaps" />
+import { MintMapController } from "../core/MintMapController";
+import { ObjectPool } from '@mint-ui/tools';
+import { MapType, MapVendorType } from "../types/CommonTypes";
+import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, PolylineOptions } from "../types/MapDrawables";
+import { Bounds, Position, Spacing } from '../types/MapTypes';
+import { MintMapProps } from "../types/MintMapProps";
+import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from "../types/MapEventTypes";
+import { Property } from "csstype";
+export declare class KakaoMintMapController extends MintMapController {
+    type: MapType;
+    map: kakao.maps.Map | null;
+    scriptUrl: string;
+    scriptModules: string[];
+    protected mapEvent: MapEvent;
+    protected mapUIEvent: MapUIEvent;
+    markerPool?: ObjectPool<kakao.maps.CustomOverlay>;
+    constructor(props: MintMapProps);
+    private initMarkerPool;
+    polylineEvents: string[];
+    createPolyline(polyline: Polyline): void;
+    updatePolyline(polyline: Polyline, options: PolylineOptions): void;
+    polygonEvents: string[];
+    createPolygon(polygon: Polygon): void;
+    updatePolygon(polygon: Polygon, options: PolygonOptions): void;
+    markerEvents: string[];
+    createMarker(marker: Marker): void;
+    updateMarker(marker: Marker, options: MarkerOptions): void;
+    private removeParentElementsMargin;
+    private markerMaxZIndex;
+    private getMaxZIndex;
+    setMarkerZIndex(marker: Marker, zIndex: number): void;
+    markerToTheTop(marker: Marker): void;
+    clearDrawable(drawable: Drawable): boolean;
+    private dragged;
+    isMapDragged(): boolean;
+    setMapDragged(value: boolean): void;
+    private checkLoaded;
+    loadMapApi(): Promise<boolean>;
+    initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
+    private getSafeZoomValue;
+    destroyMap(): void;
+    getCurrBounds(): Bounds;
+    panningTo(targetCenter: Position): void;
+    getZoomLevel(): number;
+    setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
+    setMapCursor(cursor: Property.Cursor): void;
+    private positionToLatLng;
+    private latLngToPosition;
+    focusPositionsToFitViewport(positions: Position[], spacing?: number | Spacing): void;
+    private eventMap;
+    addEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeAllEventListener(eventName?: MapEventName | undefined): void;
+    private clearEventListener;
+}

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

@@ -19,6 +19,7 @@ require('../core/util/animation.js');
 require('../core/util/geo.js');
 var polygon = require('../core/util/polygon.js');
 require('../naver/NaverMintMapController.js');
+require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
 require('../core/wrapper/MapControlWrapper.js');
 

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

@@ -18,6 +18,7 @@ require('react-dom');
 require('../core/util/animation.js');
 require('../core/util/geo.js');
 var polygon = require('../core/util/polygon.js');
+require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
 require('../core/wrapper/MapControlWrapper.js');
 

package/dist/components/mint-map/types/CommonTypes.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="navermaps" />
+/// <reference types="google.maps" />
+/// <reference types="kakaomaps" />
+/**
+ * 지원되는 맵 종류
+ */
+export declare type MapType = 'naver' | 'google' | 'kakao';
+/**
+ * 맵 객체의 native 타입
+ */
+export declare type MapVendorType = naver.maps.Map | google.maps.Map | kakao.maps.Map;