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

package/dist/index.js

@@ -3071,7 +3071,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.
@@ -3083,11 +3083,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) {
@@ -4089,7 +4089,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`.
@@ -4102,7 +4102,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.
@@ -4325,6 +4325,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.
@@ -4609,6 +4815,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
+  });
+}
+
 /**
  * 工具模块类型定义
  */
@@ -13746,6 +14017,7 @@ const CommonContext = React.createContext({
     mapRef: null,
     globalHeight: 0,
     heightOptions: [],
+    overlayScale: 1,
 });
 const CommonContextProvider = CommonContext.Provider;
 const useCommonContext = () => React.useContext(CommonContext);
@@ -14755,13 +15027,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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' } }), jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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" }), jsxRuntime.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.memo(({ r, stroke, ...props }) => {
-    return (jsxRuntime.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 (jsxRuntime.jsx("circle", { r: radius * overlayScale, stroke: stroke || '#fff', fill: '#fff', strokeWidth: 2 * overlayScale, ...props }));
 });
 
 var _path$c;
@@ -14893,14 +15167,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [coordinates.map((coord, idx) => {
@@ -14952,7 +15224,7 @@ var ClickEventType;
 const INIT_EDIT_MAP_INFO = {
     editMap: false,
     selectElement: null,
-    createMode: CreateStatus.CREATING,
+    createMode: null,
     elementType: undefined,
     isShowDrag: false,
     mobileMode: MobileEditMode.START,
@@ -15476,8 +15748,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] = React.useState({
         isDragging: false,
@@ -15493,6 +15766,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 = React.useMemo(() => {
+        return editMapInfo?.createMode === CreateStatus.CREATING ? points : [...points].reverse();
+    }, [points, editMapInfo?.createMode]);
     // 计算点到线段的垂足坐标（使用通用工具函数）
     const calculatePerpendicularFoot$1 = React.useCallback((point, lineStart, lineEnd) => {
         return calculatePerpendicularFoot(point, lineStart, lineEnd);
@@ -15694,7 +15971,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) ;
@@ -15726,7 +16005,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]);
     // 添加全局事件监听（支持触摸和鼠标事件）
     React.useEffect(() => {
         if (dragState.isDragging) {
@@ -15798,24 +16077,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(editMode || (createMode && completed)) &&
                 dragState.isDragging &&
                 dragState.dragType !== 'new' &&
@@ -15867,14 +16139,14 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                                     setHoverVertex(null);
                                 },
                             }) }, `edge-${index}`));
-                }), ghostLastPath && (jsxRuntime.jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 3 && (jsxRuntime.jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsxRuntime.jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed }), jsxRuntime.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 && (jsxRuntime.jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
+                }), ghostLastPath && (jsxRuntime.jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsxRuntime.jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsxRuntime.jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed }), jsxRuntime.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 && (jsxRuntime.jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
                 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 (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx(VertexElement, { className: generateVertexClassName, stroke: strokeColor, cx: coord[0], cy: coord[1], onClick: (e) => handleVertexClick(e, idx), onDoubleClick: (e) => {
+                    return (jsxRuntime.jsxs("g", { children: [jsxRuntime.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();
@@ -15922,7 +16194,18 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                                                 }
                                             }
                                         },
-                                    }) }), tooltipIndex === idx && (jsxRuntime.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 && (jsxRuntime.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 &&
@@ -15931,7 +16214,19 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                                         onVertexDelete(idx);
                                     }
                                     setTooltipIndex(null);
-                                }, style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("rect", { x: 0, y: -24, width: 20, height: 20, rx: 2, ry: 2, fill: "#fff", strokeWidth: 1, filter: "url(#vertex-tooltip-shadow)" }), jsxRuntime.jsx("g", { transform: `translate(2, -22)`, children: jsxRuntime.jsx(SvgDelete$1, {}) })] })), canComplete && (jsxRuntime.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: [jsxRuntime.jsx("rect", { x: 0, y: -24, width: 20, height: 20, rx: 2, ry: 2, fill: "#fff", strokeWidth: 1, filter: "url(#vertex-tooltip-shadow)" }), jsxRuntime.jsx("g", { transform: `translate(2, -22)`, children: jsxRuntime.jsx(SvgDelete$1, {}) })] })), canComplete && (jsxRuntime.jsx("g", { style: { pointerEvents: 'none' }, transform: `translate(${coord[0] - 5 * overlayScale * 3}, ${coord[1] - 2.5 * overlayScale * 3}) scale(${overlayScale * 3})`, children: jsxRuntime.jsx("svg", { width: "10", height: "5", viewBox: "0 0 6 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.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}`));
                 })] }));
 };
 
