@fleet-frontend/mower-maps 0.2.0-beta.16 → 0.2.0-beta.18
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 +4 -0
- package/dist/config/constants.d.ts.map +1 -1
- package/dist/index.esm.js +203 -263
- package/dist/index.js +203 -263
- package/dist/processor/unified/BaseData.d.ts.map +1 -1
- package/dist/processor/unified/UnifiedMapDataProcessor.d.ts.map +1 -1
- package/dist/render/MowerMapOverlay.d.ts.map +1 -1
- package/dist/render/MowerMapRenderer.d.ts.map +1 -1
- package/dist/render/SvgMapView.d.ts.map +1 -1
- package/dist/render/drag/drag.d.ts.map +1 -1
- package/dist/render/drag/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/components/DirectionModal/component/MowDirection/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/components/DirectionModal/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/components/HeightModal/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/doodle.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/obstacle.d.ts.map +1 -1
- package/dist/render/svgEditMap/hooks/useCheckElement.d.ts.map +1 -1
- package/dist/render/svgEditMap/hooks/useCreateVisionOffElement.d.ts.map +1 -1
- package/dist/render/svgEditMap/hooks/useHistoryHandle.d.ts.map +1 -1
- package/dist/render/svgEditMap/hooks/usePolygonDrawing.d.ts.map +1 -1
- package/dist/render/svgEditMap/index.d.ts.map +1 -1
- package/dist/render/svgElement/Mobile/CreateObstacleElement/coordinateUtils.d.ts.map +1 -1
- package/dist/render/svgElement/ObstacleElement/index.d.ts.map +1 -1
- package/dist/render/svgElement/PolygonELement/index.d.ts +1 -0
- package/dist/render/svgElement/PolygonELement/index.d.ts.map +1 -1
- package/dist/render/svgElement/PolygonELement/vertex/index.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/DoodleTransformWrapper/DoodleTransformWrapper.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/DoodleTransformWrapper/useDoodleTransform.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/VisionOffTransformWrapper/VisionOffTransformWrapper.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/VisionOffTransformWrapper/useVisionOffTransform.d.ts +1 -1
- package/dist/render/svgElement/TransformWrapper/VisionOffTransformWrapper/useVisionOffTransform.d.ts.map +1 -1
- package/dist/render/svgMap/index.d.ts.map +1 -1
- package/dist/render/svgMap/useSvgMapView.d.ts.map +1 -1
- package/dist/utils/mapBounds.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/render/svgElement/TransformWrapper/HandleIcon/index.d.ts +0 -7
- package/dist/render/svgElement/TransformWrapper/HandleIcon/index.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -68,6 +68,11 @@ var REAL_TIME_DATA_TYPE;
|
|
|
68
68
|
/**
|
|
69
69
|
* 地图渲染相关常量配置
|
|
70
70
|
*/
|
|
71
|
+
// 默认坐标
|
|
72
|
+
const DEFAULT_COORDINATES = {
|
|
73
|
+
sw: [116.35497283935547, 40.0374755859375],
|
|
74
|
+
ne: [116.35584259033203, 40.038658142089844],
|
|
75
|
+
};
|
|
71
76
|
/**
|
|
72
77
|
* 缩放因子 - 将米转换为像素
|
|
73
78
|
*/
|
|
@@ -177,7 +182,6 @@ class BaseData {
|
|
|
177
182
|
*/
|
|
178
183
|
class BoundaryData extends BaseData {
|
|
179
184
|
constructor(originalData, level, channels, style) {
|
|
180
|
-
console.log('originBoundary', originalData);
|
|
181
185
|
const convertedPoints = convertPointsFormat(originalData?.points) || [];
|
|
182
186
|
super(originalData?.id, exports.DataType.BOUNDARY, level, exports.RenderType.POLYGON, convertedPoints, originalData);
|
|
183
187
|
const { isFlowGlobal, cuttingHeight } = convertHeightsetToParams(originalData?.height_set || 0);
|
|
@@ -740,6 +744,7 @@ class UnifiedMapDataProcessor {
|
|
|
740
744
|
for (const element of elements) {
|
|
741
745
|
try {
|
|
742
746
|
// 如果有SVG数据,创建涂鸦数据
|
|
747
|
+
// 如果有过期时间,且过期时间大于当前时间(秒级别),才需要渲染
|
|
743
748
|
if ('svg' in element &&
|
|
744
749
|
element.svg &&
|
|
745
750
|
'center' in element &&
|
|
@@ -747,7 +752,9 @@ class UnifiedMapDataProcessor {
|
|
|
747
752
|
'scale' in element &&
|
|
748
753
|
element.scale !== undefined &&
|
|
749
754
|
'direction' in element &&
|
|
750
|
-
element.direction !== undefined
|
|
755
|
+
element.direction !== undefined &&
|
|
756
|
+
(element.expiration_ts === undefined ||
|
|
757
|
+
element.expiration_ts > Math.floor(Date.now() / 1000))) {
|
|
751
758
|
const convertedPoints = convertPoint(element.center);
|
|
752
759
|
if (!convertedPoints) {
|
|
753
760
|
continue;
|
|
@@ -760,7 +767,9 @@ class UnifiedMapDataProcessor {
|
|
|
760
767
|
else if ('points' in element &&
|
|
761
768
|
element.points &&
|
|
762
769
|
Array.isArray(element.points) &&
|
|
763
|
-
element.points.length >= 3
|
|
770
|
+
element.points.length >= 3 &&
|
|
771
|
+
(element.expiration_ts === undefined ||
|
|
772
|
+
element.expiration_ts > Math.floor(Date.now() / 1000))) {
|
|
764
773
|
const convertedPoints = convertPointsFormat(element.points);
|
|
765
774
|
if (!convertedPoints || convertedPoints.length < 3) {
|
|
766
775
|
continue;
|
|
@@ -1481,51 +1490,46 @@ function estimateGpsFromMapBounds(mapData) {
|
|
|
1481
1490
|
if (!bounds || bounds.minX === Infinity) {
|
|
1482
1491
|
return {
|
|
1483
1492
|
sw: [0, 0],
|
|
1484
|
-
ne: [0, 0]
|
|
1493
|
+
ne: [0, 0],
|
|
1485
1494
|
};
|
|
1486
1495
|
}
|
|
1487
1496
|
// 将边界数据转换为物理单位(米)
|
|
1488
|
-
const minXMeters = bounds.minX / SCALE_FACTOR
|
|
1489
|
-
const minYMeters = bounds.minY / SCALE_FACTOR
|
|
1490
|
-
const maxXMeters = bounds.maxX / SCALE_FACTOR
|
|
1491
|
-
const maxYMeters = bounds.maxY / SCALE_FACTOR
|
|
1497
|
+
const minXMeters = bounds.minX / SCALE_FACTOR; // 西边界
|
|
1498
|
+
const minYMeters = bounds.minY / SCALE_FACTOR; // 南边界
|
|
1499
|
+
const maxXMeters = bounds.maxX / SCALE_FACTOR; // 东边界
|
|
1500
|
+
const maxYMeters = bounds.maxY / SCALE_FACTOR; // 北边界
|
|
1492
1501
|
const mapWidthMeters = maxXMeters - minXMeters;
|
|
1493
1502
|
const mapHeightMeters = maxYMeters - minYMeters;
|
|
1494
|
-
//
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
baseLat = 39.9042; // 北京天安门
|
|
1500
|
-
baseLng = 116.4074;
|
|
1501
|
-
}
|
|
1502
|
-
else if (mapWidthMeters < 10000 && mapHeightMeters < 10000) {
|
|
1503
|
-
// 中型区域 - 使用城市级别的基准点
|
|
1504
|
-
baseLat = 39.9000;
|
|
1505
|
-
baseLng = 116.4000;
|
|
1506
|
-
}
|
|
1507
|
-
else {
|
|
1508
|
-
// 大型区域 - 使用更大范围的基准点
|
|
1509
|
-
baseLat = 40.0000;
|
|
1510
|
-
baseLng = 116.0000;
|
|
1511
|
-
}
|
|
1503
|
+
// 凤凰岭的GPS坐标作为地图中心点
|
|
1504
|
+
const centerLat = 40.103;
|
|
1505
|
+
const centerLng = 116.072222;
|
|
1506
|
+
// const centerLat = 40.03806686401367;
|
|
1507
|
+
// const centerLng = 116.35540771484375;
|
|
1512
1508
|
// 精确的坐标转换常数
|
|
1513
1509
|
// 1度纬度 = 约111,320米(在地球上任何地方都基本相同)
|
|
1514
1510
|
// 1度经度 = 约111,320 * cos(纬度) 米(随纬度变化)
|
|
1515
1511
|
const METERS_PER_DEGREE_LAT = 111320;
|
|
1516
|
-
const METERS_PER_DEGREE_LNG = 111320 * Math.cos(
|
|
1512
|
+
const METERS_PER_DEGREE_LNG = 111320 * Math.cos((centerLat * Math.PI) / 180);
|
|
1517
1513
|
// 计算SW(西南角)GPS坐标
|
|
1518
|
-
|
|
1519
|
-
const
|
|
1514
|
+
// 从中心点减去半个地图的宽度和高度
|
|
1515
|
+
const swLat = centerLat - mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
|
|
1516
|
+
const swLng = centerLng - mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
|
|
1520
1517
|
// 计算NE(东北角)GPS坐标
|
|
1521
|
-
|
|
1522
|
-
const
|
|
1518
|
+
// 从中心点加上半个地图的宽度和高度
|
|
1519
|
+
const neLat = centerLat + mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
|
|
1520
|
+
const neLng = centerLng + mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
|
|
1523
1521
|
// 验证估算的坐标是否在合理范围内
|
|
1524
|
-
if (swLat < -90 ||
|
|
1525
|
-
|
|
1522
|
+
if (swLat < -90 ||
|
|
1523
|
+
swLat > 90 ||
|
|
1524
|
+
swLng < -180 ||
|
|
1525
|
+
swLng > 180 ||
|
|
1526
|
+
neLat < -90 ||
|
|
1527
|
+
neLat > 90 ||
|
|
1528
|
+
neLng < -180 ||
|
|
1529
|
+
neLng > 180) {
|
|
1526
1530
|
console.warn('估算的GPS坐标超出有效范围:', {
|
|
1527
1531
|
sw: [swLng, swLat],
|
|
1528
|
-
ne: [neLng, neLat]
|
|
1532
|
+
ne: [neLng, neLat],
|
|
1529
1533
|
});
|
|
1530
1534
|
return null;
|
|
1531
1535
|
}
|
|
@@ -1533,13 +1537,13 @@ function estimateGpsFromMapBounds(mapData) {
|
|
|
1533
1537
|
if (swLat >= neLat || swLng >= neLng) {
|
|
1534
1538
|
console.warn('GPS边界坐标逻辑错误:', {
|
|
1535
1539
|
sw: [swLng, swLat],
|
|
1536
|
-
ne: [neLng, neLat]
|
|
1540
|
+
ne: [neLng, neLat],
|
|
1537
1541
|
});
|
|
1538
1542
|
return null;
|
|
1539
1543
|
}
|
|
1540
1544
|
return {
|
|
1541
1545
|
sw: [swLng, swLat], // [经度, 纬度]
|
|
1542
|
-
ne: [neLng, neLat] // [经度, 纬度]
|
|
1546
|
+
ne: [neLng, neLat], // [经度, 纬度]
|
|
1543
1547
|
};
|
|
1544
1548
|
}
|
|
1545
1549
|
catch (error) {
|
|
@@ -8581,23 +8585,6 @@ const useDrag = ({ dragCallbacks, onBoundaryLabelsCollapse, onTransformChange, }
|
|
|
8581
8585
|
|
|
8582
8586
|
// 编辑模式相关常量配置
|
|
8583
8587
|
// 默认的旋转图标
|
|
8584
|
-
const DEFAULT_ROTATE_ICON = `
|
|
8585
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8586
|
-
<g clip-path="url(#clip0_8198_30743)">
|
|
8587
|
-
<path d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z" fill="url(#paint0_linear_8198_30743)"/>
|
|
8588
|
-
<path d="M11.4894 14.7176C10.4257 14.9506 9.31616 14.8595 8.30481 14.4558C7.29342 14.0521 6.4264 13.3535 5.81555 12.4519C5.24299 11.6068 4.92013 10.6187 4.88196 9.60134L4.87805 9.39724C4.87805 8.94523 5.24441 8.57892 5.69641 8.57888C6.12014 8.57888 6.46888 8.90061 6.51087 9.31325L6.51477 9.39724L6.52551 9.68142C6.57513 10.3429 6.79716 10.9821 7.17102 11.534C7.54479 12.0855 8.05583 12.528 8.65149 12.8191L8.91223 12.9343C9.61943 13.2166 10.395 13.2809 11.1388 13.1179L11.4142 13.0467C11.6075 12.9889 11.795 12.9149 11.9757 12.8279L10.8282 12.3865C10.4074 12.2245 10.1977 11.7518 10.3595 11.3308C10.5215 10.9099 10.9941 10.7003 11.4152 10.8621L13.9562 11.8386C14.3773 12.0005 14.5878 12.4732 14.4259 12.8943C14.3891 12.9901 14.3364 13.0752 14.2716 13.1472L14.2726 13.1482C13.5227 13.9377 12.5531 14.4845 11.4894 14.7176Z" fill="white"/>
|
|
8589
|
-
<path d="M8.51062 4.54807C9.57433 4.31505 10.6838 4.40612 11.6952 4.80979C12.7066 5.21356 13.5736 5.91214 14.1844 6.8137C14.757 7.65884 15.0799 8.64688 15.118 9.66429L15.1219 9.86839C15.1219 10.3204 14.7556 10.6867 14.3036 10.6867C13.8799 10.6867 13.5311 10.365 13.4891 9.95237L13.4852 9.86839L13.4745 9.58421C13.4249 8.92272 13.2028 8.28348 12.829 7.73167C12.4552 7.18008 11.9442 6.73767 11.3485 6.44651L11.0878 6.33128C10.3806 6.04903 9.60501 5.98477 8.8612 6.14768L8.58581 6.21897C8.39252 6.27673 8.20502 6.35068 8.02429 6.43772L9.17175 6.87913C9.59256 7.04116 9.8023 7.51383 9.6405 7.93479C9.47855 8.35574 9.00587 8.56537 8.58484 8.40354L6.04382 7.42698C5.6227 7.26512 5.41224 6.79244 5.57409 6.37132C5.61094 6.27552 5.66365 6.19044 5.72839 6.11839L5.72742 6.11741C6.47734 5.32789 7.44693 4.78114 8.51062 4.54807Z" fill="white"/>
|
|
8590
|
-
</g>
|
|
8591
|
-
<defs>
|
|
8592
|
-
<linearGradient id="paint0_linear_8198_30743" x1="17.7273" y1="16.3636" x2="-1.21533" y2="2.08814e-07" gradientUnits="userSpaceOnUse">
|
|
8593
|
-
<stop stop-color="#F16629"/>
|
|
8594
|
-
<stop offset="1" stop-color="#F1A129"/>
|
|
8595
|
-
</linearGradient>
|
|
8596
|
-
<clipPath id="clip0_8198_30743">
|
|
8597
|
-
<rect width="20" height="20" fill="white" transform="matrix(-1 0 0 1 20 0)"/>
|
|
8598
|
-
</clipPath>
|
|
8599
|
-
</defs>
|
|
8600
|
-
</svg>`;
|
|
8601
8588
|
// 默认的拖拽图标
|
|
8602
8589
|
const DEFAULT_DRAG_ICON = `
|
|
8603
8590
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -8611,41 +8598,6 @@ const DEFAULT_DRAG_ICON = `
|
|
|
8611
8598
|
</defs>
|
|
8612
8599
|
</svg>`;
|
|
8613
8600
|
|
|
8614
|
-
function styleInject(css, ref) {
|
|
8615
|
-
if ( ref === void 0 ) ref = {};
|
|
8616
|
-
var insertAt = ref.insertAt;
|
|
8617
|
-
|
|
8618
|
-
if (!css || typeof document === 'undefined') { return; }
|
|
8619
|
-
|
|
8620
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8621
|
-
var style = document.createElement('style');
|
|
8622
|
-
style.type = 'text/css';
|
|
8623
|
-
|
|
8624
|
-
if (insertAt === 'top') {
|
|
8625
|
-
if (head.firstChild) {
|
|
8626
|
-
head.insertBefore(style, head.firstChild);
|
|
8627
|
-
} else {
|
|
8628
|
-
head.appendChild(style);
|
|
8629
|
-
}
|
|
8630
|
-
} else {
|
|
8631
|
-
head.appendChild(style);
|
|
8632
|
-
}
|
|
8633
|
-
|
|
8634
|
-
if (style.styleSheet) {
|
|
8635
|
-
style.styleSheet.cssText = css;
|
|
8636
|
-
} else {
|
|
8637
|
-
style.appendChild(document.createTextNode(css));
|
|
8638
|
-
}
|
|
8639
|
-
}
|
|
8640
|
-
|
|
8641
|
-
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}";
|
|
8642
|
-
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"};
|
|
8643
|
-
styleInject(css_248z$9);
|
|
8644
|
-
|
|
8645
|
-
const RotateHandle = ({ onRotateStart, isRotating }) => {
|
|
8646
|
-
return (jsxRuntime.jsx("div", { className: styles$9.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
|
|
8647
|
-
};
|
|
8648
|
-
|
|
8649
8601
|
/**
|
|
8650
8602
|
* 高级节流函数
|
|
8651
8603
|
* @param func 要节流的函数
|
|
@@ -8715,16 +8667,45 @@ function isMobileDevice() {
|
|
|
8715
8667
|
return isMobileUserAgent || (hasTouchScreen && isSmallScreen);
|
|
8716
8668
|
}
|
|
8717
8669
|
|
|
8670
|
+
function styleInject(css, ref) {
|
|
8671
|
+
if ( ref === void 0 ) ref = {};
|
|
8672
|
+
var insertAt = ref.insertAt;
|
|
8673
|
+
|
|
8674
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
8675
|
+
|
|
8676
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8677
|
+
var style = document.createElement('style');
|
|
8678
|
+
style.type = 'text/css';
|
|
8679
|
+
|
|
8680
|
+
if (insertAt === 'top') {
|
|
8681
|
+
if (head.firstChild) {
|
|
8682
|
+
head.insertBefore(style, head.firstChild);
|
|
8683
|
+
} else {
|
|
8684
|
+
head.appendChild(style);
|
|
8685
|
+
}
|
|
8686
|
+
} else {
|
|
8687
|
+
head.appendChild(style);
|
|
8688
|
+
}
|
|
8689
|
+
|
|
8690
|
+
if (style.styleSheet) {
|
|
8691
|
+
style.styleSheet.cssText = css;
|
|
8692
|
+
} else {
|
|
8693
|
+
style.appendChild(document.createTextNode(css));
|
|
8694
|
+
}
|
|
8695
|
+
}
|
|
8696
|
+
|
|
8697
|
+
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}";
|
|
8698
|
+
var styles$9 = {"edit":"index-module_edit__-5VvX","border":"index-module_border__JdNLM","drag":"index-module_drag__uvdPG","move":"index-module_move__mZF8s"};
|
|
8699
|
+
styleInject(css_248z$9);
|
|
8700
|
+
|
|
8718
8701
|
const DragHandle = ({ onDragStart, isDragging }) => {
|
|
8719
8702
|
// 在PC设备上隐藏拖拽手柄
|
|
8720
8703
|
if (!isMobileDevice()) {
|
|
8721
8704
|
return null;
|
|
8722
8705
|
}
|
|
8723
8706
|
return (jsxRuntime.jsx("div", { className: styles$9.move, onMouseDown: (e) => {
|
|
8724
|
-
console.log('down');
|
|
8725
8707
|
onDragStart(e);
|
|
8726
8708
|
}, onTouchStart: (e) => onDragStart(e), onMouseUp: (e) => {
|
|
8727
|
-
console.log('drag up');
|
|
8728
8709
|
// onDragEnd(e);
|
|
8729
8710
|
},
|
|
8730
8711
|
// onTouchEnd={(e) => onDragEnd(e)}
|
|
@@ -8732,7 +8713,7 @@ const DragHandle = ({ onDragStart, isDragging }) => {
|
|
|
8732
8713
|
};
|
|
8733
8714
|
|
|
8734
8715
|
const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransformChange, isDragMap = false, }) => {
|
|
8735
|
-
const { isDragging,
|
|
8716
|
+
const { isDragging, handleDragStart, addGlobalListeners } = useDrag({
|
|
8736
8717
|
dragCallbacks,
|
|
8737
8718
|
onBoundaryLabelsCollapse,
|
|
8738
8719
|
onTransformChange,
|
|
@@ -8743,10 +8724,6 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
|
|
|
8743
8724
|
const cleanup = addGlobalListeners();
|
|
8744
8725
|
return cleanup;
|
|
8745
8726
|
}, [addGlobalListeners]);
|
|
8746
|
-
// 处理旋转开始
|
|
8747
|
-
const handleRotateStart = (e) => {
|
|
8748
|
-
handleDragStart(e, 'rotate', containerRef?.current);
|
|
8749
|
-
};
|
|
8750
8727
|
// 处理拖拽开始
|
|
8751
8728
|
const handleDragStartEvent = (e) => {
|
|
8752
8729
|
handleDragStart(e, 'drag', containerRef?.current);
|
|
@@ -8754,7 +8731,7 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
|
|
|
8754
8731
|
if (!isDragMap) {
|
|
8755
8732
|
return null;
|
|
8756
8733
|
}
|
|
8757
|
-
return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsxRuntime.jsx("div", { className: styles$9.border }), jsxRuntime.jsx(
|
|
8734
|
+
return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsxRuntime.jsx("div", { className: styles$9.border }), jsxRuntime.jsx("div", { className: styles$9.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsxRuntime.jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
|
|
8758
8735
|
};
|
|
8759
8736
|
|
|
8760
8737
|
/**
|
|
@@ -8805,6 +8782,7 @@ class SvgMapView {
|
|
|
8805
8782
|
svg.style.width = '100%';
|
|
8806
8783
|
svg.style.height = '100%';
|
|
8807
8784
|
svg.style.background = 'transparent';
|
|
8785
|
+
svg.style.overflow = 'visible';
|
|
8808
8786
|
return svg;
|
|
8809
8787
|
}
|
|
8810
8788
|
/**
|
|
@@ -8896,7 +8874,7 @@ class SvgMapView {
|
|
|
8896
8874
|
* 设置自适应视图变换 - 让SVG刚好包裹住图形
|
|
8897
8875
|
*/
|
|
8898
8876
|
fitToView(bounds) {
|
|
8899
|
-
const padding =
|
|
8877
|
+
const padding = 0;
|
|
8900
8878
|
const boundWidth = bounds.maxX - bounds.minX + padding * 2;
|
|
8901
8879
|
const boundHeight = bounds.maxY - bounds.minY + padding * 2;
|
|
8902
8880
|
// 防止宽高为0的情况
|
|
@@ -8905,7 +8883,16 @@ class SvgMapView {
|
|
|
8905
8883
|
return;
|
|
8906
8884
|
}
|
|
8907
8885
|
// 获取容器的实际尺寸进行验证
|
|
8908
|
-
this.container.getBoundingClientRect();
|
|
8886
|
+
const containerRect = this.container.getBoundingClientRect();
|
|
8887
|
+
const containerWidth = containerRect.width;
|
|
8888
|
+
const containerHeight = containerRect.height;
|
|
8889
|
+
if (containerWidth <= 0 || containerHeight <= 0) {
|
|
8890
|
+
console.warn('Invalid container size:', containerWidth, containerHeight);
|
|
8891
|
+
return;
|
|
8892
|
+
}
|
|
8893
|
+
// // 计算内容和容器的宽高比
|
|
8894
|
+
// const contentAspectRatio = boundWidth / boundHeight;
|
|
8895
|
+
// const containerAspectRatio = containerWidth / containerHeight;
|
|
8909
8896
|
// 设置viewBox以包含所有内容
|
|
8910
8897
|
this.viewBox = {
|
|
8911
8898
|
x: bounds.minX - padding,
|
|
@@ -14220,9 +14207,7 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14220
14207
|
}, [mapConfig, onPathLoad]);
|
|
14221
14208
|
// 初始化 SVG 地图视图
|
|
14222
14209
|
const initializeSvgMapView = React.useCallback((container) => {
|
|
14223
|
-
console.log('initializeSvgMapView called, container:', container, svgMapViewRef.current);
|
|
14224
14210
|
if (!container || svgMapViewRef.current) {
|
|
14225
|
-
console.log('Skipping initialization - container missing or already initialized');
|
|
14226
14211
|
return;
|
|
14227
14212
|
}
|
|
14228
14213
|
containerRef.current = container;
|
|
@@ -14236,12 +14221,10 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14236
14221
|
offscreenContainerRef.current = offscreenContainer;
|
|
14237
14222
|
// 创建 SvgMapView 实例
|
|
14238
14223
|
svgMapViewRef.current = new SvgMapView(sn, offscreenContainer, 800, 600);
|
|
14239
|
-
console.log('SvgMapView created:', svgMapViewRef.current);
|
|
14240
14224
|
// 加载地图数据
|
|
14241
14225
|
loadMapData();
|
|
14242
14226
|
// 加载路径数据
|
|
14243
14227
|
if (pathData && svgMapViewRef.current) {
|
|
14244
|
-
console.log('Loading path data:', pathData);
|
|
14245
14228
|
loadPathData(pathData, mowPartitionData);
|
|
14246
14229
|
}
|
|
14247
14230
|
else {
|
|
@@ -14257,7 +14240,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14257
14240
|
if (svgElement) {
|
|
14258
14241
|
svgElementRef.current = svgElement;
|
|
14259
14242
|
container.appendChild(svgElement);
|
|
14260
|
-
console.log('SVG element added to container');
|
|
14261
14243
|
}
|
|
14262
14244
|
else {
|
|
14263
14245
|
console.warn('Failed to get SVG element from SvgMapView');
|
|
@@ -14299,8 +14281,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14299
14281
|
const setTransform = React.useCallback((transform) => {
|
|
14300
14282
|
if (!svgMapViewRef.current)
|
|
14301
14283
|
return;
|
|
14302
|
-
console.log('SvgMapView setTransform called with:', transform);
|
|
14303
|
-
// 使用SvgMapView的transform API
|
|
14304
14284
|
svgMapViewRef.current.setTransform(transform);
|
|
14305
14285
|
}, []);
|
|
14306
14286
|
// 重置到默认变换
|
|
@@ -14371,7 +14351,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14371
14351
|
// 监听pathData变化,确保路径数据能够被加载
|
|
14372
14352
|
React.useEffect(() => {
|
|
14373
14353
|
if (svgMapViewRef.current && pathData) {
|
|
14374
|
-
console.log('PathData changed, reloading...', pathData);
|
|
14375
14354
|
loadPathData(pathData, mowPartitionData);
|
|
14376
14355
|
svgMapViewRef.current.refresh();
|
|
14377
14356
|
}
|
|
@@ -14379,7 +14358,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14379
14358
|
React.useEffect(() => {
|
|
14380
14359
|
if (svgMapViewRef.current && mapData) {
|
|
14381
14360
|
loadMapData();
|
|
14382
|
-
console.log('mapData changed, reloading...', mapData);
|
|
14383
14361
|
svgMapViewRef.current.refresh();
|
|
14384
14362
|
}
|
|
14385
14363
|
}, [mapData, loadMapData]);
|
|
@@ -14463,7 +14441,6 @@ const SvgMapComponent = React.forwardRef(({ editMap, rotate, mapData, pathData,
|
|
|
14463
14441
|
// 初始化 SVG 地图
|
|
14464
14442
|
React.useEffect(() => {
|
|
14465
14443
|
if (containerRef.current && mapData && !svgMapView) {
|
|
14466
|
-
console.log('Initializing SVG map view, containerRef->', containerRef.current);
|
|
14467
14444
|
initializeSvgMapView(containerRef.current);
|
|
14468
14445
|
}
|
|
14469
14446
|
}, [mapData, svgMapView, initializeSvgMapView, pathData]);
|
|
@@ -15134,20 +15111,20 @@ const DashPath = ({ points, stroke, strokeWidth, strokeOpacity, className, }) =>
|
|
|
15134
15111
|
};
|
|
15135
15112
|
|
|
15136
15113
|
const VertexElement = React.memo(({ r, stroke, fill, ...props }) => {
|
|
15137
|
-
const { overlayScale
|
|
15138
|
-
const radius = typeof r === 'number' ? r :
|
|
15139
|
-
return (jsxRuntime.jsx("circle", { r:
|
|
15114
|
+
const { overlayScale } = useCommonContext();
|
|
15115
|
+
const radius = typeof r === 'number' ? r : 14;
|
|
15116
|
+
return (jsxRuntime.jsx("circle", { r: radius * overlayScale, stroke: stroke || '#fff', fill: fill || '#fff', strokeWidth: 4 * overlayScale, ...props }));
|
|
15140
15117
|
});
|
|
15141
15118
|
|
|
15142
|
-
var _path$
|
|
15143
|
-
function _extends$
|
|
15119
|
+
var _path$4;
|
|
15120
|
+
function _extends$a() { return _extends$a = 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$a.apply(null, arguments); }
|
|
15144
15121
|
var SvgDelete = function SvgDelete(props) {
|
|
15145
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
15122
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
|
|
15146
15123
|
xmlns: "http://www.w3.org/2000/svg",
|
|
15147
15124
|
width: 16,
|
|
15148
15125
|
height: 16,
|
|
15149
15126
|
fill: "none"
|
|
15150
|
-
}, props), _path$
|
|
15127
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
15151
15128
|
fill: "#FD494D",
|
|
15152
15129
|
d: "M6.667 12a.667.667 0 0 0 .666-.667v-4a.667.667 0 1 0-1.333 0v4a.667.667 0 0 0 .667.667m6.666-8h-2.666v-.667a2 2 0 0 0-2-2H7.333a2 2 0 0 0-2 2V4H2.667a.667.667 0 0 0 0 1.333h.666v7.334a2 2 0 0 0 2 2h5.334a2 2 0 0 0 2-2V5.333h.666a.667.667 0 1 0 0-1.333m-6.666-.667a.667.667 0 0 1 .666-.666h1.334a.667.667 0 0 1 .666.666V4H6.667zm4.666 9.334a.667.667 0 0 1-.666.666H5.333a.667.667 0 0 1-.666-.666V5.333h6.666zm-2-.667a.667.667 0 0 0 .667-.667v-4a.667.667 0 0 0-1.333 0v4a.667.667 0 0 0 .666.667"
|
|
15153
15130
|
})));
|
|
@@ -15247,7 +15224,7 @@ const TextElement = ({ x, y, fontSize = 30, fill = '#fff', text, background = 'r
|
|
|
15247
15224
|
height: bbox.height + pad.y * 2,
|
|
15248
15225
|
};
|
|
15249
15226
|
}, [bbox, pad.x, pad.y]);
|
|
15250
|
-
return (jsxRuntime.jsxs("g", { className: className, style: style, pointerEvents: pointerEvents, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [background && rectProps && (jsxRuntime.jsx("rect", { x: rectProps.x, y: rectProps.y, width: rectProps.width, height: rectProps.height, rx: rx, ry: ry, fill: background, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth })), jsxRuntime.jsx("text", { ref: textRef, x: x, y: y, letterSpacing: platform === exports.PlatformType.H5 ?
|
|
15227
|
+
return (jsxRuntime.jsxs("g", { className: className, style: style, pointerEvents: pointerEvents, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [background && rectProps && (jsxRuntime.jsx("rect", { x: rectProps.x, y: rectProps.y, width: rectProps.width, height: rectProps.height, rx: rx, ry: ry, fill: background, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth })), jsxRuntime.jsx("text", { ref: textRef, x: x, y: y, letterSpacing: platform === exports.PlatformType.H5 ? 0 : -2, fontSize: fontSize, fill: fill, textAnchor: textAnchor, alignmentBaseline: alignmentBaseline,
|
|
15251
15228
|
// keep text crisp at various zoom levels
|
|
15252
15229
|
vectorEffect: "non-scaling-stroke", style: { pointerEvents: 'none' }, children: children || text })] }));
|
|
15253
15230
|
};
|
|
@@ -15325,7 +15302,7 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
|
|
|
15325
15302
|
} }))] }));
|
|
15326
15303
|
};
|
|
15327
15304
|
|
|
15328
|
-
var css_248z$5 = ".index-module_polygonPathG__S-Bpl {\n cursor: pointer;\n}\n\n.index-module_vertex__-Qb1u {\n cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n cursor: grabbing;\n}\n\n.index-
|
|
15305
|
+
var css_248z$5 = ".index-module_polygonPathG__S-Bpl {\n cursor: pointer;\n}\n\n.index-module_vertex__-Qb1u {\n cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n cursor: grabbing;\n}\n\n.index-module_addVertex__hrF71 {\n cursor: pointer;\n}\n\n.index-module_polygonPath__PynOn {\n pointer-events: stroke;\n cursor: pointer;\n}\n\n.index-module_notCreate__bFnkV {\n cursor: no-drop;\n}";
|
|
15329
15306
|
var styles$5 = {"polygonPathG":"index-module_polygonPathG__S-Bpl","vertex":"index-module_vertex__-Qb1u","dragging":"index-module_dragging__xSFdO","addVertex":"index-module_addVertex__hrF71","polygonPath":"index-module_polygonPath__PynOn","notCreate":"index-module_notCreate__bFnkV"};
|
|
15330
15307
|
styleInject(css_248z$5);
|
|
15331
15308
|
|
|
@@ -15624,7 +15601,6 @@ const useCheckElement = () => {
|
|
|
15624
15601
|
const { editMapInfo, minDistance } = useMapEditContext();
|
|
15625
15602
|
const { svgElementDatas } = useSvgEditContext();
|
|
15626
15603
|
const checkDoodle = React.useCallback(() => {
|
|
15627
|
-
console.log('checkdoodle', editMapInfo, svgElementDatas);
|
|
15628
15604
|
if (!editMapInfo.selectElement || editMapInfo.selectElement.type !== exports.DataType.DOODLE) {
|
|
15629
15605
|
return {
|
|
15630
15606
|
isValid: false,
|
|
@@ -15648,18 +15624,12 @@ const useCheckElement = () => {
|
|
|
15648
15624
|
// 1. 首先判断 doodle 是否在一个 boundary 内
|
|
15649
15625
|
let isInBoundary = false;
|
|
15650
15626
|
let containingBoundary = null;
|
|
15651
|
-
console.log('doodlePoints--->', doodleElement, doodlePoints);
|
|
15652
15627
|
for (const boundaryData of boundary) {
|
|
15653
15628
|
const boundaryPoints = coordinatesToPoints$1(boundaryData.points);
|
|
15654
15629
|
const allPointsInside = doodlePoints.every((point) => {
|
|
15655
15630
|
const isIn = isPointInPolygon(point, boundaryPoints);
|
|
15656
|
-
// console.log('isIn--->', isIn, point, boundaryPoints);
|
|
15657
|
-
if (!isIn) {
|
|
15658
|
-
console.log('isIn--->', isIn, point, boundaryPoints);
|
|
15659
|
-
}
|
|
15660
15631
|
return isIn;
|
|
15661
15632
|
});
|
|
15662
|
-
console.log('allPointsInside--->', allPointsInside, boundaryPoints, boundaryData);
|
|
15663
15633
|
if (allPointsInside) {
|
|
15664
15634
|
isInBoundary = true;
|
|
15665
15635
|
containingBoundary = boundaryData;
|
|
@@ -15717,7 +15687,6 @@ const useCheckElement = () => {
|
|
|
15717
15687
|
}
|
|
15718
15688
|
// 检查距离是否大于 2m
|
|
15719
15689
|
const distance = polygonToPolygonDistance(doodlePoints, elementPoints);
|
|
15720
|
-
console.log('distance--->', distance, minDistance, doodlePoints, elementPoints);
|
|
15721
15690
|
if (distance < minDistance) {
|
|
15722
15691
|
const elementTypeName = {
|
|
15723
15692
|
[exports.DataType.OBSTACLE]: '障碍物',
|
|
@@ -15732,8 +15701,6 @@ const useCheckElement = () => {
|
|
|
15732
15701
|
};
|
|
15733
15702
|
}
|
|
15734
15703
|
}
|
|
15735
|
-
// 所有检查通过
|
|
15736
|
-
console.log('Doodle 位置检查通过');
|
|
15737
15704
|
return { isValid: true };
|
|
15738
15705
|
}, [editMapInfo, svgElementDatas, minDistance]);
|
|
15739
15706
|
const checkCanNotCreateAtPosition = React.useCallback((checkPoint, checkPoints) => {
|
|
@@ -15754,7 +15721,6 @@ const useCheckElement = () => {
|
|
|
15754
15721
|
break;
|
|
15755
15722
|
}
|
|
15756
15723
|
}
|
|
15757
|
-
console.log('currentBoundary--->', currentBoundary, points);
|
|
15758
15724
|
if (!currentBoundary)
|
|
15759
15725
|
return {
|
|
15760
15726
|
result: true,
|
|
@@ -15789,7 +15755,6 @@ const useCheckElement = () => {
|
|
|
15789
15755
|
for (const obstacle of obstaclesInBoundary) {
|
|
15790
15756
|
const obstaclePoints = coordinatesToPoints$1(obstacle.points);
|
|
15791
15757
|
if (doPolygonsIntersect(currentObstaclePolygon, obstaclePoints)) {
|
|
15792
|
-
console.log('Obstacle intersection detected with:', obstacle);
|
|
15793
15758
|
return {
|
|
15794
15759
|
result: true,
|
|
15795
15760
|
code: exports.CheckObstaclePointErrorType.OBSTACLE_INTERSECT,
|
|
@@ -15808,7 +15773,6 @@ const useCheckElement = () => {
|
|
|
15808
15773
|
const doodleTransformedPoints = transformSvgElements(doodle).flat();
|
|
15809
15774
|
// 检查相交
|
|
15810
15775
|
if (doPolygonsIntersect(currentObstaclePolygon, doodleTransformedPoints)) {
|
|
15811
|
-
console.log('Obstacle-Doodle intersection detected with:', doodle);
|
|
15812
15776
|
return {
|
|
15813
15777
|
result: true,
|
|
15814
15778
|
code: exports.CheckObstaclePointErrorType.DOODLE_INTERSECT,
|
|
@@ -15816,9 +15780,7 @@ const useCheckElement = () => {
|
|
|
15816
15780
|
}
|
|
15817
15781
|
// 检查距离
|
|
15818
15782
|
const distance = polygonToPolygonDistance(currentObstaclePolygon, doodleTransformedPoints);
|
|
15819
|
-
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15820
15783
|
if (distance < minDistance) {
|
|
15821
|
-
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15822
15784
|
return {
|
|
15823
15785
|
result: true,
|
|
15824
15786
|
code: exports.CheckObstaclePointErrorType.DOODLE_DISTANCE_TOO_CLOSE,
|
|
@@ -15924,7 +15886,7 @@ const createPathData = (points) => {
|
|
|
15924
15886
|
}
|
|
15925
15887
|
return pathData;
|
|
15926
15888
|
};
|
|
15927
|
-
const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', 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自动判断
|
|
15889
|
+
const PolygonElement = ({ canSelect = false, points, fillColor = 'rgba(0, 0, 0, 0.1)', 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自动判断
|
|
15928
15890
|
}) => {
|
|
15929
15891
|
const { overlayScale, unitType } = useCommonContext();
|
|
15930
15892
|
const { onHandleEvent } = useMapEditContext();
|
|
@@ -16473,30 +16435,50 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16473
16435
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(editMode || (createMode && completed)) &&
|
|
16474
16436
|
dragState.isDragging &&
|
|
16475
16437
|
dragState.dragType !== 'new' &&
|
|
16476
|
-
dragState.originalPosition && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(VertexElement, { cx: dragState.originalPosition[0], cy: dragState.originalPosition[1], stroke: strokeColor, strokeOpacity: 0.2, pointerEvents: "none"
|
|
16438
|
+
dragState.originalPosition && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(VertexElement, { cx: dragState.originalPosition[0], cy: dragState.originalPosition[1], stroke: strokeColor, strokeOpacity: 0.2, pointerEvents: "none", style: {
|
|
16439
|
+
userSelect: 'none',
|
|
16440
|
+
WebkitUserSelect: 'none',
|
|
16441
|
+
WebkitTouchCallout: 'none',
|
|
16442
|
+
touchAction: 'none',
|
|
16443
|
+
} }, "ghost-vertex"), (() => {
|
|
16477
16444
|
// 获取前一个点和后一个点的索引
|
|
16478
16445
|
const prevIndex = (dragState.dragIndex - 1 + coordinates.length) % coordinates.length;
|
|
16479
16446
|
const nextIndex = (dragState.dragIndex + 1) % coordinates.length;
|
|
16480
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("line", { x1: coordinates[prevIndex][0], y1: coordinates[prevIndex][1], x2: dragState.originalPosition[0], y2: dragState.originalPosition[1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none"
|
|
16481
|
-
|
|
16482
|
-
|
|
16447
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("line", { x1: coordinates[prevIndex][0], y1: coordinates[prevIndex][1], x2: dragState.originalPosition[0], y2: dragState.originalPosition[1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none", style: {
|
|
16448
|
+
userSelect: 'none',
|
|
16449
|
+
WebkitUserSelect: 'none',
|
|
16450
|
+
WebkitTouchCallout: 'none',
|
|
16451
|
+
touchAction: 'none',
|
|
16452
|
+
} }), jsxRuntime.jsx("line", { x1: dragState.originalPosition[0], y1: dragState.originalPosition[1], x2: coordinates[nextIndex][0], y2: coordinates[nextIndex][1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none", style: {
|
|
16453
|
+
userSelect: 'none',
|
|
16454
|
+
WebkitUserSelect: 'none',
|
|
16455
|
+
WebkitTouchCallout: 'none',
|
|
16456
|
+
touchAction: 'none',
|
|
16457
|
+
} })] }));
|
|
16458
|
+
})()] })), renderCoordinates.length >= 2 && (jsxRuntime.jsx("polygon", { className: canSelect ? styles$5.polygonPathG : '', points: polygonPoints, fill: fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
|
|
16459
|
+
, onClick: onPolygonClick })), jsxRuntime.jsxs("g", { children: [renderCoordinates.length >= 2 &&
|
|
16483
16460
|
pathSegments.map((segment, index) => {
|
|
16484
16461
|
if (segment.points.length < 2)
|
|
16485
16462
|
return null;
|
|
16486
16463
|
const pathData = createPathData(segment.points);
|
|
16487
16464
|
const isDash = segment.type === 1;
|
|
16488
|
-
return (jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: styles$5.polygonPath, vectorEffect: "non-scaling-stroke", onClick: onPathClick
|
|
16465
|
+
return (jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: canSelect ? styles$5.polygonPath : '', vectorEffect: "non-scaling-stroke", onClick: onPathClick, style: {
|
|
16466
|
+
userSelect: 'none',
|
|
16467
|
+
WebkitUserSelect: 'none',
|
|
16468
|
+
WebkitTouchCallout: 'none',
|
|
16469
|
+
touchAction: 'none',
|
|
16470
|
+
} }, index));
|
|
16489
16471
|
}), renderCoordinates.length >= 2 &&
|
|
16490
16472
|
dashPaths.map((segment, index) => {
|
|
16491
16473
|
if (segment.points.length < 2)
|
|
16492
16474
|
return null;
|
|
16493
|
-
return (jsxRuntime.jsx(DashPath, { className: styles$5.polygonPath, points: segment.points, stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity }, index));
|
|
16475
|
+
return (jsxRuntime.jsx(DashPath, { className: canSelect ? styles$5.polygonPath : '', points: segment.points, stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity }, index));
|
|
16494
16476
|
})] }), (editMode || (createMode && completed)) &&
|
|
16495
16477
|
renderCoordinates.length >= 2 &&
|
|
16496
16478
|
renderCoordinates.map((coord, index) => {
|
|
16497
16479
|
const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
|
|
16498
16480
|
const isDashPath = coord[2] === 1;
|
|
16499
|
-
return (jsxRuntime.jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: platform === exports.PlatformType.H5 ? strokeWidth * 3 : strokeWidth, className: styles$5.addVertex, style: {
|
|
16481
|
+
return (jsxRuntime.jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: platform === exports.PlatformType.H5 ? strokeWidth * 3 : strokeWidth, className: editMode ? styles$5.addVertex : '', style: {
|
|
16500
16482
|
userSelect: 'none',
|
|
16501
16483
|
WebkitUserSelect: 'none',
|
|
16502
16484
|
WebkitTouchCallout: 'none',
|
|
@@ -16528,7 +16510,7 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16528
16510
|
setHoverVertex(null);
|
|
16529
16511
|
},
|
|
16530
16512
|
}) }, `edge-${index}`));
|
|
16531
|
-
}), ghostLastPath && (jsxRuntime.jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsxRuntime.jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsxRuntime.jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === exports.PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale, unitType: unitType }), jsxRuntime.jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === exports.PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale, showFirstDistance: platform !== exports.PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsxRuntime.jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
|
|
16513
|
+
}), ghostLastPath && (jsxRuntime.jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsxRuntime.jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsxRuntime.jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === exports.PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, unitType: unitType }), jsxRuntime.jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === exports.PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, showFirstDistance: platform !== exports.PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsxRuntime.jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
|
|
16532
16514
|
renderCoordinates.map((coord, idx) => {
|
|
16533
16515
|
// 判断当前顶点的状态
|
|
16534
16516
|
const isLastPoint = idx === renderCoordinates.length - 1;
|
|
@@ -16537,7 +16519,8 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16537
16519
|
const isInEditMode = editMode;
|
|
16538
16520
|
// H5模式下选中的顶点显示蓝色,并且放大1.5倍
|
|
16539
16521
|
const isSelected = platform === exports.PlatformType.H5 && selectedVertexIndex === idx;
|
|
16540
|
-
const
|
|
16522
|
+
const commonRadius = canComplete ? 16 : 12;
|
|
16523
|
+
const vertexRadius = isSelected ? commonRadius * 1.2 : commonRadius;
|
|
16541
16524
|
const vertexFill = isSelected ? '#FFAB7E' : 'white';
|
|
16542
16525
|
return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx(VertexElement, { className: generateVertexClassName, style: {
|
|
16543
16526
|
userSelect: 'none',
|
|
@@ -16712,10 +16695,9 @@ const BoundaryElement = ({ data }) => {
|
|
|
16712
16695
|
}
|
|
16713
16696
|
}
|
|
16714
16697
|
}, [platform, data, editMapInfo, onSelectElement]);
|
|
16715
|
-
return (jsxRuntime.jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16698
|
+
return (jsxRuntime.jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType), points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16716
16699
|
onPathClick();
|
|
16717
16700
|
}, onCoordinatesChange: (coordinates) => {
|
|
16718
|
-
console.log('onCoordinatesChange', coordinates);
|
|
16719
16701
|
setEditMapInfo((prev) => ({
|
|
16720
16702
|
...prev,
|
|
16721
16703
|
selectElement: {
|
|
@@ -16768,7 +16750,6 @@ const useHistoryHandle = (props) => {
|
|
|
16768
16750
|
// undo
|
|
16769
16751
|
const undo = () => {
|
|
16770
16752
|
setEditMapInfo((prev) => {
|
|
16771
|
-
console.log('undo->', prev);
|
|
16772
16753
|
if (prev?.historyList?.length > 0 && prev?.currentHistoryIndex > 0) {
|
|
16773
16754
|
return {
|
|
16774
16755
|
...prev,
|
|
@@ -16836,10 +16817,8 @@ const ObstacleElement = ({ data }) => {
|
|
|
16836
16817
|
const { addHistory } = useHistoryHandle();
|
|
16837
16818
|
// 处理删除顶点
|
|
16838
16819
|
const handleCreateVertexDelete = React.useCallback((vertexIndex) => {
|
|
16839
|
-
console.log('ObstacleElement删除顶点', vertexIndex);
|
|
16840
16820
|
if (editMapInfo?.selectElement?.points && editMapInfo?.selectElement?.points?.length > 0) {
|
|
16841
16821
|
const newPoints = editMapInfo?.selectElement?.points?.filter((_, index) => index !== vertexIndex);
|
|
16842
|
-
console.log('newPoints', newPoints);
|
|
16843
16822
|
setEditMapInfo((prev) => ({
|
|
16844
16823
|
...prev,
|
|
16845
16824
|
selectElement: {
|
|
@@ -16905,7 +16884,7 @@ const ObstacleElement = ({ data }) => {
|
|
|
16905
16884
|
}
|
|
16906
16885
|
return editMapInfo?.selectElement?.id === data.id;
|
|
16907
16886
|
}, [editMapInfo, data, platform]);
|
|
16908
|
-
return (jsxRuntime.jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16887
|
+
return (jsxRuntime.jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType), points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16909
16888
|
onPathClick();
|
|
16910
16889
|
}, onVertexDelete: (vertexIndex) => handleCreateVertexDelete(vertexIndex), onCoordinatesChange: (coordinates) => {
|
|
16911
16890
|
console.log('onCoordinatesChange', coordinates);
|
|
@@ -17011,11 +16990,11 @@ const useVisionOffTransform = (data, scaleConstraints
|
|
|
17011
16990
|
return newPoints;
|
|
17012
16991
|
}, []);
|
|
17013
16992
|
// 计算选择框的四个角点(每条边与内部元素对应边平行)
|
|
17014
|
-
const calculateSelectionBoxPoints = React.useCallback((points) => {
|
|
16993
|
+
const calculateSelectionBoxPoints = React.useCallback((points, scale = 1) => {
|
|
17015
16994
|
if (points.length < 4)
|
|
17016
16995
|
return points;
|
|
17017
16996
|
// 设置偏移距离(可以根据需要调整)
|
|
17018
|
-
const offset =
|
|
16997
|
+
const offset = 20 * scale; // 偏移距离
|
|
17019
16998
|
// 使用更简单的方法:计算矩形的边界框,然后向外扩展
|
|
17020
16999
|
// 计算矩形的两条相邻边向量(从左上角出发)
|
|
17021
17000
|
const edge1 = { x: points[1].x - points[0].x, y: points[1].y - points[0].y }; // 左上到左下
|
|
@@ -17332,9 +17311,9 @@ const useVisionOffTransform = (data, scaleConstraints
|
|
|
17332
17311
|
};
|
|
17333
17312
|
|
|
17334
17313
|
var _g$5, _defs$5;
|
|
17335
|
-
function _extends$
|
|
17314
|
+
function _extends$9() { return _extends$9 = 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$9.apply(null, arguments); }
|
|
17336
17315
|
var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
17337
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17316
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
|
|
17338
17317
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17339
17318
|
width: 20,
|
|
17340
17319
|
height: 20,
|
|
@@ -17383,9 +17362,9 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
|
17383
17362
|
};
|
|
17384
17363
|
|
|
17385
17364
|
var _g$4, _defs$4;
|
|
17386
|
-
function _extends$
|
|
17365
|
+
function _extends$8() { return _extends$8 = 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$8.apply(null, arguments); }
|
|
17387
17366
|
var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
17388
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17367
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
|
|
17389
17368
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17390
17369
|
width: 21,
|
|
17391
17370
|
height: 20,
|
|
@@ -17419,9 +17398,9 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
|
17419
17398
|
};
|
|
17420
17399
|
|
|
17421
17400
|
var _g$3, _defs$3;
|
|
17422
|
-
function _extends$
|
|
17401
|
+
function _extends$7() { return _extends$7 = 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$7.apply(null, arguments); }
|
|
17423
17402
|
var SvgTransformScale = function SvgTransformScale(props) {
|
|
17424
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17403
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
|
|
17425
17404
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17426
17405
|
width: 21,
|
|
17427
17406
|
height: 20,
|
|
@@ -17455,9 +17434,9 @@ var SvgTransformScale = function SvgTransformScale(props) {
|
|
|
17455
17434
|
};
|
|
17456
17435
|
|
|
17457
17436
|
var _g$2, _defs$2;
|
|
17458
|
-
function _extends$
|
|
17437
|
+
function _extends$6() { return _extends$6 = 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$6.apply(null, arguments); }
|
|
17459
17438
|
var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
17460
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17439
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
17461
17440
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17462
17441
|
width: 20,
|
|
17463
17442
|
height: 20,
|
|
@@ -17609,7 +17588,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17609
17588
|
return;
|
|
17610
17589
|
onDragMove?.(currentPoints.map((point) => [point.x, point.y]));
|
|
17611
17590
|
}, [currentPoints, isSelected, isDragging, isRotating, isScaling]);
|
|
17612
|
-
return (jsxRuntime.jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsxRuntime.jsx(PolygonElement, { points: visionOffData?.points, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: () => {
|
|
17591
|
+
return (jsxRuntime.jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsxRuntime.jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType), points: visionOffData?.points, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: () => {
|
|
17613
17592
|
onSelect?.();
|
|
17614
17593
|
}, onPolygonClick: () => {
|
|
17615
17594
|
onSelect?.();
|
|
@@ -17624,7 +17603,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17624
17603
|
}) })), isSelected &&
|
|
17625
17604
|
currentPoints.length === 4 &&
|
|
17626
17605
|
(() => {
|
|
17627
|
-
const selectionBoxPoints = calculateSelectionBoxPoints(currentPoints);
|
|
17606
|
+
const selectionBoxPoints = calculateSelectionBoxPoints(currentPoints, overlayScale);
|
|
17628
17607
|
// 计算选择框的边界
|
|
17629
17608
|
const minX = Math.min(...selectionBoxPoints.map((p) => p.x));
|
|
17630
17609
|
const maxX = Math.max(...selectionBoxPoints.map((p) => p.x));
|
|
@@ -17632,13 +17611,23 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17632
17611
|
// 计算选择框的中心
|
|
17633
17612
|
const centerX = (minX + maxX) / 2;
|
|
17634
17613
|
// 计算尺寸显示框的位置(选择框下方)
|
|
17635
|
-
const infoBoxY = maxY + 20; // 选择框下方20像素
|
|
17636
|
-
const infoBoxWidth =
|
|
17637
|
-
const infoBoxHeight =
|
|
17614
|
+
const infoBoxY = maxY + 20 + 40 * overlayScale; // 选择框下方20像素
|
|
17615
|
+
const infoBoxWidth = 300 * overlayScale; // 信息框宽度
|
|
17616
|
+
const infoBoxHeight = 50 * overlayScale; // 信息框高度
|
|
17638
17617
|
const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
|
|
17639
|
-
const scale =
|
|
17618
|
+
const scale = 2 * overlayScale;
|
|
17640
17619
|
const offsetLeft = 10 * scale;
|
|
17641
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
17620
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showInfo && (jsxRuntime.jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, children: jsxRuntime.jsxs("div", { style: {
|
|
17621
|
+
padding: `5px ${10 * overlayScale}px`,
|
|
17622
|
+
background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
|
|
17623
|
+
borderRadius: `${30 * overlayScale}px`,
|
|
17624
|
+
display: 'inline-flex',
|
|
17625
|
+
alignItems: 'center',
|
|
17626
|
+
justifyContent: 'center',
|
|
17627
|
+
fontSize: `${26 * overlayScale}px`,
|
|
17628
|
+
color: 'white',
|
|
17629
|
+
fontWeight: '400',
|
|
17630
|
+
}, children: [convertDistanceByUnits(dimensions.height, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.width, unitType).value] }) })), jsxRuntime.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 === exports.PlatformType.H5
|
|
17642
17631
|
? {
|
|
17643
17632
|
onTouchStart: createReactEventHandler((e) => {
|
|
17644
17633
|
handleMouseDownWithDisabled(e);
|
|
@@ -17678,18 +17667,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17678
17667
|
}
|
|
17679
17668
|
: {
|
|
17680
17669
|
onMouseDown: handleScaleStartWithDisabled,
|
|
17681
|
-
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformScale, {}) }) })
|
|
17682
|
-
padding: '5px 6px',
|
|
17683
|
-
background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
|
|
17684
|
-
borderRadius: '20px',
|
|
17685
|
-
display: 'inline-flex',
|
|
17686
|
-
alignItems: 'center',
|
|
17687
|
-
justifyContent: 'center',
|
|
17688
|
-
fontSize: '12px',
|
|
17689
|
-
color: 'white',
|
|
17690
|
-
fontWeight: '400',
|
|
17691
|
-
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
17692
|
-
}, children: [convertDistanceByUnits(dimensions.height, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.width, unitType).value] }) }))] }));
|
|
17670
|
+
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformScale, {}) }) })] }));
|
|
17693
17671
|
})()] }));
|
|
17694
17672
|
};
|
|
17695
17673
|
|
|
@@ -17919,11 +17897,6 @@ const useDoodleTransform = (data, onTransformChange, options) => {
|
|
|
17919
17897
|
}, [currentCenter, currentScale, currentDirection, getSvgDimensions]);
|
|
17920
17898
|
// 初始化变换状态
|
|
17921
17899
|
const initializeTransform = React.useCallback(() => {
|
|
17922
|
-
console.log('useDoodleTransform: 初始化变换状态', {
|
|
17923
|
-
center: data.center,
|
|
17924
|
-
scale: data.scale,
|
|
17925
|
-
direction: data.direction,
|
|
17926
|
-
});
|
|
17927
17900
|
const convertedCenter = convertPoint(data.center);
|
|
17928
17901
|
setCurrentCenter({ x: convertedCenter[0], y: convertedCenter[1] });
|
|
17929
17902
|
setCurrentScale(data.scale);
|
|
@@ -18150,21 +18123,6 @@ const useDoodleTransform = (data, onTransformChange, options) => {
|
|
|
18150
18123
|
};
|
|
18151
18124
|
};
|
|
18152
18125
|
|
|
18153
|
-
var _path$4;
|
|
18154
|
-
function _extends$6() { return _extends$6 = 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$6.apply(null, arguments); }
|
|
18155
|
-
var SvgTransformArrow = function SvgTransformArrow(props) {
|
|
18156
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
18157
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
18158
|
-
width: 7,
|
|
18159
|
-
height: 11,
|
|
18160
|
-
fill: "none"
|
|
18161
|
-
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
18162
|
-
fill: "#fff",
|
|
18163
|
-
d: "M2.156 1.032a.777.777 0 0 0-1.061 0 .69.69 0 0 0-.062.943l.062.068 3.97 3.78-3.97 3.78a.69.69 0 0 0-.062.944l.062.067c.27.257.696.277.99.06l.07-.06 4.5-4.286a.69.69 0 0 0 .063-.943l-.062-.067z",
|
|
18164
|
-
opacity: 0.5
|
|
18165
|
-
})));
|
|
18166
|
-
};
|
|
18167
|
-
|
|
18168
18126
|
const DoodleTransform = ({ data, isSelected: _isSelected, onSelect }) => {
|
|
18169
18127
|
const { editMapInfo } = useMapEditContext();
|
|
18170
18128
|
const { platform } = useCommonContext();
|
|
@@ -18342,10 +18300,9 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18342
18300
|
const maxY = Math.max(...selectionBoxPoints.map((p) => p.y));
|
|
18343
18301
|
// 计算选择框的中心
|
|
18344
18302
|
const centerX = (minX + maxX) / 2;
|
|
18345
|
-
//
|
|
18346
|
-
const
|
|
18347
|
-
const
|
|
18348
|
-
const infoBoxHeight = 100 * overlayScale; // 信息框高度
|
|
18303
|
+
const infoBoxY = maxY + 20 + 30 * overlayScale; // 选择框下方20像素
|
|
18304
|
+
const infoBoxWidth = 300 * overlayScale; // 信息框宽度
|
|
18305
|
+
const infoBoxHeight = 40 * overlayScale; // 信息框高度
|
|
18349
18306
|
const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
|
|
18350
18307
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#B2B4B9", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === exports.PlatformType.H5
|
|
18351
18308
|
? {
|
|
@@ -18358,14 +18315,14 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18358
18315
|
}) }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[0].x, cy: selectionBoxPoints[0].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[3].x, cy: selectionBoxPoints[3].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[1].x, cy: selectionBoxPoints[1].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[2].x, cy: selectionBoxPoints[2].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), platform === exports.PlatformType.H5 && (jsxRuntime.jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
|
|
18359
18316
|
onClickInfo?.();
|
|
18360
18317
|
}, children: jsxRuntime.jsx("div", { style: {
|
|
18361
|
-
padding:
|
|
18318
|
+
padding: `5px ${10 * overlayScale}px`,
|
|
18362
18319
|
background: 'rgba(201, 209, 218, 1)',
|
|
18363
|
-
borderRadius:
|
|
18320
|
+
borderRadius: `${10 * overlayScale}px`,
|
|
18364
18321
|
display: 'inline-flex',
|
|
18365
18322
|
flexDirection: 'column',
|
|
18366
18323
|
alignItems: 'flex-start',
|
|
18367
18324
|
justifyContent: 'center',
|
|
18368
|
-
fontSize:
|
|
18325
|
+
fontSize: `${26 * overlayScale}px`,
|
|
18369
18326
|
color: 'white',
|
|
18370
18327
|
fontWeight: '400',
|
|
18371
18328
|
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
@@ -18423,14 +18380,32 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18423
18380
|
const maxY = Math.max(...selectionBoxPoints.map((p) => p.y));
|
|
18424
18381
|
// 计算选择框的中心
|
|
18425
18382
|
const centerX = (minX + maxX) / 2;
|
|
18426
|
-
//
|
|
18427
|
-
const
|
|
18428
|
-
const infoBoxWidth = 140 * overlayScale; // 信息框宽度
|
|
18383
|
+
const infoBoxY = maxY + 20 + 40 * overlayScale; // 选择框下方20像素
|
|
18384
|
+
const infoBoxWidth = 300 * overlayScale; // 信息框宽度
|
|
18429
18385
|
const infoBoxHeight = 100 * overlayScale; // 信息框高度
|
|
18430
18386
|
const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
|
|
18431
|
-
const scale =
|
|
18387
|
+
const scale = 2 * overlayScale;
|
|
18432
18388
|
const offsetLeft = 10 * scale;
|
|
18433
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
18389
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showInfo && (jsxRuntime.jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
|
|
18390
|
+
onClickInfo?.();
|
|
18391
|
+
}, children: jsxRuntime.jsxs("div", { style: {
|
|
18392
|
+
padding: `${10 * overlayScale}px`,
|
|
18393
|
+
background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
|
|
18394
|
+
borderRadius: `${20 * overlayScale}px`,
|
|
18395
|
+
display: 'inline-flex',
|
|
18396
|
+
flexDirection: 'column',
|
|
18397
|
+
alignItems: 'flex-start',
|
|
18398
|
+
justifyContent: 'center',
|
|
18399
|
+
fontSize: `${26 * overlayScale}px`,
|
|
18400
|
+
color: 'white',
|
|
18401
|
+
fontWeight: '400',
|
|
18402
|
+
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
18403
|
+
}, children: [jsxRuntime.jsxs("div", { children: [convertDistanceByUnits(dimensions.width, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.height, unitType).value] }), jsxRuntime.jsx("div", { style: {
|
|
18404
|
+
display: 'flex',
|
|
18405
|
+
alignItems: 'center',
|
|
18406
|
+
justifyContent: 'center',
|
|
18407
|
+
gap: `${10 * overlayScale}px`,
|
|
18408
|
+
}, children: jsxRuntime.jsxs("div", { children: ["Active Time: ", activeTime, " >"] }) })] }) })), jsxRuntime.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 === exports.PlatformType.H5
|
|
18434
18409
|
? {
|
|
18435
18410
|
onTouchStart: createReactEventHandler((e) => {
|
|
18436
18411
|
handleMouseDownWithDisabled(e);
|
|
@@ -18470,26 +18445,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18470
18445
|
}
|
|
18471
18446
|
: {
|
|
18472
18447
|
onMouseDown: handleScaleStartWithDisabled,
|
|
18473
|
-
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformScale, {}) }) })
|
|
18474
|
-
onClickInfo?.();
|
|
18475
|
-
}, children: jsxRuntime.jsxs("div", { style: {
|
|
18476
|
-
padding: '5px 6px',
|
|
18477
|
-
background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
|
|
18478
|
-
borderRadius: '10px',
|
|
18479
|
-
display: 'inline-flex',
|
|
18480
|
-
flexDirection: 'column',
|
|
18481
|
-
alignItems: 'flex-start',
|
|
18482
|
-
justifyContent: 'center',
|
|
18483
|
-
fontSize: '12px',
|
|
18484
|
-
color: 'white',
|
|
18485
|
-
fontWeight: '400',
|
|
18486
|
-
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
18487
|
-
}, children: [jsxRuntime.jsxs("div", { children: [convertDistanceByUnits(dimensions.width, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.height, unitType).value] }), jsxRuntime.jsxs("div", { style: {
|
|
18488
|
-
display: 'flex',
|
|
18489
|
-
alignItems: 'center',
|
|
18490
|
-
justifyContent: 'center',
|
|
18491
|
-
gap: '10px',
|
|
18492
|
-
}, children: [jsxRuntime.jsxs("div", { children: ["Active Time: ", activeTime] }), jsxRuntime.jsx(SvgTransformArrow, {})] })] }) }))] }));
|
|
18448
|
+
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsxRuntime.jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsxRuntime.jsx(SvgTransformScale, {}) }) })] }));
|
|
18493
18449
|
})()] }));
|
|
18494
18450
|
};
|
|
18495
18451
|
|
|
@@ -19715,7 +19671,6 @@ function usePolygonDrawing(options = {}) {
|
|
|
19715
19671
|
},
|
|
19716
19672
|
};
|
|
19717
19673
|
});
|
|
19718
|
-
console.log('onSvgClick');
|
|
19719
19674
|
addHistory({
|
|
19720
19675
|
selectElement: {
|
|
19721
19676
|
...editMapInfo.selectElement,
|
|
@@ -19757,7 +19712,6 @@ function usePolygonDrawing(options = {}) {
|
|
|
19757
19712
|
},
|
|
19758
19713
|
};
|
|
19759
19714
|
});
|
|
19760
|
-
console.log('updatePoints');
|
|
19761
19715
|
addHistory({
|
|
19762
19716
|
selectElement: {
|
|
19763
19717
|
...editMapInfo.selectElement,
|
|
@@ -19805,11 +19759,6 @@ const isPointInSvgBounds = (point, svgElement) => {
|
|
|
19805
19759
|
const maxY = minY + height;
|
|
19806
19760
|
// 检查点是否在viewBox范围内
|
|
19807
19761
|
const isInBounds = point.x >= minX && point.x <= maxX && point.y >= minY && point.y <= maxY;
|
|
19808
|
-
console.log('点边界检查:', {
|
|
19809
|
-
point: { x: point.x, y: point.y },
|
|
19810
|
-
viewBox: { minX, minY, maxX, maxY },
|
|
19811
|
-
isInBounds,
|
|
19812
|
-
});
|
|
19813
19762
|
return isInBounds;
|
|
19814
19763
|
}
|
|
19815
19764
|
catch (error) {
|
|
@@ -19836,8 +19785,6 @@ const getScreenCenterSvgPoint = (svgElement, mapInstance) => {
|
|
|
19836
19785
|
// 计算Google Maps容器的中心点
|
|
19837
19786
|
const centerX = mapRect.left + mapRect.width / 2;
|
|
19838
19787
|
const centerY = mapRect.top + mapRect.height / 2;
|
|
19839
|
-
console.log('Google Maps容器中心位置:', { centerX, centerY });
|
|
19840
|
-
console.log('Google Maps容器尺寸:', { width: mapRect.width, height: mapRect.height });
|
|
19841
19788
|
// 直接使用SVG的CTM进行坐标转换
|
|
19842
19789
|
const pt = svgElement.createSVGPoint();
|
|
19843
19790
|
pt.x = centerX;
|
|
@@ -19849,7 +19796,6 @@ const getScreenCenterSvgPoint = (svgElement, mapInstance) => {
|
|
|
19849
19796
|
}
|
|
19850
19797
|
const inv = ctm.inverse();
|
|
19851
19798
|
const svgPoint = pt.matrixTransform(inv);
|
|
19852
|
-
console.log('转换后的SVG坐标:', { x: svgPoint.x, y: svgPoint.y });
|
|
19853
19799
|
// 检查点是否在SVG可见区域内
|
|
19854
19800
|
const point = { x: svgPoint.x, y: svgPoint.y };
|
|
19855
19801
|
if (!isPointInSvgBounds(point, svgElement)) {
|
|
@@ -19954,31 +19900,27 @@ CreateObstacleElement.displayName = 'CreateObstacleElement';
|
|
|
19954
19900
|
|
|
19955
19901
|
const MIN_ELEMENT_WIDTH = 50;
|
|
19956
19902
|
const useCreateVisionOffElement = () => {
|
|
19957
|
-
const { svgRef } = useSvgEditContext();
|
|
19958
19903
|
const { editMapInfo } = useMapEditContext();
|
|
19904
|
+
const { svgViewBox } = useCommonContext();
|
|
19959
19905
|
const centerPoint = React.useMemo(() => {
|
|
19960
|
-
if (!
|
|
19906
|
+
if (!svgViewBox)
|
|
19961
19907
|
return null;
|
|
19962
|
-
const
|
|
19963
|
-
const center = [
|
|
19964
|
-
baseVal?.x + (baseVal?.width || 0) / 2,
|
|
19965
|
-
baseVal?.y + (baseVal?.height || 0) / 2,
|
|
19966
|
-
];
|
|
19908
|
+
const center = [svgViewBox.x + svgViewBox.width / 2, -svgViewBox.y - svgViewBox.height / 2];
|
|
19967
19909
|
return center;
|
|
19968
|
-
}, [
|
|
19910
|
+
}, [svgViewBox]);
|
|
19969
19911
|
const elementWidth = React.useMemo(() => {
|
|
19970
|
-
if (!
|
|
19912
|
+
if (!svgViewBox)
|
|
19971
19913
|
return MIN_ELEMENT_WIDTH;
|
|
19972
|
-
const baseVal =
|
|
19973
|
-
if (baseVal && baseVal /
|
|
19974
|
-
return baseVal /
|
|
19914
|
+
const baseVal = Math.min(svgViewBox.width, svgViewBox.height);
|
|
19915
|
+
if (baseVal && baseVal / 4 > MIN_ELEMENT_WIDTH) {
|
|
19916
|
+
return baseVal / 4;
|
|
19975
19917
|
}
|
|
19976
19918
|
return MIN_ELEMENT_WIDTH;
|
|
19977
|
-
}, [
|
|
19919
|
+
}, [svgViewBox]);
|
|
19978
19920
|
const getVisionOffPoints = React.useCallback(() => {
|
|
19979
|
-
if (!
|
|
19921
|
+
if (!svgViewBox)
|
|
19980
19922
|
return null;
|
|
19981
|
-
const offset = ((
|
|
19923
|
+
const offset = (Math.random() - 0.5) * elementWidth;
|
|
19982
19924
|
const [minX, minY, maxX, maxY] = [
|
|
19983
19925
|
centerPoint[0] - elementWidth / 2 + offset,
|
|
19984
19926
|
centerPoint[1] - elementWidth / 2 + offset,
|
|
@@ -20039,7 +19981,7 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
|
|
|
20039
19981
|
}, [centerPoint]);
|
|
20040
19982
|
// 调整SVG大小的函数
|
|
20041
19983
|
const adjustSvgSize = (layoutData) => {
|
|
20042
|
-
const padding =
|
|
19984
|
+
const padding = 0; // 添加一些边距以避免内容贴边
|
|
20043
19985
|
const boundWidth = bounds.maxX - bounds.minX + padding * 2;
|
|
20044
19986
|
const boundHeight = bounds.maxY - bounds.minY + padding * 2;
|
|
20045
19987
|
// 防止宽高为0的情况
|
|
@@ -20255,6 +20197,7 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
|
|
|
20255
20197
|
left: '50%',
|
|
20256
20198
|
top: '50%',
|
|
20257
20199
|
transform: 'translate(-50%, -50%)',
|
|
20200
|
+
overflow: 'visible',
|
|
20258
20201
|
// cursor: createMode ? 'crosshair' : editMode ? 'default' : 'move',
|
|
20259
20202
|
// pointerEvents: 'auto', // 关键:允许接收鼠标事件
|
|
20260
20203
|
}, xmlns: "http://www.w3.org/2000/svg", "shape-rendering": "geometricPrecision", "text-rendering": "geometricPrecision", "image-rendering": "optimizeQuality", ref: svgRef, onClick: editMapInfo.createMode && platform !== exports.PlatformType.H5 ? onSvgClick : undefined, onMouseMove: editMapInfo.createMode && platform !== exports.PlatformType.H5 ? onSvgMouseMove : undefined, children: [jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsx("filter", { id: "vertex-tooltip-shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: jsxRuntime.jsx("feDropShadow", { dx: "2", dy: "2", stdDeviation: "2", floodColor: "#000", floodOpacity: "0.12" }) }), jsxRuntime.jsxs("filter", { id: `path-hover-${exports.DataType.BOUNDARY}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsxRuntime.jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsxRuntime.jsx("feFlood", { floodColor: BOUNDARY_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsxRuntime.jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxRuntime.jsxs("feMerge", { children: [jsxRuntime.jsx("feMergeNode", { in: "coloredBorder" }), jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxRuntime.jsxs("filter", { id: `path-hover-${exports.DataType.VISION_OFF}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsxRuntime.jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsxRuntime.jsx("feFlood", { floodColor: VISION_OFF_AREA_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsxRuntime.jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxRuntime.jsxs("feMerge", { children: [jsxRuntime.jsx("feMergeNode", { in: "coloredBorder" }), jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxRuntime.jsxs("filter", { id: `path-hover-${exports.DataType.OBSTACLE}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsxRuntime.jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsxRuntime.jsx("feFlood", { floodColor: OBSTACLE_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsxRuntime.jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxRuntime.jsxs("feMerge", { children: [jsxRuntime.jsx("feMergeNode", { in: "coloredBorder" }), jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })] })] })] }), Object.keys(svgElementDatas)
|
|
@@ -20888,10 +20831,7 @@ const getValidGpsBounds = (mapData, rotation = 0) => {
|
|
|
20888
20831
|
else {
|
|
20889
20832
|
// 最后的fallback:使用默认坐标
|
|
20890
20833
|
console.warn('无法获取有效的GPS边界,使用默认坐标');
|
|
20891
|
-
bounds =
|
|
20892
|
-
sw: [-9.1562, -37.7503],
|
|
20893
|
-
ne: [31.247, 5.797],
|
|
20894
|
-
};
|
|
20834
|
+
bounds = DEFAULT_COORDINATES;
|
|
20895
20835
|
}
|
|
20896
20836
|
}
|
|
20897
20837
|
// 如果有旋转角度,计算旋转后的边界
|
|
@@ -21044,7 +20984,6 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
21044
20984
|
overlayScale,
|
|
21045
20985
|
doodleList,
|
|
21046
20986
|
]);
|
|
21047
|
-
// console.log('svgElementDatas->', svgElementDatas, unStructMapData, commonValue);
|
|
21048
20987
|
// 处理地图分区边界
|
|
21049
20988
|
// const partitionBoundary = useMemo(() => {
|
|
21050
20989
|
// const allBoundaryElements = [];
|
|
@@ -21292,8 +21231,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
21292
21231
|
// 基于固定的参考zoom级别计算overlayScale
|
|
21293
21232
|
const zoomDiff = currentZoom - REFERENCE_ZOOM;
|
|
21294
21233
|
const scale = Math.pow(2, -zoomDiff); // 负数实现反向缩放
|
|
21295
|
-
|
|
21296
|
-
setOverlayScale(scale < 1 ? 1 : scale);
|
|
21234
|
+
setOverlayScale(scale < 1 ? 1 : platform === exports.PlatformType.H5 ? 1.5 * scale : scale);
|
|
21297
21235
|
};
|
|
21298
21236
|
// 使用lodash throttle进行节流处理: 100ms内只执行一次
|
|
21299
21237
|
const handleZoomChanged = throttle$2(updateScale, 50);
|
|
@@ -21375,7 +21313,9 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
21375
21313
|
// 添加视觉失效区
|
|
21376
21314
|
addVisionOffPoint: () => svgEditMapRef.current?.addVisionOffPoint(),
|
|
21377
21315
|
// h5进入视觉失效区编辑模式
|
|
21378
|
-
enterVisionOffEditMode: (mode) =>
|
|
21316
|
+
enterVisionOffEditMode: (mode) => {
|
|
21317
|
+
svgEditMapRef.current?.enterVisionOffEditMode(mode);
|
|
21318
|
+
},
|
|
21379
21319
|
// 重做
|
|
21380
21320
|
redo: () => svgEditMapRef.current?.redo(),
|
|
21381
21321
|
// 撤销
|