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

package/dist/index.js

@@ -210,14 +210,13 @@ class ChannelData extends BaseData {
  * 障碍物数据类
  */
 class ObstacleData extends BaseData {
-    constructor(originalData, level, isTimeLimit, style) {
+    constructor(originalData, level, style) {
         const convertedPoints = convertPointsFormat(originalData?.points) || [];
         super(originalData?.id, DataType.OBSTACLE, level, RenderType.POLYGON, convertedPoints, originalData);
         this.area = originalData?.area;
         this.status = originalData?.status || 1;
-        this.startTimestamp = originalData?.start_timestamp;
-        this.endTimestamp = originalData?.end_timestamp;
-        this.isTimeLimit = isTimeLimit;
+        this.start_timestamp = originalData?.start_timestamp;
+        this.end_timestamp = originalData?.end_timestamp;
         this.name = originalData?.name || 'Obstacle';
         this.style = style;
     }
@@ -349,8 +348,8 @@ function initDoodle() {
         svg: '',
         scale: 1,
         direction: 0,
-        create_ts: Date.now(),
-        expiration_ts: Date.now() + 3600000 * 24 * 7, // 1小时后过期
+        create_ts: Math.floor(Date.now() / 1000),
+        expiration_ts: Math.floor(Date.now() / 1000) + 3600 * 24 * 7, // 1小时后过期
         type: 'TIME_LIMIT_OBSTACLE',
     };
     return new DoodleData(doodle, 100);
@@ -636,7 +635,7 @@ class UnifiedMapDataProcessor {
                     continue;
                 }
                 const obstacleData = new ObstacleData(element, 150, // 高层级
-                false, this.mapConfig.obstacle || {});
+                this.mapConfig.obstacle || {});
                 obstacleDataList.push(obstacleData);
             }
             catch (error) {
@@ -766,7 +765,7 @@ class UnifiedMapDataProcessor {
                         continue;
                     }
                     const obstacleData = new ObstacleData(element, 150, // 高层级
-                    true, this.mapConfig.obstacle || {});
+                    this.mapConfig.obstacle || {});
                     obstacleDataList.push(obstacleData);
                 }
             }
@@ -3071,7 +3070,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 +3082,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 +4088,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 +4101,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 +4324,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 +4814,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
+  });
+}
+
 /**
  * 工具模块类型定义
  */
@@ -8442,7 +8712,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$i = ".index-module_edit__-5VvX {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: auto;\n  z-index: 1000;\n  cursor: move;\n  touch-action: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.index-module_edit__-5VvX .index-module_border__JdNLM {\n  position: absolute;\n  inset: -10px;\n  border: 2px dashed rgb(241, 102, 41);\n  border-radius: 2px;\n  pointer-events: none;\n}\n.index-module_edit__-5VvX .index-module_drag__uvdPG {\n  position: absolute;\n  inset: -10px;\n  border-radius: 2px;\n}\n.index-module_edit__-5VvX .index-module_rotate__H-KIZ {\n  position: absolute;\n  top: -20px;\n  right: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: grab;\n  z-index: 1001;\n  pointer-events: auto;\n}\n.index-module_edit__-5VvX .index-module_move__mZF8s {\n  position: absolute;\n  bottom: -20px;\n  left: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: move;\n  z-index: 1001;\n  pointer-events: auto;\n  display: none;\n}";
+var css_248z$i = ".index-module_edit__-5VvX {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: auto;\n  z-index: 1000;\n  cursor: move;\n  touch-action: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.index-module_edit__-5VvX .index-module_border__JdNLM {\n  position: absolute;\n  inset: -10px;\n  border: 2px dashed rgb(241, 102, 41);\n  border-radius: 2px;\n  pointer-events: none;\n}\n.index-module_edit__-5VvX .index-module_drag__uvdPG {\n  position: absolute;\n  inset: -10px;\n  border-radius: 2px;\n}\n.index-module_edit__-5VvX .index-module_rotate__H-KIZ {\n  position: absolute;\n  top: -20px;\n  right: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: grab;\n  z-index: 1001;\n  pointer-events: auto;\n}\n.index-module_edit__-5VvX .index-module_move__mZF8s {\n  position: absolute;\n  bottom: -20px;\n  left: -20px;\n  width: 20px;\n  height: 20px;\n  cursor: move;\n  z-index: 1001;\n  pointer-events: auto;\n}";
 var styles$i = {"edit":"index-module_edit__-5VvX","border":"index-module_border__JdNLM","drag":"index-module_drag__uvdPG","rotate":"index-module_rotate__H-KIZ","move":"index-module_move__mZF8s"};
 styleInject(css_248z$i);
 
