@fleet-frontend/mower-maps 0.2.0-beta.1 → 0.2.0-beta.3

package/dist/index.esm.js

@@ -3051,7 +3051,7 @@ function copyObject(source, props, object, customizer) {
 }
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax$1 = Math.max;
+var nativeMax$2 = Math.max;
 
 /**
  * A specialized version of `baseRest` which transforms the rest array.
@@ -3063,11 +3063,11 @@ var nativeMax$1 = Math.max;
  * @returns {Function} Returns the new function.
  */
 function overRest(func, start, transform) {
-  start = nativeMax$1(start === undefined ? (func.length - 1) : start, 0);
+  start = nativeMax$2(start === undefined ? (func.length - 1) : start, 0);
   return function() {
     var args = arguments,
         index = -1,
-        length = nativeMax$1(args.length - start, 0),
+        length = nativeMax$2(args.length - start, 0),
         array = Array(length);
 
     while (++index < length) {
@@ -4069,7 +4069,7 @@ function isPlainObject(value) {
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
 var nativeIsFinite = root$3.isFinite,
-    nativeMin$1 = Math.min;
+    nativeMin$2 = Math.min;
 
 /**
  * Creates a function like `_.round`.
@@ -4082,7 +4082,7 @@ function createRound(methodName) {
   var func = Math[methodName];
   return function(number, precision) {
     number = toNumber$2(number);
-    precision = precision == null ? 0 : nativeMin$1(toInteger(precision), 292);
+    precision = precision == null ? 0 : nativeMin$2(toInteger(precision), 292);
     if (precision && nativeIsFinite(number)) {
       // Shift with exponential notation to avoid floating-point issues.
       // See [MDN](https://mdn.io/round#Examples) for more details.
@@ -4305,6 +4305,212 @@ function createBaseFor(fromRight) {
  */
 var baseFor = createBaseFor();
 
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now$2 = function() {
+  return root$3.Date.now();
+};
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT$3 = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax$1 = Math.max,
+    nativeMin$1 = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce$2(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT$3);
+  }
+  wait = toNumber$2(wait) || 0;
+  if (isObject$4(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax$1(toNumber$2(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin$1(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now$2();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now$2());
+  }
+
+  function debounced() {
+    var time = now$2(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
 /**
  * This function is like `assignValue` except that it doesn't assign
  * `undefined` values.
@@ -4589,6 +4795,71 @@ var merge$1 = createAssigner(function(object, source, srcIndex) {
  */
 var round = createRound('round');
 
+/** Error message constants. */
+var FUNC_ERROR_TEXT$2 = 'Expected a function';
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle$2(func, wait, options) {
+  var leading = true,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT$2);
+  }
+  if (isObject$4(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce$2(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
 /**
  * 工具模块类型定义
  */
@@ -13726,6 +13997,7 @@ const CommonContext = createContext({
     mapRef: null,
     globalHeight: 0,
     heightOptions: [],
+    overlayScale: 1,
 });
 const CommonContextProvider = CommonContext.Provider;
 const useCommonContext = () => useContext(CommonContext);
@@ -14735,13 +15007,15 @@ function generateStraightParallelPaths(points, offsetDistance) {
     }
     return [parallelPath2Data, parallelPath1Data];
 }
-const DashPath = ({ points, stroke, strokeWidth, strokeOpacity, className }) => {
+const DashPath = ({ points, stroke, strokeWidth, strokeOpacity, className, }) => {
     const [parallelPath2Data, parallelPath1Data] = generateStraightParallelPaths(points, strokeWidth);
-    return (jsxs(Fragment, { children: [jsx("path", { className: className, 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", { className: className, fill: "none", d: parallelPath1Data, stroke: stroke, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: `${strokeWidth}px ${strokeWidth * 2}px`, style: { pointerEvents: 'none' } })] }));
+    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' }, vectorEffect: "non-scaling-stroke" }), 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' }, vectorEffect: "non-scaling-stroke" })] }));
 };
 
 const VertexElement = React__default.memo(({ r, stroke, ...props }) => {
-    return (jsx("circle", { r: r || 12, stroke: stroke || "#fff", fill: "#fff", strokeWidth: 2, vectorEffect: "non-scaling-stroke", ...props }));
+    const { overlayScale } = useCommonContext();
+    const radius = typeof r === 'number' ? r : 12;
+    return (jsx("circle", { r: radius * overlayScale, stroke: stroke || '#fff', fill: '#fff', strokeWidth: 2 * overlayScale, ...props }));
 });
 
 var _path$c;
@@ -14873,14 +15147,12 @@ const calculatePhysicalDistance$1 = (point1, point2) => {
  * @returns 中点坐标 [x, y]
  */
 const calculateMidpoint$1 = (point1, point2) => {
-    return [
-        (point1[0] + point2[0]) / 2,
-        (point1[1] + point2[1]) / 2
-    ];
+    return [(point1[0] + point2[0]) / 2, (point1[1] + point2[1]) / 2];
 };
 const DistanceLabels = ({ coordinates, createMode = false, editMode = false, completed = false, showPoints = false, mousePos: _mousePos = null, ghostLastDistance = null, ghostLastMidpoint = null, ghostFirstDistance = null, ghostFirstMidpoint = null, }) => {
     // 只在显示可操作顶点时显示距离
-    if (!(createMode && showPoints || editMode || (createMode && completed)) || coordinates.length < 2) {
+    if (!((createMode && showPoints) || editMode || (createMode && completed)) ||
+        coordinates.length < 1) {
         return null;
     }
     return (jsxs(Fragment, { children: [coordinates.map((coord, idx) => {
@@ -14925,23 +15197,20 @@ var MobileEditMode;
     MobileEditMode[MobileEditMode["EDIT"] = 1] = "EDIT";
     MobileEditMode[MobileEditMode["CREATE"] = 2] = "CREATE";
 })(MobileEditMode || (MobileEditMode = {}));
+var ClickEventType;
+(function (ClickEventType) {
+    ClickEventType["DOODLE_ACTIVE_TIME"] = "doodleActiveTime";
+})(ClickEventType || (ClickEventType = {}));
 const INIT_EDIT_MAP_INFO = {
-    minDistance: 0,
     editMap: false,
     selectElement: null,
-    createMode: CreateStatus.CREATING,
+    createMode: null,
     elementType: undefined,
     isShowDrag: false,
     mobileMode: MobileEditMode.START,
     allVisionOffPoints: [],
     historyList: [],
     currentHistoryIndex: 0,
-    onHandleEnterRecord: () => Promise.resolve(),
-    onHandleCompleteRecord: () => Promise.resolve(),
-    onHandleStopRecord: () => Promise.resolve(),
-    onSaveBoundaryData: () => Promise.resolve(),
-    onSaveMap: () => Promise.resolve(),
-    onHandleDeleteElement: () => Promise.resolve(),
 };
 const MapEditContext = createContext({
     editMapInfo: { ...INIT_EDIT_MAP_INFO },
@@ -15459,8 +15728,9 @@ const createPathData = (points) => {
     }
     return pathData;
 };
-const PolygonElement = ({ coordinates, 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自动判断
+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自动判断
  }) => {
+    const { overlayScale } = useCommonContext();
     const { svgRef } = useSvgEditContext();
     const [dragState, setDragState] = useState({
         isDragging: false,
@@ -15476,6 +15746,10 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
     const { checkCanNotCreateAtPosition } = useCheckElement();
     const { editMapInfo } = useMapEditContext();
     const { platform } = useCommonContext();
+    // delete icon可能被上一个点遮挡，因为delete在右上方，所以手动处理点让点按照顺时针渲染，这样delete icon层级就会高一些
+    const coordinates = useMemo(() => {
+        return editMapInfo?.createMode === CreateStatus.CREATING ? points : [...points].reverse();
+    }, [points, editMapInfo?.createMode]);
     // 计算点到线段的垂足坐标（使用通用工具函数）
     const calculatePerpendicularFoot$1 = useCallback((point, lineStart, lineEnd) => {
         return calculatePerpendicularFoot(point, lineStart, lineEnd);
@@ -15677,7 +15951,9 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
         console.log('handleMouseUp', JSON.stringify(dragState));
         if (dragState.isDragging && dragState.currentPosition) {
             // 构建新的坐标数组
-            const newCoordinates = [...coordinates];
+            const newCoordinates = editMapInfo?.createMode === CreateStatus.CREATING
+                ? [...coordinates]
+                : [...coordinates].reverse();
             // 如果是新创建的顶点，需要确保它已经被插入
             if (dragState.dragType === 'new' && dragState.newVertexIndex !== -1) {
                 if (showNotCreateCursor) ;
@@ -15709,7 +15985,7 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
             edgeInfo: null,
             dragType: null,
         });
-    }, [dragState, coordinates, onCoordinatesChange, showNotCreateCursor]);
+    }, [dragState, coordinates, onCoordinatesChange, showNotCreateCursor, editMapInfo?.createMode]);
     // 添加全局事件监听（支持触摸和鼠标事件）
     useEffect(() => {
         if (dragState.isDragging) {
@@ -15781,24 +16057,17 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
             mousePos.y,
         ])
         : null;
-    const ghostFirstDistance = createMode &&
-        mousePos &&
-        renderCoordinates.length > 0 &&
-        !completed &&
-        renderCoordinates.length >= 3
+    const ghostFirstDistance = createMode && mousePos && !completed && renderCoordinates.length >= 1
         ? calculatePhysicalDistance(renderCoordinates[0], [mousePos.x, mousePos.y])
         : null;
     // 虚拟连线的中点坐标
     const ghostLastMidpoint = createMode && mousePos && renderCoordinates.length > 0 && !completed
         ? calculateMidpoint(renderCoordinates[renderCoordinates.length - 1], [mousePos.x, mousePos.y])
         : null;
-    const ghostFirstMidpoint = createMode &&
-        mousePos &&
-        renderCoordinates.length > 0 &&
-        !completed &&
-        renderCoordinates.length >= 3
+    const ghostFirstMidpoint = createMode && mousePos && !completed && renderCoordinates.length >= 1
         ? calculateMidpoint(renderCoordinates[0], [mousePos.x, mousePos.y])
         : null;
+    console.log('ghostFirstMidpoint', ghostFirstMidpoint, ghostFirstDistance);
     return (jsxs(Fragment, { children: [(editMode || (createMode && completed)) &&
                 dragState.isDragging &&
                 dragState.dragType !== 'new' &&
@@ -15850,14 +16119,14 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                                     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 >= 3 && (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 }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint }), 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 }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint }), 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], onClick: (e) => handleVertexClick(e, idx), onDoubleClick: (e) => {
+                    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) => {
                                     // 阻止双击事件冒泡到Google Maps
                                     e.preventDefault();
                                     e.stopPropagation();
@@ -15905,7 +16174,18 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                                                 }
                                             }
                                         },
-                                    }) }), tooltipIndex === idx && (jsxs("g", { transform: `translate(${coord[0] + 4}, ${coord[1] - 4})`, onClick: (e) => {
+                                        onMouseUp: (e) => {
+                                            // 拖拽逻辑：编辑模式或创建完成后
+                                            if (isInEditMode || isCreatedAndCanDrag) {
+                                                if (draggable) {
+                                                    // 延迟执行mouseDown，等待可能的doubleClick
+                                                    if (mouseDownTimerRef.current !== null) {
+                                                        window.clearTimeout(mouseDownTimerRef.current);
+                                                    }
+                                                }
+                                            }
+                                        },
+                                    }) }), tooltipIndex === idx && (jsxs("g", { transform: `translate(${coord[0] + 4 * overlayScale * 2}, ${coord[1] - 4 * overlayScale * 2}) scale(${overlayScale * 2})`, onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                     if (onVertexDelete &&
@@ -15914,7 +16194,19 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                                         onVertexDelete(idx);
                                     }
                                     setTooltipIndex(null);
-                                }, style: { cursor: 'pointer' }, children: [jsx("rect", { x: 0, y: -24, width: 20, height: 20, rx: 2, ry: 2, fill: "#fff", strokeWidth: 1, filter: "url(#vertex-tooltip-shadow)" }), jsx("g", { transform: `translate(2, -22)`, children: jsx(SvgDelete$1, {}) })] })), canComplete && (jsx("text", { x: coord[0], y: coord[1], textAnchor: "middle", alignmentBaseline: "middle", fontSize: 20, fill: strokeColor, style: { pointerEvents: 'none' }, children: "\u2713" }))] }, `vertex-${idx}`));
+                                }, style: { cursor: 'pointer' }, children: [jsx("rect", { x: 0, y: -24, width: 20, height: 20, rx: 2, ry: 2, fill: "#fff", strokeWidth: 1, filter: "url(#vertex-tooltip-shadow)" }), jsx("g", { transform: `translate(2, -22)`, children: jsx(SvgDelete$1, {}) })] })), canComplete && (jsx("g", { style: { pointerEvents: 'none' }, transform: `translate(${coord[0] - 5 * overlayScale * 3}, ${coord[1] - 2.5 * overlayScale * 3}) scale(${overlayScale * 3})`, children: jsx("svg", { width: "10", height: "5", viewBox: "0 0 6 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M0.5 2.5L1.3452 3.3452C1.71469 3.71469 2.30636 3.73741 2.7031 3.39735L5.5 1", stroke: "#FF7A33", "stroke-linecap": "round" }) }) })
+                            // <rect
+                            //   x={coord[0]}
+                            //   y={coord[1]}
+                            //   width={20}
+                            //   height={20}
+                            //   rx={2}
+                            //   ry={2}
+                            //   fill="transparent"
+                            //   style={{ pointerEvents: 'none' }}
+                            // >
+                            // </rect>
+                            )] }, `vertex-${idx}`));
                 })] }));
 };
 
