@fleet-frontend/mower-maps 0.2.0-beta.15 → 0.2.0-beta.16
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/context/mapEdit.d.ts +3 -1
- package/dist/context/mapEdit.d.ts.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +705 -128
- package/dist/index.js +706 -129
- package/dist/render/MowerMapRenderer.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/obstacle.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/visionOff.d.ts.map +1 -1
- package/dist/render/svgEditMap/hooks/useCheckElement.d.ts +7 -5
- package/dist/render/svgEditMap/hooks/useCheckElement.d.ts.map +1 -1
- package/dist/render/svgEditMap/index.d.ts +3 -1
- package/dist/render/svgEditMap/index.d.ts.map +1 -1
- package/dist/render/svgElement/Mobile/CreateObstacleElement/index.d.ts +2 -0
- package/dist/render/svgElement/Mobile/CreateObstacleElement/index.d.ts.map +1 -1
- package/dist/render/svgElement/ObstacleElement/index.d.ts.map +1 -1
- package/dist/render/svgElement/PolygonELement/components/DistanceLabels.d.ts +2 -0
- package/dist/render/svgElement/PolygonELement/components/DistanceLabels.d.ts.map +1 -1
- package/dist/render/svgElement/PolygonELement/components/DragDistanceIndicator.d.ts +2 -0
- package/dist/render/svgElement/PolygonELement/components/DragDistanceIndicator.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 +20 -0
- package/dist/types/renderer.d.ts.map +1 -1
- package/dist/utils/common.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8005,6 +8005,42 @@ exports.PlatformType = void 0;
|
|
|
8005
8005
|
PlatformType["WEB"] = "web";
|
|
8006
8006
|
PlatformType["H5"] = "h5";
|
|
8007
8007
|
})(exports.PlatformType || (exports.PlatformType = {}));
|
|
8008
|
+
// 禁区的点进行检查的时候的提示
|
|
8009
|
+
exports.CheckObstaclePointErrorType = void 0;
|
|
8010
|
+
(function (CheckObstaclePointErrorType) {
|
|
8011
|
+
// 禁区相交
|
|
8012
|
+
CheckObstaclePointErrorType["OBSTACLE_INTERSECT"] = "obstacle_intersect";
|
|
8013
|
+
// 禁区与doodle相交
|
|
8014
|
+
CheckObstaclePointErrorType["DOODLE_INTERSECT"] = "doodle_intersect";
|
|
8015
|
+
// 禁区与doodle距离过近
|
|
8016
|
+
CheckObstaclePointErrorType["DOODLE_DISTANCE_TOO_CLOSE"] = "doodle_distance_too_close";
|
|
8017
|
+
// 禁区不在边界内
|
|
8018
|
+
CheckObstaclePointErrorType["BOUNDARY_NOT_IN_BOUNDARY"] = "boundary_not_in_boundary";
|
|
8019
|
+
// 点在禁区内
|
|
8020
|
+
CheckObstaclePointErrorType["POINT_IN_OBSTACLE"] = "point_in_obstacle";
|
|
8021
|
+
// 地图不存在
|
|
8022
|
+
CheckObstaclePointErrorType["MAP_NOT_EXIST"] = "map_not_exist";
|
|
8023
|
+
// 获取点失败
|
|
8024
|
+
CheckObstaclePointErrorType["GET_POINT_FAILED"] = "get_point_failed";
|
|
8025
|
+
// 通用错误
|
|
8026
|
+
CheckObstaclePointErrorType["COMMON_ERROR"] = "common_error";
|
|
8027
|
+
})(exports.CheckObstaclePointErrorType || (exports.CheckObstaclePointErrorType = {}));
|
|
8028
|
+
// doodle进行检查的提示
|
|
8029
|
+
exports.CheckDoodleErrorType = void 0;
|
|
8030
|
+
(function (CheckDoodleErrorType) {
|
|
8031
|
+
// 没有选中doodle
|
|
8032
|
+
CheckDoodleErrorType["NO_DOODLE_SELECTED"] = "no_doodle_selected";
|
|
8033
|
+
// doodle没有可移动的点
|
|
8034
|
+
CheckDoodleErrorType["NO_MOVABLE_POINTS"] = "no_movable_points";
|
|
8035
|
+
// doodle不在边界内
|
|
8036
|
+
CheckDoodleErrorType["DOODLE_NOT_IN_BOUNDARY"] = "doodle_not_in_boundary";
|
|
8037
|
+
// doodle距离边界太近
|
|
8038
|
+
CheckDoodleErrorType["DOODLE_DISTANCE_TOO_CLOSE"] = "doodle_distance_too_close";
|
|
8039
|
+
// doodle与其他元素相交
|
|
8040
|
+
CheckDoodleErrorType["DOODLE_INTERSECT"] = "doodle_intersect";
|
|
8041
|
+
// doodle与其他元素距离过近
|
|
8042
|
+
CheckDoodleErrorType["DOODLE_DISTANCE_TOO_CLOSE_TO_OTHER_ELEMENT"] = "doodle_distance_too_close_to_other_element";
|
|
8043
|
+
})(exports.CheckDoodleErrorType || (exports.CheckDoodleErrorType = {}));
|
|
8008
8044
|
|
|
8009
8045
|
/**
|
|
8010
8046
|
* 触摸事件工具函数
|
|
@@ -8602,12 +8638,12 @@ function styleInject(css, ref) {
|
|
|
8602
8638
|
}
|
|
8603
8639
|
}
|
|
8604
8640
|
|
|
8605
|
-
var css_248z$
|
|
8606
|
-
var styles$
|
|
8607
|
-
styleInject(css_248z$
|
|
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);
|
|
8608
8644
|
|
|
8609
8645
|
const RotateHandle = ({ onRotateStart, isRotating }) => {
|
|
8610
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
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 } }));
|
|
8611
8647
|
};
|
|
8612
8648
|
|
|
8613
8649
|
/**
|
|
@@ -8661,13 +8697,18 @@ function isMobileDevice() {
|
|
|
8661
8697
|
// 检查用户代理字符串
|
|
8662
8698
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
8663
8699
|
const mobileKeywords = [
|
|
8664
|
-
'android',
|
|
8665
|
-
'
|
|
8700
|
+
'android',
|
|
8701
|
+
'webos',
|
|
8702
|
+
'iphone',
|
|
8703
|
+
'ipad',
|
|
8704
|
+
'ipod',
|
|
8705
|
+
'blackberry',
|
|
8706
|
+
'windows phone',
|
|
8707
|
+
'mobile',
|
|
8666
8708
|
];
|
|
8667
|
-
const isMobileUserAgent = mobileKeywords.some(keyword => userAgent.includes(keyword));
|
|
8709
|
+
const isMobileUserAgent = mobileKeywords.some((keyword) => userAgent.includes(keyword));
|
|
8668
8710
|
// 检查触摸屏支持
|
|
8669
|
-
const hasTouchScreen = 'ontouchstart' in window ||
|
|
8670
|
-
(navigator.maxTouchPoints && navigator.maxTouchPoints > 0);
|
|
8711
|
+
const hasTouchScreen = 'ontouchstart' in window || (navigator.maxTouchPoints && navigator.maxTouchPoints > 0);
|
|
8671
8712
|
// 检查屏幕尺寸(移动设备通常屏幕较小)
|
|
8672
8713
|
const isSmallScreen = window.innerWidth <= 768;
|
|
8673
8714
|
// 综合判断:用户代理包含移动设备关键词,或者有触摸屏且屏幕较小
|
|
@@ -8679,7 +8720,7 @@ const DragHandle = ({ onDragStart, isDragging }) => {
|
|
|
8679
8720
|
if (!isMobileDevice()) {
|
|
8680
8721
|
return null;
|
|
8681
8722
|
}
|
|
8682
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
8723
|
+
return (jsxRuntime.jsx("div", { className: styles$9.move, onMouseDown: (e) => {
|
|
8683
8724
|
console.log('down');
|
|
8684
8725
|
onDragStart(e);
|
|
8685
8726
|
}, onTouchStart: (e) => onDragStart(e), onMouseUp: (e) => {
|
|
@@ -8713,7 +8754,7 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
|
|
|
8713
8754
|
if (!isDragMap) {
|
|
8714
8755
|
return null;
|
|
8715
8756
|
}
|
|
8716
|
-
return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$
|
|
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(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsxRuntime.jsx("div", { className: styles$9.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsxRuntime.jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
|
|
8717
8758
|
};
|
|
8718
8759
|
|
|
8719
8760
|
/**
|
|
@@ -14436,9 +14477,9 @@ const SvgMapComponent = React.forwardRef(({ editMap, rotate, mapData, pathData,
|
|
|
14436
14477
|
// 设置显示名称以便调试
|
|
14437
14478
|
SvgMapComponent.displayName = 'SvgMapComponent';
|
|
14438
14479
|
|
|
14439
|
-
var css_248z$
|
|
14440
|
-
var styles$
|
|
14441
|
-
styleInject(css_248z$
|
|
14480
|
+
var css_248z$8 = ".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}";
|
|
14481
|
+
var styles$8 = {"mowerPosition":"index-module_mowerPosition__yLpIU"};
|
|
14482
|
+
styleInject(css_248z$8);
|
|
14442
14483
|
|
|
14443
14484
|
const usePosition = ({ mowerPositionData, viewBox, modelType, hasEdger, mapData, realTimeData, onMowingPositionChange, }) => {
|
|
14444
14485
|
// DOM 元素引用,用于直接操作
|
|
@@ -14664,7 +14705,7 @@ const MowerPosition = React.memo(({ editMap, mowerPositionData, viewBox, modelTy
|
|
|
14664
14705
|
pointerEvents: 'none',
|
|
14665
14706
|
zIndex: 1000,
|
|
14666
14707
|
}), []);
|
|
14667
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
14708
|
+
return (jsxRuntime.jsx("div", { className: styles$8.mowerPosition, style: containerStyle, children: jsxRuntime.jsx("div", { ref: elementRef, className: "mower-position", style: {
|
|
14668
14709
|
position: 'absolute',
|
|
14669
14710
|
width: 30,
|
|
14670
14711
|
height: 30,
|
|
@@ -14733,9 +14774,9 @@ const CharginPile = React.memo(({ mapData, mapConfig = {}, viewBox, rotation = 0
|
|
|
14733
14774
|
}, children: jsxRuntime.jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }, `pile-${idx}`))) }));
|
|
14734
14775
|
});
|
|
14735
14776
|
|
|
14736
|
-
var css_248z$
|
|
14737
|
-
var styles$
|
|
14738
|
-
styleInject(css_248z$
|
|
14777
|
+
var css_248z$7 = ".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\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}";
|
|
14778
|
+
var styles$7 = {"container":"index-module_container__7IatW","boundaryLabel":"index-module_boundaryLabel__GDHFn","base":"index-module_base__qy2SG","extended":"index-module_extended__0TMAt"};
|
|
14779
|
+
styleInject(css_248z$7);
|
|
14739
14780
|
|
|
14740
14781
|
const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionData, realTimeData = [], }) => {
|
|
14741
14782
|
const [processStateIsMowing, updateProcessStateIsMowing] = React.useState(false);
|
|
@@ -14889,7 +14930,7 @@ const BoundaryLabels = React.memo(({ editMap, mapData, pathData, unitType, langu
|
|
|
14889
14930
|
zIndex: expandedId != null ? 9999 : containerZIndex,
|
|
14890
14931
|
display: editMap ? 'none' : 'block',
|
|
14891
14932
|
}), [containerZIndex, expandedId, editMap]);
|
|
14892
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
14933
|
+
return (jsxRuntime.jsx("div", { className: styles$7.container, style: containerStyle, children: items.map((item) => (jsxRuntime.jsxs("div", { className: `${styles$7.boundaryLabel} boundary-label`, "data-boundary-id": item.id, style: {
|
|
14893
14934
|
transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
|
|
14894
14935
|
left: `${item.leftPct}%`,
|
|
14895
14936
|
top: `${item.topPct}%`,
|
|
@@ -14899,12 +14940,12 @@ const BoundaryLabels = React.memo(({ editMap, mapData, pathData, unitType, langu
|
|
|
14899
14940
|
if (onlyRead)
|
|
14900
14941
|
return;
|
|
14901
14942
|
handleClick(item.id);
|
|
14902
|
-
}, children: [jsxRuntime.jsx("div", { className: styles$
|
|
14943
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$7.base, children: item.baseText }), jsxRuntime.jsxs("div", { className: styles$7.extended, style: { display: expandedId === item.id ? 'block' : 'none' }, children: [jsxRuntime.jsx("div", { style: { marginBottom: 3, fontWeight: 'bold' }, children: item.coverageText }), jsxRuntime.jsx("div", { children: item.dateText })] })] }, item.id))) }));
|
|
14903
14944
|
});
|
|
14904
14945
|
|
|
14905
|
-
var css_248z$
|
|
14906
|
-
var styles$
|
|
14907
|
-
styleInject(css_248z$
|
|
14946
|
+
var css_248z$6 = ".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}";
|
|
14947
|
+
var styles$6 = {"container":"index-module_container__gB52e","item":"index-module_item__zHoZP","icon":"index-module_icon__CS56A","tooltip":"index-module_tooltip__NMCmR"};
|
|
14948
|
+
styleInject(css_248z$6);
|
|
14908
14949
|
|
|
14909
14950
|
const useAntennaInfo = (data = [], options = {}) => {
|
|
14910
14951
|
const { viewBox } = options;
|
|
@@ -15013,13 +15054,13 @@ const Antennas = React.memo(({ editMap, antennaConfig = [], viewBox, rotation =
|
|
|
15013
15054
|
document.addEventListener('pointerdown', handleOutside);
|
|
15014
15055
|
return () => document.removeEventListener('pointerdown', handleOutside);
|
|
15015
15056
|
}, []);
|
|
15016
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
15057
|
+
return (jsxRuntime.jsx("div", { className: styles$6.container, style: containerStyle, children: items.map((item) => (jsxRuntime.jsxs("div", { className: `antenna-container-item ${styles$6.item}`, style: {
|
|
15017
15058
|
left: `${item.leftPct}%`,
|
|
15018
15059
|
top: `${item.topPct}%`,
|
|
15019
15060
|
transform: `translate(calc(-50% + ${item.offsetX || 0}px), calc(-50% + ${item.offsetY || 0}px)) rotate(${-rotation}deg)`,
|
|
15020
15061
|
zIndex: openType === item.type ? 10000 : containerZIndex,
|
|
15021
15062
|
pointerEvents: onlyRead ? 'none' : 'auto',
|
|
15022
|
-
}, children: [jsxRuntime.jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$
|
|
15063
|
+
}, children: [jsxRuntime.jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$6.icon}`, style: {}, onClick: (e) => {
|
|
15023
15064
|
e.stopPropagation();
|
|
15024
15065
|
if (onlyRead)
|
|
15025
15066
|
return;
|
|
@@ -15034,7 +15075,7 @@ const Antennas = React.memo(({ editMap, antennaConfig = [], viewBox, rotation =
|
|
|
15034
15075
|
return;
|
|
15035
15076
|
e.currentTarget.style.transform =
|
|
15036
15077
|
'scale(1)';
|
|
15037
|
-
}, children: jsxRuntime.jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxRuntime.jsxs("div", { className: styles$
|
|
15078
|
+
}, children: jsxRuntime.jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxRuntime.jsxs("div", { className: styles$6.tooltip, style: {
|
|
15038
15079
|
display: openType === item.type ? 'block' : 'none',
|
|
15039
15080
|
minWidth: item.tooltip.minWidth,
|
|
15040
15081
|
}, children: [jsxRuntime.jsx("div", { style: { marginBottom: 4, fontWeight: 600 }, children: item.tooltip.title }), jsxRuntime.jsxs("div", { style: { color: 'rgba(65, 93, 116, 1)', fontWeight: 400 }, children: [item.tooltip.statusText, item.tooltip.syncText || ''] })] })] }, `antenna-${item.type}`))) }));
|
|
@@ -15098,25 +15139,25 @@ const VertexElement = React.memo(({ r, stroke, fill, ...props }) => {
|
|
|
15098
15139
|
return (jsxRuntime.jsx("circle", { r: platform === exports.PlatformType.H5 ? (radius * overlayScale) / 2 : radius * overlayScale, stroke: stroke || '#fff', fill: fill || '#fff', strokeWidth: 2 * overlayScale, ...props }));
|
|
15099
15140
|
});
|
|
15100
15141
|
|
|
15101
|
-
var _path$
|
|
15102
|
-
function _extends$
|
|
15142
|
+
var _path$5;
|
|
15143
|
+
function _extends$b() { return _extends$b = 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$b.apply(null, arguments); }
|
|
15103
15144
|
var SvgDelete = function SvgDelete(props) {
|
|
15104
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
15145
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
|
|
15105
15146
|
xmlns: "http://www.w3.org/2000/svg",
|
|
15106
15147
|
width: 16,
|
|
15107
15148
|
height: 16,
|
|
15108
15149
|
fill: "none"
|
|
15109
|
-
}, props), _path$
|
|
15150
|
+
}, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
15110
15151
|
fill: "#FD494D",
|
|
15111
15152
|
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"
|
|
15112
15153
|
})));
|
|
15113
15154
|
};
|
|
15114
15155
|
|
|
15115
|
-
const DragDistanceIndicator = ({ fontSize, dragState, strokeColor, editMode = false, createMode = false, completed = false, }) => {
|
|
15156
|
+
const DragDistanceIndicator = ({ fontSize, dragState, strokeColor, editMode = false, createMode = false, completed = false, unitType = UnitsType.Metric, }) => {
|
|
15116
15157
|
// 计算两点间的距离(使用通用工具函数)
|
|
15117
15158
|
const calculateDistance$1 = React.useCallback((point1, point2) => {
|
|
15118
15159
|
const distance = calculateDistance(point1, point2);
|
|
15119
|
-
const result = convertDistanceByUnits(distance / 50);
|
|
15160
|
+
const result = convertDistanceByUnits(distance / 50, unitType);
|
|
15120
15161
|
return result.value;
|
|
15121
15162
|
}, []);
|
|
15122
15163
|
// 计算点到线段的垂足坐标(使用通用工具函数)
|
|
@@ -15217,12 +15258,13 @@ const TextElement = ({ x, y, fontSize = 30, fill = '#fff', text, background = 'r
|
|
|
15217
15258
|
* @param point2 第二个点 [x, y]
|
|
15218
15259
|
* @returns 距离(mi单位)
|
|
15219
15260
|
*/
|
|
15220
|
-
const calculatePhysicalDistance$1 = (point1, point2) => {
|
|
15261
|
+
const calculatePhysicalDistance$1 = (point1, point2, unit) => {
|
|
15221
15262
|
const dx = point2[0] - point1[0];
|
|
15222
15263
|
const dy = point2[1] - point1[1];
|
|
15223
15264
|
const svgDistance = Math.sqrt(dx * dx + dy * dy);
|
|
15224
15265
|
const physicalDistance = svgDistance / 50; // SVG坐标是物理单位的50倍
|
|
15225
|
-
return physicalDistance.toFixed(2) + ' m';
|
|
15266
|
+
// return physicalDistance.toFixed(2) + ' m';
|
|
15267
|
+
return convertDistanceByUnits(physicalDistance, unit).value;
|
|
15226
15268
|
};
|
|
15227
15269
|
/**
|
|
15228
15270
|
* 计算两点间的中点坐标
|
|
@@ -15233,7 +15275,8 @@ const calculatePhysicalDistance$1 = (point1, point2) => {
|
|
|
15233
15275
|
const calculateMidpoint$1 = (point1, point2) => {
|
|
15234
15276
|
return [(point1[0] + point2[0]) / 2, (point1[1] + point2[1]) / 2];
|
|
15235
15277
|
};
|
|
15236
|
-
const DistanceLabels = ({ coordinates, createMode = false, editMode = false, completed = false, showPoints = false, mousePos: _mousePos = null, ghostLastDistance = null, ghostLastMidpoint = null, ghostFirstDistance = null, ghostFirstMidpoint = null, fontSize = 30, showFirstDistance = true, }) => {
|
|
15278
|
+
const DistanceLabels = ({ coordinates, createMode = false, editMode = false, completed = false, showPoints = false, mousePos: _mousePos = null, ghostLastDistance = null, ghostLastMidpoint = null, ghostFirstDistance = null, ghostFirstMidpoint = null, fontSize = 30, showFirstDistance = true, unit = UnitsType.Metric, }) => {
|
|
15279
|
+
const { drag } = useCommonContext();
|
|
15237
15280
|
// 只在显示可操作顶点时显示距离
|
|
15238
15281
|
if (!((createMode && showPoints) || editMode || (createMode && completed)) ||
|
|
15239
15282
|
coordinates.length < (showFirstDistance ? 1 : 2)) {
|
|
@@ -15247,7 +15290,7 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
|
|
|
15247
15290
|
return null;
|
|
15248
15291
|
}
|
|
15249
15292
|
const midpoint = calculateMidpoint$1(coord, nextCoord);
|
|
15250
|
-
const distance = calculatePhysicalDistance$1(coord, nextCoord);
|
|
15293
|
+
const distance = calculatePhysicalDistance$1(coord, nextCoord, unit);
|
|
15251
15294
|
// 如果当前点和下一个点坐标一致则不现实,处理头尾点一样的问题
|
|
15252
15295
|
if (coord[0] === nextCoord[0] && coord[1] === nextCoord[1]) {
|
|
15253
15296
|
return null;
|
|
@@ -15259,23 +15302,32 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
|
|
|
15259
15302
|
WebkitUserSelect: 'none',
|
|
15260
15303
|
WebkitTouchCallout: 'none',
|
|
15261
15304
|
touchAction: 'none',
|
|
15305
|
+
transformBox: 'fill-box',
|
|
15306
|
+
transformOrigin: 'center',
|
|
15307
|
+
transform: `rotate(-${drag.rotation}deg)`,
|
|
15262
15308
|
}, text: distance }, `distance-${idx}`));
|
|
15263
15309
|
}), ghostLastDistance && ghostLastMidpoint && (jsxRuntime.jsx(TextElement, { fontSize: fontSize, x: ghostLastMidpoint[0], y: ghostLastMidpoint[1], text: ghostLastDistance, style: {
|
|
15264
15310
|
userSelect: 'none',
|
|
15265
15311
|
WebkitUserSelect: 'none',
|
|
15266
15312
|
WebkitTouchCallout: 'none',
|
|
15267
15313
|
touchAction: 'none',
|
|
15314
|
+
transformBox: 'fill-box',
|
|
15315
|
+
transformOrigin: 'center',
|
|
15316
|
+
transform: `rotate(-${drag.rotation}deg)`,
|
|
15268
15317
|
} })), ghostFirstDistance && ghostFirstMidpoint && (jsxRuntime.jsx(TextElement, { fontSize: fontSize, x: ghostFirstMidpoint[0], y: ghostFirstMidpoint[1], text: ghostFirstDistance, style: {
|
|
15269
15318
|
userSelect: 'none',
|
|
15270
15319
|
WebkitUserSelect: 'none',
|
|
15271
15320
|
WebkitTouchCallout: 'none',
|
|
15272
15321
|
touchAction: 'none',
|
|
15322
|
+
transformBox: 'fill-box',
|
|
15323
|
+
transformOrigin: 'center',
|
|
15324
|
+
transform: `rotate(-${drag.rotation}deg)`,
|
|
15273
15325
|
} }))] }));
|
|
15274
15326
|
};
|
|
15275
15327
|
|
|
15276
|
-
var css_248z$
|
|
15277
|
-
var styles$
|
|
15278
|
-
styleInject(css_248z$
|
|
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-module_createVertex__ldz2E {\n cursor: crosshair;\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
|
+
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
|
+
styleInject(css_248z$5);
|
|
15279
15331
|
|
|
15280
15332
|
exports.CreateStatus = void 0;
|
|
15281
15333
|
(function (CreateStatus) {
|
|
@@ -15299,11 +15351,15 @@ exports.MobileEditMode = void 0;
|
|
|
15299
15351
|
MobileEditMode[MobileEditMode["EDIT"] = 1] = "EDIT";
|
|
15300
15352
|
MobileEditMode[MobileEditMode["CREATE"] = 2] = "CREATE";
|
|
15301
15353
|
})(exports.MobileEditMode || (exports.MobileEditMode = {}));
|
|
15302
|
-
|
|
15354
|
+
exports.ClickEventType = void 0;
|
|
15303
15355
|
(function (ClickEventType) {
|
|
15304
15356
|
// 点击doodle的active time的时候触发
|
|
15305
15357
|
ClickEventType["DOODLE_ACTIVE_TIME"] = "doodleActiveTime";
|
|
15306
|
-
|
|
15358
|
+
// 移动禁区点之后报错
|
|
15359
|
+
ClickEventType["MOVE_OBSTACLE_POINT_ERROR"] = "moveObstaclePointError";
|
|
15360
|
+
// 拖拽地图
|
|
15361
|
+
ClickEventType["DRAG_MAP"] = "dragMap";
|
|
15362
|
+
})(exports.ClickEventType || (exports.ClickEventType = {}));
|
|
15307
15363
|
const INIT_EDIT_MAP_INFO = {
|
|
15308
15364
|
editMap: false,
|
|
15309
15365
|
selectElement: null,
|
|
@@ -15566,17 +15622,24 @@ function coordinatesToPoints$1(coordinates) {
|
|
|
15566
15622
|
|
|
15567
15623
|
const useCheckElement = () => {
|
|
15568
15624
|
const { editMapInfo, minDistance } = useMapEditContext();
|
|
15569
|
-
const { platform } = useCommonContext();
|
|
15570
15625
|
const { svgElementDatas } = useSvgEditContext();
|
|
15571
15626
|
const checkDoodle = React.useCallback(() => {
|
|
15572
15627
|
console.log('checkdoodle', editMapInfo, svgElementDatas);
|
|
15573
15628
|
if (!editMapInfo.selectElement || editMapInfo.selectElement.type !== exports.DataType.DOODLE) {
|
|
15574
|
-
return {
|
|
15629
|
+
return {
|
|
15630
|
+
isValid: false,
|
|
15631
|
+
reason: 'No doodle element selected',
|
|
15632
|
+
code: exports.CheckDoodleErrorType.NO_DOODLE_SELECTED,
|
|
15633
|
+
};
|
|
15575
15634
|
}
|
|
15576
15635
|
const doodleElement = editMapInfo.selectElement;
|
|
15577
15636
|
const doodlePoints = transformSvgElements(doodleElement).flat();
|
|
15578
15637
|
if (doodlePoints.length === 0) {
|
|
15579
|
-
return {
|
|
15638
|
+
return {
|
|
15639
|
+
isValid: false,
|
|
15640
|
+
reason: 'Doodle has no transformed points',
|
|
15641
|
+
code: exports.CheckDoodleErrorType.NO_MOVABLE_POINTS,
|
|
15642
|
+
};
|
|
15580
15643
|
}
|
|
15581
15644
|
const boundary = svgElementDatas?.[exports.DataType.BOUNDARY] || [];
|
|
15582
15645
|
const obstacle = svgElementDatas?.[exports.DataType.OBSTACLE] || [];
|
|
@@ -15604,7 +15667,11 @@ const useCheckElement = () => {
|
|
|
15604
15667
|
}
|
|
15605
15668
|
}
|
|
15606
15669
|
if (!isInBoundary) {
|
|
15607
|
-
return {
|
|
15670
|
+
return {
|
|
15671
|
+
isValid: false,
|
|
15672
|
+
reason: 'Doodle 不在任何边界内',
|
|
15673
|
+
code: exports.CheckDoodleErrorType.DOODLE_NOT_IN_BOUNDARY,
|
|
15674
|
+
};
|
|
15608
15675
|
}
|
|
15609
15676
|
// 2. 检查 doodle 所有点距离 boundary 边界至少 2m
|
|
15610
15677
|
const boundaryPoints = coordinatesToPoints$1(containingBoundary.points);
|
|
@@ -15614,6 +15681,7 @@ const useCheckElement = () => {
|
|
|
15614
15681
|
return {
|
|
15615
15682
|
isValid: false,
|
|
15616
15683
|
reason: `Doodle 距离边界过近 (${distanceToBoundary.toFixed(2) / SCALE_FACTOR}m < ${minDistance / SCALE_FACTOR}m)`,
|
|
15684
|
+
code: exports.CheckDoodleErrorType.DOODLE_DISTANCE_TOO_CLOSE,
|
|
15617
15685
|
};
|
|
15618
15686
|
}
|
|
15619
15687
|
}
|
|
@@ -15644,6 +15712,7 @@ const useCheckElement = () => {
|
|
|
15644
15712
|
return {
|
|
15645
15713
|
isValid: false,
|
|
15646
15714
|
reason: `Doodle 与${elementTypeName}相交或重叠`,
|
|
15715
|
+
code: exports.CheckDoodleErrorType.DOODLE_INTERSECT,
|
|
15647
15716
|
};
|
|
15648
15717
|
}
|
|
15649
15718
|
// 检查距离是否大于 2m
|
|
@@ -15659,6 +15728,7 @@ const useCheckElement = () => {
|
|
|
15659
15728
|
return {
|
|
15660
15729
|
isValid: false,
|
|
15661
15730
|
reason: `Doodle 与${elementTypeName}距离过近 (${distance.toFixed(2) / SCALE_FACTOR}m < ${minDistance / SCALE_FACTOR}m)`,
|
|
15731
|
+
code: exports.CheckDoodleErrorType.DOODLE_DISTANCE_TOO_CLOSE_TO_OTHER_ELEMENT,
|
|
15662
15732
|
};
|
|
15663
15733
|
}
|
|
15664
15734
|
}
|
|
@@ -15669,7 +15739,7 @@ const useCheckElement = () => {
|
|
|
15669
15739
|
const checkCanNotCreateAtPosition = React.useCallback((checkPoint, checkPoints) => {
|
|
15670
15740
|
// console.log('editMapInfo.elementType--->', editMapInfo);
|
|
15671
15741
|
if (!editMapInfo.elementType)
|
|
15672
|
-
return false;
|
|
15742
|
+
return { result: false };
|
|
15673
15743
|
const currentPoints = editMapInfo?.selectElement?.points;
|
|
15674
15744
|
const points = checkPoints || currentPoints;
|
|
15675
15745
|
const firstPoint = coordinatesToPoints$1(points)?.[0] || checkPoint;
|
|
@@ -15686,12 +15756,20 @@ const useCheckElement = () => {
|
|
|
15686
15756
|
}
|
|
15687
15757
|
console.log('currentBoundary--->', currentBoundary, points);
|
|
15688
15758
|
if (!currentBoundary)
|
|
15689
|
-
return
|
|
15759
|
+
return {
|
|
15760
|
+
result: true,
|
|
15761
|
+
code: exports.CheckObstaclePointErrorType.BOUNDARY_NOT_IN_BOUNDARY,
|
|
15762
|
+
};
|
|
15690
15763
|
if (!isPointInPolygon(checkPoint, coordinatesToPoints$1(currentBoundary.points)))
|
|
15691
|
-
return
|
|
15764
|
+
return {
|
|
15765
|
+
result: true,
|
|
15766
|
+
code: exports.CheckObstaclePointErrorType.POINT_IN_OBSTACLE,
|
|
15767
|
+
};
|
|
15692
15768
|
// 如果不是创建 obstacle,则不需要进一步检查
|
|
15693
15769
|
if (editMapInfo.elementType !== exports.DataType.OBSTACLE)
|
|
15694
|
-
return
|
|
15770
|
+
return {
|
|
15771
|
+
result: false,
|
|
15772
|
+
};
|
|
15695
15773
|
// 获取当前正在创建的 obstacle 的点
|
|
15696
15774
|
const currentObstaclePoints = coordinatesToPoints$1(points) || [];
|
|
15697
15775
|
// 构建当前 obstacle 的多边形(包括检查点位置)
|
|
@@ -15712,7 +15790,10 @@ const useCheckElement = () => {
|
|
|
15712
15790
|
const obstaclePoints = coordinatesToPoints$1(obstacle.points);
|
|
15713
15791
|
if (doPolygonsIntersect(currentObstaclePolygon, obstaclePoints)) {
|
|
15714
15792
|
console.log('Obstacle intersection detected with:', obstacle);
|
|
15715
|
-
return
|
|
15793
|
+
return {
|
|
15794
|
+
result: true,
|
|
15795
|
+
code: exports.CheckObstaclePointErrorType.OBSTACLE_INTERSECT,
|
|
15796
|
+
};
|
|
15716
15797
|
}
|
|
15717
15798
|
}
|
|
15718
15799
|
// 3. 找到在 currentBoundary 内的 doodle 元素
|
|
@@ -15728,17 +15809,25 @@ const useCheckElement = () => {
|
|
|
15728
15809
|
// 检查相交
|
|
15729
15810
|
if (doPolygonsIntersect(currentObstaclePolygon, doodleTransformedPoints)) {
|
|
15730
15811
|
console.log('Obstacle-Doodle intersection detected with:', doodle);
|
|
15731
|
-
return
|
|
15812
|
+
return {
|
|
15813
|
+
result: true,
|
|
15814
|
+
code: exports.CheckObstaclePointErrorType.DOODLE_INTERSECT,
|
|
15815
|
+
};
|
|
15732
15816
|
}
|
|
15733
15817
|
// 检查距离
|
|
15734
15818
|
const distance = polygonToPolygonDistance(currentObstaclePolygon, doodleTransformedPoints);
|
|
15735
15819
|
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15736
15820
|
if (distance < minDistance) {
|
|
15737
15821
|
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15738
|
-
return
|
|
15822
|
+
return {
|
|
15823
|
+
result: true,
|
|
15824
|
+
code: exports.CheckObstaclePointErrorType.DOODLE_DISTANCE_TOO_CLOSE,
|
|
15825
|
+
};
|
|
15739
15826
|
}
|
|
15740
15827
|
}
|
|
15741
|
-
return
|
|
15828
|
+
return {
|
|
15829
|
+
result: false,
|
|
15830
|
+
};
|
|
15742
15831
|
}, [editMapInfo.selectElement, editMapInfo.elementType, svgElementDatas, minDistance]);
|
|
15743
15832
|
return {
|
|
15744
15833
|
checkDoodle,
|
|
@@ -15760,12 +15849,13 @@ const coordinatesToPoints = (coordinates) => {
|
|
|
15760
15849
|
* @param point2 第二个点 [x, y]
|
|
15761
15850
|
* @returns 距离(mi单位)
|
|
15762
15851
|
*/
|
|
15763
|
-
const calculatePhysicalDistance = (point1, point2) => {
|
|
15852
|
+
const calculatePhysicalDistance = (point1, point2, unit) => {
|
|
15764
15853
|
const dx = point2[0] - point1[0];
|
|
15765
15854
|
const dy = point2[1] - point1[1];
|
|
15766
15855
|
const svgDistance = Math.sqrt(dx * dx + dy * dy);
|
|
15767
15856
|
const physicalDistance = svgDistance / 50; // SVG坐标是物理单位的50倍
|
|
15768
|
-
return physicalDistance.toFixed(2) + ' m';
|
|
15857
|
+
// return physicalDistance.toFixed(2) + ' m';
|
|
15858
|
+
return convertDistanceByUnits(physicalDistance, unit).value;
|
|
15769
15859
|
};
|
|
15770
15860
|
/**
|
|
15771
15861
|
* 计算两点间的中点坐标
|
|
@@ -15836,7 +15926,8 @@ const createPathData = (points) => {
|
|
|
15836
15926
|
};
|
|
15837
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自动判断
|
|
15838
15928
|
}) => {
|
|
15839
|
-
const { overlayScale } = useCommonContext();
|
|
15929
|
+
const { overlayScale, unitType } = useCommonContext();
|
|
15930
|
+
const { onHandleEvent } = useMapEditContext();
|
|
15840
15931
|
const { svgRef } = useSvgEditContext();
|
|
15841
15932
|
const [dragState, setDragState] = React.useState({
|
|
15842
15933
|
isDragging: false,
|
|
@@ -16096,19 +16187,19 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16096
16187
|
return (checkCanNotCreateAtPosition?.({
|
|
16097
16188
|
x: dragState.currentPosition[0],
|
|
16098
16189
|
y: dragState.currentPosition[1],
|
|
16099
|
-
}) === true);
|
|
16190
|
+
}).result === true);
|
|
16100
16191
|
const prePoints = coordinates.slice(0, dragState.dragIndex);
|
|
16101
16192
|
const afterPoints = coordinates.slice(dragState.dragIndex + 1);
|
|
16102
16193
|
const checkPoints = [...prePoints, dragState.currentPosition, ...afterPoints];
|
|
16103
16194
|
return (checkCanNotCreateAtPosition?.({
|
|
16104
16195
|
x: dragState.currentPosition[0],
|
|
16105
16196
|
y: dragState.currentPosition[1],
|
|
16106
|
-
}, checkPoints) === true);
|
|
16197
|
+
}, checkPoints).result === true);
|
|
16107
16198
|
}, [dragState.currentPosition, checkCanNotCreateAtPosition, coordinates]);
|
|
16108
16199
|
const generateVertexClassName = React.useMemo(() => {
|
|
16109
16200
|
if (!dragState.isDragging)
|
|
16110
|
-
return styles$
|
|
16111
|
-
return showNotCreateCursor ? styles$
|
|
16201
|
+
return styles$5.vertex;
|
|
16202
|
+
return showNotCreateCursor ? styles$5.notCreate : styles$5.dragging;
|
|
16112
16203
|
}, [dragState.isDragging, showNotCreateCursor]);
|
|
16113
16204
|
// 使用 useRef 来存储 requestAnimationFrame ID
|
|
16114
16205
|
const rafIdRef = React.useRef(null);
|
|
@@ -16230,7 +16321,15 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16230
16321
|
? newCoordinates
|
|
16231
16322
|
: newCoordinates.reverse();
|
|
16232
16323
|
if (showNotCreateCursor) {
|
|
16233
|
-
|
|
16324
|
+
if (platform === exports.PlatformType.H5) {
|
|
16325
|
+
onHandleEvent?.(exports.ClickEventType.MOVE_OBSTACLE_POINT_ERROR, {
|
|
16326
|
+
result: true,
|
|
16327
|
+
code: exports.CheckObstaclePointErrorType.COMMON_ERROR,
|
|
16328
|
+
});
|
|
16329
|
+
}
|
|
16330
|
+
else {
|
|
16331
|
+
antd.message.error('Unable to place here, please select a valid spot');
|
|
16332
|
+
}
|
|
16234
16333
|
}
|
|
16235
16334
|
else {
|
|
16236
16335
|
onCoordinatesChange?.(result);
|
|
@@ -16302,7 +16401,12 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16302
16401
|
]);
|
|
16303
16402
|
// 获取当前渲染用的坐标
|
|
16304
16403
|
const renderCoordinates = getRenderCoordinates();
|
|
16305
|
-
const polygonPoints =
|
|
16404
|
+
const polygonPoints = React.useMemo(() => {
|
|
16405
|
+
const points = editMapInfo?.createMode === exports.CreateStatus.CREATING
|
|
16406
|
+
? [...renderCoordinates, mousePos ? [mousePos.x, mousePos.y] : []]
|
|
16407
|
+
: renderCoordinates;
|
|
16408
|
+
return coordinatesToPoints(points);
|
|
16409
|
+
}, [editMapInfo?.createMode, renderCoordinates, mousePos]);
|
|
16306
16410
|
// 按type分组坐标点 - 创建模式下不自动闭合
|
|
16307
16411
|
const pathSegments = groupCoordinatesByType(renderCoordinates, !createMode || completed);
|
|
16308
16412
|
const dashPaths = pathSegments.filter((segment) => segment.type === 1);
|
|
@@ -16315,13 +16419,10 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16315
16419
|
: null;
|
|
16316
16420
|
// 虚拟连线的距离计算
|
|
16317
16421
|
const ghostLastDistance = createMode && mousePos && renderCoordinates.length > 0 && !completed
|
|
16318
|
-
? calculatePhysicalDistance(renderCoordinates[renderCoordinates.length - 1], [
|
|
16319
|
-
mousePos.x,
|
|
16320
|
-
mousePos.y,
|
|
16321
|
-
])
|
|
16422
|
+
? calculatePhysicalDistance(renderCoordinates[renderCoordinates.length - 1], [mousePos.x, mousePos.y], unitType)
|
|
16322
16423
|
: null;
|
|
16323
16424
|
const ghostFirstDistance = createMode && mousePos && !completed && renderCoordinates.length >= 1
|
|
16324
|
-
? calculatePhysicalDistance(renderCoordinates[0], [mousePos.x, mousePos.y])
|
|
16425
|
+
? calculatePhysicalDistance(renderCoordinates[0], [mousePos.x, mousePos.y], unitType)
|
|
16325
16426
|
: null;
|
|
16326
16427
|
// 虚拟连线的中点坐标
|
|
16327
16428
|
const ghostLastMidpoint = createMode && mousePos && renderCoordinates.length > 0 && !completed
|
|
@@ -16377,25 +16478,25 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16377
16478
|
const prevIndex = (dragState.dragIndex - 1 + coordinates.length) % coordinates.length;
|
|
16378
16479
|
const nextIndex = (dragState.dragIndex + 1) % coordinates.length;
|
|
16379
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" }), 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" })] }));
|
|
16380
|
-
})()] })), renderCoordinates.length >= 3 && (jsxRuntime.jsx("polygon", { className: editMapInfo?.
|
|
16381
|
-
, onClick: onPolygonClick })), jsxRuntime.jsxs("g", { className: styles$
|
|
16481
|
+
})()] })), renderCoordinates.length >= 3 && (jsxRuntime.jsx("polygon", { className: editMapInfo?.createMode === exports.CreateStatus.CREATING ? '' : styles$5.polygonPathG, points: polygonPoints, fill: fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
|
|
16482
|
+
, onClick: onPolygonClick })), jsxRuntime.jsxs("g", { className: styles$5.polygonPathG, children: [renderCoordinates.length >= 2 &&
|
|
16382
16483
|
pathSegments.map((segment, index) => {
|
|
16383
16484
|
if (segment.points.length < 2)
|
|
16384
16485
|
return null;
|
|
16385
16486
|
const pathData = createPathData(segment.points);
|
|
16386
16487
|
const isDash = segment.type === 1;
|
|
16387
|
-
return (jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: styles$
|
|
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 }, index));
|
|
16388
16489
|
}), renderCoordinates.length >= 2 &&
|
|
16389
16490
|
dashPaths.map((segment, index) => {
|
|
16390
16491
|
if (segment.points.length < 2)
|
|
16391
16492
|
return null;
|
|
16392
|
-
return (jsxRuntime.jsx(DashPath, { className: styles$
|
|
16493
|
+
return (jsxRuntime.jsx(DashPath, { className: styles$5.polygonPath, points: segment.points, stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity }, index));
|
|
16393
16494
|
})] }), (editMode || (createMode && completed)) &&
|
|
16394
16495
|
renderCoordinates.length >= 2 &&
|
|
16395
16496
|
renderCoordinates.map((coord, index) => {
|
|
16396
16497
|
const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
|
|
16397
16498
|
const isDashPath = coord[2] === 1;
|
|
16398
|
-
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$
|
|
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: {
|
|
16399
16500
|
userSelect: 'none',
|
|
16400
16501
|
WebkitUserSelect: 'none',
|
|
16401
16502
|
WebkitTouchCallout: 'none',
|
|
@@ -16427,7 +16528,7 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16427
16528
|
setHoverVertex(null);
|
|
16428
16529
|
},
|
|
16429
16530
|
}) }, `edge-${index}`));
|
|
16430
|
-
}), 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 }), 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 }), 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)) &&
|
|
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)) &&
|
|
16431
16532
|
renderCoordinates.map((coord, idx) => {
|
|
16432
16533
|
// 判断当前顶点的状态
|
|
16433
16534
|
const isLastPoint = idx === renderCoordinates.length - 1;
|
|
@@ -16769,7 +16870,8 @@ const ObstacleElement = ({ data }) => {
|
|
|
16769
16870
|
if (platform === exports.PlatformType.H5 &&
|
|
16770
16871
|
editMapInfo?.selectElement?.id === data.id &&
|
|
16771
16872
|
editMapInfo.mobileMode === exports.MobileEditMode.START) {
|
|
16772
|
-
return dp2px((style.lineWidth ||
|
|
16873
|
+
return dp2px((style.lineWidth || 1) * 2);
|
|
16874
|
+
// return dp2px(((style.lineWidth as number) || 3) * 3);
|
|
16773
16875
|
}
|
|
16774
16876
|
return dp2px(style.lineWidth || 3);
|
|
16775
16877
|
}, [platform, style, editMapInfo]);
|
|
@@ -17229,15 +17331,15 @@ const useVisionOffTransform = (data, scaleConstraints
|
|
|
17229
17331
|
};
|
|
17230
17332
|
};
|
|
17231
17333
|
|
|
17232
|
-
var _g$
|
|
17233
|
-
function _extends$
|
|
17334
|
+
var _g$5, _defs$5;
|
|
17335
|
+
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); }
|
|
17234
17336
|
var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
17235
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17337
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
|
|
17236
17338
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17237
17339
|
width: 20,
|
|
17238
17340
|
height: 20,
|
|
17239
17341
|
fill: "none"
|
|
17240
|
-
}, props), _g$
|
|
17342
|
+
}, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17241
17343
|
clipPath: "url(#transform-delete_svg__a)"
|
|
17242
17344
|
}, /*#__PURE__*/React__namespace.createElement("circle", {
|
|
17243
17345
|
cx: 10,
|
|
@@ -17260,7 +17362,7 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
|
17260
17362
|
fill: "#fff",
|
|
17261
17363
|
rx: 0.8,
|
|
17262
17364
|
transform: "rotate(45 6.323 5.191)"
|
|
17263
|
-
}))), _defs$
|
|
17365
|
+
}))), _defs$5 || (_defs$5 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
17264
17366
|
id: "transform-delete_svg__b",
|
|
17265
17367
|
x1: 17.727,
|
|
17266
17368
|
x2: -1.215,
|
|
@@ -17280,15 +17382,15 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
|
17280
17382
|
})))));
|
|
17281
17383
|
};
|
|
17282
17384
|
|
|
17283
|
-
var _g$
|
|
17284
|
-
function _extends$
|
|
17385
|
+
var _g$4, _defs$4;
|
|
17386
|
+
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); }
|
|
17285
17387
|
var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
17286
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17388
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
|
|
17287
17389
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17288
17390
|
width: 21,
|
|
17289
17391
|
height: 20,
|
|
17290
17392
|
fill: "none"
|
|
17291
|
-
}, props), _g$
|
|
17393
|
+
}, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17292
17394
|
clipPath: "url(#transform-rotate_svg__a)"
|
|
17293
17395
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
17294
17396
|
fill: "url(#transform-rotate_svg__b)",
|
|
@@ -17296,7 +17398,7 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
|
17296
17398
|
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
17297
17399
|
fill: "#fff",
|
|
17298
17400
|
d: "M11.602 14.719a5.447 5.447 0 0 1-6.608-5.116l-.004-.205a.818.818 0 0 1 1.633-.084l.004.084.01.285a3.81 3.81 0 0 0 2.127 3.137l.26.115a3.8 3.8 0 0 0 2.227.184l.276-.071q.29-.088.561-.219l-1.147-.441a.817.817 0 0 1 .587-1.525l2.54.977a.817.817 0 0 1 .316 1.308l.001.001a5.45 5.45 0 0 1-2.783 1.57M8.623 4.548a5.447 5.447 0 0 1 6.608 5.116l.004.204a.818.818 0 0 1-1.633.084l-.004-.084-.01-.284a3.81 3.81 0 0 0-2.127-3.138l-.26-.115a3.8 3.8 0 0 0-2.227-.184l-.276.072q-.29.087-.561.218l1.147.442a.817.817 0 0 1-.586 1.524l-2.542-.976a.817.817 0 0 1-.315-1.309 5.45 5.45 0 0 1 2.782-1.57"
|
|
17299
|
-
}))), _defs$
|
|
17401
|
+
}))), _defs$4 || (_defs$4 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
17300
17402
|
id: "transform-rotate_svg__b",
|
|
17301
17403
|
x1: 17.84,
|
|
17302
17404
|
x2: -1.103,
|
|
@@ -17316,15 +17418,15 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
|
17316
17418
|
})))));
|
|
17317
17419
|
};
|
|
17318
17420
|
|
|
17319
|
-
var _g$
|
|
17320
|
-
function _extends$
|
|
17421
|
+
var _g$3, _defs$3;
|
|
17422
|
+
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); }
|
|
17321
17423
|
var SvgTransformScale = function SvgTransformScale(props) {
|
|
17322
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17424
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
|
|
17323
17425
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17324
17426
|
width: 21,
|
|
17325
17427
|
height: 20,
|
|
17326
17428
|
fill: "none"
|
|
17327
|
-
}, props), _g$
|
|
17429
|
+
}, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17328
17430
|
clipPath: "url(#transform-scale_svg__a)"
|
|
17329
17431
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
17330
17432
|
fill: "url(#transform-scale_svg__b)",
|
|
@@ -17332,7 +17434,7 @@ var SvgTransformScale = function SvgTransformScale(props) {
|
|
|
17332
17434
|
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
17333
17435
|
fill: "#fff",
|
|
17334
17436
|
d: "M5.078 8.265a.8.8 0 0 0 1.6.001v-.544l5.69 5.69h-.494a.8.8 0 0 0 0 1.6l2.474-.002a.8.8 0 0 0 .311-.062.8.8 0 0 0 .49-.738v-2.474a.8.8 0 1 0-1.6 0v.594L7.81 6.59h.544a.8.8 0 0 0 0-1.6H5.879a.8.8 0 0 0-.8.8z"
|
|
17335
|
-
}))), _defs$
|
|
17437
|
+
}))), _defs$3 || (_defs$3 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
17336
17438
|
id: "transform-scale_svg__b",
|
|
17337
17439
|
x1: 17.84,
|
|
17338
17440
|
x2: -1.103,
|
|
@@ -17352,15 +17454,15 @@ var SvgTransformScale = function SvgTransformScale(props) {
|
|
|
17352
17454
|
})))));
|
|
17353
17455
|
};
|
|
17354
17456
|
|
|
17355
|
-
var _g, _defs;
|
|
17356
|
-
function _extends$
|
|
17457
|
+
var _g$2, _defs$2;
|
|
17458
|
+
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); }
|
|
17357
17459
|
var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
17358
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17460
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
|
|
17359
17461
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17360
17462
|
width: 20,
|
|
17361
17463
|
height: 20,
|
|
17362
17464
|
fill: "none"
|
|
17363
|
-
}, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17465
|
+
}, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17364
17466
|
clipPath: "url(#transform-translate_svg__a)"
|
|
17365
17467
|
}, /*#__PURE__*/React__namespace.createElement("circle", {
|
|
17366
17468
|
cx: 10,
|
|
@@ -17370,7 +17472,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
|
17370
17472
|
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
17371
17473
|
fill: "#fff",
|
|
17372
17474
|
d: "M16.18 10.758a.8.8 0 0 0-.105-1.218l-1.66-1.66a.801.801 0 0 0-1.132 1.132l.383.381h-2.96V6.418l.385.386a.8.8 0 1 0 1.131-1.13l-1.75-1.75a.8.8 0 0 0-1.222.11L7.594 5.689a.8.8 0 0 0 1.131 1.13l.381-.38v2.954H6.137l.381-.38a.8.8 0 1 0-1.13-1.132l-1.752 1.75a.8.8 0 0 0 .106 1.22l1.66 1.66a.801.801 0 0 0 1.132-1.133l-.386-.385h2.958v2.972l-.38-.38a.8.8 0 0 0-1.132 1.131l1.751 1.75a.8.8 0 0 0 1.223-.11l1.654-1.655a.8.8 0 1 0-1.13-1.131l-.386.386v-2.963h2.978l-.385.384a.8.8 0 1 0 1.131 1.131z"
|
|
17373
|
-
}))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
17475
|
+
}))), _defs$2 || (_defs$2 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
17374
17476
|
id: "transform-translate_svg__b",
|
|
17375
17477
|
x1: 17.727,
|
|
17376
17478
|
x2: -1.215,
|
|
@@ -17392,7 +17494,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
|
17392
17494
|
|
|
17393
17495
|
const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCancel, onDragEnd, onDragMove, disabled = false, className = '', scaleConstraints = { minEdgeLength: 0.5, maxEdgeLength: 10000 }, showInfo = true, }) => {
|
|
17394
17496
|
const { overlayScale } = useCommonContext();
|
|
17395
|
-
const { platform } = useCommonContext();
|
|
17497
|
+
const { platform, unitType } = useCommonContext();
|
|
17396
17498
|
const { editMapInfo } = useMapEditContext();
|
|
17397
17499
|
const dataPoints = React.useMemo(() => {
|
|
17398
17500
|
return {
|
|
@@ -17416,10 +17518,10 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17416
17518
|
if (platform === exports.PlatformType.H5) {
|
|
17417
17519
|
if (editMapInfo?.mobileMode === exports.MobileEditMode.START &&
|
|
17418
17520
|
editMapInfo?.selectElement?.id === data.id) {
|
|
17419
|
-
return dp2px((style.lineWidth ||
|
|
17521
|
+
return dp2px((style.lineWidth || 1) * 2);
|
|
17420
17522
|
}
|
|
17421
17523
|
}
|
|
17422
|
-
return dp2px(style.lineWidth ||
|
|
17524
|
+
return dp2px(style.lineWidth || 1);
|
|
17423
17525
|
}, [style, platform, editMapInfo, data]);
|
|
17424
17526
|
// 初始化 - 无论是否选中都要初始化点坐标
|
|
17425
17527
|
React.useEffect(() => {
|
|
@@ -17587,7 +17689,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17587
17689
|
color: 'white',
|
|
17588
17690
|
fontWeight: '400',
|
|
17589
17691
|
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
17590
|
-
}, children: [dimensions.height, "
|
|
17692
|
+
}, children: [convertDistanceByUnits(dimensions.height, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.width, unitType).value] }) }))] }));
|
|
17591
17693
|
})()] }));
|
|
17592
17694
|
};
|
|
17593
17695
|
|
|
@@ -18048,15 +18150,15 @@ const useDoodleTransform = (data, onTransformChange, options) => {
|
|
|
18048
18150
|
};
|
|
18049
18151
|
};
|
|
18050
18152
|
|
|
18051
|
-
var _path$
|
|
18052
|
-
function _extends$
|
|
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); }
|
|
18053
18155
|
var SvgTransformArrow = function SvgTransformArrow(props) {
|
|
18054
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
18156
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
18055
18157
|
xmlns: "http://www.w3.org/2000/svg",
|
|
18056
18158
|
width: 7,
|
|
18057
18159
|
height: 11,
|
|
18058
18160
|
fill: "none"
|
|
18059
|
-
}, props), _path$
|
|
18161
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
18060
18162
|
fill: "#fff",
|
|
18061
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",
|
|
18062
18164
|
opacity: 0.5
|
|
@@ -18118,7 +18220,7 @@ const DoodleTransform = ({ data, isSelected: _isSelected, onSelect }) => {
|
|
|
18118
18220
|
};
|
|
18119
18221
|
|
|
18120
18222
|
const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, onClickInfo, }) => {
|
|
18121
|
-
const { platform, overlayScale } = useCommonContext();
|
|
18223
|
+
const { platform, overlayScale, unitType } = useCommonContext();
|
|
18122
18224
|
// 使用自定义hook管理所有变换逻辑
|
|
18123
18225
|
const { currentCenter, currentScale, currentDirection, isDragging, isRotating, isScaling, initializeTransform, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, dimensions, } = useDoodleTransform(data, onTransformChange, {
|
|
18124
18226
|
minScale,
|
|
@@ -18382,7 +18484,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18382
18484
|
color: 'white',
|
|
18383
18485
|
fontWeight: '400',
|
|
18384
18486
|
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
18385
|
-
}, children: [jsxRuntime.jsxs("div", { children: [dimensions.width, "
|
|
18487
|
+
}, children: [jsxRuntime.jsxs("div", { children: [convertDistanceByUnits(dimensions.width, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.height, unitType).value] }), jsxRuntime.jsxs("div", { style: {
|
|
18386
18488
|
display: 'flex',
|
|
18387
18489
|
alignItems: 'center',
|
|
18388
18490
|
justifyContent: 'center',
|
|
@@ -18501,7 +18603,7 @@ const DoodleElement = ({ data }) => {
|
|
|
18501
18603
|
}));
|
|
18502
18604
|
}, []);
|
|
18503
18605
|
const handleClickInfo = React.useCallback(() => {
|
|
18504
|
-
onHandleEvent?.(ClickEventType.DOODLE_ACTIVE_TIME);
|
|
18606
|
+
onHandleEvent?.(exports.ClickEventType.DOODLE_ACTIVE_TIME);
|
|
18505
18607
|
}, [onHandleEvent]);
|
|
18506
18608
|
// const handleDragMove = useCallback(
|
|
18507
18609
|
// (data: DoodleData) => {
|
|
@@ -18575,9 +18677,9 @@ const GElement = ({ type, children }) => {
|
|
|
18575
18677
|
return jsxRuntime.jsx("g", { id: `layer-${type}`, children: children }, type);
|
|
18576
18678
|
};
|
|
18577
18679
|
|
|
18578
|
-
var css_248z$
|
|
18579
|
-
var styles$
|
|
18580
|
-
styleInject(css_248z$
|
|
18680
|
+
var css_248z$4 = ".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}\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}";
|
|
18681
|
+
var styles$4 = {"mapEdit":"index-module_mapEdit__XC5Gw","createMode":"index-module_createMode__14EPH","notCreateCursor":"index-module_notCreateCursor__1-OjF"};
|
|
18682
|
+
styleInject(css_248z$4);
|
|
18581
18683
|
|
|
18582
18684
|
var classnames = {exports: {}};
|
|
18583
18685
|
|
|
@@ -19600,7 +19702,7 @@ function usePolygonDrawing(options = {}) {
|
|
|
19600
19702
|
const p = getSvgPoint(svgEl, e.clientX, e.clientY);
|
|
19601
19703
|
if (!p)
|
|
19602
19704
|
return;
|
|
19603
|
-
if (checkCanNotCreateAtPosition(p)) {
|
|
19705
|
+
if (checkCanNotCreateAtPosition(p)?.result) {
|
|
19604
19706
|
antd.message.error('Unable to place here, please select a valid spot');
|
|
19605
19707
|
return;
|
|
19606
19708
|
}
|
|
@@ -19774,24 +19876,38 @@ const CreateObstacleElement = React.forwardRef(({ enabled = false, svgElement, o
|
|
|
19774
19876
|
const addPoint = React.useCallback(() => {
|
|
19775
19877
|
if (!enabled || !svgElement) {
|
|
19776
19878
|
console.warn('未启用创建模式或SVG元素不存在');
|
|
19777
|
-
return {
|
|
19879
|
+
return {
|
|
19880
|
+
isValid: false,
|
|
19881
|
+
reason: '未启用创建模式或SVG元素不存在',
|
|
19882
|
+
code: exports.CheckObstaclePointErrorType.COMMON_ERROR,
|
|
19883
|
+
};
|
|
19778
19884
|
}
|
|
19779
19885
|
if (!mapRef) {
|
|
19780
19886
|
console.warn('地图实例不存在');
|
|
19781
|
-
return {
|
|
19887
|
+
return {
|
|
19888
|
+
isValid: false,
|
|
19889
|
+
reason: '地图实例不存在',
|
|
19890
|
+
code: exports.CheckObstaclePointErrorType.MAP_NOT_EXIST,
|
|
19891
|
+
};
|
|
19782
19892
|
}
|
|
19783
19893
|
const centerPoint = getScreenCenterSvgPoint(svgElement, mapRef);
|
|
19784
19894
|
if (!centerPoint) {
|
|
19785
19895
|
console.warn('无法获取屏幕中心点的SVG坐标或点不在SVG可见区域内');
|
|
19786
|
-
return {
|
|
19896
|
+
return {
|
|
19897
|
+
isValid: false,
|
|
19898
|
+
reason: '无法获取屏幕中心点的SVG坐标或点不在SVG可见区域内',
|
|
19899
|
+
code: exports.CheckObstaclePointErrorType.GET_POINT_FAILED,
|
|
19900
|
+
};
|
|
19787
19901
|
}
|
|
19788
19902
|
console.error('centerPoint--->', centerPoint);
|
|
19789
|
-
console.error('checkCanNotCreateAtPosition--->', checkCanNotCreateAtPosition(centerPoint));
|
|
19903
|
+
console.error('checkCanNotCreateAtPosition--->', checkCanNotCreateAtPosition(centerPoint).result);
|
|
19790
19904
|
// 校验是否能打点
|
|
19791
|
-
|
|
19905
|
+
const checkResult = checkCanNotCreateAtPosition(centerPoint);
|
|
19906
|
+
if (checkResult.result) {
|
|
19792
19907
|
return {
|
|
19793
19908
|
isValid: false,
|
|
19794
|
-
reason: '
|
|
19909
|
+
reason: '',
|
|
19910
|
+
code: checkResult.code || exports.CheckObstaclePointErrorType.COMMON_ERROR,
|
|
19795
19911
|
};
|
|
19796
19912
|
}
|
|
19797
19913
|
const newPoints = [...points, centerPoint];
|
|
@@ -19832,7 +19948,7 @@ const CreateObstacleElement = React.forwardRef(({ enabled = false, svgElement, o
|
|
|
19832
19948
|
if (!enabled || points.length === 0) {
|
|
19833
19949
|
return null;
|
|
19834
19950
|
}
|
|
19835
|
-
return (jsxRuntime.jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth:
|
|
19951
|
+
return (jsxRuntime.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 }));
|
|
19836
19952
|
});
|
|
19837
19953
|
CreateObstacleElement.displayName = 'CreateObstacleElement';
|
|
19838
19954
|
|
|
@@ -20127,11 +20243,11 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
|
|
|
20127
20243
|
const showNotCreateCursor = React.useMemo(() => {
|
|
20128
20244
|
if (!mousePos)
|
|
20129
20245
|
return false;
|
|
20130
|
-
return checkCanNotCreateAtPosition(mousePos);
|
|
20246
|
+
return checkCanNotCreateAtPosition(mousePos)?.result ?? false;
|
|
20131
20247
|
}, [mousePos, checkCanNotCreateAtPosition]);
|
|
20132
|
-
return (jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$
|
|
20133
|
-
[styles$
|
|
20134
|
-
[styles$
|
|
20248
|
+
return (jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$4.mapEdit, {
|
|
20249
|
+
[styles$4.createMode]: isCreating,
|
|
20250
|
+
[styles$4.notCreateCursor]: showNotCreateCursor,
|
|
20135
20251
|
}), style: {
|
|
20136
20252
|
display: editMap ? 'block' : 'none',
|
|
20137
20253
|
}, children: jsxRuntime.jsxs("svg", { style: {
|
|
@@ -20229,15 +20345,15 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
|
|
|
20229
20345
|
});
|
|
20230
20346
|
SvgEditMap.displayName = 'SvgEditMap';
|
|
20231
20347
|
|
|
20232
|
-
var _path;
|
|
20233
|
-
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); }
|
|
20348
|
+
var _path$3;
|
|
20349
|
+
function _extends$5() { return _extends$5 = 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$5.apply(null, arguments); }
|
|
20234
20350
|
var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
|
|
20235
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
20351
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
20236
20352
|
xmlns: "http://www.w3.org/2000/svg",
|
|
20237
20353
|
width: 36,
|
|
20238
20354
|
height: 36,
|
|
20239
20355
|
fill: "none"
|
|
20240
|
-
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20356
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20241
20357
|
stroke: "#fff",
|
|
20242
20358
|
strokeLinecap: "round",
|
|
20243
20359
|
strokeLinejoin: "round",
|
|
@@ -20246,9 +20362,9 @@ var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
|
|
|
20246
20362
|
})));
|
|
20247
20363
|
};
|
|
20248
20364
|
|
|
20249
|
-
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}";
|
|
20250
|
-
var styles = {"crosshair":"index-module_crosshair__etey6"};
|
|
20251
|
-
styleInject(css_248z);
|
|
20365
|
+
var css_248z$3 = ".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}";
|
|
20366
|
+
var styles$3 = {"crosshair":"index-module_crosshair__etey6"};
|
|
20367
|
+
styleInject(css_248z$3);
|
|
20252
20368
|
|
|
20253
20369
|
/**
|
|
20254
20370
|
* 十字准心组件
|
|
@@ -20265,7 +20381,460 @@ const Crosshair = () => {
|
|
|
20265
20381
|
}
|
|
20266
20382
|
return false;
|
|
20267
20383
|
}, [platform, editMapInfo]);
|
|
20268
|
-
return isVisible ? (jsxRuntime.jsx("div", { className: styles.crosshair, children: jsxRuntime.jsx(SvgMobileAddPoint, {}) })) : null;
|
|
20384
|
+
return isVisible ? (jsxRuntime.jsx("div", { className: styles$3.crosshair, children: jsxRuntime.jsx(SvgMobileAddPoint, {}) })) : null;
|
|
20385
|
+
};
|
|
20386
|
+
|
|
20387
|
+
var css_248z$2 = ".index-module_addEntry__QsQHD {\n position: absolute;\n right: 8px;\n top: 8px;\n cursor: pointer;\n z-index: 10;\n}\n.index-module_addEntry__QsQHD .index-module_icon__qIgA4 {\n padding: 6px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.2);\n}\n\n.index-module_addItem__mglwZ {\n display: flex;\n align-items: center;\n padding: 4px;\n justify-content: flex-start;\n cursor: pointer;\n}\n.index-module_addItem__mglwZ:hover {\n box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);\n border-radius: 4px;\n}\n.index-module_addItem__mglwZ:not(:last-child) {\n margin-bottom: 6px;\n}\n.index-module_addItem__mglwZ .index-module_icon__qIgA4 {\n width: 16px;\n height: 16px;\n}\n.index-module_addItem__mglwZ .index-module_label__QqZ-9 {\n font-weight: 500;\n font-size: 14px;\n line-height: 16px;\n color: rgb(158, 158, 158);\n margin-left: 4px;\n}";
|
|
20388
|
+
var styles$2 = {"addEntry":"index-module_addEntry__QsQHD","icon":"index-module_icon__qIgA4","addItem":"index-module_addItem__mglwZ","label":"index-module_label__QqZ-9"};
|
|
20389
|
+
styleInject(css_248z$2);
|
|
20390
|
+
|
|
20391
|
+
var _rect$2, _path$2, _defs$1;
|
|
20392
|
+
function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
|
|
20393
|
+
var SvgAddEntry = function SvgAddEntry(props) {
|
|
20394
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
|
|
20395
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20396
|
+
width: 24,
|
|
20397
|
+
height: 24,
|
|
20398
|
+
fill: "none"
|
|
20399
|
+
}, props), _rect$2 || (_rect$2 = /*#__PURE__*/React__namespace.createElement("rect", {
|
|
20400
|
+
width: 10.95,
|
|
20401
|
+
height: 10.95,
|
|
20402
|
+
x: 10.613,
|
|
20403
|
+
y: 3.15,
|
|
20404
|
+
fill: "#1F1F1F",
|
|
20405
|
+
stroke: "url(#add-entry_svg__a)",
|
|
20406
|
+
strokeWidth: 0.3,
|
|
20407
|
+
opacity: 0.795,
|
|
20408
|
+
rx: 1.05
|
|
20409
|
+
})), /*#__PURE__*/React__namespace.createElement("foreignObject", {
|
|
20410
|
+
width: 23.468,
|
|
20411
|
+
height: 20.501,
|
|
20412
|
+
x: -1.543,
|
|
20413
|
+
y: 3.499
|
|
20414
|
+
}, /*#__PURE__*/React__namespace.createElement("div", {
|
|
20415
|
+
xmlns: "http://www.w3.org/1999/xhtml",
|
|
20416
|
+
style: {
|
|
20417
|
+
backdropFilter: "blur(1.63px)",
|
|
20418
|
+
clipPath: "url(#add-entry_svg__b)",
|
|
20419
|
+
height: "100%",
|
|
20420
|
+
width: "100%"
|
|
20421
|
+
}
|
|
20422
|
+
})), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20423
|
+
fill: "#1F1F1F",
|
|
20424
|
+
stroke: "url(#add-entry_svg__c)",
|
|
20425
|
+
strokeWidth: 0.3,
|
|
20426
|
+
d: "M9.302 7.402a1.05 1.05 0 0 1 1.778 0l7.27 11.578a1.05 1.05 0 0 1-.89 1.608H2.92a1.05 1.05 0 0 1-.889-1.608z",
|
|
20427
|
+
"data-figma-bg-blur-radius": 3.262
|
|
20428
|
+
})), _defs$1 || (_defs$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
20429
|
+
id: "add-entry_svg__a",
|
|
20430
|
+
x1: 16.851,
|
|
20431
|
+
x2: 20.384,
|
|
20432
|
+
y1: 10.392,
|
|
20433
|
+
y2: 4.767,
|
|
20434
|
+
gradientUnits: "userSpaceOnUse"
|
|
20435
|
+
}, /*#__PURE__*/React__namespace.createElement("stop", {
|
|
20436
|
+
stopColor: "#fff",
|
|
20437
|
+
stopOpacity: 0.01
|
|
20438
|
+
}), /*#__PURE__*/React__namespace.createElement("stop", {
|
|
20439
|
+
offset: 1,
|
|
20440
|
+
stopColor: "#fff"
|
|
20441
|
+
})), /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
20442
|
+
id: "add-entry_svg__c",
|
|
20443
|
+
x1: 21.47,
|
|
20444
|
+
x2: 12.314,
|
|
20445
|
+
y1: 15.036,
|
|
20446
|
+
y2: 5.769,
|
|
20447
|
+
gradientUnits: "userSpaceOnUse"
|
|
20448
|
+
}, /*#__PURE__*/React__namespace.createElement("stop", {
|
|
20449
|
+
stopColor: "#fff",
|
|
20450
|
+
stopOpacity: 0.01
|
|
20451
|
+
}), /*#__PURE__*/React__namespace.createElement("stop", {
|
|
20452
|
+
offset: 1,
|
|
20453
|
+
stopColor: "#fff"
|
|
20454
|
+
})), /*#__PURE__*/React__namespace.createElement("clipPath", {
|
|
20455
|
+
id: "add-entry_svg__b",
|
|
20456
|
+
transform: "translate(1.543 -3.499)"
|
|
20457
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
20458
|
+
d: "M9.302 7.402a1.05 1.05 0 0 1 1.778 0l7.27 11.578a1.05 1.05 0 0 1-.89 1.608H2.92a1.05 1.05 0 0 1-.889-1.608z"
|
|
20459
|
+
})))));
|
|
20460
|
+
};
|
|
20461
|
+
|
|
20462
|
+
var _path$1, _path2$1, _path3;
|
|
20463
|
+
function _extends$3() { return _extends$3 = 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$3.apply(null, arguments); }
|
|
20464
|
+
var SvgBoundary = function SvgBoundary(props) {
|
|
20465
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
|
|
20466
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20467
|
+
width: 16,
|
|
20468
|
+
height: 16,
|
|
20469
|
+
fill: "none"
|
|
20470
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20471
|
+
fill: "#1DBEAC",
|
|
20472
|
+
fillRule: "evenodd",
|
|
20473
|
+
d: "M3.385 2h9.23C13.38 2 14 2.62 14 3.385v9.23C14 13.38 13.38 14 12.615 14h-9.23C2.62 14 2 13.38 2 12.615v-9.23C2 2.62 2.62 2 3.385 2m9.692 1.385a.46.46 0 0 0-.462-.462h-9.23a.46.46 0 0 0-.462.462v9.23c0 .255.207.462.462.462h9.23a.46.46 0 0 0 .462-.462z",
|
|
20474
|
+
clipRule: "evenodd",
|
|
20475
|
+
opacity: 0.602
|
|
20476
|
+
})), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20477
|
+
fill: "#1DBEAC",
|
|
20478
|
+
d: "M12.615 2.923c.255 0 .462.207.462.462v9.23a.46.46 0 0 1-.462.462h-9.23a.46.46 0 0 1-.462-.462v-9.23c0-.255.207-.462.462-.462z",
|
|
20479
|
+
opacity: 0.152
|
|
20480
|
+
})), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20481
|
+
fill: "#1DBEAC",
|
|
20482
|
+
fillRule: "evenodd",
|
|
20483
|
+
d: "M2.833 2a.833.833 0 1 0 0 1.667.833.833 0 0 0 0-1.667m0 10.333a.833.833 0 1 0 0 1.667.833.833 0 0 0 0-1.667m9.5-9.5a.833.833 0 1 1 1.667 0 .833.833 0 0 1-1.667 0m.834 9.5a.833.833 0 1 0 0 1.667.833.833 0 0 0 0-1.667M6.49 10.333s.335-4.388 3.451-5.666c-1.725 2.439-1.725 5.666-1.725 5.666zm2.305 0s.548-4.108 2.872-4.816c-1.071 1.7-1.071 4.816-1.071 4.816zM6.87 5.517c-2.384 1.42-2.537 4.816-2.537 4.816h1.582s-.21-2.698.955-4.816",
|
|
20484
|
+
clipRule: "evenodd"
|
|
20485
|
+
})));
|
|
20486
|
+
};
|
|
20487
|
+
|
|
20488
|
+
var _path, _path2, _rect$1, _rect2$1;
|
|
20489
|
+
function _extends$2() { return _extends$2 = 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$2.apply(null, arguments); }
|
|
20490
|
+
var SvgLimitIsland = function SvgLimitIsland(props) {
|
|
20491
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
20492
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20493
|
+
width: 16,
|
|
20494
|
+
height: 16,
|
|
20495
|
+
fill: "none"
|
|
20496
|
+
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20497
|
+
fill: "#FFA077",
|
|
20498
|
+
d: "M11.725 6.714c-1.019-.137-2.516-1.488-1.9-2.14.588-.621 1.91.344 1.9 2.14"
|
|
20499
|
+
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20500
|
+
fill: "#FF5D17",
|
|
20501
|
+
d: "M11.195 3.637c-.863.109-.623 2.341.354 3.024 1.603.79 2.575-.099 2.517-.459-.072-.445-.983-1.014-2.029-.274.455-.92-.08-2.387-.842-2.291M10.004 9.084l.308.87c1.202.178 2.002.494 2.002.856 0 .556-1.887 1.007-4.215 1.007-2.329 0-4.216-.451-4.217-1.007 0-.334.683-.63 1.733-.812l.593-1.679zm-.777-2.197.518 1.463-3.312-.667.443-1.253zM7.467 4.76a.535.535 0 0 1 1.01 0l.493 1.398L7.1 5.794z"
|
|
20502
|
+
})), _rect$1 || (_rect$1 = /*#__PURE__*/React__namespace.createElement("rect", {
|
|
20503
|
+
width: 14.237,
|
|
20504
|
+
height: 10.667,
|
|
20505
|
+
x: 0.882,
|
|
20506
|
+
y: 2.667,
|
|
20507
|
+
fill: "#F50",
|
|
20508
|
+
opacity: 0.15,
|
|
20509
|
+
rx: 2
|
|
20510
|
+
})), _rect2$1 || (_rect2$1 = /*#__PURE__*/React__namespace.createElement("rect", {
|
|
20511
|
+
width: 14.237,
|
|
20512
|
+
height: 10.667,
|
|
20513
|
+
x: 0.882,
|
|
20514
|
+
y: 2.667,
|
|
20515
|
+
stroke: "#FF5D17",
|
|
20516
|
+
strokeWidth: 0.867,
|
|
20517
|
+
rx: 2
|
|
20518
|
+
})));
|
|
20519
|
+
};
|
|
20520
|
+
|
|
20521
|
+
var _rect, _rect2, _rect3, _rect4, _g$1;
|
|
20522
|
+
function _extends$1() { return _extends$1 = 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$1.apply(null, arguments); }
|
|
20523
|
+
var SvgVisionFence = function SvgVisionFence(props) {
|
|
20524
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
20525
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20526
|
+
width: 16,
|
|
20527
|
+
height: 16,
|
|
20528
|
+
fill: "none"
|
|
20529
|
+
}, props), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
|
|
20530
|
+
width: 14.333,
|
|
20531
|
+
height: 10.667,
|
|
20532
|
+
x: 0.833,
|
|
20533
|
+
y: 2.667,
|
|
20534
|
+
fill: "#B1D9FF",
|
|
20535
|
+
rx: 2.667
|
|
20536
|
+
})), _rect2 || (_rect2 = /*#__PURE__*/React__namespace.createElement("rect", {
|
|
20537
|
+
width: 13.333,
|
|
20538
|
+
height: 9.667,
|
|
20539
|
+
x: 1.333,
|
|
20540
|
+
y: 3.167,
|
|
20541
|
+
stroke: "#5C9DFF",
|
|
20542
|
+
strokeDasharray: "6.33 6.33",
|
|
20543
|
+
rx: 1.333
|
|
20544
|
+
})), _rect3 || (_rect3 = /*#__PURE__*/React__namespace.createElement("rect", {
|
|
20545
|
+
width: 6,
|
|
20546
|
+
height: 6,
|
|
20547
|
+
x: 5,
|
|
20548
|
+
y: 4.833,
|
|
20549
|
+
fill: "#B1D9FF",
|
|
20550
|
+
rx: 3
|
|
20551
|
+
})), /*#__PURE__*/React__namespace.createElement("mask", {
|
|
20552
|
+
id: "visionFence_svg__a",
|
|
20553
|
+
width: 6,
|
|
20554
|
+
height: 6,
|
|
20555
|
+
x: 5,
|
|
20556
|
+
y: 5,
|
|
20557
|
+
maskUnits: "userSpaceOnUse",
|
|
20558
|
+
style: {
|
|
20559
|
+
maskType: "alpha"
|
|
20560
|
+
}
|
|
20561
|
+
}, _rect4 || (_rect4 = /*#__PURE__*/React__namespace.createElement("rect", {
|
|
20562
|
+
width: 5.333,
|
|
20563
|
+
height: 5.333,
|
|
20564
|
+
x: 5.333,
|
|
20565
|
+
y: 5.5,
|
|
20566
|
+
fill: "#B1D9FF",
|
|
20567
|
+
rx: 2.667
|
|
20568
|
+
}))), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
20569
|
+
fill: "#5C9DFF",
|
|
20570
|
+
mask: "url(#visionFence_svg__a)"
|
|
20571
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
20572
|
+
d: "m8.838 3.395.636.636-5.42 5.421-.637-.636zM9.896 4.452l.637.637-5.422 5.42-.636-.635zM10.954 5.51l.636.637-5.421 5.421-.636-.636zM12.172 6.547l.636.637-5.421 5.42-.636-.635z"
|
|
20573
|
+
}))));
|
|
20574
|
+
};
|
|
20575
|
+
|
|
20576
|
+
var _g, _defs;
|
|
20577
|
+
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); }
|
|
20578
|
+
var SvgDoodle = function SvgDoodle(props) {
|
|
20579
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
20580
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20581
|
+
width: 16,
|
|
20582
|
+
height: 16,
|
|
20583
|
+
fill: "none"
|
|
20584
|
+
}, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
|
|
20585
|
+
clipPath: "url(#doodle_svg__a)"
|
|
20586
|
+
}, /*#__PURE__*/React__namespace.createElement("g", {
|
|
20587
|
+
clipPath: "url(#doodle_svg__b)"
|
|
20588
|
+
}, /*#__PURE__*/React__namespace.createElement("rect", {
|
|
20589
|
+
width: 14.237,
|
|
20590
|
+
height: 10.667,
|
|
20591
|
+
x: 0.333,
|
|
20592
|
+
y: 4.332,
|
|
20593
|
+
fill: "#CBFCF7",
|
|
20594
|
+
stroke: "#9AEEE5",
|
|
20595
|
+
strokeWidth: 0.867,
|
|
20596
|
+
rx: 2
|
|
20597
|
+
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
20598
|
+
fill: "#F2FFFD",
|
|
20599
|
+
d: "M1.374 9.88a4 4 0 0 0 4 4h.546l.514-1.524c.073-.216-.087-.443-.312-.48-1.415-.229-3.6-1.485-4.399-4.639a.35.35 0 0 0-.135-.197c-.138.405-.214.84-.214 1.293z"
|
|
20600
|
+
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
20601
|
+
fill: "#50D0C2",
|
|
20602
|
+
d: "M15.814 2.13c-.352 2.267-6.501 9.305-8.003 9.43a.282.282 0 0 1-.238-.455L15.565.828c.398.332.293 1.015.249 1.303"
|
|
20603
|
+
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
20604
|
+
fill: "#50D0C2",
|
|
20605
|
+
d: "M14.208.95c-2.147.946-7.434 8.618-7.15 10.058a.2.2 0 0 0 .017.047.295.295 0 0 0 .498.051L15.565.826c-.437-.28-1.084.003-1.357.123"
|
|
20606
|
+
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
20607
|
+
fill: "#9CE7DE",
|
|
20608
|
+
d: "M7.76 11.558a.282.282 0 0 1-.187-.453.295.295 0 0 1-.498-.05.2.2 0 0 1-.016-.048c-.108-.55.598-2.01 1.63-3.658l2.297 1.689c-1.348 1.415-2.6 2.473-3.174 2.522a.2.2 0 0 1-.053-.002"
|
|
20609
|
+
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
20610
|
+
fill: "#50D0C2",
|
|
20611
|
+
d: "M5.602 11.02c.658-.873 1.769-1.145 2.482-.607.714.537.759 1.68.1 2.553-.657.873-2.733.94-2.733.94s-.507-2.013.15-2.886"
|
|
20612
|
+
})))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
|
|
20613
|
+
id: "doodle_svg__a"
|
|
20614
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
20615
|
+
fill: "#fff",
|
|
20616
|
+
d: "M0 0h16v16H0z"
|
|
20617
|
+
})), /*#__PURE__*/React__namespace.createElement("clipPath", {
|
|
20618
|
+
id: "doodle_svg__b"
|
|
20619
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
20620
|
+
fill: "#fff",
|
|
20621
|
+
d: "M0 0h16v16H0z"
|
|
20622
|
+
})))));
|
|
20623
|
+
};
|
|
20624
|
+
|
|
20625
|
+
var HandleElementMapType;
|
|
20626
|
+
(function (HandleElementMapType) {
|
|
20627
|
+
HandleElementMapType["name"] = "name";
|
|
20628
|
+
HandleElementMapType["focus"] = "focus";
|
|
20629
|
+
HandleElementMapType["delete"] = "delete";
|
|
20630
|
+
HandleElementMapType["timePeriod"] = "timePeriod";
|
|
20631
|
+
HandleElementMapType["area"] = "area";
|
|
20632
|
+
HandleElementMapType["dooleExist"] = "dooleExist";
|
|
20633
|
+
})(HandleElementMapType || (HandleElementMapType = {}));
|
|
20634
|
+
const DATE_TYPE_MAP = [
|
|
20635
|
+
{ type: exports.DataType.BOUNDARY, label: 'Boundary', icon: jsxRuntime.jsx(SvgBoundary, {}) },
|
|
20636
|
+
{
|
|
20637
|
+
type: exports.DataType.OBSTACLE,
|
|
20638
|
+
paramType: exports.RecordTypeEnum.OBSTACLE,
|
|
20639
|
+
label: 'Off-limit island',
|
|
20640
|
+
icon: jsxRuntime.jsx(SvgLimitIsland, {}),
|
|
20641
|
+
},
|
|
20642
|
+
// { type: DataType.CHANNEL, label: 'Channel', icon: <ChannelIcon /> },
|
|
20643
|
+
{
|
|
20644
|
+
type: exports.DataType.VISION_OFF,
|
|
20645
|
+
paramType: exports.RecordTypeEnum.VISI_OFF,
|
|
20646
|
+
label: 'VisionFence-off zone',
|
|
20647
|
+
icon: jsxRuntime.jsx(SvgVisionFence, {}),
|
|
20648
|
+
},
|
|
20649
|
+
{
|
|
20650
|
+
type: exports.DataType.DOODLE,
|
|
20651
|
+
paramType: exports.RecordTypeEnum.DOODLE,
|
|
20652
|
+
label: 'Doodle',
|
|
20653
|
+
icon: jsxRuntime.jsx(SvgDoodle, {}),
|
|
20654
|
+
},
|
|
20655
|
+
];
|
|
20656
|
+
({
|
|
20657
|
+
[exports.DataType.BOUNDARY]: {
|
|
20658
|
+
},
|
|
20659
|
+
[exports.DataType.OBSTACLE]: {
|
|
20660
|
+
},
|
|
20661
|
+
[exports.DataType.CHANNEL]: {
|
|
20662
|
+
},
|
|
20663
|
+
[exports.DataType.VISION_OFF]: {
|
|
20664
|
+
},
|
|
20665
|
+
[exports.DataType.DOODLE]: {
|
|
20666
|
+
},
|
|
20667
|
+
[exports.DataType.PATH]: undefined,
|
|
20668
|
+
[exports.DataType.ANTENNA]: undefined,
|
|
20669
|
+
[exports.DataType.CHARGING_PILE]: undefined,
|
|
20670
|
+
});
|
|
20671
|
+
|
|
20672
|
+
var css_248z$1 = ".ant-modal .ant-modal-body .ant-modal-confirm-title {\n text-align: center;\n}\n.ant-modal .ant-modal-body .ant-modal-confirm-btns {\n margin-top: 24px;\n}\n.ant-modal .ant-modal-body .ant-modal-confirm-btns .ant-btn + .ant-btn {\n margin-left: 24px;\n}\n\n.index-module_modal__fkxhn.index-module_center__d461v .ant-modal-title {\n text-align: center;\n padding: 10px 20px 0;\n font-size: 18px;\n}\n.index-module_modal__fkxhn.index-module_center__d461v .ant-modal-header {\n margin-bottom: 24px;\n}\n.index-module_modal__fkxhn.index-module_center__d461v .ant-modal .ant-modal-footer {\n margin-top: 24px;\n}\n.index-module_modal__fkxhn.index-module_center__d461v .ant-modal .ant-modal-footer .ant-btn + .ant-btn {\n margin-left: 24px;\n}";
|
|
20673
|
+
var styles$1 = {"modal":"index-module_modal__fkxhn","center":"index-module_center__d461v"};
|
|
20674
|
+
styleInject(css_248z$1);
|
|
20675
|
+
|
|
20676
|
+
const CustomModal = ({ children, titleCenter, hasMinHeight, height, ...props }) => {
|
|
20677
|
+
return (jsxRuntime.jsx(antd.Modal, { centered: true, styles: {
|
|
20678
|
+
body: {
|
|
20679
|
+
maxHeight: height ? `${height}px` : 'calc(100vh - 200px)',
|
|
20680
|
+
minHeight: hasMinHeight ? '520px' : undefined,
|
|
20681
|
+
overflow: 'auto',
|
|
20682
|
+
},
|
|
20683
|
+
}, wrapClassName: classNames(styles$1.modal, {
|
|
20684
|
+
[styles$1.center]: titleCenter,
|
|
20685
|
+
}), cancelButtonProps: { color: 'primary', variant: 'outlined' }, cancelText: 'Cancel', ...props, children: children }));
|
|
20686
|
+
};
|
|
20687
|
+
|
|
20688
|
+
var css_248z = ".index-module_doodleModal__EGNPW .index-module_title__ViZuB {\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: rgb(29, 29, 29);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n max-height: 230px;\n overflow-y: auto;\n width: 470px;\n margin: 20px auto 0;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 {\n width: 70px;\n height: 70px;\n padding: 10px;\n border-radius: 8px;\n cursor: pointer;\n border: 2px solid transparent;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n position: relative;\n background: rgb(233, 242, 241);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7:hover {\n background-color: rgba(0, 0, 0, 0.05);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7.index-module_active__1OHfd {\n border: 2px solid #ff5a00;\n background-color: rgba(110, 220, 207, 0.1);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7.index-module_active__1OHfd .index-module_selectIcon__EFQF- {\n display: block;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 .index-module_svgImage__2OT8- {\n width: 100%;\n height: 100%;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 .index-module_svgImage__2OT8- svg {\n width: 100%;\n height: 100%;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 .index-module_selectIcon__EFQF- {\n position: absolute;\n bottom: 4px;\n right: 4px;\n display: none;\n}";
|
|
20689
|
+
var styles = {"doodleModal":"index-module_doodleModal__EGNPW","title":"index-module_title__ViZuB","content":"index-module_content__h-60T","item":"index-module_item__dvoq7","active":"index-module_active__1OHfd","svgImage":"index-module_svgImage__2OT8-"};
|
|
20690
|
+
styleInject(css_248z);
|
|
20691
|
+
|
|
20692
|
+
const DoodleModal = ({ open, onSelect, setOpen, doodleList, centerPoint }) => {
|
|
20693
|
+
const { editMapInfo, setEditMapInfo, onHandleEnterRecord } = useMapEditContext();
|
|
20694
|
+
const [selectedDoodle, setSelectedDoodle] = React.useState(null);
|
|
20695
|
+
const noNeed = React.useMemo(() => {
|
|
20696
|
+
return '1234567890QWERTYUIOPASDFGHJKLZXCVBNM';
|
|
20697
|
+
}, []);
|
|
20698
|
+
// 选择 Doodle
|
|
20699
|
+
const handleSelectDoodle = React.useCallback((item) => {
|
|
20700
|
+
setSelectedDoodle(item);
|
|
20701
|
+
}, []);
|
|
20702
|
+
// 确认选择
|
|
20703
|
+
const handleConfirm = React.useCallback(() => {
|
|
20704
|
+
if (selectedDoodle) {
|
|
20705
|
+
const newDoodle = initDoodle();
|
|
20706
|
+
const svg = selectedDoodle?.svgStr;
|
|
20707
|
+
const minLength = selectedDoodle.minLength;
|
|
20708
|
+
const parseSvg = SvgParserNative.parseSvg(svg);
|
|
20709
|
+
const svgMinLength = parseSvg.height / SCALE_FACTOR;
|
|
20710
|
+
// 使用获取到的 SVG 内容,如果没有获取到则使用 URL
|
|
20711
|
+
newDoodle.svg = svg;
|
|
20712
|
+
newDoodle.scale = minLength / svgMinLength;
|
|
20713
|
+
newDoodle.direction = 0;
|
|
20714
|
+
newDoodle.center = restorePoint(centerPoint);
|
|
20715
|
+
onHandleEnterRecord?.({
|
|
20716
|
+
type: 1,
|
|
20717
|
+
function: 0,
|
|
20718
|
+
})?.then(() => {
|
|
20719
|
+
setEditMapInfo({
|
|
20720
|
+
...editMapInfo,
|
|
20721
|
+
historyList: [
|
|
20722
|
+
{
|
|
20723
|
+
selectElement: newDoodle,
|
|
20724
|
+
},
|
|
20725
|
+
],
|
|
20726
|
+
currentHistoryIndex: 0,
|
|
20727
|
+
createMode: exports.CreateStatus.COMPLETED,
|
|
20728
|
+
elementType: exports.DataType.DOODLE,
|
|
20729
|
+
selectElement: newDoodle,
|
|
20730
|
+
isShowDrag: true,
|
|
20731
|
+
});
|
|
20732
|
+
setOpen(false);
|
|
20733
|
+
onSelect?.(svg);
|
|
20734
|
+
}, (error) => {
|
|
20735
|
+
antd.message.error('Save failed, please try again');
|
|
20736
|
+
});
|
|
20737
|
+
}
|
|
20738
|
+
}, [selectedDoodle, setEditMapInfo, editMapInfo, setOpen, onSelect, centerPoint]);
|
|
20739
|
+
return (jsxRuntime.jsx(CustomModal, { width: 560, title: "Create doodle", titleCenter: true, open: open, onOk: handleConfirm, onCancel: () => setOpen(false), okButtonProps: { disabled: !selectedDoodle }, afterClose: () => setSelectedDoodle(null), okText: "Create", cancelText: "Cancel", children: jsxRuntime.jsxs("div", { className: styles.doodleModal, children: [jsxRuntime.jsx("div", { className: styles.title, children: "Select the doodle that you want to create" }), jsxRuntime.jsx("div", { className: styles.content, children: doodleList
|
|
20740
|
+
?.filter((item) => !noNeed.includes(item.name))
|
|
20741
|
+
.map((item) => {
|
|
20742
|
+
return (jsxRuntime.jsx("div", { className: classNames(styles.item, {
|
|
20743
|
+
[styles.active]: selectedDoodle?.svg === item.svg,
|
|
20744
|
+
}), onClick: () => handleSelectDoodle(item), children: jsxRuntime.jsx("div", { className: styles.svgImage, dangerouslySetInnerHTML: { __html: item?.svgStr } }) }, item.id));
|
|
20745
|
+
}) })] }) }));
|
|
20746
|
+
};
|
|
20747
|
+
|
|
20748
|
+
const AddEntry = ({ doodleList, disabledObstacles, editMap }) => {
|
|
20749
|
+
const { svgRef } = useSvgEditContext();
|
|
20750
|
+
const { editMapInfo, setEditMapInfo, onHandleEnterRecord } = useMapEditContext();
|
|
20751
|
+
const divRef = React.useRef(null);
|
|
20752
|
+
const [open, setOpen] = React.useState(false);
|
|
20753
|
+
const [doodleOpen, setDoodleOpen] = React.useState(false);
|
|
20754
|
+
const centerPoint = React.useMemo(() => {
|
|
20755
|
+
if (!svgRef)
|
|
20756
|
+
return null;
|
|
20757
|
+
const baseVal = svgRef?.viewBox.baseVal;
|
|
20758
|
+
const center = [
|
|
20759
|
+
baseVal?.x + (baseVal?.width || 0) / 2,
|
|
20760
|
+
baseVal?.y + (baseVal?.height || 0) / 2,
|
|
20761
|
+
];
|
|
20762
|
+
return center;
|
|
20763
|
+
}, [svgRef?.viewBox?.baseVal?.x]);
|
|
20764
|
+
const centerBounds = React.useMemo(() => {
|
|
20765
|
+
if (!svgRef)
|
|
20766
|
+
return null;
|
|
20767
|
+
const elementWidth = 50 * 10;
|
|
20768
|
+
const [minX, minY, maxX, maxY] = [
|
|
20769
|
+
centerPoint[0] - elementWidth / 2,
|
|
20770
|
+
centerPoint[1] - elementWidth / 2,
|
|
20771
|
+
centerPoint[0] + elementWidth / 2,
|
|
20772
|
+
centerPoint[1] + elementWidth / 2,
|
|
20773
|
+
];
|
|
20774
|
+
const elementPoints = [
|
|
20775
|
+
[minX, minY],
|
|
20776
|
+
[minX, maxY],
|
|
20777
|
+
[maxX, maxY],
|
|
20778
|
+
[maxX, minY],
|
|
20779
|
+
];
|
|
20780
|
+
return elementPoints;
|
|
20781
|
+
}, [centerPoint]);
|
|
20782
|
+
const addNewElement = React.useCallback((type, item) => {
|
|
20783
|
+
setOpen(false);
|
|
20784
|
+
let newElement = null;
|
|
20785
|
+
if (type === exports.DataType.BOUNDARY) {
|
|
20786
|
+
newElement = initBoundary();
|
|
20787
|
+
}
|
|
20788
|
+
else if (type === exports.DataType.OBSTACLE) {
|
|
20789
|
+
newElement = initObstacle();
|
|
20790
|
+
}
|
|
20791
|
+
else if (type === exports.DataType.CHANNEL) {
|
|
20792
|
+
newElement = initChannel();
|
|
20793
|
+
}
|
|
20794
|
+
else if (type === exports.DataType.VISION_OFF) {
|
|
20795
|
+
newElement = initVisionOff();
|
|
20796
|
+
newElement.points = centerBounds;
|
|
20797
|
+
}
|
|
20798
|
+
else if (type === exports.DataType.DOODLE) {
|
|
20799
|
+
return setDoodleOpen(true);
|
|
20800
|
+
}
|
|
20801
|
+
onHandleEnterRecord?.({
|
|
20802
|
+
type: item?.paramType,
|
|
20803
|
+
function: item?.type === exports.DataType.OBSTACLE ? 0 : undefined,
|
|
20804
|
+
})?.then(() => {
|
|
20805
|
+
setEditMapInfo({
|
|
20806
|
+
...editMapInfo,
|
|
20807
|
+
historyList: [
|
|
20808
|
+
{
|
|
20809
|
+
selectElement: newElement,
|
|
20810
|
+
},
|
|
20811
|
+
],
|
|
20812
|
+
currentHistoryIndex: 0,
|
|
20813
|
+
createMode: type === exports.DataType.VISION_OFF ? exports.CreateStatus.COMPLETED : exports.CreateStatus.CREATING,
|
|
20814
|
+
elementType: type,
|
|
20815
|
+
selectElement: newElement,
|
|
20816
|
+
});
|
|
20817
|
+
}, (errorText) => {
|
|
20818
|
+
antd.message.error('Save failed, please try again');
|
|
20819
|
+
});
|
|
20820
|
+
}, [centerBounds]);
|
|
20821
|
+
const addItems = React.useMemo(() => {
|
|
20822
|
+
return DATE_TYPE_MAP?.filter((item) => {
|
|
20823
|
+
if (item.type === exports.DataType.OBSTACLE) {
|
|
20824
|
+
return !disabledObstacles;
|
|
20825
|
+
}
|
|
20826
|
+
return item.type !== exports.DataType.BOUNDARY;
|
|
20827
|
+
});
|
|
20828
|
+
}, [disabledObstacles]);
|
|
20829
|
+
// console.log('addEntry->', editMapInfo, editMap);
|
|
20830
|
+
if (editMapInfo.createMode || editMapInfo.editMap || !editMap) {
|
|
20831
|
+
return null;
|
|
20832
|
+
}
|
|
20833
|
+
return (jsxRuntime.jsxs("div", { ref: divRef, className: styles$2.addEntry, children: [jsxRuntime.jsx(antd.Popover, { open: open, onOpenChange: setOpen, arrow: false, placement: "leftTop", content: addItems?.map((item) => {
|
|
20834
|
+
return (jsxRuntime.jsxs("div", { className: styles$2.addItem, onClick: () => {
|
|
20835
|
+
addNewElement(item.type, item);
|
|
20836
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$2.icon, children: item?.icon }), jsxRuntime.jsx("div", { className: styles$2.label, children: item?.label })] }, item.label));
|
|
20837
|
+
}), children: jsxRuntime.jsx("div", { className: styles$2.icon, children: jsxRuntime.jsx(SvgAddEntry, {}) }) }), jsxRuntime.jsx(DoodleModal, { centerPoint: centerPoint, doodleList: doodleList, open: doodleOpen, onOk: () => setDoodleOpen(false), setOpen: setDoodleOpen })] }));
|
|
20269
20838
|
};
|
|
20270
20839
|
|
|
20271
20840
|
// 验证GPS坐标是否有效
|
|
@@ -20704,6 +21273,14 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
20704
21273
|
React.useEffect(() => {
|
|
20705
21274
|
setDrag(defaultTransform ?? { x: 0, y: 0, rotation: 0 });
|
|
20706
21275
|
}, [defaultTransform]);
|
|
21276
|
+
React.useEffect(() => {
|
|
21277
|
+
// 监听drag变化,比较drag和defaultTransform
|
|
21278
|
+
onHandleEvent?.(exports.ClickEventType.DRAG_MAP, {
|
|
21279
|
+
isDragMap: drag.x !== defaultTransform.x ||
|
|
21280
|
+
drag.y !== defaultTransform.y ||
|
|
21281
|
+
drag.rotation !== defaultTransform.rotation,
|
|
21282
|
+
});
|
|
21283
|
+
}, [drag, defaultTransform, onHandleEvent]);
|
|
20707
21284
|
// 监听地图zoom变化,计算缩放比例
|
|
20708
21285
|
React.useEffect(() => {
|
|
20709
21286
|
if (!mapRef)
|
|
@@ -20829,7 +21406,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
20829
21406
|
}
|
|
20830
21407
|
// console.log('mowerrender------->', svgViewBox);
|
|
20831
21408
|
// 使用goole maps自定义叠加层,返回debug信息(如果启用)
|
|
20832
|
-
return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsxs(MapEditContextProvider, { value: mapEditValue, children: [platform !== exports.PlatformType.H5 && (jsxRuntime.jsx(jsxRuntime.Fragment, {})), platform === exports.PlatformType.H5 && jsxRuntime.jsx(Crosshair, {}), jsxRuntime.jsxs(OverlayViewF, { onLoad: (lay) => {
|
|
21409
|
+
return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsxs(MapEditContextProvider, { value: mapEditValue, children: [platform !== exports.PlatformType.H5 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(AddEntry, { disabledObstacles: disabledObstacles, doodleList: doodleList, editMap: editMap }) })), platform === exports.PlatformType.H5 && jsxRuntime.jsx(Crosshair, {}), jsxRuntime.jsxs(OverlayViewF, { onLoad: (lay) => {
|
|
20833
21410
|
setOverlay(lay);
|
|
20834
21411
|
}, onDraw: (style) => {
|
|
20835
21412
|
const layout = Object.keys(style).reduce((pre, cur) => {
|