@mint-ui/map 1.2.0-test.23 โ†’ 1.2.0-test.25

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 (26) hide show
  1. package/dist/components/mint-map/core/MintMapController.d.ts +1 -0
  2. package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +8 -73
  3. package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.js +38 -88
  4. package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +0 -10
  5. package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts +5 -73
  6. package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.js +14 -81
  7. package/dist/components/mint-map/core/advanced/woongCanvas/shared/index.d.ts +0 -11
  8. package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.d.ts +13 -62
  9. package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.js +13 -62
  10. package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.d.ts +24 -78
  11. package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +23 -77
  12. package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +4 -21
  13. package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.js +0 -6
  14. package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +20 -142
  15. package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js +23 -146
  16. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +22 -1
  17. package/dist/components/mint-map/google/GoogleMintMapController.d.ts +1 -0
  18. package/dist/components/mint-map/google/GoogleMintMapController.js +4 -0
  19. package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +1 -0
  20. package/dist/components/mint-map/kakao/KakaoMintMapController.js +4 -0
  21. package/dist/components/mint-map/naver/NaverMintMapController.d.ts +3 -0
  22. package/dist/components/mint-map/naver/NaverMintMapController.js +37 -3
  23. package/dist/index.es.js +630 -916
  24. package/dist/index.js +0 -4
  25. package/dist/index.umd.js +629 -918
  26. package/package.json +1 -1
