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

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

@@ -0,0 +1,382 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+require('../../../types/MapDrawables.js');
+var MapTypes = require('../../../types/MapTypes.js');
+require('../../../types/MapEventTypes.js');
+
+/**
+ * 폴리곤 좌표 변환 (위경도 → 화면 좌표)
+ *
+ * @param polygonData 폴리곤 데이터
+ * @param controller MintMapController 인스턴스
+ * @returns 변환된 화면 좌표 배열 (4차원 배열) 또는 null
+ */
+
+var computePolygonOffsets = function ( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+polygonData, controller) {
+  var paths = polygonData.paths;
+
+  if (!paths || paths.type !== 'MultiPolygon' || !paths.coordinates) {
+    return null;
+  }
+
+  var result = []; // GeoJSON MultiPolygon 구조: [MultiPolygon][PolygonGroup][Coordinate][lng, lat]
+
+  for (var _i = 0, _a = paths.coordinates; _i < _a.length; _i++) {
+    var multiPolygon = _a[_i];
+    var multiPolygonOffsets = [];
+
+    for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
+      var polygonGroup = multiPolygon_1[_b];
+      var polygonOffsets = [];
+
+      for (var _c = 0, polygonGroup_1 = polygonGroup; _c < polygonGroup_1.length; _c++) {
+        var coord = polygonGroup_1[_c]; // GeoJSON은 [lng, lat] 순서이지만 Position은 [lat, lng] 순서
+
+        var pos = new MapTypes.Position(coord[1], coord[0]);
+        var offset = controller.positionToOffset(pos);
+        polygonOffsets.push([offset.x, offset.y]);
+      }
+
+      multiPolygonOffsets.push(polygonOffsets);
+    }
+
+    result.push(multiPolygonOffsets);
+  }
+
+  return result;
+};
+/**
+ * 마커 좌표 변환 (위경도 → 화면 좌표)
+ *
+ * @param markerData 마커 데이터
+ * @param controller MintMapController 인스턴스
+ * @returns 변환된 화면 좌표 또는 null
+ */
+
+var computeMarkerOffset = function ( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+markerData, controller) {
+  if (!markerData.position) return null;
+  return controller.positionToOffset(markerData.position);
+};
+/**
+ * Point-in-Polygon 알고리즘 (Ray Casting)
+ *
+ * @param point 확인할 점의 좌표
+ * @param polygon 폴리곤 좌표 배열
+ * @returns 점이 폴리곤 내부에 있으면 true
+ */
+
+var isPointInPolygon = function (point, polygon) {
+  // Ray Casting 알고리즘: 점에서 오른쪽으로 무한히 뻗은 선과 폴리곤 변의 교차 횟수로 판단
+  var inside = false;
+
+  for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    var xi = polygon[i][0];
+    var yi = polygon[i][1];
+    var xj = polygon[j][0];
+    var yj = polygon[j][1]; // 점의 y 좌표가 변의 양 끝점 사이에 있고, 교차점의 x 좌표가 점의 x 좌표보다 큰지 확인
+
+    var intersect = yi > point.y !== yj > point.y && point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside; // 교차할 때마다 inside 상태 토글
+  }
+
+  return inside;
+};
+/**
+ * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
+ *
+ * @param clickedOffset 클릭/마우스 위치 좌표
+ * @param polygonData 폴리곤 데이터
+ * @param getPolygonOffsets 폴리곤 좌표 변환 함수
+ * @returns 점이 폴리곤 내부에 있으면 true
+ */
+
+var isPointInPolygonData = function (clickedOffset, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+polygonData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+getPolygonOffsets) {
+  var polygonOffsets = getPolygonOffsets(polygonData);
+  if (!polygonOffsets) return false; // 도넛 폴리곤 처리: 외부 폴리곤 내부에 있으면서 구멍(hole) 내부에 있지 않아야 함
+
+  if (polygonData.isDonutPolygon) {
+    for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+      var multiPolygon = polygonOffsets_1[_i];
+      if (multiPolygon.length === 0) continue; // 구멍이 없는 경우 일반 폴리곤과 동일
+
+      if (multiPolygon.length === 1) {
+        if (isPointInPolygon(clickedOffset, multiPolygon[0])) {
+          return true;
+        }
+
+        continue;
+      } // 외부 폴리곤 내부에 있는지 확인
+
+
+      var outerPolygon = multiPolygon[0];
+
+      if (!isPointInPolygon(clickedOffset, outerPolygon)) {
+        continue;
+      } // 구멍 내부에 있으면 false (도넛의 빈 공간)
+
+
+      for (var i = 1; i < multiPolygon.length; i++) {
+        var hole = multiPolygon[i];
+
+        if (isPointInPolygon(clickedOffset, hole)) {
+          return false;
+        }
+      } // 외부 폴리곤 내부에 있으면서 모든 구멍 밖에 있으면 true
+
+
+      return true;
+    }
+
+    return false;
+  } // 일반 폴리곤 처리
+
+
+  for (var _a = 0, polygonOffsets_2 = polygonOffsets; _a < polygonOffsets_2.length; _a++) {
+    var multiPolygon = polygonOffsets_2[_a];
+
+    for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
+      var polygonGroup = multiPolygon_2[_b];
+      if (polygonGroup.length === 0) continue;
+
+      if (isPointInPolygon(clickedOffset, polygonGroup)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+/**
+ * 마커 히트 테스트 (꼬리 제외, 오프셋 지원)
+ *
+ * @param clickedOffset 클릭/마우스 위치 좌표
+ * @param markerData 마커 데이터
+ * @param getMarkerOffset 마커 좌표 변환 함수
+ * @returns 점이 마커 영역 내부에 있으면 true
+ */
+
+var isPointInMarkerData = function (clickedOffset, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+markerData, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+getMarkerOffset) {
+  var markerOffset = getMarkerOffset(markerData);
+  if (!markerOffset) return false;
+  var boxWidth = markerData.boxWidth || 50;
+  var boxHeight = markerData.boxHeight || 28;
+  var tailHeight = markerData.tailHeight || 0;
+  var offsetX = markerData.offsetX || 0;
+  var offsetY = markerData.offsetY || 0; // 오프셋을 적용한 마커 중심점 기준으로 박스 영역 계산 (꼬리는 제외)
+
+  var x = markerOffset.x + offsetX - boxWidth / 2;
+  var y = markerOffset.y + offsetY - boxHeight - tailHeight; // 클릭 위치가 박스 영역 내부에 있는지 확인
+
+  return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
+}; // Hex 색상을 RGBA로 변환
+
+var hexToRgba = function (hexColor, alpha) {
+  if (alpha === void 0) {
+    alpha = 1;
+  }
+
+  var hex = hexColor.replace('#', '');
+
+  if (hex.length !== 6) {
+    throw new Error('Invalid hex color format');
+  }
+
+  var r = parseInt(hex.substring(0, 2), 16);
+  var g = parseInt(hex.substring(2, 4), 16);
+  var b = parseInt(hex.substring(4, 6), 16);
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+};
+var tempCanvas = document.createElement('canvas');
+var tempCtx = tempCanvas.getContext('2d');
+/**
+ * 텍스트 박스 너비 계산
+ *
+ * @param params 파라미터 객체
+ * @param params.text 측정할 텍스트
+ * @param params.fontConfig 폰트 설정
+ * @param params.padding 패딩 값 (px)
+ * @param params.minWidth 최소 너비 (px)
+ * @returns 계산된 텍스트 박스 너비 (px)
+ */
+
+var calculateTextBoxWidth = function (_a) {
+  var fontConfig = _a.fontConfig,
+      minWidth = _a.minWidth,
+      padding = _a.padding,
+      text = _a.text;
+  if (!tempCtx) return 0;
+  tempCtx.font = fontConfig;
+  var textWidth = tempCtx.measureText(text).width;
+  return Math.max(minWidth, textWidth + padding);
+};
+/**
+ * 서버 데이터를 CanvasData로 변환하는 헬퍼 함수
+ *
+ * 서버 데이터의 필드가 CanvasOption과 충돌하는 경우 (예: id, position 등),
+ * 이 함수를 사용하여 명시적으로 매핑할 수 있습니다.
+ *
+ * @template T 서버에서 받은 원본 데이터 타입
+ * @param serverData 서버에서 받은 원본 데이터
+ * @param canvasOptions CanvasOption 필드들 (충돌하는 필드는 여기서 명시적으로 지정)
+ * @returns CanvasData<T> 타입의 데이터
+ *
+ * @example
+ * ```typescript
+ * interface ServerData {
+ *   id: number;  // CanvasOption의 id와 충돌
+ *   name: string;
+ * }
+ *
+ * const serverData: ServerData = { id: 123, name: "Test" };
+ *
+ * // ✅ 올바른 사용
+ * const canvasData = createCanvasData(serverData, {
+ *   id: String(serverData.id),  // 명시적으로 변환
+ *   position: new Position(37.5, 127.0)
+ * });
+ *
+ * // canvasData는 CanvasData<ServerData> 타입이며:
+ * // - id: string (CanvasOption의 id)
+ * // - name: string (서버 데이터의 name)
+ * // - position: Position (CanvasOption의 position)
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+function createCanvasData(serverData, canvasOptions) {
+  // 서버 데이터와 CanvasOption을 결합
+  // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
+  return tslib.__assign(tslib.__assign({}, serverData), canvasOptions);
+}
+/**
+ * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
+ *
+ * 서버 데이터 배열의 각 항목을 CanvasData로 변환합니다.
+ * 각 항목마다 다른 CanvasOption을 적용할 수 있습니다.
+ *
+ * @template T 서버에서 받은 원본 데이터 타입
+ * @param serverDataArray 서버에서 받은 원본 데이터 배열
+ * @param getCanvasOptions 각 항목에 대해 CanvasOption을 생성하는 함수
+ * @returns CanvasData<T>[] 타입의 데이터 배열
+ *
+ * @example
+ * ```typescript
+ * interface ServerData {
+ *   id: number;  // CanvasOption의 id와 충돌
+ *   name: string;
+ *   lat: number;
+ *   lng: number;
+ * }
+ *
+ * const serverDataArray: ServerData[] = [
+ *   { id: 1, name: "Item 1", lat: 37.5, lng: 127.0 },
+ *   { id: 2, name: "Item 2", lat: 37.6, lng: 127.1 }
+ * ];
+ *
+ * // ✅ 올바른 사용
+ * const canvasDataArray = createCanvasDataArray(serverDataArray, (item, index) => ({
+ *   id: String(item.id),  // 각 항목마다 명시적으로 변환
+ *   position: new Position(item.lat, item.lng)
+ * }));
+ *
+ * // canvasDataArray는 CanvasData<ServerData>[] 타입입니다
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+function createCanvasDataArray(serverDataArray, getCanvasOptions) {
+  return serverDataArray.map(function (serverData, index) {
+    var canvasOptions = getCanvasOptions(serverData, index);
+    return createCanvasData(serverData, canvasOptions);
+  });
+}
+/**
+ * 마커 바운딩 박스 좌표 계산 (위도/경도)
+ *
+ * 마커의 중심 좌표와 크기를 기반으로 현재 뷰포트에서의 바운딩 박스 좌표를 계산합니다.
+ *
+ * @param params 계산 파라미터
+ * @param params.lat 마커의 중심 위도
+ * @param params.lng 마커의 중심 경도
+ * @param params.width 마커의 너비 (픽셀 단위, boxWidth)
+ * @param params.height 마커의 높이 (픽셀 단위, boxHeight)
+ * @param params.controller MintMapController 인스턴스 (뷰포트 상태를 알기 위해 필요)
+ * @param params.tailHeight 마커 꼬리 높이 (픽셀 단위, 기본값: 0)
+ * @param params.offsetX 마커 오프셋 X (픽셀 단위, 기본값: 0)
+ * @param params.offsetY 마커 오프셋 Y (픽셀 단위, 기본값: 0)
+ * @returns 마커 바운딩 박스 좌표 (위도/경도) 또는 null
+ *
+ * @example
+ * ```typescript
+ * const boundingBox = calculateMarkerBoundingBox({
+ *   lat: 37.5665,
+ *   lng: 126.9780,
+ *   width: 100,
+ *   height: 50,
+ *   controller: mintMapController
+ * });
+ *
+ * if (boundingBox) {
+ *   console.log('왼쪽 상단:', boundingBox.leftTop);
+ *   console.log('우측 하단:', boundingBox.bottomRight);
+ * }
+ * ```
+ */
+
+var calculateMarkerBoundingBox = function (params) {
+  try {
+    var lat = params.lat,
+        lng = params.lng,
+        width = params.width,
+        height = params.height,
+        controller = params.controller,
+        _a = params.tailHeight,
+        tailHeight = _a === void 0 ? 0 : _a,
+        _b = params.offsetX,
+        offsetX = _b === void 0 ? 0 : _b,
+        _c = params.offsetY,
+        offsetY = _c === void 0 ? 0 : _c; // 마커의 중심 좌표를 화면 좌표로 변환
+
+    var markerPosition = new MapTypes.Position(lat, lng);
+    var markerOffset = controller.positionToOffset(markerPosition);
+    if (!markerOffset) return null; // 바운딩 박스의 화면 좌표 계산
+
+    var minX = markerOffset.x + offsetX - width / 2;
+    var minY = markerOffset.y + offsetY - height - tailHeight;
+    var maxX = markerOffset.x + offsetX + width / 2;
+    var maxY = markerOffset.y + offsetY; // 왼쪽 상단 좌표를 위도/경도로 변환
+
+    var leftTopOffset = new MapTypes.Offset(minX, minY);
+    var leftTop = controller.offsetToPosition(leftTopOffset); // 우측 하단 좌표를 위도/경도로 변환
+
+    var bottomRightOffset = new MapTypes.Offset(maxX, maxY);
+    var bottomRight = controller.offsetToPosition(bottomRightOffset);
+    return {
+      bottomRight: bottomRight,
+      leftTop: leftTop
+    };
+  } catch (error) {
+    console.error('[calculateMarkerBoundingBox] error:', error);
+    return null;
+  }
+};
+
+exports.calculateMarkerBoundingBox = calculateMarkerBoundingBox;
+exports.calculateTextBoxWidth = calculateTextBoxWidth;
+exports.computeMarkerOffset = computeMarkerOffset;
+exports.computePolygonOffsets = computePolygonOffsets;
+exports.createCanvasData = createCanvasData;
+exports.createCanvasDataArray = createCanvasDataArray;
+exports.hexToRgba = hexToRgba;
+exports.isPointInMarkerData = isPointInMarkerData;
+exports.isPointInPolygon = isPointInPolygon;
+exports.isPointInPolygonData = isPointInPolygonData;

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

@@ -0,0 +1,42 @@
+import { MutableRefObject } from 'react';
+import { CanvasData } from './types';
+/**
+ * 뷰포트 영역 (화면에 보이는 영역)
+ */
+export interface ViewportBounds {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+}
+/**
+ * 바운딩 박스 (마커/폴리곤의 최소/최대 좌표)
+ */
+export interface BoundingBox {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+/**
+ * 현재 뷰포트 영역 계산
+ *
+ * @param stage Konva Stage 인스턴스
+ * @param cullingMargin 컬링 여유 공간 (px)
+ * @param viewportRef 뷰포트 경계를 저장할 ref
+ */
+export declare const updateViewport: (stage: {
+    height: () => number;
+    width: () => number;
+} | null, cullingMargin: number, viewportRef: MutableRefObject<ViewportBounds | null>) => void;
+/**
+ * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param item 확인할 아이템
+ * @param viewportRef 뷰포트 경계 ref
+ * @param boundingBoxCacheRef 바운딩 박스 캐시 ref
+ * @param computeBoundingBox 바운딩 박스 계산 함수
+ * @returns 뷰포트 안에 있으면 true
+ */
+export declare const isInViewport: <T>(itemData: CanvasData<T>, viewportRef: MutableRefObject<ViewportBounds | null>, boundingBoxCacheRef: MutableRefObject<Map<string, BoundingBox>>, computeBoundingBox: (item: CanvasData<T>) => BoundingBox | null) => boolean;

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

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 현재 뷰포트 영역 계산
+ *
+ * @param stage Konva Stage 인스턴스
+ * @param cullingMargin 컬링 여유 공간 (px)
+ * @param viewportRef 뷰포트 경계를 저장할 ref
+ */
+var updateViewport = function (stage, cullingMargin, viewportRef) {
+  if (!stage) return; // eslint-disable-next-line no-param-reassign
+
+  viewportRef.current = {
+    maxX: stage.width() + cullingMargin,
+    maxY: stage.height() + cullingMargin,
+    minX: -cullingMargin,
+    minY: -cullingMargin
+  };
+};
+/**
+ * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param item 확인할 아이템
+ * @param viewportRef 뷰포트 경계 ref
+ * @param boundingBoxCacheRef 바운딩 박스 캐시 ref
+ * @param computeBoundingBox 바운딩 박스 계산 함수
+ * @returns 뷰포트 안에 있으면 true
+ */
+
+var isInViewport = function (itemData, viewportRef, boundingBoxCacheRef, computeBoundingBox) {
+  if (!viewportRef.current) return true;
+  var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
+
+  var bbox = boundingBoxCacheRef.current.get(itemData.id);
+
+  if (!bbox) {
+    // 바운딩 박스 계산 (공통 함수 사용)
+    var computed = computeBoundingBox(itemData);
+    if (!computed) return false;
+    bbox = computed;
+    boundingBoxCacheRef.current.set(itemData.id, bbox);
+  } // 바운딩 박스와 viewport 교차 체크
+
+
+  return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
+};
+
+exports.isInViewport = isInViewport;
+exports.updateViewport = updateViewport;

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

@@ -11,19 +11,20 @@ var MapEventTypes = require('../types/MapEventTypes.js');
 var MapTypes = require('../types/MapTypes.js');
 require('../core/MintMapCore.js');
 require('react');
-require('../types/MapDrawables.js');
 require('../core/provider/MintMapProvider.js');
+require('../types/MapDrawables.js');
 require('react-dom');
-require('../core/util/animation.js');
+require('../core/advanced/canvas/CanvasMarkerClaude.js');
+require('../core/advanced/shared/context.js');
+require('../core/advanced/shared/performance.js');
+require('../core/advanced/shared/types.js');
+require('../core/advanced/shared/utils.js');
+require('konva');
 require('../core/util/geo.js');
+require('../core/util/animation.js');
+require('../core/advanced/MapLoadingComponents.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/advanced/woongCanvas/WoongKonvaMarker.js');
-require('../core/advanced/woongCanvas/shared/types.js');
-require('../core/advanced/woongCanvas/shared/context.js');
-require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
 
 var GoogleMintMapController =

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

@@ -12,19 +12,20 @@ var log = require('../core/util/log.js');
 var status = require('../core/util/status.js');
 require('../core/MintMapCore.js');
 require('react');
-require('../types/MapDrawables.js');
 require('../core/provider/MintMapProvider.js');
+require('../types/MapDrawables.js');
 require('react-dom');
-require('../core/util/animation.js');
+require('../core/advanced/canvas/CanvasMarkerClaude.js');
+require('../core/advanced/shared/context.js');
+require('../core/advanced/shared/performance.js');
+require('../core/advanced/shared/types.js');
+require('../core/advanced/shared/utils.js');
+require('konva');
 require('../core/util/geo.js');
+require('../core/util/animation.js');
+require('../core/advanced/MapLoadingComponents.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/advanced/woongCanvas/WoongKonvaMarker.js');
-require('../core/advanced/woongCanvas/shared/types.js');
-require('../core/advanced/woongCanvas/shared/context.js');
-require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
 
 var KakaoMintMapController =

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

@@ -12,18 +12,19 @@ var log = require('../core/util/log.js');
 var status = require('../core/util/status.js');
 require('../core/MintMapCore.js');
 require('react');
-require('../types/MapDrawables.js');
 require('../core/provider/MintMapProvider.js');
+require('../types/MapDrawables.js');
 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/shared/context.js');
+require('../core/advanced/shared/performance.js');
+require('../core/advanced/shared/types.js');
+require('../core/advanced/shared/utils.js');
+require('konva');
+require('../core/util/geo.js');
+require('../core/util/animation.js');
 require('../core/advanced/MapLoadingComponents.js');
-require('../core/advanced/woongCanvas/WoongKonvaMarker.js');
-require('../core/advanced/woongCanvas/shared/types.js');
-require('../core/advanced/woongCanvas/shared/context.js');
-require('../core/advanced/woongCanvas/shared/performance.js');
+var polygon = require('../core/util/polygon.js');
 require('../core/wrapper/MapControlWrapper.js');
 
 var NaverMintMapController =