@@ -15966,7 +16258,7 @@ const BoundaryElement = ({ data }) => {
             }));
         }
     }, [platform, data, editMapInfo]);
-    return (jsx(PolygonElement, { coordinates: 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, onCoordinatesChange: (coordinates) => {
             console.log('onCoordinatesChange', coordinates);
             setEditMapInfo((prev) => ({
                 ...prev,
@@ -16101,6 +16393,7 @@ const ObstacleElement = ({ data }) => {
         }
     }, [editMapInfo]);
     const currentPoints = useMemo(() => {
+        // 为了方便解决删除顶点的时候，delete icon被遮挡的问题，所以逆序一下
         if (editMapInfo?.selectElement?.id === data.id) {
             return editMapInfo.selectElement.points;
         }
@@ -16144,7 +16437,11 @@ const ObstacleElement = ({ data }) => {
             setEditMapInfo((prev) => ({
                 ...prev,
                 selectElement: data,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: data,
+                    },
+                ],
                 currentHistoryIndex: 0,
                 elementType: DataType.OBSTACLE,
                 editMap: true,
@@ -16158,7 +16455,7 @@ const ObstacleElement = ({ data }) => {
         }
         return editMapInfo?.selectElement?.id === data.id;
     }, [editMapInfo, data, platform]);
-    return (jsx(PolygonElement, { coordinates: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
+    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: () => {
             if (platform === PlatformType.H5) {
                 onPathClick();
             }
@@ -16747,6 +17044,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
 };
 
 const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCancel, onDragEnd, onDragMove, disabled = false, className = '', scaleConstraints = { minEdgeLength: 0.5, maxEdgeLength: 10000 }, showInfo = true, }) => {
+    const { overlayScale } = useCommonContext();
     const { platform } = useCommonContext();
     const { editMapInfo } = useMapEditContext();
     const dataPoints = useMemo(() => {
@@ -16862,7 +17160,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
             return;
         onDragMove?.(currentPoints.map((point) => [point.x, point.y]));
     }, [currentPoints, isSelected, isDragging, isRotating, isScaling]);
-    return (jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsx(PolygonElement, { coordinates: visionOffData?.points, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: () => {
+    return (jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsx(PolygonElement, { points: visionOffData?.points, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: () => {
                     onSelect?.();
                 }, onPolygonClick: () => {
                     if (platform === PlatformType.H5) {
@@ -16891,9 +17189,9 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
                     const infoBoxWidth = 140; // 信息框宽度
                     const infoBoxHeight = 30; // 信息框高度
                     const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
-                    const scale = isWeb ? 2 : 1;
+                    const scale = (isWeb ? 2 : 1) * overlayScale;
                     const offsetLeft = 10 * scale;
-                    return (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
+                    return (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#f16629", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
                                     ? {
                                         onTouchStart: createReactEventHandler((e) => {
                                             handleMouseDownWithDisabled(e);
@@ -17000,7 +17298,11 @@ const VisionOffElement = ({ data, onSelect }) => {
                 ...prev,
                 selectElement: data,
                 elementType: DataType.VISION_OFF,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: data,
+                    },
+                ],
                 currentHistoryIndex: 0,
                 editMap: true,
                 isShowDrag: true,
@@ -17464,7 +17766,7 @@ const DoodleTransform = ({ data, isSelected: _isSelected, onSelect }) => {
     }
 };
 
-const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, }) => {
+const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, onClickInfo, }) => {
     const { platform } = useCommonContext();
     // 使用自定义hook管理所有变换逻辑
     const { currentCenter, currentScale, currentDirection, isDragging, isRotating, isScaling, initializeTransform, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, dimensions, } = useDoodleTransform(data, onTransformChange, {
@@ -17486,6 +17788,17 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
         };
     }, [data?.svg, currentCenter, currentScale, currentDirection]);
     const isWeb = useMemo(() => platform === 'web', [platform]);
+    const activeTime = useMemo(() => {
+        // 如果当前时间在有效期范围，则显示有效期，否则显示0
+        const now = Date.now();
+        console.log('now------->', now);
+        console.log('data.create_ts------->', data.create_ts);
+        console.log('data.expiration_ts------->', data.expiration_ts);
+        if (data.create_ts <= now && data.expiration_ts >= now) {
+            return Math.floor((data.expiration_ts - now) / (60 * 60 * 24 * 1000));
+        }
+        return 0;
+    }, [data]);
     // 初始化变换状态
     useEffect(() => {
         initializeTransform();
@@ -17503,6 +17816,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                     onEnd: (event) => {
                         event.preventDefault();
                         handleMouseUp();
+                        onDragEnd?.(transformedData);
                     },
                 }, platform);
                 document.body.style.userSelect = 'none';
@@ -17666,7 +17980,9 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleScaleStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) }), showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, children: jsxs("div", { style: {
+                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) }), showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
+                                    onClickInfo?.();
+                                }, children: jsxs("div", { style: {
                                         padding: '5px 6px',
                                         background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
                                         borderRadius: '10px',
@@ -17682,12 +17998,12 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                                 alignItems: 'center',
                                                 justifyContent: 'center',
                                                 gap: '10px',
-                                            }, children: [jsx("div", { children: "Active Time:3" }), jsx(SvgTransformArrow, {})] })] }) }))] }));
+                                            }, children: [jsxs("div", { children: ["Active Time: ", activeTime] }), jsx(SvgTransformArrow, {})] })] }) }))] }));
                 })()] }));
 };
 
 const DoodleElement = ({ data }) => {
-    const { editMapInfo, setEditMapInfo, onHandleEnterRecord } = useMapEditContext();
+    const { editMapInfo, setEditMapInfo, onHandleEnterRecord, onClickEvent } = useMapEditContext();
     const { addHistory } = useHistoryHandle();
     const { platform } = useCommonContext();
     const isSelected = useMemo(() => {
@@ -17723,9 +18039,8 @@ const DoodleElement = ({ data }) => {
         if (platform === PlatformType.H5) {
             // h5编辑模式下，
             // 如果是创建，只能选择新建的doodle
-            if ((editMapInfo.mobileMode === MobileEditMode.CREATE ||
-                editMapInfo.mobileMode === MobileEditMode.EDIT) &&
-                editMapInfo.elementType !== DataType.DOODLE) {
+            if (editMapInfo.mobileMode === MobileEditMode.CREATE ||
+                editMapInfo.mobileMode === MobileEditMode.EDIT) {
                 return;
             }
             // 如果是编辑的话
@@ -17746,7 +18061,14 @@ const DoodleElement = ({ data }) => {
         })?.then(() => {
             setEditMapInfo((prev) => ({
                 ...prev,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: {
+                            ...data,
+                            transformedPoints: transformedElements,
+                        },
+                    },
+                ],
                 currentHistoryIndex: 0,
                 selectElement: {
                     ...data,
@@ -17759,6 +18081,16 @@ const DoodleElement = ({ data }) => {
         });
     }, [data, onHandleEnterRecord, platform, editMapInfo]);
     const handleCancel = useCallback(() => {
+        if (platform === PlatformType.H5) {
+            setEditMapInfo((prev) => ({
+                ...prev,
+                selectElement: null,
+            }));
+            addHistory({
+                selectElement: null,
+            });
+            return;
+        }
         setEditMapInfo((prev) => ({
             ...prev,
             editMap: false,
@@ -17767,6 +18099,9 @@ const DoodleElement = ({ data }) => {
             isShowDrag: false,
         }));
     }, []);
+    const handleClickInfo = useCallback(() => {
+        onClickEvent?.(ClickEventType.DOODLE_ACTIVE_TIME);
+    }, [onClickEvent]);
     // const handleDragMove = useCallback(
     //   (data: DoodleData) => {
     //     setEditMapInfo((prev: EditMapInfo) => ({
@@ -17794,7 +18129,7 @@ const DoodleElement = ({ data }) => {
             },
         });
     }, [transformedElements]);
-    return (jsx(DoodleTransformWrapper, { data: originData, onTransformChange: handleTransformChange, isSelected: isSelected, isSelectedWithoutOperation: isSelectedWithoutOperation, onSelect: handleSelect, onCancel: handleCancel, onDragEnd: handleDragEnd, showInfo: platform === PlatformType.H5 }));
+    return (jsx(DoodleTransformWrapper, { data: originData, onTransformChange: handleTransformChange, isSelected: isSelected, isSelectedWithoutOperation: isSelectedWithoutOperation, onSelect: handleSelect, onCancel: handleCancel, onDragEnd: handleDragEnd, showInfo: platform === PlatformType.H5, onClickInfo: handleClickInfo }));
 };
 
 const SvgElement = React__default.memo(({ type, data, interactive = false }) => {
@@ -17925,12 +18260,7 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const ChannelClipPath = React__default.memo(() => {
     const { svgElementDatas, svgRef } = useSvgEditContext();
-    const { editMapInfo } = useMapEditContext();
     const boundaryData = svgElementDatas?.[DataType.BOUNDARY] || [];
-    useEffect(() => {
-        console.log('ChannelClipPath', svgElementDatas);
-    }, [svgElementDatas]);
-    // console.log('ChannelClipPath refresh', svgElementDatas, editMapInfo);
     const [minX, minY, maxX, maxY] = useMemo(() => {
         const baseVal = svgRef?.viewBox.baseVal;
         return [
@@ -17939,7 +18269,13 @@ const ChannelClipPath = React__default.memo(() => {
             baseVal?.x + (baseVal?.width || 0),
             baseVal?.y + (baseVal?.height || 0),
         ];
-    }, [svgRef?.viewBox.baseVal?.x]);
+    }, [
+        svgRef?.viewBox.baseVal?.x,
+        svgRef?.viewBox.baseVal?.y,
+        svgRef?.viewBox.baseVal?.width,
+        svgRef?.viewBox.baseVal?.height,
+    ]);
+    console.log('boundaryData---->', svgRef?.viewBox.baseVal);
     /**
      * 判断多边形是否为逆时针方向
      * 使用叉积法计算多边形的有向面积
@@ -19081,7 +19417,7 @@ const CreateObstacleElement = forwardRef(({ enabled = false, svgElement, onPoint
     if (!enabled || points.length === 0) {
         return null;
     }
-    return (jsx(PolygonElement, { coordinates: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 2, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
+    return (jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 2, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
 });
 CreateObstacleElement.displayName = 'CreateObstacleElement';
 
@@ -19135,7 +19471,7 @@ const useCreateVisionOffElement = () => {
 const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChange }, ref) => {
     const pointManagerRef = useRef(null);
     const { editMapInfo, setEditMapInfo } = useMapEditContext();
-    const { getVisionOffPoints } = useCreateVisionOffElement();
+    const { getVisionOffPoints, centerPoint } = useCreateVisionOffElement();
     const { svgElementDatas } = useSvgEditContext();
     const { checkCanNotCreateAtPosition } = useCheckElement();
     const svgRef = useRef(null);
@@ -19236,6 +19572,28 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
             allVisionOffPoints,
         });
     };
+    const addDoodle = (selectedDoodle) => {
+        const newDoodle = initDoodle();
+        const svg = selectedDoodle?.svgStr;
+        const minLength = selectedDoodle.minLength;
+        const parseSvg = SvgParserNative.parseSvg(svg);
+        const svgMinLength = Math.min(parseSvg.width, parseSvg.height) / SCALE_FACTOR;
+        // 使用获取到的 SVG 内容，如果没有获取到则使用 URL
+        newDoodle.svg = svg;
+        newDoodle.scale = minLength / svgMinLength;
+        newDoodle.direction = 0;
+        newDoodle.center = restorePoint(centerPoint);
+        setEditMapInfo((prev) => ({
+            ...prev,
+            currentHistoryIndex: 0,
+            mobileMode: MobileEditMode.CREATE,
+            elementType: DataType.DOODLE,
+            selectElement: newDoodle,
+        }));
+        addHistory({
+            selectElement: newDoodle,
+        });
+    };
     useEffect(() => {
         onEditInfoMapChange?.(editMapInfo);
     }, [editMapInfo]);
@@ -19270,6 +19628,7 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
         // 清空历史记录
         clearHistory,
         addHistory,
+        addDoodle,
     }));
     // 初始化多边形绘制 Hook
     const { onSvgClick, onSvgMouseMove, onPointClick, points, completed, mousePos, updatePoints } = usePolygonDrawing({ createMode: isCreating });
@@ -19299,6 +19658,9 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
                 // pointerEvents: 'auto', // 关键：允许接收鼠标事件
             }, xmlns: "http://www.w3.org/2000/svg", "shape-rendering": "geometricPrecision", "text-rendering": "geometricPrecision", "image-rendering": "optimizeQuality", ref: svgRef, onClick: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgClick : undefined, onMouseMove: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgMouseMove : undefined, children: [jsxs("defs", { children: [jsx("filter", { id: "vertex-tooltip-shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: jsx("feDropShadow", { dx: "2", dy: "2", stdDeviation: "2", floodColor: "#000", floodOpacity: "0.12" }) }), jsxs("filter", { id: `path-hover-${DataType.BOUNDARY}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: BOUNDARY_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.VISION_OFF}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: VISION_OFF_AREA_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.OBSTACLE}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: OBSTACLE_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] })] }), Object.keys(svgElementDatas)
                     ?.sort?.((a, b) => {
+                    if (a === DataType.BOUNDARY || b === DataType.BOUNDARY) {
+                        return 0;
+                    }
                     const aVal = a === editMapInfo.elementType ? 1 : 0;
                     const bVal = b === editMapInfo.elementType ? 1 : 0;
                     return aVal - bVal;
@@ -19310,7 +19672,7 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
                     editMapInfo.createMode &&
                     editMapInfo.elementType !== DataType.DOODLE &&
                     editMapInfo.elementType !== DataType.VISION_OFF &&
-                    (points.length > 0 || editMapInfo?.selectElement?.points?.length > 0) && (jsx(PolygonElement, { coordinates: points?.length > 0
+                    (points.length > 0 || editMapInfo?.selectElement?.points?.length > 0) && (jsx(PolygonElement, { points: points?.length > 0
                         ? points.map((p) => [p.x, p.y, 2])
                         : editMapInfo?.selectElement?.points, fillColor: createElementStyle.fillColor, strokeColor: createElementStyle.lineColor, strokeWidth: createElementStyle.lineWidth, createMode: editMapInfo.elementType !== DataType.VISION_OFF, showPoints: editMapInfo.elementType !== DataType.VISION_OFF, onPointClick: onPointClick, completed: completed, mousePos: mousePos, onVertexDelete: (vertexIndex) => handleCreateVertexDelete(vertexIndex), onCoordinatesChange: (newCoords) => {
                         // 创建模式下的坐标变化（拖拽时）
@@ -19375,7 +19737,10 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
                             },
                             points: item.points,
                             id: item.id,
-                        } })))] }) }));
+                        } }))), platform === PlatformType.H5 &&
+                    editMapInfo.elementType === DataType.DOODLE &&
+                    editMapInfo.mobileMode === MobileEditMode.CREATE &&
+                    editMapInfo?.selectElement?.svg && (jsx(DoodleElement, { data: { ...editMapInfo?.selectElement } }))] }) }));
 });
 SvgEditMap.displayName = 'SvgEditMap';
 
@@ -19728,7 +20093,11 @@ const DoodleModal = ({ open, onSelect, setOpen, doodleList, centerPoint }) => {
             })?.then(() => {
                 setEditMapInfo({
                     ...editMapInfo,
-                    historyList: [newDoodle],
+                    historyList: [
+                        {
+                            selectElement: newDoodle,
+                        },
+                    ],
                     currentHistoryIndex: 0,
                     createMode: CreateStatus.COMPLETED,
                     elementType: DataType.DOODLE,
@@ -19810,7 +20179,11 @@ const AddEntry = ({ doodleList, disabledObstacles, editMap }) => {
         })?.then(() => {
             setEditMapInfo({
                 ...editMapInfo,
-                historyList: [newElement],
+                historyList: [
+                    {
+                        selectElement: newElement,
+                    },
+                ],
                 currentHistoryIndex: 0,
                 createMode: type === DataType.VISION_OFF ? CreateStatus.COMPLETED : CreateStatus.CREATING,
                 elementType: type,
@@ -19839,11 +20212,11 @@ const AddEntry = ({ doodleList, disabledObstacles, editMap }) => {
                 }), children: jsx("div", { className: styles$c.icon, children: jsx(SvgAddEntry, {}) }) }), jsx(DoodleModal, { centerPoint: centerPoint, doodleList: doodleList, open: doodleOpen, onOk: () => setDoodleOpen(false), setOpen: setDoodleOpen })] }));
 };
 
-var css_248z$9 = ".index-module_handleElementInfo__vWIaf {\n  position: absolute;\n  right: 0;\n  top: 0;\n  border-radius: 8px;\n  padding: 4px 8px;\n  background: #fff;\n  width: 265px;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 {\n  position: absolute;\n  left: -96px;\n  top: 0;\n  display: flex;\n  gap: 12px;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_undo__lPY1X,\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_redo__EU5u- {\n  background: #fff;\n  border-radius: 8px;\n  padding: 6px;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_undo__lPY1X:not(.index-module_disabled__w6gCJ):hover,\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_redo__EU5u-:not(.index-module_disabled__w6gCJ):hover {\n  opacity: 0.8;\n  cursor: pointer;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_undo__lPY1X.index-module_disabled__w6gCJ,\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_redo__EU5u-.index-module_disabled__w6gCJ {\n  color: #d8d8d8;\n}\n.index-module_handleElementInfo__vWIaf .index-module_nameEdit__eVzQ- {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0 0 4px 0;\n}\n.index-module_handleElementInfo__vWIaf .index-module_nameEdit__eVzQ- input {\n  padding: 2px 0;\n}\n.index-module_handleElementInfo__vWIaf .index-module_nameEdit__eVzQ- .index-module_edit__b0r9I {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_handleElementInfo__vWIaf .index-module_boundaryOther__FyJvt {\n  padding-top: 4px;\n  border-top: 1px solid rgb(197, 197, 197);\n}\n.index-module_handleElementInfo__vWIaf .index-module_handle__4mIxr {\n  border-top: 1px solid rgb(197, 197, 197);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 0;\n}\n\n.index-module_doodleInfo__bd2ua .index-module_time__1bUFf {\n  width: 100%;\n}\n.index-module_doodleInfo__bd2ua .index-module_exist__gWtNo {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n.index-module_doodleInfo__bd2ua .index-module_tip__1HNmj {\n  color: #ff3f33;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.index-module_obstacleInfo__w6Sod .index-module_areaInfo__-WJPL {\n  border-top: 1px solid rgb(197, 197, 197);\n}\n\n.index-module_areaInfo__-WJPL {\n  color: #9e9e9e;\n  width: 100%;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px; /* 114.286% */\n}\n.index-module_areaInfo__-WJPL .index-module_areaItem__fk-i2 {\n  display: flex;\n  justify-content: space-between;\n  padding: 6px 0;\n}\n\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM {\n  color: #1f1f1f;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM .index-module_otherItem__ATLFZ {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM .index-module_otherItem__ATLFZ .index-module_value__x3-se {\n  margin-left: auto;\n}\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM .index-module_otherItem__ATLFZ .index-module_icon__167WB {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_boundaryInfo__VfR-N .index-module_areaInfo__-WJPL {\n  border-top: 1px solid rgb(197, 197, 197);\n}";
+var css_248z$9 = ".index-module_handleElementInfo__vWIaf {\n  position: absolute;\n  right: 0;\n  top: 0;\n  border-radius: 8px;\n  padding: 4px 8px;\n  background: #fff;\n  width: 265px;\n  user-select: none;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 {\n  position: absolute;\n  left: -96px;\n  top: 0;\n  display: flex;\n  gap: 12px;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_undo__lPY1X,\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_redo__EU5u- {\n  background: #fff;\n  border-radius: 8px;\n  padding: 6px;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_undo__lPY1X:not(.index-module_disabled__w6gCJ):hover,\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_redo__EU5u-:not(.index-module_disabled__w6gCJ):hover {\n  opacity: 0.8;\n  cursor: pointer;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_undo__lPY1X.index-module_disabled__w6gCJ,\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_redo__EU5u-.index-module_disabled__w6gCJ {\n  color: #d8d8d8;\n}\n.index-module_handleElementInfo__vWIaf .index-module_nameEdit__eVzQ- {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0 0 4px 0;\n}\n.index-module_handleElementInfo__vWIaf .index-module_nameEdit__eVzQ- input {\n  padding: 2px 0;\n}\n.index-module_handleElementInfo__vWIaf .index-module_nameEdit__eVzQ- .index-module_edit__b0r9I {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_handleElementInfo__vWIaf .index-module_boundaryOther__FyJvt {\n  padding-top: 4px;\n  border-top: 1px solid rgb(197, 197, 197);\n}\n.index-module_handleElementInfo__vWIaf .index-module_handle__4mIxr {\n  border-top: 1px solid rgb(197, 197, 197);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 0;\n}\n\n.index-module_doodleInfo__bd2ua .index-module_time__1bUFf {\n  width: 100%;\n}\n.index-module_doodleInfo__bd2ua .index-module_exist__gWtNo {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n.index-module_doodleInfo__bd2ua .index-module_tip__1HNmj {\n  color: #ff3f33;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.index-module_obstacleInfo__w6Sod .index-module_areaInfo__-WJPL {\n  border-top: 1px solid rgb(197, 197, 197);\n}\n\n.index-module_areaInfo__-WJPL {\n  color: #9e9e9e;\n  width: 100%;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px; /* 114.286% */\n}\n.index-module_areaInfo__-WJPL .index-module_areaItem__fk-i2 {\n  display: flex;\n  justify-content: space-between;\n  padding: 6px 0;\n}\n\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM {\n  color: #1f1f1f;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM .index-module_otherItem__ATLFZ {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM .index-module_otherItem__ATLFZ .index-module_value__x3-se {\n  margin-left: auto;\n}\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM .index-module_otherItem__ATLFZ .index-module_icon__167WB {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_boundaryInfo__VfR-N .index-module_areaInfo__-WJPL {\n  border-top: 1px solid rgb(197, 197, 197);\n}";
 var styles$9 = {"handleElementInfo":"index-module_handleElementInfo__vWIaf","undoAndRedo":"index-module_undoAndRedo__EKeA8","undo":"index-module_undo__lPY1X","redo":"index-module_redo__EU5u-","disabled":"index-module_disabled__w6gCJ","nameEdit":"index-module_nameEdit__eVzQ-","handle":"index-module_handle__4mIxr","doodleInfo":"index-module_doodleInfo__bd2ua","time":"index-module_time__1bUFf","exist":"index-module_exist__gWtNo","tip":"index-module_tip__1HNmj","obstacleInfo":"index-module_obstacleInfo__w6Sod","areaInfo":"index-module_areaInfo__-WJPL","areaItem":"index-module_areaItem__fk-i2","boundaryInfo":"index-module_boundaryInfo__VfR-N","otherEdit":"index-module_otherEdit__17SuM","otherItem":"index-module_otherItem__ATLFZ","value":"index-module_value__x3-se","icon":"index-module_icon__167WB"};
 styleInject(css_248z$9);
 
-var css_248z$8 = ".index-module_infoHeader__l9F6q {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 8px 0;\n  border-bottom: 1px solid rgb(197, 197, 197);\n}\n.index-module_infoHeader__l9F6q .index-module_headerIcon__sK1hg {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_infoHeader__l9F6q .index-module_headerName__UGnrH {\n  margin-left: 4px;\n  color: rgb(158, 158, 158);\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 16px;\n}\n.index-module_infoHeader__l9F6q .index-module_headerHandle__ymh7f {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index-module_infoHeader__l9F6q .index-module_headerHandle__ymh7f .index-module_focus__llcox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_infoHeader__l9F6q .index-module_headerHandle__ymh7f .index-module_delete__hD4-Q {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n  cursor: pointer;\n}";
+var css_248z$8 = ".index-module_infoHeader__l9F6q {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 8px 0;\n  border-bottom: 1px solid rgb(197, 197, 197);\n}\n.index-module_infoHeader__l9F6q .index-module_headerIcon__sK1hg {\n  width: 16px;\n  height: 16px;\n}\n.index-module_infoHeader__l9F6q .index-module_headerName__UGnrH {\n  margin-left: 4px;\n  color: rgb(158, 158, 158);\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 16px;\n  pointer-events: none;\n}\n.index-module_infoHeader__l9F6q .index-module_headerHandle__ymh7f {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index-module_infoHeader__l9F6q .index-module_headerHandle__ymh7f .index-module_focus__llcox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_infoHeader__l9F6q .index-module_headerHandle__ymh7f .index-module_delete__hD4-Q {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n  cursor: pointer;\n}";
 var styles$8 = {"infoHeader":"index-module_infoHeader__l9F6q","headerIcon":"index-module_headerIcon__sK1hg","headerName":"index-module_headerName__UGnrH","headerHandle":"index-module_headerHandle__ymh7f","focus":"index-module_focus__llcox","delete":"index-module_delete__hD4-Q"};
 styleInject(css_248z$8);
 
@@ -19875,7 +20248,7 @@ var SvgDelete = function SvgDelete(props) {
   })));
 };
 
-const Header = ({ handleDelete, handleFocus, showFocus = false, showDelete = true, type }) => {
+const Header = ({ handleDelete, handleFocus, showFocus = false, showDelete = true, type, }) => {
     const currentType = useMemo(() => {
         return DATE_TYPE_MAP.find((item) => item.type === type);
     }, [type]);
@@ -19900,14 +20273,14 @@ var SvgEdit = function SvgEdit(props) {
   })));
 };
 