@@ -8524,8 +8794,10 @@ const DragHandle = ({ onDragStart, isDragging }) => {
             onDragStart(e);
         }, onTouchStart: (e) => onDragStart(e), onMouseUp: (e) => {
             console.log('drag up');
-            onDragEnd(e);
-        }, onTouchEnd: (e) => onDragEnd(e), style: { cursor: isDragging ? 'grabbing' : 'move' }, dangerouslySetInnerHTML: { __html: DEFAULT_DRAG_ICON } }));
+            // onDragEnd(e);
+        }, 
+        // onTouchEnd={(e) => onDragEnd(e)}
+        style: { cursor: isDragging ? 'grabbing' : 'move' }, dangerouslySetInnerHTML: { __html: DEFAULT_DRAG_ICON } }));
 };
 
 const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransformChange, isDragMap = false, }) => {
@@ -12263,10 +12535,73 @@ class ObstacleLayer extends BaseLayer {
         }
     }
     /**
-     * 渲染障碍物元素
+     * 将坐标点按type分组
+     */
+    groupCoordinatesByType(coordinates) {
+        const segments = [];
+        let currentSegment = null;
+        for (let i = 0; i < coordinates.length; i++) {
+            const coord = coordinates[i];
+            const type = coord[2] || 2; // 默认type为2
+            if (!currentSegment || currentSegment.type !== type) {
+                // 开始新的段
+                if (currentSegment && currentSegment.points.length > 0) {
+                    // 为了连接线段，将当前点也加入上一段的结尾
+                    currentSegment.points.push(coord);
+                }
+                currentSegment = {
+                    type: type,
+                    points: [coord],
+                };
+                segments.push(currentSegment);
+            }
+            else {
+                // 继续当前段
+                currentSegment.points.push(coord);
+            }
+        }
+        // 处理封闭边界：如果第一段和最后一段type相同，需要连接起来
+        if (segments.length > 1 && segments[0].type === segments[segments.length - 1].type) {
+            const firstSegment = segments[0];
+            const lastSegment = segments[segments.length - 1];
+            // 将第一个点添加到最后一段，形成封闭
+            lastSegment.points.push(firstSegment.points[0]);
+        }
+        else if (segments.length === 1) {
+            // 只有一段的情况，添加第一个点到末尾形成封闭
+            segments[0].points.push(coordinates[0]);
+        }
+        return segments;
+    }
+    /**
+     * 渲染障碍物元素
      */
     renderObstacle(svgGroup, element) {
-        const { coordinates, style } = element;
+        const { coordinates, style, originalData } = element;
+        const { status, start_timestamp, end_timestamp } = originalData || {};
+        if (coordinates.length < 2 || status === 0) {
+            return;
+        }
+        if (status === 1 &&
+            (start_timestamp > Date.now() / 1000 || end_timestamp < Date.now() / 1000)) {
+            return;
+        }
+        // 1. 先遍历所有的coordinates，把所有点分为若干段的path
+        const pathSegments = this.groupCoordinatesByType(coordinates);
+        // 2&3. 根据type处理每个path段
+        pathSegments.forEach((segment) => {
+            if (segment.points.length < 2)
+                return;
+            if (segment.type === 2) {
+                // type=2: 直接添加到svgGroup中
+                this.createDirectPath(svgGroup, segment.points, style);
+            }
+            else if (segment.type === 1) {
+                // type=1: 使用PathMeasure逻辑生成平行路径
+                // this.createDirectPath(svgGroup, segment.points, style);
+                this.createParallelPathsWithMeasure(svgGroup, segment.points, style);
+            }
+        });
         if (coordinates.length < 3)
             return;
         const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
@@ -12274,7 +12609,7 @@ class ObstacleLayer extends BaseLayer {
         const points = coordinates.map((coord) => `${coord[0]},${coord[1]}`).join(' ');
         polygon.setAttribute('points', points);
         polygon.setAttribute('fill', style.fillColor || 'rgba(220, 53, 69, 0.2)');
-        polygon.setAttribute('stroke', style.lineColor || '#dc3545');
+        polygon.setAttribute('stroke', 'transparent');
         // 确保最小线条宽度
         const lineWidth = Math.max(style.lineWidth || 2, 0.5);
         polygon.setAttribute('stroke-width', lineWidth.toString());
@@ -12285,6 +12620,113 @@ class ObstacleLayer extends BaseLayer {
         polygon.classList.add('vector-obstacle');
         svgGroup.appendChild(polygon);
     }
+    /**
+     * 创建直接路径（type=2）
+     */
+    createDirectPath(svgGroup, points, style) {
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        const strokeColor = style.lineColor;
+        // 构建路径数据
+        let pathData = '';
+        for (let i = 0; i < points.length; i++) {
+            const [x, y] = points[i];
+            if (i === 0) {
+                pathData += `M ${x} ${y}`;
+            }
+            else {
+                pathData += ` L ${x} ${y}`;
+            }
+        }
+        path.setAttribute('d', pathData);
+        path.setAttribute('stroke', strokeColor);
+        path.setAttribute('fill', 'none');
+        // 确保最小线条宽度
+        const lineWidth = dp2px(style.lineWidth || 3);
+        path.setAttribute('stroke-width', lineWidth.toString());
+        path.setAttribute('stroke-linecap', 'round');
+        path.setAttribute('stroke-linejoin', 'round');
+        path.setAttribute('opacity', (style.opacity || 1).toString());
+        path.setAttribute('vector-effect', 'non-scaling-stroke');
+        path.classList.add('vector-obstacle');
+        svgGroup.appendChild(path);
+    }
+    /**
+     * 使用PathMeasure逻辑创建平行路径（type=1）
+     */
+    createParallelPathsWithMeasure(svgGroup, points, style) {
+        const strokeColor = style.lineColor;
+        const lineWidth = dp2px(style.lineWidth || 3);
+        // 获取当前SVG的缩放级别，计算固定屏幕像素间距
+        const fixedScreenDistance = lineWidth; // 固定的屏幕像素距离
+        const offsetDistance = fixedScreenDistance; // 转换为SVG坐标系距离
+        // 直接对每个线段生成平行直线段
+        const parallelPaths = this.generateStraightParallelPaths(points, offsetDistance);
+        // 渲染两条平行虚线
+        parallelPaths.forEach((pathData, index) => {
+            if (!pathData)
+                return;
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', pathData);
+            path.setAttribute('fill', 'none');
+            path.setAttribute('stroke', strokeColor);
+            path.setAttribute('stroke-width', lineWidth.toString());
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            path.setAttribute('opacity', (style.opacity || 1).toString());
+            // 使用CSS样式设置虚线，避免随SVG缩放变化
+            // 或者可以根据当前缩放级别动态计算dash array
+            path.style.strokeDasharray = `${lineWidth}px ${lineWidth * 2}px`;
+            path.classList.add(`vector-boundary-parallel-${index + 1}`);
+            svgGroup.appendChild(path);
+        });
+    }
+    /**
+     * 生成直线平行路径（每个线段分别处理）
+     */
+    generateStraightParallelPaths(points, offsetDistance) {
+        if (points.length < 2)
+            return ['', ''];
+        let parallelPath1Data = '';
+        let parallelPath2Data = '';
+        // 对每个线段分别计算平行线
+        for (let i = 0; i < points.length - 1; i++) {
+            const startPoint = points[i];
+            const endPoint = points[i + 1];
+            // 计算线段的方向向量
+            const dx = endPoint[0] - startPoint[0];
+            const dy = endPoint[1] - startPoint[1];
+            const length = Math.sqrt(dx * dx + dy * dy);
+            if (length === 0)
+                continue; // 跳过零长度线段
+            // 标准化方向向量
+            const unitX = dx / length;
+            const unitY = dy / length;
+            // 计算垂直向量
+            const perpendicularX = -unitY;
+            const perpendicularY = unitX;
+            // 计算平行线的起点和终点
+            const start1X = startPoint[0] + perpendicularX * offsetDistance;
+            const start1Y = startPoint[1] + perpendicularY * offsetDistance;
+            const end1X = endPoint[0] + perpendicularX * offsetDistance;
+            const end1Y = endPoint[1] + perpendicularY * offsetDistance;
+            const start2X = startPoint[0] - perpendicularX * offsetDistance;
+            const start2Y = startPoint[1] - perpendicularY * offsetDistance;
+            const end2X = endPoint[0] - perpendicularX * offsetDistance;
+            const end2Y = endPoint[1] - perpendicularY * offsetDistance;
+            // 构建路径数据
+            if (i === 0) {
+                parallelPath1Data = `M ${start1X} ${start1Y}`;
+                parallelPath2Data = `M ${start2X} ${start2Y}`;
+            }
+            else {
+                parallelPath1Data += ` M ${start1X} ${start1Y}`;
+                parallelPath2Data += ` M ${start2X} ${start2Y}`;
+            }
+            parallelPath1Data += ` L ${end1X} ${end1Y}`;
+            parallelPath2Data += ` L ${end2X} ${end2Y}`;
+        }
+        return [parallelPath2Data, parallelPath1Data];
+    }
 }
 
 var chargingPileImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABHHSURBVHgBtVtdjF3VdV7rnHPHtLbUkRrALwmDidSSgD1JqWQ3UMaNMaFq63FIKyoVZFRF6kMkbCmVcP9mrBARoJUnLRL9c+3WSVsqIkwrtRBKfaGmQFuFazBpK0wYnmLSF6MYx557zt5Zv3vvO/Z4bDPZ9pl97rlnztnfXmt969s/g/AjKrN7nxwf634wBTFMYIQNAWASAcYjxAmI+T5EnAeIdFQnYwxHqwr6Z5s1g9ld20/Cj6AgrGBhkKva0/d1MUxBiFMxEjw7gGv5RyUWL+cfiCD/0I4KoULs04ensKkP7d716/OwQmVFAD/4yMGpLsJM7MJUiIGMGiDQwUBDYHR8DgocFG/54gQ0HRVUFQPnuoK6qvp0ec/u3767Dx+wfCDAXyKg2MWZELopBth1BJQAB6ujgY5RANNpRIbLuPnFETAaxgSUawYpVhawtdQV1XWN81hXu37ni3cfgssslwX4wQf/bqLD4f6uY6AdAaWDagYqdRi18qhrn/vmc61bRbIwZqAKmms9rw/Usbdn9+5Ld/VLBvzlhw/e17XtLIEcbzsG2SpgOQQkYe0wu7SDZqgRvS7Bcisq/oFVRAZqVlaQXDeRgKIDFtBNPd9Aved3d99zAC6hXDTg2dknx6sr3psJbbezZZBtB14TWApfAqmgyYPpnF07ZMIKeqLviymMoxIWY0VEJ6/zWNgsG5uGgTdANXBNwOf+4P4duy4Wx0UBnp3dP45jcJgsO6kgWxi2BLIdYtcGBisWDqHFji3qMbzIlY2jLZgRyxaUbl1hJiwBzLWBdqBNo0fNR90MxhC279597/xyWJYFPPvgfsqj8XA7HE60BLQVsAqazzt3aY5ZqmPU2A1s0sgunPwZFbVzNQNW+hLTsvnRrCwujbFCAYoa0xVbNjbs2g0DHxNrO/Cm15sfQ9y8HGhcDiyZ6nDbLkwMhwRwOCSQw2RdsjbVHK8pfg0wowoC1lwak9ZIgN3E4tYjgCuJa2XsujISkxiuKJYbVEsz0B6BbrDX6yXQMKw+MTt775KipboQYELx5HBIYBcI5MJZoHNYWFjgc1wYcr2AQ+4A6YgF7ozIHaKuLl6gtcQ2dw51mhCdxXvo5LN5Cco9nXmOPifa85Hfze/xmtuxQO1IbZLvhhPQdIc5BJeC1Cz1xcwD+/bSyybTixYYVEsNWGAQ0RpI1zqxprKzKSohqeAGdctiIbBScmIHds5G9W9TYJyjydb0UHZnsjF7EIbgIdM4P0S+Xui4STL6DNXnJbL6fBdnv7xvR9cNv1KAjXSOZEXqUbZiixrPnaQgIayOXZgaFDtmZAMeFKgpDW+gsLVf52aGWES3pC6rY3FNnhdNxPjvmpgxipAOAw6JjZu3bHvv+X/7p5eXBTw7+9jEMIb97cJwvATL4NldGay6YGv5lkFTj0PAUCorbYyTVdz2y1twxz13wurVP47/+39vgRmabzGTRjusaxQ1jjC9EV/RMU4DCM5HzvZQbfyF2+98vP/cUyPxfI5LdxXOdAvDCY6dVkCqVYcal2JdlZGtuRe/OIAZw+0ovukWvPqqD8Hnf/Muef6NN/wUPPvckXj69GmMOSnxbwl1BX0IKla9qJVbuELP7zG6G0elQLRKY2OcImI/fbm5xDdCWrNf+rNpYt0d4q5sXSGM1iyrhMTMLMQkedcPAYxmWXfXRMybNn1ypFOvvuon0QVJthikfK2AUh63DpXczuHDnqXkJhzCxmjVOKnNnZAdfTf1e7OPTS0JeNiFvfILchAwe0CrbIvGsIuAhiK2zI3Vrd3ywO5cvmfdug+P3KugneQCmETB4hlCiFHynYSOpcJWGL/z9opXtuKVFn78nJnzAuaeoAeYuOCUsICtCwxNG8rMppOFld0KkEgEIZaje4Atn/6UuHRZrr32IwrOTCzPgXL46NaH3DGgXiSSNXbgbN0an3CIubEIdHTNQO0fsXKKYUouM22hoIZay4MkDYlWbgWoKSjUhmkDmSZiOZVhp7d9+mZYXNas/jFwFgYoSStlLIYoaiQYq2HqCJRRZcDEaNjx162KVVZnLQVvVRNttbUML0mpsJX7ycLMzARmitOMqicXCcrImnocrLpZSC4cbHCgn9X/NBjXXfvhuP7Gnz4H8Pobr1d4RkVQpDGbKECzrt5jgw/1gqCf1cMk/1tcS7i1KbbZ8sI5EMjKs7N7xxPg0103LaMelosSqwa04w7o0hhXjiLuIMZRaaqfJSvwHdO/cvt5pSu7uJOWGCop7cy6zsDae8bcMefrTGoE2sbhLQOXdrun6kiOQZ8Jzc4EmLppm/aMsp8N90DjNYGNBVuKWAj22WPOcy/3PTFx3LrlFliq0PdZiKhaKghMPcRd3t25AGpvs7awBlAyxS64VC0HODSo6eKtAphNTU4xpfEpluVewpx2gtT2Ik8nGjwIiWyiiwZLh5s2/swFByYfXXeN83mRj8HJCkeEB7has2vmXcbe0QlU5W1wY4GB97AUt27OtM1k152FPKYNMqYtwapxhSmdSFHjVpgFS3kcLSQ/u+32C+GFK6/6EFqMgjGfaSy7wbsg5nOPJO5Wl58a4vSDqIRaTpam04p1d6eE2zWeXeBsu2qqaUM7ZdMzrotdMo6QFLtNzptmTn1bzGMBbdrWLT8PV1995QUBX7fuI1lX6xPjmtWrcf3662HDjR+D6667BtZSrB99/X/g4Ne/ASfe/f8MPWUv9zGeFw3UC5URGePh8bMYzIkNh1U70RCYDT5oX6SeojOiuXKMmaTS7ONo/+spA16uXLfuGtiw/nr8KAFbd+01MLnh47g4X8uzqOP4+hfvfyC5vbO3Tv9ius4Y+HIel5dhKfG+oSFc4zY941/YICD4wABVSekUK/eDzVCATUkVwGOk2MQN6z92UYD/6KHfh4spa9asLj0LER2052a9rgaqPJZtyKpTTzacnGQLT4SYeiDRvQn0ZFlnUI3ZLDBCSN0tv/fZ6Ttgpcvxt+bB5aa+x94dnT2iyhAZsHCDKsxTTXkMTallnGFPxGDa10CzZUdjdvHYsyiY8iOsXXslbL3tVljp8s1/7ctr9VV5sgiUt93j8lAyhNJgKX3RtYkmpAt+s2nj4II+jsRxmpbwREQOIRPJ9OHnNv7sspOCl1qIrGBw9NtmymCT2jafaxkhJQn5vsKsvXVgk8EHaGJyYx/16Beue4IpHVND6DkYHLekiCAvvHP7L8JKl2eePexxmtjK+l2vmjiV9ohNCtAqSQt8EZpCylosRNfG7sLoAhcgpUXU20OahNp62xSsXSYVXU55+pv9CGV2sGSQQMpVc/PocjfmpJ0GOZoCK7L2vHWfCXiLW5s+idnCPDSz4YoNBQGS+P/M1ilY6TJ47Q1y6e9lfe2aLo4eRtTWNhlvxlKR239krKSl48k0IDPvyI8oZV7B0FkDg8f45PqPXxSI4995m6x2+KLufYbvK0ZOkEgopk7w0IMsOTO7FZ5v7Z5n0jpKnybtHWlSzEBjemiMpuPAHypJwllz8NoxAn0DnGulY3D8+DwMXn8DBoNjcOr99+OaNWvwM1s3w3JlcPQNcGM4Sxdas5jc1wTF07oelrlDcuaiT+811OZX6co9NtWXHmEuWypb792YJSWkz1955NH4ue2/hCwSvn/qFLz40n8R0Lf5XNOGORefn6Lvl+qgDPYYfPfdd8HfY2Nne98o8qKNYP0TE8842fLkAMQBLVDg/NBWtoo5Tx8QIGS+WuTio/V3T7yLf/LYvvz2bH0s+S55BFnvQoCffvawd3pSdUZU6bnFuzR7eN/4hL7nT0jrs31atWmftyV4zbG+YAvZJ/QdwcW+U6I1Ini8x/JXbCqovO6xKDe8evT1JcGeOvU+/PMzz6EtyAFkokJIU0PZw6KaNPtomvy13tC1WEpJ3aCam5tl0urr8mzF7kLcDUZQOnehaV4tHmMxCB/paRufRmPGklSiNzGIO/Lvvzp4XYCdr/z7f7wCnn5MNxcBlIgS7XngnRyLZ6BxjGKS5j/PWGXGg6a5+rqnIvVGzIYGZ+Qynq32ZgR3BLVktLiB0v1SWLhnwptvvQ3nK//yzHN6r69kFOTp70nMbCyuvm9ayGbjbUeQCEG6IPtCBPCZpvqqrMX67pmRbQgpwA2gu1eaWk0uLtztgEy8pOZleWq8EOKRF89Z+oETJ74n1ndl57nFnx8t4/pzvZeVEG1CLdW69MrLrdhUTyXAB8jUWFd9XnVXF6j4nzQ/OYgAQ4zp1eiZQlKVu7KJsmhGNqUGDgAiZKH6rfPEcYrtEXFRMIdxgs6MauP0BxYk5sbjhfSa8Tz/p3Oz8wmw3bVHtgjZijuKf0sHGO9V3tHeHm1MnvUpk1pa+UvElXVMavyblLYWx/E/fOMfE8g0wRFN75kCzPnX/lusS3urtPWJwDa8ZYJW1XGP/0oC/JePPsAW7uu+qHSwpcFmXSO4yaNPrrk/lcQU083pnugjsFCwj/544cWXElh25zePfydTU4w5k1pXh0XZR7ulcj/WbRJl+6tqnrGdA5hLjU1h5TrqBjE5hMz04SOp0eIWPD61U2Is8Gvjoik9sx66m75w5D+Twfb99d9Ccb88IRSurV6cck4SJCAb3NSN0cHqNidebBxZGC+VipQdn7//8NnhmVsXzvK2hrO8rYEXqbDtujTn5eb0qDTNY+MXG74tHtGAseeIL+qXt9y8iecd8YUjr4CZ3wb1xX1JW6HtBRHLyhanuq6waXrQ8O6e3hisGhuDsVVXwKreqgMH/uKhe0t85255qOHeJjSvdnX3EzXP/tWBhlQBqqibzNjqstqfmuZaFbDowWRevr/w45EO1t9GAvpS0RMj6ay4NT0/ywpLnznD1LGRTS8EvK7ny9jN8BaVwX8fOfnJm245QwjuCGlOi6d/krIDGJm9dMloXOwNM+Fibo7ZTooJk6ozjYEWHpD81nleJ6tcSIBauNK9mChxWqetS7KjZ6y3ijes7fqbP3+4vyxgAf2tF1+ZvOnmcXrRxpj3Wpm6yc4rig5HARYdAflcW+uunr92PwFLeTEWFkQYDYfoik9sahvX2I1r3cIEPXLnXsPHqrmD+x556HzYlty2VLftHnrYQGKj6SE9lPdIcV5jYrCUlZky5hSc3DHn0Jg1UiyZPX3GzMhYXs/SSsxNIA2skhOlHQZc98iVJYZj04wNDv7Vw0tuRVwS8IEDcyd7sdtMrjLfU9ACXLb76b5HIQzfAetSzjvA03NKXSEx92gHFHXM6c6x2pBHdb6wcd5DLVsQ+ZD29XiTWu8d+rkdLlDqC305GLx85obJjU8RuGl62bhJRxihk5H4zB6LpsoKNsYiRLH0eZGFkAY34KoYc25VyL5/WkipQXVjjtkxZud3yHybv3bgD+fhcgFzOTZ4+eQNnyDQWE/R69dGI5xCCY2knRKOc1JeqQBMX2aBlsavWbTr7AWakEAhJrEoMzBK+mnGUGK2NxYJ7NGFCjY9cWDuxHJ4EC6h/Nrd9+2l9dadbdpumDeX+ipjKDajmaKE0iVC1kkptUqnuFtoLbvvJNOyC4tUtG3ETWOxynssx3gf9R8Pm2r2EIXgxWC4JMBcfvXunTu6djhDi80TQ90aga2uv4Ivs0bfSZtHSQbLyMwSUekfruB0PF6ppMW8UVwAE9gebywlN66b3klilD2Pf31uDi6hLOvSi8u3X3t5sOGmT9FQqxqndk2iyZ50QKXjahPxqFrchL3WlQPS0Rkd9QgwG8DovujaUw4dlCnIqkiA+2NjzR2PH5x7Gi6xXLKFy3Lnb3xhOrRhL60tT3TFnwKIe/sejGDL6DpJgAXn+YSMx7iTk28O1z3SaUe8ZIc+hfCeJ772aB8us3wgwF4+d9cXplqIM6Hrprrgm9fSimSMaasE5JhGSG494iFMVKKgKvk7B94JT7D7NL2654m/v3ygXlYEsJfpu35rArCejm23jex7q/05D+qYOYHOORZcQSmFVYgpfunoY419ODP21UOH5lbsr9RWFHBZpqd3jsMVZybJyJTO4gbCPk6YJgjrRPZp+TFP7HaSMA9iFQfkyO/Awqr+SoIsyw8B5OTF820K0FQAAAAASUVORK5CYII=";
@@ -13746,6 +14188,7 @@ const CommonContext = React.createContext({
     mapRef: null,
     globalHeight: 0,
     heightOptions: [],
+    overlayScale: 1,
 });
 const CommonContextProvider = CommonContext.Provider;
 const useCommonContext = () => React.useContext(CommonContext);
@@ -14755,24 +15198,26 @@ 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;
-function _extends$k() { return _extends$k = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$k.apply(null, arguments); }
+var _path$b;
+function _extends$j() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
 var SvgDelete$1 = function SvgDelete(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#FD494D",
     d: "M6.667 12a.667.667 0 0 0 .666-.667v-4a.667.667 0 1 0-1.333 0v4a.667.667 0 0 0 .667.667m6.666-8h-2.666v-.667a2 2 0 0 0-2-2H7.333a2 2 0 0 0-2 2V4H2.667a.667.667 0 0 0 0 1.333h.666v7.334a2 2 0 0 0 2 2h5.334a2 2 0 0 0 2-2V5.333h.666a.667.667 0 1 0 0-1.333m-6.666-.667a.667.667 0 0 1 .666-.666h1.334a.667.667 0 0 1 .666.666V4H6.667zm4.666 9.334a.667.667 0 0 1-.666.666H5.333a.667.667 0 0 1-.666-.666V5.333h6.666zm-2-.667a.667.667 0 0 0 .667-.667v-4a.667.667 0 0 0-1.333 0v4a.667.667 0 0 0 .666.667"
   })));
