@fleet-frontend/mower-maps 0.2.5-beta.9 → 0.2.6-beta.1
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/config/constants.d.ts +3 -0
- package/dist/config/constants.d.ts.map +1 -1
- package/dist/config/styles.d.ts.map +1 -1
- package/dist/context/common.d.ts +17 -0
- package/dist/context/common.d.ts.map +1 -1
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +2472 -409
- package/dist/index.js +2483 -407
- package/dist/render/BoundarySvgRender.d.ts +3 -1
- package/dist/render/BoundarySvgRender.d.ts.map +1 -1
- package/dist/render/MowerMapRenderer.d.ts.map +1 -1
- package/dist/render/MowerPartitionPickerMap.d.ts +17 -0
- package/dist/render/MowerPartitionPickerMap.d.ts.map +1 -0
- package/dist/render/antennas/useAntennaInfo.d.ts.map +1 -1
- package/dist/render/boundaryLabels/useBoundaryLabels.d.ts.map +1 -1
- package/dist/render/charginPile/index.d.ts +11 -1
- package/dist/render/charginPile/index.d.ts.map +1 -1
- package/dist/render/charginPile/useChargingPile.d.ts +11 -1
- package/dist/render/charginPile/useChargingPile.d.ts.map +1 -1
- package/dist/render/partitionPicker/constants.d.ts +165 -0
- package/dist/render/partitionPicker/constants.d.ts.map +1 -0
- package/dist/render/partitionPicker/hooks/useBoundaryHover.d.ts +18 -0
- package/dist/render/partitionPicker/hooks/useBoundaryHover.d.ts.map +1 -0
- package/dist/render/partitionPicker/hooks/useBoundarySelection.d.ts +20 -0
- package/dist/render/partitionPicker/hooks/useBoundarySelection.d.ts.map +1 -0
- package/dist/render/partitionPicker/hooks/useContainerSize.d.ts +16 -0
- package/dist/render/partitionPicker/hooks/useContainerSize.d.ts.map +1 -0
- package/dist/render/partitionPicker/hooks/useGoogleMapsOverlay.d.ts +31 -0
- package/dist/render/partitionPicker/hooks/useGoogleMapsOverlay.d.ts.map +1 -0
- package/dist/render/partitionPicker/hooks/useIsolatedBoundaryIds.d.ts +6 -0
- package/dist/render/partitionPicker/hooks/useIsolatedBoundaryIds.d.ts.map +1 -0
- package/dist/render/partitionPicker/hooks/useMapViewport.d.ts +53 -0
- package/dist/render/partitionPicker/hooks/useMapViewport.d.ts.map +1 -0
- package/dist/render/partitionPicker/hooks/usePartitionLabelItems.d.ts +22 -0
- package/dist/render/partitionPicker/hooks/usePartitionLabelItems.d.ts.map +1 -0
- package/dist/render/partitionPicker/index.d.ts +9 -0
- package/dist/render/partitionPicker/index.d.ts.map +1 -0
- package/dist/render/partitionPicker/layers/MapGridBackground.d.ts +22 -0
- package/dist/render/partitionPicker/layers/MapGridBackground.d.ts.map +1 -0
- package/dist/render/partitionPicker/layers/PartitionNameLabels.d.ts +21 -0
- package/dist/render/partitionPicker/layers/PartitionNameLabels.d.ts.map +1 -0
- package/dist/render/partitionPicker/layers/PartitionPickerGridSvg.d.ts +10 -0
- package/dist/render/partitionPicker/layers/PartitionPickerGridSvg.d.ts.map +1 -0
- package/dist/render/partitionPicker/layers/PartitionPickerSvg.d.ts +24 -0
- package/dist/render/partitionPicker/layers/PartitionPickerSvg.d.ts.map +1 -0
- package/dist/render/partitionPicker/layers/SelectableBoundaryElement.d.ts +34 -0
- package/dist/render/partitionPicker/layers/SelectableBoundaryElement.d.ts.map +1 -0
- package/dist/render/partitionPicker/types.d.ts +140 -0
- package/dist/render/partitionPicker/types.d.ts.map +1 -0
- package/dist/render/partitionPicker/viewportUtils.d.ts +102 -0
- package/dist/render/partitionPicker/viewportUtils.d.ts.map +1 -0
- package/dist/render/svgElement/ChannelClipPath/constants.d.ts +9 -0
- package/dist/render/svgElement/ChannelClipPath/constants.d.ts.map +1 -0
- package/dist/render/svgElement/ChannelElement/index.d.ts.map +1 -1
- package/dist/render/svgElement/ObstacleElement/index.d.ts.map +1 -1
- package/dist/render/svgElement/PolygonELement/components/Magnifier/index.d.ts.map +1 -1
- package/dist/render/svgElement/PolygonELement/components/Tooltip.d.ts.map +1 -1
- package/dist/render/svgElement/PolygonELement/index.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/DoodleTransformWrapper/DoodleTransformWrapper.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/VisionOffTransformWrapper/VisionOffTransformWrapper.d.ts.map +1 -1
- package/dist/types/renderer.d.ts +21 -0
- package/dist/types/renderer.d.ts.map +1 -1
- package/dist/utils/dateTimeUtils.d.ts +6 -2
- package/dist/utils/dateTimeUtils.d.ts.map +1 -1
- package/dist/utils/googleStaticMapSign.d.ts +17 -0
- package/dist/utils/googleStaticMapSign.d.ts.map +1 -0
- package/dist/utils/mapBounds.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import React__default, { memo, useMemo, useEffect, useState, useRef, useCallback, createContext, useContext, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
|
|
3
|
+
import React__default, { memo, useMemo, useEffect, useState, useRef, useCallback, createContext, useContext, useLayoutEffect, forwardRef, useImperativeHandle, useId } from 'react';
|
|
4
4
|
import ReactDOM, { createPortal } from 'react-dom';
|
|
5
5
|
|
|
6
6
|
function globals (defs) {
|
|
@@ -2089,7 +2089,7 @@ var ellipsoids = {
|
|
|
2089
2089
|
}
|
|
2090
2090
|
};
|
|
2091
2091
|
|
|
2092
|
-
const WGS84$
|
|
2092
|
+
const WGS84$2 = ellipsoids.WGS84; // default ellipsoid
|
|
2093
2093
|
|
|
2094
2094
|
function eccentricity(a, b, rf, R_A) {
|
|
2095
2095
|
var a2 = a * a; // used in geocentric
|
|
@@ -2114,7 +2114,7 @@ function sphere(a, b, rf, ellps, sphere) {
|
|
|
2114
2114
|
if (!a) { // do we have an ellipsoid?
|
|
2115
2115
|
var ellipse = match(ellipsoids, ellps);
|
|
2116
2116
|
if (!ellipse) {
|
|
2117
|
-
ellipse = WGS84$
|
|
2117
|
+
ellipse = WGS84$2;
|
|
2118
2118
|
}
|
|
2119
2119
|
a = ellipse.a;
|
|
2120
2120
|
b = ellipse.b;
|
|
@@ -10613,9 +10613,16 @@ var SvgMapOpacity;
|
|
|
10613
10613
|
* 地图渲染相关常量配置
|
|
10614
10614
|
*/
|
|
10615
10615
|
// 默认坐标
|
|
10616
|
+
// export const DEFAULT_COORDINATES = {
|
|
10617
|
+
// sw: [116.071044, 40.102099],
|
|
10618
|
+
// ne: [116.0734, 40.103901],
|
|
10619
|
+
// };
|
|
10620
|
+
/** 无效 GPS 时的兜底中心点 [lng, lat] */
|
|
10621
|
+
const DEFAULT_GPS_CENTER = [0, 0];
|
|
10622
|
+
/** 无 map_width/map_height 时的默认 GPS 边界 [lng, lat](中心约 (0,0)) */
|
|
10616
10623
|
const DEFAULT_COORDINATES = {
|
|
10617
|
-
sw: [
|
|
10618
|
-
ne: [
|
|
10624
|
+
sw: [-225e-6, -225e-6],
|
|
10625
|
+
ne: [0.000225, 0.000225],
|
|
10619
10626
|
};
|
|
10620
10627
|
/**
|
|
10621
10628
|
* 缩放因子 - 将米转换为像素
|
|
@@ -13915,6 +13922,13 @@ var MapType;
|
|
|
13915
13922
|
*/
|
|
13916
13923
|
MapType["GEO_FENCE"] = "geo-fence";
|
|
13917
13924
|
})(MapType || (MapType = {}));
|
|
13925
|
+
var HoverType;
|
|
13926
|
+
(function (HoverType) {
|
|
13927
|
+
HoverType["Translate"] = "translate";
|
|
13928
|
+
HoverType["Scale"] = "scale";
|
|
13929
|
+
HoverType["Rotate"] = "rotate";
|
|
13930
|
+
HoverType["Delete"] = "delete";
|
|
13931
|
+
})(HoverType || (HoverType = {}));
|
|
13918
13932
|
|
|
13919
13933
|
var RealTimeDataType;
|
|
13920
13934
|
(function (RealTimeDataType) {
|
|
@@ -18066,6 +18080,8 @@ const OBSTACLE_STYLES = {
|
|
|
18066
18080
|
hoverFillColor: 'rgba(255, 90, 0, 0.4)',
|
|
18067
18081
|
lineWidth: DEFAULT_LINE_WIDTHS.OBSTACLE,
|
|
18068
18082
|
opacity: DEFAULT_OPACITIES.FULL,
|
|
18083
|
+
disabledLineColor: 'rgba(255, 90, 0, 0.4)',
|
|
18084
|
+
disabledFillColor: 'rgba(255, 90, 0, 0.1)',
|
|
18069
18085
|
};
|
|
18070
18086
|
const CHARGING_PILE_STYLES = {
|
|
18071
18087
|
lineColor: 'blue',
|
|
@@ -18547,6 +18563,38 @@ function calculateBoundaryBoundsCenter(mapData) {
|
|
|
18547
18563
|
boundaryBounds.minY + (boundaryBounds.maxY - boundaryBounds.minY) / 2,
|
|
18548
18564
|
];
|
|
18549
18565
|
}
|
|
18566
|
+
/**
|
|
18567
|
+
* 由中心点与物理尺寸(米)计算 GPS 边界 [lng, lat]
|
|
18568
|
+
*/
|
|
18569
|
+
function computeGpsBoundsFromCenterAndSize(centerLng, centerLat, mapWidthMeters, mapHeightMeters) {
|
|
18570
|
+
const METERS_PER_DEGREE_LAT = EQUATORIAL_CIRCUMFERENCE / 360;
|
|
18571
|
+
const METERS_PER_DEGREE_LNG = METERS_PER_DEGREE_LAT * Math.cos((centerLat * Math.PI) / 180);
|
|
18572
|
+
const swLat = centerLat - mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
|
|
18573
|
+
const swLng = centerLng - mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
|
|
18574
|
+
const neLat = centerLat + mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
|
|
18575
|
+
const neLng = centerLng + mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
|
|
18576
|
+
return {
|
|
18577
|
+
sw: [swLng, swLat],
|
|
18578
|
+
ne: [neLng, neLat],
|
|
18579
|
+
};
|
|
18580
|
+
}
|
|
18581
|
+
/**
|
|
18582
|
+
* GPS 无效时:中心 (0,0) + JSON 的 map_width/map_height;无尺寸则用 DEFAULT_COORDINATES
|
|
18583
|
+
*/
|
|
18584
|
+
function getFallbackGpsBounds(mapData) {
|
|
18585
|
+
const [centerLng, centerLat] = DEFAULT_GPS_CENTER;
|
|
18586
|
+
const hasMapSize = typeof mapData.map_width === 'number' &&
|
|
18587
|
+
typeof mapData.map_height === 'number' &&
|
|
18588
|
+
mapData.map_width > 0 &&
|
|
18589
|
+
mapData.map_height > 0;
|
|
18590
|
+
if (hasMapSize) {
|
|
18591
|
+
return computeGpsBoundsFromCenterAndSize(centerLng, centerLat, mapData.map_width, mapData.map_height);
|
|
18592
|
+
}
|
|
18593
|
+
return {
|
|
18594
|
+
sw: [...DEFAULT_COORDINATES.sw],
|
|
18595
|
+
ne: [...DEFAULT_COORDINATES.ne],
|
|
18596
|
+
};
|
|
18597
|
+
}
|
|
18550
18598
|
/**
|
|
18551
18599
|
* 检查GPS坐标是否有效
|
|
18552
18600
|
*/
|
|
@@ -18582,10 +18630,10 @@ function estimateGpsFromMapBounds(mapData) {
|
|
|
18582
18630
|
const mapWidthMeters = maxXMeters - minXMeters;
|
|
18583
18631
|
const mapHeightMeters = maxYMeters - minYMeters;
|
|
18584
18632
|
// 凤凰岭的GPS坐标作为地图中心点
|
|
18585
|
-
const centerLat = 40.103;
|
|
18586
|
-
const centerLng = 116.072222;
|
|
18587
|
-
|
|
18588
|
-
|
|
18633
|
+
// const centerLat = 40.103;
|
|
18634
|
+
// const centerLng = 116.072222;
|
|
18635
|
+
const centerLat = 0;
|
|
18636
|
+
const centerLng = 0;
|
|
18589
18637
|
// 精确的坐标转换常数
|
|
18590
18638
|
// 1度纬度 = 约111,320米(在地球上任何地方都基本相同)
|
|
18591
18639
|
// 1度经度 = 约111,320 * cos(纬度) 米(随纬度变化)
|
|
@@ -18651,39 +18699,44 @@ function calculateMapGpsCenter(mapData) {
|
|
|
18651
18699
|
}
|
|
18652
18700
|
}
|
|
18653
18701
|
// 如果有西南角和东北角坐标,检查其有效性并计算中心点
|
|
18654
|
-
if (
|
|
18655
|
-
|
|
18656
|
-
|
|
18657
|
-
|
|
18658
|
-
|
|
18659
|
-
|
|
18660
|
-
|
|
18661
|
-
|
|
18662
|
-
|
|
18663
|
-
|
|
18664
|
-
|
|
18665
|
-
|
|
18666
|
-
|
|
18667
|
-
|
|
18668
|
-
|
|
18669
|
-
|
|
18670
|
-
|
|
18671
|
-
|
|
18672
|
-
|
|
18673
|
-
|
|
18674
|
-
|
|
18675
|
-
}
|
|
18702
|
+
// if (
|
|
18703
|
+
// mapData.sw_gps &&
|
|
18704
|
+
// mapData.ne_gps &&
|
|
18705
|
+
// mapData.sw_gps.length >= 2 &&
|
|
18706
|
+
// mapData.ne_gps.length >= 2
|
|
18707
|
+
// ) {
|
|
18708
|
+
// const swLat = mapData.sw_gps[1];
|
|
18709
|
+
// const swLng = mapData.sw_gps[0];
|
|
18710
|
+
// const neLat = mapData.ne_gps[1];
|
|
18711
|
+
// const neLng = mapData.ne_gps[0];
|
|
18712
|
+
// // 检查边界坐标的有效性
|
|
18713
|
+
// if (isValidGpsCoordinate(swLat, swLng) && isValidGpsCoordinate(neLat, neLng)) {
|
|
18714
|
+
// return {
|
|
18715
|
+
// lat: (swLat + neLat) / 2,
|
|
18716
|
+
// lng: (swLng + neLng) / 2,
|
|
18717
|
+
// };
|
|
18718
|
+
// } else {
|
|
18719
|
+
// console.warn('sw_gps或ne_gps坐标无效:', {
|
|
18720
|
+
// sw: { lat: swLat, lng: swLng },
|
|
18721
|
+
// ne: { lat: neLat, lng: neLng },
|
|
18722
|
+
// });
|
|
18723
|
+
// }
|
|
18724
|
+
// }
|
|
18676
18725
|
// 尝试从地图几何边界估算GPS坐标
|
|
18677
|
-
const estimatedBounds = estimateGpsFromMapBounds(mapData);
|
|
18678
|
-
if (estimatedBounds) {
|
|
18679
|
-
|
|
18680
|
-
|
|
18681
|
-
|
|
18682
|
-
|
|
18683
|
-
}
|
|
18726
|
+
// const estimatedBounds = estimateGpsFromMapBounds(mapData);
|
|
18727
|
+
// if (estimatedBounds) {
|
|
18728
|
+
// // 从估算的边界计算中心点
|
|
18729
|
+
// const centerLat = (estimatedBounds.sw[1] + estimatedBounds.ne[1]) / 2;
|
|
18730
|
+
// const centerLng = (estimatedBounds.sw[0] + estimatedBounds.ne[0]) / 2;
|
|
18731
|
+
// return { lat: centerLat, lng: centerLng };
|
|
18732
|
+
// }
|
|
18733
|
+
// return {
|
|
18734
|
+
// lat: 39.9042, // 北京纬度
|
|
18735
|
+
// lng: 116.4074, // 北京经度
|
|
18736
|
+
// };
|
|
18684
18737
|
return {
|
|
18685
|
-
lat:
|
|
18686
|
-
lng:
|
|
18738
|
+
lat: DEFAULT_GPS_CENTER[1],
|
|
18739
|
+
lng: DEFAULT_GPS_CENTER[0],
|
|
18687
18740
|
};
|
|
18688
18741
|
}
|
|
18689
18742
|
// 旋转坐标点
|
|
@@ -18713,50 +18766,22 @@ const getValidGpsBounds = (mapData, rotation = 0) => {
|
|
|
18713
18766
|
mapData.map_width > 0 &&
|
|
18714
18767
|
mapData.map_height > 0) {
|
|
18715
18768
|
const [centerLng, centerLat] = mapData.center_gps;
|
|
18716
|
-
|
|
18717
|
-
|
|
18718
|
-
|
|
18719
|
-
|
|
18720
|
-
|
|
18721
|
-
|
|
18722
|
-
|
|
18723
|
-
|
|
18724
|
-
|
|
18725
|
-
|
|
18726
|
-
|
|
18727
|
-
|
|
18728
|
-
|
|
18729
|
-
const neLat = centerLat + mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
|
|
18730
|
-
const neLng = centerLng + mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
|
|
18731
|
-
bounds = {
|
|
18732
|
-
sw: [swLng, swLat],
|
|
18733
|
-
ne: [neLng, neLat],
|
|
18734
|
-
};
|
|
18735
|
-
}
|
|
18736
|
-
else if (isValidGpsCoordinate(mapData.sw_gps?.[1], mapData.sw_gps?.[0]) &&
|
|
18737
|
-
isValidGpsCoordinate(mapData.ne_gps?.[1], mapData.ne_gps?.[0])) {
|
|
18738
|
-
// 降级方案:使用地图数据中的GPS坐标
|
|
18739
|
-
console.warn('center_gps 或 map_width/map_height 不可用,使用 sw_gps 和 ne_gps');
|
|
18740
|
-
bounds = {
|
|
18741
|
-
sw: mapData.sw_gps,
|
|
18742
|
-
ne: mapData.ne_gps,
|
|
18743
|
-
};
|
|
18744
|
-
}
|
|
18769
|
+
bounds = computeGpsBoundsFromCenterAndSize(centerLng, centerLat, mapData.map_width, mapData.map_height);
|
|
18770
|
+
}
|
|
18771
|
+
// else if (
|
|
18772
|
+
// isValidGpsCoordinate(mapData.sw_gps?.[1], mapData.sw_gps?.[0]) &&
|
|
18773
|
+
// isValidGpsCoordinate(mapData.ne_gps?.[1], mapData.ne_gps?.[0])
|
|
18774
|
+
// ) {
|
|
18775
|
+
// // 降级方案:使用地图数据中的GPS坐标
|
|
18776
|
+
// console.warn('center_gps 或 map_width/map_height 不可用,使用 sw_gps 和 ne_gps');
|
|
18777
|
+
// bounds = {
|
|
18778
|
+
// sw: mapData.sw_gps,
|
|
18779
|
+
// ne: mapData.ne_gps,
|
|
18780
|
+
// };
|
|
18781
|
+
// }
|
|
18745
18782
|
else {
|
|
18746
|
-
|
|
18747
|
-
|
|
18748
|
-
if (sw && ne) {
|
|
18749
|
-
console.warn('GPS坐标无效,使用地图几何数据估算边界:', sw, ne);
|
|
18750
|
-
bounds = {
|
|
18751
|
-
sw: [sw[0], sw[1]],
|
|
18752
|
-
ne: [ne[0], ne[1]],
|
|
18753
|
-
};
|
|
18754
|
-
}
|
|
18755
|
-
else {
|
|
18756
|
-
// 最后的fallback:使用默认坐标
|
|
18757
|
-
console.warn('无法获取有效的GPS边界,使用默认坐标');
|
|
18758
|
-
bounds = DEFAULT_COORDINATES;
|
|
18759
|
-
}
|
|
18783
|
+
console.warn('无法获取有效的GPS边界,使用 (0,0) 中心 + map_width/map_height 或 DEFAULT_COORDINATES');
|
|
18784
|
+
bounds = getFallbackGpsBounds(mapData);
|
|
18760
18785
|
}
|
|
18761
18786
|
// 如果有旋转角度,计算旋转后的边界
|
|
18762
18787
|
if (rotation !== 0) {
|
|
@@ -19189,7 +19214,7 @@ function getMowerImage(positonConfig, mowerIconConfig, modelType, hasEdger) {
|
|
|
19189
19214
|
const mowerImage = mowerIconConfig?.mapImgUrl || getMowerImageByModal(model, hasEdger);
|
|
19190
19215
|
const disabledImage = mowerIconConfig?.mapDisabledUrl || getDisabledMowerImageByModal(model);
|
|
19191
19216
|
const noPositionImage = mowerIconConfig?.mapNoPositionUrl || getNoPositionMowerImageByModal(model);
|
|
19192
|
-
const positonOutOfRange = isOutOfRange(positonConfig);
|
|
19217
|
+
// const positonOutOfRange = isOutOfRange(positonConfig);
|
|
19193
19218
|
const positionValid = isInvalidPosition(positonConfig);
|
|
19194
19219
|
const isOffLine = state === RobotStatus.DISCONNECTED;
|
|
19195
19220
|
const isInPark = state === RobotStatus.CHARGING || state === RobotStatus.PARKED;
|
|
@@ -19199,7 +19224,7 @@ function getMowerImage(positonConfig, mowerIconConfig, modelType, hasEdger) {
|
|
|
19199
19224
|
if (isInPark) {
|
|
19200
19225
|
return mowerImage;
|
|
19201
19226
|
}
|
|
19202
|
-
if (positionValid
|
|
19227
|
+
if (positionValid) {
|
|
19203
19228
|
return noPositionImage;
|
|
19204
19229
|
}
|
|
19205
19230
|
else {
|
|
@@ -19223,12 +19248,6 @@ function isInvalidPosition(positonConfig) {
|
|
|
19223
19248
|
isNoPosture(positonConfig.postureY) &&
|
|
19224
19249
|
isNoPosture(positonConfig.postureTheta));
|
|
19225
19250
|
}
|
|
19226
|
-
function isOutOfRange(positonConfig) {
|
|
19227
|
-
return (positonConfig.postureX != null &&
|
|
19228
|
-
Math.abs(positonConfig.postureX) > 1000 &&
|
|
19229
|
-
positonConfig.postureY != null &&
|
|
19230
|
-
Math.abs(positonConfig.postureY) > 1000);
|
|
19231
|
-
}
|
|
19232
19251
|
function getMindistanceByModel(modelType) {
|
|
19233
19252
|
if (isIModel(modelType)) {
|
|
19234
19253
|
return I_MIN_DISTANCE;
|
|
@@ -19525,8 +19544,16 @@ function formatTime(date) {
|
|
|
19525
19544
|
* @param date 目标日期
|
|
19526
19545
|
* @returns 星期几的英文缩写
|
|
19527
19546
|
*/
|
|
19528
|
-
function getWeekdayAbbr(date) {
|
|
19529
|
-
const weekdays = [
|
|
19547
|
+
function getWeekdayAbbr(date, locale) {
|
|
19548
|
+
const weekdays = [
|
|
19549
|
+
locale?.['map.renderer.weekday.sun'] || 'Sun',
|
|
19550
|
+
locale?.['map.renderer.weekday.mon'] || 'Mon',
|
|
19551
|
+
locale?.['map.renderer.weekday.tue'] || 'Tue',
|
|
19552
|
+
locale?.['map.renderer.weekday.wed'] || 'Wed',
|
|
19553
|
+
locale?.['map.renderer.weekday.thu'] || 'Thu',
|
|
19554
|
+
locale?.['map.renderer.weekday.fri'] || 'Fri',
|
|
19555
|
+
locale?.['map.renderer.weekday.sat'] || 'Sat'
|
|
19556
|
+
];
|
|
19530
19557
|
return weekdays[date.getDay()];
|
|
19531
19558
|
}
|
|
19532
19559
|
/**
|
|
@@ -19540,7 +19567,7 @@ function getWeekdayAbbr(date) {
|
|
|
19540
19567
|
* @param timestamp 时间戳(秒)
|
|
19541
19568
|
* @returns 格式化后的日期文本
|
|
19542
19569
|
*/
|
|
19543
|
-
function formatBoundaryDateText(timestamp) {
|
|
19570
|
+
function formatBoundaryDateText(timestamp, locale) {
|
|
19544
19571
|
if (!timestamp || timestamp <= 0) {
|
|
19545
19572
|
return '-';
|
|
19546
19573
|
}
|
|
@@ -19548,15 +19575,15 @@ function formatBoundaryDateText(timestamp) {
|
|
|
19548
19575
|
const timeStr = formatTime(date);
|
|
19549
19576
|
// 判断是否为今天
|
|
19550
19577
|
if (isToday(date)) {
|
|
19551
|
-
return
|
|
19578
|
+
return `${locale?.['map.renderer.today'] || 'Today'} ${timeStr}`;
|
|
19552
19579
|
}
|
|
19553
19580
|
// 判断是否为昨天
|
|
19554
19581
|
if (isYesterday(date)) {
|
|
19555
|
-
return
|
|
19582
|
+
return `${locale?.['map.renderer.yesterday'] || 'Yesterday'} ${timeStr}`;
|
|
19556
19583
|
}
|
|
19557
19584
|
// 判断是否为本周内
|
|
19558
19585
|
if (isThisWeek(date)) {
|
|
19559
|
-
const weekdayAbbr = getWeekdayAbbr(date);
|
|
19586
|
+
const weekdayAbbr = getWeekdayAbbr(date, locale);
|
|
19560
19587
|
return `${weekdayAbbr} ${timeStr}`;
|
|
19561
19588
|
}
|
|
19562
19589
|
// 其他情况显示完整日期
|
|
@@ -20048,12 +20075,12 @@ function styleInject(css, ref) {
|
|
|
20048
20075
|
}
|
|
20049
20076
|
}
|
|
20050
20077
|
|
|
20051
|
-
var css_248z$
|
|
20052
|
-
var styles$
|
|
20053
|
-
styleInject(css_248z$
|
|
20078
|
+
var css_248z$9 = ".index-module_edit__-5VvX {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: auto;\n z-index: 1000;\n cursor: move;\n touch-action: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n.index-module_edit__-5VvX .index-module_border__JdNLM {\n position: absolute;\n inset: -10px;\n border: 2px dashed rgb(241, 102, 41);\n border-radius: 2px;\n pointer-events: none;\n}\n.index-module_edit__-5VvX .index-module_drag__uvdPG {\n position: absolute;\n inset: -10px;\n border-radius: 2px;\n}\n.index-module_edit__-5VvX .index-module_rotate__H-KIZ {\n position: absolute;\n top: -20px;\n right: -20px;\n width: 20px;\n height: 20px;\n cursor: grab;\n z-index: 1001;\n pointer-events: auto;\n}\n.index-module_edit__-5VvX .index-module_move__mZF8s {\n position: absolute;\n bottom: -20px;\n left: -20px;\n width: 20px;\n height: 20px;\n cursor: move;\n z-index: 1001;\n pointer-events: auto;\n}";
|
|
20079
|
+
var styles$9 = {"edit":"index-module_edit__-5VvX","border":"index-module_border__JdNLM","drag":"index-module_drag__uvdPG","rotate":"index-module_rotate__H-KIZ","move":"index-module_move__mZF8s"};
|
|
20080
|
+
styleInject(css_248z$9);
|
|
20054
20081
|
|
|
20055
20082
|
const RotateHandle = ({ onRotateStart, isRotating }) => {
|
|
20056
|
-
return (jsx("div", { className: styles$
|
|
20083
|
+
return (jsx("div", { className: styles$9.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
|
|
20057
20084
|
};
|
|
20058
20085
|
|
|
20059
20086
|
/**
|
|
@@ -20130,7 +20157,7 @@ const DragHandle = ({ onDragStart, isDragging }) => {
|
|
|
20130
20157
|
if (!isMobileDevice()) {
|
|
20131
20158
|
return null;
|
|
20132
20159
|
}
|
|
20133
|
-
return (jsx("div", { className: styles$
|
|
20160
|
+
return (jsx("div", { className: styles$9.move, onMouseDown: (e) => {
|
|
20134
20161
|
onDragStart(e);
|
|
20135
20162
|
}, onTouchStart: (e) => onDragStart(e), onMouseUp: (e) => {
|
|
20136
20163
|
// onDragEnd(e);
|
|
@@ -20162,7 +20189,7 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
|
|
|
20162
20189
|
if (!isDragMap) {
|
|
20163
20190
|
return null;
|
|
20164
20191
|
}
|
|
20165
|
-
return (jsxs("div", { ref: containerRef, className: styles$
|
|
20192
|
+
return (jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$9.border }), canRotateMap && jsx(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsx("div", { className: styles$9.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
|
|
20166
20193
|
};
|
|
20167
20194
|
|
|
20168
20195
|
const SvgEditContext = createContext({
|
|
@@ -22678,13 +22705,17 @@ const CommonContext = createContext({
|
|
|
22678
22705
|
overlayScale: 1,
|
|
22679
22706
|
showStraddleBoundaryBorder: true,
|
|
22680
22707
|
googleMapStaticApiKey: '',
|
|
22708
|
+
googleMapStaticUrlSigningSecret: '',
|
|
22709
|
+
locale: {},
|
|
22710
|
+
signGoogleStaticMapUrl: undefined,
|
|
22681
22711
|
onH5FirstSelectObstaclePoint: undefined,
|
|
22712
|
+
channelClipPathId: '',
|
|
22682
22713
|
});
|
|
22683
22714
|
const CommonContextProvider = CommonContext.Provider;
|
|
22684
22715
|
const useCommonContext = () => useContext(CommonContext);
|
|
22685
22716
|
|
|
22686
22717
|
const ChannelClipPath = React__default.memo(() => {
|
|
22687
|
-
const { svgViewBox,
|
|
22718
|
+
const { svgViewBox, channelClipPathId } = useCommonContext();
|
|
22688
22719
|
const { svgElementDatas } = useSvgEditContext();
|
|
22689
22720
|
const boundaryData = svgElementDatas?.[DataType.BOUNDARY] || [];
|
|
22690
22721
|
const [minX, minY, maxX, maxY] = useMemo(() => {
|
|
@@ -22863,7 +22894,7 @@ const ChannelClipPath = React__default.memo(() => {
|
|
|
22863
22894
|
});
|
|
22864
22895
|
return baseD;
|
|
22865
22896
|
}, [boundaryData, minX, minY, maxX, maxY]);
|
|
22866
|
-
return (jsx("defs", { children: jsx("clipPath", { id:
|
|
22897
|
+
return (jsx("defs", { children: jsx("clipPath", { id: channelClipPathId, fillRule: "evenodd", children: jsx("path", { d: d }) }) }));
|
|
22867
22898
|
});
|
|
22868
22899
|
|
|
22869
22900
|
/**
|
|
@@ -23159,11 +23190,440 @@ const MapEditContext = createContext({
|
|
|
23159
23190
|
const MapEditContextProvider = MapEditContext.Provider;
|
|
23160
23191
|
const useMapEditContext = () => useContext(MapEditContext);
|
|
23161
23192
|
|
|
23193
|
+
/**
|
|
23194
|
+
* Google Maps Static API 数字签名
|
|
23195
|
+
* @see https://developers.google.com/maps/documentation/maps-static/digital-signature
|
|
23196
|
+
*
|
|
23197
|
+
* 使用纯 JS HMAC-SHA1,兼容 H5 WebView / 非 HTTPS 等无 crypto.subtle 的环境。
|
|
23198
|
+
*/
|
|
23199
|
+
/// <reference lib="dom" />
|
|
23200
|
+
function removeWebSafe(encoded) {
|
|
23201
|
+
return encoded.replace(/-/g, '+').replace(/_/g, '/');
|
|
23202
|
+
}
|
|
23203
|
+
function makeWebSafe(encoded) {
|
|
23204
|
+
return encoded.replace(/\+/g, '-').replace(/\//g, '_');
|
|
23205
|
+
}
|
|
23206
|
+
function decodeUrlSigningSecret(secret) {
|
|
23207
|
+
let base64 = removeWebSafe(secret);
|
|
23208
|
+
const remainder = base64.length % 4;
|
|
23209
|
+
if (remainder) {
|
|
23210
|
+
base64 += '='.repeat(4 - remainder);
|
|
23211
|
+
}
|
|
23212
|
+
const binary = globalThis.atob(base64);
|
|
23213
|
+
const bytes = new Uint8Array(binary.length);
|
|
23214
|
+
for (let i = 0; i < binary.length; i++) {
|
|
23215
|
+
bytes[i] = binary.charCodeAt(i);
|
|
23216
|
+
}
|
|
23217
|
+
return bytes;
|
|
23218
|
+
}
|
|
23219
|
+
function bytesToWebSafeBase64(bytes) {
|
|
23220
|
+
let binary = '';
|
|
23221
|
+
for (let i = 0; i < bytes.length; i++) {
|
|
23222
|
+
binary += String.fromCharCode(bytes[i]);
|
|
23223
|
+
}
|
|
23224
|
+
return makeWebSafe(globalThis.btoa(binary));
|
|
23225
|
+
}
|
|
23226
|
+
function utf8Encode(text) {
|
|
23227
|
+
if (typeof globalThis.TextEncoder !== 'undefined') {
|
|
23228
|
+
return new globalThis.TextEncoder().encode(text);
|
|
23229
|
+
}
|
|
23230
|
+
// Static Map URL 仅含 ASCII;兼容无 TextEncoder 的旧 WebView / Jest jsdom
|
|
23231
|
+
const bytes = new Uint8Array(text.length);
|
|
23232
|
+
for (let i = 0; i < text.length; i++) {
|
|
23233
|
+
const code = text.charCodeAt(i);
|
|
23234
|
+
if (code > 127) {
|
|
23235
|
+
throw new Error('signGoogleStaticMapUrl: non-ASCII URL is not supported in this environment');
|
|
23236
|
+
}
|
|
23237
|
+
bytes[i] = code;
|
|
23238
|
+
}
|
|
23239
|
+
return bytes;
|
|
23240
|
+
}
|
|
23241
|
+
function concatBytes(...parts) {
|
|
23242
|
+
const total = parts.reduce((sum, part) => sum + part.length, 0);
|
|
23243
|
+
const out = new Uint8Array(total);
|
|
23244
|
+
let offset = 0;
|
|
23245
|
+
for (const part of parts) {
|
|
23246
|
+
out.set(part, offset);
|
|
23247
|
+
offset += part.length;
|
|
23248
|
+
}
|
|
23249
|
+
return out;
|
|
23250
|
+
}
|
|
23251
|
+
function leftRotate(value, amount) {
|
|
23252
|
+
return ((value << amount) | (value >>> (32 - amount))) >>> 0;
|
|
23253
|
+
}
|
|
23254
|
+
function sha1(message) {
|
|
23255
|
+
const originalLength = message.length;
|
|
23256
|
+
const bitLength = originalLength * 8;
|
|
23257
|
+
const paddedLength = Math.ceil((originalLength + 9) / 64) * 64;
|
|
23258
|
+
const padded = new Uint8Array(paddedLength);
|
|
23259
|
+
padded.set(message);
|
|
23260
|
+
padded[originalLength] = 0x80;
|
|
23261
|
+
const view = new DataView(padded.buffer);
|
|
23262
|
+
view.setUint32(paddedLength - 4, bitLength >>> 0, false);
|
|
23263
|
+
view.setUint32(paddedLength - 8, Math.floor(bitLength / 0x100000000), false);
|
|
23264
|
+
let h0 = 0x67452301;
|
|
23265
|
+
let h1 = 0xefcdab89;
|
|
23266
|
+
let h2 = 0x98badcfe;
|
|
23267
|
+
let h3 = 0x10325476;
|
|
23268
|
+
let h4 = 0xc3d2e1f0;
|
|
23269
|
+
const w = new Uint32Array(80);
|
|
23270
|
+
for (let offset = 0; offset < paddedLength; offset += 64) {
|
|
23271
|
+
for (let i = 0; i < 16; i++) {
|
|
23272
|
+
w[i] = view.getUint32(offset + i * 4, false);
|
|
23273
|
+
}
|
|
23274
|
+
for (let i = 16; i < 80; i++) {
|
|
23275
|
+
w[i] = leftRotate(w[i - 3] ^ w[i - 8] ^ w[i - 14] ^ w[i - 16], 1);
|
|
23276
|
+
}
|
|
23277
|
+
let a = h0;
|
|
23278
|
+
let b = h1;
|
|
23279
|
+
let c = h2;
|
|
23280
|
+
let d = h3;
|
|
23281
|
+
let e = h4;
|
|
23282
|
+
for (let i = 0; i < 80; i++) {
|
|
23283
|
+
let f;
|
|
23284
|
+
let k;
|
|
23285
|
+
if (i < 20) {
|
|
23286
|
+
f = (b & c) | (~b & d);
|
|
23287
|
+
k = 0x5a827999;
|
|
23288
|
+
}
|
|
23289
|
+
else if (i < 40) {
|
|
23290
|
+
f = b ^ c ^ d;
|
|
23291
|
+
k = 0x6ed9eba1;
|
|
23292
|
+
}
|
|
23293
|
+
else if (i < 60) {
|
|
23294
|
+
f = (b & c) | (b & d) | (c & d);
|
|
23295
|
+
k = 0x8f1bbcdc;
|
|
23296
|
+
}
|
|
23297
|
+
else {
|
|
23298
|
+
f = b ^ c ^ d;
|
|
23299
|
+
k = 0xca62c1d6;
|
|
23300
|
+
}
|
|
23301
|
+
const temp = (leftRotate(a, 5) + f + e + k + w[i]) >>> 0;
|
|
23302
|
+
e = d;
|
|
23303
|
+
d = c;
|
|
23304
|
+
c = leftRotate(b, 30);
|
|
23305
|
+
b = a;
|
|
23306
|
+
a = temp;
|
|
23307
|
+
}
|
|
23308
|
+
h0 = (h0 + a) >>> 0;
|
|
23309
|
+
h1 = (h1 + b) >>> 0;
|
|
23310
|
+
h2 = (h2 + c) >>> 0;
|
|
23311
|
+
h3 = (h3 + d) >>> 0;
|
|
23312
|
+
h4 = (h4 + e) >>> 0;
|
|
23313
|
+
}
|
|
23314
|
+
const digest = new Uint8Array(20);
|
|
23315
|
+
const digestView = new DataView(digest.buffer);
|
|
23316
|
+
digestView.setUint32(0, h0, false);
|
|
23317
|
+
digestView.setUint32(4, h1, false);
|
|
23318
|
+
digestView.setUint32(8, h2, false);
|
|
23319
|
+
digestView.setUint32(12, h3, false);
|
|
23320
|
+
digestView.setUint32(16, h4, false);
|
|
23321
|
+
return digest;
|
|
23322
|
+
}
|
|
23323
|
+
function hmacSha1(key, message) {
|
|
23324
|
+
const blockSize = 64;
|
|
23325
|
+
let normalizedKey = key;
|
|
23326
|
+
if (normalizedKey.length > blockSize) {
|
|
23327
|
+
normalizedKey = sha1(normalizedKey);
|
|
23328
|
+
}
|
|
23329
|
+
const paddedKey = new Uint8Array(blockSize);
|
|
23330
|
+
paddedKey.set(normalizedKey);
|
|
23331
|
+
const innerPad = new Uint8Array(blockSize);
|
|
23332
|
+
const outerPad = new Uint8Array(blockSize);
|
|
23333
|
+
for (let i = 0; i < blockSize; i++) {
|
|
23334
|
+
innerPad[i] = paddedKey[i] ^ 0x36;
|
|
23335
|
+
outerPad[i] = paddedKey[i] ^ 0x5c;
|
|
23336
|
+
}
|
|
23337
|
+
return sha1(concatBytes(outerPad, sha1(concatBytes(innerPad, message))));
|
|
23338
|
+
}
|
|
23339
|
+
function signUrlToSign(urlToSign, urlSigningSecret) {
|
|
23340
|
+
const keyBytes = decodeUrlSigningSecret(urlSigningSecret);
|
|
23341
|
+
const signatureBytes = hmacSha1(keyBytes, utf8Encode(urlToSign));
|
|
23342
|
+
return bytesToWebSafeBase64(signatureBytes);
|
|
23343
|
+
}
|
|
23344
|
+
/**
|
|
23345
|
+
* 对 Maps Static API 请求 URL 追加 `signature` 参数。
|
|
23346
|
+
* 签名内容为 pathname + search(不含 scheme/host),算法 HMAC-SHA1 + URL-safe Base64。
|
|
23347
|
+
*
|
|
23348
|
+
* @param inputUrl 完整未签名 URL(须已包含 key 等 query 参数)
|
|
23349
|
+
* @param urlSigningSecret Cloud Console「URL 签名密钥」(URL-safe Base64)
|
|
23350
|
+
*/
|
|
23351
|
+
function signGoogleStaticMapUrlSync(inputUrl, urlSigningSecret) {
|
|
23352
|
+
if (!inputUrl || !urlSigningSecret) {
|
|
23353
|
+
throw new Error('signGoogleStaticMapUrl: inputUrl and urlSigningSecret are required');
|
|
23354
|
+
}
|
|
23355
|
+
const url = new globalThis.URL(inputUrl);
|
|
23356
|
+
url.searchParams.delete('signature');
|
|
23357
|
+
const urlToSign = `${url.pathname}${url.search}`;
|
|
23358
|
+
const signature = signUrlToSign(urlToSign, urlSigningSecret);
|
|
23359
|
+
return `${url.origin}${urlToSign}&signature=${signature}`;
|
|
23360
|
+
}
|
|
23361
|
+
/** 异步包装,便于与宿主 signGoogleStaticMapUrl 回调统一 Promise 接口 */
|
|
23362
|
+
async function signGoogleStaticMapUrl(inputUrl, urlSigningSecret) {
|
|
23363
|
+
return signGoogleStaticMapUrlSync(inputUrl, urlSigningSecret);
|
|
23364
|
+
}
|
|
23365
|
+
|
|
23162
23366
|
var chargingPileImage = "data:image/png;base64,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";
|
|
23163
23367
|
|
|
23164
|
-
const
|
|
23368
|
+
const DEFAULT_SCREEN_PADDING = 50;
|
|
23369
|
+
function normalizeScreenPadding(padding, defaultValue = DEFAULT_SCREEN_PADDING) {
|
|
23370
|
+
if (padding == null) {
|
|
23371
|
+
return {
|
|
23372
|
+
top: defaultValue,
|
|
23373
|
+
right: defaultValue,
|
|
23374
|
+
bottom: defaultValue,
|
|
23375
|
+
left: defaultValue,
|
|
23376
|
+
};
|
|
23377
|
+
}
|
|
23378
|
+
if (typeof padding === 'number') {
|
|
23379
|
+
return { top: padding, right: padding, bottom: padding, left: padding };
|
|
23380
|
+
}
|
|
23381
|
+
if (padding.length === 2) {
|
|
23382
|
+
const [vertical, horizontal] = padding;
|
|
23383
|
+
return { top: vertical, right: horizontal, bottom: vertical, left: horizontal };
|
|
23384
|
+
}
|
|
23385
|
+
if (padding.length === 3) {
|
|
23386
|
+
const [top, horizontal, bottom] = padding;
|
|
23387
|
+
return { top, right: horizontal, bottom, left: horizontal };
|
|
23388
|
+
}
|
|
23389
|
+
const [top, right, bottom, left] = padding;
|
|
23390
|
+
return { top, right, bottom, left };
|
|
23391
|
+
}
|
|
23392
|
+
function isZeroScreenPadding(padding) {
|
|
23393
|
+
return padding.top === 0 && padding.right === 0 && padding.bottom === 0 && padding.left === 0;
|
|
23394
|
+
}
|
|
23395
|
+
|
|
23396
|
+
/** 拖拽超过该像素阈值时视为平移,而非点击 */
|
|
23397
|
+
const PAN_CLICK_THRESHOLD_PX = 5;
|
|
23398
|
+
/**
|
|
23399
|
+
* 根据地图包围盒 + padding 计算「内容 viewBox」
|
|
23400
|
+
* 用于 ChannelClipPath 裁剪,padding 为 SVG 坐标系单位
|
|
23401
|
+
*/
|
|
23402
|
+
function boundsToContentViewBox(bounds, padding) {
|
|
23403
|
+
if (!Number.isFinite(bounds.minX) || !Number.isFinite(bounds.maxX)) {
|
|
23404
|
+
return { x: 0, y: 0, width: 100, height: 100 };
|
|
23405
|
+
}
|
|
23406
|
+
const width = Math.max(bounds.maxX - bounds.minX + padding * 2, 1);
|
|
23407
|
+
const height = Math.max(bounds.maxY - bounds.minY + padding * 2, 1);
|
|
23408
|
+
return {
|
|
23409
|
+
x: bounds.minX - padding,
|
|
23410
|
+
y: bounds.minY - padding,
|
|
23411
|
+
width,
|
|
23412
|
+
height,
|
|
23413
|
+
};
|
|
23414
|
+
}
|
|
23415
|
+
/**
|
|
23416
|
+
* 在固定容器宽高比下,计算 fit 的 viewBox(等价于 SVG preserveAspectRatio="meet")
|
|
23417
|
+
*
|
|
23418
|
+
* 若内容与容器比例不一致,会在 SVG 坐标系中扩展 viewBox 的宽或高,形成 letterbox 区域
|
|
23419
|
+
*/
|
|
23420
|
+
function computeFitViewBoxToContainer(content, containerWidth, containerHeight) {
|
|
23421
|
+
const containerAspect = containerWidth / containerHeight;
|
|
23422
|
+
const contentAspect = content.width / content.height;
|
|
23423
|
+
// 内容更「宽」:扩展 viewBox 高度,上下留白
|
|
23424
|
+
if (contentAspect > containerAspect) {
|
|
23425
|
+
const height = content.width / containerAspect;
|
|
23426
|
+
return {
|
|
23427
|
+
x: content.x,
|
|
23428
|
+
y: content.y - (height - content.height) / 2,
|
|
23429
|
+
width: content.width,
|
|
23430
|
+
height,
|
|
23431
|
+
};
|
|
23432
|
+
}
|
|
23433
|
+
// 内容更「高」:扩展 viewBox 宽度,左右留白
|
|
23434
|
+
const width = content.height * containerAspect;
|
|
23435
|
+
return {
|
|
23436
|
+
x: content.x - (width - content.width) / 2,
|
|
23437
|
+
y: content.y,
|
|
23438
|
+
width,
|
|
23439
|
+
height: content.height,
|
|
23440
|
+
};
|
|
23441
|
+
}
|
|
23442
|
+
/**
|
|
23443
|
+
* 计算默认 fit viewBox
|
|
23444
|
+
*
|
|
23445
|
+
* @param screenPadding 容器四边留出的屏幕边距(px),语法同 CSS padding
|
|
23446
|
+
*/
|
|
23447
|
+
function computeFitViewBox(content, containerWidth, containerHeight, screenPadding = 0) {
|
|
23448
|
+
const baseFit = computeFitViewBoxToContainer(content, containerWidth, containerHeight);
|
|
23449
|
+
const pad = normalizeScreenPadding(screenPadding, 0);
|
|
23450
|
+
if (isZeroScreenPadding(pad)) {
|
|
23451
|
+
return baseFit;
|
|
23452
|
+
}
|
|
23453
|
+
const innerWidth = Math.max(containerWidth - pad.left - pad.right, 1);
|
|
23454
|
+
const innerHeight = Math.max(containerHeight - pad.top - pad.bottom, 1);
|
|
23455
|
+
const scaleX = innerWidth / containerWidth;
|
|
23456
|
+
const scaleY = innerHeight / containerHeight;
|
|
23457
|
+
const scale = Math.min(scaleX, scaleY);
|
|
23458
|
+
if (!Number.isFinite(scale) || scale <= 0 || scale >= 1) {
|
|
23459
|
+
return baseFit;
|
|
23460
|
+
}
|
|
23461
|
+
const newWidth = baseFit.width / scale;
|
|
23462
|
+
const newHeight = baseFit.height / scale;
|
|
23463
|
+
const centerX = baseFit.x + baseFit.width / 2;
|
|
23464
|
+
const centerY = baseFit.y + baseFit.height / 2;
|
|
23465
|
+
const offsetX = ((pad.left - pad.right) / 2) * (newWidth / containerWidth);
|
|
23466
|
+
const offsetY = ((pad.top - pad.bottom) / 2) * (newHeight / containerHeight);
|
|
23467
|
+
return {
|
|
23468
|
+
x: centerX - newWidth / 2 + offsetX,
|
|
23469
|
+
y: centerY - newHeight / 2 + offsetY,
|
|
23470
|
+
width: newWidth,
|
|
23471
|
+
height: newHeight,
|
|
23472
|
+
};
|
|
23473
|
+
}
|
|
23474
|
+
function viewBoxToString(viewBox) {
|
|
23475
|
+
return `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`;
|
|
23476
|
+
}
|
|
23477
|
+
/** SVG preserveAspectRatio="xMidYMid meet" 下的实际缩放比(地图单位 → 屏幕 px) */
|
|
23478
|
+
function getViewBoxMeetScale(viewBox, containerWidth, containerHeight) {
|
|
23479
|
+
return Math.min(containerWidth / viewBox.width, containerHeight / viewBox.height);
|
|
23480
|
+
}
|
|
23481
|
+
/** meet 模式下 SVG 内容相对容器左上角的 letterbox 偏移及缩放比 */
|
|
23482
|
+
function getViewBoxMeetOffset(viewBox, containerWidth, containerHeight) {
|
|
23483
|
+
const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
|
|
23484
|
+
return {
|
|
23485
|
+
x: (containerWidth - viewBox.width * scale) / 2,
|
|
23486
|
+
y: (containerHeight - viewBox.height * scale) / 2,
|
|
23487
|
+
scale,
|
|
23488
|
+
};
|
|
23489
|
+
}
|
|
23490
|
+
/** 将屏幕坐标绕指定中心旋转(度,顺时针) */
|
|
23491
|
+
function rotatePointAround(x, y, centerX, centerY, rotationDeg) {
|
|
23492
|
+
if (rotationDeg === 0)
|
|
23493
|
+
return { x, y };
|
|
23494
|
+
const rad = (rotationDeg * Math.PI) / 180;
|
|
23495
|
+
const cos = Math.cos(rad);
|
|
23496
|
+
const sin = Math.sin(rad);
|
|
23497
|
+
const dx = x - centerX;
|
|
23498
|
+
const dy = y - centerY;
|
|
23499
|
+
return {
|
|
23500
|
+
x: centerX + dx * cos - dy * sin,
|
|
23501
|
+
y: centerY + dx * sin + dy * cos,
|
|
23502
|
+
};
|
|
23503
|
+
}
|
|
23504
|
+
/** 在地图坐标系内绕 viewBox 中心旋转(与 SVG transform="rotate(deg, cx, cy)" 一致) */
|
|
23505
|
+
function rotateMapPointAroundViewBoxCenter(mapX, mapY, viewBox, rotationDeg) {
|
|
23506
|
+
if (rotationDeg === 0)
|
|
23507
|
+
return { x: mapX, y: mapY };
|
|
23508
|
+
const cx = viewBox.x + viewBox.width / 2;
|
|
23509
|
+
const cy = viewBox.y + viewBox.height / 2;
|
|
23510
|
+
return rotatePointAround(mapX, mapY, cx, cy, rotationDeg);
|
|
23511
|
+
}
|
|
23512
|
+
function getViewBoxCenter(viewBox) {
|
|
23513
|
+
return {
|
|
23514
|
+
x: viewBox.x + viewBox.width / 2,
|
|
23515
|
+
y: viewBox.y + viewBox.height / 2,
|
|
23516
|
+
};
|
|
23517
|
+
}
|
|
23518
|
+
/**
|
|
23519
|
+
* 将地图坐标转换为 HTML overlay 的定位百分比
|
|
23520
|
+
* 需与 SVG viewBox + preserveAspectRatio="meet" 的渲染规则一致
|
|
23521
|
+
*
|
|
23522
|
+
* @returns leftPct / topPct — 相对容器宽高的百分比,配合 translate(-50%, -50%) 居中
|
|
23523
|
+
*/
|
|
23524
|
+
function mapPointToContainerPercent(mapX, mapY, viewBox, containerWidth, containerHeight, mapRotationDeg = 0) {
|
|
23525
|
+
const { x: offsetX, y: offsetY, scale } = getViewBoxMeetOffset(viewBox, containerWidth, containerHeight);
|
|
23526
|
+
const { x: projectedX, y: projectedY } = rotateMapPointAroundViewBoxCenter(mapX, mapY, viewBox, mapRotationDeg);
|
|
23527
|
+
const screenX = offsetX + (projectedX - viewBox.x) * scale;
|
|
23528
|
+
const screenY = offsetY + (projectedY - viewBox.y) * scale;
|
|
23529
|
+
return {
|
|
23530
|
+
leftPct: (screenX / containerWidth) * 100,
|
|
23531
|
+
topPct: (screenY / containerHeight) * 100,
|
|
23532
|
+
};
|
|
23533
|
+
}
|
|
23534
|
+
/** 计算多边形包围盒在当前视口下的屏幕宽度(px) */
|
|
23535
|
+
function computePolygonScreenWidthPx(points, viewBox, containerWidth, containerHeight) {
|
|
23536
|
+
const valid = points.filter((point) => point.length >= 2);
|
|
23537
|
+
if (valid.length === 0)
|
|
23538
|
+
return 0;
|
|
23539
|
+
let minX = Infinity;
|
|
23540
|
+
let maxX = -Infinity;
|
|
23541
|
+
for (const [x] of valid) {
|
|
23542
|
+
minX = Math.min(minX, x);
|
|
23543
|
+
maxX = Math.max(maxX, x);
|
|
23544
|
+
}
|
|
23545
|
+
const mapWidth = maxX - minX;
|
|
23546
|
+
if (!Number.isFinite(mapWidth) || mapWidth <= 0)
|
|
23547
|
+
return 0;
|
|
23548
|
+
const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
|
|
23549
|
+
return mapWidth * scale;
|
|
23550
|
+
}
|
|
23551
|
+
function scaleStrokeWidthForViewBox(baseStrokeWidth, viewBox, fitViewBox, options) {
|
|
23552
|
+
const { containerWidth, containerHeight, minScreenStrokePx = 2 } = options;
|
|
23553
|
+
const meetScale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
|
|
23554
|
+
const fitMeetScale = getViewBoxMeetScale(fitViewBox, containerWidth, containerHeight);
|
|
23555
|
+
if (meetScale <= 0 || fitMeetScale <= 0 || !Number.isFinite(baseStrokeWidth)) {
|
|
23556
|
+
return baseStrokeWidth;
|
|
23557
|
+
}
|
|
23558
|
+
const targetScreenPx = Math.max(baseStrokeWidth * fitMeetScale, minScreenStrokePx);
|
|
23559
|
+
return targetScreenPx / meetScale;
|
|
23560
|
+
}
|
|
23561
|
+
/** 屏幕拖拽像素 → viewBox 坐标增量(与 mapPointToContainerPercent 互逆,供 applyPan 使用) */
|
|
23562
|
+
function containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, viewBox, containerWidth, containerHeight, mapRotationDeg = 0) {
|
|
23563
|
+
const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
|
|
23564
|
+
if (mapRotationDeg === 0) {
|
|
23565
|
+
return {
|
|
23566
|
+
dx: deltaXPx / scale,
|
|
23567
|
+
dy: deltaYPx / scale,
|
|
23568
|
+
};
|
|
23569
|
+
}
|
|
23570
|
+
// 地图在屏幕上旋转了 mapRotationDeg,将屏幕位移矢量逆旋转后再换算为 viewBox 增量
|
|
23571
|
+
const rad = (-mapRotationDeg * Math.PI) / 180;
|
|
23572
|
+
const cos = Math.cos(rad);
|
|
23573
|
+
const sin = Math.sin(rad);
|
|
23574
|
+
const mapDeltaXPx = deltaXPx * cos - deltaYPx * sin;
|
|
23575
|
+
const mapDeltaYPx = deltaXPx * sin + deltaYPx * cos;
|
|
23576
|
+
return {
|
|
23577
|
+
dx: mapDeltaXPx / scale,
|
|
23578
|
+
dy: mapDeltaYPx / scale,
|
|
23579
|
+
};
|
|
23580
|
+
}
|
|
23581
|
+
/**
|
|
23582
|
+
* 限制 viewBox 宽度在 zoom 范围内
|
|
23583
|
+
*
|
|
23584
|
+
* zoom = fitViewBox.width / viewBox.width
|
|
23585
|
+
* - zoom 越大 → viewBox 越小 → 放得越大
|
|
23586
|
+
* - minZoom=0.5 → 最多缩小到 fit 的 2 倍视野(viewBox.width 最大为 fit/0.5)
|
|
23587
|
+
* - maxZoom=4 → 最多放大 4 倍(viewBox.width 最小为 fit/4)
|
|
23588
|
+
*/
|
|
23589
|
+
function clampViewBoxWidth(width, fitViewBox, minZoom, maxZoom) {
|
|
23590
|
+
const minWidth = fitViewBox.width / maxZoom;
|
|
23591
|
+
const maxWidth = fitViewBox.width / minZoom;
|
|
23592
|
+
return Math.min(maxWidth, Math.max(minWidth, width));
|
|
23593
|
+
}
|
|
23594
|
+
/**
|
|
23595
|
+
* 以屏幕 focal 点为中心缩放 viewBox
|
|
23596
|
+
* 将容器像素坐标转换为 SVG 坐标,保持焦点下的地图点位置不变
|
|
23597
|
+
*
|
|
23598
|
+
* @param viewBox 缩放前的 viewBox
|
|
23599
|
+
* @param newWidth 缩放后的 viewBox 宽度(高度按容器宽高比推导)
|
|
23600
|
+
* @param containerWidth 容器宽度(px)
|
|
23601
|
+
* @param containerHeight 容器高度(px)
|
|
23602
|
+
* @param focalX 焦点相对容器左上角的 X(px)
|
|
23603
|
+
* @param focalY 焦点相对容器左上角的 Y(px)
|
|
23604
|
+
*/
|
|
23605
|
+
function resizeViewBoxAroundPoint(viewBox, newWidth, containerWidth, containerHeight, focalX, focalY) {
|
|
23606
|
+
const containerAspect = containerWidth / containerHeight;
|
|
23607
|
+
const newHeight = newWidth / containerAspect;
|
|
23608
|
+
const relX = focalX / containerWidth;
|
|
23609
|
+
const relY = focalY / containerHeight;
|
|
23610
|
+
const svgFocalX = viewBox.x + relX * viewBox.width;
|
|
23611
|
+
const svgFocalY = viewBox.y + relY * viewBox.height;
|
|
23612
|
+
return {
|
|
23613
|
+
x: svgFocalX - relX * newWidth,
|
|
23614
|
+
y: svgFocalY - relY * newHeight,
|
|
23615
|
+
width: newWidth,
|
|
23616
|
+
height: newHeight,
|
|
23617
|
+
};
|
|
23618
|
+
}
|
|
23619
|
+
|
|
23620
|
+
const useChargingPile = ({ viewBox, rotation = 0, viewRotationMode = 'overlay-parent', containerWidth, containerHeight, }) => {
|
|
23165
23621
|
const { svgElementDatas } = useSvgEditContext();
|
|
23166
23622
|
const { sn } = useCommonContext();
|
|
23623
|
+
const useMeetPositioning = containerWidth != null &&
|
|
23624
|
+
containerHeight != null &&
|
|
23625
|
+
containerWidth > 0 &&
|
|
23626
|
+
containerHeight > 0;
|
|
23167
23627
|
const items = useMemo(() => {
|
|
23168
23628
|
if (!svgElementDatas || !viewBox)
|
|
23169
23629
|
return [];
|
|
@@ -23179,13 +23639,26 @@ const useChargingPile = ({ viewBox, rotation = 0 }) => {
|
|
|
23179
23639
|
const direction = element?.direction || 0;
|
|
23180
23640
|
const angle = (direction * 180) / Math.PI;
|
|
23181
23641
|
const rotationDegree = 270 - angle; // 正东是正方向,需要处理下
|
|
23182
|
-
const actualRotation =
|
|
23183
|
-
|
|
23184
|
-
|
|
23185
|
-
|
|
23642
|
+
const actualRotation = viewRotationMode === 'svg-transform'
|
|
23643
|
+
? rotationDegree
|
|
23644
|
+
: rotationDegree - rotation;
|
|
23645
|
+
let leftPct;
|
|
23646
|
+
let topPct;
|
|
23647
|
+
if (useMeetPositioning) {
|
|
23648
|
+
const position = mapPointToContainerPercent(center[0], center[1], viewBox, containerWidth, containerHeight, viewRotationMode === 'svg-transform' ? rotation : 0);
|
|
23649
|
+
leftPct = position.leftPct;
|
|
23650
|
+
topPct = position.topPct;
|
|
23651
|
+
}
|
|
23652
|
+
else {
|
|
23653
|
+
const relX = (center[0] - viewBox.x) / viewBox.width;
|
|
23654
|
+
const relY = (center[1] - viewBox.y) / viewBox.height;
|
|
23655
|
+
leftPct = relX * 100;
|
|
23656
|
+
topPct = relY * 100;
|
|
23657
|
+
}
|
|
23658
|
+
if (isFinite(leftPct) && isFinite(topPct)) {
|
|
23186
23659
|
results.push({
|
|
23187
|
-
leftPct
|
|
23188
|
-
topPct
|
|
23660
|
+
leftPct,
|
|
23661
|
+
topPct,
|
|
23189
23662
|
size,
|
|
23190
23663
|
rotateDeg: actualRotation,
|
|
23191
23664
|
imageSrc: chargingPileImage,
|
|
@@ -23193,12 +23666,30 @@ const useChargingPile = ({ viewBox, rotation = 0 }) => {
|
|
|
23193
23666
|
}
|
|
23194
23667
|
}
|
|
23195
23668
|
return results;
|
|
23196
|
-
}, [
|
|
23669
|
+
}, [
|
|
23670
|
+
svgElementDatas,
|
|
23671
|
+
viewBox?.x,
|
|
23672
|
+
viewBox?.y,
|
|
23673
|
+
viewBox?.width,
|
|
23674
|
+
viewBox?.height,
|
|
23675
|
+
rotation,
|
|
23676
|
+
viewRotationMode,
|
|
23677
|
+
sn,
|
|
23678
|
+
useMeetPositioning,
|
|
23679
|
+
containerWidth,
|
|
23680
|
+
containerHeight,
|
|
23681
|
+
]);
|
|
23197
23682
|
return items;
|
|
23198
23683
|
};
|
|
23199
23684
|
|
|
23200
|
-
const CharginPile = React__default.memo(({ viewBox, rotation = 0, sizeScale = 1, sizeInSvgUnits = false, isHighlight = true, }) => {
|
|
23201
|
-
const items = useChargingPile({
|
|
23685
|
+
const CharginPile = React__default.memo(({ viewBox, rotation = 0, viewRotationMode = 'overlay-parent', containerWidth, containerHeight, sizeScale = 1, sizeInSvgUnits = false, minDisplaySizePx, isHighlight = true, }) => {
|
|
23686
|
+
const items = useChargingPile({
|
|
23687
|
+
viewBox: viewBox || null,
|
|
23688
|
+
rotation,
|
|
23689
|
+
viewRotationMode,
|
|
23690
|
+
containerWidth,
|
|
23691
|
+
containerHeight,
|
|
23692
|
+
});
|
|
23202
23693
|
const containerStyle = useMemo(() => ({
|
|
23203
23694
|
position: 'absolute',
|
|
23204
23695
|
top: 0,
|
|
@@ -23209,13 +23700,18 @@ const CharginPile = React__default.memo(({ viewBox, rotation = 0, sizeScale = 1,
|
|
|
23209
23700
|
zIndex: 750,
|
|
23210
23701
|
opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
|
|
23211
23702
|
}), [isHighlight]);
|
|
23703
|
+
const useMinPx = Boolean(sizeInSvgUnits && viewBox && minDisplaySizePx != null && minDisplaySizePx > 0);
|
|
23212
23704
|
return (jsx("div", { style: containerStyle, children: items?.map((item, idx) => (jsx("div", { className: "charging-pile", style: {
|
|
23213
23705
|
position: 'absolute',
|
|
23214
23706
|
width: sizeInSvgUnits && viewBox
|
|
23215
|
-
?
|
|
23707
|
+
? useMinPx
|
|
23708
|
+
? `max(${minDisplaySizePx}px, ${(item.size / Math.max(viewBox.width, 1)) * 100 * sizeScale}%)`
|
|
23709
|
+
: `${(item.size / Math.max(viewBox.width, 1)) * 100 * sizeScale}%`
|
|
23216
23710
|
: item.size * sizeScale,
|
|
23217
23711
|
height: sizeInSvgUnits && viewBox
|
|
23218
|
-
?
|
|
23712
|
+
? useMinPx
|
|
23713
|
+
? `max(${minDisplaySizePx}px, ${(item.size / Math.max(viewBox.height, 1)) * 100 * sizeScale}%)`
|
|
23714
|
+
: `${(item.size / Math.max(viewBox.height, 1)) * 100 * sizeScale}%`
|
|
23219
23715
|
: item.size * sizeScale,
|
|
23220
23716
|
left: `${item.leftPct}%`,
|
|
23221
23717
|
top: `${item.topPct}%`,
|
|
@@ -23228,8 +23724,10 @@ const CharginPile = React__default.memo(({ viewBox, rotation = 0, sizeScale = 1,
|
|
|
23228
23724
|
const MAX_STATIC_SIZE = 640;
|
|
23229
23725
|
const MAX_STATIC_MAP_RETRY = 3;
|
|
23230
23726
|
const STATIC_MAP_RETRY_COOLDOWN_MS = 5000;
|
|
23727
|
+
/** 放大镜内充电桩屏幕像素下限,避免过小导致通道与桩视觉错位 */
|
|
23728
|
+
const MAGNIFIER_CHARGING_PILE_MIN_DISPLAY_PX = 20;
|
|
23231
23729
|
const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 122, 51, 0.1)', strokeColor = 'rgba(255, 122, 51, 1)', strokeWidth = 2, zoom = 3, size = 200, }) => {
|
|
23232
|
-
const { svgViewBox, mapRef, googleMapStaticApiKey, drag } = useCommonContext();
|
|
23730
|
+
const { svgViewBox, mapRef, googleMapStaticApiKey, googleMapStaticUrlSigningSecret, signGoogleStaticMapUrl: signGoogleStaticMapUrl$1, drag, } = useCommonContext();
|
|
23233
23731
|
const { svgElementDatas, svgRef } = useSvgEditContext();
|
|
23234
23732
|
const { editMapInfo } = useMapEditContext();
|
|
23235
23733
|
const [magnifierPosition, setMagnifierPosition] = useState({ x: 0, y: 0 });
|
|
@@ -23317,76 +23815,107 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
|
|
|
23317
23815
|
const svgPoint = svgRef.createSVGPoint();
|
|
23318
23816
|
// 只要有 key 就尝试 static api;请求失败时不截图,直接回退灰色背景
|
|
23319
23817
|
if (googleMapStaticApiKey) {
|
|
23320
|
-
|
|
23321
|
-
|
|
23322
|
-
|
|
23323
|
-
|
|
23324
|
-
|
|
23325
|
-
|
|
23326
|
-
|
|
23327
|
-
|
|
23328
|
-
|
|
23329
|
-
|
|
23330
|
-
|
|
23331
|
-
|
|
23818
|
+
let cancelled = false;
|
|
23819
|
+
(async () => {
|
|
23820
|
+
// console.log('[Magnifier] Background source: static api viewport snapshot');
|
|
23821
|
+
const mapBounds = mapRef.getBounds?.();
|
|
23822
|
+
if (!mapBounds) {
|
|
23823
|
+
// console.log('[Magnifier] Skip static map effect: mapBounds missing');
|
|
23824
|
+
if (!cancelled) {
|
|
23825
|
+
setMapImageFrame(null);
|
|
23826
|
+
}
|
|
23827
|
+
return;
|
|
23828
|
+
}
|
|
23829
|
+
const screenToSvg = (screenX, screenY) => {
|
|
23830
|
+
svgPoint.x = screenX;
|
|
23831
|
+
svgPoint.y = screenY;
|
|
23832
|
+
const p = svgPoint.matrixTransform(inverseCtm);
|
|
23833
|
+
return { x: p.x, y: p.y };
|
|
23834
|
+
};
|
|
23835
|
+
// 使用当前地图视口矩形四角,将屏幕坐标映射到 SVG 坐标,确保底图与主视口对齐
|
|
23836
|
+
const topLeftSvg = screenToSvg(mapRect.left, mapRect.top);
|
|
23837
|
+
const topRightSvg = screenToSvg(mapRect.right, mapRect.top);
|
|
23838
|
+
const bottomLeftSvg = screenToSvg(mapRect.left, mapRect.bottom);
|
|
23839
|
+
if (!topLeftSvg || !topRightSvg || !bottomLeftSvg) {
|
|
23840
|
+
if (!cancelled) {
|
|
23841
|
+
setMapImageFrame(null);
|
|
23842
|
+
}
|
|
23843
|
+
return;
|
|
23844
|
+
}
|
|
23845
|
+
// 把当前主地图可视区域尺寸,按比例压到 Static API 允许的最大尺寸以内(受 Static API 640 上限约束)),同时不改变宽高比。
|
|
23846
|
+
const mapWidth = Math.max(1, Math.round(mapRect.width));
|
|
23847
|
+
const mapHeight = Math.max(1, Math.round(mapRect.height));
|
|
23848
|
+
const shrinkRatio = Math.min(1, MAX_STATIC_SIZE / Math.max(mapWidth, mapHeight));
|
|
23849
|
+
const staticWidth = Math.max(1, Math.round(mapWidth * shrinkRatio));
|
|
23850
|
+
const staticHeight = Math.max(1, Math.round(mapHeight * shrinkRatio));
|
|
23851
|
+
const center = mapBounds.getCenter();
|
|
23852
|
+
const currentZoom = mapRef.getZoom() || 20;
|
|
23853
|
+
// 尺寸缩小后同步补偿 zoom,保持与当前主图一致的地理覆盖范围
|
|
23854
|
+
const zoomCompensation = Math.log2(shrinkRatio);
|
|
23855
|
+
const adjustedZoom = currentZoom + zoomCompensation;
|
|
23856
|
+
const staticZoom = Math.max(0, Math.min(Math.floor(adjustedZoom), 22));
|
|
23857
|
+
const unsignedStaticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat()},${center.lng()}&zoom=${staticZoom}&size=${staticWidth}x${staticHeight}&maptype=satellite&key=${googleMapStaticApiKey}`;
|
|
23858
|
+
// 可选:对 Static Map URL 做 Google 数字签名(宿主回调优先,其次客户端 signing secret)
|
|
23859
|
+
let staticMapUrl = unsignedStaticMapUrl;
|
|
23860
|
+
try {
|
|
23861
|
+
if (signGoogleStaticMapUrl$1) {
|
|
23862
|
+
staticMapUrl = await Promise.resolve(signGoogleStaticMapUrl$1(unsignedStaticMapUrl));
|
|
23863
|
+
}
|
|
23864
|
+
else if (googleMapStaticUrlSigningSecret) {
|
|
23865
|
+
staticMapUrl = await signGoogleStaticMapUrl(unsignedStaticMapUrl, googleMapStaticUrlSigningSecret);
|
|
23866
|
+
console.log('[Magnifier] staticMapUrl', staticMapUrl);
|
|
23867
|
+
}
|
|
23868
|
+
}
|
|
23869
|
+
catch (error) {
|
|
23870
|
+
console.warn('[Magnifier] Static map URL signing failed', error);
|
|
23871
|
+
if (!cancelled) {
|
|
23872
|
+
setMapImageFrame(null);
|
|
23873
|
+
}
|
|
23874
|
+
return;
|
|
23875
|
+
}
|
|
23876
|
+
// 通过三角点推导静态图在 SVG 中的宽高和旋转角
|
|
23877
|
+
// Math.hypot(x, y) 等价于 sqrt(x*x + y*y),计算两点之间的距离
|
|
23878
|
+
const width = Math.hypot(topRightSvg.x - topLeftSvg.x, topRightSvg.y - topLeftSvg.y);
|
|
23879
|
+
const height = Math.hypot(bottomLeftSvg.x - topLeftSvg.x, bottomLeftSvg.y - topLeftSvg.y);
|
|
23880
|
+
// Math.atan2(y, x) 计算反正切值,返回 [-π, π] 弧度,*180/π 转换为角度
|
|
23881
|
+
const rotationDeg = (Math.atan2(topRightSvg.y - topLeftSvg.y, topRightSvg.x - topLeftSvg.x) * 180) / Math.PI;
|
|
23882
|
+
// Static API zoom 只能取整;额外补偿小数部分,避免底图视觉偏小
|
|
23883
|
+
// 在有旋转的坐标系里,做“以中心为锚点”的等比放大补偿。
|
|
23884
|
+
const fractionalZoomScale = Math.pow(2, adjustedZoom - staticZoom); //算出“还差多少缩放比例”。例子:adjustedZoom=19.6,staticZoom=19,差 0.6,比例是 2^0.6 ≈ 1.515。
|
|
23885
|
+
//把原始 width/height 乘这个比例,得到补偿后的尺寸。
|
|
23886
|
+
const compensatedWidth = width * fractionalZoomScale;
|
|
23887
|
+
const compensatedHeight = height * fractionalZoomScale;
|
|
23888
|
+
//尺寸变大后,多出来的宽/高的一半(要从两边均匀扩张)。
|
|
23889
|
+
const offsetAlongX = (compensatedWidth - width) / 2;
|
|
23890
|
+
const offsetAlongY = (compensatedHeight - height) / 2;
|
|
23891
|
+
//“右方向”单位向量(从左上指向右上),因为图可能旋转了,不能只按水平 x 轴算。
|
|
23892
|
+
const unitX = width > 0 ? (topRightSvg.x - topLeftSvg.x) / width : 1;
|
|
23893
|
+
const unitY = width > 0 ? (topRightSvg.y - topLeftSvg.y) / width : 0;
|
|
23894
|
+
//“下方向”单位向量(从左上指向左下),同理用于旋转场景。
|
|
23895
|
+
const unitDownX = height > 0 ? (bottomLeftSvg.x - topLeftSvg.x) / height : 0;
|
|
23896
|
+
const unitDownY = height > 0 ? (bottomLeftSvg.y - topLeftSvg.y) / height : 0;
|
|
23897
|
+
/**
|
|
23898
|
+
* 计算补偿后的新左上角:
|
|
23899
|
+
* 从原左上角沿“右方向”回退半个扩展量,再沿“下方向”回退半个扩展量。
|
|
23900
|
+
* 这样放大后仍以原区域中心为中心,不会放大后位置偏移。
|
|
23901
|
+
*/
|
|
23902
|
+
const compensatedTopLeftX = topLeftSvg.x - unitX * offsetAlongX - unitDownX * offsetAlongY;
|
|
23903
|
+
const compensatedTopLeftY = topLeftSvg.y - unitY * offsetAlongX - unitDownY * offsetAlongY;
|
|
23904
|
+
if (cancelled) {
|
|
23905
|
+
return;
|
|
23906
|
+
}
|
|
23907
|
+
setMapImageFrame({
|
|
23908
|
+
url: staticMapUrl,
|
|
23909
|
+
x: compensatedTopLeftX,
|
|
23910
|
+
y: compensatedTopLeftY,
|
|
23911
|
+
width: compensatedWidth,
|
|
23912
|
+
height: compensatedHeight,
|
|
23913
|
+
transform: `rotate(${rotationDeg} ${compensatedTopLeftX} ${compensatedTopLeftY})`,
|
|
23914
|
+
});
|
|
23915
|
+
})();
|
|
23916
|
+
return () => {
|
|
23917
|
+
cancelled = true;
|
|
23332
23918
|
};
|
|
23333
|
-
// 使用当前地图视口矩形四角,将屏幕坐标映射到 SVG 坐标,确保底图与主视口对齐
|
|
23334
|
-
const topLeftSvg = screenToSvg(mapRect.left, mapRect.top);
|
|
23335
|
-
const topRightSvg = screenToSvg(mapRect.right, mapRect.top);
|
|
23336
|
-
const bottomLeftSvg = screenToSvg(mapRect.left, mapRect.bottom);
|
|
23337
|
-
if (!topLeftSvg || !topRightSvg || !bottomLeftSvg) {
|
|
23338
|
-
setMapImageFrame(null);
|
|
23339
|
-
return;
|
|
23340
|
-
}
|
|
23341
|
-
// 把当前主地图可视区域尺寸,按比例压到 Static API 允许的最大尺寸以内(受 Static API 640 上限约束)),同时不改变宽高比。
|
|
23342
|
-
const mapWidth = Math.max(1, Math.round(mapRect.width));
|
|
23343
|
-
const mapHeight = Math.max(1, Math.round(mapRect.height));
|
|
23344
|
-
const shrinkRatio = Math.min(1, MAX_STATIC_SIZE / Math.max(mapWidth, mapHeight));
|
|
23345
|
-
const staticWidth = Math.max(1, Math.round(mapWidth * shrinkRatio));
|
|
23346
|
-
const staticHeight = Math.max(1, Math.round(mapHeight * shrinkRatio));
|
|
23347
|
-
const center = mapBounds.getCenter();
|
|
23348
|
-
const currentZoom = mapRef.getZoom() || 20;
|
|
23349
|
-
// 尺寸缩小后同步补偿 zoom,保持与当前主图一致的地理覆盖范围
|
|
23350
|
-
const zoomCompensation = Math.log2(shrinkRatio);
|
|
23351
|
-
const adjustedZoom = currentZoom + zoomCompensation;
|
|
23352
|
-
const staticZoom = Math.max(0, Math.min(Math.floor(adjustedZoom), 22));
|
|
23353
|
-
const staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat()},${center.lng()}&zoom=${staticZoom}&size=${staticWidth}x${staticHeight}&maptype=satellite&key=${googleMapStaticApiKey}`;
|
|
23354
|
-
// 通过三角点推导静态图在 SVG 中的宽高和旋转角
|
|
23355
|
-
// Math.hypot(x, y) 等价于 sqrt(x*x + y*y),计算两点之间的距离
|
|
23356
|
-
const width = Math.hypot(topRightSvg.x - topLeftSvg.x, topRightSvg.y - topLeftSvg.y);
|
|
23357
|
-
const height = Math.hypot(bottomLeftSvg.x - topLeftSvg.x, bottomLeftSvg.y - topLeftSvg.y);
|
|
23358
|
-
// Math.atan2(y, x) 计算反正切值,返回 [-π, π] 弧度,*180/π 转换为角度
|
|
23359
|
-
const rotationDeg = (Math.atan2(topRightSvg.y - topLeftSvg.y, topRightSvg.x - topLeftSvg.x) * 180) / Math.PI;
|
|
23360
|
-
// Static API zoom 只能取整;额外补偿小数部分,避免底图视觉偏小
|
|
23361
|
-
// 在有旋转的坐标系里,做“以中心为锚点”的等比放大补偿。
|
|
23362
|
-
const fractionalZoomScale = Math.pow(2, adjustedZoom - staticZoom); //算出“还差多少缩放比例”。例子:adjustedZoom=19.6,staticZoom=19,差 0.6,比例是 2^0.6 ≈ 1.515。
|
|
23363
|
-
//把原始 width/height 乘这个比例,得到补偿后的尺寸。
|
|
23364
|
-
const compensatedWidth = width * fractionalZoomScale;
|
|
23365
|
-
const compensatedHeight = height * fractionalZoomScale;
|
|
23366
|
-
//尺寸变大后,多出来的宽/高的一半(要从两边均匀扩张)。
|
|
23367
|
-
const offsetAlongX = (compensatedWidth - width) / 2;
|
|
23368
|
-
const offsetAlongY = (compensatedHeight - height) / 2;
|
|
23369
|
-
//“右方向”单位向量(从左上指向右上),因为图可能旋转了,不能只按水平 x 轴算。
|
|
23370
|
-
const unitX = width > 0 ? (topRightSvg.x - topLeftSvg.x) / width : 1;
|
|
23371
|
-
const unitY = width > 0 ? (topRightSvg.y - topLeftSvg.y) / width : 0;
|
|
23372
|
-
//“下方向”单位向量(从左上指向左下),同理用于旋转场景。
|
|
23373
|
-
const unitDownX = height > 0 ? (bottomLeftSvg.x - topLeftSvg.x) / height : 0;
|
|
23374
|
-
const unitDownY = height > 0 ? (bottomLeftSvg.y - topLeftSvg.y) / height : 1;
|
|
23375
|
-
/**
|
|
23376
|
-
* 计算补偿后的新左上角:
|
|
23377
|
-
* 从原左上角沿“右方向”回退半个扩展量,再沿“下方向”回退半个扩展量。
|
|
23378
|
-
* 这样放大后仍以原区域中心为中心,不会放大后位置偏移。
|
|
23379
|
-
*/
|
|
23380
|
-
const compensatedTopLeftX = topLeftSvg.x - unitX * offsetAlongX - unitDownX * offsetAlongY;
|
|
23381
|
-
const compensatedTopLeftY = topLeftSvg.y - unitY * offsetAlongX - unitDownY * offsetAlongY;
|
|
23382
|
-
setMapImageFrame({
|
|
23383
|
-
url: staticMapUrl,
|
|
23384
|
-
x: compensatedTopLeftX,
|
|
23385
|
-
y: compensatedTopLeftY,
|
|
23386
|
-
width: compensatedWidth,
|
|
23387
|
-
height: compensatedHeight,
|
|
23388
|
-
transform: `rotate(${rotationDeg} ${compensatedTopLeftX} ${compensatedTopLeftY})`,
|
|
23389
|
-
});
|
|
23390
23919
|
}
|
|
23391
23920
|
else {
|
|
23392
23921
|
setMapImageFrame(null);
|
|
@@ -23406,6 +23935,8 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
|
|
|
23406
23935
|
size,
|
|
23407
23936
|
zoom,
|
|
23408
23937
|
googleMapStaticApiKey,
|
|
23938
|
+
googleMapStaticUrlSigningSecret,
|
|
23939
|
+
signGoogleStaticMapUrl$1,
|
|
23409
23940
|
staticMapRetryCount,
|
|
23410
23941
|
staticMapBlockedUntil,
|
|
23411
23942
|
]);
|
|
@@ -23581,16 +24112,16 @@ const Magnifier = ({ visible, dragState, polygonPoints, fillColor = 'rgba(255, 1
|
|
|
23581
24112
|
? 3.6 / styleZoomFactor
|
|
23582
24113
|
: 3 / styleZoomFactor;
|
|
23583
24114
|
return (jsx("circle", { cx: x, cy: y, r: pointRadius, fill: pointFill, stroke: pointStroke, strokeWidth: pointStrokeWidth }, idx));
|
|
23584
|
-
})] })), dragState.dragType === 'new' && dragState.edgeInfo && (jsx(Fragment, { children: jsx("line", { x1: dragState.edgeInfo.startPoint.x, y1: dragState.edgeInfo.startPoint.y, x2: dragState.edgeInfo.endPoint.x, y2: dragState.edgeInfo.endPoint.y, stroke: "#999", strokeWidth: (strokeWidth * 3.2) / styleZoomFactor, strokeDasharray: `${6 / styleZoomFactor},${6 / styleZoomFactor}` }) }))] }), jsx(CharginPile, { viewBox: magnifierViewBox || null, rotation: actureRotate, sizeInSvgUnits: true,
|
|
24115
|
+
})] })), dragState.dragType === 'new' && dragState.edgeInfo && (jsx(Fragment, { children: jsx("line", { x1: dragState.edgeInfo.startPoint.x, y1: dragState.edgeInfo.startPoint.y, x2: dragState.edgeInfo.endPoint.x, y2: dragState.edgeInfo.endPoint.y, stroke: "#999", strokeWidth: (strokeWidth * 3.2) / styleZoomFactor, strokeDasharray: `${6 / styleZoomFactor},${6 / styleZoomFactor}` }) }))] }), jsx(CharginPile, { viewBox: magnifierViewBox || null, rotation: actureRotate, sizeInSvgUnits: true, minDisplaySizePx: MAGNIFIER_CHARGING_PILE_MIN_DISPLAY_PX,
|
|
23585
24116
|
// 充电桩最多保持原始尺寸,不允许放大超过 1 倍
|
|
23586
24117
|
sizeScale: Math.min(1, 1 / styleZoomFactor) })] }));
|
|
23587
24118
|
// 使用 Portal 渲染到 body,避免层级问题
|
|
23588
24119
|
return ReactDOM.createPortal(magnifierContent, document.body);
|
|
23589
24120
|
};
|
|
23590
24121
|
|
|
23591
|
-
var css_248z$
|
|
23592
|
-
var styles$
|
|
23593
|
-
styleInject(css_248z$
|
|
24122
|
+
var css_248z$8 = ".index-module_pointerCursor__Ee6pr {\n cursor: pointer;\n}\n\n.index-module_polygonPath__PynOn {\n pointer-events: stroke;\n cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n cursor: grabbing;\n}\n\n.index-module_notCreate__bFnkV {\n cursor: no-drop;\n}";
|
|
24123
|
+
var styles$8 = {"pointerCursor":"index-module_pointerCursor__Ee6pr","polygonPath":"index-module_polygonPath__PynOn","dragging":"index-module_dragging__xSFdO","notCreate":"index-module_notCreate__bFnkV"};
|
|
24124
|
+
styleInject(css_248z$8);
|
|
23594
24125
|
|
|
23595
24126
|
/**
|
|
23596
24127
|
* 几何计算工具函数
|
|
@@ -24013,28 +24544,102 @@ const useCheckElement = () => {
|
|
|
24013
24544
|
};
|
|
24014
24545
|
};
|
|
24015
24546
|
|
|
24547
|
+
var css_248z$7 = ".Tooltip-module_tooltip__Wexlk {\n position: fixed;\n background-color: #fff;\n border-radius: 4px;\n height: 20px;\n line-height: 20px;\n font-size: 12px;\n color: #211F1F;\n padding: 0 4px;\n white-space: nowrap;\n z-index: 9999;\n cursor: pointer;\n user-select: none;\n}\n.Tooltip-module_tooltip__Wexlk.Tooltip-module_tooltipHover__Tfqme {\n height: 30px;\n padding: 5px 12px;\n}\n.Tooltip-module_tooltip__Wexlk.Tooltip-module_tooltipHover__Tfqme:hover {\n background-color: #FFEFE6;\n color: #FF5A00;\n}";
|
|
24548
|
+
var styles$7 = {"tooltip":"Tooltip-module_tooltip__Wexlk","tooltipHover":"Tooltip-module_tooltipHover__Tfqme"};
|
|
24549
|
+
styleInject(css_248z$7);
|
|
24550
|
+
|
|
24551
|
+
var classnames = {exports: {}};
|
|
24552
|
+
|
|
24553
|
+
/*!
|
|
24554
|
+
Copyright (c) 2018 Jed Watson.
|
|
24555
|
+
Licensed under the MIT License (MIT), see
|
|
24556
|
+
http://jedwatson.github.io/classnames
|
|
24557
|
+
*/
|
|
24558
|
+
|
|
24559
|
+
(function (module) {
|
|
24560
|
+
/* global define */
|
|
24561
|
+
|
|
24562
|
+
(function () {
|
|
24563
|
+
|
|
24564
|
+
var hasOwn = {}.hasOwnProperty;
|
|
24565
|
+
|
|
24566
|
+
function classNames () {
|
|
24567
|
+
var classes = '';
|
|
24568
|
+
|
|
24569
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
24570
|
+
var arg = arguments[i];
|
|
24571
|
+
if (arg) {
|
|
24572
|
+
classes = appendClass(classes, parseValue(arg));
|
|
24573
|
+
}
|
|
24574
|
+
}
|
|
24575
|
+
|
|
24576
|
+
return classes;
|
|
24577
|
+
}
|
|
24578
|
+
|
|
24579
|
+
function parseValue (arg) {
|
|
24580
|
+
if (typeof arg === 'string' || typeof arg === 'number') {
|
|
24581
|
+
return arg;
|
|
24582
|
+
}
|
|
24583
|
+
|
|
24584
|
+
if (typeof arg !== 'object') {
|
|
24585
|
+
return '';
|
|
24586
|
+
}
|
|
24587
|
+
|
|
24588
|
+
if (Array.isArray(arg)) {
|
|
24589
|
+
return classNames.apply(null, arg);
|
|
24590
|
+
}
|
|
24591
|
+
|
|
24592
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
|
|
24593
|
+
return arg.toString();
|
|
24594
|
+
}
|
|
24595
|
+
|
|
24596
|
+
var classes = '';
|
|
24597
|
+
|
|
24598
|
+
for (var key in arg) {
|
|
24599
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
24600
|
+
classes = appendClass(classes, key);
|
|
24601
|
+
}
|
|
24602
|
+
}
|
|
24603
|
+
|
|
24604
|
+
return classes;
|
|
24605
|
+
}
|
|
24606
|
+
|
|
24607
|
+
function appendClass (value, newClass) {
|
|
24608
|
+
if (!newClass) {
|
|
24609
|
+
return value;
|
|
24610
|
+
}
|
|
24611
|
+
|
|
24612
|
+
if (value) {
|
|
24613
|
+
return value + ' ' + newClass;
|
|
24614
|
+
}
|
|
24615
|
+
|
|
24616
|
+
return value + newClass;
|
|
24617
|
+
}
|
|
24618
|
+
|
|
24619
|
+
if (module.exports) {
|
|
24620
|
+
classNames.default = classNames;
|
|
24621
|
+
module.exports = classNames;
|
|
24622
|
+
} else {
|
|
24623
|
+
window.classNames = classNames;
|
|
24624
|
+
}
|
|
24625
|
+
}());
|
|
24626
|
+
} (classnames));
|
|
24627
|
+
|
|
24628
|
+
var classnamesExports = classnames.exports;
|
|
24629
|
+
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
24630
|
+
|
|
24016
24631
|
const Tooltip = ({ open, x, y, text, style, onClick }) => {
|
|
24017
24632
|
if (!open)
|
|
24018
24633
|
return null;
|
|
24019
24634
|
const tooltipStyle = {
|
|
24020
|
-
position: 'fixed',
|
|
24021
24635
|
left: x,
|
|
24022
24636
|
top: y,
|
|
24023
|
-
backgroundColor: '#fff',
|
|
24024
|
-
borderRadius: '4px',
|
|
24025
|
-
height: '20px',
|
|
24026
|
-
lineHeight: '16px',
|
|
24027
|
-
fontSize: '12px',
|
|
24028
|
-
color: '#211F1F',
|
|
24029
|
-
padding: '2px 4px',
|
|
24030
|
-
whiteSpace: 'nowrap',
|
|
24031
|
-
zIndex: 9999,
|
|
24032
|
-
cursor: 'pointer',
|
|
24033
|
-
userSelect: 'none',
|
|
24034
24637
|
...style,
|
|
24035
24638
|
};
|
|
24036
24639
|
// 使用 createPortal 挂载到 body
|
|
24037
|
-
return createPortal(jsx("div", {
|
|
24640
|
+
return createPortal(jsx("div", { className: classNames(styles$7.tooltip, {
|
|
24641
|
+
[styles$7.tooltipHover]: !!onClick,
|
|
24642
|
+
}), style: tooltipStyle, onClick: (e) => {
|
|
24038
24643
|
e.preventDefault();
|
|
24039
24644
|
e.stopPropagation();
|
|
24040
24645
|
onClick?.();
|
|
@@ -24132,7 +24737,7 @@ const createPathData = (points) => {
|
|
|
24132
24737
|
};
|
|
24133
24738
|
const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor = 'rgba(0, 0, 0, 0.1)', hoverFillColor = '', fillOpacity = 1, strokeColor = '#000', strokeWidth = 2, strokeOpacity = 1, createMode = false, showPoints = false, onPointClick, completed = false, mousePos = null, editMode = false, onCoordinatesChange, onPathClick, onPolygonClick, onVertexDelete, draggable = true, // 新增参数,如果未指定则根据createMode和editMode自动判断
|
|
24134
24739
|
}) => {
|
|
24135
|
-
const { overlayScale, unitType, showStraddleBoundaryBorder, platform, onH5FirstSelectObstaclePoint } = useCommonContext();
|
|
24740
|
+
const { overlayScale, unitType, showStraddleBoundaryBorder, platform, locale, onH5FirstSelectObstaclePoint, } = useCommonContext();
|
|
24136
24741
|
const { onHandleEvent } = useMapEditContext();
|
|
24137
24742
|
const { svgRef } = useSvgEditContext();
|
|
24138
24743
|
const [dragState, setDragState] = useState({
|
|
@@ -24180,11 +24785,12 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24180
24785
|
const [tooltipIndex, setTooltipIndex] = useState(null);
|
|
24181
24786
|
const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
|
|
24182
24787
|
const [completeTooltipOpen, setCompleteTooltipOpen] = useState(false);
|
|
24788
|
+
const [moveTooltipOpen, setMoveTooltipOpen] = useState(false);
|
|
24183
24789
|
const updateTooltipPos = (target) => {
|
|
24184
24790
|
const rect = target.getBoundingClientRect();
|
|
24185
24791
|
setTooltipPos({
|
|
24186
24792
|
x: rect.left + rect.width + 4,
|
|
24187
|
-
y: rect.top - 10
|
|
24793
|
+
y: rect.top - 10,
|
|
24188
24794
|
});
|
|
24189
24795
|
};
|
|
24190
24796
|
// 处理顶点点击(仅透出点击;不触发删除)
|
|
@@ -24319,6 +24925,13 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24319
24925
|
edgeInfo: edgeInfo,
|
|
24320
24926
|
dragType: 'new',
|
|
24321
24927
|
});
|
|
24928
|
+
// 边上新点:insertIndex 可能与当前 selectedVertexIndex 相同(例如原选中 2,在 1-2 间插入后仍写 2),
|
|
24929
|
+
// React 会跳过 setState,依赖 selectedVertexIndex 的 useLayoutEffect 不会跑,故用微任务直接震一次
|
|
24930
|
+
if (platform === PlatformType.H5 && editMapInfo?.elementType === DataType.OBSTACLE) {
|
|
24931
|
+
void Promise.resolve().then(() => {
|
|
24932
|
+
onH5FirstSelectObstaclePoint?.();
|
|
24933
|
+
});
|
|
24934
|
+
}
|
|
24322
24935
|
// 将新创建的点设为选中态,便于后续直接拖拽
|
|
24323
24936
|
setSelectedVertexIndex(insertIndex);
|
|
24324
24937
|
}, [
|
|
@@ -24329,6 +24942,9 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24329
24942
|
coordinates,
|
|
24330
24943
|
getSVGCoordinates,
|
|
24331
24944
|
calculatePerpendicularFoot$1,
|
|
24945
|
+
platform,
|
|
24946
|
+
editMapInfo?.elementType,
|
|
24947
|
+
onH5FirstSelectObstaclePoint,
|
|
24332
24948
|
]);
|
|
24333
24949
|
// H5平台长按边线创建新顶点
|
|
24334
24950
|
const handleEdgeLongPressStart = useCallback((e, edgeStartIndex) => {
|
|
@@ -24373,6 +24989,8 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24373
24989
|
const vertexLongPressTimerRef = useRef(null);
|
|
24374
24990
|
const isVertexLongPressedRef = useRef(false);
|
|
24375
24991
|
const longPressVertexIndexRef = useRef(-1);
|
|
24992
|
+
/** 长按选中顶点且 index 发生变化时置 true,在 useLayoutEffect 里再触发震动,避免早于视觉选中态 */
|
|
24993
|
+
const pendingH5ObstacleSelectHapticRef = useRef(false);
|
|
24376
24994
|
// 长按拖拽判定相关
|
|
24377
24995
|
const touchStartPosRef = useRef(null);
|
|
24378
24996
|
const hasStartedDragViaLongPressRef = useRef(false);
|
|
@@ -24393,13 +25011,21 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24393
25011
|
vertexLongPressTimerRef.current = window.setTimeout(() => {
|
|
24394
25012
|
isVertexLongPressedRef.current = true;
|
|
24395
25013
|
setSelectedVertexIndex((prev) => {
|
|
24396
|
-
|
|
24397
|
-
onH5FirstSelectObstaclePoint?.();
|
|
24398
|
-
}
|
|
25014
|
+
pendingH5ObstacleSelectHapticRef.current = prev !== index;
|
|
24399
25015
|
return index;
|
|
24400
25016
|
});
|
|
24401
25017
|
}, 1000);
|
|
24402
|
-
}, [editMode, createMode, completed, dragState.isDragging
|
|
25018
|
+
}, [editMode, createMode, completed, dragState.isDragging]);
|
|
25019
|
+
useLayoutEffect(() => {
|
|
25020
|
+
if (!pendingH5ObstacleSelectHapticRef.current)
|
|
25021
|
+
return;
|
|
25022
|
+
pendingH5ObstacleSelectHapticRef.current = false;
|
|
25023
|
+
if (platform !== PlatformType.H5)
|
|
25024
|
+
return;
|
|
25025
|
+
if (editMapInfo?.elementType !== DataType.OBSTACLE)
|
|
25026
|
+
return;
|
|
25027
|
+
onH5FirstSelectObstaclePoint?.();
|
|
25028
|
+
}, [selectedVertexIndex, platform, editMapInfo?.elementType, onH5FirstSelectObstaclePoint]);
|
|
24403
25029
|
const handleVertexLongPressEnd = useCallback(() => {
|
|
24404
25030
|
if (vertexLongPressTimerRef.current !== null) {
|
|
24405
25031
|
window.clearTimeout(vertexLongPressTimerRef.current);
|
|
@@ -24428,8 +25054,8 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24428
25054
|
}, [dragState.currentPosition, checkCanNotCreateAtPosition, coordinates]);
|
|
24429
25055
|
const generateVertexClassName = useMemo(() => {
|
|
24430
25056
|
if (!dragState.isDragging)
|
|
24431
|
-
return styles$
|
|
24432
|
-
return showNotCreateCursor ? styles$
|
|
25057
|
+
return styles$8.pointerCursor;
|
|
25058
|
+
return showNotCreateCursor ? styles$8.notCreate : styles$8.dragging;
|
|
24433
25059
|
}, [dragState.isDragging, showNotCreateCursor]);
|
|
24434
25060
|
// 使用 useRef 来存储 requestAnimationFrame ID
|
|
24435
25061
|
const rafIdRef = useRef(null);
|
|
@@ -24720,7 +25346,7 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24720
25346
|
WebkitTouchCallout: 'none',
|
|
24721
25347
|
touchAction: 'none',
|
|
24722
25348
|
} })] }));
|
|
24723
|
-
})()] })), renderCoordinates.length >= 2 && (jsx("polygon", { className: canSelect ? styles$
|
|
25349
|
+
})()] })), renderCoordinates.length >= 2 && (jsx("polygon", { className: canSelect ? styles$8.pointerCursor : '', points: polygonPoints, fill: isHover ? hoverFillColor || fillColor : fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
|
|
24724
25350
|
, onClick: onPolygonClick })), jsx("g", { children: renderCoordinates.length >= 2 &&
|
|
24725
25351
|
pathSegments.map((segment, index) => {
|
|
24726
25352
|
if (segment.points.length < 2)
|
|
@@ -24728,14 +25354,14 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24728
25354
|
const pathData = createPathData(segment.points);
|
|
24729
25355
|
const isDash = segment.type === 1;
|
|
24730
25356
|
if (isDash && showStraddleBoundaryBorder) {
|
|
24731
|
-
return (jsx(DashPath, { className: canSelect ? styles$
|
|
25357
|
+
return (jsx(DashPath, { className: canSelect ? styles$8.polygonPath : '', points: segment.points, stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity }, index));
|
|
24732
25358
|
}
|
|
24733
25359
|
return (jsxs(Fragment, { children: [(editMode || createMode) && (jsx("path", { d: pathData, fill: "none", stroke: '#fff', strokeWidth: strokeWidth * 2, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", style: {
|
|
24734
25360
|
userSelect: 'none',
|
|
24735
25361
|
WebkitUserSelect: 'none',
|
|
24736
25362
|
WebkitTouchCallout: 'none',
|
|
24737
25363
|
touchAction: 'none',
|
|
24738
|
-
} }, 'warp' + index)), jsx("path", { d: pathData, fill: "none", stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: canSelect ? styles$
|
|
25364
|
+
} }, 'warp' + index)), jsx("path", { d: pathData, fill: "none", stroke: strokeColor, strokeWidth: isHover ? strokeWidth + 1 : strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: canSelect ? styles$8.polygonPath : '', vectorEffect: "non-scaling-stroke", onClick: onPathClick, style: {
|
|
24739
25365
|
userSelect: 'none',
|
|
24740
25366
|
WebkitUserSelect: 'none',
|
|
24741
25367
|
WebkitTouchCallout: 'none',
|
|
@@ -24746,12 +25372,27 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24746
25372
|
renderCoordinates.map((coord, index) => {
|
|
24747
25373
|
const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
|
|
24748
25374
|
const isDashPath = coord[2] === 1;
|
|
24749
|
-
|
|
24750
|
-
|
|
24751
|
-
|
|
24752
|
-
|
|
24753
|
-
|
|
24754
|
-
|
|
25375
|
+
const edgeLineCommon = {
|
|
25376
|
+
x1: coord[0],
|
|
25377
|
+
y1: coord[1],
|
|
25378
|
+
x2: nextCoord[0],
|
|
25379
|
+
y2: nextCoord[1],
|
|
25380
|
+
};
|
|
25381
|
+
const edgeLineStyle = {
|
|
25382
|
+
userSelect: 'none',
|
|
25383
|
+
WebkitUserSelect: 'none',
|
|
25384
|
+
WebkitTouchCallout: 'none',
|
|
25385
|
+
touchAction: 'none',
|
|
25386
|
+
};
|
|
25387
|
+
// H5 实线:透明粗线仅作长按热区,描边只看上方 path;H5 虚线/Web:沿用透明或主题色边线 + 对应事件(合并为一个 line,避免两段重复)
|
|
25388
|
+
const isH5SolidHitOnly = platform === PlatformType.H5 && ((editMode && !isDashPath) || createMode);
|
|
25389
|
+
const edgeStroke = isH5SolidHitOnly || isDashPath ? 'transparent' : strokeColor;
|
|
25390
|
+
const edgeStrokeWidth = isH5SolidHitOnly
|
|
25391
|
+
? strokeWidth * 12
|
|
25392
|
+
: platform === PlatformType.H5
|
|
25393
|
+
? strokeWidth * 2
|
|
25394
|
+
: strokeWidth;
|
|
25395
|
+
return (jsx("line", { ...edgeLineCommon, stroke: edgeStroke, strokeWidth: edgeStrokeWidth, ...(isH5SolidHitOnly ? { strokeLinecap: 'round' } : {}), className: editMode ? styles$8.pointerCursor : '', style: edgeLineStyle, vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
|
|
24755
25396
|
? {
|
|
24756
25397
|
onTouchStart: createReactEventHandler((e) => handleEdgeLongPressStart(e, index)),
|
|
24757
25398
|
onTouchEnd: createReactEventHandler(() => handleEdgeLongPressEnd()),
|
|
@@ -24821,7 +25462,7 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24821
25462
|
isDoubleClickingRef.current = false;
|
|
24822
25463
|
}, 300);
|
|
24823
25464
|
// 打开删除确认 Tooltip(仅在可编辑时)
|
|
24824
|
-
if (editMode || (createMode && completed)) {
|
|
25465
|
+
if ((editMode || (createMode && completed)) && renderCoordinates.length > 3) {
|
|
24825
25466
|
updateTooltipPos(e.target);
|
|
24826
25467
|
setTooltipIndex(idx);
|
|
24827
25468
|
}
|
|
@@ -24898,13 +25539,25 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24898
25539
|
}
|
|
24899
25540
|
}
|
|
24900
25541
|
},
|
|
24901
|
-
onMouseEnter:
|
|
24902
|
-
|
|
24903
|
-
|
|
24904
|
-
|
|
24905
|
-
|
|
24906
|
-
|
|
24907
|
-
|
|
25542
|
+
onMouseEnter: (e) => {
|
|
25543
|
+
if (canComplete) {
|
|
25544
|
+
setCompleteTooltipOpen(true);
|
|
25545
|
+
}
|
|
25546
|
+
if (editMode || (createMode && completed)) {
|
|
25547
|
+
setMoveTooltipOpen(true);
|
|
25548
|
+
}
|
|
25549
|
+
if (tooltipIndex === null) {
|
|
25550
|
+
updateTooltipPos(e.target);
|
|
25551
|
+
}
|
|
25552
|
+
},
|
|
25553
|
+
onMouseLeave: () => {
|
|
25554
|
+
if (canComplete) {
|
|
25555
|
+
setCompleteTooltipOpen(false);
|
|
25556
|
+
}
|
|
25557
|
+
if (editMode || (createMode && completed)) {
|
|
25558
|
+
setMoveTooltipOpen(false);
|
|
25559
|
+
}
|
|
25560
|
+
},
|
|
24908
25561
|
}) }), platform === PlatformType.H5 && tooltipIndex === idx && coordinates.length > 3 && (jsxs("g", { transform: `translate(${coord[0] + 4 * overlayScale * 2}, ${coord[1] - 4 * overlayScale * 2}) scale(${overlayScale * 2})`, onClick: (e) => {
|
|
24909
25562
|
e.preventDefault();
|
|
24910
25563
|
e.stopPropagation();
|
|
@@ -24928,12 +25581,16 @@ const PolygonElement = ({ canSelect = false, isHover = false, points, fillColor
|
|
|
24928
25581
|
// >
|
|
24929
25582
|
// </rect>
|
|
24930
25583
|
)] }, `vertex-${idx}`));
|
|
24931
|
-
}), platform === PlatformType.WEB && tooltipIndex !== null && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text:
|
|
24932
|
-
if (onVertexDelete &&
|
|
25584
|
+
}), platform === PlatformType.WEB && tooltipIndex !== null && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: locale?.['map.renderer.remove'] || 'Remove', onClick: () => {
|
|
25585
|
+
if (onVertexDelete &&
|
|
25586
|
+
(editMode || (createMode && completed)) &&
|
|
25587
|
+
coordinates.length > 3) {
|
|
24933
25588
|
onVertexDelete(renderCoordinates?.length - 1 - tooltipIndex);
|
|
24934
25589
|
}
|
|
24935
25590
|
setTooltipIndex(null);
|
|
24936
|
-
} })), platform === PlatformType.WEB && completeTooltipOpen && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text:
|
|
25591
|
+
} })), platform === PlatformType.WEB && completeTooltipOpen && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: locale?.['map.renderer.tips.clickFinish'] || 'Click to finish' })), platform === PlatformType.WEB && moveTooltipOpen && tooltipIndex === null && (jsx(Tooltip, { open: true, x: tooltipPos.x, y: tooltipPos.y, text: renderCoordinates.length > 3 ?
|
|
25592
|
+
(locale?.['map.renderer.tips.dragAndRemove'] || 'Drag to change, double click to remove') :
|
|
25593
|
+
(locale?.['map.renderer.tips.drag'] || 'Drag to change') }))] }));
|
|
24937
25594
|
};
|
|
24938
25595
|
|
|
24939
25596
|
const MowPartitionContext = createContext({
|
|
@@ -25013,7 +25670,8 @@ const BoundaryElement = ({ data, isHover }) => {
|
|
|
25013
25670
|
};
|
|
25014
25671
|
|
|
25015
25672
|
const ChannelElement = ({ data }) => {
|
|
25016
|
-
const {
|
|
25673
|
+
const { channelClipPathId } = useCommonContext();
|
|
25674
|
+
const clipPathUrl = `url(#${channelClipPathId})`;
|
|
25017
25675
|
const points = data.points;
|
|
25018
25676
|
const style = data.style;
|
|
25019
25677
|
let pathData = `M ${points[0][0]} ${points[0][1]}`;
|
|
@@ -25023,7 +25681,7 @@ const ChannelElement = ({ data }) => {
|
|
|
25023
25681
|
const topLineWidth = dp2px(style.lineWidth).toString();
|
|
25024
25682
|
const bottomLineWidth = dp2px(style.bottomLineWidth).toString();
|
|
25025
25683
|
const dashLength = dp2px(style.lineWidth);
|
|
25026
|
-
return (jsxs("g", { id: data.id.toString(), children: [jsx("path", { d: pathData, fill: "none", stroke: "#8498A9", strokeWidth: bottomLineWidth, strokeLinejoin: "round", opacity: style.opacity || 1, style: { clipPath:
|
|
25684
|
+
return (jsxs("g", { id: data.id.toString(), children: [jsx("path", { d: pathData, fill: "none", stroke: "#8498A9", strokeWidth: bottomLineWidth, strokeLinejoin: "round", opacity: style.opacity || 1, style: { clipPath: clipPathUrl } }), jsx("path", { d: pathData, fill: "none", stroke: "#FFFFFF", strokeWidth: topLineWidth, strokeLinejoin: "round", strokeDasharray: `${dashLength * 2} ${dashLength}`, opacity: style.opacity || 1, style: { clipPath: clipPathUrl } })] }));
|
|
25027
25685
|
};
|
|
25028
25686
|
|
|
25029
25687
|
/**
|
|
@@ -25149,10 +25807,11 @@ const ObstacleElement = ({ data, isHover }) => {
|
|
|
25149
25807
|
const strokeWidth = useMemo(() => {
|
|
25150
25808
|
// 如果是h5选中的情况下,禁区只有在start模式下才需要加粗
|
|
25151
25809
|
// 其他模式展示的是其他的样式
|
|
25152
|
-
if (platform === PlatformType.H5 &&
|
|
25810
|
+
if ((platform === PlatformType.H5 &&
|
|
25153
25811
|
editMapInfo?.selectElement?.id === data.id &&
|
|
25154
|
-
editMapInfo.mobileMode === MobileEditMode.START)
|
|
25155
|
-
|
|
25812
|
+
editMapInfo.mobileMode === MobileEditMode.START) ||
|
|
25813
|
+
editMapInfo.mobileMode === MobileEditMode.EDIT) {
|
|
25814
|
+
return dp2px((style.lineWidth || 1) * 2.2);
|
|
25156
25815
|
// return dp2px(((style.lineWidth as number) || 3) * 3);
|
|
25157
25816
|
}
|
|
25158
25817
|
return dp2px(style.lineWidth || 3);
|
|
@@ -25187,7 +25846,10 @@ const ObstacleElement = ({ data, isHover }) => {
|
|
|
25187
25846
|
}
|
|
25188
25847
|
return editMapInfo?.selectElement?.id === data.id;
|
|
25189
25848
|
}, [editMapInfo, data, platform]);
|
|
25190
|
-
|
|
25849
|
+
const disabled = useMemo(() => {
|
|
25850
|
+
return data?.status === 0 && !editMode;
|
|
25851
|
+
}, [data?.status, editMode, editMapInfo?.createMode]);
|
|
25852
|
+
return (jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType) && editMap, points: currentPoints, fillColor: disabled ? style.disabledFillColor : style.fillColor, hoverFillColor: style.hoverFillColor, fillOpacity: style.fillOpacity, strokeColor: disabled ? style.disabledLineColor : style.lineColor, strokeWidth: strokeWidth, editMode: editMode, isHover: isHover, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
|
|
25191
25853
|
onPathClick();
|
|
25192
25854
|
}, onVertexDelete: (vertexIndex) => handleCreateVertexDelete(vertexIndex), onCoordinatesChange: (coordinates) => {
|
|
25193
25855
|
if (platform === PlatformType.H5 && editMapInfo.mobileMode === MobileEditMode.CREATE) {
|
|
@@ -25788,6 +26450,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
|
|
|
25788
26450
|
// 使用自定义hook管理所有变换逻辑
|
|
25789
26451
|
const { currentPoints, isDragging, isRotating, isScaling, dimensions, initializePoints, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, // 从hook获取containerRef
|
|
25790
26452
|
} = useVisionOffTransform(dataPoints);
|
|
26453
|
+
const [hoverType, setHoverType] = useState(null);
|
|
25791
26454
|
const visionOffData = useMemo(() => {
|
|
25792
26455
|
return {
|
|
25793
26456
|
...data,
|
|
@@ -25948,7 +26611,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
|
|
|
25948
26611
|
}
|
|
25949
26612
|
: {
|
|
25950
26613
|
onMouseDown: handleCancel,
|
|
25951
|
-
}), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformDelete, {}) }) })), jsx("g", { className: "control-point rotate-point", ...(platform === PlatformType.H5
|
|
26614
|
+
}), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Delete ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Delete), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformDelete, {}) }) })), jsx("g", { className: "control-point rotate-point", ...(platform === PlatformType.H5
|
|
25952
26615
|
? {
|
|
25953
26616
|
onTouchStart: createReactEventHandler((e) => {
|
|
25954
26617
|
handleRotateStartWithDisabled(e);
|
|
@@ -25956,7 +26619,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
|
|
|
25956
26619
|
}
|
|
25957
26620
|
: {
|
|
25958
26621
|
onMouseDown: handleRotateStartWithDisabled,
|
|
25959
|
-
}), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformRotate, {}) }) }), jsx("g", { className: "control-point move-point", ...(platform === PlatformType.H5
|
|
26622
|
+
}), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Rotate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Rotate), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformRotate, {}) }) }), jsx("g", { className: "control-point move-point", ...(platform === PlatformType.H5
|
|
25960
26623
|
? {
|
|
25961
26624
|
onTouchStart: createReactEventHandler((e) => {
|
|
25962
26625
|
handleMouseDownWithDisabled(e);
|
|
@@ -25964,7 +26627,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
|
|
|
25964
26627
|
}
|
|
25965
26628
|
: {
|
|
25966
26629
|
onMouseDown: handleMouseDownWithDisabled,
|
|
25967
|
-
}), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformTranslate, {}) }) }), jsx("g", { className: "control-point scale-point", ...(platform === PlatformType.H5
|
|
26630
|
+
}), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Translate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Translate), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformTranslate, {}) }) }), jsx("g", { className: "control-point scale-point", ...(platform === PlatformType.H5
|
|
25968
26631
|
? {
|
|
25969
26632
|
onTouchStart: createReactEventHandler((e) => {
|
|
25970
26633
|
handleScaleStartWithDisabled(e);
|
|
@@ -25972,7 +26635,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, isHover = false,
|
|
|
25972
26635
|
}
|
|
25973
26636
|
: {
|
|
25974
26637
|
onMouseDown: handleScaleStartWithDisabled,
|
|
25975
|
-
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })] }));
|
|
26638
|
+
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Scale ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Scale), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformScale, {}) }) })] }));
|
|
25976
26639
|
})()] }));
|
|
25977
26640
|
};
|
|
25978
26641
|
|
|
@@ -26517,9 +27180,9 @@ var SvgDisabledTranslate = function SvgDisabledTranslate(props) {
|
|
|
26517
27180
|
})))));
|
|
26518
27181
|
};
|
|
26519
27182
|
|
|
26520
|
-
var css_248z$
|
|
26521
|
-
var styles$
|
|
26522
|
-
styleInject(css_248z$
|
|
27183
|
+
var css_248z$6 = ".index-module_doodleHover__jIZHV path {\n fill: #00B3A1;\n}";
|
|
27184
|
+
var styles$6 = {"doodleHover":"index-module_doodleHover__jIZHV"};
|
|
27185
|
+
styleInject(css_248z$6);
|
|
26523
27186
|
|
|
26524
27187
|
const DoodleTransform = ({ data, isSelected: _isSelected, isHover, onSelect }) => {
|
|
26525
27188
|
const { editMapInfo } = useMapEditContext();
|
|
@@ -26578,7 +27241,7 @@ const DoodleTransform = ({ data, isSelected: _isSelected, isHover, onSelect }) =
|
|
|
26578
27241
|
return (jsx("g", { children: jsx("g", { style: {
|
|
26579
27242
|
cursor: canSelect ? 'pointer' : 'inherit',
|
|
26580
27243
|
pointerEvents: canSelect ? 'auto' : 'none',
|
|
26581
|
-
}, className: isHover ? styles$
|
|
27244
|
+
}, className: isHover ? styles$6.doodleHover : '', transform: transform, opacity: data?.style?.opacity || 1, dangerouslySetInnerHTML: { __html: svgString }, onClick: onDoodleClick }) }));
|
|
26582
27245
|
}
|
|
26583
27246
|
}
|
|
26584
27247
|
catch (error) {
|
|
@@ -26588,12 +27251,13 @@ const DoodleTransform = ({ data, isSelected: _isSelected, isHover, onSelect }) =
|
|
|
26588
27251
|
};
|
|
26589
27252
|
|
|
26590
27253
|
const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, isHover = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, onClickInfo, }) => {
|
|
26591
|
-
const { platform, overlayScale, unitType } = useCommonContext();
|
|
27254
|
+
const { platform, overlayScale, unitType, locale } = useCommonContext();
|
|
26592
27255
|
// 使用自定义hook管理所有变换逻辑
|
|
26593
27256
|
const { currentCenter, currentScale, currentDirection, isDragging, isRotating, isScaling, initializeTransform, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, dimensions, } = useDoodleTransform(data, onTransformChange, {
|
|
26594
27257
|
minScale,
|
|
26595
27258
|
onMinScaleReached,
|
|
26596
27259
|
});
|
|
27260
|
+
const [hoverType, setHoverType] = useState(null);
|
|
26597
27261
|
// 创建变换后的数据对象 - 需要将转换后的坐标转换回原始格式
|
|
26598
27262
|
const transformedData = useMemo(() => {
|
|
26599
27263
|
// 将转换后的坐标转换回原始格式(除以 SCALE_FACTOR 并翻转 Y 轴)
|
|
@@ -26714,7 +27378,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
26714
27378
|
const infoBoxWidth = 300 * overlayScale; // 信息框宽度
|
|
26715
27379
|
const infoBoxHeight = 40 * overlayScale; // 信息框高度
|
|
26716
27380
|
const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
|
|
26717
|
-
const circleScale = platform === PlatformType.H5 ? 1.5 * overlayScale :
|
|
27381
|
+
const circleScale = platform === PlatformType.H5 ? 1.5 * overlayScale : 3 * overlayScale;
|
|
26718
27382
|
const disacledScale = circleScale * 1.2;
|
|
26719
27383
|
return (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#B2B4B9", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
|
|
26720
27384
|
? {
|
|
@@ -26744,7 +27408,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
26744
27408
|
justifyContent: 'center',
|
|
26745
27409
|
gap: '10px',
|
|
26746
27410
|
color: '#325069',
|
|
26747
|
-
}, children: jsxs("div", { children: [
|
|
27411
|
+
}, children: jsxs("div", { children: [locale?.['map.renderer.remainingTime'] || 'Remaining time', ": ", remainingTime] }) }) }) }))] }));
|
|
26748
27412
|
};
|
|
26749
27413
|
useEffect(() => {
|
|
26750
27414
|
const isMove = isDragging || isRotating || isScaling;
|
|
@@ -26796,7 +27460,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
26796
27460
|
const infoBoxWidth = 300 * overlayScale; // 信息框宽度
|
|
26797
27461
|
const infoBoxHeight = 100 * overlayScale; // 信息框高度
|
|
26798
27462
|
const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
|
|
26799
|
-
const scale = platform === PlatformType.H5 ? 1.8 * overlayScale :
|
|
27463
|
+
const scale = platform === PlatformType.H5 ? 1.8 * overlayScale : 3 * overlayScale;
|
|
26800
27464
|
const offsetLeft = 10 * scale;
|
|
26801
27465
|
return (jsxs(Fragment, { children: [showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
|
|
26802
27466
|
onClickInfo?.();
|
|
@@ -26817,7 +27481,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
26817
27481
|
alignItems: 'center',
|
|
26818
27482
|
justifyContent: 'center',
|
|
26819
27483
|
gap: `${10 * overlayScale}px`,
|
|
26820
|
-
}, children: jsxs("div", { children: [
|
|
27484
|
+
}, children: jsxs("div", { children: [locale?.['map.renderer.activeTime'] || 'Active Time', ": ", activeTime, " >"] }) })] }) })), jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
|
|
26821
27485
|
? {
|
|
26822
27486
|
onTouchStart: createReactEventHandler((e) => {
|
|
26823
27487
|
handleMouseDownWithDisabled(e);
|
|
@@ -26833,7 +27497,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
26833
27497
|
}
|
|
26834
27498
|
: {
|
|
26835
27499
|
onMouseDown: handleCancel,
|
|
26836
|
-
}), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformDelete, {}) }) })), jsx("g", { className: "control-point rotate-point", ...(platform === PlatformType.H5
|
|
27500
|
+
}), transform: `translate(${selectionBoxPoints[0].x}, ${selectionBoxPoints[0].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Delete ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Delete), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformDelete, {}) }) })), jsx("g", { className: "control-point rotate-point", ...(platform === PlatformType.H5
|
|
26837
27501
|
? {
|
|
26838
27502
|
onTouchStart: createReactEventHandler((e) => {
|
|
26839
27503
|
handleRotateStartWithDisabled(e);
|
|
@@ -26841,7 +27505,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
26841
27505
|
}
|
|
26842
27506
|
: {
|
|
26843
27507
|
onMouseDown: handleRotateStartWithDisabled,
|
|
26844
|
-
}), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformRotate, {}) }) }), jsx("g", { className: "control-point move-point", ...(platform === PlatformType.H5
|
|
27508
|
+
}), transform: `translate(${selectionBoxPoints[3].x}, ${selectionBoxPoints[3].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Rotate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Rotate), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformRotate, {}) }) }), jsx("g", { className: "control-point move-point", ...(platform === PlatformType.H5
|
|
26845
27509
|
? {
|
|
26846
27510
|
onTouchStart: createReactEventHandler((e) => {
|
|
26847
27511
|
handleMouseDownWithDisabled(e);
|
|
@@ -26849,7 +27513,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
26849
27513
|
}
|
|
26850
27514
|
: {
|
|
26851
27515
|
onMouseDown: handleMouseDownWithDisabled,
|
|
26852
|
-
}), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformTranslate, {}) }) }), jsx("g", { className: "control-point scale-point", ...(platform === PlatformType.H5
|
|
27516
|
+
}), transform: `translate(${selectionBoxPoints[1].x}, ${selectionBoxPoints[1].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Translate ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Translate), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformTranslate, {}) }) }), jsx("g", { className: "control-point scale-point", ...(platform === PlatformType.H5
|
|
26853
27517
|
? {
|
|
26854
27518
|
onTouchStart: createReactEventHandler((e) => {
|
|
26855
27519
|
handleScaleStartWithDisabled(e);
|
|
@@ -26857,7 +27521,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
26857
27521
|
}
|
|
26858
27522
|
: {
|
|
26859
27523
|
onMouseDown: handleScaleStartWithDisabled,
|
|
26860
|
-
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })] }));
|
|
27524
|
+
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale * (hoverType === HoverType.Scale ? 1.15 : 1)})`, onMouseEnter: () => setHoverType(HoverType.Scale), onMouseLeave: () => setHoverType(null), children: jsx(SvgTransformScale, {}) }) })] }));
|
|
26861
27525
|
})()] }));
|
|
26862
27526
|
};
|
|
26863
27527
|
|
|
@@ -27415,9 +28079,9 @@ const SvgMapComponent = forwardRef(({ editMap, pathData, mapConfig = {}, mowPart
|
|
|
27415
28079
|
// 设置显示名称以便调试
|
|
27416
28080
|
SvgMapComponent.displayName = 'SvgMapComponent';
|
|
27417
28081
|
|
|
27418
|
-
var css_248z$
|
|
27419
|
-
var styles$
|
|
27420
|
-
styleInject(css_248z$
|
|
28082
|
+
var css_248z$5 = ".index-module_mowerPosition__yLpIU {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n}";
|
|
28083
|
+
var styles$5 = {"mowerPosition":"index-module_mowerPosition__yLpIU"};
|
|
28084
|
+
styleInject(css_248z$5);
|
|
27421
28085
|
|
|
27422
28086
|
const usePosition = ({ mowerPositionData, viewBox, modelType, hasEdger, mapData, realTimeData, onMowingPositionChange, }) => {
|
|
27423
28087
|
// DOM 元素引用,用于直接操作
|
|
@@ -27576,10 +28240,10 @@ const usePosition = ({ mowerPositionData, viewBox, modelType, hasEdger, mapData,
|
|
|
27576
28240
|
}
|
|
27577
28241
|
else {
|
|
27578
28242
|
// 检查位置是否有效
|
|
27579
|
-
const positionOutOfRange = isOutOfRange(mowerPositionData);
|
|
28243
|
+
// const positionOutOfRange = isOutOfRange(mowerPositionData);
|
|
27580
28244
|
const positionInvalid = isInvalidPosition(mowerPositionData);
|
|
27581
28245
|
const isStandby = mowerPositionData.vehicleState === RobotStatus.STANDBY;
|
|
27582
|
-
if (
|
|
28246
|
+
if (positionInvalid || isOffLine) {
|
|
27583
28247
|
// 位置无效时,尝试使用上次位置或充电桩位置
|
|
27584
28248
|
updatePositionByLastPosition(mowerPositionData);
|
|
27585
28249
|
}
|
|
@@ -27643,7 +28307,7 @@ const MowerPosition = React__default.memo(({ editMap, mowerPositionData, viewBox
|
|
|
27643
28307
|
zIndex: 1000,
|
|
27644
28308
|
opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
|
|
27645
28309
|
}), [isHighlight]);
|
|
27646
|
-
return (jsx("div", { className: styles$
|
|
28310
|
+
return (jsx("div", { className: styles$5.mowerPosition, style: containerStyle, children: jsx("div", { ref: elementRef, className: "mower-position", style: {
|
|
27647
28311
|
position: 'absolute',
|
|
27648
28312
|
width: 30,
|
|
27649
28313
|
height: 30,
|
|
@@ -27655,11 +28319,12 @@ const MowerPosition = React__default.memo(({ editMap, mowerPositionData, viewBox
|
|
|
27655
28319
|
}, children: jsx("img", { src: mowerImage, style: { width: '100%', height: '100%', objectFit: 'contain' } }) }) }));
|
|
27656
28320
|
});
|
|
27657
28321
|
|
|
27658
|
-
var css_248z$
|
|
27659
|
-
var styles$
|
|
27660
|
-
styleInject(css_248z$
|
|
28322
|
+
var css_248z$4 = ".index-module_container__7IatW {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.index-module_boundaryLabel__GDHFn {\n position: absolute;\n background-color: rgba(30, 30, 31, 0.6);\n color: rgb(255, 255, 255);\n padding: 6px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: bold;\n max-width: 220px;\n pointer-events: auto;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n}\n.index-module_boundaryLabel__GDHFn .index-module_isolatedIcon__1pRXN {\n position: absolute;\n width: 24px;\n height: 24px;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.index-module_base__qy2SG {\n font-size: 14px;\n}\n\n.index-module_extended__0TMAt {\n margin-top: 6px;\n font-size: 11px;\n opacity: 0.9;\n border-top: 1px solid rgba(255, 255, 255, 0.2);\n padding-top: 6px;\n}";
|
|
28323
|
+
var styles$4 = {"container":"index-module_container__7IatW","boundaryLabel":"index-module_boundaryLabel__GDHFn","isolatedIcon":"index-module_isolatedIcon__1pRXN","base":"index-module_base__qy2SG","extended":"index-module_extended__0TMAt"};
|
|
28324
|
+
styleInject(css_248z$4);
|
|
27661
28325
|
|
|
27662
28326
|
const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionData, realTimeData = [], onlyRead = false, }) => {
|
|
28327
|
+
const { locale } = useCommonContext();
|
|
27663
28328
|
const [processStateIsMowing, updateProcessStateIsMowing] = useState(false);
|
|
27664
28329
|
// 处理地图分区边界
|
|
27665
28330
|
useMemo(() => {
|
|
@@ -27699,6 +28364,9 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
|
|
|
27699
28364
|
return generateBoundaryData(mapData, newPathData);
|
|
27700
28365
|
}
|
|
27701
28366
|
}, [mapData, pathData, realTimeData]);
|
|
28367
|
+
const coverageStr = useMemo(() => {
|
|
28368
|
+
return locale?.['map.renderer.coverage'] || 'Coverage';
|
|
28369
|
+
}, [locale]);
|
|
27702
28370
|
const items = useMemo(() => {
|
|
27703
28371
|
// console.log('boundartItme->', viewBox, mapData)
|
|
27704
28372
|
if (!mapData || !viewBox)
|
|
@@ -27708,7 +28376,7 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
|
|
|
27708
28376
|
const results = [];
|
|
27709
28377
|
for (const boundary of boundaryData) {
|
|
27710
28378
|
// 多边形重心
|
|
27711
|
-
const centroid = computePolygonCentroid(boundary.points);
|
|
28379
|
+
const centroid = computePolygonCentroid$1(boundary.points);
|
|
27712
28380
|
if (!centroid)
|
|
27713
28381
|
continue;
|
|
27714
28382
|
const relX = (centroid.x - viewBox.x) / viewBox.width;
|
|
@@ -27719,9 +28387,9 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
|
|
|
27719
28387
|
const baseText = onlyRead ? `${boundary.name}` : `${boundary.name} (${progress})`;
|
|
27720
28388
|
const totalArea = convertAreaByUnits(boundary.area || 0, unitType);
|
|
27721
28389
|
const finishedArea = convertAreaByUnits(boundary.finishedArea || 0, unitType);
|
|
27722
|
-
const coverageText =
|
|
28390
|
+
const coverageText = `${coverageStr}: ${finishedArea.value}/${totalArea.value}`;
|
|
27723
28391
|
const isMowing = mowingIds.includes(boundary.id);
|
|
27724
|
-
const dateText = formatBoundaryDateText(isMowing ? Date.now() / 1000 : boundary.endTime || 0);
|
|
28392
|
+
const dateText = formatBoundaryDateText(isMowing ? Date.now() / 1000 : boundary.endTime || 0, locale);
|
|
27725
28393
|
results.push({
|
|
27726
28394
|
id: boundary.id,
|
|
27727
28395
|
name: boundary.name,
|
|
@@ -27745,11 +28413,13 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
|
|
|
27745
28413
|
mowPartitionData,
|
|
27746
28414
|
boundaryData,
|
|
27747
28415
|
onlyRead,
|
|
28416
|
+
coverageStr,
|
|
28417
|
+
locale,
|
|
27748
28418
|
]);
|
|
27749
28419
|
const containerZIndex = 900;
|
|
27750
28420
|
return { items, containerZIndex };
|
|
27751
28421
|
};
|
|
27752
|
-
function computePolygonCentroid(points) {
|
|
28422
|
+
function computePolygonCentroid$1(points) {
|
|
27753
28423
|
if (!points || points.length < 3)
|
|
27754
28424
|
return null;
|
|
27755
28425
|
const valid = points.filter((p) => p.length >= 2);
|
|
@@ -27822,7 +28492,7 @@ const BoundaryLabels = React__default.memo(({ editMap, mapData, pathData, unitTy
|
|
|
27822
28492
|
display: editMap ? 'none' : 'block',
|
|
27823
28493
|
opacity: isHighlight ? SvgMapOpacity.HIGHLIGHT : SvgMapOpacity.UN_HIGHLIGHT,
|
|
27824
28494
|
}), [containerZIndex, expandedId, editMap, isHighlight]);
|
|
27825
|
-
return (jsx("div", { className: styles$
|
|
28495
|
+
return (jsx("div", { className: styles$4.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `${styles$4.boundaryLabel} boundary-label`, "data-boundary-id": item.id, style: {
|
|
27826
28496
|
transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
|
|
27827
28497
|
left: `${item.leftPct}%`,
|
|
27828
28498
|
top: `${item.topPct}%`,
|
|
@@ -27833,12 +28503,12 @@ const BoundaryLabels = React__default.memo(({ editMap, mapData, pathData, unitTy
|
|
|
27833
28503
|
if (onlyRead)
|
|
27834
28504
|
return;
|
|
27835
28505
|
handleClick(item.id);
|
|
27836
|
-
}, children: [jsx("div", { className: styles$
|
|
28506
|
+
}, children: [jsx("div", { className: styles$4.base, children: item.baseText }), jsxs("div", { className: styles$4.extended, style: { display: expandedId === item.id ? 'block' : 'none' }, children: [jsx("div", { style: { marginBottom: 3, fontWeight: 'bold' }, children: item.coverageText }), jsx("div", { children: item.dateText })] }), item.isIsolated && (jsx("div", { className: styles$4.isolatedIcon, dangerouslySetInnerHTML: { __html: ISOLATED_BOUNDARY_SVG } }))] }, item.id))) }));
|
|
27837
28507
|
});
|
|
27838
28508
|
|
|
27839
|
-
var css_248z$
|
|
27840
|
-
var styles$
|
|
27841
|
-
styleInject(css_248z$
|
|
28509
|
+
var css_248z$3 = ".index-module_container__gB52e {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.index-module_item__zHoZP {\n position: absolute;\n pointer-events: auto;\n}\n\n.index-module_icon__CS56A {\n position: relative;\n width: 24px;\n height: 24px;\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.index-module_tooltip__NMCmR {\n position: absolute;\n bottom: 40px;\n left: 0;\n background-color: rgb(247, 251, 255);\n color: rgb(65, 93, 116);\n padding: 10px;\n border-radius: 16px;\n font-size: 14px;\n text-align: left;\n}";
|
|
28510
|
+
var styles$3 = {"container":"index-module_container__gB52e","item":"index-module_item__zHoZP","icon":"index-module_icon__CS56A","tooltip":"index-module_tooltip__NMCmR"};
|
|
28511
|
+
styleInject(css_248z$3);
|
|
27842
28512
|
|
|
27843
28513
|
var antennaOneOnline = "data:image/png;base64,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";
|
|
27844
28514
|
|
|
@@ -27850,6 +28520,7 @@ var antennaTwoOffline = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgC
|
|
|
27850
28520
|
|
|
27851
28521
|
const useAntennaInfo = (data = [], options = {}) => {
|
|
27852
28522
|
const { viewBox } = options;
|
|
28523
|
+
const { locale } = useCommonContext();
|
|
27853
28524
|
const items = useMemo(() => {
|
|
27854
28525
|
if (!data || data.length === 0 || !viewBox)
|
|
27855
28526
|
return [];
|
|
@@ -27880,8 +28551,8 @@ const useAntennaInfo = (data = [], options = {}) => {
|
|
|
27880
28551
|
isOnline: antenna1.status === 1,
|
|
27881
28552
|
imageSrc: getImage(1, antenna1.status === 1),
|
|
27882
28553
|
tooltip: {
|
|
27883
|
-
title: 'Primary Antenna',
|
|
27884
|
-
statusText: antenna1.status === 1 ? 'Online' : 'Offline',
|
|
28554
|
+
title: locale?.['map.renderer.primaryAntenna'] || 'Primary Antenna',
|
|
28555
|
+
statusText: antenna1.status === 1 ? (locale?.['map.renderer.online'] || 'Online') : (locale?.['map.renderer.online'] || 'Offline'),
|
|
27885
28556
|
minWidth: 130,
|
|
27886
28557
|
},
|
|
27887
28558
|
});
|
|
@@ -27920,15 +28591,15 @@ const useAntennaInfo = (data = [], options = {}) => {
|
|
|
27920
28591
|
isOnline: antenna2.status === 1,
|
|
27921
28592
|
imageSrc: getImage(2, antenna2.status === 1),
|
|
27922
28593
|
tooltip: {
|
|
27923
|
-
title: 'Signal Enhancement Antenna',
|
|
27924
|
-
statusText: antenna2.status === 1 ? 'Online' : 'Offline',
|
|
27925
|
-
syncText: antenna2.status === 1 ? '
|
|
28594
|
+
title: locale?.['map.renderer.signalAntenna'] || 'Signal Enhancement Antenna',
|
|
28595
|
+
statusText: antenna2.status === 1 ? (locale?.['map.renderer.online'] || 'Online') : (locale?.['map.renderer.offline'] || 'Offline'),
|
|
28596
|
+
syncText: antenna2.status === 1 ? `, ${locale?.['map.renderer.synced'] || 'Synced'}` : `, ${locale?.['map.renderer.toBeSynced'] || 'To be synced'}`,
|
|
27926
28597
|
minWidth: 195,
|
|
27927
28598
|
},
|
|
27928
28599
|
});
|
|
27929
28600
|
}
|
|
27930
28601
|
return results;
|
|
27931
|
-
}, [data, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height]);
|
|
28602
|
+
}, [data, viewBox?.x, viewBox?.y, viewBox?.width, viewBox?.height, locale]);
|
|
27932
28603
|
// default stacking order (slightly higher than boundary labels' 900)
|
|
27933
28604
|
const containerZIndex = 950;
|
|
27934
28605
|
return { items, containerZIndex };
|
|
@@ -27956,13 +28627,13 @@ const Antennas = React__default.memo(({ editMap, antennaConfig = [], viewBox, ro
|
|
|
27956
28627
|
document.addEventListener('pointerdown', handleOutside);
|
|
27957
28628
|
return () => document.removeEventListener('pointerdown', handleOutside);
|
|
27958
28629
|
}, []);
|
|
27959
|
-
return (jsx("div", { className: styles$
|
|
28630
|
+
return (jsx("div", { className: styles$3.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `antenna-container-item ${styles$3.item}`, style: {
|
|
27960
28631
|
left: `${item.leftPct}%`,
|
|
27961
28632
|
top: `${item.topPct}%`,
|
|
27962
28633
|
transform: `translate(calc(-50% + ${item.offsetX || 0}px), calc(-50% + ${item.offsetY || 0}px)) rotate(${-rotation}deg)`,
|
|
27963
28634
|
zIndex: openType === item.type ? 10000 : containerZIndex,
|
|
27964
28635
|
pointerEvents: onlyRead ? 'none' : 'auto',
|
|
27965
|
-
}, children: [jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$
|
|
28636
|
+
}, children: [jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$3.icon}`, style: {}, onClick: (e) => {
|
|
27966
28637
|
e.stopPropagation();
|
|
27967
28638
|
if (onlyRead)
|
|
27968
28639
|
return;
|
|
@@ -27977,95 +28648,15 @@ const Antennas = React__default.memo(({ editMap, antennaConfig = [], viewBox, ro
|
|
|
27977
28648
|
return;
|
|
27978
28649
|
e.currentTarget.style.transform =
|
|
27979
28650
|
'scale(1)';
|
|
27980
|
-
}, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxs("div", { className: styles$
|
|
28651
|
+
}, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxs("div", { className: styles$3.tooltip, style: {
|
|
27981
28652
|
display: openType === item.type ? 'block' : 'none',
|
|
27982
28653
|
minWidth: item.tooltip.minWidth,
|
|
27983
28654
|
}, children: [jsx("div", { style: { marginBottom: 4, fontWeight: 600 }, children: item.tooltip.title }), jsxs("div", { style: { color: 'rgba(65, 93, 116, 1)', fontWeight: 400 }, children: [item.tooltip.statusText, item.tooltip.syncText || ''] })] })] }, `antenna-${item.type}`))) }));
|
|
27984
28655
|
});
|
|
27985
28656
|
|
|
27986
|
-
var css_248z$
|
|
27987
|
-
var styles$
|
|
27988
|
-
styleInject(css_248z$
|
|
27989
|
-
|
|
27990
|
-
var classnames = {exports: {}};
|
|
27991
|
-
|
|
27992
|
-
/*!
|
|
27993
|
-
Copyright (c) 2018 Jed Watson.
|
|
27994
|
-
Licensed under the MIT License (MIT), see
|
|
27995
|
-
http://jedwatson.github.io/classnames
|
|
27996
|
-
*/
|
|
27997
|
-
|
|
27998
|
-
(function (module) {
|
|
27999
|
-
/* global define */
|
|
28000
|
-
|
|
28001
|
-
(function () {
|
|
28002
|
-
|
|
28003
|
-
var hasOwn = {}.hasOwnProperty;
|
|
28004
|
-
|
|
28005
|
-
function classNames () {
|
|
28006
|
-
var classes = '';
|
|
28007
|
-
|
|
28008
|
-
for (var i = 0; i < arguments.length; i++) {
|
|
28009
|
-
var arg = arguments[i];
|
|
28010
|
-
if (arg) {
|
|
28011
|
-
classes = appendClass(classes, parseValue(arg));
|
|
28012
|
-
}
|
|
28013
|
-
}
|
|
28014
|
-
|
|
28015
|
-
return classes;
|
|
28016
|
-
}
|
|
28017
|
-
|
|
28018
|
-
function parseValue (arg) {
|
|
28019
|
-
if (typeof arg === 'string' || typeof arg === 'number') {
|
|
28020
|
-
return arg;
|
|
28021
|
-
}
|
|
28022
|
-
|
|
28023
|
-
if (typeof arg !== 'object') {
|
|
28024
|
-
return '';
|
|
28025
|
-
}
|
|
28026
|
-
|
|
28027
|
-
if (Array.isArray(arg)) {
|
|
28028
|
-
return classNames.apply(null, arg);
|
|
28029
|
-
}
|
|
28030
|
-
|
|
28031
|
-
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
|
|
28032
|
-
return arg.toString();
|
|
28033
|
-
}
|
|
28034
|
-
|
|
28035
|
-
var classes = '';
|
|
28036
|
-
|
|
28037
|
-
for (var key in arg) {
|
|
28038
|
-
if (hasOwn.call(arg, key) && arg[key]) {
|
|
28039
|
-
classes = appendClass(classes, key);
|
|
28040
|
-
}
|
|
28041
|
-
}
|
|
28042
|
-
|
|
28043
|
-
return classes;
|
|
28044
|
-
}
|
|
28045
|
-
|
|
28046
|
-
function appendClass (value, newClass) {
|
|
28047
|
-
if (!newClass) {
|
|
28048
|
-
return value;
|
|
28049
|
-
}
|
|
28050
|
-
|
|
28051
|
-
if (value) {
|
|
28052
|
-
return value + ' ' + newClass;
|
|
28053
|
-
}
|
|
28054
|
-
|
|
28055
|
-
return value + newClass;
|
|
28056
|
-
}
|
|
28057
|
-
|
|
28058
|
-
if (module.exports) {
|
|
28059
|
-
classNames.default = classNames;
|
|
28060
|
-
module.exports = classNames;
|
|
28061
|
-
} else {
|
|
28062
|
-
window.classNames = classNames;
|
|
28063
|
-
}
|
|
28064
|
-
}());
|
|
28065
|
-
} (classnames));
|
|
28066
|
-
|
|
28067
|
-
var classnamesExports = classnames.exports;
|
|
28068
|
-
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
28657
|
+
var css_248z$2 = ".index-module_mapEdit__XC5Gw {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n cursor: default;\n min-width: 1px;\n min-height: 1px;\n}\n.index-module_mapEdit__XC5Gw.index-module_createMode__14EPH {\n cursor: crosshair;\n}\n.index-module_mapEdit__XC5Gw.index-module_notCreateCursor__1-OjF {\n cursor: no-drop;\n}";
|
|
28658
|
+
var styles$2 = {"mapEdit":"index-module_mapEdit__XC5Gw","createMode":"index-module_createMode__14EPH","notCreateCursor":"index-module_notCreateCursor__1-OjF"};
|
|
28659
|
+
styleInject(css_248z$2);
|
|
28069
28660
|
|
|
28070
28661
|
/******************************************************************************
|
|
28071
28662
|
Copyright (c) Microsoft Corporation.
|
|
@@ -29065,7 +29656,7 @@ const CreateObstacleElement = forwardRef(({ enabled = false, svgElement, onPoint
|
|
|
29065
29656
|
if (!enabled || points.length === 0) {
|
|
29066
29657
|
return null;
|
|
29067
29658
|
}
|
|
29068
|
-
return (jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 1, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
|
|
29659
|
+
return (jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 1.8, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
|
|
29069
29660
|
});
|
|
29070
29661
|
CreateObstacleElement.displayName = 'CreateObstacleElement';
|
|
29071
29662
|
|
|
@@ -29103,7 +29694,7 @@ const useCreateVisionOffElement = () => {
|
|
|
29103
29694
|
[maxX, minY],
|
|
29104
29695
|
];
|
|
29105
29696
|
return elementPoints;
|
|
29106
|
-
}, [centerPoint, elementWidth, editMapInfo.allVisionOffPoints]);
|
|
29697
|
+
}, [centerPoint, elementWidth, editMapInfo.allVisionOffPoints, svgViewBox]);
|
|
29107
29698
|
return {
|
|
29108
29699
|
centerPoint,
|
|
29109
29700
|
getVisionOffPoints,
|
|
@@ -29338,9 +29929,9 @@ const SvgEditMap = forwardRef(({ mapConfig, onEditInfoMapChange, editMap }, ref)
|
|
|
29338
29929
|
const onMouseLeave = () => {
|
|
29339
29930
|
setHoverDataId('');
|
|
29340
29931
|
};
|
|
29341
|
-
return (jsx("div", { ref: containerRef, className: classNames(styles$
|
|
29342
|
-
[styles$
|
|
29343
|
-
[styles$
|
|
29932
|
+
return (jsx("div", { ref: containerRef, className: classNames(styles$2.mapEdit, {
|
|
29933
|
+
[styles$2.createMode]: isCreating,
|
|
29934
|
+
[styles$2.notCreateCursor]: showNotCreateCursor,
|
|
29344
29935
|
}),
|
|
29345
29936
|
// style={{
|
|
29346
29937
|
// position: 'absolute',
|
|
@@ -29446,6 +30037,22 @@ const SvgEditMap = forwardRef(({ mapConfig, onEditInfoMapChange, editMap }, ref)
|
|
|
29446
30037
|
});
|
|
29447
30038
|
SvgEditMap.displayName = 'SvgEditMap';
|
|
29448
30039
|
|
|
30040
|
+
/** 清理为合法的 SVG/HTML id 片段 */
|
|
30041
|
+
function sanitizeSvgIdPart(value) {
|
|
30042
|
+
return value.replace(/[^a-zA-Z0-9_.-]/g, '_');
|
|
30043
|
+
}
|
|
30044
|
+
/**
|
|
30045
|
+
* 通道 clipPath 的 SVG id
|
|
30046
|
+
* 组合 sn、useId、时间戳、随机数,避免同页多地图实例 id 冲突
|
|
30047
|
+
*/
|
|
30048
|
+
function createChannelClipPathId(params) {
|
|
30049
|
+
const snPart = sanitizeSvgIdPart(params.sn || 'map');
|
|
30050
|
+
const reactPart = sanitizeSvgIdPart(params.reactId.replace(/:/g, ''));
|
|
30051
|
+
const timestamp = Date.now();
|
|
30052
|
+
const randomPart = Math.random().toString(36).slice(2, 10);
|
|
30053
|
+
return `channel-clip-path-${snPart}-${reactPart}-${timestamp}-${randomPart}`;
|
|
30054
|
+
}
|
|
30055
|
+
|
|
29449
30056
|
var _path;
|
|
29450
30057
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
29451
30058
|
var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
|
|
@@ -29463,9 +30070,9 @@ var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
|
|
|
29463
30070
|
})));
|
|
29464
30071
|
};
|
|
29465
30072
|
|
|
29466
|
-
var css_248z = ".index-module_crosshair__etey6 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 40px;\n pointer-events: none;\n z-index: 99999;\n display: flex;\n justify-content: center;\n align-items: center;\n}";
|
|
29467
|
-
var styles = {"crosshair":"index-module_crosshair__etey6"};
|
|
29468
|
-
styleInject(css_248z);
|
|
30073
|
+
var css_248z$1 = ".index-module_crosshair__etey6 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 40px;\n height: 40px;\n pointer-events: none;\n z-index: 99999;\n display: flex;\n justify-content: center;\n align-items: center;\n}";
|
|
30074
|
+
var styles$1 = {"crosshair":"index-module_crosshair__etey6"};
|
|
30075
|
+
styleInject(css_248z$1);
|
|
29469
30076
|
|
|
29470
30077
|
/**
|
|
29471
30078
|
* 十字准心组件
|
|
@@ -29482,19 +30089,19 @@ const Crosshair = () => {
|
|
|
29482
30089
|
}
|
|
29483
30090
|
return false;
|
|
29484
30091
|
}, [platform, editMapInfo]);
|
|
29485
|
-
return isVisible ? (jsx("div", { className: styles.crosshair, children: jsx(SvgMobileAddPoint, {}) })) : null;
|
|
30092
|
+
return isVisible ? (jsx("div", { className: styles$1.crosshair, children: jsx(SvgMobileAddPoint, {}) })) : null;
|
|
29486
30093
|
};
|
|
29487
30094
|
|
|
29488
|
-
const WGS84 = 'EPSG:4326';
|
|
29489
|
-
const WEB_MERCATOR = 'EPSG:3857';
|
|
29490
|
-
proj4.defs(WGS84, '+proj=longlat +datum=WGS84 +no_defs');
|
|
29491
|
-
proj4.defs(WEB_MERCATOR, '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
|
|
30095
|
+
const WGS84$1 = 'EPSG:4326';
|
|
30096
|
+
const WEB_MERCATOR$1 = 'EPSG:3857';
|
|
30097
|
+
proj4.defs(WGS84$1, '+proj=longlat +datum=WGS84 +no_defs');
|
|
30098
|
+
proj4.defs(WEB_MERCATOR$1, '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
|
|
29492
30099
|
// 默认配置
|
|
29493
30100
|
const defaultMapConfig$1 = DEFAULT_STYLES;
|
|
29494
30101
|
// 地图渲染器组件
|
|
29495
30102
|
const MowerMapRenderer = forwardRef(({ sn, mowerIconConfig = {}, platform = PlatformType.WEB, mapType = MapType.NORMAL, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = false, isHighlight = true, mapConfig,
|
|
29496
30103
|
// pathConfig,
|
|
29497
|
-
modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onError, className, style, zIndex, googleMapInstance: _googleMapInstance, dragMap = false, canRotateMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, googleMapStaticApiKey, onHandleEvent, onSelectElement, onH5FirstSelectObstaclePoint, }, ref) => {
|
|
30104
|
+
modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onError, className, style, zIndex, googleMapInstance: _googleMapInstance, dragMap = false, canRotateMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, googleMapStaticApiKey, googleMapStaticUrlSigningSecret, signGoogleStaticMapUrl, onHandleEvent, onSelectElement, onH5FirstSelectObstaclePoint, locale, }, ref) => {
|
|
29498
30105
|
const [currentError, setCurrentError] = useState(null);
|
|
29499
30106
|
// const mapRef = useMap();
|
|
29500
30107
|
const [processStateIsMowing, setProcessStateIsMowing] = useState(false);
|
|
@@ -29522,6 +30129,8 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
|
|
|
29522
30129
|
...INIT_EDIT_MAP_INFO,
|
|
29523
30130
|
});
|
|
29524
30131
|
const [mowingPartitions, setMowingPartitions] = useState([]);
|
|
30132
|
+
const reactInstanceId = useId();
|
|
30133
|
+
const channelClipPathId = useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
|
|
29525
30134
|
const minDistance = useMemo(() => {
|
|
29526
30135
|
return getMinSvgDistanceByModel(modelType);
|
|
29527
30136
|
}, [modelType]);
|
|
@@ -29655,13 +30264,25 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
|
|
|
29655
30264
|
const mowerPositionData = useMemo(() => {
|
|
29656
30265
|
// realTimeData 中包含三个种类的数据,之需要实时坐标的数据即可。
|
|
29657
30266
|
// 在初始的状态按照正常图标进行渲染,所以构造一个基本在rtk桩的一个数据
|
|
29658
|
-
if (!realTimeData || realTimeData.length === 0)
|
|
29659
|
-
|
|
29660
|
-
|
|
29661
|
-
|
|
29662
|
-
|
|
29663
|
-
|
|
29664
|
-
|
|
30267
|
+
if (!realTimeData || realTimeData.length === 0) {
|
|
30268
|
+
const chargingPiles = svgElementDatas?.[DataType.CHARGING_PILE]?.[0];
|
|
30269
|
+
if (chargingPiles?.position) {
|
|
30270
|
+
return {
|
|
30271
|
+
postureX: chargingPiles.position?.[0],
|
|
30272
|
+
postureY: chargingPiles.position?.[1],
|
|
30273
|
+
postureTheta: chargingPiles.direction - Math.PI || 0,
|
|
30274
|
+
vehicleState: RobotStatus.PARKED,
|
|
30275
|
+
};
|
|
30276
|
+
}
|
|
30277
|
+
else {
|
|
30278
|
+
return {
|
|
30279
|
+
postureX: 0.01,
|
|
30280
|
+
postureY: 0.1,
|
|
30281
|
+
postureTheta: 0.01,
|
|
30282
|
+
vehicleState: RobotStatus.PARKED,
|
|
30283
|
+
};
|
|
30284
|
+
}
|
|
30285
|
+
}
|
|
29665
30286
|
let currentPositionData;
|
|
29666
30287
|
if (realTimeData.length === 1 && realTimeData[0].type === RealTimeDataType.LOCATION) {
|
|
29667
30288
|
currentPositionData = realTimeData[0];
|
|
@@ -29705,14 +30326,14 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
|
|
|
29705
30326
|
const validBounds = getValidGpsBounds(mapJson, 0);
|
|
29706
30327
|
const [swLng0, swLat0] = validBounds.sw;
|
|
29707
30328
|
const [neLng0, neLat0] = validBounds.ne;
|
|
29708
|
-
const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
|
|
29709
|
-
const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
|
|
30329
|
+
const [swX0, swY0] = proj4(WGS84$1, WEB_MERCATOR$1, [swLng0, swLat0]);
|
|
30330
|
+
const [neX0, neY0] = proj4(WGS84$1, WEB_MERCATOR$1, [neLng0, neLat0]);
|
|
29710
30331
|
const swX = swX0 + drag.x;
|
|
29711
30332
|
const swY = swY0 + drag.y;
|
|
29712
30333
|
const neX = neX0 + drag.x;
|
|
29713
30334
|
const neY = neY0 + drag.y;
|
|
29714
|
-
const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
|
|
29715
|
-
const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
|
|
30335
|
+
const [swLng, swLat] = proj4(WEB_MERCATOR$1, WGS84$1, [swX, swY]);
|
|
30336
|
+
const [neLng, neLat] = proj4(WEB_MERCATOR$1, WGS84$1, [neX, neY]);
|
|
29716
30337
|
return new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), new window.google.maps.LatLng(neLat, neLng));
|
|
29717
30338
|
}, [mapJson, drag.x, drag.y]);
|
|
29718
30339
|
const commonValue = useMemo(() => {
|
|
@@ -29740,7 +30361,11 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
|
|
|
29740
30361
|
showStraddleBoundaryBorder,
|
|
29741
30362
|
overlayLayout,
|
|
29742
30363
|
googleMapStaticApiKey,
|
|
30364
|
+
googleMapStaticUrlSigningSecret,
|
|
30365
|
+
locale,
|
|
30366
|
+
signGoogleStaticMapUrl,
|
|
29743
30367
|
onH5FirstSelectObstaclePoint,
|
|
30368
|
+
channelClipPathId,
|
|
29744
30369
|
};
|
|
29745
30370
|
}, [
|
|
29746
30371
|
sn,
|
|
@@ -29763,13 +30388,17 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
|
|
|
29763
30388
|
showStraddleBoundaryBorder,
|
|
29764
30389
|
overlayLayout,
|
|
29765
30390
|
googleMapStaticApiKey,
|
|
30391
|
+
googleMapStaticUrlSigningSecret,
|
|
30392
|
+
locale,
|
|
30393
|
+
signGoogleStaticMapUrl,
|
|
29766
30394
|
onH5FirstSelectObstaclePoint,
|
|
30395
|
+
channelClipPathId,
|
|
29767
30396
|
]);
|
|
29768
30397
|
/**
|
|
29769
30398
|
* 这里做了一个配置,以防以后如果有多种不同的类型的情况,需要展示不同的元素
|
|
29770
30399
|
*/
|
|
29771
30400
|
const mapHasElements = useMemo(() => {
|
|
29772
|
-
//
|
|
30401
|
+
// 地理围栏地图,有充电桩,没有天线,没有割草机位置,没有分区名称气泡
|
|
29773
30402
|
if (mapType === MapType.GEO_FENCE) {
|
|
29774
30403
|
return {
|
|
29775
30404
|
hasChargingPile: true,
|
|
@@ -29800,14 +30429,14 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
|
|
|
29800
30429
|
// 地图数据中的坐标格式是 [longitude, latitude]
|
|
29801
30430
|
const [swLng0, swLat0] = validBounds.sw;
|
|
29802
30431
|
const [neLng0, neLat0] = validBounds.ne;
|
|
29803
|
-
const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
|
|
29804
|
-
const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
|
|
30432
|
+
const [swX0, swY0] = proj4(WGS84$1, WEB_MERCATOR$1, [swLng0, swLat0]);
|
|
30433
|
+
const [neX0, neY0] = proj4(WGS84$1, WEB_MERCATOR$1, [neLng0, neLat0]);
|
|
29805
30434
|
const swX = swX0 + defaultTransform.x;
|
|
29806
30435
|
const swY = swY0 + defaultTransform.y;
|
|
29807
30436
|
const neX = neX0 + defaultTransform.x;
|
|
29808
30437
|
const neY = neY0 + defaultTransform.y;
|
|
29809
|
-
const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
|
|
29810
|
-
const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
|
|
30438
|
+
const [swLng, swLat] = proj4(WEB_MERCATOR$1, WGS84$1, [swX, swY]);
|
|
30439
|
+
const [neLng, neLat] = proj4(WEB_MERCATOR$1, WGS84$1, [neX, neY]);
|
|
29811
30440
|
const googleBounds = new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), // 西南角
|
|
29812
30441
|
new window.google.maps.LatLng(neLat, neLng) // 东北角
|
|
29813
30442
|
);
|
|
@@ -29834,8 +30463,8 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
|
|
|
29834
30463
|
const offsetLatLng = overlayProjection.fromDivPixelToLatLng(offsetPixel);
|
|
29835
30464
|
if (!offsetLatLng)
|
|
29836
30465
|
return;
|
|
29837
|
-
const [cx, cy] = proj4(WGS84, WEB_MERCATOR, [centerLatLng.lng(), centerLatLng.lat()]);
|
|
29838
|
-
const [ox, oy] = proj4(WGS84, WEB_MERCATOR, [offsetLatLng.lng(), offsetLatLng.lat()]);
|
|
30466
|
+
const [cx, cy] = proj4(WGS84$1, WEB_MERCATOR$1, [centerLatLng.lng(), centerLatLng.lat()]);
|
|
30467
|
+
const [ox, oy] = proj4(WGS84$1, WEB_MERCATOR$1, [offsetLatLng.lng(), offsetLatLng.lat()]);
|
|
29839
30468
|
const dx = ox - cx;
|
|
29840
30469
|
const dy = oy - cy;
|
|
29841
30470
|
setDrag((prev) => ({
|
|
@@ -29878,7 +30507,10 @@ modelType, showStraddleBoundaryBorder = true, mapRef, mapJson, pathJson, realTim
|
|
|
29878
30507
|
// 如果当前是taskDelay的状态,或者状态为mowing或者standby,则指定的地块需要高亮,或者全局高亮
|
|
29879
30508
|
if ((isTaskDelayRef.current ||
|
|
29880
30509
|
positionData?.vehicleState === RobotStatus.MOWING ||
|
|
29881
|
-
positionData?.vehicleState === RobotStatus.STANDBY
|
|
30510
|
+
positionData?.vehicleState === RobotStatus.STANDBY ||
|
|
30511
|
+
(!positionData &&
|
|
30512
|
+
(currentVehicleStateRef.current === RobotStatus.MOWING ||
|
|
30513
|
+
currentVehicleStateRef.current === RobotStatus.STANDBY))) &&
|
|
29882
30514
|
mowPartitionDataRef.current &&
|
|
29883
30515
|
!mowPartitionDataRef.current?.partitionIds) {
|
|
29884
30516
|
// 设置全局高亮
|
|
@@ -30105,7 +30737,9 @@ MowerMapRenderer.displayName = 'MowerMapRenderer';
|
|
|
30105
30737
|
|
|
30106
30738
|
// 默认配置
|
|
30107
30739
|
const defaultMapConfig = DEFAULT_STYLES;
|
|
30108
|
-
const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, maxWidth = 300, mapConfig, sn }) => {
|
|
30740
|
+
const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, maxWidth = 300, maxHeight, boundaryPadding = 50, mapConfig, sn, }) => {
|
|
30741
|
+
const reactInstanceId = useId();
|
|
30742
|
+
const channelClipPathId = useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
|
|
30109
30743
|
// 合并配置
|
|
30110
30744
|
const mergedMapConfig = useMemo(() => {
|
|
30111
30745
|
return merge$1(defaultMapConfig, mapConfig);
|
|
@@ -30151,7 +30785,7 @@ const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, m
|
|
|
30151
30785
|
maxY = Math.max(maxY, point[1]);
|
|
30152
30786
|
});
|
|
30153
30787
|
// 添加边距
|
|
30154
|
-
const padding =
|
|
30788
|
+
const padding = boundaryPadding;
|
|
30155
30789
|
const width = maxX - minX + padding * 2;
|
|
30156
30790
|
const height = maxY - minY + padding * 2;
|
|
30157
30791
|
return {
|
|
@@ -30160,25 +30794,40 @@ const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, m
|
|
|
30160
30794
|
width,
|
|
30161
30795
|
height,
|
|
30162
30796
|
};
|
|
30163
|
-
}, [boundaryInfo]);
|
|
30797
|
+
}, [boundaryInfo, boundaryPadding]);
|
|
30164
30798
|
const commonValue = useMemo(() => {
|
|
30165
30799
|
return {
|
|
30166
30800
|
sn,
|
|
30167
30801
|
svgViewBox: boundaryViewBox,
|
|
30802
|
+
channelClipPathId,
|
|
30168
30803
|
};
|
|
30169
|
-
}, [sn, boundaryViewBox]);
|
|
30804
|
+
}, [sn, boundaryViewBox, channelClipPathId]);
|
|
30170
30805
|
const style = useMemo(() => {
|
|
30171
|
-
if (
|
|
30806
|
+
if (!maxHeight) {
|
|
30807
|
+
if (boundaryViewBox?.width > boundaryViewBox?.height) {
|
|
30808
|
+
return {
|
|
30809
|
+
width: maxWidth,
|
|
30810
|
+
height: maxWidth * (boundaryViewBox.height / boundaryViewBox.width),
|
|
30811
|
+
};
|
|
30812
|
+
}
|
|
30813
|
+
return {
|
|
30814
|
+
width: maxWidth * (boundaryViewBox.width / boundaryViewBox.height),
|
|
30815
|
+
height: maxWidth,
|
|
30816
|
+
};
|
|
30817
|
+
}
|
|
30818
|
+
const ratio = maxWidth / maxHeight;
|
|
30819
|
+
const boundaryRatio = boundaryViewBox.width / boundaryViewBox.height;
|
|
30820
|
+
if (ratio > boundaryRatio) {
|
|
30172
30821
|
return {
|
|
30173
|
-
width:
|
|
30174
|
-
height:
|
|
30822
|
+
width: Math.floor(maxHeight * boundaryRatio),
|
|
30823
|
+
height: maxHeight,
|
|
30175
30824
|
};
|
|
30176
30825
|
}
|
|
30177
30826
|
return {
|
|
30178
|
-
width: maxWidth
|
|
30179
|
-
height: maxWidth,
|
|
30827
|
+
width: maxWidth,
|
|
30828
|
+
height: Math.floor(maxWidth / boundaryRatio),
|
|
30180
30829
|
};
|
|
30181
|
-
}, [boundaryViewBox, maxWidth]);
|
|
30830
|
+
}, [boundaryViewBox, maxWidth, maxHeight]);
|
|
30182
30831
|
return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxs("div", { style: {
|
|
30183
30832
|
position: 'relative',
|
|
30184
30833
|
width: style.width,
|
|
@@ -30194,4 +30843,1418 @@ const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, m
|
|
|
30194
30843
|
}) }), jsx(CharginPile, { viewBox: boundaryViewBox || null, rotation: 0 })] }) }) }));
|
|
30195
30844
|
});
|
|
30196
30845
|
|
|
30197
|
-
|
|
30846
|
+
/** ChannelClipPath 等内容裁剪使用的 SVG 坐标边距(与用户传入的屏幕 padding 无关) */
|
|
30847
|
+
const PARTITION_PICKER_CONTENT_CLIP_PADDING = 50;
|
|
30848
|
+
/** H5:子区域屏幕宽度超过该值才展示名称标签(px) */
|
|
30849
|
+
const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 72;
|
|
30850
|
+
/** H5:名称气泡总宽度(px) */
|
|
30851
|
+
const H5_PARTITION_LABEL_WIDTH_PX = 72;
|
|
30852
|
+
/** 边界线目标屏幕像素宽度(默认态,全缩放级别保持一致) */
|
|
30853
|
+
const PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX = 2;
|
|
30854
|
+
/** 边界线目标屏幕像素宽度(hover / 选中态) */
|
|
30855
|
+
const PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX = 2.5;
|
|
30856
|
+
/**
|
|
30857
|
+
* Figma bg/mapping 地图网格背景(Standalone SVG 层)
|
|
30858
|
+
* @see https://www.figma.com/design/j0DdUYf8VFkXQ8ikkA6ZzP — node 20490:84886
|
|
30859
|
+
*/
|
|
30860
|
+
/** 网格区域底色,也用于容器 letterbox 留白 */
|
|
30861
|
+
const PARTITION_PICKER_GRID_BASE_COLOR = '#E3E5EB';
|
|
30862
|
+
/** 网格单元边长(SVG 地图坐标,与 viewBox 一致;zoom 时间距同比缩放) */
|
|
30863
|
+
const PARTITION_PICKER_GRID_TILE_SIZE = 200;
|
|
30864
|
+
/** 网格线宽(地图坐标;随 zoom 同比缩放,不做屏幕像素恒定) */
|
|
30865
|
+
const PARTITION_PICKER_GRID_LINE_WIDTH = 4;
|
|
30866
|
+
/** 网格交点圆点半径(地图坐标) */
|
|
30867
|
+
const PARTITION_PICKER_GRID_DOT_RADIUS = 8;
|
|
30868
|
+
/** 网格层整体不透明度(Figma 约 80%) */
|
|
30869
|
+
const PARTITION_PICKER_GRID_OPACITY = 0.8;
|
|
30870
|
+
/** 网格线与交点颜色 */
|
|
30871
|
+
const PARTITION_PICKER_GRID_STROKE = '#FFFFFF';
|
|
30872
|
+
/** 可见范围内交点超过该数量时跳过圆点,仅保留网格线(缩小视野时减轻 DOM 压力) */
|
|
30873
|
+
const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 400;
|
|
30874
|
+
/**
|
|
30875
|
+
* 分区选择地图专用样式
|
|
30876
|
+
*
|
|
30877
|
+
* Web:Figma 灰蓝未选中地块(Vector 360)
|
|
30878
|
+
* H5:高对比度绿色,面向卫星/深色底图
|
|
30879
|
+
*/
|
|
30880
|
+
const PARTITION_PICKER_MAP_CONFIG_WEB = {
|
|
30881
|
+
boundary: {
|
|
30882
|
+
lineColor: '#91A1B4',
|
|
30883
|
+
fillColor: '#D7DEE6',
|
|
30884
|
+
lineWidth: 2,
|
|
30885
|
+
},
|
|
30886
|
+
};
|
|
30887
|
+
const PARTITION_PICKER_MAP_CONFIG = {
|
|
30888
|
+
boundary: {
|
|
30889
|
+
lineColor: '#91A1B4',
|
|
30890
|
+
fillColor: '#D7DEE6',
|
|
30891
|
+
lineWidth: 2,
|
|
30892
|
+
},
|
|
30893
|
+
};
|
|
30894
|
+
/** Web 端地块配色(Figma Vector 360 / 361 / 99788) */
|
|
30895
|
+
const PARTITION_PICKER_COLORS_WEB = {
|
|
30896
|
+
defaultFill: 'rgba(222, 225, 231, 1)',
|
|
30897
|
+
defaultStroke: 'rgba(132, 152, 169, 1)',
|
|
30898
|
+
defaultStrokeWidth: 2,
|
|
30899
|
+
hoverFill: 'rgba(211, 216, 226, 1)',
|
|
30900
|
+
hoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30901
|
+
hoverStrokeWidth: 3,
|
|
30902
|
+
selectedFill: 'rgba(202, 214, 238, 1)',
|
|
30903
|
+
selectedStroke: 'rgba(132, 152, 169, 1)',
|
|
30904
|
+
selectedStrokeWidth: 3,
|
|
30905
|
+
selectedHoverFill: 'rgba(202, 214, 238, 1)',
|
|
30906
|
+
selectedHoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30907
|
+
selectedHoverStrokeWidth: 3,
|
|
30908
|
+
isolatedFill: 'rgba(225, 227, 233, 1)',
|
|
30909
|
+
isolatedStroke: 'rgba(189, 198, 208, 1)',
|
|
30910
|
+
isolatedStrokeWidth: 2,
|
|
30911
|
+
};
|
|
30912
|
+
/** H5 端地块配色 */
|
|
30913
|
+
const PARTITION_PICKER_COLORS_H5 = {
|
|
30914
|
+
defaultFill: 'rgba(222, 225, 231, 1)',
|
|
30915
|
+
defaultStroke: 'rgba(132, 152, 169, 1)',
|
|
30916
|
+
defaultStrokeWidth: 1,
|
|
30917
|
+
hoverFill: 'rgba(222, 225, 231, 1)',
|
|
30918
|
+
hoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30919
|
+
hoverStrokeWidth: 1,
|
|
30920
|
+
selectedFill: 'rgba(202, 214, 238, 1)',
|
|
30921
|
+
selectedStroke: 'rgba(132, 152, 169, 1)',
|
|
30922
|
+
selectedStrokeWidth: 1,
|
|
30923
|
+
selectedHoverFill: 'rgba(202, 214, 238, 1)',
|
|
30924
|
+
selectedHoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30925
|
+
selectedHoverStrokeWidth: 1,
|
|
30926
|
+
isolatedFill: 'rgba(225, 227, 233, 1)',
|
|
30927
|
+
isolatedStroke: 'rgba(189, 198, 208, 1)',
|
|
30928
|
+
isolatedStrokeWidth: 1,
|
|
30929
|
+
};
|
|
30930
|
+
function getPartitionPickerMapConfig(platform = PlatformType.WEB) {
|
|
30931
|
+
return platform === PlatformType.WEB
|
|
30932
|
+
? PARTITION_PICKER_MAP_CONFIG_WEB
|
|
30933
|
+
: PARTITION_PICKER_MAP_CONFIG;
|
|
30934
|
+
}
|
|
30935
|
+
function getPartitionPickerColors(platform = PlatformType.WEB) {
|
|
30936
|
+
return platform === PlatformType.WEB ? PARTITION_PICKER_COLORS_WEB : PARTITION_PICKER_COLORS_H5;
|
|
30937
|
+
}
|
|
30938
|
+
/** Web 分区名气泡(Figma「地块名称」/ 选中区域) */
|
|
30939
|
+
const PARTITION_PICKER_LABEL_STYLES_WEB = {
|
|
30940
|
+
default: {
|
|
30941
|
+
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
|
30942
|
+
color: 'rgba(65, 93, 116, 0.7)',
|
|
30943
|
+
fontSize: 12,
|
|
30944
|
+
fontWeight: 500,
|
|
30945
|
+
padding: '4px 8px',
|
|
30946
|
+
borderRadius: 14,
|
|
30947
|
+
lineHeight: '20px',
|
|
30948
|
+
},
|
|
30949
|
+
selected: {
|
|
30950
|
+
backgroundColor: 'rgba(255, 90, 0, 1)',
|
|
30951
|
+
color: 'rgba(255, 255, 255, 1)',
|
|
30952
|
+
fontSize: 12,
|
|
30953
|
+
fontWeight: 500,
|
|
30954
|
+
padding: '4px 8px',
|
|
30955
|
+
borderRadius: 20,
|
|
30956
|
+
lineHeight: '20px',
|
|
30957
|
+
},
|
|
30958
|
+
selectionOrderBadge: {
|
|
30959
|
+
width: '24px',
|
|
30960
|
+
height: '24px',
|
|
30961
|
+
background: '#FF5A00',
|
|
30962
|
+
border: '1px solid #FFFFFF',
|
|
30963
|
+
color: '#FFFFFF',
|
|
30964
|
+
fontSize: 14,
|
|
30965
|
+
fontWeight: 500,
|
|
30966
|
+
lineHeight: '22px',
|
|
30967
|
+
},
|
|
30968
|
+
};
|
|
30969
|
+
/** H5 分区名气泡(深色底图 / 橙色渐变选中) */
|
|
30970
|
+
const PARTITION_PICKER_LABEL_STYLES_H5 = {
|
|
30971
|
+
default: {
|
|
30972
|
+
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
|
30973
|
+
color: 'rgba(65, 93, 116, 0.7)',
|
|
30974
|
+
fontSize: 12,
|
|
30975
|
+
fontWeight: 400,
|
|
30976
|
+
padding: '6px',
|
|
30977
|
+
width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
30978
|
+
borderRadius: 100,
|
|
30979
|
+
boxSizing: 'border-box',
|
|
30980
|
+
},
|
|
30981
|
+
selected: {
|
|
30982
|
+
background: 'linear-gradient(266.64deg, #F2942A 4.1%, #F26A2A 86.42%)',
|
|
30983
|
+
color: 'rgba(255, 255, 255, 1)',
|
|
30984
|
+
fontSize: 12,
|
|
30985
|
+
fontWeight: 400,
|
|
30986
|
+
padding: '6px',
|
|
30987
|
+
width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
30988
|
+
borderRadius: 100,
|
|
30989
|
+
boxSizing: 'border-box',
|
|
30990
|
+
},
|
|
30991
|
+
selectionOrderBadge: {
|
|
30992
|
+
width: '24px',
|
|
30993
|
+
height: '24px',
|
|
30994
|
+
background: 'linear-gradient(310.82deg, #F16629 14.52%, #F1A129 103.26%)',
|
|
30995
|
+
border: '1px solid #FFFFFF',
|
|
30996
|
+
color: '#FFFFFF',
|
|
30997
|
+
fontSize: 14,
|
|
30998
|
+
fontWeight: 600,
|
|
30999
|
+
lineHeight: '22px',
|
|
31000
|
+
},
|
|
31001
|
+
};
|
|
31002
|
+
/** 将 PartitionPickerLabelAppearance 转为 React 内联样式 */
|
|
31003
|
+
function labelAppearanceToStyle(appearance) {
|
|
31004
|
+
const { fontSize, borderRadius, ...rest } = appearance;
|
|
31005
|
+
return {
|
|
31006
|
+
...rest,
|
|
31007
|
+
fontSize: `${fontSize}px`,
|
|
31008
|
+
borderRadius: `${borderRadius}px`,
|
|
31009
|
+
};
|
|
31010
|
+
}
|
|
31011
|
+
function getPartitionPickerLabelStyles(platform = PlatformType.WEB) {
|
|
31012
|
+
return platform === PlatformType.WEB
|
|
31013
|
+
? PARTITION_PICKER_LABEL_STYLES_WEB
|
|
31014
|
+
: PARTITION_PICKER_LABEL_STYLES_H5;
|
|
31015
|
+
}
|
|
31016
|
+
const DEFAULT_PARTITION_PICKER_GRID_STYLE = {
|
|
31017
|
+
baseColor: PARTITION_PICKER_GRID_BASE_COLOR,
|
|
31018
|
+
strokeColor: PARTITION_PICKER_GRID_STROKE,
|
|
31019
|
+
tileSize: PARTITION_PICKER_GRID_TILE_SIZE,
|
|
31020
|
+
lineWidth: PARTITION_PICKER_GRID_LINE_WIDTH,
|
|
31021
|
+
dotRadius: PARTITION_PICKER_GRID_DOT_RADIUS,
|
|
31022
|
+
opacity: PARTITION_PICKER_GRID_OPACITY,
|
|
31023
|
+
maxIntersectionDots: PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS,
|
|
31024
|
+
};
|
|
31025
|
+
const DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX = {
|
|
31026
|
+
default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
|
|
31027
|
+
emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
|
|
31028
|
+
};
|
|
31029
|
+
/**
|
|
31030
|
+
* 将 platform 内置默认值与外部 pickerStyleConfig 深度合并。
|
|
31031
|
+
* 调用方只需覆盖变化的字段,无需改组件源码。
|
|
31032
|
+
*/
|
|
31033
|
+
function resolvePartitionPickerStyles(platform = PlatformType.WEB, config) {
|
|
31034
|
+
const baseLabels = getPartitionPickerLabelStyles(platform);
|
|
31035
|
+
return {
|
|
31036
|
+
boundary: merge$1({}, getPartitionPickerColors(platform), config?.boundary),
|
|
31037
|
+
labels: config?.labels
|
|
31038
|
+
? {
|
|
31039
|
+
default: merge$1({}, baseLabels.default, config.labels.default),
|
|
31040
|
+
selected: merge$1({}, baseLabels.selected, config.labels.selected),
|
|
31041
|
+
selectionOrderBadge: merge$1({}, baseLabels.selectionOrderBadge, config.labels.selectionOrderBadge),
|
|
31042
|
+
}
|
|
31043
|
+
: baseLabels,
|
|
31044
|
+
grid: merge$1({}, DEFAULT_PARTITION_PICKER_GRID_STYLE, config?.grid),
|
|
31045
|
+
boundaryStrokePx: merge$1({}, DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX, config?.boundaryStrokePx),
|
|
31046
|
+
labelMinScreenWidthPx: config?.labelMinScreenWidthPx ?? H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX,
|
|
31047
|
+
};
|
|
31048
|
+
}
|
|
31049
|
+
|
|
31050
|
+
/**
|
|
31051
|
+
* Standalone 模式下的视口控制:平移、滚轮缩放、H5 双指 pinch
|
|
31052
|
+
*
|
|
31053
|
+
* 核心思路:通过修改 SVG viewBox 实现平移/缩放,而非 CSS transform
|
|
31054
|
+
* - fitViewBox:初始 fit 状态,resetView 回到此状态
|
|
31055
|
+
* - viewBox:地块/通道/overlay 的可见区域
|
|
31056
|
+
* - gridViewBox:网格底图专用;有地图旋转时平移按屏幕方向(不逆旋转),与地块跟手平移解耦
|
|
31057
|
+
*
|
|
31058
|
+
* 平移可在地块/分区名等任意区域发起;仅当位移小于阈值时才视为点击
|
|
31059
|
+
*/
|
|
31060
|
+
function useMapViewport({ mapJson, containerRef: externalContainerRef, width, height, padding, minZoom = 0.5, maxZoom = 4, enablePanZoom = true, refitOnResize = true, onViewportTap, mapRotationDeg = 0, }) {
|
|
31061
|
+
/** 地图容器 DOM,用于绑定 wheel/pointer/touch 事件 */
|
|
31062
|
+
const internalContainerRef = useRef(null);
|
|
31063
|
+
const containerRef = externalContainerRef ?? internalContainerRef;
|
|
31064
|
+
/** 始终指向最新 padding,供 fitToView 异步调用时使用 */
|
|
31065
|
+
const paddingRef = useRef(padding);
|
|
31066
|
+
paddingRef.current = padding;
|
|
31067
|
+
/** padding 序列化 key,用于 useMemo 依赖(数组/对象形式 padding 变化时触发重算) */
|
|
31068
|
+
const paddingKey = typeof padding === 'number' ? padding : JSON.stringify(padding);
|
|
31069
|
+
/** 始终指向最新 onViewportTap,避免 effect 闭包过期 */
|
|
31070
|
+
const onViewportTapRef = useRef(onViewportTap);
|
|
31071
|
+
onViewportTapRef.current = onViewportTap;
|
|
31072
|
+
/** 始终指向最新 mapRotationDeg,供平移回调读取 */
|
|
31073
|
+
const mapRotationDegRef = useRef(mapRotationDeg);
|
|
31074
|
+
mapRotationDegRef.current = mapRotationDeg;
|
|
31075
|
+
/**
|
|
31076
|
+
* 内容 viewBox:地图包围盒 + 固定 SVG padding
|
|
31077
|
+
* 用于 ChannelClipPath 等裁剪,不随平移/缩放变化
|
|
31078
|
+
*/
|
|
31079
|
+
const contentViewBox = useMemo(() => {
|
|
31080
|
+
const bounds = calculateMapBounds(mapJson);
|
|
31081
|
+
return boundsToContentViewBox(bounds, PARTITION_PICKER_CONTENT_CLIP_PADDING);
|
|
31082
|
+
}, [mapJson]);
|
|
31083
|
+
/**
|
|
31084
|
+
* 初始 fit viewBox:在 contentViewBox 基础上适配容器宽高比与 screen padding
|
|
31085
|
+
* resetView 会回到此状态
|
|
31086
|
+
*/
|
|
31087
|
+
const fitViewBox = useMemo(() => computeFitViewBox(contentViewBox, width, height, padding), [contentViewBox, width, height, paddingKey]);
|
|
31088
|
+
/** fitViewBox 的 ref 副本,供事件回调中读取最新值(zoom 限制基准) */
|
|
31089
|
+
const fitViewBoxRef = useRef(fitViewBox);
|
|
31090
|
+
fitViewBoxRef.current = fitViewBox;
|
|
31091
|
+
/** 地块/通道/overlay 使用的 viewBox */
|
|
31092
|
+
const [viewBox, setViewBox] = useState(fitViewBox);
|
|
31093
|
+
/** 网格底图 viewBox:平移时按屏幕方向,避免与旋转后的地块反向滑动 */
|
|
31094
|
+
const [gridViewBox, setGridViewBox] = useState(fitViewBox);
|
|
31095
|
+
const viewBoxRef = useRef(viewBox);
|
|
31096
|
+
viewBoxRef.current = viewBox;
|
|
31097
|
+
const gridViewBoxRef = useRef(gridViewBox);
|
|
31098
|
+
gridViewBoxRef.current = gridViewBox;
|
|
31099
|
+
const pendingViewBoxRef = useRef(null);
|
|
31100
|
+
const pendingGridViewBoxRef = useRef(null);
|
|
31101
|
+
const viewBoxRafRef = useRef(null);
|
|
31102
|
+
const flushScheduledViewBox = useCallback(() => {
|
|
31103
|
+
viewBoxRafRef.current = null;
|
|
31104
|
+
const mapPending = pendingViewBoxRef.current;
|
|
31105
|
+
const gridPending = pendingGridViewBoxRef.current;
|
|
31106
|
+
if (mapPending) {
|
|
31107
|
+
pendingViewBoxRef.current = null;
|
|
31108
|
+
viewBoxRef.current = mapPending;
|
|
31109
|
+
setViewBox(mapPending);
|
|
31110
|
+
}
|
|
31111
|
+
if (gridPending) {
|
|
31112
|
+
pendingGridViewBoxRef.current = null;
|
|
31113
|
+
gridViewBoxRef.current = gridPending;
|
|
31114
|
+
setGridViewBox(gridPending);
|
|
31115
|
+
}
|
|
31116
|
+
}, []);
|
|
31117
|
+
const cancelScheduledViewBox = useCallback(() => {
|
|
31118
|
+
pendingViewBoxRef.current = null;
|
|
31119
|
+
pendingGridViewBoxRef.current = null;
|
|
31120
|
+
if (viewBoxRafRef.current != null) {
|
|
31121
|
+
cancelAnimationFrame(viewBoxRafRef.current);
|
|
31122
|
+
viewBoxRafRef.current = null;
|
|
31123
|
+
}
|
|
31124
|
+
}, []);
|
|
31125
|
+
const scheduleViewBox = useCallback((updater) => {
|
|
31126
|
+
const base = pendingViewBoxRef.current ?? viewBoxRef.current;
|
|
31127
|
+
const next = updater(base);
|
|
31128
|
+
pendingViewBoxRef.current = next;
|
|
31129
|
+
pendingGridViewBoxRef.current = next;
|
|
31130
|
+
viewBoxRef.current = next;
|
|
31131
|
+
gridViewBoxRef.current = next;
|
|
31132
|
+
if (viewBoxRafRef.current == null) {
|
|
31133
|
+
viewBoxRafRef.current = requestAnimationFrame(flushScheduledViewBox);
|
|
31134
|
+
}
|
|
31135
|
+
}, [flushScheduledViewBox]);
|
|
31136
|
+
const commitViewBox = useCallback((next) => {
|
|
31137
|
+
cancelScheduledViewBox();
|
|
31138
|
+
viewBoxRef.current = next;
|
|
31139
|
+
gridViewBoxRef.current = next;
|
|
31140
|
+
setViewBox(next);
|
|
31141
|
+
setGridViewBox(next);
|
|
31142
|
+
}, [cancelScheduledViewBox]);
|
|
31143
|
+
useEffect(() => () => {
|
|
31144
|
+
cancelScheduledViewBox();
|
|
31145
|
+
}, [cancelScheduledViewBox]);
|
|
31146
|
+
// 地图数据 / padding 变化时始终重新 fit(width/height 取触发时刻的实测值,不作为 resize 依赖)
|
|
31147
|
+
useEffect(() => {
|
|
31148
|
+
if (width <= 0 || height <= 0)
|
|
31149
|
+
return;
|
|
31150
|
+
commitViewBox(computeFitViewBox(contentViewBox, width, height, padding));
|
|
31151
|
+
}, [commitViewBox, contentViewBox, paddingKey]);
|
|
31152
|
+
const prevSizeRef = useRef({ width: 0, height: 0 });
|
|
31153
|
+
// 容器首次获得有效尺寸,或 refitOnResize 下的尺寸变化
|
|
31154
|
+
useEffect(() => {
|
|
31155
|
+
if (width <= 0 || height <= 0)
|
|
31156
|
+
return;
|
|
31157
|
+
const prev = prevSizeRef.current;
|
|
31158
|
+
const sizeChanged = prev.width !== width || prev.height !== height;
|
|
31159
|
+
const isInitialSize = prev.width <= 0 || prev.height <= 0;
|
|
31160
|
+
prevSizeRef.current = { width, height };
|
|
31161
|
+
if (isInitialSize || (refitOnResize && sizeChanged)) {
|
|
31162
|
+
commitViewBox(fitViewBox);
|
|
31163
|
+
}
|
|
31164
|
+
}, [
|
|
31165
|
+
commitViewBox,
|
|
31166
|
+
refitOnResize,
|
|
31167
|
+
width,
|
|
31168
|
+
height,
|
|
31169
|
+
fitViewBox.x,
|
|
31170
|
+
fitViewBox.y,
|
|
31171
|
+
fitViewBox.width,
|
|
31172
|
+
fitViewBox.height,
|
|
31173
|
+
]);
|
|
31174
|
+
/**
|
|
31175
|
+
* 以屏幕焦点为中心缩放
|
|
31176
|
+
* @param factor 缩放因子,>1 放大,<1 缩小
|
|
31177
|
+
* @param focalX 焦点相对容器左上角的 X(px)
|
|
31178
|
+
* @param focalY 焦点相对容器左上角的 Y(px)
|
|
31179
|
+
*/
|
|
31180
|
+
const applyZoom = useCallback((factor, focalX, focalY) => {
|
|
31181
|
+
scheduleViewBox((current) => {
|
|
31182
|
+
const targetWidth = clampViewBoxWidth(current.width / factor, fitViewBoxRef.current, minZoom, maxZoom);
|
|
31183
|
+
return resizeViewBoxAroundPoint(current, targetWidth, width, height, focalX, focalY);
|
|
31184
|
+
});
|
|
31185
|
+
}, [height, maxZoom, minZoom, scheduleViewBox, width]);
|
|
31186
|
+
/**
|
|
31187
|
+
* 平移视口:地块使用逆旋转后的 viewBox 增量(跟手);网格使用屏幕方向增量(同向滑动)
|
|
31188
|
+
*/
|
|
31189
|
+
const applyPan = useCallback((deltaXPx, deltaYPx) => {
|
|
31190
|
+
const mapBase = pendingViewBoxRef.current ?? viewBoxRef.current;
|
|
31191
|
+
const gridBase = pendingGridViewBoxRef.current ?? gridViewBoxRef.current;
|
|
31192
|
+
const mapDelta = containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, mapBase, width, height, mapRotationDegRef.current);
|
|
31193
|
+
const gridDelta = containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, gridBase, width, height, 0);
|
|
31194
|
+
const nextMap = {
|
|
31195
|
+
...mapBase,
|
|
31196
|
+
x: mapBase.x - mapDelta.dx,
|
|
31197
|
+
y: mapBase.y - mapDelta.dy,
|
|
31198
|
+
};
|
|
31199
|
+
const nextGrid = {
|
|
31200
|
+
...gridBase,
|
|
31201
|
+
x: gridBase.x - gridDelta.dx,
|
|
31202
|
+
y: gridBase.y - gridDelta.dy,
|
|
31203
|
+
width: nextMap.width,
|
|
31204
|
+
height: nextMap.height,
|
|
31205
|
+
};
|
|
31206
|
+
pendingViewBoxRef.current = nextMap;
|
|
31207
|
+
pendingGridViewBoxRef.current = nextGrid;
|
|
31208
|
+
viewBoxRef.current = nextMap;
|
|
31209
|
+
gridViewBoxRef.current = nextGrid;
|
|
31210
|
+
if (viewBoxRafRef.current == null) {
|
|
31211
|
+
viewBoxRafRef.current = requestAnimationFrame(flushScheduledViewBox);
|
|
31212
|
+
}
|
|
31213
|
+
}, [flushScheduledViewBox, height, width]);
|
|
31214
|
+
/** 恢复到初始 fitViewBox(ref API resetView) */
|
|
31215
|
+
const resetView = useCallback(() => {
|
|
31216
|
+
commitViewBox(fitViewBoxRef.current);
|
|
31217
|
+
}, [commitViewBox]);
|
|
31218
|
+
/**
|
|
31219
|
+
* 重新计算并应用 fit viewBox(ref API fitToView)
|
|
31220
|
+
* @param nextPadding 可选的新 padding,不传则使用当前 paddingRef
|
|
31221
|
+
*/
|
|
31222
|
+
const fitToView = useCallback((nextPadding) => {
|
|
31223
|
+
const bounds = calculateMapBounds(mapJson);
|
|
31224
|
+
const content = boundsToContentViewBox(bounds, PARTITION_PICKER_CONTENT_CLIP_PADDING);
|
|
31225
|
+
const fit = computeFitViewBox(content, width, height, nextPadding ?? paddingRef.current);
|
|
31226
|
+
fitViewBoxRef.current = fit;
|
|
31227
|
+
commitViewBox(fit);
|
|
31228
|
+
}, [commitViewBox, height, mapJson, width]);
|
|
31229
|
+
/** 桌面端:按 pointerId 追踪多个指针(预留多指,当前仅单指平移) */
|
|
31230
|
+
const pointerMapRef = useRef(new Map());
|
|
31231
|
+
/** H5:双指 pinch 缩放状态 */
|
|
31232
|
+
const pinchRef = useRef(null);
|
|
31233
|
+
/** 单指/单指针平移状态(桌面 pointer 与 H5 touch 共用) */
|
|
31234
|
+
const singlePanRef = useRef(null);
|
|
31235
|
+
/** 当前正在驱动平移的 pointer id(桌面端) */
|
|
31236
|
+
const activePanPointerIdRef = useRef(null);
|
|
31237
|
+
/** 清空所有平移/pinch 相关 ref,防止 pointer 丢失导致状态残留 */
|
|
31238
|
+
const clearPanState = useCallback(() => {
|
|
31239
|
+
pointerMapRef.current.clear();
|
|
31240
|
+
singlePanRef.current = null;
|
|
31241
|
+
activePanPointerIdRef.current = null;
|
|
31242
|
+
}, []);
|
|
31243
|
+
/** 计算 touch 列表中前两指间距 */
|
|
31244
|
+
const getTouchDistance = (touches) => {
|
|
31245
|
+
if (touches.length < 2)
|
|
31246
|
+
return 0;
|
|
31247
|
+
const dx = touches[0].clientX - touches[1].clientX;
|
|
31248
|
+
const dy = touches[0].clientY - touches[1].clientY;
|
|
31249
|
+
return Math.hypot(dx, dy);
|
|
31250
|
+
};
|
|
31251
|
+
/** 计算 touch 列表中前两指中心点,坐标相对容器左上角 */
|
|
31252
|
+
const getTouchCenter = (touches, rect) => {
|
|
31253
|
+
const x = (touches[0].clientX + touches[1].clientX) / 2 - rect.left;
|
|
31254
|
+
const y = (touches[0].clientY + touches[1].clientY) / 2 - rect.top;
|
|
31255
|
+
return { x, y };
|
|
31256
|
+
};
|
|
31257
|
+
/** 判断事件目标是否在地图容器内 */
|
|
31258
|
+
const isInsideContainer = (target, container) => {
|
|
31259
|
+
if (!(target instanceof Element))
|
|
31260
|
+
return false;
|
|
31261
|
+
return container.contains(target);
|
|
31262
|
+
};
|
|
31263
|
+
/** 位移是否超过 PAN_CLICK_THRESHOLD_PX,超过则视为拖拽 */
|
|
31264
|
+
const markPanMoved = (startX, startY, currentX, currentY) => Math.hypot(currentX - startX, currentY - startY) > PAN_CLICK_THRESHOLD_PX;
|
|
31265
|
+
/** 触发点击回调(仅当未发生拖拽时) */
|
|
31266
|
+
const emitViewportTap = (tapTarget) => {
|
|
31267
|
+
if (tapTarget) {
|
|
31268
|
+
onViewportTapRef.current?.(tapTarget);
|
|
31269
|
+
}
|
|
31270
|
+
};
|
|
31271
|
+
// ── 绑定容器交互事件:滚轮缩放 / 桌面拖拽 / H5 pinch+单指平移 ──
|
|
31272
|
+
useEffect(() => {
|
|
31273
|
+
const container = containerRef.current;
|
|
31274
|
+
if (!container || !enablePanZoom)
|
|
31275
|
+
return;
|
|
31276
|
+
/** 滚轮缩放,以鼠标位置为焦点 */
|
|
31277
|
+
const handleWheel = (event) => {
|
|
31278
|
+
event.preventDefault();
|
|
31279
|
+
const rect = container.getBoundingClientRect();
|
|
31280
|
+
const focalX = event.clientX - rect.left;
|
|
31281
|
+
const focalY = event.clientY - rect.top;
|
|
31282
|
+
const factor = event.deltaY < 0 ? 1.1 : 1 / 1.1;
|
|
31283
|
+
applyZoom(factor, focalX, focalY);
|
|
31284
|
+
};
|
|
31285
|
+
/** 结束平移:未拖拽则触发 tap;释放 pointer capture 并清理状态 */
|
|
31286
|
+
const endPan = (event) => {
|
|
31287
|
+
// touch 由 touchend 统一处理,避免 pointerup 抢先清空 singlePanRef
|
|
31288
|
+
if (event?.pointerType === 'touch') {
|
|
31289
|
+
return;
|
|
31290
|
+
}
|
|
31291
|
+
if (event) {
|
|
31292
|
+
const state = pointerMapRef.current.get(event.pointerId);
|
|
31293
|
+
if (state && !state.moved && state.tapTarget) {
|
|
31294
|
+
emitViewportTap(state.tapTarget);
|
|
31295
|
+
}
|
|
31296
|
+
pointerMapRef.current.delete(event.pointerId);
|
|
31297
|
+
try {
|
|
31298
|
+
if (container.hasPointerCapture(event.pointerId)) {
|
|
31299
|
+
container.releasePointerCapture(event.pointerId);
|
|
31300
|
+
}
|
|
31301
|
+
}
|
|
31302
|
+
catch {
|
|
31303
|
+
// ignore
|
|
31304
|
+
}
|
|
31305
|
+
}
|
|
31306
|
+
if (!event || pointerMapRef.current.size === 0) {
|
|
31307
|
+
clearPanState();
|
|
31308
|
+
}
|
|
31309
|
+
};
|
|
31310
|
+
// 桌面端:pointer 事件处理平移(touch 交给下方 touch 事件,避免重复)
|
|
31311
|
+
const handlePointerDown = (event) => {
|
|
31312
|
+
if (!isInsideContainer(event.target, container))
|
|
31313
|
+
return;
|
|
31314
|
+
if (event.pointerType === 'touch') {
|
|
31315
|
+
return;
|
|
31316
|
+
}
|
|
31317
|
+
// 仅响应主键(左键)
|
|
31318
|
+
if (event.pointerType === 'mouse' && event.button !== 0) {
|
|
31319
|
+
return;
|
|
31320
|
+
}
|
|
31321
|
+
pointerMapRef.current.set(event.pointerId, {
|
|
31322
|
+
pointerId: event.pointerId,
|
|
31323
|
+
startX: event.clientX,
|
|
31324
|
+
startY: event.clientY,
|
|
31325
|
+
moved: false,
|
|
31326
|
+
tapTarget: event.target instanceof Element ? event.target : null,
|
|
31327
|
+
});
|
|
31328
|
+
activePanPointerIdRef.current = event.pointerId;
|
|
31329
|
+
singlePanRef.current = {
|
|
31330
|
+
startX: event.clientX,
|
|
31331
|
+
startY: event.clientY,
|
|
31332
|
+
viewBox: viewBoxRef.current,
|
|
31333
|
+
moved: false,
|
|
31334
|
+
tapTarget: event.target instanceof Element ? event.target : null,
|
|
31335
|
+
};
|
|
31336
|
+
container.setPointerCapture(event.pointerId);
|
|
31337
|
+
};
|
|
31338
|
+
const handlePointerMove = (event) => {
|
|
31339
|
+
// 主键已松开但 pointerup 未触发时(如释放在容器外),避免继续平移
|
|
31340
|
+
if (event.pointerType === 'mouse' && event.buttons === 0) {
|
|
31341
|
+
endPan(event);
|
|
31342
|
+
return;
|
|
31343
|
+
}
|
|
31344
|
+
if (activePanPointerIdRef.current !== event.pointerId)
|
|
31345
|
+
return;
|
|
31346
|
+
const state = pointerMapRef.current.get(event.pointerId);
|
|
31347
|
+
if (!state || !singlePanRef.current)
|
|
31348
|
+
return;
|
|
31349
|
+
const dx = event.clientX - state.startX;
|
|
31350
|
+
const dy = event.clientY - state.startY;
|
|
31351
|
+
if (markPanMoved(state.startX, state.startY, event.clientX, event.clientY)) {
|
|
31352
|
+
state.moved = true;
|
|
31353
|
+
singlePanRef.current.moved = true;
|
|
31354
|
+
}
|
|
31355
|
+
applyPan(dx, dy);
|
|
31356
|
+
pointerMapRef.current.set(event.pointerId, {
|
|
31357
|
+
...state,
|
|
31358
|
+
startX: event.clientX,
|
|
31359
|
+
startY: event.clientY,
|
|
31360
|
+
});
|
|
31361
|
+
};
|
|
31362
|
+
const handlePointerUp = (event) => {
|
|
31363
|
+
endPan(event);
|
|
31364
|
+
};
|
|
31365
|
+
const handleLostPointerCapture = (event) => {
|
|
31366
|
+
if (activePanPointerIdRef.current === event.pointerId) {
|
|
31367
|
+
endPan(event);
|
|
31368
|
+
}
|
|
31369
|
+
};
|
|
31370
|
+
const handleWindowPointerUp = (event) => {
|
|
31371
|
+
if (event instanceof PointerEvent && event.pointerType === 'touch') {
|
|
31372
|
+
return;
|
|
31373
|
+
}
|
|
31374
|
+
clearPanState();
|
|
31375
|
+
};
|
|
31376
|
+
// H5:双指 pinch 缩放、单指平移
|
|
31377
|
+
const handleTouchStart = (event) => {
|
|
31378
|
+
if (event.touches.length === 2) {
|
|
31379
|
+
event.preventDefault();
|
|
31380
|
+
const rect = container.getBoundingClientRect();
|
|
31381
|
+
const center = getTouchCenter(event.touches, rect);
|
|
31382
|
+
pinchRef.current = {
|
|
31383
|
+
initialDistance: getTouchDistance(event.touches),
|
|
31384
|
+
initialViewBox: viewBoxRef.current,
|
|
31385
|
+
centerX: center.x,
|
|
31386
|
+
centerY: center.y,
|
|
31387
|
+
};
|
|
31388
|
+
singlePanRef.current = null;
|
|
31389
|
+
return;
|
|
31390
|
+
}
|
|
31391
|
+
if (event.touches.length === 1 && isInsideContainer(event.target, container)) {
|
|
31392
|
+
singlePanRef.current = {
|
|
31393
|
+
startX: event.touches[0].clientX,
|
|
31394
|
+
startY: event.touches[0].clientY,
|
|
31395
|
+
viewBox: viewBoxRef.current,
|
|
31396
|
+
moved: false,
|
|
31397
|
+
tapTarget: event.target instanceof Element ? event.target : null,
|
|
31398
|
+
};
|
|
31399
|
+
}
|
|
31400
|
+
};
|
|
31401
|
+
const handleTouchMove = (event) => {
|
|
31402
|
+
if (event.touches.length === 2 && pinchRef.current) {
|
|
31403
|
+
event.preventDefault();
|
|
31404
|
+
const rect = container.getBoundingClientRect();
|
|
31405
|
+
const distance = getTouchDistance(event.touches);
|
|
31406
|
+
if (distance <= 0 || pinchRef.current.initialDistance <= 0)
|
|
31407
|
+
return;
|
|
31408
|
+
const scale = distance / pinchRef.current.initialDistance;
|
|
31409
|
+
const center = getTouchCenter(event.touches, rect);
|
|
31410
|
+
const targetWidth = clampViewBoxWidth(pinchRef.current.initialViewBox.width / scale, fitViewBoxRef.current, minZoom, maxZoom);
|
|
31411
|
+
scheduleViewBox(() => resizeViewBoxAroundPoint(pinchRef.current.initialViewBox, targetWidth, width, height, center.x, center.y));
|
|
31412
|
+
return;
|
|
31413
|
+
}
|
|
31414
|
+
if (event.touches.length === 1 && singlePanRef.current) {
|
|
31415
|
+
const panState = singlePanRef.current;
|
|
31416
|
+
const touch = event.touches[0];
|
|
31417
|
+
if (markPanMoved(panState.startX, panState.startY, touch.clientX, touch.clientY)) {
|
|
31418
|
+
panState.moved = true;
|
|
31419
|
+
}
|
|
31420
|
+
if (panState.moved) {
|
|
31421
|
+
event.preventDefault();
|
|
31422
|
+
}
|
|
31423
|
+
const dx = touch.clientX - panState.startX;
|
|
31424
|
+
const dy = touch.clientY - panState.startY;
|
|
31425
|
+
applyPan(dx, dy);
|
|
31426
|
+
singlePanRef.current = {
|
|
31427
|
+
...panState,
|
|
31428
|
+
startX: touch.clientX,
|
|
31429
|
+
startY: touch.clientY,
|
|
31430
|
+
};
|
|
31431
|
+
}
|
|
31432
|
+
};
|
|
31433
|
+
const handleTouchEnd = (event) => {
|
|
31434
|
+
const touchState = singlePanRef.current;
|
|
31435
|
+
if (touchState && !touchState.moved) {
|
|
31436
|
+
let tapTarget = touchState.tapTarget;
|
|
31437
|
+
const touch = event.changedTouches[0];
|
|
31438
|
+
if (touch) {
|
|
31439
|
+
const hitTarget = document.elementFromPoint(touch.clientX, touch.clientY);
|
|
31440
|
+
if (hitTarget instanceof Element) {
|
|
31441
|
+
tapTarget = hitTarget;
|
|
31442
|
+
}
|
|
31443
|
+
}
|
|
31444
|
+
emitViewportTap(tapTarget);
|
|
31445
|
+
}
|
|
31446
|
+
if (pinchRef.current) {
|
|
31447
|
+
pinchRef.current = null;
|
|
31448
|
+
}
|
|
31449
|
+
clearPanState();
|
|
31450
|
+
};
|
|
31451
|
+
container.addEventListener('wheel', handleWheel, { passive: false });
|
|
31452
|
+
container.addEventListener('pointerdown', handlePointerDown);
|
|
31453
|
+
container.addEventListener('pointermove', handlePointerMove);
|
|
31454
|
+
container.addEventListener('pointerup', handlePointerUp);
|
|
31455
|
+
container.addEventListener('pointercancel', handlePointerUp);
|
|
31456
|
+
container.addEventListener('lostpointercapture', handleLostPointerCapture);
|
|
31457
|
+
container.addEventListener('touchstart', handleTouchStart, { passive: false });
|
|
31458
|
+
container.addEventListener('touchmove', handleTouchMove, { passive: false });
|
|
31459
|
+
container.addEventListener('touchend', handleTouchEnd);
|
|
31460
|
+
container.addEventListener('touchcancel', handleTouchEnd);
|
|
31461
|
+
window.addEventListener('pointerup', handleWindowPointerUp);
|
|
31462
|
+
window.addEventListener('mouseup', handleWindowPointerUp);
|
|
31463
|
+
window.addEventListener('blur', handleWindowPointerUp);
|
|
31464
|
+
return () => {
|
|
31465
|
+
container.removeEventListener('wheel', handleWheel);
|
|
31466
|
+
container.removeEventListener('pointerdown', handlePointerDown);
|
|
31467
|
+
container.removeEventListener('pointermove', handlePointerMove);
|
|
31468
|
+
container.removeEventListener('pointerup', handlePointerUp);
|
|
31469
|
+
container.removeEventListener('pointercancel', handlePointerUp);
|
|
31470
|
+
container.removeEventListener('lostpointercapture', handleLostPointerCapture);
|
|
31471
|
+
container.removeEventListener('touchstart', handleTouchStart);
|
|
31472
|
+
container.removeEventListener('touchmove', handleTouchMove);
|
|
31473
|
+
container.removeEventListener('touchend', handleTouchEnd);
|
|
31474
|
+
container.removeEventListener('touchcancel', handleTouchEnd);
|
|
31475
|
+
window.removeEventListener('pointerup', handleWindowPointerUp);
|
|
31476
|
+
window.removeEventListener('mouseup', handleWindowPointerUp);
|
|
31477
|
+
window.removeEventListener('blur', handleWindowPointerUp);
|
|
31478
|
+
};
|
|
31479
|
+
}, [applyPan, applyZoom, clearPanState, enablePanZoom, height, maxZoom, minZoom, scheduleViewBox, width]);
|
|
31480
|
+
return {
|
|
31481
|
+
/** 绑定到地图外层容器的 ref */
|
|
31482
|
+
containerRef,
|
|
31483
|
+
/** 地块/通道/overlay 使用的 viewBox */
|
|
31484
|
+
viewBox,
|
|
31485
|
+
/** 网格底图 viewBox(平移按屏幕方向,与旋转地块解耦) */
|
|
31486
|
+
gridViewBox,
|
|
31487
|
+
/** 初始 fit viewBox,供 clip path 等需要稳定坐标系的场景 */
|
|
31488
|
+
fitViewBox,
|
|
31489
|
+
/** 恢复到初始 fit 状态 */
|
|
31490
|
+
resetView,
|
|
31491
|
+
/** 重新 fit 地图到容器(可传新 padding) */
|
|
31492
|
+
fitToView,
|
|
31493
|
+
};
|
|
31494
|
+
}
|
|
31495
|
+
|
|
31496
|
+
/** WGS84 经纬度坐标系 */
|
|
31497
|
+
const WGS84 = 'EPSG:4326';
|
|
31498
|
+
/** Web Mercator 平面坐标(米),与 MowerMapRenderer / defaultTransform.x|y 一致 */
|
|
31499
|
+
const WEB_MERCATOR = 'EPSG:3857';
|
|
31500
|
+
proj4.defs(WGS84, '+proj=longlat +datum=WGS84 +no_defs');
|
|
31501
|
+
proj4.defs(WEB_MERCATOR, '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
|
|
31502
|
+
/**
|
|
31503
|
+
* Map 模式专用:管理 OverlayViewF 所需的 bounds、viewBox、缩放与 fitBounds。
|
|
31504
|
+
* 逻辑对齐 MowerMapRenderer 的 Google Maps 叠加层。
|
|
31505
|
+
*/
|
|
31506
|
+
function useGoogleMapsOverlay({ mapJson, mapRef, defaultTransform, originNorthRotate, platform = PlatformType.WEB, padding = 50, }) {
|
|
31507
|
+
/** 仅当外部传入 mapRef 时执行 fitBounds / zoom 监听等副作用 */
|
|
31508
|
+
const enabled = Boolean(mapRef);
|
|
31509
|
+
const transformX = defaultTransform?.x ?? 0;
|
|
31510
|
+
const transformY = defaultTransform?.y ?? 0;
|
|
31511
|
+
const transformRotation = defaultTransform?.rotation ?? 0;
|
|
31512
|
+
/** 叠加层实际旋转 = 地图北向偏移 + 用户 rotation */
|
|
31513
|
+
const actureRotate = originNorthRotate + transformRotation;
|
|
31514
|
+
/** OverlayViewF onDraw 回调写入的 overlay 像素宽高 */
|
|
31515
|
+
const [overlayLayout, setOverlayLayout] = useState(null);
|
|
31516
|
+
const mapBounds = useMemo(() => calculateMapBounds(mapJson), [mapJson]);
|
|
31517
|
+
/**
|
|
31518
|
+
* SVG viewBox:地图 JSON 平面坐标全量范围。
|
|
31519
|
+
* 需等待 overlayLayout 就绪后才可计算(与 MowerMapRenderer svgViewBox 一致)。
|
|
31520
|
+
*/
|
|
31521
|
+
const svgViewBox = useMemo(() => {
|
|
31522
|
+
if (!overlayLayout?.width || !overlayLayout?.height)
|
|
31523
|
+
return null;
|
|
31524
|
+
const boundWidth = mapBounds.maxX - mapBounds.minX;
|
|
31525
|
+
const boundHeight = mapBounds.maxY - mapBounds.minY;
|
|
31526
|
+
if (boundWidth <= 0 || boundHeight <= 0)
|
|
31527
|
+
return null;
|
|
31528
|
+
return {
|
|
31529
|
+
x: mapBounds.minX,
|
|
31530
|
+
y: mapBounds.minY,
|
|
31531
|
+
width: boundWidth,
|
|
31532
|
+
height: boundHeight,
|
|
31533
|
+
};
|
|
31534
|
+
}, [mapBounds, overlayLayout?.height, overlayLayout?.width]);
|
|
31535
|
+
/**
|
|
31536
|
+
* OverlayViewF 的 LatLngBounds:
|
|
31537
|
+
* GPS 包围盒 + defaultTransform 在 Web Mercator 下的平移偏移。
|
|
31538
|
+
*/
|
|
31539
|
+
const bounds = useMemo(() => {
|
|
31540
|
+
if (!mapJson || typeof window === 'undefined' || !window.google?.maps)
|
|
31541
|
+
return null;
|
|
31542
|
+
const validBounds = getValidGpsBounds(mapJson, 0);
|
|
31543
|
+
const [swLng0, swLat0] = validBounds.sw;
|
|
31544
|
+
const [neLng0, neLat0] = validBounds.ne;
|
|
31545
|
+
const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
|
|
31546
|
+
const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
|
|
31547
|
+
const swX = swX0 + transformX;
|
|
31548
|
+
const swY = swY0 + transformY;
|
|
31549
|
+
const neX = neX0 + transformX;
|
|
31550
|
+
const neY = neY0 + transformY;
|
|
31551
|
+
const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
|
|
31552
|
+
const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
|
|
31553
|
+
return new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), new window.google.maps.LatLng(neLat, neLng));
|
|
31554
|
+
}, [mapJson, transformX, transformY]);
|
|
31555
|
+
/** OverlayViewF onDraw:解析 overlay 容器 style,得到像素 layout */
|
|
31556
|
+
const handleOverlayDraw = useCallback((style) => {
|
|
31557
|
+
const layout = Object.keys(style).reduce((acc, key) => {
|
|
31558
|
+
if (!key)
|
|
31559
|
+
return acc;
|
|
31560
|
+
acc[key] = parseFloat(style[key]);
|
|
31561
|
+
return acc;
|
|
31562
|
+
}, {});
|
|
31563
|
+
if (layout.width > 0 && layout.height > 0) {
|
|
31564
|
+
setOverlayLayout({ width: layout.width, height: layout.height });
|
|
31565
|
+
}
|
|
31566
|
+
}, []);
|
|
31567
|
+
/** Map 模式 fitToView:调用 google.maps.Map.fitBounds,考虑旋转后的 GPS 包围盒 */
|
|
31568
|
+
const fitToView = useCallback((nextPadding) => {
|
|
31569
|
+
if (!enabled || !mapRef || !mapJson)
|
|
31570
|
+
return;
|
|
31571
|
+
const rotate = transformRotation + originNorthRotate;
|
|
31572
|
+
const validBounds = getValidGpsBounds(mapJson, rotate);
|
|
31573
|
+
const [swLng0, swLat0] = validBounds.sw;
|
|
31574
|
+
const [neLng0, neLat0] = validBounds.ne;
|
|
31575
|
+
const [swX0, swY0] = proj4(WGS84, WEB_MERCATOR, [swLng0, swLat0]);
|
|
31576
|
+
const [neX0, neY0] = proj4(WGS84, WEB_MERCATOR, [neLng0, neLat0]);
|
|
31577
|
+
const swX = swX0 + transformX;
|
|
31578
|
+
const swY = swY0 + transformY;
|
|
31579
|
+
const neX = neX0 + transformX;
|
|
31580
|
+
const neY = neY0 + transformY;
|
|
31581
|
+
const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
|
|
31582
|
+
const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
|
|
31583
|
+
const googleBounds = new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), new window.google.maps.LatLng(neLat, neLng));
|
|
31584
|
+
const pad = normalizeScreenPadding(nextPadding ?? padding, 0);
|
|
31585
|
+
const paddingArg = pad.top === pad.right && pad.right === pad.bottom && pad.bottom === pad.left
|
|
31586
|
+
? pad.top
|
|
31587
|
+
: { top: pad.top, right: pad.right, bottom: pad.bottom, left: pad.left };
|
|
31588
|
+
mapRef.fitBounds(googleBounds, paddingArg);
|
|
31589
|
+
}, [enabled, mapJson, mapRef, originNorthRotate, padding, transformRotation, transformX, transformY]);
|
|
31590
|
+
const resetView = useCallback(() => {
|
|
31591
|
+
fitToView();
|
|
31592
|
+
}, [fitToView]);
|
|
31593
|
+
/** 参考缩放级别,用于计算 overlayScale(通道线宽视觉恒定,与 MowerMapRenderer 一致) */
|
|
31594
|
+
const REFERENCE_ZOOM = platform === PlatformType.WEB ? 21 : 21;
|
|
31595
|
+
const [overlayScale, setOverlayScale] = useState(1);
|
|
31596
|
+
useEffect(() => {
|
|
31597
|
+
if (!enabled || !mapRef)
|
|
31598
|
+
return;
|
|
31599
|
+
const updateScale = () => {
|
|
31600
|
+
const currentZoom = mapRef.getZoom();
|
|
31601
|
+
if (currentZoom === undefined)
|
|
31602
|
+
return;
|
|
31603
|
+
const zoomDiff = currentZoom - REFERENCE_ZOOM;
|
|
31604
|
+
const scale = Math.pow(2, -zoomDiff);
|
|
31605
|
+
if (scale < 1) {
|
|
31606
|
+
setOverlayScale(1);
|
|
31607
|
+
}
|
|
31608
|
+
else if (scale > 200) {
|
|
31609
|
+
setOverlayScale(platform === PlatformType.H5 ? 300 : 200);
|
|
31610
|
+
}
|
|
31611
|
+
else {
|
|
31612
|
+
setOverlayScale(platform === PlatformType.H5 ? 1.5 * scale : scale);
|
|
31613
|
+
}
|
|
31614
|
+
};
|
|
31615
|
+
const handleZoomChanged = throttle$2(updateScale, 50);
|
|
31616
|
+
const listener = mapRef.addListener('zoom_changed', handleZoomChanged);
|
|
31617
|
+
updateScale();
|
|
31618
|
+
return () => {
|
|
31619
|
+
if (listener) {
|
|
31620
|
+
window.google.maps.event.removeListener(listener);
|
|
31621
|
+
}
|
|
31622
|
+
handleZoomChanged.cancel();
|
|
31623
|
+
};
|
|
31624
|
+
}, [enabled, mapRef, platform, REFERENCE_ZOOM]);
|
|
31625
|
+
const overlayWidth = overlayLayout?.width ?? 0;
|
|
31626
|
+
const overlayHeight = overlayLayout?.height ?? 0;
|
|
31627
|
+
const isOverlayReady = overlayWidth > 0 && overlayHeight > 0 && svgViewBox != null;
|
|
31628
|
+
return {
|
|
31629
|
+
actureRotate,
|
|
31630
|
+
bounds,
|
|
31631
|
+
svgViewBox,
|
|
31632
|
+
fitViewBox: svgViewBox,
|
|
31633
|
+
overlayWidth,
|
|
31634
|
+
overlayHeight,
|
|
31635
|
+
overlayScale,
|
|
31636
|
+
isOverlayReady,
|
|
31637
|
+
handleOverlayDraw,
|
|
31638
|
+
fitToView,
|
|
31639
|
+
resetView,
|
|
31640
|
+
};
|
|
31641
|
+
}
|
|
31642
|
+
|
|
31643
|
+
function getInitialSize(width, height) {
|
|
31644
|
+
return {
|
|
31645
|
+
width: typeof width === 'number' && width > 0 ? width : 0,
|
|
31646
|
+
height: typeof height === 'number' && height > 0 ? height : 0,
|
|
31647
|
+
};
|
|
31648
|
+
}
|
|
31649
|
+
function cssLengthToStyle(value) {
|
|
31650
|
+
return value;
|
|
31651
|
+
}
|
|
31652
|
+
/**
|
|
31653
|
+
* 将 width/height(px 或 CSS length)应用到容器,并用 ResizeObserver 测量实际像素尺寸
|
|
31654
|
+
* 供 fit、标签定位、线宽换算等逻辑使用
|
|
31655
|
+
*/
|
|
31656
|
+
function useContainerSize(width, height) {
|
|
31657
|
+
const containerRef = useRef(null);
|
|
31658
|
+
const [size, setSize] = useState(() => getInitialSize(width, height));
|
|
31659
|
+
const layoutStyle = useMemo(() => ({
|
|
31660
|
+
width: cssLengthToStyle(width),
|
|
31661
|
+
height: cssLengthToStyle(height),
|
|
31662
|
+
}), [width, height]);
|
|
31663
|
+
useLayoutEffect(() => {
|
|
31664
|
+
const element = containerRef.current;
|
|
31665
|
+
if (!element)
|
|
31666
|
+
return;
|
|
31667
|
+
const updateSize = () => {
|
|
31668
|
+
const { width: nextWidth, height: nextHeight } = element.getBoundingClientRect();
|
|
31669
|
+
if (nextWidth <= 0 || nextHeight <= 0)
|
|
31670
|
+
return;
|
|
31671
|
+
setSize((prev) => prev.width === nextWidth && prev.height === nextHeight
|
|
31672
|
+
? prev
|
|
31673
|
+
: { width: nextWidth, height: nextHeight });
|
|
31674
|
+
};
|
|
31675
|
+
updateSize();
|
|
31676
|
+
const observer = new ResizeObserver(updateSize);
|
|
31677
|
+
observer.observe(element);
|
|
31678
|
+
return () => observer.disconnect();
|
|
31679
|
+
}, []);
|
|
31680
|
+
const isReady = size.width > 0 && size.height > 0;
|
|
31681
|
+
return {
|
|
31682
|
+
containerRef,
|
|
31683
|
+
layoutStyle,
|
|
31684
|
+
width: size.width,
|
|
31685
|
+
height: size.height,
|
|
31686
|
+
isReady,
|
|
31687
|
+
};
|
|
31688
|
+
}
|
|
31689
|
+
|
|
31690
|
+
/**
|
|
31691
|
+
* 地块 hover 状态管理(受控 / 非受控)
|
|
31692
|
+
*
|
|
31693
|
+
* 用于地图与外部表格等 UI 双向联动:
|
|
31694
|
+
* - 地图 hover → onBoundaryHoverChange → 宿主更新表格行高亮
|
|
31695
|
+
* - 表格 hover → 宿主传入 hoveredBoundaryId → 地图同步高亮
|
|
31696
|
+
*/
|
|
31697
|
+
function useBoundaryHover({ hoveredBoundaryId, defaultHoveredBoundaryId = null, onBoundaryHoverChange, }) {
|
|
31698
|
+
const isControlled = hoveredBoundaryId !== undefined;
|
|
31699
|
+
const [internalHoveredId, setInternalHoveredId] = useState(defaultHoveredBoundaryId);
|
|
31700
|
+
const hoveredId = isControlled ? hoveredBoundaryId : internalHoveredId;
|
|
31701
|
+
const setHoveredId = useCallback((id) => {
|
|
31702
|
+
if (!isControlled) {
|
|
31703
|
+
setInternalHoveredId(id);
|
|
31704
|
+
}
|
|
31705
|
+
onBoundaryHoverChange?.(id);
|
|
31706
|
+
}, [isControlled, onBoundaryHoverChange]);
|
|
31707
|
+
return {
|
|
31708
|
+
hoveredId,
|
|
31709
|
+
setHoveredId,
|
|
31710
|
+
};
|
|
31711
|
+
}
|
|
31712
|
+
|
|
31713
|
+
function filterSelectableIds(ids, disabledBoundaryIds) {
|
|
31714
|
+
if (!disabledBoundaryIds?.size)
|
|
31715
|
+
return ids;
|
|
31716
|
+
return ids.filter((id) => !disabledBoundaryIds.has(id));
|
|
31717
|
+
}
|
|
31718
|
+
/**
|
|
31719
|
+
* 地块多选状态管理(受控 / 非受控)
|
|
31720
|
+
*
|
|
31721
|
+
* - 传入 selectedBoundaryIds → 受控,由宿主维护选中列表(如表格勾选)
|
|
31722
|
+
* - 未传入 → 非受控,内部维护,仍可通过 onSelectionChange 感知变化
|
|
31723
|
+
*/
|
|
31724
|
+
function useBoundarySelection({ selectedBoundaryIds, defaultSelectedBoundaryIds = [], onSelectionChange, disabledBoundaryIds, }) {
|
|
31725
|
+
const isControlled = selectedBoundaryIds !== undefined;
|
|
31726
|
+
const [internalIds, setInternalIds] = useState(filterSelectableIds(defaultSelectedBoundaryIds, disabledBoundaryIds));
|
|
31727
|
+
const selectedIds = isControlled
|
|
31728
|
+
? filterSelectableIds(selectedBoundaryIds, disabledBoundaryIds)
|
|
31729
|
+
: internalIds;
|
|
31730
|
+
const setSelectedIds = useCallback((ids) => {
|
|
31731
|
+
const next = filterSelectableIds(ids, disabledBoundaryIds);
|
|
31732
|
+
if (!isControlled) {
|
|
31733
|
+
setInternalIds(next);
|
|
31734
|
+
}
|
|
31735
|
+
onSelectionChange?.(next);
|
|
31736
|
+
}, [disabledBoundaryIds, isControlled, onSelectionChange]);
|
|
31737
|
+
/** 点击同一地块时 toggle,支持多选;孤立子地块不可选 */
|
|
31738
|
+
const toggleBoundary = useCallback((id) => {
|
|
31739
|
+
if (disabledBoundaryIds?.has(id))
|
|
31740
|
+
return;
|
|
31741
|
+
const next = selectedIds.includes(id)
|
|
31742
|
+
? selectedIds.filter((item) => item !== id)
|
|
31743
|
+
: [...selectedIds, id];
|
|
31744
|
+
setSelectedIds(next);
|
|
31745
|
+
}, [disabledBoundaryIds, selectedIds, setSelectedIds]);
|
|
31746
|
+
return {
|
|
31747
|
+
selectedIds,
|
|
31748
|
+
toggleBoundary,
|
|
31749
|
+
setSelectedIds,
|
|
31750
|
+
};
|
|
31751
|
+
}
|
|
31752
|
+
|
|
31753
|
+
/** 计算地图中不可选中的孤立子地块 id 集合 */
|
|
31754
|
+
function useIsolatedBoundaryIds(mapJson) {
|
|
31755
|
+
return useMemo(() => {
|
|
31756
|
+
const boundaries = generateBoundaryData(mapJson);
|
|
31757
|
+
const ids = new Set();
|
|
31758
|
+
for (const boundary of boundaries) {
|
|
31759
|
+
if (boundary.isIsolated) {
|
|
31760
|
+
ids.add(boundary.id);
|
|
31761
|
+
}
|
|
31762
|
+
}
|
|
31763
|
+
return ids;
|
|
31764
|
+
}, [mapJson]);
|
|
31765
|
+
}
|
|
31766
|
+
/** 供宿主(如表格)判断某地块是否不可选 */
|
|
31767
|
+
function getIsolatedBoundaryIds(mapJson) {
|
|
31768
|
+
return generateBoundaryData(mapJson)
|
|
31769
|
+
.filter((boundary) => boundary.isIsolated)
|
|
31770
|
+
.map((boundary) => boundary.id);
|
|
31771
|
+
}
|
|
31772
|
+
|
|
31773
|
+
/** 计算多边形重心,作为分区名气泡的锚点 */
|
|
31774
|
+
function computePolygonCentroid(points) {
|
|
31775
|
+
if (!points || points.length < 3)
|
|
31776
|
+
return null;
|
|
31777
|
+
const valid = points.filter((p) => p.length >= 2);
|
|
31778
|
+
if (valid.length < 3)
|
|
31779
|
+
return null;
|
|
31780
|
+
const polygon = [...valid];
|
|
31781
|
+
const first = polygon[0];
|
|
31782
|
+
const last = polygon[polygon.length - 1];
|
|
31783
|
+
if (first[0] !== last[0] || first[1] !== last[1]) {
|
|
31784
|
+
polygon.push([first[0], first[1]]);
|
|
31785
|
+
}
|
|
31786
|
+
let area = 0;
|
|
31787
|
+
let cx = 0;
|
|
31788
|
+
let cy = 0;
|
|
31789
|
+
for (let i = 0; i < polygon.length - 1; i++) {
|
|
31790
|
+
const x0 = polygon[i][0];
|
|
31791
|
+
const y0 = polygon[i][1];
|
|
31792
|
+
const x1 = polygon[i + 1][0];
|
|
31793
|
+
const y1 = polygon[i + 1][1];
|
|
31794
|
+
const cross = x0 * y1 - x1 * y0;
|
|
31795
|
+
area += cross;
|
|
31796
|
+
cx += (x0 + x1) * cross;
|
|
31797
|
+
cy += (y0 + y1) * cross;
|
|
31798
|
+
}
|
|
31799
|
+
area = area / 2;
|
|
31800
|
+
if (Math.abs(area) < 1e-10) {
|
|
31801
|
+
let sx = 0;
|
|
31802
|
+
let sy = 0;
|
|
31803
|
+
for (const [x, y] of valid) {
|
|
31804
|
+
sx += x;
|
|
31805
|
+
sy += y;
|
|
31806
|
+
}
|
|
31807
|
+
return { x: sx / valid.length, y: sy / valid.length };
|
|
31808
|
+
}
|
|
31809
|
+
cx = cx / (6 * area);
|
|
31810
|
+
cy = cy / (6 * area);
|
|
31811
|
+
return { x: cx, y: cy };
|
|
31812
|
+
}
|
|
31813
|
+
function buildBoundaryLabelGeometry(mapData) {
|
|
31814
|
+
const boundaryData = generateBoundaryData(mapData);
|
|
31815
|
+
const results = [];
|
|
31816
|
+
for (const boundary of boundaryData) {
|
|
31817
|
+
const centroid = computePolygonCentroid(boundary.points);
|
|
31818
|
+
if (!centroid)
|
|
31819
|
+
continue;
|
|
31820
|
+
results.push({
|
|
31821
|
+
id: boundary.id,
|
|
31822
|
+
name: boundary.name,
|
|
31823
|
+
points: boundary.points,
|
|
31824
|
+
centroid,
|
|
31825
|
+
isIsolated: boundary.isIsolated,
|
|
31826
|
+
});
|
|
31827
|
+
}
|
|
31828
|
+
return results;
|
|
31829
|
+
}
|
|
31830
|
+
/**
|
|
31831
|
+
* 根据当前「显示 viewBox」计算分区名气泡位置(不预旋转;由 mapOverlayLayer CSS rotate 处理)
|
|
31832
|
+
*/
|
|
31833
|
+
function usePartitionLabelItems(mapData, viewBox, containerWidth, containerHeight, options) {
|
|
31834
|
+
const positionMode = options?.positionMode ?? 'meet';
|
|
31835
|
+
const boundaryGeometry = useMemo(() => (mapData ? buildBoundaryLabelGeometry(mapData) : []), [mapData]);
|
|
31836
|
+
return useMemo(() => {
|
|
31837
|
+
if (!viewBox || containerWidth <= 0 || containerHeight <= 0)
|
|
31838
|
+
return [];
|
|
31839
|
+
const results = [];
|
|
31840
|
+
for (const boundary of boundaryGeometry) {
|
|
31841
|
+
let leftPct;
|
|
31842
|
+
let topPct;
|
|
31843
|
+
if (positionMode === 'overlay') {
|
|
31844
|
+
const relX = (boundary.centroid.x - viewBox.x) / viewBox.width;
|
|
31845
|
+
const relY = (boundary.centroid.y - viewBox.y) / viewBox.height;
|
|
31846
|
+
leftPct = relX * 100;
|
|
31847
|
+
topPct = relY * 100;
|
|
31848
|
+
}
|
|
31849
|
+
else {
|
|
31850
|
+
const position = mapPointToContainerPercent(boundary.centroid.x, boundary.centroid.y, viewBox, containerWidth, containerHeight);
|
|
31851
|
+
leftPct = position.leftPct;
|
|
31852
|
+
topPct = position.topPct;
|
|
31853
|
+
}
|
|
31854
|
+
if (!Number.isFinite(leftPct) || !Number.isFinite(topPct))
|
|
31855
|
+
continue;
|
|
31856
|
+
const screenWidthPx = computePolygonScreenWidthPx(boundary.points, viewBox, containerWidth, containerHeight);
|
|
31857
|
+
results.push({
|
|
31858
|
+
id: boundary.id,
|
|
31859
|
+
name: boundary.name,
|
|
31860
|
+
leftPct,
|
|
31861
|
+
topPct,
|
|
31862
|
+
screenWidthPx,
|
|
31863
|
+
isIsolated: boundary.isIsolated,
|
|
31864
|
+
});
|
|
31865
|
+
}
|
|
31866
|
+
return results;
|
|
31867
|
+
}, [
|
|
31868
|
+
boundaryGeometry,
|
|
31869
|
+
containerWidth,
|
|
31870
|
+
containerHeight,
|
|
31871
|
+
viewBox?.x,
|
|
31872
|
+
viewBox?.y,
|
|
31873
|
+
viewBox?.width,
|
|
31874
|
+
viewBox?.height,
|
|
31875
|
+
positionMode,
|
|
31876
|
+
]);
|
|
31877
|
+
}
|
|
31878
|
+
|
|
31879
|
+
var css_248z = "@charset \"UTF-8\";\n/* 地图容器:裁剪溢出,禁用浏览器默认 touch 手势以便自定义 pinch */\n.index-module_container__nNYv7 {\n position: relative;\n overflow: hidden;\n touch-action: none;\n user-select: none;\n cursor: grab;\n /* H5 点击时不出现矩形 tap 高亮 */\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n}\n\n/* 网格 + 地块双层 SVG 叠放,共用 viewBox 保证平移/缩放同步 */\n.index-module_mapSvgStack__nz2s2 {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n.index-module_gridSvg__MoJD6 {\n position: absolute;\n inset: 0;\n display: block;\n pointer-events: none;\n}\n\n/* 地图 SVG:地块/通道,可绕 viewBox 中心旋转 */\n.index-module_mapSvg__vN0LV {\n position: absolute;\n inset: 0;\n display: block;\n pointer-events: none;\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n}\n\n/* 可点击地块:点击选中由 viewport 统一处理,此处保留 hover */\n.index-module_boundaryPolygon__uHe-E {\n cursor: grab;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n outline: none;\n -webkit-touch-callout: none;\n}\n\n.index-module_container__nNYv7:active {\n cursor: grabbing;\n}\n\n.index-module_boundaryPolygon__uHe-E:active {\n cursor: grabbing;\n}\n\n/* Map 模式:OverlayViewF 内根节点,铺满 overlay 像素区域 */\n.index-module_googleOverlayRoot__TQ3II {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: visible;\n}\n\n/* HTML overlay 层:CSS rotate 与 MowerMapRenderer OverlayViewF 一致,子元素自行反向补偿 */\n.index-module_mapOverlayLayer__7jTDy {\n position: absolute;\n inset: 0;\n transform-origin: 50% 50%;\n pointer-events: none;\n z-index: 2;\n}\n\n/* 分区名气泡层,绝对定位覆盖在 SVG 之上 */\n.index-module_labelsLayer__Rcikw {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n\n.index-module_label__xo3Kc {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n pointer-events: auto;\n cursor: grab;\n white-space: nowrap;\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n outline: none;\n -webkit-touch-callout: none;\n}\n\n.index-module_label__xo3Kc:active {\n cursor: grabbing;\n}\n\n.index-module_labelWithOrder__uiHNo {\n gap: 8px;\n}\n\n.index-module_labelWithOrderH5__fg3nU {\n gap: 4px;\n}\n\n.index-module_labelOrderOnly__TDLBU {\n gap: 0;\n}\n\n/* H5 名称标签:总宽 72px,文案最大 60px 可换行 */\n.index-module_labelH5Wrap__Es5cA {\n white-space: normal;\n}\n\n.index-module_labelPill__7jnOo {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n}\n\n.index-module_labelPillH5__iPeHi {\n width: 72px;\n max-width: 72px;\n box-sizing: border-box;\n}\n\n.index-module_labelText__ialST {\n word-break: break-word;\n text-align: center;\n}\n\n.index-module_labelTextH5__jz8SO {\n max-width: 60px;\n white-space: normal;\n overflow-wrap: anywhere;\n line-height: 1.33;\n}\n\n/* 选中序号徽章:尺寸与颜色由 constants 按 platform 注入 */\n.index-module_selectionOrderBadge__uj7LX {\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.index-module_boundaryPolygonIsolated__syN4V {\n cursor: not-allowed;\n}\n\n.index-module_boundaryPolygonIsolated__syN4V:active {\n cursor: grabbing;\n}\n\n.index-module_labelIsolated__K3WAB {\n cursor: not-allowed;\n pointer-events: auto;\n}\n\n.index-module_labelIsolated__K3WAB:active {\n cursor: grabbing;\n}\n\n.index-module_labelIsolatedLayout__k-rwI {\n gap: 4px;\n}\n\n.index-module_isolatedIconBelow__PuVIF {\n position: static;\n transform: none;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.index-module_isolatedIconBelow__PuVIF.index-module_isolatedIconWeb__iPkYp {\n width: 20px;\n height: 20px;\n}\n\n.index-module_isolatedIcon__Vbxl0 {\n position: absolute;\n width: 24px;\n height: 24px;\n left: 50%;\n bottom: calc(100% + 4px);\n transform: translateX(-50%);\n}\n\n.index-module_isolatedIconWeb__iPkYp {\n width: 20px;\n height: 20px;\n bottom: calc(100% + 2px);\n}";
|
|
31880
|
+
var styles = {"container":"index-module_container__nNYv7","mapSvgStack":"index-module_mapSvgStack__nz2s2","gridSvg":"index-module_gridSvg__MoJD6","mapSvg":"index-module_mapSvg__vN0LV","boundaryPolygon":"index-module_boundaryPolygon__uHe-E","googleOverlayRoot":"index-module_googleOverlayRoot__TQ3II","mapOverlayLayer":"index-module_mapOverlayLayer__7jTDy","labelsLayer":"index-module_labelsLayer__Rcikw","label":"index-module_label__xo3Kc","labelWithOrder":"index-module_labelWithOrder__uiHNo","labelWithOrderH5":"index-module_labelWithOrderH5__fg3nU","labelOrderOnly":"index-module_labelOrderOnly__TDLBU","labelH5Wrap":"index-module_labelH5Wrap__Es5cA","labelPill":"index-module_labelPill__7jnOo","labelPillH5":"index-module_labelPillH5__iPeHi","labelText":"index-module_labelText__ialST","labelTextH5":"index-module_labelTextH5__jz8SO","selectionOrderBadge":"index-module_selectionOrderBadge__uj7LX","boundaryPolygonIsolated":"index-module_boundaryPolygonIsolated__syN4V","labelIsolated":"index-module_labelIsolated__K3WAB","labelIsolatedLayout":"index-module_labelIsolatedLayout__k-rwI","isolatedIconBelow":"index-module_isolatedIconBelow__PuVIF","isolatedIconWeb":"index-module_isolatedIconWeb__iPkYp"};
|
|
31881
|
+
styleInject(css_248z);
|
|
31882
|
+
|
|
31883
|
+
const PARTITION_BOUNDARY_ID_ATTR$1 = 'data-partition-boundary-id';
|
|
31884
|
+
const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isIsolated = false, selected, hovered, viewBoxWidth, viewBoxHeight, fitViewBox, containerWidth, containerHeight, onHoverChange, onBoundaryClick, }) => {
|
|
31885
|
+
const style = data.style || {};
|
|
31886
|
+
const boundaryId = Number(data.id);
|
|
31887
|
+
const colors = boundaryColors;
|
|
31888
|
+
const strokePx = boundaryStrokePx ?? {
|
|
31889
|
+
default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
|
|
31890
|
+
emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
|
|
31891
|
+
};
|
|
31892
|
+
const pointsString = useMemo(() => data.points.map((point) => `${point[0]},${point[1]}`).join(' '), [data.points]);
|
|
31893
|
+
const fillColor = useMemo(() => {
|
|
31894
|
+
if (isIsolated)
|
|
31895
|
+
return colors.isolatedFill;
|
|
31896
|
+
if (selected) {
|
|
31897
|
+
return hovered ? colors.selectedHoverFill : colors.selectedFill;
|
|
31898
|
+
}
|
|
31899
|
+
if (hovered)
|
|
31900
|
+
return colors.hoverFill;
|
|
31901
|
+
return style.fillColor || colors.defaultFill;
|
|
31902
|
+
}, [colors, hovered, isIsolated, selected, style.fillColor]);
|
|
31903
|
+
const strokeColor = useMemo(() => {
|
|
31904
|
+
if (isIsolated)
|
|
31905
|
+
return colors.isolatedStroke;
|
|
31906
|
+
if (selected) {
|
|
31907
|
+
return hovered ? colors.selectedHoverStroke : colors.selectedStroke;
|
|
31908
|
+
}
|
|
31909
|
+
if (hovered)
|
|
31910
|
+
return colors.hoverStroke;
|
|
31911
|
+
return style.lineColor || colors.defaultStroke;
|
|
31912
|
+
}, [colors, hovered, isIsolated, selected, style.lineColor]);
|
|
31913
|
+
const strokeWidth = useMemo(() => {
|
|
31914
|
+
let baseWidth;
|
|
31915
|
+
let emphasized = false;
|
|
31916
|
+
if (isIsolated)
|
|
31917
|
+
baseWidth = colors.isolatedStrokeWidth;
|
|
31918
|
+
else if (selected) {
|
|
31919
|
+
emphasized = true;
|
|
31920
|
+
baseWidth = hovered ? colors.selectedHoverStrokeWidth : colors.selectedStrokeWidth;
|
|
31921
|
+
}
|
|
31922
|
+
else if (hovered) {
|
|
31923
|
+
emphasized = true;
|
|
31924
|
+
baseWidth = colors.hoverStrokeWidth;
|
|
31925
|
+
}
|
|
31926
|
+
else
|
|
31927
|
+
baseWidth = colors.defaultStrokeWidth;
|
|
31928
|
+
const viewBox = { width: viewBoxWidth, height: viewBoxHeight };
|
|
31929
|
+
return scaleStrokeWidthForViewBox(baseWidth, viewBox, fitViewBox, {
|
|
31930
|
+
containerWidth,
|
|
31931
|
+
containerHeight,
|
|
31932
|
+
minScreenStrokePx: emphasized ? strokePx.emphasized : strokePx.default,
|
|
31933
|
+
});
|
|
31934
|
+
}, [
|
|
31935
|
+
colors,
|
|
31936
|
+
containerHeight,
|
|
31937
|
+
containerWidth,
|
|
31938
|
+
fitViewBox,
|
|
31939
|
+
hovered,
|
|
31940
|
+
isIsolated,
|
|
31941
|
+
selected,
|
|
31942
|
+
strokePx,
|
|
31943
|
+
viewBoxHeight,
|
|
31944
|
+
viewBoxWidth,
|
|
31945
|
+
]);
|
|
31946
|
+
if (isIsolated) {
|
|
31947
|
+
return (jsx("polygon", { className: `${styles.boundaryPolygon} ${styles.boundaryPolygonIsolated}`, points: pointsString, fill: fillColor, stroke: strokeColor, strokeWidth: strokeWidth, strokeLinejoin: "round" }));
|
|
31948
|
+
}
|
|
31949
|
+
return (jsx("polygon", { className: styles.boundaryPolygon, points: pointsString, fill: fillColor, stroke: strokeColor, strokeWidth: strokeWidth, strokeLinejoin: "round", [PARTITION_BOUNDARY_ID_ATTR$1]: boundaryId, onMouseEnter: () => onHoverChange(boundaryId), onMouseLeave: () => onHoverChange(null), onClick: onBoundaryClick
|
|
31950
|
+
? (event) => {
|
|
31951
|
+
event.stopPropagation();
|
|
31952
|
+
onBoundaryClick(boundaryId);
|
|
31953
|
+
}
|
|
31954
|
+
: undefined }));
|
|
31955
|
+
};
|
|
31956
|
+
var SelectableBoundaryElement$1 = memo(SelectableBoundaryElement);
|
|
31957
|
+
|
|
31958
|
+
const PartitionPickerSvg = ({ svgElementDatas, viewBox, fitViewBox, containerWidth, containerHeight, mapRotation = 0, boundaryColors, boundaryStrokePx, isolatedBoundaryIds, selectedIds, hoveredId, onHoverChange, onBoundaryClick, }) => {
|
|
31959
|
+
const boundaries = (svgElementDatas[DataType.BOUNDARY] || []);
|
|
31960
|
+
const channels = (svgElementDatas[DataType.CHANNEL] || []);
|
|
31961
|
+
const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
|
|
31962
|
+
const mapContentTransform = useMemo(() => {
|
|
31963
|
+
if (mapRotation === 0)
|
|
31964
|
+
return undefined;
|
|
31965
|
+
const { x: cx, y: cy } = getViewBoxCenter(viewBox);
|
|
31966
|
+
return `rotate(${mapRotation}, ${cx}, ${cy})`;
|
|
31967
|
+
}, [mapRotation, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
|
|
31968
|
+
const mapContent = (jsxs(Fragment, { children: [jsx(GElement, { type: "boundary", children: boundaries.map((item) => {
|
|
31969
|
+
const boundaryId = Number(item.id);
|
|
31970
|
+
return (jsx(SelectableBoundaryElement$1, { data: item, boundaryColors: boundaryColors, boundaryStrokePx: boundaryStrokePx, isIsolated: isolatedBoundaryIds.has(boundaryId), selected: selectedIdSet.has(boundaryId), hovered: hoveredId === boundaryId, viewBoxWidth: viewBox.width, viewBoxHeight: viewBox.height, fitViewBox: fitViewBox, containerWidth: containerWidth, containerHeight: containerHeight, onHoverChange: onHoverChange, onBoundaryClick: onBoundaryClick }, item.id));
|
|
31971
|
+
}) }), jsxs(GElement, { type: "channel", children: [jsx(ChannelClipPath, {}), channels.map((item) => (jsx(ChannelElement, { data: item }, item.id)))] })] }));
|
|
31972
|
+
return (jsx("svg", { className: styles.mapSvg, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", shapeRendering: "geometricPrecision", children: mapContentTransform ? (jsx("g", { transform: mapContentTransform, children: mapContent })) : (mapContent) }));
|
|
31973
|
+
};
|
|
31974
|
+
|
|
31975
|
+
function estimateGridIntersectionCount(viewBox, tileSize) {
|
|
31976
|
+
if (tileSize <= 0)
|
|
31977
|
+
return 0;
|
|
31978
|
+
const cols = Math.floor((viewBox.width + 1e-6) / tileSize) + 1;
|
|
31979
|
+
const rows = Math.floor((viewBox.height + 1e-6) / tileSize) + 1;
|
|
31980
|
+
return cols * rows;
|
|
31981
|
+
}
|
|
31982
|
+
/** 计算当前 viewBox 可见范围内的网格交点(每个交点只渲染一次圆点) */
|
|
31983
|
+
function getVisibleGridIntersections(viewBox, tileSize, maxDots) {
|
|
31984
|
+
if (tileSize <= 0 || estimateGridIntersectionCount(viewBox, tileSize) > maxDots)
|
|
31985
|
+
return [];
|
|
31986
|
+
const points = [];
|
|
31987
|
+
const minX = viewBox.x;
|
|
31988
|
+
const minY = viewBox.y;
|
|
31989
|
+
const maxX = viewBox.x + viewBox.width;
|
|
31990
|
+
const maxY = viewBox.y + viewBox.height;
|
|
31991
|
+
const startX = Math.floor(minX / tileSize) * tileSize;
|
|
31992
|
+
const startY = Math.floor(minY / tileSize) * tileSize;
|
|
31993
|
+
for (let x = startX; x <= maxX + 1e-6; x += tileSize) {
|
|
31994
|
+
for (let y = startY; y <= maxY + 1e-6; y += tileSize) {
|
|
31995
|
+
points.push({ x, y });
|
|
31996
|
+
}
|
|
31997
|
+
}
|
|
31998
|
+
return points;
|
|
31999
|
+
}
|
|
32000
|
+
const MapGridBackground = ({ viewBox, gridStyle }) => {
|
|
32001
|
+
const reactId = useId();
|
|
32002
|
+
const patternId = useMemo(() => `partition-picker-grid-lines-${reactId.replace(/:/g, '-')}`, [reactId]);
|
|
32003
|
+
const { baseColor, strokeColor, tileSize: tile, lineWidth, dotRadius, opacity, maxIntersectionDots, } = gridStyle;
|
|
32004
|
+
const intersections = useMemo(() => getVisibleGridIntersections(viewBox, tile, maxIntersectionDots), [maxIntersectionDots, tile, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
|
|
32005
|
+
return (jsxs("g", { className: "partition-picker-grid-bg", "aria-hidden": true, pointerEvents: "none", children: [jsx("defs", { children: jsxs("pattern", { id: patternId, patternUnits: "userSpaceOnUse", width: tile, height: tile, children: [jsx("line", { x1: 0, y1: 0, x2: tile, y2: 0, stroke: strokeColor, strokeWidth: lineWidth }), jsx("line", { x1: 0, y1: 0, x2: 0, y2: tile, stroke: strokeColor, strokeWidth: lineWidth })] }) }), jsx("rect", { x: viewBox.x, y: viewBox.y, width: viewBox.width, height: viewBox.height, fill: baseColor }), jsx("rect", { x: viewBox.x, y: viewBox.y, width: viewBox.width, height: viewBox.height, fill: `url(#${patternId})`, opacity: opacity }), jsx("g", { opacity: opacity, children: intersections.map((point, index) => (jsx("circle", { cx: point.x, cy: point.y, r: dotRadius, fill: strokeColor }, `${point.x}-${point.y}-${index}`))) })] }));
|
|
32006
|
+
};
|
|
32007
|
+
var MapGridBackground$1 = memo(MapGridBackground);
|
|
32008
|
+
|
|
32009
|
+
const PartitionPickerGridSvg = ({ viewBox, gridStyle }) => {
|
|
32010
|
+
return (jsx("svg", { className: styles.gridSvg, "data-viewport-background": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", shapeRendering: "geometricPrecision", "aria-hidden": true, children: jsx(MapGridBackground$1, { viewBox: viewBox, gridStyle: gridStyle }) }));
|
|
32011
|
+
};
|
|
32012
|
+
|
|
32013
|
+
const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWidthPx = 72, platform = PlatformType.WEB, showSelectionOrder = false, rotation = 0, onHoverChange, onBoundaryClick, }) => {
|
|
32014
|
+
const isWeb = platform === PlatformType.WEB;
|
|
32015
|
+
const orderBadgeStyle = useMemo(() => ({
|
|
32016
|
+
width: labelStyles.selectionOrderBadge.width,
|
|
32017
|
+
height: labelStyles.selectionOrderBadge.height,
|
|
32018
|
+
background: labelStyles.selectionOrderBadge.background,
|
|
32019
|
+
border: labelStyles.selectionOrderBadge.border,
|
|
32020
|
+
color: labelStyles.selectionOrderBadge.color,
|
|
32021
|
+
fontSize: `${labelStyles.selectionOrderBadge.fontSize}px`,
|
|
32022
|
+
fontWeight: labelStyles.selectionOrderBadge.fontWeight,
|
|
32023
|
+
lineHeight: labelStyles.selectionOrderBadge.lineHeight,
|
|
32024
|
+
}), [labelStyles]);
|
|
32025
|
+
return (jsx("div", { className: styles.labelsLayer, children: items.map((item) => {
|
|
32026
|
+
const isIsolated = item.isIsolated === true;
|
|
32027
|
+
const selected = !isIsolated && selectedIds.includes(item.id);
|
|
32028
|
+
const selectionOrder = selected ? selectedIds.indexOf(item.id) + 1 : null;
|
|
32029
|
+
const isLargeEnough = item.screenWidthPx > labelMinScreenWidthPx;
|
|
32030
|
+
// Web 始终展示名称;H5 按屏幕宽度决定
|
|
32031
|
+
const showNameLabel = isWeb || isLargeEnough;
|
|
32032
|
+
const showOrderBadge = showSelectionOrder && selected && selectionOrder != null;
|
|
32033
|
+
const h5OrderOnly = !isWeb && showOrderBadge && !isLargeEnough;
|
|
32034
|
+
const h5OrderWithName = !isWeb && showOrderBadge && isLargeEnough;
|
|
32035
|
+
if (!showNameLabel && !showOrderBadge && !isIsolated) {
|
|
32036
|
+
return null;
|
|
32037
|
+
}
|
|
32038
|
+
const pillStyle = labelAppearanceToStyle(selected ? labelStyles.selected : labelStyles.default);
|
|
32039
|
+
const labelClassName = [
|
|
32040
|
+
styles.label,
|
|
32041
|
+
!isWeb && showNameLabel ? styles.labelH5Wrap : '',
|
|
32042
|
+
isIsolated ? styles.labelIsolated : '',
|
|
32043
|
+
isWeb && showOrderBadge ? styles.labelWithOrder : '',
|
|
32044
|
+
h5OrderWithName ? styles.labelWithOrderH5 : '',
|
|
32045
|
+
h5OrderOnly ? styles.labelOrderOnly : '',
|
|
32046
|
+
isIsolated ? styles.labelIsolatedLayout : '',
|
|
32047
|
+
]
|
|
32048
|
+
.filter(Boolean)
|
|
32049
|
+
.join(' ');
|
|
32050
|
+
const boundaryIdProps = isIsolated ? {} : { [PARTITION_BOUNDARY_ID_ATTR$1]: item.id };
|
|
32051
|
+
return (jsxs("div", { className: labelClassName, style: {
|
|
32052
|
+
left: `${item.leftPct}%`,
|
|
32053
|
+
top: `${item.topPct}%`,
|
|
32054
|
+
transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
|
|
32055
|
+
}, ...boundaryIdProps, onMouseEnter: isIsolated ? undefined : () => onHoverChange(item.id), onMouseLeave: isIsolated ? undefined : () => onHoverChange(null), onClick: onBoundaryClick && !isIsolated
|
|
32056
|
+
? (event) => {
|
|
32057
|
+
event.stopPropagation();
|
|
32058
|
+
onBoundaryClick(item.id);
|
|
32059
|
+
}
|
|
32060
|
+
: undefined, children: [showOrderBadge && (jsx("div", { className: styles.selectionOrderBadge, style: orderBadgeStyle, children: selectionOrder })), showNameLabel && (jsx("div", { className: `${styles.labelPill} ${!isWeb ? styles.labelPillH5 : ''}`, style: pillStyle, children: jsx("span", { className: `${styles.labelText} ${!isWeb ? styles.labelTextH5 : ''}`, children: item.name }) })), isIsolated && (jsx("div", { className: `${styles.isolatedIconBelow} ${isWeb ? styles.isolatedIconWeb : ''}`, dangerouslySetInnerHTML: { __html: ISOLATED_BOUNDARY_SVG } }))] }, item.id));
|
|
32061
|
+
}) }));
|
|
32062
|
+
};
|
|
32063
|
+
|
|
32064
|
+
const DEFAULT_BACKGROUND = PARTITION_PICKER_GRID_BASE_COLOR;
|
|
32065
|
+
/** 地块 polygon / 标签上的 data 属性,供 viewport 点击命中与表格联动 */
|
|
32066
|
+
const PARTITION_BOUNDARY_ID_ATTR = 'data-partition-boundary-id';
|
|
32067
|
+
/** Map 模式下 OverlayViewF 默认 z-index */
|
|
32068
|
+
const DEFAULT_OVERLAY_Z_INDEX = 100;
|
|
32069
|
+
const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleConfig, sn = '', platform = PlatformType.WEB, width, height, padding = 50, backgroundColor = DEFAULT_BACKGROUND, defaultTransform, mapRef, minZoom = 0.5, maxZoom = 4, enablePanZoom = true, refitOnResize = true, onSizeChange, selectedBoundaryIds, defaultSelectedBoundaryIds, onSelectionChange, hoveredBoundaryId, defaultHoveredBoundaryId, onBoundaryHoverChange, showSelectionOrder = false, zIndex = DEFAULT_OVERLAY_Z_INDEX, className, style, }, ref) => {
|
|
32070
|
+
/**
|
|
32071
|
+
* 是否为 Map 模式(传入 mapRef 时为 true):
|
|
32072
|
+
* - true:Google Maps 底图 + OverlayViewF,平移/缩放/fit 由底图负责
|
|
32073
|
+
* - false:Standalone 固定容器 + 网格 SVG + useMapViewport
|
|
32074
|
+
*/
|
|
32075
|
+
const isMapMode = Boolean(mapRef);
|
|
32076
|
+
const reactInstanceId = useId();
|
|
32077
|
+
const channelClipPathId = useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
|
|
32078
|
+
/** 外部 pickerStyleConfig 与内置 platform 默认值合并后的最终外观(地块/标签/网格等) */
|
|
32079
|
+
const mergedPickerStyles = useMemo(() => resolvePartitionPickerStyles(platform, pickerStyleConfig), [pickerStyleConfig, platform]);
|
|
32080
|
+
/** Standalone 容器留白与网格底色;pickerStyleConfig.grid.baseColor 优先于 backgroundColor */
|
|
32081
|
+
const resolvedBackgroundColor = pickerStyleConfig?.grid?.baseColor ?? backgroundColor ?? DEFAULT_BACKGROUND;
|
|
32082
|
+
const mergedMapConfig = useMemo(() => merge$1({}, DEFAULT_STYLES, getPartitionPickerMapConfig(platform), mapConfig), [mapConfig, platform]);
|
|
32083
|
+
const svgElementDatas = useMemo(() => UnifiedMapDataProcessor.processMapData(mapJson, mergedMapConfig) || {}, [mapJson, mergedMapConfig]);
|
|
32084
|
+
/** 地图 Y 轴相对正北的偏移(度),与 MowerMapRenderer.originNorthRotate 一致 */
|
|
32085
|
+
const originNorthRotate = useMemo(() => {
|
|
32086
|
+
if (mapJson.map_north_offset)
|
|
32087
|
+
return (mapJson.map_north_offset * 180) / Math.PI;
|
|
32088
|
+
return 0;
|
|
32089
|
+
}, [mapJson.map_north_offset]);
|
|
32090
|
+
/** Standalone 模式:叠加层实际旋转角(度)= 地图北向偏移 + 外部传入 rotation */
|
|
32091
|
+
const standaloneActureRotate = useMemo(() => originNorthRotate + (defaultTransform?.rotation ?? 0), [originNorthRotate, defaultTransform?.rotation]);
|
|
32092
|
+
/**
|
|
32093
|
+
* 稳定的内容 viewBox(地图全量范围 + SVG 裁剪边距)
|
|
32094
|
+
* 供 ChannelClipPath 使用,不随用户平移/缩放变化
|
|
32095
|
+
*/
|
|
32096
|
+
const contentViewBox = useMemo(() => {
|
|
32097
|
+
const bounds = calculateMapBounds(mapJson);
|
|
32098
|
+
return boundsToContentViewBox(bounds, PARTITION_PICKER_CONTENT_CLIP_PADDING);
|
|
32099
|
+
}, [mapJson]);
|
|
32100
|
+
/** 孤立地块 id 列表(未连接到主地块的子地块) */
|
|
32101
|
+
const isolatedBoundaryIds = useIsolatedBoundaryIds(mapJson);
|
|
32102
|
+
/** 选中地块 id 列表(受控/非受控)与切换选中回调 */
|
|
32103
|
+
const { selectedIds, toggleBoundary, setSelectedIds } = useBoundarySelection({
|
|
32104
|
+
selectedBoundaryIds,
|
|
32105
|
+
defaultSelectedBoundaryIds,
|
|
32106
|
+
onSelectionChange,
|
|
32107
|
+
disabledBoundaryIds: isolatedBoundaryIds,
|
|
32108
|
+
});
|
|
32109
|
+
/** 当前 hover 的地块 id(受控/非受控)与切换 hover 回调 */
|
|
32110
|
+
const { hoveredId, setHoveredId } = useBoundaryHover({
|
|
32111
|
+
hoveredBoundaryId,
|
|
32112
|
+
defaultHoveredBoundaryId,
|
|
32113
|
+
onBoundaryHoverChange,
|
|
32114
|
+
});
|
|
32115
|
+
const handleHoverChange = useCallback((id) => {
|
|
32116
|
+
if (id != null && isolatedBoundaryIds.has(id))
|
|
32117
|
+
return;
|
|
32118
|
+
setHoveredId(id);
|
|
32119
|
+
}, [isolatedBoundaryIds, setHoveredId]);
|
|
32120
|
+
/** Map 模式:地块 polygon / 标签直接 onClick(无底图拖拽抢占) */
|
|
32121
|
+
const handleBoundaryClick = useCallback((id) => {
|
|
32122
|
+
if (isolatedBoundaryIds.has(id))
|
|
32123
|
+
return;
|
|
32124
|
+
toggleBoundary(id);
|
|
32125
|
+
}, [isolatedBoundaryIds, toggleBoundary]);
|
|
32126
|
+
/** Standalone 模式:由 viewport 统一处理点击(支持在地块上拖拽平移) */
|
|
32127
|
+
const handleViewportTap = useCallback((target) => {
|
|
32128
|
+
const boundaryEl = target.closest(`[${PARTITION_BOUNDARY_ID_ATTR}]`);
|
|
32129
|
+
if (!boundaryEl)
|
|
32130
|
+
return;
|
|
32131
|
+
const id = Number(boundaryEl.getAttribute(PARTITION_BOUNDARY_ID_ATTR));
|
|
32132
|
+
if (!Number.isFinite(id) || isolatedBoundaryIds.has(id))
|
|
32133
|
+
return;
|
|
32134
|
+
toggleBoundary(id);
|
|
32135
|
+
}, [isolatedBoundaryIds, toggleBoundary]);
|
|
32136
|
+
/**
|
|
32137
|
+
* Map 模式 overlay 状态(bounds / viewBox / fitBounds / overlayScale)。
|
|
32138
|
+
* 无 mapRef 时 hook 内部 enabled=false,返回值不参与渲染。
|
|
32139
|
+
*/
|
|
32140
|
+
const googleOverlay = useGoogleMapsOverlay({
|
|
32141
|
+
mapJson,
|
|
32142
|
+
mapRef,
|
|
32143
|
+
defaultTransform,
|
|
32144
|
+
originNorthRotate,
|
|
32145
|
+
platform,
|
|
32146
|
+
padding,
|
|
32147
|
+
});
|
|
32148
|
+
/** Standalone 才测量容器;Map 模式尺寸由 OverlayViewF onDraw 提供 */
|
|
32149
|
+
const { containerRef, layoutStyle, width: pxWidth, height: pxHeight, isReady, } = useContainerSize(isMapMode ? 0 : width, isMapMode ? 0 : height);
|
|
32150
|
+
useEffect(() => {
|
|
32151
|
+
if (!isMapMode && isReady) {
|
|
32152
|
+
onSizeChange?.(pxWidth, pxHeight);
|
|
32153
|
+
}
|
|
32154
|
+
}, [isMapMode, isReady, onSizeChange, pxWidth, pxHeight]);
|
|
32155
|
+
/** Standalone:平移/缩放 viewBox;Map 模式 enablePanZoom 关闭,仅保留 hook 结构 */
|
|
32156
|
+
const { viewBox: standaloneViewBox, gridViewBox, fitViewBox: standaloneFitViewBox, resetView: standaloneResetView, fitToView: standaloneFitToView, } = useMapViewport({
|
|
32157
|
+
mapJson,
|
|
32158
|
+
containerRef,
|
|
32159
|
+
width: pxWidth,
|
|
32160
|
+
height: pxHeight,
|
|
32161
|
+
padding,
|
|
32162
|
+
minZoom,
|
|
32163
|
+
maxZoom,
|
|
32164
|
+
refitOnResize,
|
|
32165
|
+
enablePanZoom: enablePanZoom && !isMapMode,
|
|
32166
|
+
onViewportTap: handleViewportTap,
|
|
32167
|
+
mapRotationDeg: standaloneActureRotate,
|
|
32168
|
+
});
|
|
32169
|
+
/** 按模式选取 viewBox / 尺寸 / 旋转 / 就绪状态(Map 与 Standalone 数据源不同) */
|
|
32170
|
+
const viewBox = isMapMode ? googleOverlay.svgViewBox : standaloneViewBox;
|
|
32171
|
+
const fitViewBox = isMapMode ? googleOverlay.fitViewBox : standaloneFitViewBox;
|
|
32172
|
+
const overlayWidth = isMapMode ? googleOverlay.overlayWidth : pxWidth;
|
|
32173
|
+
const overlayHeight = isMapMode ? googleOverlay.overlayHeight : pxHeight;
|
|
32174
|
+
const actureRotate = isMapMode ? googleOverlay.actureRotate : standaloneActureRotate;
|
|
32175
|
+
const isLayersReady = isMapMode ? googleOverlay.isOverlayReady : isReady;
|
|
32176
|
+
/**
|
|
32177
|
+
* Standalone:标签/充电桩置于 mapOverlayLayer,CSS rotate 与 MowerMapRenderer 一致。
|
|
32178
|
+
* Map 模式:旋转由 OverlayViewF 承担,此处不需要额外包裹层。
|
|
32179
|
+
*/
|
|
32180
|
+
const mapOverlayLayerStyle = useMemo(() => !isMapMode && actureRotate !== 0 ? { transform: `rotate(${actureRotate}deg)` } : undefined, [actureRotate, isMapMode]);
|
|
32181
|
+
/**
|
|
32182
|
+
* 分区名定位:
|
|
32183
|
+
* - Map 模式 overlay:相对 overlay 宽高百分比(与 BoundaryLabels 一致)
|
|
32184
|
+
* - Standalone meet:按 preserveAspectRatio 换算容器百分比
|
|
32185
|
+
*/
|
|
32186
|
+
const labelItems = usePartitionLabelItems(mapJson, viewBox, overlayWidth, overlayHeight, {
|
|
32187
|
+
positionMode: isMapMode ? 'overlay' : 'meet',
|
|
32188
|
+
});
|
|
32189
|
+
/**
|
|
32190
|
+
* 复用 ChannelClipPath / ChannelElement / CharginPile 所需的最小 Context
|
|
32191
|
+
* - svgViewBox:稳定 contentViewBox(见上)
|
|
32192
|
+
* - channelClipPathId:同页多实例时避免 SVG id 冲突
|
|
32193
|
+
* - platform:供子组件读取 Web / H5 差异
|
|
32194
|
+
* - Map 模式额外注入 mapRef / bounds / overlayScale(通道线宽等)
|
|
32195
|
+
*/
|
|
32196
|
+
const commonValue = useMemo(() => ({
|
|
32197
|
+
sn,
|
|
32198
|
+
platform,
|
|
32199
|
+
svgViewBox: contentViewBox,
|
|
32200
|
+
channelClipPathId,
|
|
32201
|
+
...(isMapMode && mapRef
|
|
32202
|
+
? {
|
|
32203
|
+
mapRef,
|
|
32204
|
+
bounds: googleOverlay.bounds,
|
|
32205
|
+
overlayScale: googleOverlay.overlayScale,
|
|
32206
|
+
}
|
|
32207
|
+
: {}),
|
|
32208
|
+
}), [
|
|
32209
|
+
sn,
|
|
32210
|
+
platform,
|
|
32211
|
+
contentViewBox,
|
|
32212
|
+
channelClipPathId,
|
|
32213
|
+
isMapMode,
|
|
32214
|
+
mapRef,
|
|
32215
|
+
googleOverlay.bounds,
|
|
32216
|
+
googleOverlay.overlayScale,
|
|
32217
|
+
]);
|
|
32218
|
+
const svgEditValue = useMemo(() => ({
|
|
32219
|
+
svgElementDatas,
|
|
32220
|
+
}), [svgElementDatas]);
|
|
32221
|
+
useImperativeHandle(ref, () => ({
|
|
32222
|
+
fitToView: isMapMode ? googleOverlay.fitToView : standaloneFitToView,
|
|
32223
|
+
resetView: isMapMode ? googleOverlay.resetView : standaloneResetView,
|
|
32224
|
+
getSelectedBoundaryIds: () => selectedIds,
|
|
32225
|
+
setSelectedBoundaryIds: setSelectedIds,
|
|
32226
|
+
getHoveredBoundaryId: () => hoveredId,
|
|
32227
|
+
setHoveredBoundaryId: setHoveredId,
|
|
32228
|
+
}), [
|
|
32229
|
+
googleOverlay.fitToView,
|
|
32230
|
+
googleOverlay.resetView,
|
|
32231
|
+
hoveredId,
|
|
32232
|
+
isMapMode,
|
|
32233
|
+
selectedIds,
|
|
32234
|
+
setHoveredId,
|
|
32235
|
+
setSelectedIds,
|
|
32236
|
+
standaloneFitToView,
|
|
32237
|
+
standaloneResetView,
|
|
32238
|
+
]);
|
|
32239
|
+
const containerStyle = useMemo(() => ({
|
|
32240
|
+
backgroundColor: isMapMode ? 'transparent' : resolvedBackgroundColor,
|
|
32241
|
+
...style,
|
|
32242
|
+
...(isMapMode ? {} : layoutStyle),
|
|
32243
|
+
}), [isMapMode, layoutStyle, resolvedBackgroundColor, style]);
|
|
32244
|
+
/** 地块 + 通道 SVG;Map 模式不在 SVG 内旋转(由 OverlayViewF rotate 处理) */
|
|
32245
|
+
const mapSvgLayer = viewBox && isLayersReady ? (jsx(PartitionPickerSvg, { svgElementDatas: svgElementDatas, viewBox: viewBox, fitViewBox: fitViewBox ?? viewBox, containerWidth: overlayWidth, containerHeight: overlayHeight, mapRotation: isMapMode ? 0 : actureRotate, boundaryColors: mergedPickerStyles.boundary, boundaryStrokePx: mergedPickerStyles.boundaryStrokePx, isolatedBoundaryIds: isolatedBoundaryIds, selectedIds: selectedIds, hoveredId: hoveredId, onHoverChange: handleHoverChange, onBoundaryClick: isMapMode ? handleBoundaryClick : undefined })) : null;
|
|
32246
|
+
/**
|
|
32247
|
+
* 分区标签 + 充电桩 HTML 层。
|
|
32248
|
+
* Map 模式:平铺于 overlay 根节点;Standalone:包在 mapOverlayLayer 内做 CSS 旋转。
|
|
32249
|
+
*/
|
|
32250
|
+
const overlayLayers = viewBox && isLayersReady ? (isMapMode ? (jsxs(Fragment, { children: [jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, labelMinScreenWidthPx: mergedPickerStyles.labelMinScreenWidthPx, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange, onBoundaryClick: handleBoundaryClick }), jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate })] })) : (jsxs("div", { className: styles.mapOverlayLayer, style: mapOverlayLayerStyle, children: [jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, labelMinScreenWidthPx: mergedPickerStyles.labelMinScreenWidthPx, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange }), jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate, viewRotationMode: "overlay-parent", containerWidth: overlayWidth, containerHeight: overlayHeight })] }))) : null;
|
|
32251
|
+
/** Map 模式:渲染 OverlayViewF,底图为 Google Maps */
|
|
32252
|
+
if (isMapMode && mapRef) {
|
|
32253
|
+
return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsx(OverlayViewF, { map: mapRef, mapPaneName: "overlayMouseTarget", bounds: googleOverlay.bounds ?? undefined, rotate: actureRotate, zIndex: zIndex, onDraw: googleOverlay.handleOverlayDraw, children: jsxs("div", { className: `${styles.googleOverlayRoot} ${className || ''}`, style: containerStyle, onMouseLeave: () => setHoveredId(null), children: [mapSvgLayer, overlayLayers] }) }) }) }));
|
|
32254
|
+
}
|
|
32255
|
+
/** Standalone 模式:固定容器 + 网格底图 + 双层 SVG / HTML overlay */
|
|
32256
|
+
return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsx("div", { ref: containerRef, className: `${styles.container} ${className || ''}`, "data-viewport-background": "true", style: containerStyle, onMouseLeave: () => setHoveredId(null), children: isLayersReady && (jsxs(Fragment, { children: [jsxs("div", { className: styles.mapSvgStack, children: [jsx(PartitionPickerGridSvg, { viewBox: gridViewBox, gridStyle: mergedPickerStyles.grid }), mapSvgLayer] }), overlayLayers] })) }) }) }));
|
|
32257
|
+
});
|
|
32258
|
+
MowerPartitionPickerMap.displayName = 'MowerPartitionPickerMap';
|
|
32259
|
+
|
|
32260
|
+
export { ALL_DIRECTION_SELECTED, AntennaData, BaseData, BoundaryData, BoundarySvgRender, ChannelData, ChargingPileData, CheckDoodleErrorType, CheckObstaclePointErrorType, ClickEventType, CreateStatus, DEFAULT_SCREEN_PADDING, DataType, DoodleData, MAX_DIRECTION_ANGLE, MIN_DIRECTION_ANGLE, MapType, MobileEditMode, MowGateData, MowerMapRenderer, MowerPartitionPickerMap, ObstacleData, PARTITION_PICKER_COLORS_H5, PARTITION_PICKER_COLORS_WEB, PARTITION_PICKER_LABEL_STYLES_H5, PARTITION_PICKER_LABEL_STYLES_WEB, PathData, PlatformType, RecordFunctionEnum, RecordTypeEnum, RenderType, SCALE_FACTOR, SvgParserNative, UnifiedMapDataProcessor, VisionOffData, calculateMapGpsCenter, estimateGpsFromMapBounds, getIsolatedBoundaryIds, getPartitionPickerColors, getPartitionPickerLabelStyles, getValidGpsBounds, initBoundary, initChannel, initDoodle, initObstacle, initVisionOff, normalizeScreenPadding, resolvePartitionPickerStyles, restorePointsFormat, signGoogleStaticMapUrl, signGoogleStaticMapUrlSync };
|