@fleet-frontend/mower-maps 0.2.0-beta.12 → 0.2.0-beta.13

package/dist/index.esm.js

@@ -293,7 +293,7 @@ function initObstacle() {
     const obstacle = {
         id: null,
         area: 0,
-        name: 'off-imit island',
+        name: 'Noname',
         status: 1,
         end_timestamp: 0,
         start_timestamp: 0,
@@ -15072,10 +15072,10 @@ const DashPath = ({ points, stroke, strokeWidth, strokeOpacity, className, }) =>
     return (jsxs(Fragment, { children: [jsx("path", { fill: "none", d: parallelPath2Data, stroke: stroke, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: `${strokeWidth}px ${strokeWidth * 2}px`, style: { pointerEvents: 'none' } }), jsx("path", { fill: "none", d: parallelPath1Data, stroke: stroke, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: `${strokeWidth}px ${strokeWidth * 2}px`, style: { pointerEvents: 'none' } })] }));
 };
 
-const VertexElement = React__default.memo(({ r, stroke, ...props }) => {
-    const { overlayScale } = useCommonContext();
+const VertexElement = React__default.memo(({ r, stroke, fill, ...props }) => {
+    const { overlayScale, platform } = useCommonContext();
     const radius = typeof r === 'number' ? r : 12;
-    return (jsx("circle", { r: radius * overlayScale, stroke: stroke || '#fff', fill: '#fff', strokeWidth: 2 * overlayScale, ...props }));
+    return (jsx("circle", { r: platform === PlatformType.H5 ? (radius * overlayScale) / 2 : radius * overlayScale, stroke: stroke || '#fff', fill: fill || '#fff', strokeWidth: 2 * overlayScale, ...props }));
 });
 
 var _path$2;
@@ -15159,6 +15159,7 @@ const normalizePadding = (padding) => {
     return { x: padding?.x ?? 4, y: padding?.y ?? 2 };
 };
 const TextElement = ({ x, y, fontSize = 30, fill = '#fff', text, background = 'rgba(0, 0, 0, 0.34)', padding = 2, rx = 4, ry = 4, backgroundStroke, backgroundStrokeWidth = 0, textAnchor = 'middle', alignmentBaseline = 'middle', className, style, rotate, pointerEvents = 'auto', onClick, onMouseEnter, onMouseLeave, children, }) => {
+    const { platform } = useCommonContext();
     const textRef = useRef(null);
     const [bbox, setBbox] = useState(null);
     const pad = useMemo(() => normalizePadding(padding), [padding]);
@@ -15185,7 +15186,7 @@ const TextElement = ({ x, y, fontSize = 30, fill = '#fff', text, background = 'r
             height: bbox.height + pad.y * 2,
         };
     }, [bbox, pad.x, pad.y]);
-    return (jsxs("g", { className: className, style: style, pointerEvents: pointerEvents, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [background && rectProps && (jsx("rect", { x: rectProps.x, y: rectProps.y, width: rectProps.width, height: rectProps.height, rx: rx, ry: ry, fill: background, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth })), jsx("text", { ref: textRef, x: x, y: y, letterSpacing: -5, fontSize: fontSize, fill: fill, textAnchor: textAnchor, alignmentBaseline: alignmentBaseline, 
+    return (jsxs("g", { className: className, style: style, pointerEvents: pointerEvents, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [background && rectProps && (jsx("rect", { x: rectProps.x, y: rectProps.y, width: rectProps.width, height: rectProps.height, rx: rx, ry: ry, fill: background, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth })), jsx("text", { ref: textRef, x: x, y: y, letterSpacing: platform === PlatformType.H5 ? 1 : -5, fontSize: fontSize, fill: fill, textAnchor: textAnchor, alignmentBaseline: alignmentBaseline, 
                 // keep text crisp at various zoom levels
                 vectorEffect: "non-scaling-stroke", style: { pointerEvents: 'none' }, children: children || text })] }));
 };
@@ -15215,7 +15216,7 @@ const calculateMidpoint$1 = (point1, point2) => {
 const DistanceLabels = ({ coordinates, createMode = false, editMode = false, completed = false, showPoints = false, mousePos: _mousePos = null, ghostLastDistance = null, ghostLastMidpoint = null, ghostFirstDistance = null, ghostFirstMidpoint = null, fontSize = 30, }) => {
     // 只在显示可操作顶点时显示距离
     if (!((createMode && showPoints) || editMode || (createMode && completed)) ||
-        coordinates.length < 1) {
+        coordinates.length < 2) {
         return null;
     }
     return (jsxs(Fragment, { children: [coordinates.map((coord, idx) => {
@@ -15230,8 +15231,22 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
                 return (jsx(TextElement, { x: midpoint[0], y: midpoint[1], textAnchor: "middle", alignmentBaseline: "middle", fontSize: fontSize, fill: "#fff", style: {
                         pointerEvents: 'none',
                         fontWeight: 'bold',
+                        userSelect: 'none',
+                        WebkitUserSelect: 'none',
+                        WebkitTouchCallout: 'none',
+                        touchAction: 'none',
                     }, text: distance }, `distance-${idx}`));
-            }), ghostLastDistance && ghostLastMidpoint && (jsx(TextElement, { fontSize: fontSize, x: ghostLastMidpoint[0], y: ghostLastMidpoint[1], text: ghostLastDistance })), ghostFirstDistance && ghostFirstMidpoint && (jsx(TextElement, { fontSize: fontSize, x: ghostFirstMidpoint[0], y: ghostFirstMidpoint[1], text: ghostFirstDistance }))] }));
+            }), ghostLastDistance && ghostLastMidpoint && (jsx(TextElement, { fontSize: fontSize, x: ghostLastMidpoint[0], y: ghostLastMidpoint[1], text: ghostLastDistance, style: {
+                    userSelect: 'none',
+                    WebkitUserSelect: 'none',
+                    WebkitTouchCallout: 'none',
+                    touchAction: 'none',
+                } })), ghostFirstDistance && ghostFirstMidpoint && (jsx(TextElement, { fontSize: fontSize, x: ghostFirstMidpoint[0], y: ghostFirstMidpoint[1], text: ghostFirstDistance, style: {
+                    userSelect: 'none',
+                    WebkitUserSelect: 'none',
+                    WebkitTouchCallout: 'none',
+                    touchAction: 'none',
+                } }))] }));
 };
 
 var css_248z$2 = ".index-module_polygonPathG__S-Bpl {\n  pointer-events: stroke;\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}";
@@ -15527,6 +15542,7 @@ function coordinatesToPoints$1(coordinates) {
 
 const useCheckElement = () => {
     const { editMapInfo, minDistance } = useMapEditContext();
+    const { platform } = useCommonContext();
     const { svgElementDatas } = useSvgEditContext();
     const checkDoodle = useCallback(() => {
         console.log('checkdoodle', editMapInfo, svgElementDatas);
@@ -15627,7 +15643,7 @@ const useCheckElement = () => {
         return { isValid: true };
     }, [editMapInfo, svgElementDatas, minDistance]);
     const checkCanNotCreateAtPosition = useCallback((checkPoint, checkPoints) => {
-        console.log('editMapInfo.elementType--->', editMapInfo);
+        // console.log('editMapInfo.elementType--->', editMapInfo);
         if (!editMapInfo.elementType)
             return false;
         const currentPoints = editMapInfo?.selectElement?.points;
@@ -15654,8 +15670,10 @@ const useCheckElement = () => {
             return false;
         // 获取当前正在创建的 obstacle 的点
         const currentObstaclePoints = coordinatesToPoints$1(points) || [];
-        if (currentObstaclePoints.length === 0)
-            return false; // 还没有开始绘制
+        if (platform !== PlatformType.H5) {
+            if (currentObstaclePoints.length === 0)
+                return false; // 还没有开始绘制
+        }
         // 构建当前 obstacle 的多边形（包括检查点位置）
         const currentObstaclePolygon = [...currentObstaclePoints, checkPoint];
         // 获取当前边界内的所有元素
@@ -15811,6 +15829,8 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
     });
     // 虚拟顶点hover状态
     const [hoverVertex, setHoverVertex] = useState(null);
+    // H5平台选中的顶点索引（长按后选中）
+    const [selectedVertexIndex, setSelectedVertexIndex] = useState(-1);
     const { checkCanNotCreateAtPosition } = useCheckElement();
     const { editMapInfo } = useMapEditContext();
     const { platform } = useCommonContext();
@@ -15878,11 +15898,33 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
         if (tooltipIndex !== null)
             setTooltipIndex(null);
     }, [editMode, createMode, completed]);
+    // H5平台：点击空白处取消选中状态
+    useEffect(() => {
+        if (platform !== PlatformType.H5 || selectedVertexIndex === -1)
+            return;
+        const handleDocumentClick = (e) => {
+            // 检查点击的目标是否是顶点
+            const target = e.target;
+            const isClickingVertex = target.closest('circle') !== null;
+            // 如果点击的不是顶点，则取消选中状态
+            if (!isClickingVertex) {
+                setSelectedVertexIndex(-1);
+            }
+        };
+        document.addEventListener('click', handleDocumentClick);
+        return () => {
+            document.removeEventListener('click', handleDocumentClick);
+        };
+    }, [platform, selectedVertexIndex]);
     // 处理顶点拖拽
     const handleVertexMouseDown = useCallback((e, index) => {
         // 只有在编辑模式或者创建模式已完成时才能拖拽
         if (!editMode && !(createMode && completed))
             return;
+        // H5模式下，只有选中的顶点才能拖拽
+        if (platform === PlatformType.H5 && selectedVertexIndex !== index) {
+            return;
+        }
         e.preventDefault();
         e.stopPropagation();
         // 如果正在双击，忽略mouseDown事件
@@ -15909,7 +15951,7 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
             });
             mouseDownTimerRef.current = null;
         }, 250);
-    }, [editMode, createMode, completed, coordinates, tooltipIndex]);
+    }, [editMode, createMode, completed, coordinates, tooltipIndex, platform, selectedVertexIndex]);
     // 点击边线创建新顶点
     const handleEdgeClick = useCallback((e, edgeStartIndex) => {
         // 只有在编辑模式或者创建模式已完成时才能点击边线创建新顶点
@@ -15944,6 +15986,8 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
             edgeInfo: edgeInfo,
             dragType: 'new',
         });