@@ -14893,14 +15338,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) => {
@@ -14947,12 +15390,13 @@ var MobileEditMode;
 })(MobileEditMode || (MobileEditMode = {}));
 var ClickEventType;
 (function (ClickEventType) {
+    // 点击doodle的active time的时候触发
     ClickEventType["DOODLE_ACTIVE_TIME"] = "doodleActiveTime";
 })(ClickEventType || (ClickEventType = {}));
 const INIT_EDIT_MAP_INFO = {
     editMap: false,
     selectElement: null,
-    createMode: CreateStatus.CREATING,
+    createMode: null,
     elementType: undefined,
     isShowDrag: false,
     mobileMode: MobileEditMode.START,
@@ -15309,7 +15753,7 @@ const useCheckElement = () => {
         return { isValid: true };
     }, [editMapInfo, svgElementDatas, minDistance]);
     const checkCanNotCreateAtPosition = React.useCallback((checkPoint) => {
-        // console.log('editMapInfo.elementType--->', editMapInfo.elementType);
+        console.log('editMapInfo.elementType--->', editMapInfo.elementType);
         if (!editMapInfo.elementType)
             return false;
         const points = editMapInfo?.selectElement?.points || [];
@@ -15476,8 +15920,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 +15938,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);
@@ -15701,8 +16150,6 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                 else {
                     // mouseUp 时才真正插入新顶点
                     newCoordinates.splice(dragState.newVertexIndex, 0, dragState.currentPosition);
-                    // 通知外部坐标变化
-                    onCoordinatesChange?.(newCoordinates);
                 }
             }
             else {
@@ -15713,9 +16160,11 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                 else {
                     newCoordinates[dragState.dragIndex] = dragState.currentPosition;
                 }
-                // 通知外部坐标变化
-                onCoordinatesChange?.(newCoordinates);
             }
+            const result = editMapInfo?.createMode === CreateStatus.CREATING
+                ? newCoordinates
+                : newCoordinates.reverse();
+            onCoordinatesChange?.(result);
         }
         setDragState({
             isDragging: false,
@@ -15726,7 +16175,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,22 +16247,14 @@ 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;
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(editMode || (createMode && completed)) &&
@@ -15867,14 +16308,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,16 +16363,40 @@ 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 &&
                                         (editMode || (createMode && completed)) &&
                                         coordinates.length > 3) {
-                                        onVertexDelete(idx);
+                                        // 当前是逆时针展示的，但是外部数据是顺时针的，所以idx需要转换一下
+                                        onVertexDelete(renderCoordinates?.length - 1 - 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 +16448,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 +16583,7 @@ const ObstacleElement = ({ data }) => {
         }
     }, [editMapInfo]);
     const currentPoints = React.useMemo(() => {
+        // 为了方便解决删除顶点的时候，delete icon被遮挡的问题，所以逆序一下
         if (editMapInfo?.selectElement?.id === data.id) {
             return editMapInfo.selectElement.points;
         }
@@ -16161,7 +16627,11 @@ const ObstacleElement = ({ data }) => {
             setEditMapInfo((prev) => ({
                 ...prev,
                 selectElement: data,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: data,
+                    },
+                ],
                 currentHistoryIndex: 0,
                 elementType: DataType.OBSTACLE,
                 editMap: true,
@@ -16175,7 +16645,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();
             }
@@ -16603,9 +17073,9 @@ const useVisionOffTransform = (data, scaleConstraints
 };
 
 var _g$7, _defs$7;
-function _extends$j() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
+function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
 var SvgTransformDelete = function SvgTransformDelete(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
@@ -16654,9 +17124,9 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
 };
 
 var _g$6, _defs$6;
-function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
+function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
 var SvgTransformRotate = function SvgTransformRotate(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
@@ -16690,9 +17160,9 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
 };
 
 var _g$5, _defs$5;
-function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
+function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
 var SvgTransformScale = function SvgTransformScale(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
@@ -16726,9 +17196,9 @@ var SvgTransformScale = function SvgTransformScale(props) {
 };
 
 var _g$4, _defs$4;
-function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
+function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
 var SvgTransformTranslate = function SvgTransformTranslate(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
@@ -16764,6 +17234,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 +17350,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) {
@@ -16905,12 +17376,12 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
                     const centerX = (minX + maxX) / 2;
                     // 计算尺寸显示框的位置（选择框下方）
                     const infoBoxY = maxY + 20; // 选择框下方20像素
-                    const infoBoxWidth = 140; // 信息框宽度
-                    const infoBoxHeight = 30; // 信息框高度
+                    const infoBoxWidth = 140 * overlayScale; // 信息框宽度
+                    const infoBoxHeight = 30 * overlayScale; // 信息框高度
                     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);
@@ -16960,6 +17431,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
                                         fontSize: '12px',
                                         color: 'white',
                                         fontWeight: '400',
+                                        // transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
                                     }, children: [dimensions.height, "m \u00D7 ", dimensions.width, "m"] }) }))] }));
                 })()] }));
 };