-const NameModal = ({ name, open, setOpen, onOk }) => {
+const NameModal = ({ title, name, open, setOpen, onOk }) => {
     const [nameValue, setNameValue] = useState('');
     useEffect(() => {
         if (open) {
             setNameValue(name || '');
         }
     }, [name, open]);
-    return (jsx(CustomModal, { title: `${name}`, titleCenter: true, open: open, onOk: () => {
+    return (jsx(CustomModal, { title: `${title}`, titleCenter: true, open: open, onOk: () => {
             onOk?.(nameValue);
             setOpen(false);
         }, onCancel: () => setOpen(false), okText: "Confirm", afterClose: () => {
@@ -19915,9 +20288,9 @@ const NameModal = ({ name, open, setOpen, onOk }) => {
         }, children: jsx(Input, { maxLength: 120, showCount: true, placeholder: "Please enter boundary name", value: nameValue, onChange: (e) => setNameValue(e.target.value) }) }));
 };
 
-const NameEdit = ({ name, onChange }) => {
+const NameEdit = ({ title, name, onChange }) => {
     const [open, setOpen] = React__default.useState(false);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: styles$7.nameEdit, children: [jsx("div", { className: styles$7.content, children: name }), jsx("div", { className: styles$7.edit, onClick: () => setOpen(true), children: jsx(SvgEdit, {}) })] }), jsx(NameModal, { name: name, open: open, setOpen: setOpen, onOk: onChange })] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: styles$7.nameEdit, children: [jsx("div", { className: styles$7.content, children: name }), jsx("div", { className: styles$7.edit, onClick: () => setOpen(true), children: jsx(SvgEdit, {}) })] }), jsx(NameModal, { title: title, name: name, open: open, setOpen: setOpen, onOk: onChange })] }));
 };
 
 var _path$3;
