@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.esm.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default, { memo, useMemo, useEffect, useState, useRef, useCallback, createContext, useContext, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
|
|
4
4
|
import ReactDOM from 'react-dom';
|
|
5
|
-
import { message } from 'antd';
|
|
5
|
+
import { message, Modal, Popover } from 'antd';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* 常量和枚举类型定义
|
|
@@ -7985,6 +7985,42 @@ var PlatformType;
|
|
|
7985
7985
|
PlatformType["WEB"] = "web";
|
|
7986
7986
|
PlatformType["H5"] = "h5";
|
|
7987
7987
|
})(PlatformType || (PlatformType = {}));
|
|
7988
|
+
// 禁区的点进行检查的时候的提示
|
|
7989
|
+
var CheckObstaclePointErrorType;
|
|
7990
|
+
(function (CheckObstaclePointErrorType) {
|
|
7991
|
+
// 禁区相交
|
|
7992
|
+
CheckObstaclePointErrorType["OBSTACLE_INTERSECT"] = "obstacle_intersect";
|
|
7993
|
+
// 禁区与doodle相交
|
|
7994
|
+
CheckObstaclePointErrorType["DOODLE_INTERSECT"] = "doodle_intersect";
|
|
7995
|
+
// 禁区与doodle距离过近
|
|
7996
|
+
CheckObstaclePointErrorType["DOODLE_DISTANCE_TOO_CLOSE"] = "doodle_distance_too_close";
|
|
7997
|
+
// 禁区不在边界内
|
|
7998
|
+
CheckObstaclePointErrorType["BOUNDARY_NOT_IN_BOUNDARY"] = "boundary_not_in_boundary";
|
|
7999
|
+
// 点在禁区内
|
|
8000
|
+
CheckObstaclePointErrorType["POINT_IN_OBSTACLE"] = "point_in_obstacle";
|
|
8001
|
+
// 地图不存在
|
|
8002
|
+
CheckObstaclePointErrorType["MAP_NOT_EXIST"] = "map_not_exist";
|
|
8003
|
+
// 获取点失败
|
|
8004
|
+
CheckObstaclePointErrorType["GET_POINT_FAILED"] = "get_point_failed";
|
|
8005
|
+
// 通用错误
|
|
8006
|
+
CheckObstaclePointErrorType["COMMON_ERROR"] = "common_error";
|
|
8007
|
+
})(CheckObstaclePointErrorType || (CheckObstaclePointErrorType = {}));
|
|
8008
|
+
// doodle进行检查的提示
|
|
8009
|
+
var CheckDoodleErrorType;
|
|
8010
|
+
(function (CheckDoodleErrorType) {
|
|
8011
|
+
// 没有选中doodle
|
|
8012
|
+
CheckDoodleErrorType["NO_DOODLE_SELECTED"] = "no_doodle_selected";
|
|
8013
|
+
// doodle没有可移动的点
|
|
8014
|
+
CheckDoodleErrorType["NO_MOVABLE_POINTS"] = "no_movable_points";
|
|
8015
|
+
// doodle不在边界内
|
|
8016
|
+
CheckDoodleErrorType["DOODLE_NOT_IN_BOUNDARY"] = "doodle_not_in_boundary";
|
|
8017
|
+
// doodle距离边界太近
|
|
8018
|
+
CheckDoodleErrorType["DOODLE_DISTANCE_TOO_CLOSE"] = "doodle_distance_too_close";
|
|
8019
|
+
// doodle与其他元素相交
|
|
8020
|
+
CheckDoodleErrorType["DOODLE_INTERSECT"] = "doodle_intersect";
|
|
8021
|
+
// doodle与其他元素距离过近
|
|
8022
|
+
CheckDoodleErrorType["DOODLE_DISTANCE_TOO_CLOSE_TO_OTHER_ELEMENT"] = "doodle_distance_too_close_to_other_element";
|
|
8023
|
+
})(CheckDoodleErrorType || (CheckDoodleErrorType = {}));
|
|
7988
8024
|
|
|
7989
8025
|
/**
|
|
7990
8026
|
* 触摸事件工具函数
|
|
@@ -8582,12 +8618,12 @@ function styleInject(css, ref) {
|
|
|
8582
8618
|
}
|
|
8583
8619
|
}
|
|
8584
8620
|
|
|
8585
|
-
var css_248z$
|
|
8586
|
-
var styles$
|
|
8587
|
-
styleInject(css_248z$
|
|
8621
|
+
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}";
|
|
8622
|
+
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"};
|
|
8623
|
+
styleInject(css_248z$9);
|
|
8588
8624
|
|
|
8589
8625
|
const RotateHandle = ({ onRotateStart, isRotating }) => {
|
|
8590
|
-
return (jsx("div", { className: styles$
|
|
8626
|
+
return (jsx("div", { className: styles$9.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
|
|
8591
8627
|
};
|
|
8592
8628
|
|
|
8593
8629
|
/**
|
|
@@ -8641,13 +8677,18 @@ function isMobileDevice() {
|
|
|
8641
8677
|
// 检查用户代理字符串
|
|
8642
8678
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
8643
8679
|
const mobileKeywords = [
|
|
8644
|
-
'android',
|
|
8645
|
-
'
|
|
8680
|
+
'android',
|
|
8681
|
+
'webos',
|
|
8682
|
+
'iphone',
|
|
8683
|
+
'ipad',
|
|
8684
|
+
'ipod',
|
|
8685
|
+
'blackberry',
|
|
8686
|
+
'windows phone',
|
|
8687
|
+
'mobile',
|
|
8646
8688
|
];
|
|
8647
|
-
const isMobileUserAgent = mobileKeywords.some(keyword => userAgent.includes(keyword));
|
|
8689
|
+
const isMobileUserAgent = mobileKeywords.some((keyword) => userAgent.includes(keyword));
|
|
8648
8690
|
// 检查触摸屏支持
|
|
8649
|
-
const hasTouchScreen = 'ontouchstart' in window ||
|
|
8650
|
-
(navigator.maxTouchPoints && navigator.maxTouchPoints > 0);
|
|
8691
|
+
const hasTouchScreen = 'ontouchstart' in window || (navigator.maxTouchPoints && navigator.maxTouchPoints > 0);
|
|
8651
8692
|
// 检查屏幕尺寸(移动设备通常屏幕较小)
|
|
8652
8693
|
const isSmallScreen = window.innerWidth <= 768;
|
|
8653
8694
|
// 综合判断:用户代理包含移动设备关键词,或者有触摸屏且屏幕较小
|
|
@@ -8659,7 +8700,7 @@ const DragHandle = ({ onDragStart, isDragging }) => {
|
|
|
8659
8700
|
if (!isMobileDevice()) {
|
|
8660
8701
|
return null;
|
|
8661
8702
|
}
|
|
8662
|
-
return (jsx("div", { className: styles$
|
|
8703
|
+
return (jsx("div", { className: styles$9.move, onMouseDown: (e) => {
|
|
8663
8704
|
console.log('down');
|
|
8664
8705
|
onDragStart(e);
|
|
8665
8706
|
}, onTouchStart: (e) => onDragStart(e), onMouseUp: (e) => {
|
|
@@ -8693,7 +8734,7 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
|
|
|
8693
8734
|
if (!isDragMap) {
|
|
8694
8735
|
return null;
|
|
8695
8736
|
}
|
|
8696
|
-
return (jsxs("div", { ref: containerRef, className: styles$
|
|
8737
|
+
return (jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$9.border }), jsx(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsx("div", { className: styles$9.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
|
|
8697
8738
|
};
|
|
8698
8739
|
|
|
8699
8740
|
/**
|
|
@@ -14416,9 +14457,9 @@ const SvgMapComponent = forwardRef(({ editMap, rotate, mapData, pathData, modelT
|
|
|
14416
14457
|
// 设置显示名称以便调试
|
|
14417
14458
|
SvgMapComponent.displayName = 'SvgMapComponent';
|
|
14418
14459
|
|
|
14419
|
-
var css_248z$
|
|
14420
|
-
var styles$
|
|
14421
|
-
styleInject(css_248z$
|
|
14460
|
+
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}";
|
|
14461
|
+
var styles$8 = {"mowerPosition":"index-module_mowerPosition__yLpIU"};
|
|
14462
|
+
styleInject(css_248z$8);
|
|
14422
14463
|
|
|
14423
14464
|
const usePosition = ({ mowerPositionData, viewBox, modelType, hasEdger, mapData, realTimeData, onMowingPositionChange, }) => {
|
|
14424
14465
|
// DOM 元素引用,用于直接操作
|
|
@@ -14644,7 +14685,7 @@ const MowerPosition = React__default.memo(({ editMap, mowerPositionData, viewBox
|
|
|
14644
14685
|
pointerEvents: 'none',
|
|
14645
14686
|
zIndex: 1000,
|
|
14646
14687
|
}), []);
|
|
14647
|
-
return (jsx("div", { className: styles$
|
|
14688
|
+
return (jsx("div", { className: styles$8.mowerPosition, style: containerStyle, children: jsx("div", { ref: elementRef, className: "mower-position", style: {
|
|
14648
14689
|
position: 'absolute',
|
|
14649
14690
|
width: 30,
|
|
14650
14691
|
height: 30,
|
|
@@ -14713,9 +14754,9 @@ const CharginPile = React__default.memo(({ mapData, mapConfig = {}, viewBox, rot
|
|
|
14713
14754
|
}, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }, `pile-${idx}`))) }));
|
|
14714
14755
|
});
|
|
14715
14756
|
|
|
14716
|
-
var css_248z$
|
|
14717
|
-
var styles$
|
|
14718
|
-
styleInject(css_248z$
|
|
14757
|
+
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}";
|
|
14758
|
+
var styles$7 = {"container":"index-module_container__7IatW","boundaryLabel":"index-module_boundaryLabel__GDHFn","base":"index-module_base__qy2SG","extended":"index-module_extended__0TMAt"};
|
|
14759
|
+
styleInject(css_248z$7);
|
|
14719
14760
|
|
|
14720
14761
|
const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionData, realTimeData = [], }) => {
|
|
14721
14762
|
const [processStateIsMowing, updateProcessStateIsMowing] = useState(false);
|
|
@@ -14869,7 +14910,7 @@ const BoundaryLabels = React__default.memo(({ editMap, mapData, pathData, unitTy
|
|
|
14869
14910
|
zIndex: expandedId != null ? 9999 : containerZIndex,
|
|
14870
14911
|
display: editMap ? 'none' : 'block',
|
|
14871
14912
|
}), [containerZIndex, expandedId, editMap]);
|
|
14872
|
-
return (jsx("div", { className: styles$
|
|
14913
|
+
return (jsx("div", { className: styles$7.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `${styles$7.boundaryLabel} boundary-label`, "data-boundary-id": item.id, style: {
|
|
14873
14914
|
transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
|
|
14874
14915
|
left: `${item.leftPct}%`,
|
|
14875
14916
|
top: `${item.topPct}%`,
|
|
@@ -14879,12 +14920,12 @@ const BoundaryLabels = React__default.memo(({ editMap, mapData, pathData, unitTy
|
|
|
14879
14920
|
if (onlyRead)
|
|
14880
14921
|
return;
|
|
14881
14922
|
handleClick(item.id);
|
|
14882
|
-
}, children: [jsx("div", { className: styles$
|
|
14923
|
+
}, children: [jsx("div", { className: styles$7.base, children: item.baseText }), jsxs("div", { className: styles$7.extended, style: { display: expandedId === item.id ? 'block' : 'none' }, children: [jsx("div", { style: { marginBottom: 3, fontWeight: 'bold' }, children: item.coverageText }), jsx("div", { children: item.dateText })] })] }, item.id))) }));
|
|
14883
14924
|
});
|
|
14884
14925
|
|
|
14885
|
-
var css_248z$
|
|
14886
|
-
var styles$
|
|
14887
|
-
styleInject(css_248z$
|
|
14926
|
+
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}";
|
|
14927
|
+
var styles$6 = {"container":"index-module_container__gB52e","item":"index-module_item__zHoZP","icon":"index-module_icon__CS56A","tooltip":"index-module_tooltip__NMCmR"};
|
|
14928
|
+
styleInject(css_248z$6);
|
|
14888
14929
|
|
|
14889
14930
|
const useAntennaInfo = (data = [], options = {}) => {
|
|
14890
14931
|
const { viewBox } = options;
|
|
@@ -14993,13 +15034,13 @@ const Antennas = React__default.memo(({ editMap, antennaConfig = [], viewBox, ro
|
|
|
14993
15034
|
document.addEventListener('pointerdown', handleOutside);
|
|
14994
15035
|
return () => document.removeEventListener('pointerdown', handleOutside);
|
|
14995
15036
|
}, []);
|
|
14996
|
-
return (jsx("div", { className: styles$
|
|
15037
|
+
return (jsx("div", { className: styles$6.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `antenna-container-item ${styles$6.item}`, style: {
|
|
14997
15038
|
left: `${item.leftPct}%`,
|
|
14998
15039
|
top: `${item.topPct}%`,
|
|
14999
15040
|
transform: `translate(calc(-50% + ${item.offsetX || 0}px), calc(-50% + ${item.offsetY || 0}px)) rotate(${-rotation}deg)`,
|
|
15000
15041
|
zIndex: openType === item.type ? 10000 : containerZIndex,
|
|
15001
15042
|
pointerEvents: onlyRead ? 'none' : 'auto',
|
|
15002
|
-
}, children: [jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$
|
|
15043
|
+
}, children: [jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$6.icon}`, style: {}, onClick: (e) => {
|
|
15003
15044
|
e.stopPropagation();
|
|
15004
15045
|
if (onlyRead)
|
|
15005
15046
|
return;
|
|
@@ -15014,7 +15055,7 @@ const Antennas = React__default.memo(({ editMap, antennaConfig = [], viewBox, ro
|
|
|
15014
15055
|
return;
|
|
15015
15056
|
e.currentTarget.style.transform =
|
|
15016
15057
|
'scale(1)';
|
|
15017
|
-
}, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxs("div", { className: styles$
|
|
15058
|
+
}, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxs("div", { className: styles$6.tooltip, style: {
|
|
15018
15059
|
display: openType === item.type ? 'block' : 'none',
|
|
15019
15060
|
minWidth: item.tooltip.minWidth,
|
|
15020
15061
|
}, children: [jsx("div", { style: { marginBottom: 4, fontWeight: 600 }, children: item.tooltip.title }), jsxs("div", { style: { color: 'rgba(65, 93, 116, 1)', fontWeight: 400 }, children: [item.tooltip.statusText, item.tooltip.syncText || ''] })] })] }, `antenna-${item.type}`))) }));
|
|
@@ -15078,25 +15119,25 @@ const VertexElement = React__default.memo(({ r, stroke, fill, ...props }) => {
|
|
|
15078
15119
|
return (jsx("circle", { r: platform === PlatformType.H5 ? (radius * overlayScale) / 2 : radius * overlayScale, stroke: stroke || '#fff', fill: fill || '#fff', strokeWidth: 2 * overlayScale, ...props }));
|
|
15079
15120
|
});
|
|
15080
15121
|
|
|
15081
|
-
var _path$
|
|
15082
|
-
function _extends$
|
|
15122
|
+
var _path$5;
|
|
15123
|
+
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); }
|
|
15083
15124
|
var SvgDelete = function SvgDelete(props) {
|
|
15084
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
15125
|
+
return /*#__PURE__*/React.createElement("svg", _extends$b({
|
|
15085
15126
|
xmlns: "http://www.w3.org/2000/svg",
|
|
15086
15127
|
width: 16,
|
|
15087
15128
|
height: 16,
|
|
15088
15129
|
fill: "none"
|
|
15089
|
-
}, props), _path$
|
|
15130
|
+
}, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
|
|
15090
15131
|
fill: "#FD494D",
|
|
15091
15132
|
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"
|
|
15092
15133
|
})));
|
|
15093
15134
|
};
|
|
15094
15135
|
|
|
15095
|
-
const DragDistanceIndicator = ({ fontSize, dragState, strokeColor, editMode = false, createMode = false, completed = false, }) => {
|
|
15136
|
+
const DragDistanceIndicator = ({ fontSize, dragState, strokeColor, editMode = false, createMode = false, completed = false, unitType = UnitsType.Metric, }) => {
|
|
15096
15137
|
// 计算两点间的距离(使用通用工具函数)
|
|
15097
15138
|
const calculateDistance$1 = React__default.useCallback((point1, point2) => {
|
|
15098
15139
|
const distance = calculateDistance(point1, point2);
|
|
15099
|
-
const result = convertDistanceByUnits(distance / 50);
|
|
15140
|
+
const result = convertDistanceByUnits(distance / 50, unitType);
|
|
15100
15141
|
return result.value;
|
|
15101
15142
|
}, []);
|
|
15102
15143
|
// 计算点到线段的垂足坐标(使用通用工具函数)
|
|
@@ -15197,12 +15238,13 @@ const TextElement = ({ x, y, fontSize = 30, fill = '#fff', text, background = 'r
|
|
|
15197
15238
|
* @param point2 第二个点 [x, y]
|
|
15198
15239
|
* @returns 距离(mi单位)
|
|
15199
15240
|
*/
|
|
15200
|
-
const calculatePhysicalDistance$1 = (point1, point2) => {
|
|
15241
|
+
const calculatePhysicalDistance$1 = (point1, point2, unit) => {
|
|
15201
15242
|
const dx = point2[0] - point1[0];
|
|
15202
15243
|
const dy = point2[1] - point1[1];
|
|
15203
15244
|
const svgDistance = Math.sqrt(dx * dx + dy * dy);
|
|
15204
15245
|
const physicalDistance = svgDistance / 50; // SVG坐标是物理单位的50倍
|
|
15205
|
-
return physicalDistance.toFixed(2) + ' m';
|
|
15246
|
+
// return physicalDistance.toFixed(2) + ' m';
|
|
15247
|
+
return convertDistanceByUnits(physicalDistance, unit).value;
|
|
15206
15248
|
};
|
|
15207
15249
|
/**
|
|
15208
15250
|
* 计算两点间的中点坐标
|
|
@@ -15213,7 +15255,8 @@ const calculatePhysicalDistance$1 = (point1, point2) => {
|
|
|
15213
15255
|
const calculateMidpoint$1 = (point1, point2) => {
|
|
15214
15256
|
return [(point1[0] + point2[0]) / 2, (point1[1] + point2[1]) / 2];
|
|
15215
15257
|
};
|
|
15216
|
-
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, }) => {
|
|
15258
|
+
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, }) => {
|
|
15259
|
+
const { drag } = useCommonContext();
|
|
15217
15260
|
// 只在显示可操作顶点时显示距离
|
|
15218
15261
|
if (!((createMode && showPoints) || editMode || (createMode && completed)) ||
|
|
15219
15262
|
coordinates.length < (showFirstDistance ? 1 : 2)) {
|
|
@@ -15227,7 +15270,7 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
|
|
|
15227
15270
|
return null;
|
|
15228
15271
|
}
|
|
15229
15272
|
const midpoint = calculateMidpoint$1(coord, nextCoord);
|
|
15230
|
-
const distance = calculatePhysicalDistance$1(coord, nextCoord);
|
|
15273
|
+
const distance = calculatePhysicalDistance$1(coord, nextCoord, unit);
|
|
15231
15274
|
// 如果当前点和下一个点坐标一致则不现实,处理头尾点一样的问题
|
|
15232
15275
|
if (coord[0] === nextCoord[0] && coord[1] === nextCoord[1]) {
|
|
15233
15276
|
return null;
|
|
@@ -15239,23 +15282,32 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
|
|
|
15239
15282
|
WebkitUserSelect: 'none',
|
|
15240
15283
|
WebkitTouchCallout: 'none',
|
|
15241
15284
|
touchAction: 'none',
|
|
15285
|
+
transformBox: 'fill-box',
|
|
15286
|
+
transformOrigin: 'center',
|
|
15287
|
+
transform: `rotate(-${drag.rotation}deg)`,
|
|
15242
15288
|
}, text: distance }, `distance-${idx}`));
|
|
15243
15289
|
}), ghostLastDistance && ghostLastMidpoint && (jsx(TextElement, { fontSize: fontSize, x: ghostLastMidpoint[0], y: ghostLastMidpoint[1], text: ghostLastDistance, style: {
|
|
15244
15290
|
userSelect: 'none',
|
|
15245
15291
|
WebkitUserSelect: 'none',
|
|
15246
15292
|
WebkitTouchCallout: 'none',
|
|
15247
15293
|
touchAction: 'none',
|
|
15294
|
+
transformBox: 'fill-box',
|
|
15295
|
+
transformOrigin: 'center',
|
|
15296
|
+
transform: `rotate(-${drag.rotation}deg)`,
|
|
15248
15297
|
} })), ghostFirstDistance && ghostFirstMidpoint && (jsx(TextElement, { fontSize: fontSize, x: ghostFirstMidpoint[0], y: ghostFirstMidpoint[1], text: ghostFirstDistance, style: {
|
|
15249
15298
|
userSelect: 'none',
|
|
15250
15299
|
WebkitUserSelect: 'none',
|
|
15251
15300
|
WebkitTouchCallout: 'none',
|
|
15252
15301
|
touchAction: 'none',
|
|
15302
|
+
transformBox: 'fill-box',
|
|
15303
|
+
transformOrigin: 'center',
|
|
15304
|
+
transform: `rotate(-${drag.rotation}deg)`,
|
|
15253
15305
|
} }))] }));
|
|
15254
15306
|
};
|
|
15255
15307
|
|
|
15256
|
-
var css_248z$
|
|
15257
|
-
var styles$
|
|
15258
|
-
styleInject(css_248z$
|
|
15308
|
+
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}";
|
|
15309
|
+
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"};
|
|
15310
|
+
styleInject(css_248z$5);
|
|
15259
15311
|
|
|
15260
15312
|
var CreateStatus;
|
|
15261
15313
|
(function (CreateStatus) {
|
|
@@ -15283,6 +15335,10 @@ var ClickEventType;
|
|
|
15283
15335
|
(function (ClickEventType) {
|
|
15284
15336
|
// 点击doodle的active time的时候触发
|
|
15285
15337
|
ClickEventType["DOODLE_ACTIVE_TIME"] = "doodleActiveTime";
|
|
15338
|
+
// 移动禁区点之后报错
|
|
15339
|
+
ClickEventType["MOVE_OBSTACLE_POINT_ERROR"] = "moveObstaclePointError";
|
|
15340
|
+
// 拖拽地图
|
|
15341
|
+
ClickEventType["DRAG_MAP"] = "dragMap";
|
|
15286
15342
|
})(ClickEventType || (ClickEventType = {}));
|
|
15287
15343
|
const INIT_EDIT_MAP_INFO = {
|
|
15288
15344
|
editMap: false,
|
|
@@ -15546,17 +15602,24 @@ function coordinatesToPoints$1(coordinates) {
|
|
|
15546
15602
|
|
|
15547
15603
|
const useCheckElement = () => {
|
|
15548
15604
|
const { editMapInfo, minDistance } = useMapEditContext();
|
|
15549
|
-
const { platform } = useCommonContext();
|
|
15550
15605
|
const { svgElementDatas } = useSvgEditContext();
|
|
15551
15606
|
const checkDoodle = useCallback(() => {
|
|
15552
15607
|
console.log('checkdoodle', editMapInfo, svgElementDatas);
|
|
15553
15608
|
if (!editMapInfo.selectElement || editMapInfo.selectElement.type !== DataType.DOODLE) {
|
|
15554
|
-
return {
|
|
15609
|
+
return {
|
|
15610
|
+
isValid: false,
|
|
15611
|
+
reason: 'No doodle element selected',
|
|
15612
|
+
code: CheckDoodleErrorType.NO_DOODLE_SELECTED,
|
|
15613
|
+
};
|
|
15555
15614
|
}
|
|
15556
15615
|
const doodleElement = editMapInfo.selectElement;
|
|
15557
15616
|
const doodlePoints = transformSvgElements(doodleElement).flat();
|
|
15558
15617
|
if (doodlePoints.length === 0) {
|
|
15559
|
-
return {
|
|
15618
|
+
return {
|
|
15619
|
+
isValid: false,
|
|
15620
|
+
reason: 'Doodle has no transformed points',
|
|
15621
|
+
code: CheckDoodleErrorType.NO_MOVABLE_POINTS,
|
|
15622
|
+
};
|
|
15560
15623
|
}
|
|
15561
15624
|
const boundary = svgElementDatas?.[DataType.BOUNDARY] || [];
|
|
15562
15625
|
const obstacle = svgElementDatas?.[DataType.OBSTACLE] || [];
|
|
@@ -15584,7 +15647,11 @@ const useCheckElement = () => {
|
|
|
15584
15647
|
}
|
|
15585
15648
|
}
|
|
15586
15649
|
if (!isInBoundary) {
|
|
15587
|
-
return {
|
|
15650
|
+
return {
|
|
15651
|
+
isValid: false,
|
|
15652
|
+
reason: 'Doodle 不在任何边界内',
|
|
15653
|
+
code: CheckDoodleErrorType.DOODLE_NOT_IN_BOUNDARY,
|
|
15654
|
+
};
|
|
15588
15655
|
}
|
|
15589
15656
|
// 2. 检查 doodle 所有点距离 boundary 边界至少 2m
|
|
15590
15657
|
const boundaryPoints = coordinatesToPoints$1(containingBoundary.points);
|
|
@@ -15594,6 +15661,7 @@ const useCheckElement = () => {
|
|
|
15594
15661
|
return {
|
|
15595
15662
|
isValid: false,
|
|
15596
15663
|
reason: `Doodle 距离边界过近 (${distanceToBoundary.toFixed(2) / SCALE_FACTOR}m < ${minDistance / SCALE_FACTOR}m)`,
|
|
15664
|
+
code: CheckDoodleErrorType.DOODLE_DISTANCE_TOO_CLOSE,
|
|
15597
15665
|
};
|
|
15598
15666
|
}
|
|
15599
15667
|
}
|
|
@@ -15624,6 +15692,7 @@ const useCheckElement = () => {
|
|
|
15624
15692
|
return {
|
|
15625
15693
|
isValid: false,
|
|
15626
15694
|
reason: `Doodle 与${elementTypeName}相交或重叠`,
|
|
15695
|
+
code: CheckDoodleErrorType.DOODLE_INTERSECT,
|
|
15627
15696
|
};
|
|
15628
15697
|
}
|
|
15629
15698
|
// 检查距离是否大于 2m
|
|
@@ -15639,6 +15708,7 @@ const useCheckElement = () => {
|
|
|
15639
15708
|
return {
|
|
15640
15709
|
isValid: false,
|
|
15641
15710
|
reason: `Doodle 与${elementTypeName}距离过近 (${distance.toFixed(2) / SCALE_FACTOR}m < ${minDistance / SCALE_FACTOR}m)`,
|
|
15711
|
+
code: CheckDoodleErrorType.DOODLE_DISTANCE_TOO_CLOSE_TO_OTHER_ELEMENT,
|
|
15642
15712
|
};
|
|
15643
15713
|
}
|
|
15644
15714
|
}
|
|
@@ -15649,7 +15719,7 @@ const useCheckElement = () => {
|
|
|
15649
15719
|
const checkCanNotCreateAtPosition = useCallback((checkPoint, checkPoints) => {
|
|
15650
15720
|
// console.log('editMapInfo.elementType--->', editMapInfo);
|
|
15651
15721
|
if (!editMapInfo.elementType)
|
|
15652
|
-
return false;
|
|
15722
|
+
return { result: false };
|
|
15653
15723
|
const currentPoints = editMapInfo?.selectElement?.points;
|
|
15654
15724
|
const points = checkPoints || currentPoints;
|
|
15655
15725
|
const firstPoint = coordinatesToPoints$1(points)?.[0] || checkPoint;
|
|
@@ -15666,18 +15736,22 @@ const useCheckElement = () => {
|
|
|
15666
15736
|
}
|
|
15667
15737
|
console.log('currentBoundary--->', currentBoundary, points);
|
|
15668
15738
|
if (!currentBoundary)
|
|
15669
|
-
return
|
|
15739
|
+
return {
|
|
15740
|
+
result: true,
|
|
15741
|
+
code: CheckObstaclePointErrorType.BOUNDARY_NOT_IN_BOUNDARY,
|
|
15742
|
+
};
|
|
15670
15743
|
if (!isPointInPolygon(checkPoint, coordinatesToPoints$1(currentBoundary.points)))
|
|
15671
|
-
return
|
|
15744
|
+
return {
|
|
15745
|
+
result: true,
|
|
15746
|
+
code: CheckObstaclePointErrorType.POINT_IN_OBSTACLE,
|
|
15747
|
+
};
|
|
15672
15748
|
// 如果不是创建 obstacle,则不需要进一步检查
|
|
15673
15749
|
if (editMapInfo.elementType !== DataType.OBSTACLE)
|
|
15674
|
-
return
|
|
15750
|
+
return {
|
|
15751
|
+
result: false,
|
|
15752
|
+
};
|
|
15675
15753
|
// 获取当前正在创建的 obstacle 的点
|
|
15676
15754
|
const currentObstaclePoints = coordinatesToPoints$1(points) || [];
|
|
15677
|
-
if (platform !== PlatformType.H5) {
|
|
15678
|
-
if (currentObstaclePoints.length === 0)
|
|
15679
|
-
return false; // 还没有开始绘制
|
|
15680
|
-
}
|
|
15681
15755
|
// 构建当前 obstacle 的多边形(包括检查点位置)
|
|
15682
15756
|
const currentObstaclePolygon = [...currentObstaclePoints, checkPoint];
|
|
15683
15757
|
// 获取当前边界内的所有元素
|
|
@@ -15696,7 +15770,10 @@ const useCheckElement = () => {
|
|
|
15696
15770
|
const obstaclePoints = coordinatesToPoints$1(obstacle.points);
|
|
15697
15771
|
if (doPolygonsIntersect(currentObstaclePolygon, obstaclePoints)) {
|
|
15698
15772
|
console.log('Obstacle intersection detected with:', obstacle);
|
|
15699
|
-
return
|
|
15773
|
+
return {
|
|
15774
|
+
result: true,
|
|
15775
|
+
code: CheckObstaclePointErrorType.OBSTACLE_INTERSECT,
|
|
15776
|
+
};
|
|
15700
15777
|
}
|
|
15701
15778
|
}
|
|
15702
15779
|
// 3. 找到在 currentBoundary 内的 doodle 元素
|
|
@@ -15712,17 +15789,25 @@ const useCheckElement = () => {
|
|
|
15712
15789
|
// 检查相交
|
|
15713
15790
|
if (doPolygonsIntersect(currentObstaclePolygon, doodleTransformedPoints)) {
|
|
15714
15791
|
console.log('Obstacle-Doodle intersection detected with:', doodle);
|
|
15715
|
-
return
|
|
15792
|
+
return {
|
|
15793
|
+
result: true,
|
|
15794
|
+
code: CheckObstaclePointErrorType.DOODLE_INTERSECT,
|
|
15795
|
+
};
|
|
15716
15796
|
}
|
|
15717
15797
|
// 检查距离
|
|
15718
15798
|
const distance = polygonToPolygonDistance(currentObstaclePolygon, doodleTransformedPoints);
|
|
15719
15799
|
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15720
15800
|
if (distance < minDistance) {
|
|
15721
15801
|
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15722
|
-
return
|
|
15802
|
+
return {
|
|
15803
|
+
result: true,
|
|
15804
|
+
code: CheckObstaclePointErrorType.DOODLE_DISTANCE_TOO_CLOSE,
|
|
15805
|
+
};
|
|
15723
15806
|
}
|
|
15724
15807
|
}
|
|
15725
|
-
return
|
|
15808
|
+
return {
|
|
15809
|
+
result: false,
|
|
15810
|
+
};
|
|
15726
15811
|
}, [editMapInfo.selectElement, editMapInfo.elementType, svgElementDatas, minDistance]);
|
|
15727
15812
|
return {
|
|
15728
15813
|
checkDoodle,
|
|
@@ -15744,12 +15829,13 @@ const coordinatesToPoints = (coordinates) => {
|
|
|
15744
15829
|
* @param point2 第二个点 [x, y]
|
|
15745
15830
|
* @returns 距离(mi单位)
|
|
15746
15831
|
*/
|
|
15747
|
-
const calculatePhysicalDistance = (point1, point2) => {
|
|
15832
|
+
const calculatePhysicalDistance = (point1, point2, unit) => {
|
|
15748
15833
|
const dx = point2[0] - point1[0];
|
|
15749
15834
|
const dy = point2[1] - point1[1];
|
|
15750
15835
|
const svgDistance = Math.sqrt(dx * dx + dy * dy);
|
|
15751
15836
|
const physicalDistance = svgDistance / 50; // SVG坐标是物理单位的50倍
|
|
15752
|
-
return physicalDistance.toFixed(2) + ' m';
|
|
15837
|
+
// return physicalDistance.toFixed(2) + ' m';
|
|
15838
|
+
return convertDistanceByUnits(physicalDistance, unit).value;
|
|
15753
15839
|
};
|
|
15754
15840
|
/**
|
|
15755
15841
|
* 计算两点间的中点坐标
|
|
@@ -15820,7 +15906,8 @@ const createPathData = (points) => {
|
|
|
15820
15906
|
};
|
|
15821
15907
|
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自动判断
|
|
15822
15908
|
}) => {
|
|
15823
|
-
const { overlayScale } = useCommonContext();
|
|
15909
|
+
const { overlayScale, unitType } = useCommonContext();
|
|
15910
|
+
const { onHandleEvent } = useMapEditContext();
|
|
15824
15911
|
const { svgRef } = useSvgEditContext();
|
|
15825
15912
|
const [dragState, setDragState] = useState({
|
|
15826
15913
|
isDragging: false,
|
|
@@ -15839,16 +15926,16 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
15839
15926
|
const { editMapInfo } = useMapEditContext();
|
|
15840
15927
|
const { platform } = useCommonContext();
|
|
15841
15928
|
// delete icon可能被上一个点遮挡,因为delete在右上方,所以手动处理点让点按照顺时针渲染,这样delete icon层级就会高一些
|
|
15842
|
-
//
|
|
15929
|
+
// 编辑的场景禁区的点最后一个和第一个相同,会导致一个位置渲染两个点,需要额外处理下
|
|
15843
15930
|
const coordinates = useMemo(() => {
|
|
15844
15931
|
const temp = editMapInfo?.createMode === CreateStatus.CREATING ? points : [...points].reverse();
|
|
15845
15932
|
const firstPoint = temp[0] || [];
|
|
15846
15933
|
const lastPoint = temp[temp.length - 1] || [];
|
|
15847
|
-
if (firstPoint[0] === lastPoint[0] && firstPoint[1] === lastPoint[1]) {
|
|
15934
|
+
if (firstPoint[0] === lastPoint[0] && firstPoint[1] === lastPoint[1] && editMapInfo?.editMap) {
|
|
15848
15935
|
return temp.slice(0, -1);
|
|
15849
15936
|
}
|
|
15850
15937
|
return temp;
|
|
15851
|
-
}, [points, editMapInfo?.createMode]);
|
|
15938
|
+
}, [points, editMapInfo?.createMode, editMapInfo?.editMap]);
|
|
15852
15939
|
// 计算点到线段的垂足坐标(使用通用工具函数)
|
|
15853
15940
|
const calculatePerpendicularFoot$1 = useCallback((point, lineStart, lineEnd) => {
|
|
15854
15941
|
return calculatePerpendicularFoot(point, lineStart, lineEnd);
|
|
@@ -16080,19 +16167,19 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16080
16167
|
return (checkCanNotCreateAtPosition?.({
|
|
16081
16168
|
x: dragState.currentPosition[0],
|
|
16082
16169
|
y: dragState.currentPosition[1],
|
|
16083
|
-
}) === true);
|
|
16170
|
+
}).result === true);
|
|
16084
16171
|
const prePoints = coordinates.slice(0, dragState.dragIndex);
|
|
16085
16172
|
const afterPoints = coordinates.slice(dragState.dragIndex + 1);
|
|
16086
16173
|
const checkPoints = [...prePoints, dragState.currentPosition, ...afterPoints];
|
|
16087
16174
|
return (checkCanNotCreateAtPosition?.({
|
|
16088
16175
|
x: dragState.currentPosition[0],
|
|
16089
16176
|
y: dragState.currentPosition[1],
|
|
16090
|
-
}, checkPoints) === true);
|
|
16177
|
+
}, checkPoints).result === true);
|
|
16091
16178
|
}, [dragState.currentPosition, checkCanNotCreateAtPosition, coordinates]);
|
|
16092
16179
|
const generateVertexClassName = useMemo(() => {
|
|
16093
16180
|
if (!dragState.isDragging)
|
|
16094
|
-
return styles$
|
|
16095
|
-
return showNotCreateCursor ? styles$
|
|
16181
|
+
return styles$5.vertex;
|
|
16182
|
+
return showNotCreateCursor ? styles$5.notCreate : styles$5.dragging;
|
|
16096
16183
|
}, [dragState.isDragging, showNotCreateCursor]);
|
|
16097
16184
|
// 使用 useRef 来存储 requestAnimationFrame ID
|
|
16098
16185
|
const rafIdRef = useRef(null);
|
|
@@ -16214,7 +16301,15 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16214
16301
|
? newCoordinates
|
|
16215
16302
|
: newCoordinates.reverse();
|
|
16216
16303
|
if (showNotCreateCursor) {
|
|
16217
|
-
|
|
16304
|
+
if (platform === PlatformType.H5) {
|
|
16305
|
+
onHandleEvent?.(ClickEventType.MOVE_OBSTACLE_POINT_ERROR, {
|
|
16306
|
+
result: true,
|
|
16307
|
+
code: CheckObstaclePointErrorType.COMMON_ERROR,
|
|
16308
|
+
});
|
|
16309
|
+
}
|
|
16310
|
+
else {
|
|
16311
|
+
message.error('Unable to place here, please select a valid spot');
|
|
16312
|
+
}
|
|
16218
16313
|
}
|
|
16219
16314
|
else {
|
|
16220
16315
|
onCoordinatesChange?.(result);
|
|
@@ -16286,7 +16381,12 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16286
16381
|
]);
|
|
16287
16382
|
// 获取当前渲染用的坐标
|
|
16288
16383
|
const renderCoordinates = getRenderCoordinates();
|
|
16289
|
-
const polygonPoints =
|
|
16384
|
+
const polygonPoints = useMemo(() => {
|
|
16385
|
+
const points = editMapInfo?.createMode === CreateStatus.CREATING
|
|
16386
|
+
? [...renderCoordinates, mousePos ? [mousePos.x, mousePos.y] : []]
|
|
16387
|
+
: renderCoordinates;
|
|
16388
|
+
return coordinatesToPoints(points);
|
|
16389
|
+
}, [editMapInfo?.createMode, renderCoordinates, mousePos]);
|
|
16290
16390
|
// 按type分组坐标点 - 创建模式下不自动闭合
|
|
16291
16391
|
const pathSegments = groupCoordinatesByType(renderCoordinates, !createMode || completed);
|
|
16292
16392
|
const dashPaths = pathSegments.filter((segment) => segment.type === 1);
|
|
@@ -16299,13 +16399,10 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16299
16399
|
: null;
|
|
16300
16400
|
// 虚拟连线的距离计算
|
|
16301
16401
|
const ghostLastDistance = createMode && mousePos && renderCoordinates.length > 0 && !completed
|
|
16302
|
-
? calculatePhysicalDistance(renderCoordinates[renderCoordinates.length - 1], [
|
|
16303
|
-
mousePos.x,
|
|
16304
|
-
mousePos.y,
|
|
16305
|
-
])
|
|
16402
|
+
? calculatePhysicalDistance(renderCoordinates[renderCoordinates.length - 1], [mousePos.x, mousePos.y], unitType)
|
|
16306
16403
|
: null;
|
|
16307
16404
|
const ghostFirstDistance = createMode && mousePos && !completed && renderCoordinates.length >= 1
|
|
16308
|
-
? calculatePhysicalDistance(renderCoordinates[0], [mousePos.x, mousePos.y])
|
|
16405
|
+
? calculatePhysicalDistance(renderCoordinates[0], [mousePos.x, mousePos.y], unitType)
|
|
16309
16406
|
: null;
|
|
16310
16407
|
// 虚拟连线的中点坐标
|
|
16311
16408
|
const ghostLastMidpoint = createMode && mousePos && renderCoordinates.length > 0 && !completed
|
|
@@ -16361,25 +16458,25 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16361
16458
|
const prevIndex = (dragState.dragIndex - 1 + coordinates.length) % coordinates.length;
|
|
16362
16459
|
const nextIndex = (dragState.dragIndex + 1) % coordinates.length;
|
|
16363
16460
|
return (jsxs(Fragment, { children: [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" }), 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" })] }));
|
|
16364
|
-
})()] })), renderCoordinates.length >= 3 && (jsx("polygon", { className: styles$
|
|
16365
|
-
, onClick: onPolygonClick })), jsxs("g", { className: styles$
|
|
16461
|
+
})()] })), renderCoordinates.length >= 3 && (jsx("polygon", { className: editMapInfo?.createMode === CreateStatus.CREATING ? '' : styles$5.polygonPathG, points: polygonPoints, fill: fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
|
|
16462
|
+
, onClick: onPolygonClick })), jsxs("g", { className: styles$5.polygonPathG, children: [renderCoordinates.length >= 2 &&
|
|
16366
16463
|
pathSegments.map((segment, index) => {
|
|
16367
16464
|
if (segment.points.length < 2)
|
|
16368
16465
|
return null;
|
|
16369
16466
|
const pathData = createPathData(segment.points);
|
|
16370
16467
|
const isDash = segment.type === 1;
|
|
16371
|
-
return (jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: styles$
|
|
16468
|
+
return (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));
|
|
16372
16469
|
}), renderCoordinates.length >= 2 &&
|
|
16373
16470
|
dashPaths.map((segment, index) => {
|
|
16374
16471
|
if (segment.points.length < 2)
|
|
16375
16472
|
return null;
|
|
16376
|
-
return (jsx(DashPath, { className: styles$
|
|
16473
|
+
return (jsx(DashPath, { className: styles$5.polygonPath, points: segment.points, stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity }, index));
|
|
16377
16474
|
})] }), (editMode || (createMode && completed)) &&
|
|
16378
16475
|
renderCoordinates.length >= 2 &&
|
|
16379
16476
|
renderCoordinates.map((coord, index) => {
|
|
16380
16477
|
const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
|
|
16381
16478
|
const isDashPath = coord[2] === 1;
|
|
16382
|
-
return (jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: platform === PlatformType.H5 ? strokeWidth * 3 : strokeWidth, className: styles$
|
|
16479
|
+
return (jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: platform === PlatformType.H5 ? strokeWidth * 3 : strokeWidth, className: styles$5.addVertex, style: {
|
|
16383
16480
|
userSelect: 'none',
|
|
16384
16481
|
WebkitUserSelect: 'none',
|
|
16385
16482
|
WebkitTouchCallout: 'none',
|
|
@@ -16411,7 +16508,7 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16411
16508
|
setHoverVertex(null);
|
|
16412
16509
|
},
|
|
16413
16510
|
}) }, `edge-${index}`));
|
|
16414
|
-
}), ghostLastPath && (jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale, showFirstDistance: platform !== PlatformType.H5 }), hoverVertex && !dragState.isDragging && (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)) &&
|
|
16511
|
+
}), ghostLastPath && (jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale, unitType: unitType }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale, showFirstDistance: platform !== PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (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)) &&
|
|
16415
16512
|
renderCoordinates.map((coord, idx) => {
|
|
16416
16513
|
// 判断当前顶点的状态
|
|
16417
16514
|
const isLastPoint = idx === renderCoordinates.length - 1;
|
|
@@ -16594,17 +16691,7 @@ const BoundaryElement = ({ data }) => {
|
|
|
16594
16691
|
}));
|
|
16595
16692
|
}
|
|
16596
16693
|
}
|
|
16597
|
-
|
|
16598
|
-
if (editMapInfo?.selectElement)
|
|
16599
|
-
return;
|
|
16600
|
-
setEditMapInfo((prev) => ({
|
|
16601
|
-
...prev,
|
|
16602
|
-
selectElement: data,
|
|
16603
|
-
elementType: DataType.BOUNDARY,
|
|
16604
|
-
editMap: true,
|
|
16605
|
-
}));
|
|
16606
|
-
}
|
|
16607
|
-
}, [platform, data, editMapInfo]);
|
|
16694
|
+
}, [platform, data, editMapInfo, onSelectElement]);
|
|
16608
16695
|
return (jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16609
16696
|
onPathClick();
|
|
16610
16697
|
}, onCoordinatesChange: (coordinates) => {
|
|
@@ -16763,7 +16850,8 @@ const ObstacleElement = ({ data }) => {
|
|
|
16763
16850
|
if (platform === PlatformType.H5 &&
|
|
16764
16851
|
editMapInfo?.selectElement?.id === data.id &&
|
|
16765
16852
|
editMapInfo.mobileMode === MobileEditMode.START) {
|
|
16766
|
-
return dp2px((style.lineWidth ||
|
|
16853
|
+
return dp2px((style.lineWidth || 1) * 2);
|
|
16854
|
+
// return dp2px(((style.lineWidth as number) || 3) * 3);
|
|
16767
16855
|
}
|
|
16768
16856
|
return dp2px(style.lineWidth || 3);
|
|
16769
16857
|
}, [platform, style, editMapInfo]);
|
|
@@ -17223,15 +17311,15 @@ const useVisionOffTransform = (data, scaleConstraints
|
|
|
17223
17311
|
};
|
|
17224
17312
|
};
|
|
17225
17313
|
|
|
17226
|
-
var _g$
|
|
17227
|
-
function _extends$
|
|
17314
|
+
var _g$5, _defs$5;
|
|
17315
|
+
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); }
|
|
17228
17316
|
var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
17229
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
17317
|
+
return /*#__PURE__*/React.createElement("svg", _extends$a({
|
|
17230
17318
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17231
17319
|
width: 20,
|
|
17232
17320
|
height: 20,
|
|
17233
17321
|
fill: "none"
|
|
17234
|
-
}, props), _g$
|
|
17322
|
+
}, props), _g$5 || (_g$5 = /*#__PURE__*/React.createElement("g", {
|
|
17235
17323
|
clipPath: "url(#transform-delete_svg__a)"
|
|
17236
17324
|
}, /*#__PURE__*/React.createElement("circle", {
|
|
17237
17325
|
cx: 10,
|
|
@@ -17254,7 +17342,7 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
|
17254
17342
|
fill: "#fff",
|
|
17255
17343
|
rx: 0.8,
|
|
17256
17344
|
transform: "rotate(45 6.323 5.191)"
|
|
17257
|
-
}))), _defs$
|
|
17345
|
+
}))), _defs$5 || (_defs$5 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
|
|
17258
17346
|
id: "transform-delete_svg__b",
|
|
17259
17347
|
x1: 17.727,
|
|
17260
17348
|
x2: -1.215,
|
|
@@ -17274,15 +17362,15 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
|
17274
17362
|
})))));
|
|
17275
17363
|
};
|
|
17276
17364
|
|
|
17277
|
-
var _g$
|
|
17278
|
-
function _extends$
|
|
17365
|
+
var _g$4, _defs$4;
|
|
17366
|
+
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); }
|
|
17279
17367
|
var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
17280
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
17368
|
+
return /*#__PURE__*/React.createElement("svg", _extends$9({
|
|
17281
17369
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17282
17370
|
width: 21,
|
|
17283
17371
|
height: 20,
|
|
17284
17372
|
fill: "none"
|
|
17285
|
-
}, props), _g$
|
|
17373
|
+
}, props), _g$4 || (_g$4 = /*#__PURE__*/React.createElement("g", {
|
|
17286
17374
|
clipPath: "url(#transform-rotate_svg__a)"
|
|
17287
17375
|
}, /*#__PURE__*/React.createElement("path", {
|
|
17288
17376
|
fill: "url(#transform-rotate_svg__b)",
|
|
@@ -17290,7 +17378,7 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
|
17290
17378
|
}), /*#__PURE__*/React.createElement("path", {
|
|
17291
17379
|
fill: "#fff",
|
|
17292
17380
|
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"
|
|
17293
|
-
}))), _defs$
|
|
17381
|
+
}))), _defs$4 || (_defs$4 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
|
|
17294
17382
|
id: "transform-rotate_svg__b",
|
|
17295
17383
|
x1: 17.84,
|
|
17296
17384
|
x2: -1.103,
|
|
@@ -17310,15 +17398,15 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
|
17310
17398
|
})))));
|
|
17311
17399
|
};
|
|
17312
17400
|
|
|
17313
|
-
var _g$
|
|
17314
|
-
function _extends$
|
|
17401
|
+
var _g$3, _defs$3;
|
|
17402
|
+
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); }
|
|
17315
17403
|
var SvgTransformScale = function SvgTransformScale(props) {
|
|
17316
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
17404
|
+
return /*#__PURE__*/React.createElement("svg", _extends$8({
|
|
17317
17405
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17318
17406
|
width: 21,
|
|
17319
17407
|
height: 20,
|
|
17320
17408
|
fill: "none"
|
|
17321
|
-
}, props), _g$
|
|
17409
|
+
}, props), _g$3 || (_g$3 = /*#__PURE__*/React.createElement("g", {
|
|
17322
17410
|
clipPath: "url(#transform-scale_svg__a)"
|
|
17323
17411
|
}, /*#__PURE__*/React.createElement("path", {
|
|
17324
17412
|
fill: "url(#transform-scale_svg__b)",
|
|
@@ -17326,7 +17414,7 @@ var SvgTransformScale = function SvgTransformScale(props) {
|
|
|
17326
17414
|
}), /*#__PURE__*/React.createElement("path", {
|
|
17327
17415
|
fill: "#fff",
|
|
17328
17416
|
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"
|
|
17329
|
-
}))), _defs$
|
|
17417
|
+
}))), _defs$3 || (_defs$3 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
|
|
17330
17418
|
id: "transform-scale_svg__b",
|
|
17331
17419
|
x1: 17.84,
|
|
17332
17420
|
x2: -1.103,
|
|
@@ -17346,15 +17434,15 @@ var SvgTransformScale = function SvgTransformScale(props) {
|
|
|
17346
17434
|
})))));
|
|
17347
17435
|
};
|
|
17348
17436
|
|
|
17349
|
-
var _g, _defs;
|
|
17350
|
-
function _extends$
|
|
17437
|
+
var _g$2, _defs$2;
|
|
17438
|
+
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); }
|
|
17351
17439
|
var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
17352
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
17440
|
+
return /*#__PURE__*/React.createElement("svg", _extends$7({
|
|
17353
17441
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17354
17442
|
width: 20,
|
|
17355
17443
|
height: 20,
|
|
17356
17444
|
fill: "none"
|
|
17357
|
-
}, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
|
|
17445
|
+
}, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
|
|
17358
17446
|
clipPath: "url(#transform-translate_svg__a)"
|
|
17359
17447
|
}, /*#__PURE__*/React.createElement("circle", {
|
|
17360
17448
|
cx: 10,
|
|
@@ -17364,7 +17452,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
|
17364
17452
|
}), /*#__PURE__*/React.createElement("path", {
|
|
17365
17453
|
fill: "#fff",
|
|
17366
17454
|
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"
|
|
17367
|
-
}))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
|
|
17455
|
+
}))), _defs$2 || (_defs$2 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
|
|
17368
17456
|
id: "transform-translate_svg__b",
|
|
17369
17457
|
x1: 17.727,
|
|
17370
17458
|
x2: -1.215,
|
|
@@ -17386,7 +17474,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
|
17386
17474
|
|
|
17387
17475
|
const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCancel, onDragEnd, onDragMove, disabled = false, className = '', scaleConstraints = { minEdgeLength: 0.5, maxEdgeLength: 10000 }, showInfo = true, }) => {
|
|
17388
17476
|
const { overlayScale } = useCommonContext();
|
|
17389
|
-
const { platform } = useCommonContext();
|
|
17477
|
+
const { platform, unitType } = useCommonContext();
|
|
17390
17478
|
const { editMapInfo } = useMapEditContext();
|
|
17391
17479
|
const dataPoints = useMemo(() => {
|
|
17392
17480
|
return {
|
|
@@ -17410,10 +17498,10 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17410
17498
|
if (platform === PlatformType.H5) {
|
|
17411
17499
|
if (editMapInfo?.mobileMode === MobileEditMode.START &&
|
|
17412
17500
|
editMapInfo?.selectElement?.id === data.id) {
|
|
17413
|
-
return dp2px((style.lineWidth ||
|
|
17501
|
+
return dp2px((style.lineWidth || 1) * 2);
|
|
17414
17502
|
}
|
|
17415
17503
|
}
|
|
17416
|
-
return dp2px(style.lineWidth ||
|
|
17504
|
+
return dp2px(style.lineWidth || 1);
|
|
17417
17505
|
}, [style, platform, editMapInfo, data]);
|
|
17418
17506
|
// 初始化 - 无论是否选中都要初始化点坐标
|
|
17419
17507
|
useEffect(() => {
|
|
@@ -17581,7 +17669,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17581
17669
|
color: 'white',
|
|
17582
17670
|
fontWeight: '400',
|
|
17583
17671
|
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
17584
|
-
}, children: [dimensions.height, "
|
|
17672
|
+
}, children: [convertDistanceByUnits(dimensions.height, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.width, unitType).value] }) }))] }));
|
|
17585
17673
|
})()] }));
|
|
17586
17674
|
};
|
|
17587
17675
|
|
|
@@ -18042,15 +18130,15 @@ const useDoodleTransform = (data, onTransformChange, options) => {
|
|
|
18042
18130
|
};
|
|
18043
18131
|
};
|
|
18044
18132
|
|
|
18045
|
-
var _path$
|
|
18046
|
-
function _extends$
|
|
18133
|
+
var _path$4;
|
|
18134
|
+
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); }
|
|
18047
18135
|
var SvgTransformArrow = function SvgTransformArrow(props) {
|
|
18048
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
18136
|
+
return /*#__PURE__*/React.createElement("svg", _extends$6({
|
|
18049
18137
|
xmlns: "http://www.w3.org/2000/svg",
|
|
18050
18138
|
width: 7,
|
|
18051
18139
|
height: 11,
|
|
18052
18140
|
fill: "none"
|
|
18053
|
-
}, props), _path$
|
|
18141
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
|
|
18054
18142
|
fill: "#fff",
|
|
18055
18143
|
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",
|
|
18056
18144
|
opacity: 0.5
|
|
@@ -18112,7 +18200,7 @@ const DoodleTransform = ({ data, isSelected: _isSelected, onSelect }) => {
|
|
|
18112
18200
|
};
|
|
18113
18201
|
|
|
18114
18202
|
const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, onClickInfo, }) => {
|
|
18115
|
-
const { platform, overlayScale } = useCommonContext();
|
|
18203
|
+
const { platform, overlayScale, unitType } = useCommonContext();
|
|
18116
18204
|
// 使用自定义hook管理所有变换逻辑
|
|
18117
18205
|
const { currentCenter, currentScale, currentDirection, isDragging, isRotating, isScaling, initializeTransform, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, dimensions, } = useDoodleTransform(data, onTransformChange, {
|
|
18118
18206
|
minScale,
|
|
@@ -18376,7 +18464,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18376
18464
|
color: 'white',
|
|
18377
18465
|
fontWeight: '400',
|
|
18378
18466
|
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
18379
|
-
}, children: [jsxs("div", { children: [dimensions.width, "
|
|
18467
|
+
}, children: [jsxs("div", { children: [convertDistanceByUnits(dimensions.width, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.height, unitType).value] }), jsxs("div", { style: {
|
|
18380
18468
|
display: 'flex',
|
|
18381
18469
|
alignItems: 'center',
|
|
18382
18470
|
justifyContent: 'center',
|
|
@@ -18569,9 +18657,9 @@ const GElement = ({ type, children }) => {
|
|
|
18569
18657
|
return jsx("g", { id: `layer-${type}`, children: children }, type);
|
|
18570
18658
|
};
|
|
18571
18659
|
|
|
18572
|
-
var css_248z$
|
|
18573
|
-
var styles$
|
|
18574
|
-
styleInject(css_248z$
|
|
18660
|
+
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}";
|
|
18661
|
+
var styles$4 = {"mapEdit":"index-module_mapEdit__XC5Gw","createMode":"index-module_createMode__14EPH","notCreateCursor":"index-module_notCreateCursor__1-OjF"};
|
|
18662
|
+
styleInject(css_248z$4);
|
|
18575
18663
|
|
|
18576
18664
|
var classnames = {exports: {}};
|
|
18577
18665
|
|
|
@@ -19594,7 +19682,7 @@ function usePolygonDrawing(options = {}) {
|
|
|
19594
19682
|
const p = getSvgPoint(svgEl, e.clientX, e.clientY);
|
|
19595
19683
|
if (!p)
|
|
19596
19684
|
return;
|
|
19597
|
-
if (checkCanNotCreateAtPosition(p)) {
|
|
19685
|
+
if (checkCanNotCreateAtPosition(p)?.result) {
|
|
19598
19686
|
message.error('Unable to place here, please select a valid spot');
|
|
19599
19687
|
return;
|
|
19600
19688
|
}
|
|
@@ -19768,24 +19856,38 @@ const CreateObstacleElement = forwardRef(({ enabled = false, svgElement, onPoint
|
|
|
19768
19856
|
const addPoint = useCallback(() => {
|
|
19769
19857
|
if (!enabled || !svgElement) {
|
|
19770
19858
|
console.warn('未启用创建模式或SVG元素不存在');
|
|
19771
|
-
return {
|
|
19859
|
+
return {
|
|
19860
|
+
isValid: false,
|
|
19861
|
+
reason: '未启用创建模式或SVG元素不存在',
|
|
19862
|
+
code: CheckObstaclePointErrorType.COMMON_ERROR,
|
|
19863
|
+
};
|
|
19772
19864
|
}
|
|
19773
19865
|
if (!mapRef) {
|
|
19774
19866
|
console.warn('地图实例不存在');
|
|
19775
|
-
return {
|
|
19867
|
+
return {
|
|
19868
|
+
isValid: false,
|
|
19869
|
+
reason: '地图实例不存在',
|
|
19870
|
+
code: CheckObstaclePointErrorType.MAP_NOT_EXIST,
|
|
19871
|
+
};
|
|
19776
19872
|
}
|
|
19777
19873
|
const centerPoint = getScreenCenterSvgPoint(svgElement, mapRef);
|
|
19778
19874
|
if (!centerPoint) {
|
|
19779
19875
|
console.warn('无法获取屏幕中心点的SVG坐标或点不在SVG可见区域内');
|
|
19780
|
-
return {
|
|
19876
|
+
return {
|
|
19877
|
+
isValid: false,
|
|
19878
|
+
reason: '无法获取屏幕中心点的SVG坐标或点不在SVG可见区域内',
|
|
19879
|
+
code: CheckObstaclePointErrorType.GET_POINT_FAILED,
|
|
19880
|
+
};
|
|
19781
19881
|
}
|
|
19782
19882
|
console.error('centerPoint--->', centerPoint);
|
|
19783
|
-
console.error('checkCanNotCreateAtPosition--->', checkCanNotCreateAtPosition(centerPoint));
|
|
19883
|
+
console.error('checkCanNotCreateAtPosition--->', checkCanNotCreateAtPosition(centerPoint).result);
|
|
19784
19884
|
// 校验是否能打点
|
|
19785
|
-
|
|
19885
|
+
const checkResult = checkCanNotCreateAtPosition(centerPoint);
|
|
19886
|
+
if (checkResult.result) {
|
|
19786
19887
|
return {
|
|
19787
19888
|
isValid: false,
|
|
19788
|
-
reason: '
|
|
19889
|
+
reason: '',
|
|
19890
|
+
code: checkResult.code || CheckObstaclePointErrorType.COMMON_ERROR,
|
|
19789
19891
|
};
|
|
19790
19892
|
}
|
|
19791
19893
|
const newPoints = [...points, centerPoint];
|
|
@@ -19826,7 +19928,7 @@ const CreateObstacleElement = forwardRef(({ enabled = false, svgElement, onPoint
|
|
|
19826
19928
|
if (!enabled || points.length === 0) {
|
|
19827
19929
|
return null;
|
|
19828
19930
|
}
|
|
19829
|
-
return (jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth:
|
|
19931
|
+
return (jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 1, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
|
|
19830
19932
|
});
|
|
19831
19933
|
CreateObstacleElement.displayName = 'CreateObstacleElement';
|
|
19832
19934
|
|
|
@@ -20121,11 +20223,11 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
|
|
|
20121
20223
|
const showNotCreateCursor = useMemo(() => {
|
|
20122
20224
|
if (!mousePos)
|
|
20123
20225
|
return false;
|
|
20124
|
-
return checkCanNotCreateAtPosition(mousePos);
|
|
20226
|
+
return checkCanNotCreateAtPosition(mousePos)?.result ?? false;
|
|
20125
20227
|
}, [mousePos, checkCanNotCreateAtPosition]);
|
|
20126
|
-
return (jsx("div", { ref: containerRef, className: classNames(styles$
|
|
20127
|
-
[styles$
|
|
20128
|
-
[styles$
|
|
20228
|
+
return (jsx("div", { ref: containerRef, className: classNames(styles$4.mapEdit, {
|
|
20229
|
+
[styles$4.createMode]: isCreating,
|
|
20230
|
+
[styles$4.notCreateCursor]: showNotCreateCursor,
|
|
20129
20231
|
}), style: {
|
|
20130
20232
|
display: editMap ? 'block' : 'none',
|
|
20131
20233
|
}, children: jsxs("svg", { style: {
|
|
@@ -20223,15 +20325,15 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
|
|
|
20223
20325
|
});
|
|
20224
20326
|
SvgEditMap.displayName = 'SvgEditMap';
|
|
20225
20327
|
|
|
20226
|
-
var _path;
|
|
20227
|
-
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); }
|
|
20328
|
+
var _path$3;
|
|
20329
|
+
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); }
|
|
20228
20330
|
var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
|
|
20229
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
20331
|
+
return /*#__PURE__*/React.createElement("svg", _extends$5({
|
|
20230
20332
|
xmlns: "http://www.w3.org/2000/svg",
|
|
20231
20333
|
width: 36,
|
|
20232
20334
|
height: 36,
|
|
20233
20335
|
fill: "none"
|
|
20234
|
-
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
20336
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
|
|
20235
20337
|
stroke: "#fff",
|
|
20236
20338
|
strokeLinecap: "round",
|
|
20237
20339
|
strokeLinejoin: "round",
|
|
@@ -20240,9 +20342,9 @@ var SvgMobileAddPoint = function SvgMobileAddPoint(props) {
|
|
|
20240
20342
|
})));
|
|
20241
20343
|
};
|
|
20242
20344
|
|
|
20243
|
-
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}";
|
|
20244
|
-
var styles = {"crosshair":"index-module_crosshair__etey6"};
|
|
20245
|
-
styleInject(css_248z);
|
|
20345
|
+
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}";
|
|
20346
|
+
var styles$3 = {"crosshair":"index-module_crosshair__etey6"};
|
|
20347
|
+
styleInject(css_248z$3);
|
|
20246
20348
|
|
|
20247
20349
|
/**
|
|
20248
20350
|
* 十字准心组件
|
|
@@ -20259,7 +20361,460 @@ const Crosshair = () => {
|
|
|
20259
20361
|
}
|
|
20260
20362
|
return false;
|
|
20261
20363
|
}, [platform, editMapInfo]);
|
|
20262
|
-
return isVisible ? (jsx("div", { className: styles.crosshair, children: jsx(SvgMobileAddPoint, {}) })) : null;
|
|
20364
|
+
return isVisible ? (jsx("div", { className: styles$3.crosshair, children: jsx(SvgMobileAddPoint, {}) })) : null;
|
|
20365
|
+
};
|
|
20366
|
+
|
|
20367
|
+
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}";
|
|
20368
|
+
var styles$2 = {"addEntry":"index-module_addEntry__QsQHD","icon":"index-module_icon__qIgA4","addItem":"index-module_addItem__mglwZ","label":"index-module_label__QqZ-9"};
|
|
20369
|
+
styleInject(css_248z$2);
|
|
20370
|
+
|
|
20371
|
+
var _rect$2, _path$2, _defs$1;
|
|
20372
|
+
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); }
|
|
20373
|
+
var SvgAddEntry = function SvgAddEntry(props) {
|
|
20374
|
+
return /*#__PURE__*/React.createElement("svg", _extends$4({
|
|
20375
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20376
|
+
width: 24,
|
|
20377
|
+
height: 24,
|
|
20378
|
+
fill: "none"
|
|
20379
|
+
}, props), _rect$2 || (_rect$2 = /*#__PURE__*/React.createElement("rect", {
|
|
20380
|
+
width: 10.95,
|
|
20381
|
+
height: 10.95,
|
|
20382
|
+
x: 10.613,
|
|
20383
|
+
y: 3.15,
|
|
20384
|
+
fill: "#1F1F1F",
|
|
20385
|
+
stroke: "url(#add-entry_svg__a)",
|
|
20386
|
+
strokeWidth: 0.3,
|
|
20387
|
+
opacity: 0.795,
|
|
20388
|
+
rx: 1.05
|
|
20389
|
+
})), /*#__PURE__*/React.createElement("foreignObject", {
|
|
20390
|
+
width: 23.468,
|
|
20391
|
+
height: 20.501,
|
|
20392
|
+
x: -1.543,
|
|
20393
|
+
y: 3.499
|
|
20394
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
20395
|
+
xmlns: "http://www.w3.org/1999/xhtml",
|
|
20396
|
+
style: {
|
|
20397
|
+
backdropFilter: "blur(1.63px)",
|
|
20398
|
+
clipPath: "url(#add-entry_svg__b)",
|
|
20399
|
+
height: "100%",
|
|
20400
|
+
width: "100%"
|
|
20401
|
+
}
|
|
20402
|
+
})), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
|
|
20403
|
+
fill: "#1F1F1F",
|
|
20404
|
+
stroke: "url(#add-entry_svg__c)",
|
|
20405
|
+
strokeWidth: 0.3,
|
|
20406
|
+
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",
|
|
20407
|
+
"data-figma-bg-blur-radius": 3.262
|
|
20408
|
+
})), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
|
|
20409
|
+
id: "add-entry_svg__a",
|
|
20410
|
+
x1: 16.851,
|
|
20411
|
+
x2: 20.384,
|
|
20412
|
+
y1: 10.392,
|
|
20413
|
+
y2: 4.767,
|
|
20414
|
+
gradientUnits: "userSpaceOnUse"
|
|
20415
|
+
}, /*#__PURE__*/React.createElement("stop", {
|
|
20416
|
+
stopColor: "#fff",
|
|
20417
|
+
stopOpacity: 0.01
|
|
20418
|
+
}), /*#__PURE__*/React.createElement("stop", {
|
|
20419
|
+
offset: 1,
|
|
20420
|
+
stopColor: "#fff"
|
|
20421
|
+
})), /*#__PURE__*/React.createElement("linearGradient", {
|
|
20422
|
+
id: "add-entry_svg__c",
|
|
20423
|
+
x1: 21.47,
|
|
20424
|
+
x2: 12.314,
|
|
20425
|
+
y1: 15.036,
|
|
20426
|
+
y2: 5.769,
|
|
20427
|
+
gradientUnits: "userSpaceOnUse"
|
|
20428
|
+
}, /*#__PURE__*/React.createElement("stop", {
|
|
20429
|
+
stopColor: "#fff",
|
|
20430
|
+
stopOpacity: 0.01
|
|
20431
|
+
}), /*#__PURE__*/React.createElement("stop", {
|
|
20432
|
+
offset: 1,
|
|
20433
|
+
stopColor: "#fff"
|
|
20434
|
+
})), /*#__PURE__*/React.createElement("clipPath", {
|
|
20435
|
+
id: "add-entry_svg__b",
|
|
20436
|
+
transform: "translate(1.543 -3.499)"
|
|
20437
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
20438
|
+
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"
|
|
20439
|
+
})))));
|
|
20440
|
+
};
|
|
20441
|
+
|
|
20442
|
+
var _path$1, _path2$1, _path3;
|
|
20443
|
+
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); }
|
|
20444
|
+
var SvgBoundary = function SvgBoundary(props) {
|
|
20445
|
+
return /*#__PURE__*/React.createElement("svg", _extends$3({
|
|
20446
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20447
|
+
width: 16,
|
|
20448
|
+
height: 16,
|
|
20449
|
+
fill: "none"
|
|
20450
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
20451
|
+
fill: "#1DBEAC",
|
|
20452
|
+
fillRule: "evenodd",
|
|
20453
|
+
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",
|
|
20454
|
+
clipRule: "evenodd",
|
|
20455
|
+
opacity: 0.602
|
|
20456
|
+
})), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
|
|
20457
|
+
fill: "#1DBEAC",
|
|
20458
|
+
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",
|
|
20459
|
+
opacity: 0.152
|
|
20460
|
+
})), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
|
|
20461
|
+
fill: "#1DBEAC",
|
|
20462
|
+
fillRule: "evenodd",
|
|
20463
|
+
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",
|
|
20464
|
+
clipRule: "evenodd"
|
|
20465
|
+
})));
|
|
20466
|
+
};
|
|
20467
|
+
|
|
20468
|
+
var _path, _path2, _rect$1, _rect2$1;
|
|
20469
|
+
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); }
|
|
20470
|
+
var SvgLimitIsland = function SvgLimitIsland(props) {
|
|
20471
|
+
return /*#__PURE__*/React.createElement("svg", _extends$2({
|
|
20472
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20473
|
+
width: 16,
|
|
20474
|
+
height: 16,
|
|
20475
|
+
fill: "none"
|
|
20476
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
20477
|
+
fill: "#FFA077",
|
|
20478
|
+
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"
|
|
20479
|
+
})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
|
|
20480
|
+
fill: "#FF5D17",
|
|
20481
|
+
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"
|
|
20482
|
+
})), _rect$1 || (_rect$1 = /*#__PURE__*/React.createElement("rect", {
|
|
20483
|
+
width: 14.237,
|
|
20484
|
+
height: 10.667,
|
|
20485
|
+
x: 0.882,
|
|
20486
|
+
y: 2.667,
|
|
20487
|
+
fill: "#F50",
|
|
20488
|
+
opacity: 0.15,
|
|
20489
|
+
rx: 2
|
|
20490
|
+
})), _rect2$1 || (_rect2$1 = /*#__PURE__*/React.createElement("rect", {
|
|
20491
|
+
width: 14.237,
|
|
20492
|
+
height: 10.667,
|
|
20493
|
+
x: 0.882,
|
|
20494
|
+
y: 2.667,
|
|
20495
|
+
stroke: "#FF5D17",
|
|
20496
|
+
strokeWidth: 0.867,
|
|
20497
|
+
rx: 2
|
|
20498
|
+
})));
|
|
20499
|
+
};
|
|
20500
|
+
|
|
20501
|
+
var _rect, _rect2, _rect3, _rect4, _g$1;
|
|
20502
|
+
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); }
|
|
20503
|
+
var SvgVisionFence = function SvgVisionFence(props) {
|
|
20504
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
20505
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20506
|
+
width: 16,
|
|
20507
|
+
height: 16,
|
|
20508
|
+
fill: "none"
|
|
20509
|
+
}, props), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
|
|
20510
|
+
width: 14.333,
|
|
20511
|
+
height: 10.667,
|
|
20512
|
+
x: 0.833,
|
|
20513
|
+
y: 2.667,
|
|
20514
|
+
fill: "#B1D9FF",
|
|
20515
|
+
rx: 2.667
|
|
20516
|
+
})), _rect2 || (_rect2 = /*#__PURE__*/React.createElement("rect", {
|
|
20517
|
+
width: 13.333,
|
|
20518
|
+
height: 9.667,
|
|
20519
|
+
x: 1.333,
|
|
20520
|
+
y: 3.167,
|
|
20521
|
+
stroke: "#5C9DFF",
|
|
20522
|
+
strokeDasharray: "6.33 6.33",
|
|
20523
|
+
rx: 1.333
|
|
20524
|
+
})), _rect3 || (_rect3 = /*#__PURE__*/React.createElement("rect", {
|
|
20525
|
+
width: 6,
|
|
20526
|
+
height: 6,
|
|
20527
|
+
x: 5,
|
|
20528
|
+
y: 4.833,
|
|
20529
|
+
fill: "#B1D9FF",
|
|
20530
|
+
rx: 3
|
|
20531
|
+
})), /*#__PURE__*/React.createElement("mask", {
|
|
20532
|
+
id: "visionFence_svg__a",
|
|
20533
|
+
width: 6,
|
|
20534
|
+
height: 6,
|
|
20535
|
+
x: 5,
|
|
20536
|
+
y: 5,
|
|
20537
|
+
maskUnits: "userSpaceOnUse",
|
|
20538
|
+
style: {
|
|
20539
|
+
maskType: "alpha"
|
|
20540
|
+
}
|
|
20541
|
+
}, _rect4 || (_rect4 = /*#__PURE__*/React.createElement("rect", {
|
|
20542
|
+
width: 5.333,
|
|
20543
|
+
height: 5.333,
|
|
20544
|
+
x: 5.333,
|
|
20545
|
+
y: 5.5,
|
|
20546
|
+
fill: "#B1D9FF",
|
|
20547
|
+
rx: 2.667
|
|
20548
|
+
}))), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
|
|
20549
|
+
fill: "#5C9DFF",
|
|
20550
|
+
mask: "url(#visionFence_svg__a)"
|
|
20551
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
20552
|
+
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"
|
|
20553
|
+
}))));
|
|
20554
|
+
};
|
|
20555
|
+
|
|
20556
|
+
var _g, _defs;
|
|
20557
|
+
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); }
|
|
20558
|
+
var SvgDoodle = function SvgDoodle(props) {
|
|
20559
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
20560
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
20561
|
+
width: 16,
|
|
20562
|
+
height: 16,
|
|
20563
|
+
fill: "none"
|
|
20564
|
+
}, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
|
|
20565
|
+
clipPath: "url(#doodle_svg__a)"
|
|
20566
|
+
}, /*#__PURE__*/React.createElement("g", {
|
|
20567
|
+
clipPath: "url(#doodle_svg__b)"
|
|
20568
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
20569
|
+
width: 14.237,
|
|
20570
|
+
height: 10.667,
|
|
20571
|
+
x: 0.333,
|
|
20572
|
+
y: 4.332,
|
|
20573
|
+
fill: "#CBFCF7",
|
|
20574
|
+
stroke: "#9AEEE5",
|
|
20575
|
+
strokeWidth: 0.867,
|
|
20576
|
+
rx: 2
|
|
20577
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
20578
|
+
fill: "#F2FFFD",
|
|
20579
|
+
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"
|
|
20580
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
20581
|
+
fill: "#50D0C2",
|
|
20582
|
+
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"
|
|
20583
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
20584
|
+
fill: "#50D0C2",
|
|
20585
|
+
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"
|
|
20586
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
20587
|
+
fill: "#9CE7DE",
|
|
20588
|
+
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"
|
|
20589
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
20590
|
+
fill: "#50D0C2",
|
|
20591
|
+
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"
|
|
20592
|
+
})))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
20593
|
+
id: "doodle_svg__a"
|
|
20594
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
20595
|
+
fill: "#fff",
|
|
20596
|
+
d: "M0 0h16v16H0z"
|
|
20597
|
+
})), /*#__PURE__*/React.createElement("clipPath", {
|
|
20598
|
+
id: "doodle_svg__b"
|
|
20599
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
20600
|
+
fill: "#fff",
|
|
20601
|
+
d: "M0 0h16v16H0z"
|
|
20602
|
+
})))));
|
|
20603
|
+
};
|
|
20604
|
+
|
|
20605
|
+
var HandleElementMapType;
|
|
20606
|
+
(function (HandleElementMapType) {
|
|
20607
|
+
HandleElementMapType["name"] = "name";
|
|
20608
|
+
HandleElementMapType["focus"] = "focus";
|
|
20609
|
+
HandleElementMapType["delete"] = "delete";
|
|
20610
|
+
HandleElementMapType["timePeriod"] = "timePeriod";
|
|
20611
|
+
HandleElementMapType["area"] = "area";
|
|
20612
|
+
HandleElementMapType["dooleExist"] = "dooleExist";
|
|
20613
|
+
})(HandleElementMapType || (HandleElementMapType = {}));
|
|
20614
|
+
const DATE_TYPE_MAP = [
|
|
20615
|
+
{ type: DataType.BOUNDARY, label: 'Boundary', icon: jsx(SvgBoundary, {}) },
|
|
20616
|
+
{
|
|
20617
|
+
type: DataType.OBSTACLE,
|
|
20618
|
+
paramType: RecordTypeEnum.OBSTACLE,
|
|
20619
|
+
label: 'Off-limit island',
|
|
20620
|
+
icon: jsx(SvgLimitIsland, {}),
|
|
20621
|
+
},
|
|
20622
|
+
// { type: DataType.CHANNEL, label: 'Channel', icon: <ChannelIcon /> },
|
|
20623
|
+
{
|
|
20624
|
+
type: DataType.VISION_OFF,
|
|
20625
|
+
paramType: RecordTypeEnum.VISI_OFF,
|
|
20626
|
+
label: 'VisionFence-off zone',
|
|
20627
|
+
icon: jsx(SvgVisionFence, {}),
|
|
20628
|
+
},
|
|
20629
|
+
{
|
|
20630
|
+
type: DataType.DOODLE,
|
|
20631
|
+
paramType: RecordTypeEnum.DOODLE,
|
|
20632
|
+
label: 'Doodle',
|
|
20633
|
+
icon: jsx(SvgDoodle, {}),
|
|
20634
|
+
},
|
|
20635
|
+
];
|
|
20636
|
+
({
|
|
20637
|
+
[DataType.BOUNDARY]: {
|
|
20638
|
+
},
|
|
20639
|
+
[DataType.OBSTACLE]: {
|
|
20640
|
+
},
|
|
20641
|
+
[DataType.CHANNEL]: {
|
|
20642
|
+
},
|
|
20643
|
+
[DataType.VISION_OFF]: {
|
|
20644
|
+
},
|
|
20645
|
+
[DataType.DOODLE]: {
|
|
20646
|
+
},
|
|
20647
|
+
[DataType.PATH]: undefined,
|
|
20648
|
+
[DataType.ANTENNA]: undefined,
|
|
20649
|
+
[DataType.CHARGING_PILE]: undefined,
|
|
20650
|
+
});
|
|
20651
|
+
|
|
20652
|
+
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}";
|
|
20653
|
+
var styles$1 = {"modal":"index-module_modal__fkxhn","center":"index-module_center__d461v"};
|
|
20654
|
+
styleInject(css_248z$1);
|
|
20655
|
+
|
|
20656
|
+
const CustomModal = ({ children, titleCenter, hasMinHeight, height, ...props }) => {
|
|
20657
|
+
return (jsx(Modal, { centered: true, styles: {
|
|
20658
|
+
body: {
|
|
20659
|
+
maxHeight: height ? `${height}px` : 'calc(100vh - 200px)',
|
|
20660
|
+
minHeight: hasMinHeight ? '520px' : undefined,
|
|
20661
|
+
overflow: 'auto',
|
|
20662
|
+
},
|
|
20663
|
+
}, wrapClassName: classNames(styles$1.modal, {
|
|
20664
|
+
[styles$1.center]: titleCenter,
|
|
20665
|
+
}), cancelButtonProps: { color: 'primary', variant: 'outlined' }, cancelText: 'Cancel', ...props, children: children }));
|
|
20666
|
+
};
|
|
20667
|
+
|
|
20668
|
+
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}";
|
|
20669
|
+
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-"};
|
|
20670
|
+
styleInject(css_248z);
|
|
20671
|
+
|
|
20672
|
+
const DoodleModal = ({ open, onSelect, setOpen, doodleList, centerPoint }) => {
|
|
20673
|
+
const { editMapInfo, setEditMapInfo, onHandleEnterRecord } = useMapEditContext();
|
|
20674
|
+
const [selectedDoodle, setSelectedDoodle] = useState(null);
|
|
20675
|
+
const noNeed = useMemo(() => {
|
|
20676
|
+
return '1234567890QWERTYUIOPASDFGHJKLZXCVBNM';
|
|
20677
|
+
}, []);
|
|
20678
|
+
// 选择 Doodle
|
|
20679
|
+
const handleSelectDoodle = useCallback((item) => {
|
|
20680
|
+
setSelectedDoodle(item);
|
|
20681
|
+
}, []);
|
|
20682
|
+
// 确认选择
|
|
20683
|
+
const handleConfirm = useCallback(() => {
|
|
20684
|
+
if (selectedDoodle) {
|
|
20685
|
+
const newDoodle = initDoodle();
|
|
20686
|
+
const svg = selectedDoodle?.svgStr;
|
|
20687
|
+
const minLength = selectedDoodle.minLength;
|
|
20688
|
+
const parseSvg = SvgParserNative.parseSvg(svg);
|
|
20689
|
+
const svgMinLength = parseSvg.height / SCALE_FACTOR;
|
|
20690
|
+
// 使用获取到的 SVG 内容,如果没有获取到则使用 URL
|
|
20691
|
+
newDoodle.svg = svg;
|
|
20692
|
+
newDoodle.scale = minLength / svgMinLength;
|
|
20693
|
+
newDoodle.direction = 0;
|
|
20694
|
+
newDoodle.center = restorePoint(centerPoint);
|
|
20695
|
+
onHandleEnterRecord?.({
|
|
20696
|
+
type: 1,
|
|
20697
|
+
function: 0,
|
|
20698
|
+
})?.then(() => {
|
|
20699
|
+
setEditMapInfo({
|
|
20700
|
+
...editMapInfo,
|
|
20701
|
+
historyList: [
|
|
20702
|
+
{
|
|
20703
|
+
selectElement: newDoodle,
|
|
20704
|
+
},
|
|
20705
|
+
],
|
|
20706
|
+
currentHistoryIndex: 0,
|
|
20707
|
+
createMode: CreateStatus.COMPLETED,
|
|
20708
|
+
elementType: DataType.DOODLE,
|
|
20709
|
+
selectElement: newDoodle,
|
|
20710
|
+
isShowDrag: true,
|
|
20711
|
+
});
|
|
20712
|
+
setOpen(false);
|
|
20713
|
+
onSelect?.(svg);
|
|
20714
|
+
}, (error) => {
|
|
20715
|
+
message.error('Save failed, please try again');
|
|
20716
|
+
});
|
|
20717
|
+
}
|
|
20718
|
+
}, [selectedDoodle, setEditMapInfo, editMapInfo, setOpen, onSelect, centerPoint]);
|
|
20719
|
+
return (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: jsxs("div", { className: styles.doodleModal, children: [jsx("div", { className: styles.title, children: "Select the doodle that you want to create" }), jsx("div", { className: styles.content, children: doodleList
|
|
20720
|
+
?.filter((item) => !noNeed.includes(item.name))
|
|
20721
|
+
.map((item) => {
|
|
20722
|
+
return (jsx("div", { className: classNames(styles.item, {
|
|
20723
|
+
[styles.active]: selectedDoodle?.svg === item.svg,
|
|
20724
|
+
}), onClick: () => handleSelectDoodle(item), children: jsx("div", { className: styles.svgImage, dangerouslySetInnerHTML: { __html: item?.svgStr } }) }, item.id));
|
|
20725
|
+
}) })] }) }));
|
|
20726
|
+
};
|
|
20727
|
+
|
|
20728
|
+
const AddEntry = ({ doodleList, disabledObstacles, editMap }) => {
|
|
20729
|
+
const { svgRef } = useSvgEditContext();
|
|
20730
|
+
const { editMapInfo, setEditMapInfo, onHandleEnterRecord } = useMapEditContext();
|
|
20731
|
+
const divRef = useRef(null);
|
|
20732
|
+
const [open, setOpen] = useState(false);
|
|
20733
|
+
const [doodleOpen, setDoodleOpen] = useState(false);
|
|
20734
|
+
const centerPoint = useMemo(() => {
|
|
20735
|
+
if (!svgRef)
|
|
20736
|
+
return null;
|
|
20737
|
+
const baseVal = svgRef?.viewBox.baseVal;
|
|
20738
|
+
const center = [
|
|
20739
|
+
baseVal?.x + (baseVal?.width || 0) / 2,
|
|
20740
|
+
baseVal?.y + (baseVal?.height || 0) / 2,
|
|
20741
|
+
];
|
|
20742
|
+
return center;
|
|
20743
|
+
}, [svgRef?.viewBox?.baseVal?.x]);
|
|
20744
|
+
const centerBounds = useMemo(() => {
|
|
20745
|
+
if (!svgRef)
|
|
20746
|
+
return null;
|
|
20747
|
+
const elementWidth = 50 * 10;
|
|
20748
|
+
const [minX, minY, maxX, maxY] = [
|
|
20749
|
+
centerPoint[0] - elementWidth / 2,
|
|
20750
|
+
centerPoint[1] - elementWidth / 2,
|
|
20751
|
+
centerPoint[0] + elementWidth / 2,
|
|
20752
|
+
centerPoint[1] + elementWidth / 2,
|
|
20753
|
+
];
|
|
20754
|
+
const elementPoints = [
|
|
20755
|
+
[minX, minY],
|
|
20756
|
+
[minX, maxY],
|
|
20757
|
+
[maxX, maxY],
|
|
20758
|
+
[maxX, minY],
|
|
20759
|
+
];
|
|
20760
|
+
return elementPoints;
|
|
20761
|
+
}, [centerPoint]);
|
|
20762
|
+
const addNewElement = useCallback((type, item) => {
|
|
20763
|
+
setOpen(false);
|
|
20764
|
+
let newElement = null;
|
|
20765
|
+
if (type === DataType.BOUNDARY) {
|
|
20766
|
+
newElement = initBoundary();
|
|
20767
|
+
}
|
|
20768
|
+
else if (type === DataType.OBSTACLE) {
|
|
20769
|
+
newElement = initObstacle();
|
|
20770
|
+
}
|
|
20771
|
+
else if (type === DataType.CHANNEL) {
|
|
20772
|
+
newElement = initChannel();
|
|
20773
|
+
}
|
|
20774
|
+
else if (type === DataType.VISION_OFF) {
|
|
20775
|
+
newElement = initVisionOff();
|
|
20776
|
+
newElement.points = centerBounds;
|
|
20777
|
+
}
|
|
20778
|
+
else if (type === DataType.DOODLE) {
|
|
20779
|
+
return setDoodleOpen(true);
|
|
20780
|
+
}
|
|
20781
|
+
onHandleEnterRecord?.({
|
|
20782
|
+
type: item?.paramType,
|
|
20783
|
+
function: item?.type === DataType.OBSTACLE ? 0 : undefined,
|
|
20784
|
+
})?.then(() => {
|
|
20785
|
+
setEditMapInfo({
|
|
20786
|
+
...editMapInfo,
|
|
20787
|
+
historyList: [
|
|
20788
|
+
{
|
|
20789
|
+
selectElement: newElement,
|
|
20790
|
+
},
|
|
20791
|
+
],
|
|
20792
|
+
currentHistoryIndex: 0,
|
|
20793
|
+
createMode: type === DataType.VISION_OFF ? CreateStatus.COMPLETED : CreateStatus.CREATING,
|
|
20794
|
+
elementType: type,
|
|
20795
|
+
selectElement: newElement,
|
|
20796
|
+
});
|
|
20797
|
+
}, (errorText) => {
|
|
20798
|
+
message.error('Save failed, please try again');
|
|
20799
|
+
});
|
|
20800
|
+
}, [centerBounds]);
|
|
20801
|
+
const addItems = useMemo(() => {
|
|
20802
|
+
return DATE_TYPE_MAP?.filter((item) => {
|
|
20803
|
+
if (item.type === DataType.OBSTACLE) {
|
|
20804
|
+
return !disabledObstacles;
|
|
20805
|
+
}
|
|
20806
|
+
return item.type !== DataType.BOUNDARY;
|
|
20807
|
+
});
|
|
20808
|
+
}, [disabledObstacles]);
|
|
20809
|
+
// console.log('addEntry->', editMapInfo, editMap);
|
|
20810
|
+
if (editMapInfo.createMode || editMapInfo.editMap || !editMap) {
|
|
20811
|
+
return null;
|
|
20812
|
+
}
|
|
20813
|
+
return (jsxs("div", { ref: divRef, className: styles$2.addEntry, children: [jsx(Popover, { open: open, onOpenChange: setOpen, arrow: false, placement: "leftTop", content: addItems?.map((item) => {
|
|
20814
|
+
return (jsxs("div", { className: styles$2.addItem, onClick: () => {
|
|
20815
|
+
addNewElement(item.type, item);
|
|
20816
|
+
}, children: [jsx("div", { className: styles$2.icon, children: item?.icon }), jsx("div", { className: styles$2.label, children: item?.label })] }, item.label));
|
|
20817
|
+
}), children: jsx("div", { className: styles$2.icon, children: jsx(SvgAddEntry, {}) }) }), jsx(DoodleModal, { centerPoint: centerPoint, doodleList: doodleList, open: doodleOpen, onOk: () => setDoodleOpen(false), setOpen: setDoodleOpen })] }));
|
|
20263
20818
|
};
|
|
20264
20819
|
|
|
20265
20820
|
// 验证GPS坐标是否有效
|
|
@@ -20698,6 +21253,14 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
20698
21253
|
useEffect(() => {
|
|
20699
21254
|
setDrag(defaultTransform ?? { x: 0, y: 0, rotation: 0 });
|
|
20700
21255
|
}, [defaultTransform]);
|
|
21256
|
+
useEffect(() => {
|
|
21257
|
+
// 监听drag变化,比较drag和defaultTransform
|
|
21258
|
+
onHandleEvent?.(ClickEventType.DRAG_MAP, {
|
|
21259
|
+
isDragMap: drag.x !== defaultTransform.x ||
|
|
21260
|
+
drag.y !== defaultTransform.y ||
|
|
21261
|
+
drag.rotation !== defaultTransform.rotation,
|
|
21262
|
+
});
|
|
21263
|
+
}, [drag, defaultTransform, onHandleEvent]);
|
|
20701
21264
|
// 监听地图zoom变化,计算缩放比例
|
|
20702
21265
|
useEffect(() => {
|
|
20703
21266
|
if (!mapRef)
|
|
@@ -20823,7 +21386,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
20823
21386
|
}
|
|
20824
21387
|
// console.log('mowerrender------->', svgViewBox);
|
|
20825
21388
|
// 使用goole maps自定义叠加层,返回debug信息(如果启用)
|
|
20826
|
-
return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxs(MapEditContextProvider, { value: mapEditValue, children: [platform !== PlatformType.H5 && (jsx(Fragment, {})), platform === PlatformType.H5 && jsx(Crosshair, {}), jsxs(OverlayViewF, { onLoad: (lay) => {
|
|
21389
|
+
return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxs(MapEditContextProvider, { value: mapEditValue, children: [platform !== PlatformType.H5 && (jsx(Fragment, { children: jsx(AddEntry, { disabledObstacles: disabledObstacles, doodleList: doodleList, editMap: editMap }) })), platform === PlatformType.H5 && jsx(Crosshair, {}), jsxs(OverlayViewF, { onLoad: (lay) => {
|
|
20827
21390
|
setOverlay(lay);
|
|
20828
21391
|
}, onDraw: (style) => {
|
|
20829
21392
|
const layout = Object.keys(style).reduce((pre, cur) => {
|
|
@@ -20903,4 +21466,4 @@ const BoundarySvgRender = React__default.memo(({ mapJson, id, maxWidth = 300 })
|
|
|
20903
21466
|
}) }), jsx(CharginPile, { mapData: mapJson, mapConfig: DEFAULT_STYLES, viewBox: boundaryViewBox || null, rotation: 0 })] }));
|
|
20904
21467
|
});
|
|
20905
21468
|
|
|
20906
|
-
export { ALL_DIRECTION_SELECTED, AntennaData, AntennaDataBuilder, BaseData, BoundaryData, BoundarySvgRender, ChannelData, ChargingPileData, CreateStatus, DataType, DoodleData, MAX_DIRECTION_ANGLE, MIN_DIRECTION_ANGLE, MapDataProcessor, MobileEditMode, MowerMapRenderer, ObstacleData, PathData, PathDataProcessor, PlatformType, RecordFunctionEnum, RecordTypeEnum, RenderType, SCALE_FACTOR, SvgParserNative, UnifiedMapDataProcessor, VisionOffData, calculateMapGpsCenter, estimateGpsFromMapBounds, initBoundary, initChannel, initDoodle, initObstacle, initVisionOff, restorePointsFormat };
|
|
21469
|
+
export { ALL_DIRECTION_SELECTED, AntennaData, AntennaDataBuilder, BaseData, BoundaryData, BoundarySvgRender, ChannelData, ChargingPileData, CheckDoodleErrorType, CheckObstaclePointErrorType, ClickEventType, CreateStatus, DataType, DoodleData, MAX_DIRECTION_ANGLE, MIN_DIRECTION_ANGLE, MapDataProcessor, MobileEditMode, MowerMapRenderer, ObstacleData, PathData, PathDataProcessor, PlatformType, RecordFunctionEnum, RecordTypeEnum, RenderType, SCALE_FACTOR, SvgParserNative, UnifiedMapDataProcessor, VisionOffData, calculateMapGpsCenter, estimateGpsFromMapBounds, initBoundary, initChannel, initDoodle, initObstacle, initVisionOff, restorePointsFormat };
|