+        // 将新创建的点设为选中态，便于后续直接拖拽
+        setSelectedVertexIndex(insertIndex);
     }, [
         editMode,
         createMode,
@@ -15953,6 +15997,69 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
         getSVGCoordinates,
         calculatePerpendicularFoot$1,
     ]);
+    // H5平台长按边线创建新顶点
+    const handleEdgeLongPressStart = useCallback((e, edgeStartIndex) => {
+        if ((!editMode && !(createMode && completed)) || dragState.isDragging)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const clickCoords = getSVGCoordinates(e.clientX, e.clientY);
+        longPressStartPosRef.current = clickCoords;
+        longPressEdgeIndexRef.current = edgeStartIndex;
+        // 开始长按计时器（500ms）
+        longPressTimerRef.current = window.setTimeout(() => {
+            isLongPressedRef.current = true;
+            // 长按触发，创建新顶点
+            if (longPressEdgeIndexRef.current !== -1 && longPressStartPosRef.current) {
+                handleEdgeClick(e, longPressEdgeIndexRef.current);
+            }
+        }, 500);
+    }, [editMode, createMode, completed, dragState.isDragging, getSVGCoordinates, handleEdgeClick]);
+    // 长按结束或取消
+    const handleEdgeLongPressEnd = useCallback(() => {
+        if (longPressTimerRef.current !== null) {
+            window.clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+        isLongPressedRef.current = false;
+        longPressStartPosRef.current = null;
+        longPressEdgeIndexRef.current = -1;
+    }, []);
+    // H5平台长按顶点选中
+    const vertexLongPressTimerRef = useRef(null);
+    const isVertexLongPressedRef = useRef(false);
+    const longPressVertexIndexRef = useRef(-1);
+    // 长按拖拽判定相关
+    const touchStartPosRef = useRef(null);
+    const hasStartedDragViaLongPressRef = useRef(false);
+    const DRAG_START_THRESHOLD = 8; // 像素阈值，超过则认为进入拖拽
+    // H5平台双击检测
+    const lastTapRef = useRef(0);
+    const lastTapIndexRef = useRef(-1);
+    const DOUBLE_TAP_DELAY = 300; // 双击检测间隔时间（ms）
+    const handleVertexLongPressStart = useCallback((e, index) => {
+        if ((!editMode && !(createMode && completed)) || dragState.isDragging)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        longPressVertexIndexRef.current = index;
+        hasStartedDragViaLongPressRef.current = false;
+        touchStartPosRef.current = { x: e.clientX, y: e.clientY };
+        // 开始长按计时器（1000ms）
+        vertexLongPressTimerRef.current = window.setTimeout(() => {
+            isVertexLongPressedRef.current = true;
+            setSelectedVertexIndex(index);
+        }, 1000);
+    }, [editMode, createMode, completed, dragState.isDragging]);
+    const handleVertexLongPressEnd = useCallback(() => {
+        if (vertexLongPressTimerRef.current !== null) {
+            window.clearTimeout(vertexLongPressTimerRef.current);
+            vertexLongPressTimerRef.current = null;
+        }
+        isVertexLongPressedRef.current = false;
+        longPressVertexIndexRef.current = -1;
+        touchStartPosRef.current = null;
+    }, []);
     const showNotCreateCursor = useMemo(() => {
         if (!dragState?.isDragging || !dragState?.currentPosition)
             return false;
@@ -15982,6 +16089,11 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
     const clickTimerRef = useRef(null);
     const mouseDownTimerRef = useRef(null);
     const isDoubleClickingRef = useRef(false);
+    // 长按事件相关
+    const longPressTimerRef = useRef(null);
+    const isLongPressedRef = useRef(false);
+    const longPressStartPosRef = useRef(null);
+    const longPressEdgeIndexRef = useRef(-1);
     // 清理 requestAnimationFrame 和事件定时器
     useEffect(() => {
         return () => {
@@ -15997,6 +16109,14 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
                 window.clearTimeout(mouseDownTimerRef.current);
                 mouseDownTimerRef.current = null;
             }
+            if (longPressTimerRef.current !== null) {
+                window.clearTimeout(longPressTimerRef.current);
+                longPressTimerRef.current = null;
+            }
+            if (vertexLongPressTimerRef.current !== null) {
+                window.clearTimeout(vertexLongPressTimerRef.current);
+                vertexLongPressTimerRef.current = null;
+            }
         };
     }, []);
     // 拖拽过程中更新坐标 - 使用节流优化性能
@@ -16024,6 +16144,40 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
             });
         }
     }, [dragState.isDragging, dragState.dragIndex, getSVGCoordinates]);