@@ -24,6 +24,7 @@ export declare abstract class MintMapController {
24
24
  abstract updateMarker(marker: Marker, options: MarkerOptions): void;
25
25
  abstract clearDrawable(drawable: Drawable): boolean;
26
26
  abstract markerToTheTop(marker: Marker): void;
27
+ abstract restoreMarkerZIndex(marker: Marker): void;
27
28
  abstract isMapDragged(): boolean;
28
29
  abstract setMapDragged(value: boolean): void;
29
30
  abstract setMarkerZIndex(marker: Marker, zIndex: number): void;
@@ -84,54 +84,13 @@ declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.Re
84
84
  /**
85
85
  * ๐Ÿš€ WoongCanvasLayer - Konva ๊ธฐ๋ฐ˜ ์ดˆ๊ณ ์„ฑ๋Šฅ ๋งˆ์ปค/ํด๋ฆฌ๊ณค ๋ Œ๋”๋ง ์ปดํฌ๋„ŒํŠธ
86
86
  *
87
- * 30,000๊ฐœ ์ด์ƒ์˜ ๋งˆ์ปค/ํด๋ฆฌ๊ณค์„ 60fps๋กœ ๋ Œ๋”๋งํ•˜๋Š” ์ตœ์ ํ™”๋œ Canvas ๋ ˆ์ด์–ด ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค.
88
- *
89
- * ## ๐ŸŽฏ ์ฃผ์š” ํŠน์ง•
87
+ * ## ๐Ÿ“Œ ์ฃผ์š” ํŠน์ง•
90
88
  * - **30,000๊ฐœ ์ด์ƒ์˜ ํด๋ฆฌ๊ณค/๋งˆ์ปค๋ฅผ 60fps๋กœ ๋ Œ๋”๋ง**
91
89
  * - **Multi-Layer ์•„ํ‚คํ…์ฒ˜**: Base/Animation/Event ๋ ˆ์ด์–ด ๋ถ„๋ฆฌ
92
90
  * - **Spatial Hash Grid**: O(1) ์ˆ˜์ค€์˜ ๋น ๋ฅธ Hit Test
93
91
  * - **LRU ์บ์‹œ**: ์ขŒํ‘œ ๋ณ€ํ™˜ ๊ฒฐ๊ณผ ์บ์‹ฑ์œผ๋กœ ์„ฑ๋Šฅ ์ตœ์ ํ™”
94
92
  * - **Viewport Culling**: ํ™”๋ฉด์— ๋ณด์ด๋Š” ์˜์—ญ๋งŒ ๋ Œ๋”๋ง
95
93
  * - **Discriminated Union Props**: ํƒ€์ž… ์•ˆ์ „ํ•œ MARKER/POLYGON ๋ชจ๋“œ
96
- * - **topOnHover + renderEvent ์กฐํ•ฉ**: hover๋œ ํ•ญ๋ชฉ์„ ์ตœ์ƒ๋‹จ์— ํ‘œ์‹œ
97
- *
98
- * ## ๐Ÿ“‹ Props API
99
- *
100
- * ### ๊ณตํ†ต Props (MARKER & POLYGON ๋ชจ๋‘ ์‚ฌ์šฉ)
101
- * @param data - ๋ Œ๋”๋งํ•  ๋ฐ์ดํ„ฐ ๋ฐฐ์—ด
102
- * @param dataType - 'MARKER' ๋˜๋Š” 'POLYGON'
103
- * @param onClick - ํด๋ฆญ ์‹œ ํ˜ธ์ถœ๋˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜
104
- * @param onMouseOver - Hover ์‹œ์ž‘ ์‹œ ํ˜ธ์ถœ๋˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜
105
- * @param onMouseOut - Hover ์ข…๋ฃŒ ์‹œ ํ˜ธ์ถœ๋˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜
106
- * @param enableMultiSelect - ๋‹ค์ค‘ ์„ ํƒ ํ™œ์„ฑํ™” ์—ฌ๋ถ€ (๊ธฐ๋ณธ: false)
107
- * @param topOnHover - Hover ์‹œ ์ตœ์ƒ๋‹จ ํ‘œ์‹œ ์—ฌ๋ถ€ (๊ธฐ๋ณธ: false)
108
- * @param enableViewportCulling - ๋ทฐํฌํŠธ ์ปฌ๋ง ํ™œ์„ฑํ™” ์—ฌ๋ถ€ (๊ธฐ๋ณธ: true)
109
- * @param cullingMargin - ์ปฌ๋ง ์—ฌ์œ  ๊ณต๊ฐ„ (๊ธฐ๋ณธ: 100px)
110
- * @param maxCacheSize - LRU ์บ์‹œ ์ตœ๋Œ€ ํฌ๊ธฐ (๊ธฐ๋ณธ: 30000)
111
- * @param selectedItems - ์™ธ๋ถ€ ์ œ์–ด ์„ ํƒ ์ƒํƒœ
112
- * @param selectedItem - ๋‹จ์ผ ์„ ํƒ ์•„์ดํ…œ
113
- * @param disableInteraction - ๋ชจ๋“  ์ƒํ˜ธ์ž‘์šฉ ๋น„ํ™œ์„ฑํ™” (๊ธฐ๋ณธ: false)
114
- * @param zIndex - ๋ ˆ์ด์–ด ์ˆœ์„œ (๊ธฐ๋ณธ: 0)
115
- * @param visible - ํ‘œ์‹œ ์—ฌ๋ถ€ (๊ธฐ๋ณธ: true)
116
- *
117
- * ### MARKER ํƒ€์ž… ์ „์šฉ Props
118
- * @param renderBase - Base Layer ๋ Œ๋”๋ง ํ•จ์ˆ˜ (ํ•„์ˆ˜)
119
- * @param renderAnimation - Animation Layer ๋ Œ๋”๋ง ํ•จ์ˆ˜ (์„ ํƒ)
120
- * @param renderEvent - Event Layer ๋ Œ๋”๋ง ํ•จ์ˆ˜ (์„ ํƒ)
121
- *
122
- * ### POLYGON ํƒ€์ž… ์ „์šฉ Props
123
- * @param baseFillColor - ๊ธฐ๋ณธ ์ฑ„์šฐ๊ธฐ ์ƒ‰์ƒ (ํ•„์ˆ˜)
124
- * @param baseStrokeColor - ๊ธฐ๋ณธ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ (ํ•„์ˆ˜)
125
- * @param baseLineWidth - ๊ธฐ๋ณธ ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜ (ํ•„์ˆ˜)
126
- * @param selectedFillColor - ์„ ํƒ ์ฑ„์šฐ๊ธฐ ์ƒ‰์ƒ (์„ ํƒ)
127
- * @param selectedStrokeColor - ์„ ํƒ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ (์„ ํƒ)
128
- * @param selectedLineWidth - ์„ ํƒ ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜ (์„ ํƒ)
129
- * @param activeFillColor - ๋งˆ์ง€๋ง‰ ์„ ํƒ ์ฑ„์šฐ๊ธฐ ์ƒ‰์ƒ (์„ ํƒ)
130
- * @param activeStrokeColor - ๋งˆ์ง€๋ง‰ ์„ ํƒ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ (์„ ํƒ)
131
- * @param activeLineWidth - ๋งˆ์ง€๋ง‰ ์„ ํƒ ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜ (์„ ํƒ)
132
- * @param hoveredFillColor - Hover ์ฑ„์šฐ๊ธฐ ์ƒ‰์ƒ (์„ ํƒ)
133
- * @param hoveredStrokeColor - Hover ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ (์„ ํƒ)
134
- * @param hoveredLineWidth - Hover ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜ (์„ ํƒ)
135
94
  *
136
95
  * ## ๐ŸŽฏ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•
137
96
  *
@@ -146,9 +105,9 @@ declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.Re
146
105
  * selectedFillColor="rgba(255, 193, 7, 0.7)"
147
106
  * selectedStrokeColor="rgba(255, 152, 0, 1)"
148
107
  * selectedLineWidth={4}
149
- * hoveredFillColor="rgba(100, 150, 255, 0.8)"
150
- * hoveredStrokeColor="rgba(0, 100, 200, 1)"
151
- * hoveredLineWidth={3}
108
+ * hoveredFillColor="rgba(100, 150, 255, 0.8)" // optional
109
+ * hoveredStrokeColor="rgba(0, 100, 200, 1)" // optional
110
+ * hoveredLineWidth={3} // optional
152
111
  * enableMultiSelect={true}
153
112
  * onClick={handleClick}
154
113
  * />
@@ -159,35 +118,14 @@ declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.Re
159
118
  * <WoongCanvasLayer
160
119
  * dataType={CanvasDataType.MARKER}
161
120
  * data={markers}
162
- * renderBase={renderMarkerBase}
163
- * renderAnimation={renderMarkerAnimation}
164
- * renderEvent={renderMarkerEvent}
121
+ * renderBase={renderMarkerBase} // required
122
+ * renderAnimation={renderMarkerAnimation} // optional
123
+ * renderEvent={renderMarkerEvent} // optional
165
124
  * topOnHover={true}
166
125
  * onClick={handleClick}
167
126
  * />
168
127
  * ```
169
128
  *
170
- * ### 3๏ธโƒฃ topOnHover + renderEvent ์กฐํ•ฉ
171
- *
172
- * `topOnHover={true}`์™€ `renderEvent`๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด hover๋œ ํ•ญ๋ชฉ์ด ์ตœ์ƒ๋‹จ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค:
173
- *
174
- * ```tsx
175
- * <WoongCanvasLayer
176
- * dataType={CanvasDataType.MARKER}
177
- * data={markers}
178
- * renderBase={renderMarkerBase}
179
- * renderEvent={renderMarkerEvent}
180
- * topOnHover={true}
181
- * onClick={handleClick}
182
- * />
183
- * ```
184
- *
185
- * **๋™์ž‘ ๋ฐฉ์‹:**
186
- * 1. **Base Layer**: hover๋œ ํ•ญ๋ชฉ์„ ์ œ์™ธํ•˜๊ณ  ์ผ๋ฐ˜ ํ•ญ๋ชฉ๋“ค ๋ Œ๋”๋ง
187
- * 2. **Event Layer**:
188
- * - ๋จผ์ € hover๋œ ํ•ญ๋ชฉ์„ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ํ•ญ๋ชฉ๋“ค ๋ Œ๋”๋ง
189
- * - ๊ทธ ๋‹ค์Œ hover๋œ ํ•ญ๋ชฉ์„ ์ตœ์ƒ๋‹จ์— ๋ Œ๋”๋ง (์‹œ๊ฐ์  ์šฐ์„ ์ˆœ์œ„)
190
- *
191
129
  * ## ๐Ÿ“Š ๋ฐ์ดํ„ฐ ํ˜•์‹
192
130
  * ```typescript
193
131
  * const data: KonvaCanvasData<T>[] = [
@@ -199,7 +137,6 @@ declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.Re
199
137
  * // MARKER: boxWidth/boxHeight ๊ถŒ์žฅ (Hit Test ์ •ํ™•๋„)
200
138
  * boxWidth: 60,
201
139
  * boxHeight: 75,
202
- * tailHeight: 9, // ๊ผฌ๋ฆฌ ๋†’์ด (Viewport Culling์šฉ, Hit Test ์ œ์™ธ)
203
140
  * // ์ปค์Šคํ…€ ๋ฐ์ดํ„ฐ
204
141
  * ...customData
205
142
  * }
@@ -220,8 +157,6 @@ declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.Re
220
157
  * tempCtx.font = 'bold 15px Arial';
221
158
  * const boxWidth = Math.max(60, tempCtx.measureText(text).width + 20);
222
159
  *
223
- * @see {@link ./README.md} ์ „์ฒด ๋ฌธ์„œ
224
- * @version 2.2.1
225
- * @since 2.0.0
160
+ * @see {@link https://github.com/your-repo/docs/WoongCanvasLayer.md} ์ „์ฒด ๋ฌธ์„œ
226
161
  */
227
162
  export default WoongCanvasLayer;
@@ -59,20 +59,20 @@ var WoongCanvasLayer = function (props) {
59
59
  var divElement = divRef.current;
60
60
  var containerRef = React.useRef(null);
61
61
  var markerRef = React.useRef(); // --------------------------------------------------------------------------
62
- // Konva Refs - Multi-Layer ์•„ํ‚คํ…์ฒ˜
62
+ // Konva Refs
63
63
  // --------------------------------------------------------------------------
64
64
 
65
65
  var stageRef = React.useRef(null);
66
66
  var baseLayerRef = React.useRef(null);
67
67
  var animationLayerRef = React.useRef(null);
68
68
  var eventLayerRef = React.useRef(null); // --------------------------------------------------------------------------
69
- // Data Refs - ๋ฐ์ดํ„ฐ ๋™๊ธฐํ™” ๋ฐ ์ƒํƒœ ๊ด€๋ฆฌ
69
+ // Data Refs - ์„ ํƒ ๋ฐ Hover ์ƒํƒœ ๊ด€๋ฆฌ
70
70
  // --------------------------------------------------------------------------
71
71
 
72
72
  /** data prop์„ ref๋กœ ์ถ”์  (stale closure ๋ฐฉ์ง€, useEffect์—์„œ ๋™๊ธฐํ™”) */
73
73
 
74
74
  var dataRef = React.useRef(data); // --------------------------------------------------------------------------
75
- // State Refs - ์„ ํƒ ๋ฐ Hover ์ƒํƒœ ๊ด€๋ฆฌ (์„ฑ๋Šฅ ์ตœ์ ํ™”)
75
+ // State Refs - ์„ ํƒ ๋ฐ Hover ์ƒํƒœ ๊ด€๋ฆฌ
76
76
  // --------------------------------------------------------------------------
77
77
 
78
78
  /** ์ƒํ˜ธ์ž‘์šฉ ๋น„ํ™œ์„ฑํ™” ์ƒํƒœ (Ref๋กœ ๊ด€๋ฆฌํ•˜์—ฌ ํด๋กœ์ € ๋ฌธ์ œ ํ•ด๊ฒฐ) */
@@ -113,7 +113,7 @@ var WoongCanvasLayer = function (props) {
113
113
  */
114
114
 
115
115
  var selectedItemsMapRef = React.useRef(new Map()); // --------------------------------------------------------------------------
116
- // Drag Refs - ์ง€๋„ ๋“œ๋ž˜๊ทธ ์ƒํƒœ ๊ด€๋ฆฌ
116
+ // Drag Refs
117
117
  // --------------------------------------------------------------------------
118
118
 
119
119
  var draggingRef = React.useRef(false);
@@ -122,7 +122,7 @@ var WoongCanvasLayer = function (props) {
122
122
  x: 0,
123
123
  y: 0
124
124
  }); // --------------------------------------------------------------------------
125
- // Performance Refs - ์„ฑ๋Šฅ ์ตœ์ ํ™” (์บ์‹ฑ & ์ธ๋ฑ์‹ฑ)
125
+ // Performance Refs (์บ์‹ฑ & ์ตœ์ ํ™”)
126
126
  // --------------------------------------------------------------------------
127
127
 
128
128
  /** ์ขŒํ‘œ ๋ณ€ํ™˜ ๊ฒฐ๊ณผ LRU ์บ์‹œ */
@@ -137,7 +137,7 @@ var WoongCanvasLayer = function (props) {
137
137
  /** ๋ทฐํฌํŠธ ๊ฒฝ๊ณ„ ์บ์‹œ (Viewport Culling) */
138
138
 
139
139
  var viewportRef = React.useRef(null); // --------------------------------------------------------------------------
140
- // ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜: ๋ทฐํฌํŠธ ๊ด€๋ฆฌ (Viewport Culling)
140
+ // ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜: ๋ทฐํฌํŠธ ๊ด€๋ฆฌ
141
141
  // --------------------------------------------------------------------------
142
142
 
143
143
  /**
@@ -216,7 +216,7 @@ var WoongCanvasLayer = function (props) {
216
216
 
217
217
  return result;
218
218
  }; // --------------------------------------------------------------------------
219
- // ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜: ๋ฐ”์šด๋”ฉ ๋ฐ•์Šค ๊ณ„์‚ฐ (Viewport Culling ์ตœ์ ํ™”)
219
+ // ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜: ๋ฐ”์šด๋”ฉ ๋ฐ•์Šค ๊ณ„์‚ฐ
220
220
  // --------------------------------------------------------------------------
221
221
 
222
222
  /**
@@ -330,14 +330,11 @@ var WoongCanvasLayer = function (props) {
330
330
  var renderEvent = dataType === types.CanvasDataType.MARKER ? props.renderEvent : function () {
331
331
  var polygonProps = props;
332
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
- // ๋ Œ๋”๋ง ํ•จ์ˆ˜: Base Layer (๊ธฐ๋ณธ ์ƒํƒœ ๋ Œ๋”๋ง)
335
- // --------------------------------------------------------------------------
336
-
333
+ }();
337
334
  /**
338
335
  * Base ๋ ˆ์ด์–ด ๋ Œ๋”๋ง (๋ทฐํฌํŠธ ์ปฌ๋ง ์ ์šฉ, ์„ ํƒ๋œ ๋งˆ์ปค ์ œ์™ธ)
339
336
  *
340
- * ๐Ÿ”ฅ ์„ฑ๋Šฅ ์ตœ์ ํ™”:
337
+ * ๐Ÿ”ฅ ์ตœ์ ํ™”:
341
338
  * 1. Shape ์žฌ์‚ฌ์šฉ์œผ๋กœ ๊ฐ์ฒด ์ƒ์„ฑ/ํŒŒ๊ดด ์˜ค๋ฒ„ํ—ค๋“œ ์ œ๊ฑฐ
342
339
  * 2. sceneFunc ํ•œ ๋ฒˆ๋งŒ ์„ค์ • (ํ•จ์ˆ˜ ์žฌ์ƒ์„ฑ ์ œ๊ฑฐ)
343
340
  * 3. ํด๋กœ์ €๋กœ ์ตœ์‹  ๋ฐ์ดํ„ฐ ์ฐธ์กฐ
@@ -403,14 +400,11 @@ var WoongCanvasLayer = function (props) {
403
400
 
404
401
 
405
402
  layer.batchDraw();
406
- }; // --------------------------------------------------------------------------
407
- // ๋ Œ๋”๋ง ํ•จ์ˆ˜: Animation Layer (์„ ํƒ๋œ ํ•ญ๋ชฉ ์• ๋‹ˆ๋ฉ”์ด์…˜)
408
- // --------------------------------------------------------------------------
409
-
403
+ };
410
404
  /**
411
405
  * Animation ๋ ˆ์ด์–ด ๋ Œ๋”๋ง (์„ ํƒ๋œ ๋งˆ์ปค ์• ๋‹ˆ๋ฉ”์ด์…˜)
412
406
  *
413
- * ๐Ÿ”ฅ ์„ฑ๋Šฅ ์ตœ์ ํ™”: sceneFunc ๋‚ด๋ถ€์—์„œ ์ตœ์‹  items ์ฐธ์กฐ
407
+ * ๐Ÿ”ฅ ์ตœ์ ํ™”: sceneFunc ๋‚ด๋ถ€์—์„œ ์ตœ์‹  items ์ฐธ์กฐ
414
408
  * - ์„ ํƒ ๋ณ€๊ฒฝ ์‹œ์—๋งŒ ์žฌ์ƒ์„ฑ
415
409
  * - ์ง€๋„ ์ด๋™ ์‹œ์—๋Š” ๊ธฐ์กด Animation ๊ณ„์† ์‹คํ–‰
416
410
  */
@@ -426,23 +420,14 @@ var WoongCanvasLayer = function (props) {
426
420
  items: dataRef.current,
427
421
  utils: renderUtils
428
422
  });
429
- }; // --------------------------------------------------------------------------
430
- // ๋ Œ๋”๋ง ํ•จ์ˆ˜: Event Layer (์ƒํ˜ธ์ž‘์šฉ ์ƒํƒœ ๋ Œ๋”๋ง)
431
- // --------------------------------------------------------------------------
432
-
423
+ };
433
424
  /**
434
425
  * Event ๋ ˆ์ด์–ด ๋ Œ๋”๋ง (hover + ์„ ํƒ ์ƒํƒœ ํ‘œ์‹œ)
435
426
  *
436
- * ๐Ÿ”ฅ ์„ฑ๋Šฅ ์ตœ์ ํ™”:
427
+ * ๐Ÿ”ฅ ์ตœ์ ํ™”:
437
428
  * 1. Shape ์žฌ์‚ฌ์šฉ์œผ๋กœ ๊ฐ์ฒด ์ƒ์„ฑ/ํŒŒ๊ดด ์˜ค๋ฒ„ํ—ค๋“œ ์ œ๊ฑฐ
438
429
  * 2. sceneFunc ํ•œ ๋ฒˆ๋งŒ ์„ค์ • (ํ•จ์ˆ˜ ์žฌ์ƒ์„ฑ ์ œ๊ฑฐ)
439
430
  * 3. ํด๋กœ์ €๋กœ ์ตœ์‹  ๋ฐ์ดํ„ฐ ์ฐธ์กฐ
440
- *
441
- * ๐ŸŽฏ topOnHover + renderEvent ์กฐํ•ฉ ์ง€์›:
442
- * - topOnHover๊ฐ€ true์ด๊ณ  renderEvent๊ฐ€ ์žˆ์œผ๋ฉด:
443
- * 1. ๋จผ์ € hover๋œ ํ•ญ๋ชฉ์„ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ํ•ญ๋ชฉ๋“ค ๋ Œ๋”๋ง
444
- * 2. ๊ทธ ๋‹ค์Œ hover๋œ ํ•ญ๋ชฉ์„ ์ตœ์ƒ๋‹จ์— ๋ Œ๋”๋ง (์‹œ๊ฐ์  ์šฐ์„ ์ˆœ์œ„)
445
- * - topOnHover๊ฐ€ false์ด๊ฑฐ๋‚˜ renderEvent๊ฐ€ ์—†์œผ๋ฉด ์ผ๋ฐ˜ ๋ Œ๋”๋ง
446
431
  */
