@mint-ui/map 1.2.0-test.4 → 1.2.0-test.40

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

@@ -0,0 +1,221 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 (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 (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],
+        yi = polygon[i][1];
+    var xj = polygon[j][0],
+        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, polygonData, 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, markerData, 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 text = _a.text,
+      fontConfig = _a.fontConfig,
+      padding = _a.padding,
+      minWidth = _a.minWidth;
+  if (!tempCtx) return 0;
+  tempCtx.font = fontConfig;
+  var textWidth = tempCtx.measureText(text).width;
+  return Math.max(minWidth, textWidth + padding);
+};
+
+exports.calculateTextBoxWidth = calculateTextBoxWidth;
+exports.computeMarkerOffset = computeMarkerOffset;
+exports.computePolygonOffsets = computePolygonOffsets;
+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: {
+    width: () => number;
+    height: () => 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>(item: 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,51 @@
+'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;
+  viewportRef.current = {
+    minX: -cullingMargin,
+    maxX: stage.width() + cullingMargin,
+    minY: -cullingMargin,
+    maxY: stage.height() + cullingMargin
+  };
+};
+/**
+ * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param item 확인할 아이템
+ * @param viewportRef 뷰포트 경계 ref
+ * @param boundingBoxCacheRef 바운딩 박스 캐시 ref
+ * @param computeBoundingBox 바운딩 박스 계산 함수
+ * @returns 뷰포트 안에 있으면 true
+ */
+
+var isInViewport = function (item, viewportRef, boundingBoxCacheRef, computeBoundingBox) {
+  if (!viewportRef.current) return true;
+  var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
+
+  var bbox = boundingBoxCacheRef.current.get(item.id);
+
+  if (!bbox) {
+    // 바운딩 박스 계산 (공통 함수 사용)
+    var computed = computeBoundingBox(item);
+    if (!computed) return false;
+    bbox = computed;
+    boundingBoxCacheRef.current.set(item.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/core/advanced/woongCanvasMarker/WoongCanvasMarker.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { MarkerOptions } from "../../../types";
+import { CanvasData, CustomRenderBase, CustomRenderEvent } from "../shared";
+export { WoongCanvasProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "../shared";
+export type { CanvasOption, CanvasData, CustomRenderBase, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderEventParams } from "../shared";
+/**
+ * WoongCanvasMarker Props
+ *
+ * @template T 마커 데이터의 추가 속성 타입
+ */
+export interface WoongCanvasMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
+    /** 렌더링할 마커 데이터 배열 */
+    data: CanvasData<T>[];
+    /** 마커 클릭 시 호출되는 콜백 함수 */
+    onClick?: (payload: CanvasData<T>, selectedIds: Set<string>) => void;
+    /** 마커에 마우스 오버 시 호출되는 콜백 함수 */
+    onMouseOver?: (payload: CanvasData<T>) => void;
+    /** 마커에서 마우스 아웃 시 호출되는 콜백 함수 */
+    onMouseOut?: (payload: CanvasData<T>) => void;
+    /** 다중 선택 활성화 여부 (기본값: false) */
+    enableMultiSelect?: boolean;
+    /** hover 시 마커를 최상단으로 표시할지 여부 (기본값: false) */
+    topOnHover?: boolean;
+    /** 뷰포트 컬링 활성화 여부 (기본값: false) */
+    enableViewportCulling?: boolean;
+    /** 뷰포트 컬링 여유 공간 (픽셀 단위, 기본값: 100) */
+    cullingMargin?: number;
+    /** LRU 캐시 최대 크기 (기본값: 10000) */
+    maxCacheSize?: number;
+    /** 외부에서 제어하는 선택된 항목 배열 */
+    selectedItems?: CanvasData<T>[];
+    /** 외부에서 전달된 단일 선택 아이템 */
+    selectedItem?: CanvasData<T> | null;
+    /** 상호작용 비활성화 여부 (기본값: false) */
+    disableInteraction?: boolean;
+    /** Base Layer 렌더링 함수 (필수) */
+    renderBase: CustomRenderBase<T>;
+    /** Event Layer 렌더링 함수 (선택) */
+    renderEvent?: CustomRenderEvent<T>;
+}
+declare const WoongCanvasMarker: <T>(props: WoongCanvasMarkerProps<T>) => React.ReactPortal;
+/**
+ * WoongCanvasMarker - Konva 기반 고성능 마커 렌더링 컴포넌트
+ *
+ * @template T 마커 데이터의 추가 속성 타입
+ */
+export default WoongCanvasMarker;