+    // 处理 H5 顶点长按后的触摸移动以进入拖拽
+    const handleVertexTouchMoveMaybeStartDrag = useCallback((e, idx) => {
+        if (platform !== PlatformType.H5)
+            return;
+        if (dragState.isDragging)
+            return; // 已在拖拽
+        // 允许两种进入拖拽的途径：
+        // 1) 长按该点
+        // 2) 该点已处于选中态
+        const canDragNow = isVertexLongPressedRef.current && longPressVertexIndexRef.current === idx;
+        const canDragBecauseSelected = selectedVertexIndex === idx;
+        if (!canDragNow && !canDragBecauseSelected)
+            return;
+        if (touchStartPosRef.current) {
+            const dx = e.clientX - touchStartPosRef.current.x;
+            const dy = e.clientY - touchStartPosRef.current.y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist >= DRAG_START_THRESHOLD) {
+                // 进入拖拽状态
+                const index = idx;
+                hasStartedDragViaLongPressRef.current = true;
+                // 启动与 mouseDown 相同的拖拽逻辑
+                setDragState({
+                    isDragging: true,
+                    dragIndex: index,
+                    originalPosition: [...coordinates[index]],
+                    currentPosition: [...coordinates[index]],
+                    newVertexIndex: -1,
+                    edgeInfo: null,
+                    dragType: 'existing',
+                });
+            }
+        }
+    }, [platform, dragState.isDragging, coordinates, selectedVertexIndex]);
     // 结束拖拽
     const handleMouseUp = useCallback(() => {
         console.log('handleMouseUp', JSON.stringify(dragState));
@@ -16079,9 +16233,12 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
                 },
             }, platform);
             document.body.style.userSelect = 'none';