447
432
 
448
433
 
@@ -459,42 +444,16 @@ var WoongCanvasLayer = function (props) {
459
444
  shape = new Konva__default["default"].Shape({
460
445
  name: 'event-render-shape',
461
446
  sceneFunc: function (context, shape) {
462
- var ctx = context; // ํด๋กœ์ €๋กœ ์ตœ์‹  ref ๊ฐ’ ์ฐธ์กฐ (์•ˆ์ „ํ•œ ์ฒ˜๋ฆฌ)
447
+ var ctx = context; // ํด๋กœ์ €๋กœ ์ตœ์‹  ref ๊ฐ’ ์ฐธ์กฐ
463
448
 
464
449
  var selectedItems = Array.from(selectedItemsMapRef.current.values());
465
- var hovered = hoveredItemRef.current;
466
- var selectedItem = selectedItemRef.current; // topOnHover๊ฐ€ true์ด๋ฉด hover๋œ ํ•ญ๋ชฉ์„ ์ตœ์ƒ๋‹จ์— ๋ Œ๋”๋ง
467
-
468
- if (topOnHover && hovered) {
469
- // hover๋œ ํ•ญ๋ชฉ๋งŒ ์ตœ์ƒ๋‹จ์— ๋ Œ๋”๋ง (renderEvent ์—†์ด ์ง์ ‘ ๋ Œ๋”๋ง)
470
- var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
471
-
472
- if (isHoveredInViewport) {
473
- // hover๋œ ํ•ญ๋ชฉ์„ ๋นจ๊ฐ„์ƒ‰์œผ๋กœ ์ง์ ‘ ๋ Œ๋”๋ง
474
- var position = renderUtils.getOrComputeMarkerOffset(hovered);
475
-
476
- if (position) {
477
- ctx.save();
478
- ctx.fillStyle = '#E53935';
479
- ctx.strokeStyle = '#C62828';
480
- ctx.lineWidth = 2;
481
- ctx.beginPath();
482
- ctx.arc(position.x, position.y, 10, 0, 2 * Math.PI);
483
- ctx.fill();
484
- ctx.stroke();
485
- ctx.restore();
486
- }
487
- }
488
- } else {
489
- // topOnHover๊ฐ€ false์ด๊ฑฐ๋‚˜ hover๋œ ํ•ญ๋ชฉ์ด ์—†์œผ๋ฉด ์ผ๋ฐ˜ ๋ Œ๋”๋ง
490
- renderEvent({
491
- ctx: ctx,
492
- hoveredItem: hovered,
493
- utils: renderUtils,
494
- selectedItems: selectedItems,
495
- selectedItem: selectedItem
496
- });
497
- }
450
+ renderEvent({
451
+ ctx: ctx,
452
+ hoveredItem: hoveredItemRef.current,
453
+ utils: renderUtils,
454
+ selectedItems: selectedItems,
455
+ selectedItem: selectedItemRef.current
456
+ });
498
457
  },
499
458
  perfectDrawEnabled: false,
500
459
  listening: false,
@@ -605,7 +564,7 @@ var WoongCanvasLayer = function (props) {
605
564
  containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
606
565
  }
607
566
  }; // --------------------------------------------------------------------------
608
- // Hit Test & ์ƒํƒœ ๊ด€๋ฆฌ (์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ)
567
+ // Hit Test & ์ƒํƒœ ๊ด€๋ฆฌ
609
568
  // --------------------------------------------------------------------------
610
569
 
611
570
  /**
@@ -775,7 +734,7 @@ var WoongCanvasLayer = function (props) {
775
734
  }
776
735
  };
777
736
  /**
778
- * ๋งˆ์šฐ์Šค ์ด๋™ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ (hover ๊ฐ์ง€ ๋ฐ ์ƒํƒœ ์—…๋ฐ์ดํŠธ)
737
+ * ๋งˆ์šฐ์Šค ์ด๋™ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ (hover ๊ฐ์ง€)
779
738
  */
780
739
 
781
740
 
@@ -819,7 +778,7 @@ var WoongCanvasLayer = function (props) {
819
778
  controller.setMapCursor('grab');
820
779
  };
821
780
  /**
822
- * ๋งˆ์šฐ์Šค๊ฐ€ canvas๋ฅผ ๋ฒ—์–ด๋‚  ๋•Œ hover ์ƒํƒœ ์ •๋ฆฌ
781
+ * ๋งˆ์šฐ์Šค๊ฐ€ canvas๋ฅผ ๋ฒ—์–ด๋‚  ๋•Œ hover cleanup
823
782
  */
824
783
 
825
784
 
@@ -879,7 +838,7 @@ var WoongCanvasLayer = function (props) {
879
838
  }
880
839
  }
881
840
  }, [options]); // --------------------------------------------------------------------------