@@ -17017,7 +17489,11 @@ const VisionOffElement = ({ data, onSelect }) => {
                 ...prev,
                 selectElement: data,
                 elementType: DataType.VISION_OFF,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: data,
+                    },
+                ],
                 currentHistoryIndex: 0,
                 editMap: true,
                 isShowDrag: true,
@@ -17379,8 +17855,8 @@ const useDoodleTransform = (data, onTransformChange, options) => {
         const scaledHeight = height * currentScale;
         // 转换为米单位（假设SVG坐标单位是米）
         // 这里可以根据实际的地图比例尺进行调整
-        const widthInMeters = scaledWidth;
-        const heightInMeters = scaledHeight;
+        const widthInMeters = scaledWidth / SCALE_FACTOR;
+        const heightInMeters = scaledHeight / SCALE_FACTOR;
         return {
             width: Math.round(widthInMeters * 100) / 100, // 保留2位小数
             height: Math.round(heightInMeters * 100) / 100, // 保留2位小数
@@ -17412,15 +17888,15 @@ const useDoodleTransform = (data, onTransformChange, options) => {
     };
 };
 
-var _path$b;
-function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
+var _path$a;
+function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
 var SvgTransformArrow = function SvgTransformArrow(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 7,
     height: 11,
     fill: "none"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#fff",
     d: "M2.156 1.032a.777.777 0 0 0-1.061 0 .69.69 0 0 0-.062.943l.062.068 3.97 3.78-3.97 3.78a.69.69 0 0 0-.062.944l.062.067c.27.257.696.277.99.06l.07-.06 4.5-4.286a.69.69 0 0 0 .063-.943l-.062-.067z",
     opacity: 0.5
@@ -17482,7 +17958,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, onClickInfo, }) => {
-    const { platform } = useCommonContext();
+    const { platform, overlayScale } = useCommonContext();
     // 使用自定义hook管理所有变换逻辑
     const { currentCenter, currentScale, currentDirection, isDragging, isRotating, isScaling, initializeTransform, calculateSelectionBoxPoints, handleMouseDown, handleRotateStart, handleScaleStart, handleMouseMove, handleMouseUp, containerRef, dimensions, } = useDoodleTransform(data, onTransformChange, {
         minScale,
@@ -17504,16 +17980,20 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
     }, [data?.svg, currentCenter, currentScale, currentDirection]);
     const isWeb = React.useMemo(() => platform === 'web', [platform]);
     const activeTime = React.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));
+        if (data.create_ts && data.expiration_ts) {
+            return Math.floor((data.expiration_ts - data.create_ts) / (60 * 60 * 24));
         }
         return 0;
     }, [data]);
+    const remainingTime = React.useMemo(() => {
+        const currentTime = Math.floor(Date.now() / 1000);
+        console.log('data.expiration_ts--', data.expiration_ts);
+        if (data.expiration_ts <= currentTime) {
+            return 0;
+        }
+        // 保留一位小数
+        return ((currentTime - data.expiration_ts) / (24 * 60 * 60)).toFixed(1);
+    }, [data]);
     // 初始化变换状态
     React.useEffect(() => {
         initializeTransform();
@@ -17594,7 +18074,18 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
     };
     const selectionBoxWithoutOperation = () => {
         const selectionBoxPoints = calculateSelectionBoxPoints();
-        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
+        // 计算选择框的边界
+        const minX = Math.min(...selectionBoxPoints.map((p) => p.x));
+        const maxX = Math.max(...selectionBoxPoints.map((p) => p.x));
+        const maxY = Math.max(...selectionBoxPoints.map((p) => p.y));
+        // 计算选择框的中心
+        const centerX = (minX + maxX) / 2;
+        // 计算尺寸显示框的位置（选择框下方）
+        const infoBoxY = maxY + 20; // 选择框下方20像素
+        const infoBoxWidth = 140 * overlayScale; // 信息框宽度
+        const infoBoxHeight = 100 * overlayScale; // 信息框高度
+        const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#B2B4B9", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
                         ? {
                             onTouchStart: createReactEventHandler((e) => {
                                 handleMouseDownWithDisabled(e);
@@ -17602,7 +18093,26 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                         }
                         : {
                             onMouseDown: handleMouseDownWithDisabled,
-                        }) }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[0].x, cy: selectionBoxPoints[0].y, r: "6", fill: "#9EA6BA", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[3].x, cy: selectionBoxPoints[3].y, r: "6", fill: "#9EA6BA", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[1].x, cy: selectionBoxPoints[1].y, r: "6", fill: "#9EA6BA", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[2].x, cy: selectionBoxPoints[2].y, r: "6", fill: "#9EA6BA", stroke: "none" })] }));
+                        }) }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[0].x, cy: selectionBoxPoints[0].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[3].x, cy: selectionBoxPoints[3].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[1].x, cy: selectionBoxPoints[1].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("circle", { cx: selectionBoxPoints[2].x, cy: selectionBoxPoints[2].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsxRuntime.jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
+                        onClickInfo?.();
+                    }, children: jsxRuntime.jsx("div", { style: {
+                            padding: '5px 6px',
+                            background: 'rgba(201, 209, 218, 1)',
+                            borderRadius: '10px',
+                            display: 'inline-flex',
+                            flexDirection: 'column',
+                            alignItems: 'flex-start',
+                            justifyContent: 'center',
+                            fontSize: '12px',
+                            color: 'white',
+                            fontWeight: '400',
+                            // transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
+                        }, children: jsxRuntime.jsx("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: '10px',
+                            }, children: jsxRuntime.jsxs("div", { children: ["Remaining Time: ", remainingTime] }) }) }) })] }));
     };
     React.useEffect(() => {
         const isMove = isDragging || isRotating || isScaling;
@@ -17650,10 +18160,10 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                     const centerX = (minX + maxX) / 2;
                     // 计算尺寸显示框的位置（选择框下方）
                     const infoBoxY = maxY + 20; // 选择框下方20像素
-                    const infoBoxWidth = 140; // 信息框宽度
-                    const infoBoxHeight = 50; // 信息框高度
+                    const infoBoxWidth = 140 * overlayScale; // 信息框宽度
+                    const infoBoxHeight = 100 * overlayScale; // 信息框高度
                     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
                                     ? {
@@ -17708,6 +18218,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                         fontSize: '12px',
                                         color: 'white',
                                         fontWeight: '400',
+                                        // transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
                                     }, children: [jsxRuntime.jsxs("div", { children: [dimensions.height, "m \u00D7 ", dimensions.width, "m"] }), jsxRuntime.jsxs("div", { style: {
                                                 display: 'flex',
                                                 alignItems: 'center',
@@ -17718,9 +18229,9 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
 };
 
 const DoodleElement = ({ data }) => {
-    const { editMapInfo, setEditMapInfo, onHandleEnterRecord, onClickEvent } = useMapEditContext();
+    const { editMapInfo, setEditMapInfo, onHandleEnterRecord, onHandleEvent } = useMapEditContext();
     const { addHistory } = useHistoryHandle();
-    const { platform } = useCommonContext();
+    const { platform, doodleList } = useCommonContext();
     const isSelected = React.useMemo(() => {
         if (platform === PlatformType.H5) {
             if (editMapInfo.mobileMode !== MobileEditMode.START &&
@@ -17737,6 +18248,23 @@ const DoodleElement = ({ data }) => {
         }
         return data;
     }, [data, editMapInfo?.selectElement]);
+    const minScale = React.useMemo(() => {
+        const doodleInfo = doodleList.find((item) => {
+            // 移除所有空白字符(包括\n、\r、\t等)进行比较
+            const normalizedItemSvg = item.svgStr?.replace(/[\s\n\r\t]+/g, '').replace(/\\n/g, '');
+            const normalizedOriginSvg = originData.svg?.replace(/[\s\n\r\t]+/g, '').replace(/\\n/g, '');
+            // console.log('normalizedItemSvg--->', normalizedItemSvg, normalizedOriginSvg);
+            return normalizedItemSvg === normalizedOriginSvg;
+        });
+        console.log('doodleList--->', doodleList, originData, doodleInfo);
+        if (!doodleInfo) {
+            return 1;
+        }
+        const minLength = doodleInfo?.minLength;
+        const parseSvg = SvgParserNative.parseSvg(originData.svg);
+        const svgMinLength = parseSvg.height / SCALE_FACTOR;
+        return minLength / svgMinLength;
+    }, [doodleList, originData]);
     const isSelectedWithoutOperation = React.useMemo(() => {
         if (platform === PlatformType.H5) {
             if (editMapInfo.mobileMode === MobileEditMode.START &&
@@ -17776,7 +18304,14 @@ const DoodleElement = ({ data }) => {
         })?.then(() => {
             setEditMapInfo((prev) => ({
                 ...prev,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: {
+                            ...data,
+                            transformedPoints: transformedElements,
+                        },
+                    },
+                ],
                 currentHistoryIndex: 0,
                 selectElement: {
                     ...data,
@@ -17808,8 +18343,8 @@ const DoodleElement = ({ data }) => {
         }));
     }, []);
     const handleClickInfo = React.useCallback(() => {
-        onClickEvent?.(ClickEventType.DOODLE_ACTIVE_TIME);
-    }, [onClickEvent]);
+        onHandleEvent?.(ClickEventType.DOODLE_ACTIVE_TIME);
+    }, [onHandleEvent]);
     // const handleDragMove = useCallback(
     //   (data: DoodleData) => {
     //     setEditMapInfo((prev: EditMapInfo) => ({
@@ -17837,7 +18372,8 @@ const DoodleElement = ({ data }) => {
             },
         });
     }, [transformedElements]);
-    return (jsxRuntime.jsx(DoodleTransformWrapper, { data: originData, onTransformChange: handleTransformChange, isSelected: isSelected, isSelectedWithoutOperation: isSelectedWithoutOperation, onSelect: handleSelect, onCancel: handleCancel, onDragEnd: handleDragEnd, showInfo: platform === PlatformType.H5, onClickInfo: handleClickInfo }));
+    console.log('originData--->', originData, minScale);
+    return (jsxRuntime.jsx(DoodleTransformWrapper, { data: originData, onTransformChange: handleTransformChange, isSelected: isSelected, isSelectedWithoutOperation: isSelectedWithoutOperation, onSelect: handleSelect, onCancel: handleCancel, onDragEnd: handleDragEnd, showInfo: platform === PlatformType.H5, onClickInfo: handleClickInfo, minScale: minScale }));
 };
 
 const SvgElement = React.memo(({ type, data, interactive = false }) => {
@@ -17983,6 +18519,7 @@ const ChannelClipPath = React.memo(() => {
         svgRef?.viewBox.baseVal?.width,
         svgRef?.viewBox.baseVal?.height,
     ]);
+    console.log('boundaryData---->', svgRef?.viewBox.baseVal);
     /**
      * 判断多边形是否为逆时针方向
      * 使用叉积法计算多边形的有向面积
@@ -19070,27 +19607,37 @@ const getScreenCenterSvgPoint = (svgElement, mapInstance) => {
  */
 const CreateObstacleElement = React.forwardRef(({ enabled = false, svgElement, onPointsChange, styles, points }, ref) => {
     const { mapRef } = useCommonContext();
+    const { checkCanNotCreateAtPosition } = useCheckElement();
     // 使用固定的样式，确保能正常渲染
     // 在十字准心位置添加点
     const addPoint = React.useCallback(() => {
         if (!enabled || !svgElement) {
             console.warn('未启用创建模式或SVG元素不存在');
-            return false;
+            return { isValid: false, reason: '未启用创建模式或SVG元素不存在' };
         }
         if (!mapRef) {
             console.warn('地图实例不存在');
-            return false;
+            return { isValid: false, reason: '地图实例不存在' };
         }
         const centerPoint = getScreenCenterSvgPoint(svgElement, mapRef);
         if (!centerPoint) {
             console.warn('无法获取屏幕中心点的SVG坐标或点不在SVG可见区域内');
-            // 可以在这里添加用户友好的提示，比如显示toast消息
-            // window.alert('十字准心位置不在地图可见区域内，请调整地图位置后再试');
-            return false;
+            return { isValid: false, reason: '无法获取屏幕中心点的SVG坐标或点不在SVG可见区域内' };
+        }
+        console.error('centerPoint--->', centerPoint);
+        console.error('checkCanNotCreateAtPosition--->', checkCanNotCreateAtPosition(centerPoint));
+        // 校验是否能打点
+        if (checkCanNotCreateAtPosition(centerPoint)) {
+            return {
+                isValid: false,
+                reason: '无法获取屏幕中心点的SVG坐标或点不在SVG可见区域内',
+            };
         }
         const newPoints = [...points, centerPoint];
         onPointsChange?.(newPoints);
-        return true;
+        return {
+            isValid: true,
+        };
     }, [enabled, svgElement, mapRef, points, onPointsChange]);
     // 撤销最后一个点
     const undoLastPoint = React.useCallback(() => {
@@ -19124,7 +19671,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';
 
@@ -19180,7 +19727,7 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
     const { editMapInfo, setEditMapInfo } = useMapEditContext();
     const { getVisionOffPoints, centerPoint } = useCreateVisionOffElement();
     const { svgElementDatas } = useSvgEditContext();
-    const { checkCanNotCreateAtPosition } = useCheckElement();
+    const { checkCanNotCreateAtPosition, checkDoodle } = useCheckElement();
     const svgRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const { platform } = useCommonContext();
@@ -19314,7 +19861,7 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
         getEditMapInfo,
         // 十字准心点管理器方法
         addCreateObstaclePoint: () => {
-            return pointManagerRef.current?.addPoint();
+            return pointManagerRef.current?.addPoint?.();
         },
         undoCreateObstaclePoint: () => {
             pointManagerRef.current?.undoLastPoint();
@@ -19336,6 +19883,7 @@ const SvgEditMap = React.forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMa
         clearHistory,
         addHistory,
         addDoodle,
+        checkDoodle: () => checkDoodle?.(),
     }));
     // 初始化多边形绘制 Hook
     const { onSvgClick, onSvgMouseMove, onPointClick, points, completed, mousePos, updatePoints } = usePolygonDrawing({ createMode: isCreating });
@@ -19365,6 +19913,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 +19927,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) => {
                         // 创建模式下的坐标变化（拖拽时）
@@ -19452,10 +20003,10 @@ var css_248z$c = ".index-module_addEntry__QsQHD {\n  position: absolute;\n  righ
 var styles$c = {"addEntry":"index-module_addEntry__QsQHD","icon":"index-module_icon__qIgA4","addItem":"index-module_addItem__mglwZ","label":"index-module_label__QqZ-9"};
 styleInject(css_248z$c);
 
-var _rect$2, _path$a, _defs$3;
-function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
+var _rect$2, _path$9, _defs$3;
+function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
 var SvgAddEntry = function SvgAddEntry(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -19483,7 +20034,7 @@ var SvgAddEntry = function SvgAddEntry(props) {
       height: "100%",
       width: "100%"
     }
-  })), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#1F1F1F",
     stroke: "url(#add-entry_svg__c)",
     strokeWidth: 0.3,
@@ -19523,15 +20074,15 @@ var SvgAddEntry = function SvgAddEntry(props) {
   })))));
 };
 