+            // 禁止系统滚动和浏览器触摸手势，防止底层地图跟随移动
+            document.body.style.touchAction = 'none';
             return () => {
                 cleanup();
                 document.body.style.userSelect = '';
+                document.body.style.touchAction = '';
             };
         }
         else {
@@ -16146,6 +16303,45 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
     const ghostFirstMidpoint = createMode && mousePos && !completed && renderCoordinates.length >= 1
         ? calculateMidpoint(renderCoordinates[0], [mousePos.x, mousePos.y])
         : null;
+    // H5平台处理触摸双击
+    const handleVertexDoubleTap = useCallback((index) => {
+        const now = Date.now();
+        const timeDelta = now - lastTapRef.current;
+        // 检查是否为双击（300ms内，且是同一个点）
+        if (timeDelta < DOUBLE_TAP_DELAY && lastTapIndexRef.current === index) {
+            // 只有在选中点的情况下才允许删除
+            if (selectedVertexIndex === index && onVertexDelete && coordinates.length > 3) {
+                // 将渲染索引转换为原始points的索引
+                onVertexDelete(renderCoordinates?.length - 1 - index);
+                // 删除后立即取消拖拽状态，避免误触发拖动
+                setDragState({
+                    isDragging: false,
+                    dragIndex: -1,
+                    originalPosition: null,
+                    currentPosition: null,
+                    newVertexIndex: -1,
+                    edgeInfo: null,
+                    dragType: null,
+                });
+                // 删除后取消选中状态
+                setSelectedVertexIndex(-1);
+            }
+            // 重置点击时间
+            lastTapRef.current = 0;
+            lastTapIndexRef.current = -1;
+        }
+        else {
+            // 记录本次点击
+            lastTapRef.current = now;
+            lastTapIndexRef.current = index;
+        }
+    }, [
+        selectedVertexIndex,
+        onVertexDelete,
+        coordinates?.length,
+        editMapInfo?.createMode,
+        renderCoordinates?.length,
+    ]);
     return (jsxs(Fragment, { children: [(editMode || (createMode && completed)) &&
                 dragState.isDragging &&
                 dragState.dragType !== 'new' &&
@@ -16172,9 +16368,16 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
                 renderCoordinates.map((coord, index) => {
                     const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
                     const isDashPath = coord[2] === 1;
-                    return (jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: strokeWidth, className: styles$2.addVertex, vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
+                    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$2.addVertex, style: {
+                            userSelect: 'none',
+                            WebkitUserSelect: 'none',
+                            WebkitTouchCallout: 'none',
+                            touchAction: 'none',
+                        }, vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
                             ? {
-                                onTouchStart: createReactEventHandler((e) => handleEdgeClick(e, index)),
+                                onTouchStart: createReactEventHandler((e) => handleEdgeLongPressStart(e, index)),
+                                onTouchEnd: createReactEventHandler(() => handleEdgeLongPressEnd()),
+                                onTouchCancel: createReactEventHandler(() => handleEdgeLongPressEnd()),
                             }
                             : {
                                 onMouseDown: (e) => handleEdgeClick(e, index),
@@ -16197,14 +16400,27 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
                                     setHoverVertex(null);
                                 },
                             }) }, `edge-${index}`));
-                }), 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: 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: 30 * overlayScale }), 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)) &&
+                }), 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 }), 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)) &&
                 renderCoordinates.map((coord, idx) => {
                     // 判断当前顶点的状态
                     const isLastPoint = idx === renderCoordinates.length - 1;
                     const canComplete = createMode && !completed && renderCoordinates.length >= 3 && isLastPoint;
                     const isCreatedAndCanDrag = createMode && completed; // 创建完成后可拖拽
                     const isInEditMode = editMode;
-                    return (jsxs("g", { children: [jsx(VertexElement, { className: generateVertexClassName, stroke: strokeColor, cx: coord[0], cy: coord[1], r: canComplete ? 16 : 12, onClick: (e) => handleVertexClick(e, idx), onDoubleClick: (e) => {
+                    // H5模式下选中的顶点显示蓝色，并且放大1.5倍
+                    const isSelected = platform === PlatformType.H5 && selectedVertexIndex === idx;
+                    const vertexRadius = isSelected ? (canComplete ? 16 : 12) * 1.2 : canComplete ? 16 : 12;
+                    const vertexFill = isSelected ? '#FFAB7E' : 'white';
+                    return (jsxs("g", { children: [jsx(VertexElement, { className: generateVertexClassName, style: {
+                                    userSelect: 'none',
+                                    WebkitUserSelect: 'none',
+                                    WebkitTouchCallout: 'none',
+                                    touchAction: 'none',
+                                }, stroke: strokeColor, fill: vertexFill, cx: coord[0], cy: coord[1], r: vertexRadius, onClick: (e) => handleVertexClick(e, idx), onDoubleClick: (e) => {
+                                    console.log('双击事件', selectedVertexIndex, idx);
+                                    if (platform === PlatformType.H5) {
+                                        return;
+                                    }
                                     // 阻止双击事件冒泡到Google Maps
                                     e.preventDefault();
                                     e.stopPropagation();
@@ -16222,12 +16438,6 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
                                     setTimeout(() => {
                                         isDoubleClickingRef.current = false;
                                     }, 300);
-                                    if (platform === PlatformType.H5) {
-                                        if (onVertexDelete && coordinates.length > 3) {
-                                            onVertexDelete(idx);
-                                        }
-                                        return;
-                                    }
                                     // 打开删除确认 Tooltip（仅在可编辑时）
                                     if (editMode || (createMode && completed)) {
                                         setTooltipIndex(idx);
@@ -16235,12 +16445,51 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
                                 }, ...(platform === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
-                                            // 拖拽逻辑：编辑模式或创建完成后
-                                            if (isInEditMode || isCreatedAndCanDrag) {
-                                                if (draggable) {
-                                                    handleVertexMouseDown(e, idx);
-                                                }
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            // 如果不是支持拖拽的话，则不往下走
+                                            if (!draggable) {
+                                                return;
+                                            }
+                                            // 如果未选中，则走长按选中逻辑
+                                            if (selectedVertexIndex !== idx) {
+                                                handleVertexLongPressStart(e, idx);
                                             }
+                                            else {
+                                                // 已选中：准备可能的拖拽（记录起点），不阻塞双击
+                                                touchStartPosRef.current = {
+                                                    x: e.clientX,
+                                                    y: e.clientY,
+                                                };
+                                                hasStartedDragViaLongPressRef.current = false;
+                                                isVertexLongPressedRef.current = false;
+                                                longPressVertexIndexRef.current = idx;
+                                            }
+                                        }),
+                                        onTouchMove: createReactEventHandler((e) => {
+                                            // 如果不是支持拖拽的话，则不往下走
+                                            if (!draggable) {
+                                                return;
+                                            }
+                                            // 长按后，超过阈值再进入拖拽
+                                            handleVertexTouchMoveMaybeStartDrag(e, idx);
+                                        }),
+                                        onTouchEnd: createReactEventHandler(() => {
+                                            // 如果不是支持拖拽的话，则不往下走
+                                            if (!draggable) {
+                                                return;
+                                            }
+                                            // 如果已经通过长按进入拖拽，不触发双击检测
+                                            const startedDrag = hasStartedDragViaLongPressRef.current;
+                                            handleVertexLongPressEnd();
+                                            if (!startedDrag && !isVertexLongPressedRef.current) {
+                                                handleVertexDoubleTap(idx);
+                                            }
+                                            hasStartedDragViaLongPressRef.current = false;
+                                        }),
+                                        onTouchCancel: createReactEventHandler(() => {
+                                            handleVertexLongPressEnd();
+                                            hasStartedDragViaLongPressRef.current = false;
                                         }),
                                     }
                                     : {
@@ -16320,12 +16569,19 @@ const BoundaryElement = ({ data }) => {
                 editMapInfo.mobileMode === MobileEditMode.CREATE) {
                 return;
             }
-            setEditMapInfo((prev) => ({
-                ...prev,
-                mobileMode: MobileEditMode.START,
-                elementType: DataType.BOUNDARY,
-                selectElement: data,
-            }));
+            if (editMapInfo.selectElement?.id === data.id) {
+                setEditMapInfo({
+                    ...INIT_EDIT_MAP_INFO,
+                });
+            }
+            else {
+                setEditMapInfo((prev) => ({
+                    ...prev,
+                    mobileMode: MobileEditMode.START,
+                    elementType: DataType.BOUNDARY,
+                    selectElement: data,
+                }));
+            }
         }
         else {
             if (editMapInfo?.selectElement)
@@ -16338,7 +16594,11 @@ const BoundaryElement = ({ data }) => {
             }));
         }
     }, [platform, data, editMapInfo]);
-    return (jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onCoordinatesChange: (coordinates) => {
+    return (jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onPolygonClick: () => {
+            if (platform === PlatformType.H5) {
+                onPathClick();
+            }
+        }, onCoordinatesChange: (coordinates) => {
             console.log('onCoordinatesChange', coordinates);
             setEditMapInfo((prev) => ({
                 ...prev,
@@ -16460,25 +16720,26 @@ const ObstacleElement = ({ data }) => {
     const { addHistory } = useHistoryHandle();
     // 处理删除顶点
     const handleCreateVertexDelete = useCallback((vertexIndex) => {
+        console.log('ObstacleElement删除顶点', vertexIndex);
         if (editMapInfo?.selectElement?.points && editMapInfo?.selectElement?.points?.length > 0) {
             const newPoints = editMapInfo?.selectElement?.points?.filter((_, index) => index !== vertexIndex);
+            console.log('newPoints', newPoints);
             setEditMapInfo((prev) => ({
                 ...prev,
                 selectElement: {
                     ...prev.selectElement,
-                    points: newPoints,
+                    points: [...newPoints],
                 },
             }));
             addHistory({
                 selectElement: {
                     ...editMapInfo.selectElement,
-                    points: newPoints,
+                    points: [...newPoints],
                 },
             });
         }
     }, [editMapInfo]);
     const currentPoints = useMemo(() => {
-        // 为了方便解决删除顶点的时候，delete icon被遮挡的问题，所以逆序一下
         if (editMapInfo?.selectElement?.id === data.id) {
             return editMapInfo.selectElement.points;
         }
@@ -16504,13 +16765,19 @@ const ObstacleElement = ({ data }) => {
                 editMapInfo.mobileMode === MobileEditMode.CREATE) {
                 return;
             }
-            setEditMapInfo((prev) => ({
-                ...prev,
-                mobileMode: MobileEditMode.START,
-                elementType: DataType.OBSTACLE,
-                selectElement: data,
-            }));
-            return;
+            if (editMapInfo.selectElement?.id === data.id) {
+                setEditMapInfo({
+                    ...INIT_EDIT_MAP_INFO,
+                });
+            }
+            else {
+                setEditMapInfo((prev) => ({
+                    ...prev,
+                    mobileMode: MobileEditMode.START,
+                    elementType: DataType.OBSTACLE,
+                    selectElement: data,
+                }));
+            }
         }
         if (disabledObstacles || editMapInfo?.selectElement)
             return;
@@ -16541,10 +16808,12 @@ const ObstacleElement = ({ data }) => {
         return editMapInfo?.selectElement?.id === data.id;
     }, [editMapInfo, data, platform]);
     return (jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
+            // h5的情况下，支持点击禁区内部，也会触发选中
             if (platform === PlatformType.H5) {
                 onPathClick();
             }
         }, onVertexDelete: (vertexIndex) => handleCreateVertexDelete(vertexIndex), onCoordinatesChange: (coordinates) => {
+            console.log('onCoordinatesChange', coordinates);
             if (platform === PlatformType.H5 && editMapInfo.mobileMode === MobileEditMode.CREATE) {
                 return;
             }
@@ -17348,15 +17617,12 @@ const VisionOffElement = ({ data, onSelect }) => {
         if (platform === PlatformType.H5) {
             // h5编辑模式下，
             // start模式可以任意选
-            // create或者是edit模式的话，只有选中的是visionOff的时候才能选中
-            if ((editMapInfo.mobileMode === MobileEditMode.CREATE ||
-                editMapInfo.mobileMode === MobileEditMode.EDIT) &&
-                editMapInfo.elementType !== DataType.VISION_OFF) {
-                return;
-            }
-            if ((editMapInfo.mobileMode === MobileEditMode.CREATE ||
-                editMapInfo.mobileMode === MobileEditMode.EDIT) &&
-                editMapInfo.elementType === DataType.VISION_OFF) {
+            // create或者是edit模式的话，只有选中的是visionOff的时候才能操作
+            if (editMapInfo.mobileMode === MobileEditMode.CREATE ||
+                editMapInfo.mobileMode === MobileEditMode.EDIT) {
+                if (editMapInfo.elementType !== DataType.VISION_OFF) {
+                    return;
+                }
                 setEditMapInfo((prev) => ({
                     ...prev,
                     selectElement: data,
@@ -17365,12 +17631,19 @@ const VisionOffElement = ({ data, onSelect }) => {
                 }));
                 return;
             }
-            setEditMapInfo((prev) => ({
-                ...prev,
-                selectElement: data,
-                elementType: DataType.VISION_OFF,
-                mobileMode: MobileEditMode.START,
-            }));
+            if (editMapInfo.selectElement?.id === data.id) {
+                setEditMapInfo({
+                    ...INIT_EDIT_MAP_INFO,
+                });
+            }
+            else {
+                setEditMapInfo((prev) => ({
+                    ...prev,
+                    selectElement: data,
+                    elementType: DataType.VISION_OFF,
+                    mobileMode: MobileEditMode.START,
+                }));
+            }
             return;
         }
         if (editMapInfo?.selectElement)
@@ -17882,7 +18155,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
     }, [data]);
     const remainingTime = useMemo(() => {
         const currentTime = Math.floor(Date.now() / 1000);
-        console.log('data.expiration_ts--', data.expiration_ts);
+        // console.log('data.expiration_ts--', data.expiration_ts);
         if (data.expiration_ts <= currentTime) {
             return 0;
         }
@@ -18183,7 +18456,7 @@ const DoodleElement = ({ data }) => {
                 editMapInfo.mobileMode === MobileEditMode.EDIT) {
                 return;
             }
-            // 如果是编辑的话
+            // 如果start模式下
             setEditMapInfo((prev) => ({
                 ...prev,
                 selectElement: data,
@@ -19313,7 +19586,7 @@ function usePolygonDrawing(options = {}) {
     const { checkCanNotCreateAtPosition } = useCheckElement();
     const { addHistory } = useHistoryHandle();
     const points = useMemo(() => {
-        console.log('points->', editMapInfo?.selectElement?.points);
+        // console.log('points->', editMapInfo?.selectElement?.points);
         return editMapInfo?.selectElement?.points?.map((item) => ({ x: item[0], y: item[1] })) || [];
     }, [editMapInfo?.selectElement?.points]);
     const completed = useMemo(() => {
@@ -20457,13 +20730,6 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
             const scale = Math.pow(2, -zoomDiff); // 负数实现反向缩放
             console.log('scale', scale, currentZoom, zoomDiff);
             setOverlayScale(scale < 1 ? 1 : scale);
-            // if (scale < 1) {
-            //   setOverlayScale(1);
-            // } else if (scale > 4) {
-            //   setOverlayScale(4);
-            // } else {
-            //   setOverlayScale(scale);
-            // }
         };
         // 使用lodash throttle进行节流处理: 100ms内只执行一次
         const handleZoomChanged = throttle$2(updateScale, 50);