@@ -20038,7 +20411,7 @@ const HeightModal = ({ zoneName, open, setOpen, onChange, value, heightOptions,
                         }), children: [jsx("div", { className: styles$4.left, children: jsxs(Radio, { value: ZoneHeightModalTypeEnum.RADIO, children: ["Customize zone height (", getHeightUnit(unitType), ")"] }) }), jsx("div", { className: styles$4.right, children: jsx(CutHeightSlider, { units: unitType, value: currentValue?.cuttingHeight, heightOptions: heightOptions, onChange: onHeightChange }) })] })] }) }) }));
 };
 
-var css_248z$3 = ".index-module_directions__Hv0zx {\n  color: #1d1d1d;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n}\n.index-module_directions__Hv0zx .index-module_default__sSWp4 {\n  position: absolute;\n  bottom: 20px;\n  left: 9px;\n}\n.index-module_directions__Hv0zx .index-module_tips__VVEuO {\n  line-height: 16px;\n}\n.index-module_directions__Hv0zx .index-module_optimal__07le4 {\n  color: rgb(255, 113, 51);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  margin: 4px 0 12px;\n}\n.index-module_directions__Hv0zx .index-module_content__PiCFf {\n  position: relative;\n  width: 100%;\n  margin-bottom: 12px;\n}\n.index-module_directions__Hv0zx .index-module_background__WM4u- {\n  position: absolute;\n  width: 100%;\n  height: 300px;\n  background: #f5f5f5;\n  border-radius: 8px;\n  z-index: 0;\n}\n.index-module_directions__Hv0zx .index-module_luppan__nGfH2 {\n  inset: 0;\n  z-index: 1;\n}\n.index-module_directions__Hv0zx .index-module_slideTip__RGnd1 {\n  margin: 20px 0;\n}\n.index-module_directions__Hv0zx .index-module_slider__VDKnB {\n  padding: 0 24px;\n}";
+var css_248z$3 = ".index-module_directions__Hv0zx {\n  color: #1d1d1d;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n}\n.index-module_directions__Hv0zx .index-module_default__sSWp4 {\n  position: absolute;\n  bottom: 20px;\n  left: 9px;\n}\n.index-module_directions__Hv0zx .index-module_tips__VVEuO {\n  line-height: 16px;\n}\n.index-module_directions__Hv0zx .index-module_optimal__07le4 {\n  color: rgb(255, 113, 51);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  margin: 4px 0 12px;\n}\n.index-module_directions__Hv0zx .index-module_content__PiCFf {\n  position: relative;\n  width: 100%;\n  margin-bottom: 12px;\n}\n.index-module_directions__Hv0zx .index-module_background__WM4u- {\n  position: absolute;\n  width: 100%;\n  height: 300px;\n  background: #f5f5f5;\n  border-radius: 8px;\n  z-index: 0;\n  overflow: hidden;\n}\n.index-module_directions__Hv0zx .index-module_luppan__nGfH2 {\n  inset: 0;\n  z-index: 1;\n}\n.index-module_directions__Hv0zx .index-module_slideTip__RGnd1 {\n  margin: 20px 0;\n}\n.index-module_directions__Hv0zx .index-module_slider__VDKnB {\n  padding: 0 24px;\n}";
 var styles$3 = {"directions":"index-module_directions__Hv0zx","default":"index-module_default__sSWp4","tips":"index-module_tips__VVEuO","optimal":"index-module_optimal__07le4","content":"index-module_content__PiCFf","background":"index-module_background__WM4u-","luppan":"index-module_luppan__nGfH2","slideTip":"index-module_slideTip__RGnd1","slider":"index-module_slider__VDKnB"};
 styleInject(css_248z$3);
 