-var _path$9, _path2$3, _path3;
-function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
+var _path$8, _path2$3, _path3;
+function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
 var SvgBoundary = function SvgBoundary(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#1DBEAC",
     fillRule: "evenodd",
     d: "M3.385 2h9.23C13.38 2 14 2.62 14 3.385v9.23C14 13.38 13.38 14 12.615 14h-9.23C2.62 14 2 13.38 2 12.615v-9.23C2 2.62 2.62 2 3.385 2m9.692 1.385a.46.46 0 0 0-.462-.462h-9.23a.46.46 0 0 0-.462.462v9.23c0 .255.207.462.462.462h9.23a.46.46 0 0 0 .462-.462z",
@@ -19549,15 +20100,15 @@ var SvgBoundary = function SvgBoundary(props) {
   })));
 };
 
-var _path$8, _path2$2, _rect$1, _rect2$1;
-function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
+var _path$7, _path2$2, _rect$1, _rect2$1;
+function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
 var SvgLimitIsland = function SvgLimitIsland(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#FFA077",
     d: "M11.725 6.714c-1.019-.137-2.516-1.488-1.9-2.14.588-.621 1.91.344 1.9 2.14"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -19583,9 +20134,9 @@ var SvgLimitIsland = function SvgLimitIsland(props) {
 };
 
 var _rect, _rect2, _rect3, _rect4, _g$3;
-function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
+function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
 var SvgVisionFence = function SvgVisionFence(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -19638,9 +20189,9 @@ var SvgVisionFence = function SvgVisionFence(props) {
 };
 
 var _g$2, _defs$2;
-function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
+function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
 var SvgDoodle = function SvgDoodle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -19749,25 +20300,10 @@ const CustomModal = ({ children, titleCenter, hasMinHeight, height, ...props })
         }), cancelButtonProps: { color: 'primary', variant: 'outlined' }, cancelText: 'Cancel', ...props, children: children }));
 };
 
-var css_248z$a = ".index-module_doodleModal__EGNPW .index-module_title__ViZuB {\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: rgb(29, 29, 29);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  max-height: 230px;\n  overflow-y: auto;\n  width: 470px;\n  margin: 20px auto 0;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 {\n  width: 70px;\n  height: 70px;\n  padding: 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  border: 2px solid transparent;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  position: relative;\n  background: rgb(233, 242, 241);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7:hover {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7.index-module_active__1OHfd {\n  border: 2px solid rgb(110, 220, 207);\n  background-color: rgba(110, 220, 207, 0.1);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7.index-module_active__1OHfd .index-module_selectIcon__EFQF- {\n  display: block;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 .index-module_svgImage__2OT8- {\n  width: 100%;\n  height: 100%;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 .index-module_svgImage__2OT8- svg {\n  width: 100%;\n  height: 100%;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 .index-module_selectIcon__EFQF- {\n  position: absolute;\n  bottom: 4px;\n  right: 4px;\n  display: none;\n}";
-var styles$a = {"doodleModal":"index-module_doodleModal__EGNPW","title":"index-module_title__ViZuB","content":"index-module_content__h-60T","item":"index-module_item__dvoq7","active":"index-module_active__1OHfd","selectIcon":"index-module_selectIcon__EFQF-","svgImage":"index-module_svgImage__2OT8-"};
+var css_248z$a = ".index-module_doodleModal__EGNPW .index-module_title__ViZuB {\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: rgb(29, 29, 29);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  max-height: 230px;\n  overflow-y: auto;\n  width: 470px;\n  margin: 20px auto 0;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 {\n  width: 70px;\n  height: 70px;\n  padding: 10px;\n  border-radius: 8px;\n  cursor: pointer;\n  border: 2px solid transparent;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  position: relative;\n  background: rgb(233, 242, 241);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7:hover {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7.index-module_active__1OHfd {\n  border: 2px solid #ff5a00;\n  background-color: rgba(110, 220, 207, 0.1);\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7.index-module_active__1OHfd .index-module_selectIcon__EFQF- {\n  display: block;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 .index-module_svgImage__2OT8- {\n  width: 100%;\n  height: 100%;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 .index-module_svgImage__2OT8- svg {\n  width: 100%;\n  height: 100%;\n}\n.index-module_doodleModal__EGNPW .index-module_content__h-60T .index-module_item__dvoq7 .index-module_selectIcon__EFQF- {\n  position: absolute;\n  bottom: 4px;\n  right: 4px;\n  display: none;\n}";
+var styles$a = {"doodleModal":"index-module_doodleModal__EGNPW","title":"index-module_title__ViZuB","content":"index-module_content__h-60T","item":"index-module_item__dvoq7","active":"index-module_active__1OHfd","svgImage":"index-module_svgImage__2OT8-"};
 styleInject(css_248z$a);
 
