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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/components/mint-map/core/MintMapCore.js +5 -5
  2. package/dist/components/mint-map/core/advanced/index.d.ts +1 -1
  3. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/context.d.ts +5 -5
  4. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/context.js +8 -8
  5. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/performance.d.ts +1 -1
  6. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/performance.js +1 -1
  7. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/types.d.ts +8 -11
  8. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/utils.d.ts +2 -2
  9. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/utils.js +3 -3
  10. package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.d.ts +97 -0
  11. package/dist/components/mint-map/core/advanced/{woongCanvas/WoongCanvasLayer.js → woongCanvasMarker/WoongCanvasMarker.js} +42 -123
  12. package/dist/components/mint-map/core/advanced/woongCanvasMarker/index.d.ts +4 -0
  13. package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.d.ts +113 -0
  14. package/dist/components/mint-map/core/advanced/woongCanvasPolygon/index.d.ts +3 -0
  15. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → woongCanvasPolygon}/renderer.d.ts +1 -1
  16. package/dist/components/mint-map/google/GoogleMintMapController.js +4 -4
  17. package/dist/components/mint-map/kakao/KakaoMintMapController.js +4 -4
  18. package/dist/components/mint-map/naver/NaverMintMapController.js +4 -4
  19. package/dist/index.es.js +43 -350
  20. package/dist/index.js +9 -8
  21. package/dist/index.umd.js +46 -352
  22. package/package.json +1 -1
  23. package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +0 -162
  24. package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +0 -3
  25. package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +0 -234
  26. /package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/index.d.ts +0 -0
  27. /package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/types.js +0 -0
@@ -8,10 +8,10 @@ var React = require('react');
8
8
  var MapTypes = require('../types/MapTypes.js');
9
9
  var MintMapProvider = require('./provider/MintMapProvider.js');
10
10
  var MintMapCore_module = require('./MintMapCore.module.scss.js');
11
- require('./advanced/woongCanvas/shared/types.js');
12
- require('./advanced/woongCanvas/shared/utils.js');
13
- var context = require('./advanced/woongCanvas/shared/context.js');
14
- require('./advanced/woongCanvas/shared/performance.js');
11
+ require('./advanced/shared/types.js');
12
+ require('./advanced/shared/utils.js');
13
+ var context = require('./advanced/shared/context.js');
14
+ require('./advanced/shared/performance.js');
15
15
 
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
17
 
@@ -100,7 +100,7 @@ function MintMapCore(_a) {
100
100
  }, [center]);