@@ -20371,10 +20744,71 @@ const MowDirection_L = (props) => {
                         }, children: [jsx("div", { className: styles$2.leftTop, children: jsx(SvgOption, {}) }), jsx("div", { className: styles$2.rightBottom, children: jsx(SvgOption, {}) })] })] }) }) }));
 };
 
+const BoundarySvgRender = React__default.memo(({ mapJson, id, maxWidth = 300 }) => {
+    const svgElementData = useMemo(() => {
+        const data = UnifiedMapDataProcessor.processMapData(mapJson, DEFAULT_STYLES) || {};
+        return data;
+    }, [mapJson, DEFAULT_STYLES]);
+    const boundaryInfo = useMemo(() => {
+        const boundary = svgElementData.boundary.find((item) => item.id === id);
+        return boundary;
+    }, [id, svgElementData]);
+    // 计算当前boundary的viewBox
+    const boundaryViewBox = useMemo(() => {
+        if (!boundaryInfo?.points || boundaryInfo.points.length === 0) {
+            return null;
+        }
+        // 计算边界
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        boundaryInfo.points.forEach((point) => {
+            minX = Math.min(minX, point[0]);
+            minY = Math.min(minY, point[1]);
+            maxX = Math.max(maxX, point[0]);
+            maxY = Math.max(maxY, point[1]);
+        });
+        // 添加边距
+        const padding = 50;
+        const width = maxX - minX + padding * 2;
+        const height = maxY - minY + padding * 2;
+        return {
+            x: minX - padding,
+            y: minY - padding,
+            width,
+            height,
+        };
+    }, [boundaryInfo]);
+    const style = useMemo(() => {
+        if (boundaryViewBox?.width > boundaryViewBox?.height) {
+            return {
+                width: maxWidth,
+                height: maxWidth * (boundaryViewBox.height / boundaryViewBox.width),
+            };
+        }
+        return {
+            width: maxWidth * (boundaryViewBox.height / boundaryViewBox.width),
+            height: maxWidth,
+        };
+    }, [boundaryViewBox, maxWidth]);
+    return (jsxs("div", { style: {
+            position: 'relative',
+            width: style.width,
+            height: style.height,
+            margin: '0 auto',
+        }, children: [jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `${boundaryViewBox.x} ${boundaryViewBox.y} ${boundaryViewBox.width} ${boundaryViewBox.height}`, width: `${style.width}px`, height: `${style.height}px`, style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: Object.keys(svgElementData)?.map((key) => {
+                    return svgElementData[key]?.map((element) => {
+                        if (key === DataType.VISION_OFF)
+                            return null;
+                        return (jsx(GElement, { type: key, data: svgElementData[key], children: jsx(SvgElement, { type: key, data: element, onSelect: () => { }, onCancel: () => { } }, element.id) }, key));
+                    });
+                }) }), jsx(CharginPile, { mapData: mapJson, mapConfig: DEFAULT_STYLES, viewBox: boundaryViewBox || null, rotation: 0 })] }));
+});
+
 const DirectionModal = ({ directionInfo, open, setOpen, zoneName, optionAngle, onChange, }) => {
-    const { mapJson, mapConfig, drag } = useCommonContext();
+    const { mapJson, mapConfig } = useCommonContext();
     const { editMapInfo } = useMapEditContext();
-    const { svgElementDatas } = useSvgEditContext();
     const [directions, setDirections] = useState(ALL_DIRECTION_SELECTED);
     const [angle, setAngle] = useState(MIN_DIRECTION_ANGLE);
     const canSetDefault = useMemo(() => {
@@ -20399,34 +20833,6 @@ const DirectionModal = ({ directionInfo, open, setOpen, zoneName, optionAngle, o
             setAngle(defaultAngle);
         }
     };
-    // 计算当前boundary的viewBox
-    const boundaryViewBox = useMemo(() => {
-        const currentBoundary = editMapInfo.selectElement;
-        if (!currentBoundary?.points || currentBoundary.points.length === 0) {
-            return null;
-        }
-        // 计算边界
-        let minX = Infinity;
-        let minY = Infinity;
-        let maxX = -Infinity;
-        let maxY = -Infinity;
-        currentBoundary.points.forEach((point) => {
-            minX = Math.min(minX, point[0]);
-            minY = Math.min(minY, point[1]);
-            maxX = Math.max(maxX, point[0]);
-            maxY = Math.max(maxY, point[1]);
-        });
-        // 添加边距
-        const padding = 50;
-        const width = maxX - minX + padding * 2;
-        const height = maxY - minY + padding * 2;
-        return {
-            x: minX - padding,
-            y: minY - padding,
-            width,
-            height,
-        };
-    }, [editMapInfo.selectElement]);
     console.log('directionInfo=>', directionInfo, mapJson);
     return (jsx(CustomModal, { maskClosable: false, titleCenter: true, title: `${zoneName} mowing direction`, open: open, width: 600, onCancel: () => {
             setOpen(false);
@@ -20436,18 +20842,7 @@ const DirectionModal = ({ directionInfo, open, setOpen, zoneName, optionAngle, o
         }, okText: "Confirm", cancelText: "Cancel", okButtonProps: { disabled: !canSave }, afterClose: () => {
             setDirections(ALL_DIRECTION_SELECTED);
             setAngle(MIN_DIRECTION_ANGLE);
-        }, children: jsxs("div", { className: styles$3.directions, children: [jsx("div", { className: styles$3.default, children: jsx(Button, { disabled: !canSetDefault, variant: "link", color: "primary", onClick: resetDirection, children: "Default" }) }), jsx("div", { className: styles$3.tips, children: "\u4E00\u4E2A\u7B80\u77ED\u7684\u8BF4\u660E\uFF0C\u5E0C\u671B\u80FD\u5145\u5F53\u7B80\u5355\u7684\u6559\u7A0B\uFF0C\u9700\u8981\u53EF\u5FC3\u6839\u636EC\u7AEF\u5DF2\u6709\u7684\u6574\u5408\u4E00\u4E0B" }), jsxs("div", { className: styles$3.optimal, children: [jsx("div", { children: "*" }), jsx(SvgOption, {}), jsx("div", { className: styles$3.text, children: "Optimal direction" })] }), jsxs("div", { className: styles$3.content, children: [jsx("div", { className: styles$3.background, children: jsxs("div", { style: {
-                                    position: 'relative',
-                                    width: `${300 * (boundaryViewBox.width / boundaryViewBox.height)}px`,
-                                    height: '300px',
-                                    margin: '0 auto',
-                                }, children: [boundaryViewBox && (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `${boundaryViewBox.x} ${boundaryViewBox.y} ${boundaryViewBox.width} ${boundaryViewBox.height}`, width: `${300 * (boundaryViewBox.width / boundaryViewBox.height)}px`, height: "300px", style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: Object.keys(svgElementDatas)?.map((key) => {
-                                            return svgElementDatas[key]?.map((element) => {
-                                                if (key === DataType.VISION_OFF)
-                                                    return null;
-                                                return (jsx(GElement, { type: key, data: svgElementDatas[key], children: jsx(SvgElement, { type: key, data: element, onSelect: () => { }, onCancel: () => { } }, element.id) }, key));
-                                            });
-                                        }) })), jsx(CharginPile, { mapData: mapJson, mapConfig: mapConfig, viewBox: boundaryViewBox || null, rotation: drag?.rotation })] }) }), jsx("div", { className: styles$3.luppan, children: jsx(MowDirection_L, { value: directions, angleValue: angle, optionAngle: optionAngle, onChange: (value) => {
+        }, children: jsxs("div", { className: styles$3.directions, children: [jsx("div", { className: styles$3.default, children: jsx(Button, { disabled: !canSetDefault, variant: "link", color: "primary", onClick: resetDirection, children: "Default" }) }), jsx("div", { className: styles$3.tips, children: "\u4E00\u4E2A\u7B80\u77ED\u7684\u8BF4\u660E\uFF0C\u5E0C\u671B\u80FD\u5145\u5F53\u7B80\u5355\u7684\u6559\u7A0B\uFF0C\u9700\u8981\u53EF\u5FC3\u6839\u636EC\u7AEF\u5DF2\u6709\u7684\u6574\u5408\u4E00\u4E0B" }), jsxs("div", { className: styles$3.optimal, children: [jsx("div", { children: "*" }), jsx(SvgOption, {}), jsx("div", { className: styles$3.text, children: "Optimal direction" })] }), jsxs("div", { className: styles$3.content, children: [jsx("div", { className: styles$3.background, children: jsx(BoundarySvgRender, { mapJson: mapJson, id: editMapInfo.selectElement.id }) }), jsx("div", { className: styles$3.luppan, children: jsx(MowDirection_L, { value: directions, angleValue: angle, optionAngle: optionAngle, onChange: (value) => {
                                     console.log('valie=>', value);
                                     setDirections(value);
                                 } }) })] }), jsx("div", { className: styles$3.slideTip, children: "\u7528\u6237\u8FD8\u53EF\u4EE5\u901A\u8FC7\u6ED1\u8F68\u5FAE\u8C03\u5272\u8349\u65B9\u5411\uFF08\u975E\u5FC5\u987B\uFF09" }), jsx("div", { className: styles$3.slider, children: jsx(Slider, { tooltip: {
@@ -20498,7 +20893,7 @@ const BoundaryInfo = ({ onHandleDelete }) => {
         return editMapInfo?.selectElement?.recBaseAngle;
     }, [editMapInfo.selectElement?.recBaseAngle]);
     console.log('height---->', editMapInfo?.selectElement, heightValue, edgeMowingValue);
-    return (jsxs("div", { className: styles$9.boundaryInfo, children: [jsx(Header, { handleDelete: onHandleDelete, handleFocus: onHandleFocus, type: editMapInfo.elementType }), jsx("div", { className: styles$9.nameEdit, children: jsx(NameEdit, { name: nameValue, onChange: (name) => {
+    return (jsxs("div", { className: styles$9.boundaryInfo, children: [jsx(Header, { handleDelete: onHandleDelete, handleFocus: onHandleFocus, type: editMapInfo.elementType }), jsx("div", { className: styles$9.nameEdit, children: jsx(NameEdit, { title: "Boundary name", name: nameValue, onChange: (name) => {
                         setEditMapInfo({
                             ...editMapInfo,
                             isShowDrag: false,
@@ -20558,6 +20953,11 @@ const TimePeriod = ({ value, onChange }) => {
     const [open, setOpen] = useState(false);
     const [radioValue, setRadioValue] = useState(RadioValue.LONG_TIME);
     console.log('time period->', date, radioValue);
+    useEffect(() => {
+        if (!open && date?.length !== 2) {
+            setRadioValue(RadioValue.LONG_TIME);
+        }
+    }, [open]);
     return (jsxs("div", { className: styles$1.timePeriod, children: [jsxs("div", { className: styles$1.timePeriodHeader, children: [jsx("div", { className: styles$1.timePeriodTitle, children: "Enabled" }), jsx("div", { className: styles$1.timePeriodHandle, children: jsx(Switch, { checked: value.status === 1, onChange: (checked) => {
                                 onChange({
                                     ...value,
@@ -20581,15 +20981,11 @@ const TimePeriod = ({ value, onChange }) => {
                             //   endTimestamp: dayjs().add(1, 'hour').unix(),
                             // });
                         }
-                    }, style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: [jsx(Radio, { value: RadioValue.LONG_TIME, children: jsx("div", { className: styles$1.timePeriodRadioItem, children: "\u957F\u65F6\u95F4\u5F00\u542F" }) }), jsx(Radio, { value: RadioValue.SHORT_TIME, children: jsx("div", { className: styles$1.timePeriodRadioItem, children: jsx(DatePicker.RangePicker, { open: open, onOpenChange: (open) => {
-                                        if (!open) {
-                                            setRadioValue(RadioValue.LONG_TIME);
-                                        }
+                    }, style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: [jsx(Radio, { value: RadioValue.LONG_TIME, children: jsx("div", { className: styles$1.timePeriodRadioItem, children: "\u957F\u65F6\u95F4\u5F00\u542F" }) }), jsx(Radio, { value: RadioValue.SHORT_TIME, children: jsx("div", { className: styles$1.timePeriodRadioItem, children: jsx(DatePicker.RangePicker, { open: open, value: date ? date : undefined, disabled: radioValue === RadioValue.LONG_TIME, showTime: { format: 'HH:mm' }, format: "MM/DD/YYYY HH:mm", preserveInvalidOnBlur: true, onOpenChange: (open) => {
                                         setOpen(open);
-                                    }, value: date ? date : undefined, disabled: radioValue === RadioValue.LONG_TIME, showTime: { format: 'HH:mm' }, format: "MM/DD/YYYY HH:mm", preserveInvalidOnBlur: true, onChange: (dateValue, dateString) => {
-                                        console.log('change->', dateValue);
+                                    }, onChange: (dateValue, dateString) => {
+                                        setDate(dateValue);
                                         if (dateValue?.length === 2) {
-                                            setDate(dateValue);
                                             onChange({
                                                 status: RadioValue.SHORT_TIME,
                                                 startTimestamp: dateValue[0].unix(),
@@ -20630,7 +21026,7 @@ const ObstacleInfo = ({ onHandleDelete }) => {
     }, [editMapInfo.selectElement]);
     return (jsxs("div", { className: styles$9.obstacleInfo, children: [jsx(Header, { handleDelete: () => {
                     onHandleDelete();
-                }, handleFocus: () => { }, type: editMapInfo.elementType }), jsx("div", { className: styles$9.nameEdit, children: jsx(NameEdit, { name: nameValue, onChange: (name) => {
+                }, handleFocus: () => { }, type: editMapInfo.elementType }), jsx("div", { className: styles$9.nameEdit, children: jsx(NameEdit, { title: "Obstacle name", name: nameValue, onChange: (name) => {
                         setEditMapInfo({
                             ...editMapInfo,
                             isShowDrag: false,
@@ -20780,7 +21176,7 @@ const HandleElementInfo = () => {
     const isUndoDisabled = useMemo(() => {
         if (editMapInfo?.elementType === DataType.OBSTACLE &&
             editMapInfo?.createMode === CreateStatus.CREATING) {
-            return !(editMapInfo?.currentHistoryIndex >= 0 && editMapInfo?.historyList?.length);
+            return !(editMapInfo?.currentHistoryIndex > 0 && editMapInfo?.historyList?.length);
         }
         else {
             return !(editMapInfo?.currentHistoryIndex > 0 && editMapInfo?.historyList?.length);
@@ -20795,12 +21191,20 @@ const HandleElementInfo = () => {
         return !(editMapInfo?.currentHistoryIndex < editMapInfo?.historyList?.length - 1 &&
             editMapInfo?.historyList?.length);
     }, [editMapInfo?.currentHistoryIndex, editMapInfo?.historyList]);
-    const handleUndo = useCallback(() => {
+    const handleUndo = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (isUndoDisabled)
+            return;
         undo();
-    }, [undo]);
-    const handleRedo = useCallback(() => {
+    }, [undo, isUndoDisabled]);
+    const handleRedo = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (idRedoDisabled)
+            return;
         redo();
-    }, [redo]);
+    }, [redo, idRedoDisabled]);
     const renderElementData = useCallback((element) => {
         if (!editMapInfo.selectElement)
             return null;
@@ -21113,7 +21517,7 @@ const defaultMapConfig = DEFAULT_STYLES;
 // 地图渲染器组件
 const MowerMapRenderer = forwardRef(({ sn, platform = PlatformType.WEB, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = false, mapConfig, 
 // pathConfig,
-modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, onPathLoad, onError, className, style, googleMapInstance: _googleMapInstance, dragMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, }, ref) => {
+modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, onPathLoad, onError, className, style, googleMapInstance: _googleMapInstance, dragMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, onClickEvent, }, ref) => {
     const [currentError, setCurrentError] = useState(null);
     const overlayRef = useRef(null);
     // const mapRef = useMap();
@@ -21128,14 +21532,13 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     });
     const [overlay, setOverlay] = useState(null);
     const [overlayLayout, setOverlayLayout] = useState(null);
+    const [overlayScale, setOverlayScale] = useState(1);
+    // 参考zoom级别,在此级别时overlayScale=1,元素显示原始大小
+    const REFERENCE_ZOOM = 19;
     const svgMapRef = useRef(null);
     const svgEditMapRef = useRef(null);
     const [editMapInfo, setEditMapInfo] = useState({
-        editMap: false,
-        selectElement: null,
-        createMode: null,
-        elementType: null,
-        isShowDrag: false,
+        ...INIT_EDIT_MAP_INFO,
     });
     const minDistance = useMemo(() => {
         return getMinSvgDistanceByModel(modelType);
@@ -21170,6 +21573,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
             onSaveMap,
             onHandleDeleteElement,
             onUpdateBoundary,
+            onClickEvent,
         };
     }, [
         minDistance,
@@ -21181,6 +21585,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         onSaveBoundaryData,
         onSaveMap,
         onUpdateBoundary,
+        onClickEvent,
     ]);
     // 合并配置
     const mergedMapConfig = useMemo(() => {
@@ -21213,6 +21618,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
             mapJson,
             drag: defaultTransform,
             mapRef,
+            overlayScale,
         };
     }, [
         sn,
@@ -21226,6 +21632,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         mapJson,
         defaultTransform,
         mapRef,
+        overlayScale,
     ]);
     // console.log('svgElementDatas->', svgElementDatas, unStructMapData, commonValue);
     // 处理地图分区边界
@@ -21244,7 +21651,6 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     //   }
     //   return allBoundaryElements;
     // }, [mapJson]);
-    useMemo(() => antennaConfig, [antennaConfig]);
     const mowerPositionData = useMemo(() => {
         // realTimeData 中包含三个种类的数据，之需要实时坐标的数据即可。
         if (!realTimeData || realTimeData.length === 0)
@@ -21457,6 +21863,38 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     useEffect(() => {
         setDrag(defaultTransform ?? { x: 0, y: 0, rotation: 0 });
     }, [defaultTransform]);
+    // 监听地图zoom变化,计算缩放比例
+    useEffect(() => {
+        if (!mapRef)
+            return;
+        const updateScale = () => {
+            const currentZoom = mapRef.getZoom();
+            if (currentZoom === undefined)
+                return;
+            // 基于固定的参考zoom级别计算overlayScale
+            const zoomDiff = currentZoom - REFERENCE_ZOOM;
+            const scale = Math.pow(2, -zoomDiff); // 负数实现反向缩放
+            setOverlayScale(scale);
+        };
+        // 使用lodash throttle进行节流处理: 100ms内只执行一次
+        const handleZoomChanged = throttle$2(updateScale, 50);
+        // 添加zoom监听
+        const listener = mapRef.addListener('zoom_changed', handleZoomChanged);
+        // 初始化时获取当前zoom
+        updateScale();
+        return () => {
+            if (listener) {
+                window.google.maps.event.removeListener(listener);
+            }
+            // 取消未执行的节流函数
+            handleZoomChanged.cancel();
+        };
+    }, [mapRef]);
+    useEffect(() => {
+        if (!editMap) {
+            setEditMapInfo(INIT_EDIT_MAP_INFO);
+        }
+    }, [editMap]);
     useEffect(() => {
         if (!mapJson)
             return;
@@ -21527,6 +21965,8 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         clearHistory: () => svgEditMapRef.current?.clearHistory(),
         // 添加历史记录
         addHistory: (history) => svgEditMapRef.current?.addHistory(history),
+        // 添加doodle
+        addDoodle: (doodle) => svgEditMapRef.current?.addDoodle(doodle),
     }));
     /**
      * 根据割草机的位置更新路径
@@ -21551,7 +21991,6 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
                                 pre[cur] = parseFloat(curLayout);
                                 return pre;
                             }, {});
-                            // console.log('setedit svg ------------->', layout);
                             if (layout?.width && layout?.height) {
                                 svgEditMapRef?.current?.adjustSvgSize?.(layout);
                                 setOverlayLayout(layout);
@@ -21560,4 +21999,4 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
 });
 MowerMapRenderer.displayName = 'MowerMapRenderer';
 
-export { MapDataProcessor, MowerMapRenderer, PathDataProcessor, calculateMapGpsCenter, estimateGpsFromMapBounds };
+export { BoundarySvgRender, MapDataProcessor, MowerMapRenderer, PathDataProcessor, calculateMapGpsCenter, estimateGpsFromMapBounds };