-var _path$7;
-function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
-var SvgSelect = function SvgSelect(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 14,
-    height: 12,
-    fill: "none"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
-    stroke: "#6EDCCF",
-    strokeWidth: 2,
-    d: "m1 7.5 4 3L12.5 1"
-  })));
-};
-
 const DoodleModal = ({ open, onSelect, setOpen, doodleList, centerPoint }) => {
     const { editMapInfo, setEditMapInfo, onHandleEnterRecord } = useMapEditContext();
     const [selectedDoodle, setSelectedDoodle] = React.useState(null);
@@ -19785,7 +20321,7 @@ const DoodleModal = ({ open, onSelect, setOpen, doodleList, centerPoint }) => {
             const svg = selectedDoodle?.svgStr;
             const minLength = selectedDoodle.minLength;
             const parseSvg = SvgParserNative.parseSvg(svg);
-            const svgMinLength = Math.min(parseSvg.width, parseSvg.height) / SCALE_FACTOR;
+            const svgMinLength = parseSvg.height / SCALE_FACTOR;
             // 使用获取到的 SVG 内容，如果没有获取到则使用 URL
             newDoodle.svg = svg;
             newDoodle.scale = minLength / svgMinLength;
@@ -19797,7 +20333,11 @@ const DoodleModal = ({ open, onSelect, setOpen, doodleList, centerPoint }) => {
             })?.then(() => {
                 setEditMapInfo({
                     ...editMapInfo,
-                    historyList: [newDoodle],
+                    historyList: [
+                        {
+                            selectElement: newDoodle,
+                        },
+                    ],
                     currentHistoryIndex: 0,
                     createMode: CreateStatus.COMPLETED,
                     elementType: DataType.DOODLE,
@@ -19811,12 +20351,12 @@ const DoodleModal = ({ open, onSelect, setOpen, doodleList, centerPoint }) => {
             });
         }
     }, [selectedDoodle, setEditMapInfo, editMapInfo, setOpen, onSelect, centerPoint]);
-    return (jsxRuntime.jsx(CustomModal, { width: 560, title: "Creative logos", titleCenter: true, open: open, onOk: handleConfirm, onCancel: () => setOpen(false), okButtonProps: { disabled: !selectedDoodle }, afterClose: () => setSelectedDoodle(null), okText: "Confirm", cancelText: "Cancel", children: jsxRuntime.jsxs("div", { className: styles$a.doodleModal, children: [jsxRuntime.jsx("div", { className: styles$a.title, children: "Please select a doodle" }), jsxRuntime.jsx("div", { className: styles$a.content, children: doodleList
+    return (jsxRuntime.jsx(CustomModal, { width: 560, title: "Create doodle", titleCenter: true, open: open, onOk: handleConfirm, onCancel: () => setOpen(false), okButtonProps: { disabled: !selectedDoodle }, afterClose: () => setSelectedDoodle(null), okText: "Create", cancelText: "Cancel", children: jsxRuntime.jsxs("div", { className: styles$a.doodleModal, children: [jsxRuntime.jsx("div", { className: styles$a.title, children: "Select the doodle that you want to create" }), jsxRuntime.jsx("div", { className: styles$a.content, children: doodleList
                         ?.filter((item) => !noNeed.includes(item.name))
                         .map((item) => {
-                        return (jsxRuntime.jsxs("div", { className: classNames(styles$a.item, {
+                        return (jsxRuntime.jsx("div", { className: classNames(styles$a.item, {
                                 [styles$a.active]: selectedDoodle?.svg === item.svg,
-                            }), onClick: () => handleSelectDoodle(item), children: [jsxRuntime.jsx("div", { className: styles$a.svgImage, dangerouslySetInnerHTML: { __html: item?.svgStr } }), jsxRuntime.jsx("div", { className: styles$a.selectIcon, children: jsxRuntime.jsx(SvgSelect, {}) })] }, item.id));
+                            }), onClick: () => handleSelectDoodle(item), children: jsxRuntime.jsx("div", { className: styles$a.svgImage, dangerouslySetInnerHTML: { __html: item?.svgStr } }) }, item.id));
                     }) })] }) }));
 };
 
@@ -19879,7 +20419,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 +20452,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 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"};
+var css_248z$9 = ".index-module_handleElementInfo__vWIaf {\n  position: absolute;\n  right: 0;\n  top: 0;\n  border-radius: 8px;\n  padding: 8px;\n  background: #fff;\n  width: 265px;\n  user-select: none;\n}\n.index-module_handleElementInfo__vWIaf .index-module_border__iPL-- {\n  margin: 8px 0;\n  border-top: 1px solid #c5c5c5;\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}\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  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0px 0 4px 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_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.index-module_areaInfo__-WJPL .index-module_areaItem__fk-i2:not(:last-child) {\n  margin-bottom: 4px;\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}";
+var styles$9 = {"handleElementInfo":"index-module_handleElementInfo__vWIaf","border":"index-module_border__iPL--","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","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: 6px 0;\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 +20488,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,24 +20513,24 @@ 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: () => {
             setNameValue('');
-        }, children: jsxRuntime.jsx(antd.Input, { maxLength: 120, showCount: true, placeholder: "Please enter boundary name", value: nameValue, onChange: (e) => setNameValue(e.target.value) }) }));
+        }, children: jsxRuntime.jsx(antd.Input, { maxLength: 12, 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;
@@ -19998,12 +20542,12 @@ var SvgArrow = function SvgArrow(props) {
     height: 16,
     fill: "none"
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#FF5A00",
+    fill: "#1F1F1F",
     d: "M11.523 7.704c.005.014.015.026.02.04.049.125.065.268.046.406a.73.73 0 0 1-.152.363l-3.88 4.638a.47.47 0 0 1-.377.182.49.49 0 0 1-.369-.208.77.77 0 0 1-.144-.477.76.76 0 0 1 .164-.466l3.483-4.162-3.468-4.224a.77.77 0 0 1-.15-.462c0-.172.053-.338.148-.463a.49.49 0 0 1 .36-.204.47.47 0 0 1 .371.17l3.845 4.682q.007.017.017.032.008.01.018.019c.032.04.046.09.067.134"
   })));
 };
 
-var css_248z$6 = ".index-module_item__wwHEt {\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  display: flex;\n  align-items: center;\n  padding: 8px 0;\n}";
+var css_248z$6 = ".index-module_item__wwHEt {\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  display: flex;\n  align-items: center;\n  padding: 6px 0;\n}\n.index-module_item__wwHEt:not(:last-child) {\n  margin-bottom: 4px;\n}";
 var styles$6 = {"item":"index-module_item__wwHEt"};
 styleInject(css_248z$6);
 
@@ -20107,7 +20651,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);
 
@@ -20347,43 +20891,81 @@ function convertDirectionToParams(value) {
     return directions;
 }
 
+const DEFAULT_LIST = [
+    {
+        value: 1 << 0,
+        text: 'A',
+        selected: false,
+    },
+    {
+        value: 1 << 1,
+        text: 'B',
+        selected: false,
+    },
+    {
+        value: 1 << 2,
+        text: 'C',
+        selected: false,
+    },
+    {
+        value: 1 << 3,
+        text: 'D',
+        selected: false,
+    },
+    {
+        value: 1 << 4,
+        text: 'E',
+        selected: false,
+    },
+    {
+        value: 1 << 5,
+        text: 'F',
+        selected: false,
+    },
+];
 const MowDirection_L = (props) => {
     const { value, angleValue, optionAngle = 45, zIndex = 10000, onChange,
     // children,
      } = props;
     const [angle, setAngle] = React.useState(0);
-    const [lineList, setLineList] = React.useState([
-        {
-            value: 1 << 0,
-            text: 'A',
-            selected: false,
-        },
-        {
-            value: 1 << 1,
-            text: 'B',
-            selected: false,
-        },
-        {
-            value: 1 << 2,
-            text: 'C',
-            selected: false,
-        },
-        {
-            value: 1 << 3,
-            text: 'D',
-            selected: false,
-        },
-        {
-            value: 1 << 4,
-            text: 'E',
-            selected: false,
-        },
-        {
-            value: 1 << 5,
-            text: 'F',
-            selected: false,
-        },
-    ]);
+    const lineList = React.useMemo(() => {
+        return DEFAULT_LIST.map((item) => ({
+            ...item,
+            selected: convertDirectionToParams(value).includes(item.value),
+        }));
+    }, [value]);
+    // const [lineList, setLineList] = useState<LineItem[]>([
+    //   {
+    //     value: 1 << 0,
+    //     text: 'A',
+    //     selected: false,
+    //   },
+    //   {
+    //     value: 1 << 1,
+    //     text: 'B',
+    //     selected: false,
+    //   },
+    //   {
+    //     value: 1 << 2,
+    //     text: 'C',
+    //     selected: false,
+    //   },
+    //   {
+    //     value: 1 << 3,
+    //     text: 'D',
+    //     selected: false,
+    //   },
+    //   {
+    //     value: 1 << 4,
+    //     text: 'E',
+    //     selected: false,
+    //   },
+    //   {
+    //     value: 1 << 5,
+    //     text: 'F',
+    //     selected: false,
+    //   },
+    // ]);
     const hitRectAngle = React.useMemo(() => {
         const direction = lineList
             ?.filter((item) => item?.selected)
@@ -20396,12 +20978,6 @@ const MowDirection_L = (props) => {
     const allSelect = React.useMemo(() => {
         return lineList?.every((item) => item?.selected);
     }, [lineList]);
-    React.useEffect(() => {
-        setLineList(lineList.map((line) => ({
-            ...line,
-            selected: convertDirectionToParams(value).includes(line.value),
-        })));
-    }, [value]);
     React.useEffect(() => {
         setAngle(angleValue);
     }, [angleValue]);
@@ -20416,7 +20992,6 @@ const MowDirection_L = (props) => {
             }
             return { ...line };
         });
-        setLineList(newLine);
         onChange?.(newLine
             ?.filter((item) => item?.selected)
             .reduce((pre, line) => {
@@ -20440,10 +21015,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,56 +21104,34 @@ 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;
+    const handleCancel = React.useCallback(() => {
+        if (!canSave) {
+            setOpen(false);
+            return;
         }
-        // 计算边界
-        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]);
+        antd.Modal.confirm({
+            icon: null,
+            centered: true,
+            title: 'Exit editing',
+            content: 'Changes you made will not be saved. Are you sure you want to exit editing the mowing direction?',
+            onOk: () => {
+                setOpen(false);
+            },
+            okText: 'Exit',
+            cancelText: 'Continue editing',
         });
-        // 添加边距
-        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]);
+    }, [canSave, setOpen]);
     console.log('directionInfo=>', directionInfo, mapJson);
-    return (jsxRuntime.jsx(CustomModal, { maskClosable: false, titleCenter: true, title: `${zoneName} mowing direction`, open: open, width: 600, onCancel: () => {
-            setOpen(false);
-        }, onOk: () => {
+    return (jsxRuntime.jsx(CustomModal, { maskClosable: false, titleCenter: true, title: `${zoneName} mowing direction`, open: open, width: 600, onCancel: handleCancel, onOk: () => {
             onChange?.(directions, angle);
             setOpen(false);
         }, 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);
+                                    if (!value)
+                                        return antd.message.warning('Choose at least one mowing direction');
                                     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: {
                             formatter: (value) => `${value}°`,
@@ -20567,7 +21181,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,
@@ -20576,13 +21190,13 @@ const BoundaryInfo = ({ onHandleDelete }) => {
                                 name: name,
                             },
                         });
-                    } }) }), jsxRuntime.jsxs("div", { className: styles$9.otherEdit, children: [jsxRuntime.jsx(Item, { children: jsxRuntime.jsxs("div", { className: styles$9.otherItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Height" }), jsxRuntime.jsx("div", { className: styles$9.value, children: generateHeightStr(heightValue?.cuttingHeight, unitType, true) }), jsxRuntime.jsx("div", { className: styles$9.icon, onClick: () => {
+                    } }) }), jsxRuntime.jsx("div", { className: styles$9.border }), jsxRuntime.jsxs("div", { className: styles$9.otherEdit, children: [jsxRuntime.jsx(Item, { children: jsxRuntime.jsxs("div", { className: styles$9.otherItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Cutting height" }), jsxRuntime.jsx("div", { className: styles$9.value, children: generateHeightStr(heightValue?.cuttingHeight, unitType, true) }), jsxRuntime.jsx("div", { className: styles$9.icon, onClick: () => {
                                         setHeightOpen(true);
-                                    }, children: jsxRuntime.jsx(SvgArrow, {}) })] }) }), jsxRuntime.jsx(Item, { children: jsxRuntime.jsxs("div", { className: styles$9.otherItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Direction" }), jsxRuntime.jsx("div", { className: styles$9.value }), jsxRuntime.jsx("div", { className: styles$9.icon, onClick: () => {
+                                    }, children: jsxRuntime.jsx(SvgArrow, {}) })] }) }), jsxRuntime.jsx(Item, { children: jsxRuntime.jsxs("div", { className: styles$9.otherItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Mowing direction" }), jsxRuntime.jsx("div", { className: styles$9.value }), jsxRuntime.jsx("div", { className: styles$9.icon, onClick: () => {
                                         setDirectionOpen(true);
-                                    }, children: jsxRuntime.jsx(SvgArrow, {}) })] }) }), jsxRuntime.jsx(Item, { children: jsxRuntime.jsxs("div", { className: styles$9.otherItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Mowing Edge" }), jsxRuntime.jsx("div", { className: styles$9.value }), jsxRuntime.jsx("div", { className: styles$9.icon, onClick: () => {
+                                    }, children: jsxRuntime.jsx(SvgArrow, {}) })] }) }), jsxRuntime.jsx(Item, { children: jsxRuntime.jsxs("div", { className: styles$9.otherItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Edge mowing" }), jsxRuntime.jsx("div", { className: styles$9.value }), jsxRuntime.jsx("div", { className: styles$9.icon, onClick: () => {
                                         setOpen(true);
-                                    }, children: jsxRuntime.jsx(SvgArrow, {}) })] }) })] }), jsxRuntime.jsxs("div", { className: styles$9.areaInfo, children: [jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Area:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue?.area })] }), jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Perimeter:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue?.perimeter })] })] }), jsxRuntime.jsx(MowingEdgeModal, { value: edgeMowingValue, onChange: (value) => {
+                                    }, children: jsxRuntime.jsx(SvgArrow, {}) })] }) })] }), jsxRuntime.jsx("div", { className: styles$9.border }), jsxRuntime.jsxs("div", { className: styles$9.areaInfo, children: [jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Area:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue?.area })] }), jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Perimeter:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue?.perimeter })] })] }), jsxRuntime.jsx(MowingEdgeModal, { value: edgeMowingValue, onChange: (value) => {
                     setEditMapInfo({
                         ...editMapInfo,
                         selectElement: {
@@ -20612,7 +21226,7 @@ const BoundaryInfo = ({ onHandleDelete }) => {
                 } })] }));
 };
 