101
101
  return React__default["default"].createElement("div", {
102
102
  className: cn('mint-map-root')
103
- }, mapInitialized && React__default["default"].createElement(context.KonvaMarkerProvider, null, children), React__default["default"].createElement("div", {
103
+ }, mapInitialized && React__default["default"].createElement(context.WoongCanvasProvider, null, children), React__default["default"].createElement("div", {
104
104
  className: cn('mint-map-container'),
105
105
  style: {
106
106
  visibility: visible ? 'inherit' : 'hidden'
@@ -2,4 +2,4 @@ export * from './shapes';
2
2
  export * from './canvas';
3
3
  export * from './MapBuildingProjection';
4
4
  export * from './MapLoadingComponents';
5
- export * from './woongCanvas';
5
+ export * from './woongCanvasMarker';
@@ -1,8 +1,8 @@
1
1
  import React from "react";
2
- import { Offset } from "../../../../types";
2
+ import { Offset } from "../../../types";
3
3
  import { KonvaCanvasData } from "./types";
4
4
  /**
5
- * 다중 WoongKonvaMarker 인스턴스를 관리하기 위한 Context
5
+ * 다중 WoongCanvasMarker/WoongCanvasPolygon 인스턴스를 관리하기 위한 Context
6
6
  *
7
7
  * 용도:
8
8
  * - zIndex 기반 이벤트 우선순위 처리
@@ -21,12 +21,12 @@ export interface ComponentInstance<T> {
21
21
  getSelectedIds: () => Set<string>;
22
22
  isInteractionDisabled: () => boolean;
23
23
  }
24
- interface KonvaMarkerContextValue {
24
+ interface WoongCanvasContextValue {
25
25
  registerComponent: <T>(instance: ComponentInstance<T>) => void;
26
26
  unregisterComponent: <T>(instance: ComponentInstance<T>) => void;
27
27
  }
28
- export declare const KonvaMarkerProvider: React.FC<{
28
+ export declare const WoongCanvasProvider: React.FC<{
29
29
  children: React.ReactNode;
30
30
  }>;
31
- export declare const useKonvaMarkerContext: () => KonvaMarkerContextValue | null;
31
+ export declare const useWoongCanvasContext: () => WoongCanvasContextValue | null;
32
32
  export {};
@@ -3,14 +3,14 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var MintMapProvider = require('../../../provider/MintMapProvider.js');
6
+ var MintMapProvider = require('../../provider/MintMapProvider.js');
7
7
 
8
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
9
 
10
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
 
12
- var KonvaMarkerContext = React.createContext(null);
13
- var KonvaMarkerProvider = function (_a) {
12
+ var WoongCanvasContext = React.createContext(null);
13
+ var WoongCanvasProvider = function (_a) {
14
14
  var children = _a.children;
15
15
  var controller = MintMapProvider.useMintMapController(); // Refs
16
16
 
@@ -155,14 +155,14 @@ var KonvaMarkerProvider = function (_a) {
155
155
  unregisterComponent: unregisterComponent
156
156
  };
157
157
  }, [registerComponent, unregisterComponent]);
158
- return React__default["default"].createElement(KonvaMarkerContext.Provider, {
158
+ return React__default["default"].createElement(WoongCanvasContext.Provider, {
159
159
  value: contextValue
160
160
  }, children);
161
161
  };
162
- var useKonvaMarkerContext = function () {
163
- var context = React.useContext(KonvaMarkerContext);
162
+ var useWoongCanvasContext = function () {
163
+ var context = React.useContext(WoongCanvasContext);
164
164
  return context;
165
165
  };
166
166
 
167
- exports.KonvaMarkerProvider = KonvaMarkerProvider;
168
- exports.useKonvaMarkerContext = useKonvaMarkerContext;
167
+ exports.WoongCanvasProvider = WoongCanvasProvider;
168
+ exports.useWoongCanvasContext = useWoongCanvasContext;
@@ -62,7 +62,7 @@ export declare class LRUCache<K, V> {
62
62
  * - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
63
63
  * - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
64
64
  *
65
- * WoongKonvaMarker 사용 사례에 최적:
65
+ * WoongCanvasMarker 사용 사례에 최적:
66
66
  * - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
67
67
  * - 접근 빈도 추적보다 빠른 조회가 더 중요
68
68
  */
@@ -80,7 +80,7 @@ function () {
80
80
  * - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
81
81
  * - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
82
82
  *
83
- * WoongKonvaMarker 사용 사례에 최적:
83
+ * WoongCanvasMarker 사용 사례에 최적:
84
84
  * - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
85
85
  * - 접근 빈도 추적보다 빠른 조회가 더 중요
86
86
  */
@@ -1,5 +1,5 @@
1
1
  import Konva from "konva";
2
- import { Position, Offset } from "../../../../types";
2
+ import { Position, Offset } from "../../../types";
3
3
  /**
4
4
  * 캔버스 데이터 타입 Enum
5
5
  * 마커인지 폴리곤인지 구분하는 상수
@@ -15,9 +15,6 @@ export interface Paths {
15
15
  type: string;
16
16
  coordinates: number[][][][];
17
17
  }
18
- /**
19
- * 캔버스 마커/폴리곤 기본 옵션
20
- */
21
18
  /**
22
19
  * Konva 캔버스 마커/폴리곤의 기본 필수 속성
23
20
  * (렌더링에 필요한 최소 정보)
@@ -147,11 +144,11 @@ export interface RenderUtils<T> {
147
144
  export interface RenderBaseParams<T> {
148
145
  /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
149
146
  ctx: CanvasRenderingContext2D;
150
- /** 렌더링할 마커 데이터 배열 */
147
+ /** 렌더링할 마커/폴리곤 데이터 배열 */
151
148
  items: KonvaCanvasData<T>[];
152
- /** 현재 선택된 마커 ID Set */
149
+ /** 현재 선택된 마커/폴리곤 ID Set */
153
150
  selectedIds: Set<string>;
154
- /** 현재 hover된 마커 데이터 (선택) */
151
+ /** 현재 hover된 마커/폴리곤 데이터 (선택) */
155
152
  hoveredItem?: KonvaCanvasData<T> | null;
156
153
  /** 렌더링 유틸리티 함수들 */
157
154
  utils: RenderUtils<T>;
@@ -177,9 +174,9 @@ export declare type CustomRenderBase<T> = (params: RenderBaseParams<T>) => void;
177
174
  export interface RenderAnimationParams<T> {
178
175
  /** Konva Layer 인스턴스 */
179
176
  layer: Konva.Layer;
180
- /** 현재 선택된 마커 ID Set */
177
+ /** 현재 선택된 마커/폴리곤 ID Set */
181
178
  selectedIds: Set<string>;
182
- /** 전체 마커 데이터 배열 */
179
+ /** 전체 마커/폴리곤 데이터 배열 */
183
180
  items: KonvaCanvasData<T>[];
184
181
  /** 렌더링 유틸리티 함수들 */
185
182
  utils: RenderUtils<T>;
@@ -202,11 +199,11 @@ export declare type CustomRenderAnimation<T> = (params: RenderAnimationParams<T>
202
199
  export interface RenderEventParams<T> {
203
200
  /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
204
201
  ctx: CanvasRenderingContext2D;
205
- /** 현재 hover된 마커 데이터 */
202
+ /** 현재 hover된 마커/폴리곤 데이터 */
206
203
  hoveredItem: KonvaCanvasData<T> | null;
207
204
  /** 렌더링 유틸리티 함수들 */
208
205
  utils: RenderUtils<T>;
209
- /** 현재 선택된 마커 데이터 배열 (선택 강조용) */
206
+ /** 현재 선택된 마커/폴리곤 데이터 배열 (선택 강조용) */
210
207
  selectedItems?: KonvaCanvasData<T>[];
211
208
  /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
212
209
  selectedItem?: KonvaCanvasData<T> | null;
@@ -1,5 +1,5 @@
1
- import { Offset } from "../../../../types";
2
- import { MintMapController } from "../../../MintMapController";
1
+ import { Offset } from "../../../types";
2
+ import { MintMapController } from "../../MintMapController";
3
3
  import { KonvaCanvasData } from "./types";
4
4
  /**
5
5
  * 폴리곤 offset 계산
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('../../../../types/MapDrawables.js');
6
- var MapTypes = require('../../../../types/MapTypes.js');
7
- require('../../../../types/MapEventTypes.js');
5
+ require('../../../types/MapDrawables.js');
6
+ var MapTypes = require('../../../types/MapTypes.js');
7
+ require('../../../types/MapEventTypes.js');
8
8
 
9
9
  /**
10
10
  * 폴리곤 offset 계산
@@ -0,0 +1,97 @@
1
+ import React from "react";
2
+ import { MarkerOptions } from "../../../types";
3
+ import { KonvaCanvasData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "../shared";
4
+ export { WoongCanvasProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "../shared";
5
+ export type { KonvaCanvasOption, KonvaCanvasData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "../shared";
6
+ /**
7
+ * WoongCanvasMarker Props - 마커 전용
8
+ */
9
+ export interface WoongCanvasMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
10
+ /** 렌더링할 마커 데이터 배열 */
11
+ data: KonvaCanvasData<T>[];
12
+ /** 마커 클릭 시 호출되는 콜백 (선택) */
13
+ onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
14
+ /** 마커에 마우스 오버 시 호출되는 콜백 (선택) */
15
+ onMouseOver?: (payload: KonvaCanvasData<T>) => void;
16
+ /** 마커에서 마우스 아웃 시 호출되는 콜백 (선택) */
17
+ onMouseOut?: (payload: KonvaCanvasData<T>) => void;
18
+ /** 다중 선택 활성화 여부 (기본: false) */
19
+ enableMultiSelect?: boolean;
20
+ /** hover 시 마커를 최상단으로 표시 (기본: false) */
21
+ topOnHover?: boolean;
22
+ /** 뷰포트 컬링 활성화 여부 (기본: true) */
23
+ enableViewportCulling?: boolean;
24
+ /** 뷰포트 컬링 여유 공간 (기본: 100px) */
25
+ cullingMargin?: number;
26
+ /** LRU 캐시 최대 크기 (기본: 10000) */
27
+ maxCacheSize?: number;
28
+ /** 외부에서 제어하는 선택된 항목 배열 (선택) */
29
+ selectedItems?: KonvaCanvasData<T>[];
30
+ /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
31
+ selectedItem?: KonvaCanvasData<T> | null;
32
+ /** 상호작용 비활성화 (hover, click 등 모든 이벤트 차단) */
33
+ disableInteraction?: boolean;
34
+ /** Base Layer 렌더링 함수 (필수) */
35
+ renderBase: CustomRenderBase<T>;
36
+ /** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
37
+ renderAnimation?: CustomRenderAnimation<T>;
38
+ /** Event Layer 렌더링 함수 (선택) */
39
+ renderEvent?: CustomRenderEvent<T>;
40
+ }
41
+ declare const WoongCanvasMarker: <T>(props: WoongCanvasMarkerProps<T>) => React.ReactPortal;
42
+ /**
43
+ * 🚀 WoongCanvasMarker - Konva 기반 초고성능 마커 렌더링 컴포넌트
44
+ *
45
+ * ## 📌 주요 특징
46
+ * - **30,000개 이상의 마커를 60fps로 렌더링**
47
+ * - **Multi-Layer 아키텍처**: Base/Animation/Event 레이어 분리
48
+ * - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
49
+ * - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
50
+ * - **Viewport Culling**: 화면에 보이는 영역만 렌더링
51
+ * - **커스텀 렌더링**: renderBase, renderAnimation, renderEvent로 완전한 커스터마이징 가능
52
+ *
53
+ * ## 🎯 사용 방법
54
+ *
55
+ * ```tsx
56
+ * <WoongCanvasMarker
57
+ * data={markers}
58
+ * renderBase={renderMarkerBase} // required
59
+ * renderAnimation={renderMarkerAnimation} // optional
60
+ * renderEvent={renderMarkerEvent} // optional
61
+ * topOnHover={true}
62
+ * onClick={handleClick}
63
+ * />
64
+ * ```
65
+ *
66
+ * ## 📊 데이터 형식
67
+ * ```typescript
68
+ * const data: KonvaCanvasData<T>[] = [
69
+ * {
70
+ * id: 'unique-id',
71
+ * position: new Position(lat, lng),
72
+ * // MARKER: boxWidth/boxHeight 권장 (Hit Test 정확도)
73
+ * boxWidth: 60,
74
+ * boxHeight: 75,
75
+ * tailHeight: 9, // optional (Viewport Culling용)
76
+ * // 커스텀 데이터
77
+ * ...customData
78
+ * }
79
+ * ];
80
+ * ```
81
+ *
82
+ * ## ⚡ 성능 최적화 팁
83
+ * 1. **동적 boxWidth 계산**: `measureText()`로 실제 너비 계산 후 전달
84
+ * 2. **enableViewportCulling**: 대량 데이터 시 필수 (기본 true)
85
+ * 3. **selectedItems 외부 관리**: 상태를 외부에서 관리하여 리렌더링 최소화
86
+ *
87
+ * @template T 마커 데이터의 추가 속성 타입
88
+ *
89
+ * @example
90
+ * // 동적 boxWidth 계산 예시
91
+ * const tempCtx = document.createElement('canvas').getContext('2d');
92
+ * tempCtx.font = 'bold 15px Arial';
93
+ * const boxWidth = Math.max(60, tempCtx.measureText(text).width + 20);
94
+ *
95
+ * @see {@link https://github.com/your-repo/docs/WoongCanvasMarker.md} 전체 문서
96
+ */
97
+ export default WoongCanvasMarker;
@@ -10,11 +10,10 @@ var MapDrawables = require('../../../types/MapDrawables.js');
10
10
  require('../../../types/MapTypes.js');
11
11
  require('../../../types/MapEventTypes.js');
12
12
  var reactDom = require('react-dom');
13
- var types = require('./shared/types.js');
14
- var utils = require('./shared/utils.js');
15
- var context = require('./shared/context.js');
16
- var performance = require('./shared/performance.js');
17
- var renderer = require('./shared/renderer.js');
13
+ var types = require('../shared/types.js');
14
+ var utils = require('../shared/utils.js');
15
+ var context = require('../shared/context.js');
16
+ var performance = require('../shared/performance.js');
18
17
 
19
18
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
19
 
@@ -24,9 +23,8 @@ var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
24
23
  // 메인 컴포넌트
25
24
  // ============================================================================
26
25
 
27
- var WoongCanvasLayer = function (props) {
26
+ var WoongCanvasMarker = function (props) {
28
27
  var data = props.data,
29
- dataType = props.dataType,
30
28
  onClick = props.onClick,
31
29
  onMouseOver = props.onMouseOver,
32
30
  onMouseOut = props.onMouseOut,
@@ -44,13 +42,16 @@ var WoongCanvasLayer = function (props) {
44
42
  externalSelectedItem = props.selectedItem,
45
43
  _f = props.disableInteraction,
46
44
  disableInteraction = _f === void 0 ? false : _f,
47
- options = tslib.__rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
45
+ renderBase = props.renderBase,
46
+ renderAnimation = props.renderAnimation,
47
+ renderEvent = props.renderEvent,
48
+ options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderAnimation", "renderEvent"]); // --------------------------------------------------------------------------
48
49
  // Hooks & Context
49
50
  // --------------------------------------------------------------------------
50
51
 
51
52
 
52
53
  var controller = MintMapProvider.useMintMapController();
53
- var context$1 = context.useKonvaMarkerContext();
54
+ var context$1 = context.useWoongCanvasContext();
54
55
  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
55
56
  // DOM Refs
56
57
  // --------------------------------------------------------------------------
@@ -179,24 +180,6 @@ var WoongCanvasLayer = function (props) {
179
180
  // 유틸리티 함수: 좌표 변환 캐싱
180
181
  // --------------------------------------------------------------------------
181
182
 
182
- /**
183
- * 폴리곤 좌표 변환 결과를 캐시하고 반환
184
- * @param polygonData 폴리곤 데이터
185
- * @returns 변환된 좌표 배열 또는 null
186
- */
187
-
188
-
189
- var getOrComputePolygonOffsets = function (polygonData) {
190
- var cached = offsetCacheRef.current.get(polygonData.id);
191
- if (cached && Array.isArray(cached)) return cached;
192
- var result = utils.computePolygonOffsets(polygonData, controller);
193
-
194
- if (result) {
195
- offsetCacheRef.current.set(polygonData.id, result);
196
- }
197
-
198
- return result;
199
- };
200
183
  /**
201
184
  * 마커 좌표 변환 결과를 캐시하고 반환
202
185
  *
@@ -220,66 +203,31 @@ var WoongCanvasLayer = function (props) {
220
203
  // --------------------------------------------------------------------------
221
204
 
222
205
  /**
223
- * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
206
+ * 마커의 바운딩 박스 계산
224
207
  *
225
208
  * 🎯 마커의 경우:
226
209
  * - boxHeight: 본체만 (Hit Test 영역)
227
210
  * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
228
211
  *
229
- * @param item 마커 또는 폴리곤 데이터
212
+ * @param item 마커 데이터
230
213
  * @returns 바운딩 박스 또는 null
231
214
  */
232
215
 
233
216
 
234
217
  var computeBoundingBox = function (item) {
235
- if (dataType === types.CanvasDataType.POLYGON) {
236
- // 폴리곤: 모든 좌표의 최소/최대값 계산
237
- var offsets = getOrComputePolygonOffsets(item);
238
- if (!offsets) return null;
239
- var minX = Infinity,
240
- minY = Infinity,
241
- maxX = -Infinity,
242
- maxY = -Infinity;
243
-
244
- for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
245
- var multiPolygon = offsets_1[_i];
246
-
247
- for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
248
- var polygonGroup = multiPolygon_1[_a];
249
-
250
- for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
251
- var _c = polygonGroup_1[_b],
252
- x = _c[0],
253
- y = _c[1];
254
- if (x < minX) minX = x;
255
- if (y < minY) minY = y;
256
- if (x > maxX) maxX = x;
257
- if (y > maxY) maxY = y;
258
- }
259
- }
260
- }
261
-
262
- return {
263
- minX: minX,
264
- minY: minY,
265
- maxX: maxX,
266
- maxY: maxY
267
- };
268
- } else {
269
- // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
270
- var offset = getOrComputeMarkerOffset(item);
271
- if (!offset) return null;
272
- var boxWidth = item.boxWidth || 50;
273
- var boxHeight = item.boxHeight || 28;
274
- var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
275
-
276
- return {
277
- minX: offset.x - boxWidth / 2,
278
- minY: offset.y - boxHeight - tailHeight,
279
- maxX: offset.x + boxWidth / 2,
280
- maxY: offset.y
281
- };
282
- }
218
+ // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
219
+ var offset = getOrComputeMarkerOffset(item);
220
+ if (!offset) return null;
221
+ var boxWidth = item.boxWidth || 50;
222
+ var boxHeight = item.boxHeight || 28;
223
+ var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
224
+
225
+ return {
226
+ minX: offset.x - boxWidth / 2,
227
+ minY: offset.y - boxHeight - tailHeight,
228
+ maxX: offset.x + boxWidth / 2,
229
+ maxY: offset.y
230
+ };
283
231
  }; // --------------------------------------------------------------------------
284
232
  // 유틸리티 함수: 공간 인덱싱
285
233
  // --------------------------------------------------------------------------
@@ -313,24 +261,14 @@ var WoongCanvasLayer = function (props) {
313
261
 
314
262
 
315
263
  var renderUtils = {
316
- getOrComputePolygonOffsets: getOrComputePolygonOffsets,
264
+ getOrComputePolygonOffsets: function () {
265
+ return null;
266
+ },
317
267
  getOrComputeMarkerOffset: getOrComputeMarkerOffset
318
268
  };
319
269
  /** Base Layer에서 사용할 빈 Set (재사용) */
320
270
 
321
271
  React.useRef(new Set());
322
- /**
323
- * 실제 사용할 렌더링 함수 결정
324
- * - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
325
- * - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
326
- */
327
-
328
- var renderBase = dataType === types.CanvasDataType.MARKER ? props.renderBase : renderer.renderPolygonBase(props.baseFillColor, props.baseStrokeColor, props.baseLineWidth);
329
- var renderAnimation = dataType === types.CanvasDataType.MARKER ? props.renderAnimation : undefined;
330
- var renderEvent = dataType === types.CanvasDataType.MARKER ? props.renderEvent : function () {
331
- var polygonProps = props;
332
- return renderer.renderPolygonEvent(polygonProps.baseFillColor, polygonProps.baseStrokeColor, polygonProps.baseLineWidth, polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
333
- }();
334
272
  /**
335
273
  * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
336
274
  *
@@ -604,54 +542,35 @@ var WoongCanvasLayer = function (props) {
604
542
  // --------------------------------------------------------------------------
605
543
 
606
544
  /**
607
- * 특정 좌표의 마커/폴리곤 데이터 찾기 (Spatial Index 사용)
545
+ * 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
608
546
  *
609
547
  * topOnHover가 true일 때:
610
548
  * - 현재 hover된 항목을 최우선으로 체크
611
549
  * - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
612
550
  *
613
551
  * @param offset 검사할 좌표
614
- * @returns 찾은 마커/폴리곤 데이터 또는 null
552
+ * @returns 찾은 마커 데이터 또는 null
615
553
  */
616
554
 
617
555
 
618
556
  var findData = function (offset) {
619
557
  // topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
620
558
  if (topOnHover && hoveredItemRef.current) {
621
- var hovered = hoveredItemRef.current; // 폴리곤인 경우
559
+ var hovered = hoveredItemRef.current;
622
560
 
623
- if (dataType === types.CanvasDataType.POLYGON) {
624
- if (utils.isPointInPolygonData(offset, hovered, getOrComputePolygonOffsets)) {
625
- return hovered; // 여전히 hover된 항목 위에 있음
626
- }
627
- } // 마커인 경우
628
- else {
629
- if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
630
- return hovered; // 여전히 hover된 항목 위에 있음
631
- }
561
+ if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
562
+ return hovered; // 여전히 hover된 항목 위에 있음
632
563
  }
633
564
  } // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
634
565
 
635
566
 
636
- var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 데이터 타입에 따라 적절한 히트 테스트 수행
567
+ var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 마커 체크
637
568
 
638
- if (dataType === types.CanvasDataType.MARKER) {
639
- // 마커 체크
640
- for (var i = candidates.length - 1; i >= 0; i--) {
641
- var item = candidates[i];
569
+ for (var i = candidates.length - 1; i >= 0; i--) {
570
+ var item = candidates[i];
642
571
 
643
- if (utils.isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
644
- return item;
645
- }
646
- }
647
- } else {
648
- // 폴리곤 체크
649
- for (var i = candidates.length - 1; i >= 0; i--) {
650
- var item = candidates[i];
651
-
652
- if (utils.isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
653
- return item;
654
- }
572
+ if (utils.isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
573
+ return item;
655
574
  }
656
575
  }
657
576
 
@@ -766,7 +685,7 @@ var WoongCanvasLayer = function (props) {
766
685
  }
767
686
  }
768
687
  } catch (error) {
769
- console.error('[WoongKonvaMarker] handleClick error:', error);
688
+ console.error('[WoongCanvasMarker] handleClick error:', error);
770
689
  }
771
690
  };
772
691
  /**
@@ -792,7 +711,7 @@ var WoongCanvasLayer = function (props) {
792
711
  if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
793
712
  }
794
713
  } catch (error) {
795
- console.error('[WoongKonvaMarker] handleMouseMove error:', error);
714
+ console.error('[WoongCanvasMarker] handleMouseMove error:', error);
796
715
  }
797
716
  };
798
717
  /**
@@ -1110,7 +1029,7 @@ Object.defineProperty(exports, 'CanvasDataType', {
1110
1029
  enumerable: true,
1111
1030
  get: function () { return types.CanvasDataType; }
1112
1031
  });
1113
- exports.KonvaMarkerProvider = context.KonvaMarkerProvider;
1032
+ exports.WoongCanvasProvider = context.WoongCanvasProvider;
1114
1033
  exports.LRUCache = performance.LRUCache;
1115
1034
  exports.SpatialHashGrid = performance.SpatialHashGrid;
1116
- exports["default"] = WoongCanvasLayer;
1035
+ exports["default"] = WoongCanvasMarker;
@@ -0,0 +1,4 @@
1
+ export { default as WoongCanvasMarker } from "./WoongCanvasMarker";
2
+ export { default as WoongCanvasLayer } from "./WoongCanvasMarker";
3
+ export * from "./WoongCanvasMarker";
4
+ export * from "../shared";