@fleet-frontend/mower-maps 0.2.0-beta.14 → 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 +709 -146
- package/dist/index.js +710 -147
- 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/BoundaryElement/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,18 +15756,22 @@ 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
|
-
if (platform !== exports.PlatformType.H5) {
|
|
15698
|
-
if (currentObstaclePoints.length === 0)
|
|
15699
|
-
return false; // 还没有开始绘制
|
|
15700
|
-
}
|
|
15701
15775
|
// 构建当前 obstacle 的多边形(包括检查点位置)
|
|
15702
15776
|
const currentObstaclePolygon = [...currentObstaclePoints, checkPoint];
|
|
15703
15777
|
// 获取当前边界内的所有元素
|
|
@@ -15716,7 +15790,10 @@ const useCheckElement = () => {
|
|
|
15716
15790
|
const obstaclePoints = coordinatesToPoints$1(obstacle.points);
|
|
15717
15791
|
if (doPolygonsIntersect(currentObstaclePolygon, obstaclePoints)) {
|
|
15718
15792
|
console.log('Obstacle intersection detected with:', obstacle);
|
|
15719
|
-
return
|
|
15793
|
+
return {
|
|
15794
|
+
result: true,
|
|
15795
|
+
code: exports.CheckObstaclePointErrorType.OBSTACLE_INTERSECT,
|
|
15796
|
+
};
|
|
15720
15797
|
}
|
|
15721
15798
|
}
|
|
15722
15799
|
// 3. 找到在 currentBoundary 内的 doodle 元素
|
|
@@ -15732,17 +15809,25 @@ const useCheckElement = () => {
|
|
|
15732
15809
|
// 检查相交
|
|
15733
15810
|
if (doPolygonsIntersect(currentObstaclePolygon, doodleTransformedPoints)) {
|
|
15734
15811
|
console.log('Obstacle-Doodle intersection detected with:', doodle);
|
|
15735
|
-
return
|
|
15812
|
+
return {
|
|
15813
|
+
result: true,
|
|
15814
|
+
code: exports.CheckObstaclePointErrorType.DOODLE_INTERSECT,
|
|
15815
|
+
};
|
|
15736
15816
|
}
|
|
15737
15817
|
// 检查距离
|
|
15738
15818
|
const distance = polygonToPolygonDistance(currentObstaclePolygon, doodleTransformedPoints);
|
|
15739
15819
|
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15740
15820
|
if (distance < minDistance) {
|
|
15741
15821
|
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15742
|
-
return
|
|
15822
|
+
return {
|
|
15823
|
+
result: true,
|
|
15824
|
+
code: exports.CheckObstaclePointErrorType.DOODLE_DISTANCE_TOO_CLOSE,
|
|
15825
|
+
};
|
|
15743
15826
|
}
|
|
15744
15827
|
}
|
|
15745
|
-
return
|
|
15828
|
+
return {
|
|
15829
|
+
result: false,
|
|
15830
|
+
};
|
|
15746
15831
|
}, [editMapInfo.selectElement, editMapInfo.elementType, svgElementDatas, minDistance]);
|
|
15747
15832
|
return {
|
|
15748
15833
|
checkDoodle,
|
|
@@ -15764,12 +15849,13 @@ const coordinatesToPoints = (coordinates) => {
|
|
|
15764
15849
|
* @param point2 第二个点 [x, y]
|
|
15765
15850
|
* @returns 距离(mi单位)
|
|
15766
15851
|
*/
|
|
15767
|
-
const calculatePhysicalDistance = (point1, point2) => {
|
|
15852
|
+
const calculatePhysicalDistance = (point1, point2, unit) => {
|
|
15768
15853
|
const dx = point2[0] - point1[0];
|
|
15769
15854
|
const dy = point2[1] - point1[1];
|
|
15770
15855
|
const svgDistance = Math.sqrt(dx * dx + dy * dy);
|
|
15771
15856
|
const physicalDistance = svgDistance / 50; // SVG坐标是物理单位的50倍
|
|
15772
|
-
return physicalDistance.toFixed(2) + ' m';
|
|
15857
|
+
// return physicalDistance.toFixed(2) + ' m';
|
|
15858
|
+
return convertDistanceByUnits(physicalDistance, unit).value;
|
|
15773
15859
|
};
|
|
15774
15860
|
/**
|
|
15775
15861
|
* 计算两点间的中点坐标
|
|
@@ -15840,7 +15926,8 @@ const createPathData = (points) => {
|
|
|
15840
15926
|
};
|
|
15841
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自动判断
|
|
15842
15928
|
}) => {
|
|
15843
|
-
const { overlayScale } = useCommonContext();
|
|
15929
|
+
const { overlayScale, unitType } = useCommonContext();
|
|
15930
|
+
const { onHandleEvent } = useMapEditContext();
|
|
15844
15931
|
const { svgRef } = useSvgEditContext();
|
|
15845
15932
|
const [dragState, setDragState] = React.useState({
|
|
15846
15933
|
isDragging: false,
|
|
@@ -15859,16 +15946,16 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
15859
15946
|
const { editMapInfo } = useMapEditContext();
|
|
15860
15947
|
const { platform } = useCommonContext();
|
|
15861
15948
|
// delete icon可能被上一个点遮挡,因为delete在右上方,所以手动处理点让点按照顺时针渲染,这样delete icon层级就会高一些
|
|
15862
|
-
//
|
|
15949
|
+
// 编辑的场景禁区的点最后一个和第一个相同,会导致一个位置渲染两个点,需要额外处理下
|
|
15863
15950
|
const coordinates = React.useMemo(() => {
|
|
15864
15951
|
const temp = editMapInfo?.createMode === exports.CreateStatus.CREATING ? points : [...points].reverse();
|
|
15865
15952
|
const firstPoint = temp[0] || [];
|
|
15866
15953
|
const lastPoint = temp[temp.length - 1] || [];
|
|
15867
|
-
if (firstPoint[0] === lastPoint[0] && firstPoint[1] === lastPoint[1]) {
|
|
15954
|
+
if (firstPoint[0] === lastPoint[0] && firstPoint[1] === lastPoint[1] && editMapInfo?.editMap) {
|
|
15868
15955
|
return temp.slice(0, -1);
|
|
15869
15956
|
}
|
|
15870
15957
|
return temp;
|
|
15871
|
-
}, [points, editMapInfo?.createMode]);
|
|
15958
|
+
}, [points, editMapInfo?.createMode, editMapInfo?.editMap]);
|
|
15872
15959
|
// 计算点到线段的垂足坐标(使用通用工具函数)
|
|
15873
15960
|
const calculatePerpendicularFoot$1 = React.useCallback((point, lineStart, lineEnd) => {
|
|
15874
15961
|
return calculatePerpendicularFoot(point, lineStart, lineEnd);
|
|
@@ -16100,19 +16187,19 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16100
16187
|
return (checkCanNotCreateAtPosition?.({
|
|
16101
16188
|
x: dragState.currentPosition[0],
|
|
16102
16189
|
y: dragState.currentPosition[1],
|
|
16103
|
-
}) === true);
|
|
16190
|
+
}).result === true);
|
|
16104
16191
|
const prePoints = coordinates.slice(0, dragState.dragIndex);
|
|
16105
16192
|
const afterPoints = coordinates.slice(dragState.dragIndex + 1);
|
|
16106
16193
|
const checkPoints = [...prePoints, dragState.currentPosition, ...afterPoints];
|
|
16107
16194
|
return (checkCanNotCreateAtPosition?.({
|
|
16108
16195
|
x: dragState.currentPosition[0],
|
|
16109
16196
|
y: dragState.currentPosition[1],
|
|
16110
|
-
}, checkPoints) === true);
|
|
16197
|
+
}, checkPoints).result === true);
|
|
16111
16198
|
}, [dragState.currentPosition, checkCanNotCreateAtPosition, coordinates]);
|
|
16112
16199
|
const generateVertexClassName = React.useMemo(() => {
|
|
16113
16200
|
if (!dragState.isDragging)
|
|
16114
|
-
return styles$
|
|
16115
|
-
return showNotCreateCursor ? styles$
|
|
16201
|
+
return styles$5.vertex;
|
|
16202
|
+
return showNotCreateCursor ? styles$5.notCreate : styles$5.dragging;
|
|
16116
16203
|
}, [dragState.isDragging, showNotCreateCursor]);
|
|
16117
16204
|
// 使用 useRef 来存储 requestAnimationFrame ID
|
|
16118
16205
|
const rafIdRef = React.useRef(null);
|
|
@@ -16234,7 +16321,15 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16234
16321
|
? newCoordinates
|
|
16235
16322
|
: newCoordinates.reverse();
|
|
16236
16323
|
if (showNotCreateCursor) {
|
|
16237
|
-
|
|
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
|
+
}
|
|
16238
16333
|
}
|
|
16239
16334
|
else {
|
|
16240
16335
|
onCoordinatesChange?.(result);
|
|
@@ -16306,7 +16401,12 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16306
16401
|
]);
|
|
16307
16402
|
// 获取当前渲染用的坐标
|
|
16308
16403
|
const renderCoordinates = getRenderCoordinates();
|
|
16309
|
-
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]);
|
|
16310
16410
|
// 按type分组坐标点 - 创建模式下不自动闭合
|
|
16311
16411
|
const pathSegments = groupCoordinatesByType(renderCoordinates, !createMode || completed);
|
|
16312
16412
|
const dashPaths = pathSegments.filter((segment) => segment.type === 1);
|
|
@@ -16319,13 +16419,10 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16319
16419
|
: null;
|
|
16320
16420
|
// 虚拟连线的距离计算
|
|
16321
16421
|
const ghostLastDistance = createMode && mousePos && renderCoordinates.length > 0 && !completed
|
|
16322
|
-
? calculatePhysicalDistance(renderCoordinates[renderCoordinates.length - 1], [
|
|
16323
|
-
mousePos.x,
|
|
16324
|
-
mousePos.y,
|
|
16325
|
-
])
|
|
16422
|
+
? calculatePhysicalDistance(renderCoordinates[renderCoordinates.length - 1], [mousePos.x, mousePos.y], unitType)
|
|
16326
16423
|
: null;
|
|
16327
16424
|
const ghostFirstDistance = createMode && mousePos && !completed && renderCoordinates.length >= 1
|
|
16328
|
-
? calculatePhysicalDistance(renderCoordinates[0], [mousePos.x, mousePos.y])
|
|
16425
|
+
? calculatePhysicalDistance(renderCoordinates[0], [mousePos.x, mousePos.y], unitType)
|
|
16329
16426
|
: null;
|
|
16330
16427
|
// 虚拟连线的中点坐标
|
|
16331
16428
|
const ghostLastMidpoint = createMode && mousePos && renderCoordinates.length > 0 && !completed
|
|
@@ -16381,25 +16478,25 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16381
16478
|
const prevIndex = (dragState.dragIndex - 1 + coordinates.length) % coordinates.length;
|
|
16382
16479
|
const nextIndex = (dragState.dragIndex + 1) % coordinates.length;
|
|
16383
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" })] }));
|
|
16384
|
-
})()] })), renderCoordinates.length >= 3 && (jsxRuntime.jsx("polygon", { className: styles$
|
|
16385
|
-
, 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 &&
|
|
16386
16483
|
pathSegments.map((segment, index) => {
|
|
16387
16484
|
if (segment.points.length < 2)
|
|
16388
16485
|
return null;
|
|
16389
16486
|
const pathData = createPathData(segment.points);
|
|
16390
16487
|
const isDash = segment.type === 1;
|
|
16391
|
-
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));
|
|
16392
16489
|
}), renderCoordinates.length >= 2 &&
|
|
16393
16490
|
dashPaths.map((segment, index) => {
|
|
16394
16491
|
if (segment.points.length < 2)
|
|
16395
16492
|
return null;
|
|
16396
|
-
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));
|
|
16397
16494
|
})] }), (editMode || (createMode && completed)) &&
|
|
16398
16495
|
renderCoordinates.length >= 2 &&
|
|
16399
16496
|
renderCoordinates.map((coord, index) => {
|
|
16400
16497
|
const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
|
|
16401
16498
|
const isDashPath = coord[2] === 1;
|
|
16402
|
-
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: {
|
|
16403
16500
|
userSelect: 'none',
|
|
16404
16501
|
WebkitUserSelect: 'none',
|
|
16405
16502
|
WebkitTouchCallout: 'none',
|
|
@@ -16431,7 +16528,7 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16431
16528
|
setHoverVertex(null);
|
|
16432
16529
|
},
|
|
16433
16530
|
}) }, `edge-${index}`));
|
|
16434
|
-
}), 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)) &&
|
|
16435
16532
|
renderCoordinates.map((coord, idx) => {
|
|
16436
16533
|
// 判断当前顶点的状态
|
|
16437
16534
|
const isLastPoint = idx === renderCoordinates.length - 1;
|
|
@@ -16614,17 +16711,7 @@ const BoundaryElement = ({ data }) => {
|
|
|
16614
16711
|
}));
|
|
16615
16712
|
}
|
|
16616
16713
|
}
|
|
16617
|
-
|
|
16618
|
-
if (editMapInfo?.selectElement)
|
|
16619
|
-
return;
|
|
16620
|
-
setEditMapInfo((prev) => ({
|
|
16621
|
-
...prev,
|
|
16622
|
-
selectElement: data,
|
|
16623
|
-
elementType: exports.DataType.BOUNDARY,
|
|
16624
|
-
editMap: true,
|
|
16625
|
-
}));
|
|
16626
|
-
}
|
|
16627
|
-
}, [platform, data, editMapInfo]);
|
|
16714
|
+
}, [platform, data, editMapInfo, onSelectElement]);
|
|
16628
16715
|
return (jsxRuntime.jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16629
16716
|
onPathClick();
|
|
16630
16717
|
}, onCoordinatesChange: (coordinates) => {
|
|
@@ -16783,7 +16870,8 @@ const ObstacleElement = ({ data }) => {
|
|
|
16783
16870
|
if (platform === exports.PlatformType.H5 &&
|
|
16784
16871
|
editMapInfo?.selectElement?.id === data.id &&
|
|
16785
16872
|
editMapInfo.mobileMode === exports.MobileEditMode.START) {
|
|
16786
|
-
return dp2px((style.lineWidth ||
|
|
16873
|
+
return dp2px((style.lineWidth || 1) * 2);
|
|
16874
|
+
// return dp2px(((style.lineWidth as number) || 3) * 3);
|
|
16787
16875
|
}
|
|
16788
16876
|
return dp2px(style.lineWidth || 3);
|
|
16789
16877
|
}, [platform, style, editMapInfo]);
|
|
@@ -17243,15 +17331,15 @@ const useVisionOffTransform = (data, scaleConstraints
|
|
|
17243
17331
|
};
|
|
17244
17332
|
};
|
|
17245
17333
|
|
|
17246
|
-
var _g$
|
|
17247
|
-
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); }
|
|
17248
17336
|
var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
17249
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17337
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
|
|
17250
17338
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17251
17339
|
width: 20,
|
|
17252
17340
|
height: 20,
|
|
17253
17341
|
fill: "none"
|
|
17254
|
-
}, props), _g$
|
|
17342
|
+
}, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17255
17343
|
clipPath: "url(#transform-delete_svg__a)"
|
|
17256
17344
|
}, /*#__PURE__*/React__namespace.createElement("circle", {
|
|
17257
17345
|
cx: 10,
|
|
@@ -17274,7 +17362,7 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
|
17274
17362
|
fill: "#fff",
|
|
17275
17363
|
rx: 0.8,
|
|
17276
17364
|
transform: "rotate(45 6.323 5.191)"
|
|
17277
|
-
}))), _defs$
|
|
17365
|
+
}))), _defs$5 || (_defs$5 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
17278
17366
|
id: "transform-delete_svg__b",
|
|
17279
17367
|
x1: 17.727,
|
|
17280
17368
|
x2: -1.215,
|
|
@@ -17294,15 +17382,15 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
|
17294
17382
|
})))));
|
|
17295
17383
|
};
|
|
17296
17384
|
|
|
17297
|
-
var _g$
|
|
17298
|
-
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); }
|
|
17299
17387
|
var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
17300
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17388
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
|
|
17301
17389
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17302
17390
|
width: 21,
|
|
17303
17391
|
height: 20,
|
|
17304
17392
|
fill: "none"
|
|
17305
|
-
}, props), _g$
|
|
17393
|
+
}, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17306
17394
|
clipPath: "url(#transform-rotate_svg__a)"
|
|
17307
17395
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
17308
17396
|
fill: "url(#transform-rotate_svg__b)",
|
|
@@ -17310,7 +17398,7 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
|
17310
17398
|
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
17311
17399
|
fill: "#fff",
|
|
17312
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"
|
|
17313
|
-
}))), _defs$
|
|
17401
|
+
}))), _defs$4 || (_defs$4 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
17314
17402
|
id: "transform-rotate_svg__b",
|
|
17315
17403
|
x1: 17.84,
|
|
17316
17404
|
x2: -1.103,
|
|
@@ -17330,15 +17418,15 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
|
17330
17418
|
})))));
|
|
17331
17419
|
};
|
|
17332
17420
|
|
|
17333
|
-
var _g$
|
|
17334
|
-
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); }
|
|
17335
17423
|
var SvgTransformScale = function SvgTransformScale(props) {
|
|
17336
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17424
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
|
|
17337
17425
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17338
17426
|
width: 21,
|
|
17339
17427
|
height: 20,
|
|
17340
17428
|
fill: "none"
|
|
17341
|
-
}, props), _g$
|
|
17429
|
+
}, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17342
17430
|
clipPath: "url(#transform-scale_svg__a)"
|
|
17343
17431
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
17344
17432
|
fill: "url(#transform-scale_svg__b)",
|
|
@@ -17346,7 +17434,7 @@ var SvgTransformScale = function SvgTransformScale(props) {
|
|
|
17346
17434
|
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
17347
17435
|
fill: "#fff",
|
|
17348
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"
|
|
17349
|
-
}))), _defs$
|
|
17437
|
+
}))), _defs$3 || (_defs$3 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("linearGradient", {
|
|
17350
17438
|
id: "transform-scale_svg__b",
|
|
17351
17439
|
x1: 17.84,
|
|
17352
17440
|
x2: -1.103,
|
|
@@ -17366,15 +17454,15 @@ var SvgTransformScale = function SvgTransformScale(props) {
|
|
|
17366
17454
|
})))));
|
|
17367
17455
|
};
|
|
17368
17456
|
|
|
17369
|
-
var _g, _defs;
|
|
17370
|
-
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); }
|
|
17371
17459
|
var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
17372
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
17460
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
|
|
17373
17461
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17374
17462
|
width: 20,
|
|
17375
17463
|
height: 20,
|
|
17376
17464
|
fill: "none"
|
|
17377
|
-
}, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17465
|
+
}, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
|
|
17378
17466
|
clipPath: "url(#transform-translate_svg__a)"
|
|
17379
17467
|
}, /*#__PURE__*/React__namespace.createElement("circle", {
|
|
17380
17468
|
cx: 10,
|
|
@@ -17384,7 +17472,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
|
17384
17472
|
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
17385
17473
|
fill: "#fff",
|
|
17386
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"
|
|
17387
|
-
}))), _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", {
|
|
17388
17476
|
id: "transform-translate_svg__b",
|
|
17389
17477
|
x1: 17.727,
|
|
17390
17478
|
x2: -1.215,
|
|
@@ -17406,7 +17494,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
|
17406
17494
|
|
|
17407
17495
|
const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCancel, onDragEnd, onDragMove, disabled = false, className = '', scaleConstraints = { minEdgeLength: 0.5, maxEdgeLength: 10000 }, showInfo = true, }) => {
|
|
17408
17496
|
const { overlayScale } = useCommonContext();
|
|
17409
|
-
const { platform } = useCommonContext();
|
|
17497
|
+
const { platform, unitType } = useCommonContext();
|
|
17410
17498
|
const { editMapInfo } = useMapEditContext();
|
|
17411
17499
|
const dataPoints = React.useMemo(() => {
|
|
17412
17500
|
return {
|
|
@@ -17430,10 +17518,10 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17430
17518
|
if (platform === exports.PlatformType.H5) {
|
|
17431
17519
|
if (editMapInfo?.mobileMode === exports.MobileEditMode.START &&
|
|
17432
17520
|
editMapInfo?.selectElement?.id === data.id) {
|
|
17433
|
-
return dp2px((style.lineWidth ||
|
|
17521
|
+
return dp2px((style.lineWidth || 1) * 2);
|
|
17434
17522
|
}
|
|
17435
17523
|
}
|
|
17436
|
-
return dp2px(style.lineWidth ||
|
|
17524
|
+
return dp2px(style.lineWidth || 1);
|
|
17437
17525
|
}, [style, platform, editMapInfo, data]);
|
|
17438
17526
|
// 初始化 - 无论是否选中都要初始化点坐标
|
|
17439
17527
|
React.useEffect(() => {
|
|
@@ -17601,7 +17689,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17601
17689
|
color: 'white',
|
|
17602
17690
|
fontWeight: '400',
|
|
17603
17691
|
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
17604
|
-
}, children: [dimensions.height, "
|
|
17692
|
+
}, children: [convertDistanceByUnits(dimensions.height, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.width, unitType).value] }) }))] }));
|
|
17605
17693
|
})()] }));
|
|
17606
17694
|
};
|
|
17607
17695
|
|
|
@@ -18062,15 +18150,15 @@ const useDoodleTransform = (data, onTransformChange, options) => {
|
|
|
18062
18150
|
};
|
|
18063
18151
|
};
|
|
18064
18152
|
|
|
18065
|
-
var _path$
|
|
18066
|
-
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); }
|
|
18067
18155
|
var SvgTransformArrow = function SvgTransformArrow(props) {
|
|
18068
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
18156
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
18069
18157
|
xmlns: "http://www.w3.org/2000/svg",
|
|
18070
18158
|
width: 7,
|
|
18071
18159
|
height: 11,
|
|
18072
18160
|
fill: "none"
|
|
18073
|
-
}, props), _path$
|
|
18161
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
18074
18162
|
fill: "#fff",
|
|
18075
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",
|
|
18076
18164
|
opacity: 0.5
|
|
@@ -18132,7 +18220,7 @@ const DoodleTransform = ({ data, isSelected: _isSelected, onSelect }) => {
|
|
|
18132
18220
|
};
|
|
18133
18221
|
|
|
18134
18222
|
const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, onClickInfo, }) => {
|
|
18135
|
-
const { platform, overlayScale } = useCommonContext();
|
|
18223
|
+
const { platform, overlayScale, unitType } = useCommonContext();
|
|
18136
18224
|
// 使用自定义hook管理所有变换逻辑
|
|
18137
18225
|
const { currentCenter, currentScale, currentDirection, isDragging, isRotating, isScaling, initializeTransform, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, dimensions, } = useDoodleTransform(data, onTransformChange, {
|
|
18138
18226
|
minScale,
|
|
@@ -18396,7 +18484,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18396
18484
|
color: 'white',
|
|
18397
18485
|
fontWeight: '400',
|
|
18398
18486
|
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
18399
|
-
}, 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: {
|
|
18400
18488
|
display: 'flex',
|
|
18401
18489
|
alignItems: 'center',
|
|
18402
18490
|
justifyContent: 'center',
|
|
@@ -18515,7 +18603,7 @@ const DoodleElement = ({ data }) => {
|
|
|
18515
18603
|
}));
|
|
18516
18604
|
}, []);
|
|
18517
18605
|
const handleClickInfo = React.useCallback(() => {
|
|
18518
|
-
onHandleEvent?.(ClickEventType.DOODLE_ACTIVE_TIME);
|
|
18606
|
+
onHandleEvent?.(exports.ClickEventType.DOODLE_ACTIVE_TIME);
|
|
18519
18607
|
}, [onHandleEvent]);
|
|
18520
18608
|
// const handleDragMove = useCallback(
|
|
18521
18609
|
// (data: DoodleData) => {
|
|
@@ -18589,9 +18677,9 @@ const GElement = ({ type, children }) => {
|
|
|
18589
18677
|
return jsxRuntime.jsx("g", { id: `layer-${type}`, children: children }, type);
|
|
18590
18678
|
};
|
|
18591
18679
|
|
|
18592
|
-
var css_248z$
|
|
18593
|
-
var styles$
|
|
18594
|
-
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);
|
|
18595
18683
|
|
|
18596
18684
|
var classnames = {exports: {}};
|
|
18597
18685
|
|
|
@@ -19614,7 +19702,7 @@ function usePolygonDrawing(options = {}) {
|
|
|
19614
19702
|
const p = getSvgPoint(svgEl, e.clientX, e.clientY);
|
|
19615
19703
|
if (!p)
|
|
19616
19704
|
return;
|
|
19617
|
-
if (checkCanNotCreateAtPosition(p)) {
|
|
19705
|
+
if (checkCanNotCreateAtPosition(p)?.result) {
|
|
19618
19706
|
antd.message.error('Unable to place here, please select a valid spot');
|
|
19619
19707
|
return;
|
|
19620
19708
|
}
|
|
@@ -19788,24 +19876,38 @@ const CreateObstacleElement = React.forwardRef(({ enabled = false, svgElement, o
|
|
|
19788
19876
|
const addPoint = React.useCallback(() => {
|
|
19789
19877
|
if (!enabled || !svgElement) {
|
|
19790
19878
|
console.warn('未启用创建模式或SVG元素不存在');
|
|
19791
|
-
return {
|
|
19879
|
+
return {
|
|
19880
|
+
isValid: false,
|
|
19881
|
+
reason: '未启用创建模式或SVG元素不存在',
|
|
19882
|
+
code: exports.CheckObstaclePointErrorType.COMMON_ERROR,
|
|
19883
|
+
};
|
|
19792
19884
|
}
|
|
19793
19885
|
if (!mapRef) {
|
|
19794
19886
|
console.warn('地图实例不存在');
|
|
19795
|
-
return {
|
|
19887
|
+
return {
|
|
19888
|
+
isValid: false,
|
|
19889
|
+
reason: '地图实例不存在',
|
|
19890
|
+
code: exports.CheckObstaclePointErrorType.MAP_NOT_EXIST,
|
|
19891
|
+
};
|
|
19796
19892
|
}
|
|
19797
19893
|
const centerPoint = getScreenCenterSvgPoint(svgElement, mapRef);
|
|
19798
19894
|
if (!centerPoint) {
|
|
19799
19895
|
console.warn('无法获取屏幕中心点的SVG坐标或点不在SVG可见区域内');
|
|
19800
|
-
return {
|
|
19896
|
+
return {
|
|
19897
|
+
isValid: false,
|
|
19898
|
+
reason: '无法获取屏幕中心点的SVG坐标或点不在SVG可见区域内',
|
|
19899
|
+
code: exports.CheckObstaclePointErrorType.GET_POINT_FAILED,
|
|
19900
|
+
};
|
|
19801
19901
|
}
|
|
19802
19902
|
console.error('centerPoint--->', centerPoint);
|
|
19803
|
-
console.error('checkCanNotCreateAtPosition--->', checkCanNotCreateAtPosition(centerPoint));
|
|
19903
|
+
console.error('checkCanNotCreateAtPosition--->', checkCanNotCreateAtPosition(centerPoint).result);
|
|
19804
19904
|
// 校验是否能打点
|
|
19805
|
-
|
|
19905
|
+
const checkResult = checkCanNotCreateAtPosition(centerPoint);
|
|
19906
|
+
if (checkResult.result) {
|
|
19806
19907
|
return {
|
|
19807
19908
|
isValid: false,
|
|
19808
|
-
reason: '
|
|
19909
|
+
reason: '',
|
|
19910
|
+
code: checkResult.code || exports.CheckObstaclePointErrorType.COMMON_ERROR,
|
|
19809
19911
|
};
|
|
19810
19912
|
}
|
|
19811
19913
|
const newPoints = [...points, centerPoint];
|
|
@@ -19846,7 +19948,7 @@ const CreateObstacleElement = React.forwardRef(({ enabled = false, svgElement, o
|
|
|
19846
19948
|
if (!enabled || points.length === 0) {
|
|
19847
19949
|
return null;
|
|
19848
19950
|
}
|
|
19849
|
-
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 }));
|
|
19850
19952
|
});
|
|
19851
19953
|
CreateObstacleElement.displayName = 'CreateObstacleElement';
|
|
19852
19954
|
|
|
@@ -20141,11 +20243,11 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
|
|
|
20141
20243
|
const showNotCreateCursor = React.useMemo(() => {
|
|
20142
20244
|
if (!mousePos)
|
|
20143
20245
|
return false;
|
|
20144
|
-
return checkCanNotCreateAtPosition(mousePos);
|
|
20246
|
+
return checkCanNotCreateAtPosition(mousePos)?.result ?? false;
|
|
20145
20247
|
}, [mousePos, checkCanNotCreateAtPosition]);
|
|
20146
|
-
return (jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$
|
|
20147
|
-
[styles$
|
|
20148
|
-
[styles$
|
|
20248
|
+
return (jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$4.mapEdit, {
|
|
20249
|
+
[styles$4.createMode]: isCreating,
|
|
20250
|
+
[styles$4.notCreateCursor]: showNotCreateCursor,
|
|
20149
20251
|
}), style: {
|
|
20150
20252
|
display: editMap ? 'block' : 'none',
|
|
20151
20253
|
}, children: jsxRuntime.jsxs("svg", { style: {
|
|
@@ -20243,15 +20345,15 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
|
|
|
20243
20345
|
});
|
|
20244
20346
|
SvgEditMap.displayName = 'SvgEditMap';
|
|
20245
20347
|
|
|
20246
|
-
var _path;
|
|
20247
|
-
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); }
|
|
20248
20350
|
var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
|
|
20249
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
20351
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
20250
20352
|
xmlns: "http://www.w3.org/2000/svg",
|
|
20251
20353
|
width: 36,
|
|
20252
20354
|
height: 36,
|
|
20253
20355
|
fill: "none"
|
|
20254
|
-
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20356
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
20255
20357
|
stroke: "#fff",
|
|
20256
20358
|
strokeLinecap: "round",
|
|
20257
20359
|
strokeLinejoin: "round",
|
|
@@ -20260,9 +20362,9 @@ var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
|
|
|
20260
20362
|
})));
|
|
20261
20363
|
};
|
|
20262
20364
|
|
|
20263
|
-
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}";
|
|
20264
|
-
var styles = {"crosshair":"index-module_crosshair__etey6"};
|
|
20265
|
-
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);
|
|
20266
20368
|
|
|
20267
20369
|
/**
|
|
20268
20370
|
* 十字准心组件
|
|
@@ -20279,7 +20381,460 @@ const Crosshair = () => {
|
|
|
20279
20381
|
}
|
|
20280
20382
|
return false;
|
|
20281
20383
|
}, [platform, editMapInfo]);
|
|
20282
|
-
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 })] }));
|
|
20283
20838
|
};
|
|
20284
20839
|
|
|
20285
20840
|
// 验证GPS坐标是否有效
|
|
@@ -20718,6 +21273,14 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
20718
21273
|
React.useEffect(() => {
|
|
20719
21274
|
setDrag(defaultTransform ?? { x: 0, y: 0, rotation: 0 });
|
|
20720
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]);
|
|
20721
21284
|
// 监听地图zoom变化,计算缩放比例
|
|
20722
21285
|
React.useEffect(() => {
|
|
20723
21286
|
if (!mapRef)
|
|
@@ -20843,7 +21406,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
20843
21406
|
}
|
|
20844
21407
|
// console.log('mowerrender------->', svgViewBox);
|
|
20845
21408
|
// 使用goole maps自定义叠加层,返回debug信息(如果启用)
|
|
20846
|
-
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) => {
|
|
20847
21410
|
setOverlay(lay);
|
|
20848
21411
|
}, onDraw: (style) => {
|
|
20849
21412
|
const layout = Object.keys(style).reduce((pre, cur) => {
|