882
- // Lifecycle: Konva ์ดˆ๊ธฐํ™” ๋ฐ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋“ฑ๋ก (์ปดํฌ๋„ŒํŠธ ๋งˆ์šดํŠธ)
841
+ // Lifecycle: Konva ์ดˆ๊ธฐํ™” ๋ฐ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋“ฑ๋ก
883
842
  // --------------------------------------------------------------------------
884
843
 
885
844
  React.useEffect(function () {
@@ -1005,32 +964,26 @@ var WoongCanvasLayer = function (props) {
1005
964
  };
1006
965
  }, []); // ์ดˆ๊ธฐํ™”๋Š” ํ•œ ๋ฒˆ๋งŒ
1007
966
  // --------------------------------------------------------------------------
1008
- // Lifecycle: disableInteraction ๋™๊ธฐํ™” (์ƒํ˜ธ์ž‘์šฉ ์ƒํƒœ ๊ด€๋ฆฌ)
967
+ // Lifecycle: disableInteraction ๋™๊ธฐํ™”
1009
968
  // --------------------------------------------------------------------------
1010
969
 
1011
970
  React.useEffect(function () {
1012
971
  disableInteractionRef.current = disableInteraction;
1013
972
  }, [disableInteraction]); // --------------------------------------------------------------------------