@@ -15983,7 +16278,7 @@ const BoundaryElement = ({ data }) => {
             }));
         }
     }, [platform, data, editMapInfo]);
-    return (jsxRuntime.jsx(PolygonElement, { coordinates: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onCoordinatesChange: (coordinates) => {
+    return (jsxRuntime.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,
@@ -16118,6 +16413,7 @@ const ObstacleElement = ({ data }) => {
         }
     }, [editMapInfo]);
     const currentPoints = React.useMemo(() => {
+        // 为了方便解决删除顶点的时候，delete icon被遮挡的问题，所以逆序一下
         if (editMapInfo?.selectElement?.id === data.id) {
             return editMapInfo.selectElement.points;
         }
@@ -16161,7 +16457,11 @@ const ObstacleElement = ({ data }) => {
             setEditMapInfo((prev) => ({
                 ...prev,
                 selectElement: data,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: data,
+                    },
+                ],
                 currentHistoryIndex: 0,
                 elementType: DataType.OBSTACLE,
                 editMap: true,
@@ -16175,7 +16475,7 @@ const ObstacleElement = ({ data }) => {
         }
         return editMapInfo?.selectElement?.id === data.id;
     }, [editMapInfo, data, platform]);
-    return (jsxRuntime.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 (jsxRuntime.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();
             }
@@ -16764,6 +17064,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 = React.useMemo(() => {
@@ -16879,7 +17180,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
             return;
         onDragMove?.(currentPoints.map((point) => [point.x, point.y]));
     }, [currentPoints, isSelected, isDragging, isRotating, isScaling]);
-    return (jsxRuntime.jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsxRuntime.jsx(PolygonElement, { coordinates: visionOffData?.points, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: () => {
+    return (jsxRuntime.jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsxRuntime.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) {
@@ -16908,9 +17209,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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);
@@ -17017,7 +17318,11 @@ const VisionOffElement = ({ data, onSelect }) => {
                 ...prev,
                 selectElement: data,
                 elementType: DataType.VISION_OFF,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: data,
+                    },
+                ],
                 currentHistoryIndex: 0,
                 editMap: true,
                 isShowDrag: true,
@@ -17776,7 +18081,14 @@ const DoodleElement = ({ data }) => {
         })?.then(() => {
             setEditMapInfo((prev) => ({
                 ...prev,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: {
+                            ...data,
+                            transformedPoints: transformedElements,
+                        },
+                    },
+                ],
                 currentHistoryIndex: 0,
                 selectElement: {
                     ...data,
@@ -17983,6 +18295,7 @@ const ChannelClipPath = React.memo(() => {
         svgRef?.viewBox.baseVal?.width,
         svgRef?.viewBox.baseVal?.height,
     ]);
+    console.log('boundaryData---->', svgRef?.viewBox.baseVal);
     /**
      * 判断多边形是否为逆时针方向
      * 使用叉积法计算多边形的有向面积
@@ -19124,7 +19437,7 @@ const CreateObstacleElement = React.forwardRef(({ enabled = false, svgElement, o
     if (!enabled || points.length === 0) {
         return null;
     }
-    return (jsxRuntime.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 (jsxRuntime.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';
 
@@ -19365,6 +19678,9 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
                 // 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: [jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsx("filter", { id: "vertex-tooltip-shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: jsxRuntime.jsx("feDropShadow", { dx: "2", dy: "2", stdDeviation: "2", floodColor: "#000", floodOpacity: "0.12" }) }), jsxRuntime.jsxs("filter", { id: `path-hover-${DataType.BOUNDARY}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsxRuntime.jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsxRuntime.jsx("feFlood", { floodColor: BOUNDARY_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsxRuntime.jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxRuntime.jsxs("feMerge", { children: [jsxRuntime.jsx("feMergeNode", { in: "coloredBorder" }), jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxRuntime.jsxs("filter", { id: `path-hover-${DataType.VISION_OFF}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsxRuntime.jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsxRuntime.jsx("feFlood", { floodColor: VISION_OFF_AREA_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsxRuntime.jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxRuntime.jsxs("feMerge", { children: [jsxRuntime.jsx("feMergeNode", { in: "coloredBorder" }), jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxRuntime.jsxs("filter", { id: `path-hover-${DataType.OBSTACLE}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsxRuntime.jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsxRuntime.jsx("feFlood", { floodColor: OBSTACLE_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsxRuntime.jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxRuntime.jsxs("feMerge", { children: [jsxRuntime.jsx("feMergeNode", { in: "coloredBorder" }), jsxRuntime.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;
@@ -19376,7 +19692,7 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
                     editMapInfo.createMode &&
                     editMapInfo.elementType !== DataType.DOODLE &&
                     editMapInfo.elementType !== DataType.VISION_OFF &&
-                    (points.length > 0 || editMapInfo?.selectElement?.points?.length > 0) && (jsxRuntime.jsx(PolygonElement, { coordinates: points?.length > 0
+                    (points.length > 0 || editMapInfo?.selectElement?.points?.length > 0) && (jsxRuntime.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) => {
                         // 创建模式下的坐标变化（拖拽时）
@@ -19797,7 +20113,11 @@ const DoodleModal = ({ open, onSelect, setOpen, doodleList, centerPoint }) => {
             })?.then(() => {
                 setEditMapInfo({
                     ...editMapInfo,
-                    historyList: [newDoodle],
+                    historyList: [
+                        {
+                            selectElement: newDoodle,
+                        },
+                    ],
                     currentHistoryIndex: 0,
                     createMode: CreateStatus.COMPLETED,
                     elementType: DataType.DOODLE,
@@ -19879,7 +20199,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,
@@ -19908,11 +20232,11 @@ const AddEntry = ({ doodleList, disabledObstacles, editMap }) => {
                 }), children: jsxRuntime.jsx("div", { className: styles$c.icon, children: jsxRuntime.jsx(SvgAddEntry, {}) }) }), jsxRuntime.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);
 
@@ -19944,7 +20268,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 = React.useMemo(() => {
         return DATE_TYPE_MAP.find((item) => item.type === type);
     }, [type]);
@@ -19969,14 +20293,14 @@ var SvgEdit = function SvgEdit(props) {
   })));
 };
 
-const NameModal = ({ name, open, setOpen, onOk }) => {
+const NameModal = ({ title, name, open, setOpen, onOk }) => {
     const [nameValue, setNameValue] = React.useState('');
     React.useEffect(() => {
         if (open) {
             setNameValue(name || '');
         }
     }, [name, open]);
-    return (jsxRuntime.jsx(CustomModal, { title: `${name}`, titleCenter: true, open: open, onOk: () => {
+    return (jsxRuntime.jsx(CustomModal, { title: `${title}`, titleCenter: true, open: open, onOk: () => {
             onOk?.(nameValue);
             setOpen(false);
         }, onCancel: () => setOpen(false), okText: "Confirm", afterClose: () => {
@@ -19984,9 +20308,9 @@ const NameModal = ({ name, open, setOpen, onOk }) => {
         }, children: jsxRuntime.jsx(antd.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.useState(false);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles$7.nameEdit, children: [jsxRuntime.jsx("div", { className: styles$7.content, children: name }), jsxRuntime.jsx("div", { className: styles$7.edit, onClick: () => setOpen(true), children: jsxRuntime.jsx(SvgEdit, {}) })] }), jsxRuntime.jsx(NameModal, { name: name, open: open, setOpen: setOpen, onOk: onChange })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles$7.nameEdit, children: [jsxRuntime.jsx("div", { className: styles$7.content, children: name }), jsxRuntime.jsx("div", { className: styles$7.edit, onClick: () => setOpen(true), children: jsxRuntime.jsx(SvgEdit, {}) })] }), jsxRuntime.jsx(NameModal, { title: title, name: name, open: open, setOpen: setOpen, onOk: onChange })] }));
 };
 
 var _path$3;
@@ -20107,7 +20431,7 @@ const HeightModal = ({ zoneName, open, setOpen, onChange, value, heightOptions,
                         }), children: [jsxRuntime.jsx("div", { className: styles$4.left, children: jsxRuntime.jsxs(antd.Radio, { value: ZoneHeightModalTypeEnum.RADIO, children: ["Customize zone height (", getHeightUnit(unitType), ")"] }) }), jsxRuntime.jsx("div", { className: styles$4.right, children: jsxRuntime.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);
 
@@ -20440,10 +20764,71 @@ const MowDirection_L = (props) => {
                         }, children: [jsxRuntime.jsx("div", { className: styles$2.leftTop, children: jsxRuntime.jsx(SvgOption, {}) }), jsxRuntime.jsx("div", { className: styles$2.rightBottom, children: jsxRuntime.jsx(SvgOption, {}) })] })] }) }) }));
 };
 
+const BoundarySvgRender = React.memo(({ mapJson, id, maxWidth = 300 }) => {
+    const svgElementData = React.useMemo(() => {
+        const data = UnifiedMapDataProcessor.processMapData(mapJson, DEFAULT_STYLES) || {};
+        return data;
+    }, [mapJson, DEFAULT_STYLES]);
+    const boundaryInfo = React.useMemo(() => {
+        const boundary = svgElementData.boundary.find((item) => item.id === id);
+        return boundary;
+    }, [id, svgElementData]);
+    // 计算当前boundary的viewBox
+    const boundaryViewBox = React.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 = React.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 (jsxRuntime.jsxs("div", { style: {
+            position: 'relative',
+            width: style.width,
+            height: style.height,
+            margin: '0 auto',
+        }, children: [jsxRuntime.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 (jsxRuntime.jsx(GElement, { type: key, data: svgElementData[key], children: jsxRuntime.jsx(SvgElement, { type: key, data: element, onSelect: () => { }, onCancel: () => { } }, element.id) }, key));
+                    });
+                }) }), jsxRuntime.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] = React.useState(ALL_DIRECTION_SELECTED);
     const [angle, setAngle] = React.useState(MIN_DIRECTION_ANGLE);
     const canSetDefault = React.useMemo(() => {
@@ -20468,34 +20853,6 @@ const DirectionModal = ({ directionInfo, open, setOpen, zoneName, optionAngle, o
             setAngle(defaultAngle);
         }
     };
-    // 计算当前boundary的viewBox
-    const boundaryViewBox = React.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 (jsxRuntime.jsx(CustomModal, { maskClosable: false, titleCenter: true, title: `${zoneName} mowing direction`, open: open, width: 600, onCancel: () => {
             setOpen(false);
@@ -20505,18 +20862,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: jsxRuntime.jsxs("div", { className: styles$3.directions, children: [jsxRuntime.jsx("div", { className: styles$3.default, children: jsxRuntime.jsx(antd.Button, { disabled: !canSetDefault, variant: "link", color: "primary", onClick: resetDirection, children: "Default" }) }), jsxRuntime.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" }), jsxRuntime.jsxs("div", { className: styles$3.optimal, children: [jsxRuntime.jsx("div", { children: "*" }), jsxRuntime.jsx(SvgOption, {}), jsxRuntime.jsx("div", { className: styles$3.text, children: "Optimal direction" })] }), jsxRuntime.jsxs("div", { className: styles$3.content, children: [jsxRuntime.jsx("div", { className: styles$3.background, children: jsxRuntime.jsxs("div", { style: {
-                                    position: 'relative',
-                                    width: `${300 * (boundaryViewBox.width / boundaryViewBox.height)}px`,
-                                    height: '300px',
-                                    margin: '0 auto',
-                                }, children: [boundaryViewBox && (jsxRuntime.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 (jsxRuntime.jsx(GElement, { type: key, data: svgElementDatas[key], children: jsxRuntime.jsx(SvgElement, { type: key, data: element, onSelect: () => { }, onCancel: () => { } }, element.id) }, key));
-                                            });
-                                        }) })), jsxRuntime.jsx(CharginPile, { mapData: mapJson, mapConfig: mapConfig, viewBox: boundaryViewBox || null, rotation: drag?.rotation })] }) }), jsxRuntime.jsx("div", { className: styles$3.luppan, children: jsxRuntime.jsx(MowDirection_L, { value: directions, angleValue: angle, optionAngle: optionAngle, onChange: (value) => {
+        }, children: jsxRuntime.jsxs("div", { className: styles$3.directions, children: [jsxRuntime.jsx("div", { className: styles$3.default, children: jsxRuntime.jsx(antd.Button, { disabled: !canSetDefault, variant: "link", color: "primary", onClick: resetDirection, children: "Default" }) }), jsxRuntime.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" }), jsxRuntime.jsxs("div", { className: styles$3.optimal, children: [jsxRuntime.jsx("div", { children: "*" }), jsxRuntime.jsx(SvgOption, {}), jsxRuntime.jsx("div", { className: styles$3.text, children: "Optimal direction" })] }), jsxRuntime.jsxs("div", { className: styles$3.content, children: [jsxRuntime.jsx("div", { className: styles$3.background, children: jsxRuntime.jsx(BoundarySvgRender, { mapJson: mapJson, id: editMapInfo.selectElement.id }) }), jsxRuntime.jsx("div", { className: styles$3.luppan, children: jsxRuntime.jsx(MowDirection_L, { value: directions, angleValue: angle, optionAngle: optionAngle, onChange: (value) => {
                                     console.log('valie=>', value);
                                     setDirections(value);
                                 } }) })] }), jsxRuntime.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" }), jsxRuntime.jsx("div", { className: styles$3.slider, children: jsxRuntime.jsx(antd.Slider, { tooltip: {
@@ -20567,7 +20913,7 @@ const BoundaryInfo = ({ onHandleDelete }) => {
         return editMapInfo?.selectElement?.recBaseAngle;
     }, [editMapInfo.selectElement?.recBaseAngle]);
     console.log('height---->', editMapInfo?.selectElement, heightValue, edgeMowingValue);
-    return (jsxRuntime.jsxs("div", { className: styles$9.boundaryInfo, children: [jsxRuntime.jsx(Header, { handleDelete: onHandleDelete, handleFocus: onHandleFocus, type: editMapInfo.elementType }), jsxRuntime.jsx("div", { className: styles$9.nameEdit, children: jsxRuntime.jsx(NameEdit, { name: nameValue, onChange: (name) => {
+    return (jsxRuntime.jsxs("div", { className: styles$9.boundaryInfo, children: [jsxRuntime.jsx(Header, { handleDelete: onHandleDelete, handleFocus: onHandleFocus, type: editMapInfo.elementType }), jsxRuntime.jsx("div", { className: styles$9.nameEdit, children: jsxRuntime.jsx(NameEdit, { title: "Boundary name", name: nameValue, onChange: (name) => {
                         setEditMapInfo({
                             ...editMapInfo,
                             isShowDrag: false,
@@ -20627,6 +20973,11 @@ const TimePeriod = ({ value, onChange }) => {
     const [open, setOpen] = React.useState(false);
     const [radioValue, setRadioValue] = React.useState(RadioValue.LONG_TIME);
     console.log('time period->', date, radioValue);
+    React.useEffect(() => {
+        if (!open && date?.length !== 2) {
+            setRadioValue(RadioValue.LONG_TIME);
+        }
+    }, [open]);
     return (jsxRuntime.jsxs("div", { className: styles$1.timePeriod, children: [jsxRuntime.jsxs("div", { className: styles$1.timePeriodHeader, children: [jsxRuntime.jsx("div", { className: styles$1.timePeriodTitle, children: "Enabled" }), jsxRuntime.jsx("div", { className: styles$1.timePeriodHandle, children: jsxRuntime.jsx(antd.Switch, { checked: value.status === 1, onChange: (checked) => {
                                 onChange({
                                     ...value,
@@ -20650,15 +21001,11 @@ const TimePeriod = ({ value, onChange }) => {
                             //   endTimestamp: dayjs().add(1, 'hour').unix(),
                             // });
                         }
-                    }, style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: [jsxRuntime.jsx(antd.Radio, { value: RadioValue.LONG_TIME, children: jsxRuntime.jsx("div", { className: styles$1.timePeriodRadioItem, children: "\u957F\u65F6\u95F4\u5F00\u542F" }) }), jsxRuntime.jsx(antd.Radio, { value: RadioValue.SHORT_TIME, children: jsxRuntime.jsx("div", { className: styles$1.timePeriodRadioItem, children: jsxRuntime.jsx(antd.DatePicker.RangePicker, { open: open, onOpenChange: (open) => {
-                                        if (!open) {
-                                            setRadioValue(RadioValue.LONG_TIME);
-                                        }
+                    }, style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: [jsxRuntime.jsx(antd.Radio, { value: RadioValue.LONG_TIME, children: jsxRuntime.jsx("div", { className: styles$1.timePeriodRadioItem, children: "\u957F\u65F6\u95F4\u5F00\u542F" }) }), jsxRuntime.jsx(antd.Radio, { value: RadioValue.SHORT_TIME, children: jsxRuntime.jsx("div", { className: styles$1.timePeriodRadioItem, children: jsxRuntime.jsx(antd.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(),
@@ -20699,7 +21046,7 @@ const ObstacleInfo = ({ onHandleDelete }) => {
     }, [editMapInfo.selectElement]);
     return (jsxRuntime.jsxs("div", { className: styles$9.obstacleInfo, children: [jsxRuntime.jsx(Header, { handleDelete: () => {
                     onHandleDelete();
-                }, handleFocus: () => { }, type: editMapInfo.elementType }), jsxRuntime.jsx("div", { className: styles$9.nameEdit, children: jsxRuntime.jsx(NameEdit, { name: nameValue, onChange: (name) => {
+                }, handleFocus: () => { }, type: editMapInfo.elementType }), jsxRuntime.jsx("div", { className: styles$9.nameEdit, children: jsxRuntime.jsx(NameEdit, { title: "Obstacle name", name: nameValue, onChange: (name) => {
                         setEditMapInfo({
                             ...editMapInfo,
                             isShowDrag: false,
@@ -20849,7 +21196,7 @@ const HandleElementInfo = () => {
     const isUndoDisabled = React.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);
@@ -20864,12 +21211,20 @@ const HandleElementInfo = () => {
         return !(editMapInfo?.currentHistoryIndex < editMapInfo?.historyList?.length - 1 &&
             editMapInfo?.historyList?.length);
     }, [editMapInfo?.currentHistoryIndex, editMapInfo?.historyList]);
-    const handleUndo = React.useCallback(() => {
+    const handleUndo = React.useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (isUndoDisabled)
+            return;
         undo();
-    }, [undo]);
-    const handleRedo = React.useCallback(() => {
+    }, [undo, isUndoDisabled]);
+    const handleRedo = React.useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (idRedoDisabled)
+            return;
         redo();
-    }, [redo]);
+    }, [redo, idRedoDisabled]);
     const renderElementData = React.useCallback((element) => {
         if (!editMapInfo.selectElement)
             return null;
@@ -21197,6 +21552,9 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     });
     const [overlay, setOverlay] = React.useState(null);
     const [overlayLayout, setOverlayLayout] = React.useState(null);
+    const [overlayScale, setOverlayScale] = React.useState(1);
+    // 参考zoom级别,在此级别时overlayScale=1,元素显示原始大小
+    const REFERENCE_ZOOM = 19;
     const svgMapRef = React.useRef(null);
     const svgEditMapRef = React.useRef(null);
     const [editMapInfo, setEditMapInfo] = React.useState({
@@ -21280,6 +21638,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
             mapJson,
             drag: defaultTransform,
             mapRef,
+            overlayScale,
         };
     }, [
         sn,
@@ -21293,6 +21652,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         mapJson,
         defaultTransform,
         mapRef,
+        overlayScale,
     ]);
     // console.log('svgElementDatas->', svgElementDatas, unStructMapData, commonValue);
     // 处理地图分区边界
@@ -21311,7 +21671,6 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     //   }
     //   return allBoundaryElements;
     // }, [mapJson]);
-    React.useMemo(() => antennaConfig, [antennaConfig]);
     const mowerPositionData = React.useMemo(() => {
         // realTimeData 中包含三个种类的数据，之需要实时坐标的数据即可。
         if (!realTimeData || realTimeData.length === 0)
@@ -21524,6 +21883,38 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     React.useEffect(() => {
         setDrag(defaultTransform ?? { x: 0, y: 0, rotation: 0 });
     }, [defaultTransform]);
+    // 监听地图zoom变化,计算缩放比例
+    React.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]);
+    React.useEffect(() => {
+        if (!editMap) {
+            setEditMapInfo(INIT_EDIT_MAP_INFO);
+        }
+    }, [editMap]);
     React.useEffect(() => {
         if (!mapJson)
             return;
@@ -21620,7 +22011,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);
@@ -21629,6 +22019,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
 });
 MowerMapRenderer.displayName = 'MowerMapRenderer';
 
+exports.BoundarySvgRender = BoundarySvgRender;
 exports.MapDataProcessor = MapDataProcessor;
 exports.MowerMapRenderer = MowerMapRenderer;
 exports.PathDataProcessor = PathDataProcessor;