@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.
- package/dist/components/mint-map/core/MintMapController.d.ts +1 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +8 -73
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.js +38 -88
- package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +0 -10
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts +5 -73
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.js +14 -81
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/index.d.ts +0 -11
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.d.ts +13 -62
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.js +13 -62
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.d.ts +24 -78
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +23 -77
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +4 -21
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.js +0 -6
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +20 -142
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js +23 -146
- package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +22 -1
- package/dist/components/mint-map/google/GoogleMintMapController.d.ts +1 -0
- package/dist/components/mint-map/google/GoogleMintMapController.js +4 -0
- package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +1 -0
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +4 -0
- package/dist/components/mint-map/naver/NaverMintMapController.d.ts +3 -0
- package/dist/components/mint-map/naver/NaverMintMapController.js +37 -3
- package/dist/index.es.js +630 -916
- package/dist/index.js +0 -4
- package/dist/index.umd.js +629 -918
- 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
|
-
*
|
|
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
|
|
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
|
|
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
|
-
// ์ ํธ๋ฆฌํฐ ํจ์: ๋ทฐํฌํธ ๊ด๋ฆฌ
|
|
140
|
+
// ์ ํธ๋ฆฌํฐ ํจ์: ๋ทฐํฌํธ ๊ด๋ฆฌ
|
|
141
141
|
// --------------------------------------------------------------------------
|
|
142
142
|
|
|
143
143
|
/**
|
|
@@ -216,7 +216,7 @@ var WoongCanvasLayer = function (props) {
|
|
|
216
216
|
|
|
217
217
|
return result;
|
|
218
218
|
}; // --------------------------------------------------------------------------
|
|
219
|
-
// ์ ํธ๋ฆฌํฐ ํจ์: ๋ฐ์ด๋ฉ ๋ฐ์ค ๊ณ์ฐ
|
|
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
|
-
* ๐ฅ
|
|
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
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
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();
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
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
|
|
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
|
-
*
|
|
5
|
+
* ๋ค์ค WoongKonvaMarker ์ธ์คํด์ค๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํ Context
|
|
6
6
|
*
|
|
7
|
-
*
|
|
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 {};
|