1014
- // Lifecycle: ์™ธ๋ถ€ selectedItems ๋™๊ธฐํ™” (์„ ํƒ ์ƒํƒœ ๊ด€๋ฆฌ)
973
+ // Lifecycle: ์™ธ๋ถ€ selectedItems ๋™๊ธฐํ™”
1015
974
  // --------------------------------------------------------------------------
1016
975
 
1017
976
  React.useEffect(function () {
1018
977
  if (!stageRef.current) return; // externalSelectedItems๊ฐ€ undefined๋ฉด ์™ธ๋ถ€ ์ œ์–ด ์•ˆ ํ•จ
1019
978
 
1020
- if (externalSelectedItems === undefined) return; // ์™ธ๋ถ€์—์„œ ์ „๋‹ฌ๋œ selectedItems๋กœ ๋™๊ธฐํ™” (์•ˆ์ „ํ•œ ์ฒ˜๋ฆฌ)
979
+ if (externalSelectedItems === undefined) return; // ์™ธ๋ถ€์—์„œ ์ „๋‹ฌ๋œ selectedItems๋กœ ๋™๊ธฐํ™”
1021
980
 
1022
981
  var newSelectedIds = new Set();
1023
- var newSelectedItemsMap = new Map(); // selectedItems๊ฐ€ ๋ฐฐ์—ด์ธ์ง€ ํ™•์ธํ•˜๊ณ  ์•ˆ์ „ํ•˜๊ฒŒ ์ฒ˜๋ฆฌ
1024
-
1025
- if (Array.isArray(externalSelectedItems)) {
1026
- externalSelectedItems.forEach(function (item) {
1027
- if (item && item.id) {
1028
- newSelectedIds.add(item.id);
1029
- newSelectedItemsMap.set(item.id, item);
1030
- }
1031
- });
1032
- }
1033
-
982
+ var newSelectedItemsMap = new Map();
983
+ externalSelectedItems.forEach(function (item) {
984
+ newSelectedIds.add(item.id);
985
+ newSelectedItemsMap.set(item.id, item);
986
+ });
1034
987
  selectedIdsRef.current = newSelectedIds;
1035
988
  selectedItemsMapRef.current = newSelectedItemsMap; // ๋ Œ๋”๋ง
1036
989
 
@@ -1039,17 +992,17 @@ var WoongCanvasLayer = function (props) {
1039
992
  doRenderEvent();
1040
993
  }, [externalSelectedItems]); // ๋ฐฐ์—ด ์ž์ฒด๋ฅผ dependency๋กœ ์‚ฌ์šฉ
1041
994
  // --------------------------------------------------------------------------
1042
- // Lifecycle: ์™ธ๋ถ€ selectedItem ๋ณ€๊ฒฝ ์‹œ Event Layer ๋ฆฌ๋ Œ๋”๋ง (๋‹จ์ผ ์„ ํƒ ๊ด€๋ฆฌ)
995
+ // Lifecycle: ์™ธ๋ถ€ selectedItem ๋ณ€๊ฒฝ ์‹œ Event Layer ๋ฆฌ๋ Œ๋”๋ง
1043
996
  // --------------------------------------------------------------------------
1044
997
 
1045
998
  React.useEffect(function () {
1046
- if (!stageRef.current) return; // Ref ๋™๊ธฐํ™” (์•ˆ์ „ํ•œ ์ฒ˜๋ฆฌ)
999
+ if (!stageRef.current) return; // Ref ๋™๊ธฐํ™”
1047
1000
 
1048
- selectedItemRef.current = externalSelectedItem || null; // selectedItem์ด ๋ณ€๊ฒฝ๋˜๋ฉด Event Layer๋งŒ ๋‹ค์‹œ ๊ทธ๋ฆผ
1001
+ selectedItemRef.current = externalSelectedItem; // selectedItem์ด ๋ณ€๊ฒฝ๋˜๋ฉด Event Layer๋งŒ ๋‹ค์‹œ ๊ทธ๋ฆผ
1049
1002
 
1050
1003
  doRenderEvent();
1051
1004
  }, [externalSelectedItem]); // --------------------------------------------------------------------------
1052
- // Lifecycle: ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ ์‹œ ๋ Œ๋”๋ง (๋ฐ์ดํ„ฐ ๋™๊ธฐํ™” ๋ฐ ์ตœ์ ํ™”)
1005
+ // Lifecycle: ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ ์‹œ ๋ Œ๋”๋ง
1053
1006
  // --------------------------------------------------------------------------
1054
1007
 
1055
1008
  React.useEffect(function () {
@@ -1106,10 +1059,7 @@ var WoongCanvasLayer = function (props) {
1106
1059
  selectedItemsMapRef.current = newSelectedItemsMap; // ์ฆ‰์‹œ ๋ Œ๋”๋ง
1107
1060
 
1108
1061
  renderAllImmediate();
1109
- }, [data]); // --------------------------------------------------------------------------
1110
- // Render - React Portal์„ ํ†ตํ•œ DOM ๋ Œ๋”๋ง
1111
- // --------------------------------------------------------------------------
1112
-
1062
+ }, [data]);
1113
1063
  return reactDom.createPortal(React__default["default"].createElement("div", {
1114
1064
  ref: containerRef,
1115
1065
  style: {
@@ -1,13 +1,3 @@
1
- /**
2
- * @fileoverview WoongCanvasLayer ๋ชจ๋“ˆ์˜ ๋ฉ”์ธ ์—”ํŠธ๋ฆฌ ํฌ์ธํŠธ
3
- *
4
- * ์ด ํŒŒ์ผ์€ WoongCanvasLayer ์ปดํฌ๋„ŒํŠธ์™€ ๊ด€๋ จ๋œ ๋ชจ๋“  ํƒ€์ž…, ์œ ํ‹ธ๋ฆฌํ‹ฐ,
5
- * ์„ฑ๋Šฅ ์ตœ์ ํ™” ํด๋ž˜์Šค๋“ค์„ ์™ธ๋ถ€๋กœ ๋…ธ์ถœํ•ฉ๋‹ˆ๋‹ค.
6
- *
7
- * @version 2.2.1
8
- * @since 2.0.0
9
- * @author ๋ฐ•๊ฑด์›…
10
- */
11
1
  export { default as WoongCanvasLayer } from "./WoongCanvasLayer";
12
2
  export * from "./WoongCanvasLayer";
13
3
  export * from "./shared";
@@ -2,99 +2,31 @@ import React from "react";
2
2
  import { Offset } from "../../../../types";
3
3
  import { KonvaCanvasData } from "./types";
4
4
  /**
5
- * @fileoverview ๋‹ค์ค‘ WoongCanvasLayer ์ธ์Šคํ„ด์Šค๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ React Context
5
+ * ๋‹ค์ค‘ WoongKonvaMarker ์ธ์Šคํ„ด์Šค๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ Context
6
6
  *
7
- * ์ด Context๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ WoongCanvasLayer๊ฐ€ ๋™์‹œ์— ์‚ฌ์šฉ๋  ๋•Œ ์ด๋ฒคํŠธ ์šฐ์„ ์ˆœ์œ„๋ฅผ
8
- * ๊ด€๋ฆฌํ•˜๊ณ  ์ „์—ญ ํด๋ฆญ/ํ˜ธ๋ฒ„ ์ด๋ฒคํŠธ๋ฅผ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
9
- *
10
- * ## ์ฃผ์š” ๊ธฐ๋Šฅ
11
- * - **zIndex ๊ธฐ๋ฐ˜ ์ด๋ฒคํŠธ ์šฐ์„ ์ˆœ์œ„**: ๋†’์€ zIndex๋ฅผ ๊ฐ€์ง„ ๋ ˆ์ด์–ด๊ฐ€ ๋จผ์ € ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ
12
- * - **์ „์—ญ ์ด๋ฒคํŠธ ๊ด€๋ฆฌ**: ์ง€๋„ ์ „์ฒด์˜ ํด๋ฆญ/ํ˜ธ๋ฒ„ ์ด๋ฒคํŠธ๋ฅผ ์ค‘์•™์—์„œ ๊ด€๋ฆฌ
13
- * - **๋‹ค์ค‘ ๋ ˆ์ด์–ด ์ƒํ˜ธ์ž‘์šฉ**: ์—ฌ๋Ÿฌ ๋ ˆ์ด์–ด ๊ฐ„์˜ ์ด๋ฒคํŠธ ์ถฉ๋Œ ๋ฐฉ์ง€
14
- * - **์ƒํ˜ธ์ž‘์šฉ ๋น„ํ™œ์„ฑํ™” ์ง€์›**: disableInteraction prop ์ง€์›
15
- *
16
- * ## ์‚ฌ์šฉ ๋ฐฉ๋ฒ•
17
- * ```tsx
18
- * <KonvaMarkerProvider>
19
- * <WoongCanvasLayer zIndex={1} ... />
20
- * <WoongCanvasLayer zIndex={2} ... />
21
- * </KonvaMarkerProvider>
22
- * ```
23
- *
24
- * @version 2.2.1
25
- * @since 2.0.0
26
- * @author ๋ฐ•๊ฑด์›…
27
- */
28
- /**
29
- * WoongCanvasLayer ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค ์ธํ„ฐํŽ˜์ด์Šค
30
- *
31
- * Context์—์„œ ๊ด€๋ฆฌํ•˜๋Š” ๊ฐ WoongCanvasLayer ์ธ์Šคํ„ด์Šค๊ฐ€ ๊ตฌํ˜„ํ•ด์•ผ ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋“ค์ž…๋‹ˆ๋‹ค.
32
- *
33
- * @template T ๋งˆ์ปค/ํด๋ฆฌ๊ณค ๋ฐ์ดํ„ฐ์˜ ์ถ”๊ฐ€ ์†์„ฑ ํƒ€์ž…
7
+ * ์šฉ๋„:
8
+ * - zIndex ๊ธฐ๋ฐ˜ ์ด๋ฒคํŠธ ์šฐ์„ ์ˆœ์œ„ ์ฒ˜๋ฆฌ
9
+ * - ์ „์—ญ ํด๋ฆญ/ํ˜ธ๋ฒ„ ์ด๋ฒคํŠธ ์กฐ์ •
10
+ * - ์—ฌ๋Ÿฌ ๋ ˆ์ด์–ด ๊ฐ„ ์ƒํ˜ธ์ž‘์šฉ ๊ด€๋ฆฌ
34
11
  */
35
12
  export interface ComponentInstance<T> {
36
- /** ๋ ˆ์ด์–ด ์ˆœ์„œ (๋†’์„์ˆ˜๋ก ์šฐ์„ ์ˆœ์œ„ ๋†’์Œ) */
37
13
  zIndex: number;
38
- /** ํŠน์ • ์ขŒํ‘œ์—์„œ ํžˆํŠธ ํ…Œ์ŠคํŠธ ์ˆ˜ํ–‰ */
39
14
  hitTest: (offset: Offset) => boolean;
40
- /** ํด๋ฆญ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ */
41
15
  onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
42
- /** ๋งˆ์šฐ์Šค ์˜ค๋ฒ„ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ */
43
16
  onMouseOver?: (payload: KonvaCanvasData<T>) => void;
44
- /** ๋งˆ์šฐ์Šค ์•„์›ƒ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ */
45
17
  onMouseOut?: (payload: KonvaCanvasData<T>) => void;
46
- /** ํŠน์ • ์ขŒํ‘œ์—์„œ ๋ฐ์ดํ„ฐ ์ฐพ๊ธฐ */
47
18
  findData: (offset: Offset) => KonvaCanvasData<T> | null;
48
- /** ํ˜ธ๋ฒ„ ์ƒํƒœ ์„ค์ • */
49
19
  setHovered: (data: KonvaCanvasData<T> | null) => void;
50
- /** ๋กœ์ปฌ ํด๋ฆญ ์ฒ˜๋ฆฌ */
51
20
  handleLocalClick: (data: KonvaCanvasData<T>) => void;
52
- /** ์„ ํƒ๋œ ํ•ญ๋ชฉ ID ๋ชฉ๋ก ๋ฐ˜ํ™˜ */
53
21
  getSelectedIds: () => Set<string>;
54
- /** ์ƒํ˜ธ์ž‘์šฉ ๋น„ํ™œ์„ฑํ™” ์—ฌ๋ถ€ ์ฒดํฌ */
55
22
  isInteractionDisabled: () => boolean;
56
23
  }
57
- /**
58
- * KonvaMarkerContext์˜ ๊ฐ’ ํƒ€์ž…
59
- */
60
24
  interface KonvaMarkerContextValue {
61
- /** ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค ๋“ฑ๋ก */
62
25
  registerComponent: <T>(instance: ComponentInstance<T>) => void;
63
- /** ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค ๋“ฑ๋ก ํ•ด์ œ */
64
26
  unregisterComponent: <T>(instance: ComponentInstance<T>) => void;
65
27
  }
66
- /**
67
- * ๋‹ค์ค‘ WoongCanvasLayer ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ Context Provider
68
- *
69
- * ์—ฌ๋Ÿฌ ๊ฐœ์˜ WoongCanvasLayer๊ฐ€ ๋™์‹œ์— ์‚ฌ์šฉ๋  ๋•Œ ์ด๋ฒคํŠธ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ 
70
- * ์ „์—ญ ํด๋ฆญ/ํ˜ธ๋ฒ„ ์ด๋ฒคํŠธ๋ฅผ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
71
- *
72
- * @param children - Provider๋กœ ๊ฐ์Œ€ React ์ปดํฌ๋„ŒํŠธ๋“ค
73
- * @returns Context Provider ์ปดํฌ๋„ŒํŠธ
74
- *
75
- * @example
76
- * ```tsx
77
- * <KonvaMarkerProvider>
78
- * <WoongCanvasLayer zIndex={1} data={markers1} ... />
79
- * <WoongCanvasLayer zIndex={2} data={markers2} ... />
80
- * </KonvaMarkerProvider>
81
- * ```
82
- */
83
28
  export declare const KonvaMarkerProvider: React.FC<{
84
29
  children: React.ReactNode;
85
30
  }>;
86
- /**
87
- * KonvaMarkerContext๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ Hook
88
- *
89
- * @returns Context ๊ฐ’ ๋˜๋Š” null (Provider ์™ธ๋ถ€์—์„œ ์‚ฌ์šฉ ์‹œ)
90
- *
91
- * @example
92
- * ```tsx
93
- * const context = useKonvaMarkerContext();
94
- * if (context) {
95
- * context.registerComponent(instance);
96
- * }
97
- * ```
98
- */
99
31
  export declare const useKonvaMarkerContext: () => KonvaMarkerContextValue | null;
100
32
  export {};