@mint-ui/map 1.2.0-test.3 → 1.2.0-test.31
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/MintMapCore.js +1 -2
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +162 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/{WoongKonvaMarker.js → WoongCanvasLayer.js} +260 -208
- package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +2 -1
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts +8 -7
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.js +6 -2
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.d.ts +61 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +234 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +109 -12
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +37 -7
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js +107 -9
- package/dist/components/mint-map/google/GoogleMintMapController.js +2 -1
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +2 -1
- package/dist/components/mint-map/naver/NaverMintMapController.js +2 -1
- package/dist/index.es.js +594 -217
- package/dist/index.js +4 -1
- package/dist/index.umd.js +596 -216
- package/package.json +1 -1
- package/dist/components/mint-map/core/advanced/woongCanvas/ClusterMarker.d.ts +0 -11
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.d.ts +0 -50
|
@@ -72,18 +72,67 @@ var isPointInPolygon = function (point, polygon) {
|
|
|
72
72
|
return inside;
|
|
73
73
|
};
|
|
74
74
|
/**
|
|
75
|
-
* 폴리곤 히트 테스트
|
|
75
|
+
* 폴리곤 히트 테스트 (도넛 폴리곤 지원)
|
|
76
|
+
*
|
|
77
|
+
* 로직:
|
|
78
|
+
* 1. 외부 폴리곤(첫 번째): 내부에 있어야 함
|
|
79
|
+
* 2. 내부 구멍들(나머지): 내부에 있으면 안 됨 (evenodd 규칙)
|
|
80
|
+
*
|
|
81
|
+
* 중요: 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됨
|
|
82
|
+
* - 도넛 폴리곤 A: isDonutPolygon=true
|
|
83
|
+
* - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
|
|
76
84
|
*/
|
|
77
85
|
|
|
78
86
|
var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffsets) {
|
|
79
87
|
var polygonOffsets = getPolygonOffsets(polygonData);
|
|
80
|
-
if (!polygonOffsets) return false;
|
|
88
|
+
if (!polygonOffsets) return false; // 🍩 도넛 폴리곤 처리 (isDonutPolygon === true)
|
|
81
89
|
|
|
82
|
-
|
|
83
|
-
var
|
|
90
|
+
if (polygonData.isDonutPolygon) {
|
|
91
|
+
for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
|
|
92
|
+
var multiPolygon = polygonOffsets_1[_i];
|
|
93
|
+
if (multiPolygon.length === 0) continue; // 외부 폴리곤만 있는 경우 (구멍 없음) - 일반 폴리곤처럼 처리
|
|
84
94
|
|
|
85
|
-
|
|
86
|
-
|
|
95
|
+
if (multiPolygon.length === 1) {
|
|
96
|
+
if (isPointInPolygon(clickedOffset, multiPolygon[0])) {
|
|
97
|
+
return true;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
continue;
|
|
101
|
+
} // 1. 외부 폴리곤(첫 번째)에 포함되는지 확인
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
var outerPolygon = multiPolygon[0];
|
|
105
|
+
|
|
106
|
+
if (!isPointInPolygon(clickedOffset, outerPolygon)) {
|
|
107
|
+
continue; // 외부 폴리곤 밖이면 다음 multiPolygon 확인
|
|
108
|
+
} // 2. 내부 구멍들(나머지)에 포함되는지 확인
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
for (var i = 1; i < multiPolygon.length; i++) {
|
|
112
|
+
var hole = multiPolygon[i];
|
|
113
|
+
|
|
114
|
+
if (isPointInPolygon(clickedOffset, hole)) {
|
|
115
|
+
// ❌ 구멍 안에 있음 → 이 도넛 폴리곤은 히트 안 됨
|
|
116
|
+
// 다른 multiPolygon 체크하지 않고 바로 false 반환
|
|
117
|
+
// (도넛 폴리곤의 구멍 안은 무조건 클릭 불가)
|
|
118
|
+
return false;
|
|
119
|
+
}
|
|
120
|
+
} // ✅ 외부 폴리곤 안 + 구멍 밖 = 히트!
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
return true;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
return false;
|
|
127
|
+
} // 일반 폴리곤 처리 (isDonutPolygon === false 또는 undefined)
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
for (var _a = 0, polygonOffsets_2 = polygonOffsets; _a < polygonOffsets_2.length; _a++) {
|
|
131
|
+
var multiPolygon = polygonOffsets_2[_a];
|
|
132
|
+
|
|
133
|
+
for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
|
|
134
|
+
var polygonGroup = multiPolygon_2[_b];
|
|
135
|
+
if (polygonGroup.length === 0) continue;
|
|
87
136
|
|
|
88
137
|
if (isPointInPolygon(clickedOffset, polygonGroup)) {
|
|
89
138
|
return true;
|
|
@@ -94,7 +143,12 @@ var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffse
|
|
|
94
143
|
return false;
|
|
95
144
|
};
|
|
96
145
|
/**
|
|
97
|
-
* 마커 히트 테스트
|
|
146
|
+
* 마커 히트 테스트 (클릭/hover 영역 체크)
|
|
147
|
+
*
|
|
148
|
+
* 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
|
|
149
|
+
* - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
|
|
150
|
+
* - boxHeight는 마커 본체만 포함 (꼬리 제외)
|
|
151
|
+
* - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
|
|
98
152
|
*/
|
|
99
153
|
|
|
100
154
|
var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
|
|
@@ -102,14 +156,58 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
|
|
|
102
156
|
if (!markerOffset) return false;
|
|
103
157
|
var boxWidth = markerData.boxWidth || 50;
|
|
104
158
|
var boxHeight = markerData.boxHeight || 28;
|
|
105
|
-
var tailHeight =
|
|
159
|
+
var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
|
|
160
|
+
|
|
106
161
|
var x = markerOffset.x - boxWidth / 2;
|
|
107
|
-
var y = markerOffset.y - boxHeight - tailHeight;
|
|
162
|
+
var y = markerOffset.y - boxHeight - tailHeight; // 🔥 꼬리만큼 위로!
|
|
163
|
+
|
|
108
164
|
return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
|
|
109
165
|
};
|
|
166
|
+
var hexToRgba = function (hexColor, alpha) {
|
|
167
|
+
if (alpha === void 0) {
|
|
168
|
+
alpha = 1;
|
|
169
|
+
} // NOTE: 입력된 hexColor에서 "#" 제거
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
var hex = hexColor.replace('#', ''); // NOTE: 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
|
|
173
|
+
|
|
174
|
+
if (hex.length === 6) {
|
|
175
|
+
var r = parseInt(hex.substring(0, 2), 16);
|
|
176
|
+
var g = parseInt(hex.substring(2, 4), 16);
|
|
177
|
+
var b = parseInt(hex.substring(4, 6), 16);
|
|
178
|
+
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
throw new Error('Invalid hex color format');
|
|
182
|
+
};
|
|
183
|
+
var tempCanvas = document.createElement('canvas');
|
|
184
|
+
var tempCtx = tempCanvas.getContext('2d');
|
|
185
|
+
/**
|
|
186
|
+
* 텍스트 박스의 너비를 계산합니다.
|
|
187
|
+
*
|
|
188
|
+
* @param {Object} params - 파라미터 객체
|
|
189
|
+
* @param {string} params.text - 측정할 텍스트
|
|
190
|
+
* @param {string} params.fontConfig - 폰트 설정 (예: 'bold 16px Arial')
|
|
191
|
+
* @param {number} params.padding - 텍스트 박스에 적용할 패딩 값
|
|
192
|
+
* @param {number} params.minWidth - 최소 너비
|
|
193
|
+
* @returns {number} 계산된 텍스트 박스의 너비
|
|
194
|
+
*/
|
|
195
|
+
|
|
196
|
+
var calculateTextBoxWidth = function (_a) {
|
|
197
|
+
var text = _a.text,
|
|
198
|
+
fontConfig = _a.fontConfig,
|
|
199
|
+
padding = _a.padding,
|
|
200
|
+
minWidth = _a.minWidth;
|
|
201
|
+
if (!tempCtx) return 0;
|
|
202
|
+
tempCtx.font = fontConfig;
|
|
203
|
+
var textWidth = tempCtx.measureText(text).width;
|
|
204
|
+
return Math.max(minWidth, textWidth + padding);
|
|
205
|
+
};
|
|
110
206
|
|
|
207
|
+
exports.calculateTextBoxWidth = calculateTextBoxWidth;
|
|
111
208
|
exports.computeMarkerOffset = computeMarkerOffset;
|
|
112
209
|
exports.computePolygonOffsets = computePolygonOffsets;
|
|
210
|
+
exports.hexToRgba = hexToRgba;
|
|
113
211
|
exports.isPointInMarkerData = isPointInMarkerData;
|
|
114
212
|
exports.isPointInPolygon = isPointInPolygon;
|
|
115
213
|
exports.isPointInPolygonData = isPointInPolygonData;
|
|
@@ -20,8 +20,9 @@ var polygon = require('../core/util/polygon.js');
|
|
|
20
20
|
require('../naver/NaverMintMapController.js');
|
|
21
21
|
require('../core/advanced/canvas/CanvasMarkerClaude.js');
|
|
22
22
|
require('../core/advanced/MapLoadingComponents.js');
|
|
23
|
-
require('
|
|
23
|
+
require('konva');
|
|
24
24
|
require('../core/advanced/woongCanvas/shared/types.js');
|
|
25
|
+
require('../core/advanced/woongCanvas/shared/utils.js');
|
|
25
26
|
require('../core/advanced/woongCanvas/shared/context.js');
|
|
26
27
|
require('../core/advanced/woongCanvas/shared/performance.js');
|
|
27
28
|
require('../core/wrapper/MapControlWrapper.js');
|
|
@@ -21,8 +21,9 @@ var polygon = require('../core/util/polygon.js');
|
|
|
21
21
|
require('../naver/NaverMintMapController.js');
|
|
22
22
|
require('../core/advanced/canvas/CanvasMarkerClaude.js');
|
|
23
23
|
require('../core/advanced/MapLoadingComponents.js');
|
|
24
|
-
require('
|
|
24
|
+
require('konva');
|
|
25
25
|
require('../core/advanced/woongCanvas/shared/types.js');
|
|
26
|
+
require('../core/advanced/woongCanvas/shared/utils.js');
|
|
26
27
|
require('../core/advanced/woongCanvas/shared/context.js');
|
|
27
28
|
require('../core/advanced/woongCanvas/shared/performance.js');
|
|
28
29
|
require('../core/wrapper/MapControlWrapper.js');
|
|
@@ -20,8 +20,9 @@ require('../core/util/geo.js');
|
|
|
20
20
|
var polygon = require('../core/util/polygon.js');
|
|
21
21
|
require('../core/advanced/canvas/CanvasMarkerClaude.js');
|
|
22
22
|
require('../core/advanced/MapLoadingComponents.js');
|
|
23
|
-
require('
|
|
23
|
+
require('konva');
|
|
24
24
|
require('../core/advanced/woongCanvas/shared/types.js');
|
|
25
|
+
require('../core/advanced/woongCanvas/shared/utils.js');
|
|
25
26
|
require('../core/advanced/woongCanvas/shared/context.js');
|
|
26
27
|
require('../core/advanced/woongCanvas/shared/performance.js');
|
|
27
28
|
require('../core/wrapper/MapControlWrapper.js');
|