-var css_248z$1 = ".index-module_timePeriod__EkVZl {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-top: 1px solid rgb(197, 197, 197);\n}\n.index-module_timePeriod__EkVZl .index-module_timePeriodHeader__CgJGW {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0px 0 4px 0;\n}\n.index-module_timePeriod__EkVZl .index-module_timePeriodHeader__CgJGW .index-module_timePeriodTitle__lnYno {\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  color: rgb(0, 0, 0);\n}\n.index-module_timePeriod__EkVZl .index-module_timePeriodHeader__CgJGW .index-module_timePeriodHandle__pjDTA {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index-module_timePeriod__EkVZl .index-module_timePeriodContent__pTqdW .index-module_timePeriodRadioItem__3rd-r {\n  line-height: 28px;\n}";
+var css_248z$1 = ".index-module_timePeriod__EkVZl {\n  display: flex;\n  flex-direction: column;\n}\n.index-module_timePeriod__EkVZl .index-module_timePeriodHeader__CgJGW {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 4px 0;\n}\n.index-module_timePeriod__EkVZl .index-module_timePeriodHeader__CgJGW .index-module_timePeriodTitle__lnYno {\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  color: rgb(0, 0, 0);\n}\n.index-module_timePeriod__EkVZl .index-module_timePeriodHeader__CgJGW .index-module_timePeriodHandle__pjDTA {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index-module_timePeriod__EkVZl .index-module_timePeriodContent__pTqdW {\n  margin-top: 4px;\n}\n.index-module_timePeriod__EkVZl .index-module_timePeriodContent__pTqdW .index-module_timePeriodRadioItem__3rd-r {\n  line-height: 28px;\n}";
 var styles$1 = {"timePeriod":"index-module_timePeriod__EkVZl","timePeriodHeader":"index-module_timePeriodHeader__CgJGW","timePeriodTitle":"index-module_timePeriodTitle__lnYno","timePeriodHandle":"index-module_timePeriodHandle__pjDTA","timePeriodContent":"index-module_timePeriodContent__pTqdW","timePeriodRadioItem":"index-module_timePeriodRadioItem__3rd-r"};
 styleInject(css_248z$1);
 
@@ -20627,6 +21241,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,
@@ -20638,8 +21257,8 @@ const TimePeriod = ({ value, onChange }) => {
                             setDate(null);
                             onChange({
                                 ...value,
-                                startTimestamp: 0,
-                                endTimestamp: 0,
+                                start_timestamp: 0,
+                                end_timestamp: 0,
                             });
                         }
                         else if (e.target.value === RadioValue.SHORT_TIME) {
@@ -20650,19 +21269,15 @@ 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: "Always" }) }), 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(),
-                                                endTimestamp: dateValue[1].unix(),
+                                                start_timestamp: dateValue[0].unix(),
+                                                end_timestamp: dateValue[1].unix(),
                                             });
                                         }
                                     } }) }) })] }) })] }));
@@ -20676,12 +21291,12 @@ const ObstacleInfo = ({ onHandleDelete }) => {
         if (!editMapInfo.selectElement)
             return null;
         const status = editMapInfo.selectElement?.status;
-        const startTimestamp = editMapInfo.selectElement?.start_timestamp;
-        const endTimestamp = editMapInfo.selectElement?.end_timestamp;
+        const start_timestamp = editMapInfo.selectElement?.start_timestamp;
+        const end_timestamp = editMapInfo.selectElement?.end_timestamp;
         return {
             status,
-            startTimestamp,
-            endTimestamp,
+            start_timestamp,
+            end_timestamp,
         };
     }, [editMapInfo.selectElement]);
     const sizeValue = React.useMemo(() => {
@@ -20699,7 +21314,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,
@@ -20708,18 +21323,18 @@ const ObstacleInfo = ({ onHandleDelete }) => {
                                 name: name,
                             },
                         });
-                    } }) }), jsxRuntime.jsx("div", { className: styles$9.timePeriod, children: jsxRuntime.jsx(TimePeriod, { value: timePeriodValue, onChange: (value) => {
+                    } }) }), jsxRuntime.jsx("div", { className: styles$9.border }), jsxRuntime.jsx("div", { className: styles$9.timePeriod, children: jsxRuntime.jsx(TimePeriod, { value: timePeriodValue, onChange: (value) => {
                         setEditMapInfo({
                             ...editMapInfo,
                             isShowDrag: editMapInfo?.isShowDrag || false,
                             selectElement: {
                                 ...editMapInfo.selectElement,
                                 status: value.status,
-                                start_timestamp: value.startTimestamp,
-                                end_timestamp: value.endTimestamp,
+                                start_timestamp: value.start_timestamp,
+                                end_timestamp: value.end_timestamp,
                             },
                         });
-                    } }) }), jsxRuntime.jsxs("div", { className: styles$9.areaInfo, children: [jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Area:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue?.area })] }), jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Perimeter:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue?.perimeter })] })] })] }));
+                    } }) }), jsxRuntime.jsx("div", { className: styles$9.border }), jsxRuntime.jsxs("div", { className: styles$9.areaInfo, children: [jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Area:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue?.area })] }), jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Perimeter:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue?.perimeter })] })] })] }));
 };
 
 const DoodleInfo = ({ onHandleDelete }) => {
@@ -20741,31 +21356,37 @@ const DoodleInfo = ({ onHandleDelete }) => {
         const create_ts = editMapInfo?.selectElement?.create_ts;
         const expiration_ts = editMapInfo.selectElement.expiration_ts;
         const diff = expiration_ts - create_ts;
-        const day = Math.floor(diff / (60 * 60 * 24 * 1000));
-        console.log('create_ts->', create_ts, expiration_ts, day);
+        const day = Math.floor(diff / (60 * 60 * 24));
         return {
             day: day,
         };
     }, [editMapInfo?.selectElement]);
+    const remainDay = React.useMemo(() => {
+        if (!editMapInfo.selectElement)
+            return null;
+        const expiration_ts = editMapInfo.selectElement.expiration_ts;
+        const diff = expiration_ts - Date.now() / 1000;
+        return Math.floor(diff / (60 * 60 * 24));
+    }, [editMapInfo?.selectElement]);
     const sizeValue = React.useMemo(() => {
         if (!editMapInfo.selectElement || !editMapInfo.selectElement.svg)
             return '';
         const svg = editMapInfo.selectElement?.svg;
+        const scale = editMapInfo.selectElement.scale;
         const parseSvg = SvgParserNative.parseSvg(svg);
-        const width = parseSvg.width / SCALE_FACTOR;
-        const height = parseSvg.height / SCALE_FACTOR;
-        console.log('parseSvg->', parseSvg);
-        return `${width} m x ${height} m`;
+        const width = (parseSvg.width * scale) / SCALE_FACTOR;
+        const height = (parseSvg.height * scale) / SCALE_FACTOR;
+        console.log('parseSvg->', editMapInfo, parseSvg);
+        return `${width.toFixed(1)} m x ${height.toFixed(1)} m`;
     }, [editMapInfo.selectElement]);
     const handleChange = React.useCallback((day) => {
-        const lastTime = Date.now() - editMapInfo.selectElement.create_ts;
         setEditMapInfo((pre) => {
-            console.log('expiration_ts->', lastTime, day, lastTime + day * 24 * 60 * 60 * 1000);
             return {
                 ...pre,
                 selectElement: {
                     ...pre.selectElement,
-                    expiration_ts: Date.now() + lastTime + day * 24 * 60 * 60 * 1000,
+                    create_ts: Date.now() / 1000,
+                    expiration_ts: Date.now() / 1000 + day * 24 * 60 * 60,
                 },
             };
         });
@@ -20773,7 +21394,7 @@ const DoodleInfo = ({ onHandleDelete }) => {
     console.log('doodleInfo->', doodleInfo);
     return (jsxRuntime.jsxs("div", { className: styles$9.doodleInfo, children: [jsxRuntime.jsx(Header, { handleDelete: () => {
                     onHandleDelete();
-                }, handleFocus: () => { }, type: editMapInfo.elementType }), isCreate ? (jsxRuntime.jsx(Item, { children: jsxRuntime.jsxs("div", { className: styles$9.time, children: [jsxRuntime.jsxs("div", { className: styles$9.exist, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Graph maintenance time" }), jsxRuntime.jsx("div", { className: styles$9.value, children: jsxRuntime.jsx(antd.Select, { defaultValue: doodleInfo?.day, style: { width: 80 }, onChange: (value) => handleChange(value), options: options }) })] }), doodleInfo?.day >= 14 && (jsxRuntime.jsx("div", { className: styles$9.tip, children: "* If the doodle lasts over 14 days, the grass may grow too tall for the mower to mow later." }))] }) })) : (jsxRuntime.jsxs("div", { className: styles$9.areaInfo, children: [jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Graph maintenance time:" }), jsxRuntime.jsxs("div", { className: styles$9.value, children: [doodleInfo?.day, " day"] })] }), jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Size:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue })] })] }))] }));
+                }, handleFocus: () => { }, type: editMapInfo.elementType }), jsxRuntime.jsx("div", { className: styles$9.border }), isCreate ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Item, { children: jsxRuntime.jsxs("div", { className: styles$9.time, children: [jsxRuntime.jsxs("div", { className: styles$9.exist, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Preserve doodle for" }), jsxRuntime.jsx("div", { className: styles$9.value, children: jsxRuntime.jsx(antd.Select, { defaultValue: doodleInfo?.day, style: { width: 80 }, onChange: (value) => handleChange(value), options: options }) })] }), doodleInfo?.day >= 14 && (jsxRuntime.jsx("div", { className: styles$9.tip, children: "* If the doodle lasts over 14 days, the grass may grow too tall for the mower to mow later." }))] }) }), jsxRuntime.jsx("div", { className: styles$9.border }), jsxRuntime.jsx("div", { className: styles$9.areaInfo, children: jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Size:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue })] }) })] })) : (jsxRuntime.jsxs("div", { className: styles$9.areaInfo, children: [jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Remaining time:" }), jsxRuntime.jsxs("div", { className: styles$9.value, children: [remainDay, " day"] })] }), jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Size:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue })] })] }))] }));
 };
 
 const VisionOffInfo = ({ onHandleDelete }) => {
@@ -20789,7 +21410,7 @@ const VisionOffInfo = ({ onHandleDelete }) => {
     }, [editMapInfo.selectElement]);
     return (jsxRuntime.jsxs("div", { className: "visionOffInfo", children: [jsxRuntime.jsx(Header, { handleDelete: () => {
                     onHandleDelete?.();
-                }, handleFocus: () => { }, type: DataType.VISION_OFF }), jsxRuntime.jsx("div", { className: styles$9.areaInfo, children: jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Size:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue })] }) })] }));
+                }, handleFocus: () => { }, type: DataType.VISION_OFF }), jsxRuntime.jsx("div", { className: styles$9.border }), jsxRuntime.jsx("div", { className: styles$9.areaInfo, children: jsxRuntime.jsxs("div", { className: styles$9.areaItem, children: [jsxRuntime.jsx("div", { className: styles$9.label, children: "Size:" }), jsxRuntime.jsx("div", { className: styles$9.value, children: sizeValue })] }) })] }));
 };
 
 var _path$2, _path2$1;
@@ -20849,7 +21470,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 +21485,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;
@@ -20923,8 +21552,8 @@ const HandleElementInfo = () => {
             data.obstacle = {
                 name: element?.name,
                 status: element?.status || 1,
-                end_timestamp: element?.end_timestamp || 1758870283,
-                start_timestamp: element?.start_timestamp || 1768870283,
+                end_timestamp: element?.end_timestamp,
+                start_timestamp: element?.start_timestamp,
                 points: restorePointsFormat(element.points),
             };
             if (element?.id) {
@@ -20952,6 +21581,12 @@ const HandleElementInfo = () => {
         const params = renderElementData(editMapInfo?.selectElement);
         const isObstacle = editMapInfo?.selectElement?.type === DataType.OBSTACLE;
         const hasNotEnoughPoints = params?.obstacle?.points?.length < 3;
+        const isDoodle = editMapInfo?.selectElement?.type === DataType.DOODLE;
+        const doodleResult = checkDoodle();
+        if (isDoodle && !doodleResult?.isValid) {
+            antd.message.error('Keep more distance from boundaries, off-limit island and other doodles');
+            return;
+        }
         if (isObstacle && hasNotEnoughPoints) {
             antd.message.error('Save failed, please draw a closed shape');
             return;
@@ -20983,16 +21618,27 @@ const HandleElementInfo = () => {
                 antd.message.error('Save failed, please try again');
             });
         }
-    }, [editMapInfo.selectElement]);
+    }, [editMapInfo.selectElement, onUpdateBoundary, onHandleCompleteRecord]);
     const handleCancel = React.useCallback(() => {
-        onHandleStopRecord?.()?.then(() => {
-            setEditMapInfo({
-                ...editMapInfo,
-                createMode: null,
-                elementType: null,
-                selectElement: null,
-                isShowDrag: false,
-            });
+        const name = DATE_TYPE_MAP.find((item) => item.type === editMapInfo.elementType)?.label;
+        antd.Modal.confirm({
+            icon: null,
+            centered: true,
+            title: 'Quit editing',
+            content: `Changes you made will not be saved. Are you sure you want to quit editing the ${name}?`,
+            okText: 'Quit',
+            cancelText: 'Keep editing',
+            onOk: () => {
+                onHandleStopRecord?.()?.then(() => {
+                    setEditMapInfo({
+                        ...editMapInfo,
+                        createMode: null,
+                        elementType: null,
+                        selectElement: null,
+                        isShowDrag: false,
+                    });
+                });
+            },
         });
     }, [editMapInfo]);
     const handleDelete = React.useCallback(() => {
@@ -21037,26 +21683,12 @@ const HandleElementInfo = () => {
             },
         });
     }, [editMapInfo?.selectElement, onHandleDeleteElement, onHandleStopRecord]);
-    const checkDisabled = React.useCallback(() => {
-        if (editMapInfo.elementType === DataType.DOODLE) {
-            const result = checkDoodle();
-            return !result?.isValid;
-        }
-        return false;
-    }, [checkDoodle, editMapInfo]);
     if (!editMapInfo.selectElement)
         return null;
     console.log('handleElementInfo->', editMapInfo, currentType);
-    return (jsxRuntime.jsxs("div", { className: styles$9.handleElementInfo, children: [editMapInfo?.elementType !== DataType.BOUNDARY ? (jsxRuntime.jsxs("div", { className: styles$9.undoAndRedo, children: [jsxRuntime.jsx("div", { className: classNames(styles$9.undo, { [styles$9.disabled]: isUndoDisabled }), onClick: handleUndo, children: jsxRuntime.jsx(SvgUndo, {}) }), jsxRuntime.jsx("div", { className: classNames(styles$9.redo, { [styles$9.disabled]: idRedoDisabled }), onClick: handleRedo, children: jsxRuntime.jsx(SvgRedo, {}) })] })) : null, editMapInfo?.elementType === DataType.BOUNDARY && (jsxRuntime.jsx(BoundaryInfo, { onHandleDelete: handleDelete })), editMapInfo?.elementType === DataType.OBSTACLE && (jsxRuntime.jsx(ObstacleInfo, { onHandleDelete: handleDelete })), editMapInfo?.elementType === DataType.DOODLE && jsxRuntime.jsx(DoodleInfo, { onHandleDelete: handleDelete }), editMapInfo?.elementType === DataType.VISION_OFF && (jsxRuntime.jsx(VisionOffInfo, { onHandleDelete: handleDelete })), jsxRuntime.jsxs("div", { className: styles$9.handle, children: [jsxRuntime.jsx(antd.Button, { disabled: checkDisabled(), variant: "solid", color: "primary", onClick: handleSave, children: "Save & Done" }), jsxRuntime.jsx(antd.Button, { variant: "outlined", color: "default", onClick: () => {
-                            handleCancel();
-                            setEditMapInfo({
-                                createMode: null,
-                                editMap: false,
-                                elementType: undefined,
-                                selectElement: null,
-                                isShowDrag: false,
-                            });
-                        }, children: "Cancel" })] })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$9.handleElementInfo, children: [editMapInfo?.elementType !== DataType.BOUNDARY ? (jsxRuntime.jsxs("div", { className: styles$9.undoAndRedo, children: [jsxRuntime.jsx("div", { className: classNames(styles$9.undo, { [styles$9.disabled]: isUndoDisabled }), onClick: handleUndo, children: jsxRuntime.jsx(SvgUndo, {}) }), jsxRuntime.jsx("div", { className: classNames(styles$9.redo, { [styles$9.disabled]: idRedoDisabled }), onClick: handleRedo, children: jsxRuntime.jsx(SvgRedo, {}) })] })) : null, editMapInfo?.elementType === DataType.BOUNDARY && (jsxRuntime.jsx(BoundaryInfo, { onHandleDelete: handleDelete })), editMapInfo?.elementType === DataType.OBSTACLE && (jsxRuntime.jsx(ObstacleInfo, { onHandleDelete: handleDelete })), editMapInfo?.elementType === DataType.DOODLE && jsxRuntime.jsx(DoodleInfo, { onHandleDelete: handleDelete }), editMapInfo?.elementType === DataType.VISION_OFF && (jsxRuntime.jsx(VisionOffInfo, { onHandleDelete: handleDelete })), jsxRuntime.jsx("div", { className: styles$9.border }), jsxRuntime.jsx("div", { className: styles$9.handle, children: jsxRuntime.jsxs(antd.Space, { size: 12, children: [jsxRuntime.jsx(antd.Button, { variant: "outlined", color: "default", onClick: () => {
+                                handleCancel();
+                            }, children: "Cancel" }), jsxRuntime.jsx(antd.Button, { variant: "solid", color: "primary", onClick: handleSave, children: "Save" })] }) })] }));
 };
 
 var _path;
@@ -21182,7 +21814,7 @@ const defaultMapConfig = DEFAULT_STYLES;
 // 地图渲染器组件
 const MowerMapRenderer = React.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, onClickEvent, }, 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, onHandleEvent, }, ref) => {
     const [currentError, setCurrentError] = React.useState(null);
     const overlayRef = React.useRef(null);
     // const mapRef = useMap();
@@ -21197,6 +21829,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({
@@ -21235,7 +21870,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
             onSaveMap,
             onHandleDeleteElement,
             onUpdateBoundary,
-            onClickEvent,
+            onHandleEvent,
         };
     }, [
         minDistance,
@@ -21247,7 +21882,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         onSaveBoundaryData,
         onSaveMap,
         onUpdateBoundary,
-        onClickEvent,
+        onHandleEvent,
     ]);
     // 合并配置
     const mergedMapConfig = React.useMemo(() => {
@@ -21280,6 +21915,8 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
             mapJson,
             drag: defaultTransform,
             mapRef,
+            overlayScale,
+            doodleList,
         };
     }, [
         sn,
@@ -21293,6 +21930,8 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         mapJson,
         defaultTransform,
         mapRef,
+        overlayScale,
+        doodleList,
     ]);
     // console.log('svgElementDatas->', svgElementDatas, unStructMapData, commonValue);
     // 处理地图分区边界
@@ -21311,7 +21950,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 +22162,46 @@ 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); // 负数实现反向缩放
+            if (scale < 1) {
+                setOverlayScale(1);
+            }
+            else if (scale > 4) {
+                setOverlayScale(4);
+            }
+            else {
+                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;
@@ -21596,6 +22274,8 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         addHistory: (history) => svgEditMapRef.current?.addHistory(history),
         // 添加doodle
         addDoodle: (doodle) => svgEditMapRef.current?.addDoodle(doodle),
+        // 检查doodle
+        checkDoodle: () => svgEditMapRef.current?.checkDoodle?.(),
     }));
     /**
      * 根据割草机的位置更新路径
@@ -21620,7 +22300,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 +22308,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
 });
 MowerMapRenderer.displayName = 'MowerMapRenderer';
 
+exports.BoundarySvgRender = BoundarySvgRender;
 exports.MapDataProcessor = MapDataProcessor;
 exports.MowerMapRenderer = MowerMapRenderer;
 exports.PathDataProcessor = PathDataProcessor;