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

package/dist/index.esm.js

@@ -2,7 +2,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { memo, useMemo, useEffect, useState, useRef, useCallback, createContext, useContext, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { Modal, message, Popover, Input, Switch, Slider, Radio, Button, DatePicker, Select } from 'antd';
 
 /**
  * 常量和枚举类型定义
@@ -190,14 +189,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.status = originalData?.status ?? 1;
+        this.start_timestamp = originalData?.start_timestamp;
+        this.end_timestamp = originalData?.end_timestamp;
         this.name = originalData?.name || 'Obstacle';
         this.style = style;
     }
@@ -293,7 +291,7 @@ function initObstacle() {
     const obstacle = {
         id: null,
         area: 0,
-        name: 'Obstacle',
+        name: 'off-imit island',
         status: 1,
         end_timestamp: 0,
         start_timestamp: 0,
@@ -329,8 +327,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);
@@ -616,7 +614,7 @@ class UnifiedMapDataProcessor {
                     continue;
                 }
                 const obstacleData = new ObstacleData(element, 150, // 高层级
-                false, this.mapConfig.obstacle || {});
+                this.mapConfig.obstacle || {});
                 obstacleDataList.push(obstacleData);
             }
             catch (error) {
@@ -746,7 +744,7 @@ class UnifiedMapDataProcessor {
                         continue;
                     }
                     const obstacleData = new ObstacleData(element, 150, // 高层级
-                    true, this.mapConfig.obstacle || {});
+                    this.mapConfig.obstacle || {});
                     obstacleDataList.push(obstacleData);
                 }
             }
@@ -1316,60 +1314,6 @@ function calculatePerpendicularFoot(point, lineStart, lineEnd) {
 function isFootOnSegment(foot) {
     return foot.param >= 0 && foot.param <= 1;
 }
-/**
- * 计算多边形的面积和周长
- * @param coordinates 多边形顶点坐标数组 [[x1, y1], [x2, y2], ...]
- * @returns 包含面积和周长的对象
- */
-function calculatePolygonAreaAndPerimeter(coordinates) {
-    if (!coordinates || coordinates.length < 3) {
-        return { area: 0, perimeter: 0 };
-    }
-    let area = 0;
-    let perimeter = 0;
-    const n = coordinates.length;
-    // 使用鞋带公式（Shoelace formula）计算面积
-    for (let i = 0; i < n; i++) {
-        const j = (i + 1) % n;
-        const [x1, y1] = coordinates[i];
-        const [x2, y2] = coordinates[j];
-        // 面积计算（鞋带公式）
-        area += x1 * y2 - x2 * y1;
-        // 周长计算（累加每条边的长度）
-        const dx = x2 - x1;
-        const dy = y2 - y1;
-        perimeter += Math.sqrt(dx * dx + dy * dy);
-    }
-    // 面积取绝对值并除以2
-    area = Math.abs(area) / 2;
-    return {
-        area,
-        perimeter
-    };
-}
-/**
- * 计算矩形的长和宽
- * @param points 矩形的4个顶点坐标 [[x1, y1], [x2, y2], [x3, y3], [x4, y4]]
- * @returns 包含宽和高的数组 [width, height]
- */
-function calculateRectangleDimensions(points) {
-    if (!points || points.length !== 4) {
-        return [0, 0];
-    }
-    // 计算每条边的长度
-    const sides = [
-        Math.sqrt(Math.pow(points[1][0] - points[0][0], 2) + Math.pow(points[1][1] - points[0][1], 2)), // 0->1
-        Math.sqrt(Math.pow(points[2][0] - points[1][0], 2) + Math.pow(points[2][1] - points[1][1], 2)), // 1->2  
-        Math.sqrt(Math.pow(points[3][0] - points[2][0], 2) + Math.pow(points[3][1] - points[2][1], 2)), // 2->3
-        Math.sqrt(Math.pow(points[0][0] - points[3][0], 2) + Math.pow(points[0][1] - points[3][1], 2)) // 3->0
-    ];
-    // 矩形的对边应该相等，所以我们取相邻的两条边作为宽和高
-    // sides[0] 和 sides[2] 是对边，sides[1] 和 sides[3] 是对边
-    const width = sides[0]; // 第一条边
-    const height = sides[1]; // 相邻的第二条边
-    // 返回宽和高的数组 [width, height] - 小的作为宽，大的作为高
-    return width <= height ? [width, height] : [height, width];
-}
 
 /**
  * 按Python逻辑创建路径段：根据连续的两点之间的关系确定线段类型
@@ -2117,52 +2061,6 @@ function convertHeightsetToParams(value) {
         cuttingHeight: value,
     };
 }
-function getDefaultAngle(recBaseAngle) {
-    if (recBaseAngle > -15 && recBaseAngle <= 15) {
-        return recBaseAngle;
-    }
-    else if (recBaseAngle > 15 && recBaseAngle <= 45) {
-        return recBaseAngle - 30;
-    }
-    else if (recBaseAngle > 45 && recBaseAngle <= 75) {
-        return recBaseAngle - 60;
-    }
-    else if (recBaseAngle > 75 && recBaseAngle <= 90) {
-        return recBaseAngle - 90;
-    }
-    else if (recBaseAngle > -90 && recBaseAngle <= -75) {
-        return recBaseAngle + 90;
-    }
-    else if (recBaseAngle > -75 && recBaseAngle <= -45) {
-        return recBaseAngle + 60;
-    }
-    else if (recBaseAngle > -45 && recBaseAngle <= -15) {
-        return recBaseAngle + 30;
-    }
-}
-function getSelectAngles(value) {
-    const A = 1 << 0; // bit0 = 1
-    const B = 1 << 1; // bit1 = 2
-    const C = 1 << 2; // bit2 = 4
-    const D = 1 << 3; // bit3 = 8
-    const E = 1 << 4; // bit4 = 16
-    const F = 1 << 5; // bit5 = 32
-    const directions = [];
-    // 检查每个位标志是否被设置
-    if (value & A)
-        directions.push(0, 180);
-    if (value & B)
-        directions.push(30, -150);
-    if (value & C)
-        directions.push(60, -120);
-    if (value & D)
-        directions.push(90, -90);
-    if (value & E)
-        directions.push(120, -60);
-    if (value & F)
-        directions.push(150, -30);
-    return directions;
-}
 
 /** Detect free variable `global` from Node.js. */
 var freeGlobal$2 = typeof global == 'object' && global && global.Object === Object && global;
@@ -3051,7 +2949,7 @@ function copyObject(source, props, object, customizer) {
 }
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax$1 = Math.max;
+var nativeMax$2 = Math.max;
 
 /**
  * A specialized version of `baseRest` which transforms the rest array.
@@ -3063,11 +2961,11 @@ var nativeMax$1 = Math.max;
  * @returns {Function} Returns the new function.
  */
 function overRest(func, start, transform) {
-  start = nativeMax$1(start === undefined ? (func.length - 1) : start, 0);
+  start = nativeMax$2(start === undefined ? (func.length - 1) : start, 0);
   return function() {
     var args = arguments,
         index = -1,
-        length = nativeMax$1(args.length - start, 0),
+        length = nativeMax$2(args.length - start, 0),
         array = Array(length);
 
     while (++index < length) {
@@ -4069,7 +3967,7 @@ function isPlainObject(value) {
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
 var nativeIsFinite = root$3.isFinite,
-    nativeMin$1 = Math.min;
+    nativeMin$2 = Math.min;
 
 /**
  * Creates a function like `_.round`.
@@ -4082,7 +3980,7 @@ function createRound(methodName) {
   var func = Math[methodName];
   return function(number, precision) {
     number = toNumber$2(number);
-    precision = precision == null ? 0 : nativeMin$1(toInteger(precision), 292);
+    precision = precision == null ? 0 : nativeMin$2(toInteger(precision), 292);
     if (precision && nativeIsFinite(number)) {
       // Shift with exponential notation to avoid floating-point issues.
       // See [MDN](https://mdn.io/round#Examples) for more details.
@@ -4305,6 +4203,212 @@ function createBaseFor(fromRight) {
  */
 var baseFor = createBaseFor();
 
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now$2 = function() {
+  return root$3.Date.now();
+};
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT$3 = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax$1 = Math.max,
+    nativeMin$1 = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce$2(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT$3);
+  }
+  wait = toNumber$2(wait) || 0;
+  if (isObject$4(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax$1(toNumber$2(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin$1(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now$2();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now$2());
+  }
+
+  function debounced() {
+    var time = now$2(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
 /**
  * This function is like `assignValue` except that it doesn't assign
  * `undefined` values.
@@ -4589,48 +4693,113 @@ var merge$1 = createAssigner(function(object, source, srcIndex) {
  */
 var round = createRound('round');
 
-/**
- * 工具模块类型定义
- */
-/**
- * 路径段类型枚举
- */
-var PathSegmentType;
-(function (PathSegmentType) {
-    PathSegmentType["EDGE"] = "edge";
-    PathSegmentType["MOWING"] = "mowing";
-    PathSegmentType["TRANS"] = "trans";
-})(PathSegmentType || (PathSegmentType = {}));
-/**
- * 单位类型枚举
- */
-var UnitsType;
-(function (UnitsType) {
-    UnitsType["Metric"] = "Metric";
-    UnitsType["Imperial"] = "Imperial";
-})(UnitsType || (UnitsType = {}));
-/**
- * 面积单位类型枚举
- */
-var UnitsAreaType;
-(function (UnitsAreaType) {
-    UnitsAreaType["SQUARE_METER"] = "m\u00B2";
-    UnitsAreaType["SQUARE_FOOT"] = "ft\u00B2";
-    UnitsAreaType["ACRE"] = "ac";
-})(UnitsAreaType || (UnitsAreaType = {}));
-/**
- * 长度单位类型枚举
- */
-var UnitsLengthType;
-(function (UnitsLengthType) {
-    UnitsLengthType["METER"] = "m";
-    UnitsLengthType["FOOT"] = "ft";
-})(UnitsLengthType || (UnitsLengthType = {}));
+/** Error message constants. */
+var FUNC_ERROR_TEXT$2 = 'Expected a function';
 
 /**
- * 默认航向相对于canvas的偏移角度: 航向默认是东
- */
-const DIRECTION_DEGREE = 90; //正东相当于canvas的正北顺时针旋转90度
+ * 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
+  });
+}
+
+/**
+ * 工具模块类型定义
+ */
+/**
+ * 路径段类型枚举
+ */
+var PathSegmentType;
+(function (PathSegmentType) {
+    PathSegmentType["EDGE"] = "edge";
+    PathSegmentType["MOWING"] = "mowing";
+    PathSegmentType["TRANS"] = "trans";
+})(PathSegmentType || (PathSegmentType = {}));
+/**
+ * 单位类型枚举
+ */
+var UnitsType;
+(function (UnitsType) {
+    UnitsType["Metric"] = "Metric";
+    UnitsType["Imperial"] = "Imperial";
+})(UnitsType || (UnitsType = {}));
+/**
+ * 面积单位类型枚举
+ */
+var UnitsAreaType;
+(function (UnitsAreaType) {
+    UnitsAreaType["SQUARE_METER"] = "m\u00B2";
+    UnitsAreaType["SQUARE_FOOT"] = "ft\u00B2";
+    UnitsAreaType["ACRE"] = "ac";
+})(UnitsAreaType || (UnitsAreaType = {}));
+/**
+ * 长度单位类型枚举
+ */
+var UnitsLengthType;
+(function (UnitsLengthType) {
+    UnitsLengthType["METER"] = "m";
+    UnitsLengthType["FOOT"] = "ft";
+})(UnitsLengthType || (UnitsLengthType = {}));
+
+/**
+ * 默认航向相对于canvas的偏移角度: 航向默认是东
+ */
+const DIRECTION_DEGREE = 90; //正东相当于canvas的正北顺时针旋转90度
 /**
  * Convert meters to feet
  * 1 meter = 3.28083989501312 feet
@@ -4804,18 +4973,6 @@ function convertAreaByUnits(area, type = UnitsType.Metric) {
         unit: UnitsAreaType.ACRE,
     };
 }
-// 割草高度的转化
-function convertCutHeightFormatted(value) {
-    return (Math.ceil(value * 0.03937 * 10) * 0.1).toFixed(1);
-}
-function getHeightUnit(unit) {
-    return unit === UnitsType.Metric ? 'mm' : 'inch';
-}
-function generateHeightStr(value, unit, hasUnit = false) {
-    const unitStr = getHeightUnit(unit);
-    const height = unit === UnitsType.Metric ? value : convertCutHeightFormatted(value || 0);
-    return hasUnit ? `${height} ${unitStr}` : value;
-}
 
 /**
  * 日期时间格式化工具函数
@@ -8422,12 +8579,12 @@ 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 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);
+var css_248z$6 = ".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$6 = {"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$6);
 
 const RotateHandle = ({ onRotateStart, isRotating }) => {
-    return (jsx("div", { className: styles$i.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
+    return (jsx("div", { className: styles$6.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
 };
 
 /**
@@ -8499,13 +8656,15 @@ const DragHandle = ({ onDragStart, isDragging }) => {
     if (!isMobileDevice()) {
         return null;
     }
-    return (jsx("div", { className: styles$i.move, onMouseDown: (e) => {
+    return (jsx("div", { className: styles$6.move, onMouseDown: (e) => {
             console.log('down');
             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, }) => {
@@ -8531,7 +8690,7 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
     if (!isDragMap) {
         return null;
     }
-    return (jsxs("div", { ref: containerRef, className: styles$i.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$i.border }), jsx(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsx("div", { className: styles$i.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
+    return (jsxs("div", { ref: containerRef, className: styles$6.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$6.border }), jsx(RotateHandle, { onRotateStart: handleRotateStart, isRotating: isRotating }), jsx("div", { className: styles$6.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
 };
 
 /**
@@ -12242,11 +12401,74 @@ 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');
@@ -12254,7 +12476,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());
@@ -12265,84 +12487,191 @@ class ObstacleLayer extends BaseLayer {
         polygon.classList.add('vector-obstacle');
         svgGroup.appendChild(polygon);
     }
-}
-
-var chargingPileImage = "data:image/png;base64,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";
-
-/**
- * 充电桩图层
- * 专门处理充电桩元素的渲染
- */
-class ChargingPileLayer extends BaseLayer {
-    constructor() {
-        super();
-        this.level = 8; // 中等层级
-        this.type = LAYER_DEFAULT_TYPE.CHARGING_PILE;
-    }
     /**
-     * SVG渲染方法
+     * 创建直接路径（type=2）
      */
-    drawSVG(svgGroup) {
-        if (!this.visible || this.elements.length === 0) {
-            return;
-        }
-        // 只渲染充电桩类型的元素
-        for (const element of this.elements) {
-            if (element.type === 'charging_pile') {
-                this.renderChargingPile(svgGroup, element);
+    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);
     }
     /**
-     * 渲染充电桩元素
-     */
-    renderChargingPile(svgGroup, element) {
-        const { coordinates, style } = element;
-        if (coordinates.length === 0)
-            return;
-        const center = coordinates[0];
-        const size = style.radius ? style.radius * 2 : 55; // 默认55px大小
-        const direction = element.originalData?.direction || 0;
-        // 将弧度转换为角度
-        const angle = (direction * 180) / Math.PI;
-        const rotationDegree = 270 - angle; // 坐标系转换
-        const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-        // 图片居中定位
-        const x = center[0];
-        const y = center[1];
-        image.setAttribute('x', x.toString());
-        image.setAttribute('y', y.toString());
-        image.setAttribute('width', `${size}px`);
-        image.setAttribute('height', `${size}px`);
-        image.setAttribute('href', chargingPileImage);
-        image.setAttribute('opacity', '0'); // 初始透明
-        // 添加SVG原生动画，传入默认角度
-        this.addChargingPileAnimation(image, center, rotationDegree);
-        image.classList.add('vector-charging-pile');
-        svgGroup.appendChild(image);
-    }
-    /**
-     * 添加充电桩SVG原生动画
+     * 使用PathMeasure逻辑创建平行路径（type=1）
      */
-    addChargingPileAnimation(image, center, defaultAngle) {
-        // 透明度动画 - 先显示出来
-        const animateOpacity = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
-        animateOpacity.setAttribute('attributeName', 'opacity');
-        animateOpacity.setAttribute('values', '0;1');
-        animateOpacity.setAttribute('dur', '0.5s');
-        animateOpacity.setAttribute('fill', 'freeze');
-        image.appendChild(animateOpacity);
-        // 旋转动画 - 从180度旋转到默认角度
-        const animateTransform = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
-        animateTransform.setAttribute('attributeName', 'transform');
-        animateTransform.setAttribute('type', 'rotate');
-        animateTransform.setAttribute('values', `${180 + defaultAngle} ${center[0]} ${center[1]};${defaultAngle} ${center[0]} ${center[1]}`);
-        animateTransform.setAttribute('dur', '1s');
-        animateTransform.setAttribute('repeatCount', '1'); // 只播放一次
-        animateTransform.setAttribute('begin', '0.5s'); // 延迟0.5秒开始，等透明度动画完成
-        animateTransform.setAttribute('fill', 'freeze'); // 保持最终状态
-        image.appendChild(animateTransform);
-    }
+    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,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";
+
+/**
+ * 充电桩图层
+ * 专门处理充电桩元素的渲染
+ */
+class ChargingPileLayer extends BaseLayer {
+    constructor() {
+        super();
+        this.level = 8; // 中等层级
+        this.type = LAYER_DEFAULT_TYPE.CHARGING_PILE;
+    }
+    /**
+     * SVG渲染方法
+     */
+    drawSVG(svgGroup) {
+        if (!this.visible || this.elements.length === 0) {
+            return;
+        }
+        // 只渲染充电桩类型的元素
+        for (const element of this.elements) {
+            if (element.type === 'charging_pile') {
+                this.renderChargingPile(svgGroup, element);
+            }
+        }
+    }
+    /**
+     * 渲染充电桩元素
+     */
+    renderChargingPile(svgGroup, element) {
+        const { coordinates, style } = element;
+        if (coordinates.length === 0)
+            return;
+        const center = coordinates[0];
+        const size = style.radius ? style.radius * 2 : 55; // 默认55px大小
+        const direction = element.originalData?.direction || 0;
+        // 将弧度转换为角度
+        const angle = (direction * 180) / Math.PI;
+        const rotationDegree = 270 - angle; // 坐标系转换
+        const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        // 图片居中定位
+        const x = center[0];
+        const y = center[1];
+        image.setAttribute('x', x.toString());
+        image.setAttribute('y', y.toString());
+        image.setAttribute('width', `${size}px`);
+        image.setAttribute('height', `${size}px`);
+        image.setAttribute('href', chargingPileImage);
+        image.setAttribute('opacity', '0'); // 初始透明
+        // 添加SVG原生动画，传入默认角度
+        this.addChargingPileAnimation(image, center, rotationDegree);
+        image.classList.add('vector-charging-pile');
+        svgGroup.appendChild(image);
+    }
+    /**
+     * 添加充电桩SVG原生动画
+     */
+    addChargingPileAnimation(image, center, defaultAngle) {
+        // 透明度动画 - 先显示出来
+        const animateOpacity = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
+        animateOpacity.setAttribute('attributeName', 'opacity');
+        animateOpacity.setAttribute('values', '0;1');
+        animateOpacity.setAttribute('dur', '0.5s');
+        animateOpacity.setAttribute('fill', 'freeze');
+        image.appendChild(animateOpacity);
+        // 旋转动画 - 从180度旋转到默认角度
+        const animateTransform = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
+        animateTransform.setAttribute('attributeName', 'transform');
+        animateTransform.setAttribute('type', 'rotate');
+        animateTransform.setAttribute('values', `${180 + defaultAngle} ${center[0]} ${center[1]};${defaultAngle} ${center[0]} ${center[1]}`);
+        animateTransform.setAttribute('dur', '1s');
+        animateTransform.setAttribute('repeatCount', '1'); // 只播放一次
+        animateTransform.setAttribute('begin', '0.5s'); // 延迟0.5秒开始，等透明度动画完成
+        animateTransform.setAttribute('fill', 'freeze'); // 保持最终状态
+        image.appendChild(animateTransform);
+    }
 }
 
 /**
@@ -13726,6 +14055,7 @@ const CommonContext = createContext({
     mapRef: null,
     globalHeight: 0,
     heightOptions: [],
+    overlayScale: 1,
 });
 const CommonContextProvider = CommonContext.Provider;
 const useCommonContext = () => useContext(CommonContext);
@@ -14068,7 +14398,6 @@ const SvgMapComponent = forwardRef(({ editMap, rotate, mapData, pathData, modelT
     ]);
     // 初始化 SVG 地图
     useEffect(() => {
-        console.log('mapData svgMapView ->', containerRef.current, svgMapView, mapData, pathData);
         if (containerRef.current && mapData && !svgMapView) {
             console.log('Initializing SVG map view, containerRef->', containerRef.current);
             initializeSvgMapView(containerRef.current);
@@ -14078,15 +14407,15 @@ const SvgMapComponent = forwardRef(({ editMap, rotate, mapData, pathData, modelT
             width: '100%',
             height: '100%',
             position: 'relative',
-            visibility: editMap ? 'hidden' : 'visible',
+            display: editMap ? 'none' : 'block',
         } }));
 });
 // 设置显示名称以便调试
 SvgMapComponent.displayName = 'SvgMapComponent';
 
-var css_248z$h = ".index-module_mowerPosition__yLpIU {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n}";
-var styles$h = {"mowerPosition":"index-module_mowerPosition__yLpIU"};
-styleInject(css_248z$h);
+var css_248z$5 = ".index-module_mowerPosition__yLpIU {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n}";
+var styles$5 = {"mowerPosition":"index-module_mowerPosition__yLpIU"};
+styleInject(css_248z$5);
 
 const usePosition = ({ mowerPositionData, viewBox, modelType, hasEdger, mapData, realTimeData, onMowingPositionChange, }) => {
     // DOM 元素引用，用于直接操作
@@ -14312,7 +14641,7 @@ const MowerPosition = React__default.memo(({ editMap, mowerPositionData, viewBox
         pointerEvents: 'none',
         zIndex: 1000,
     }), []);
-    return (jsx("div", { className: styles$h.mowerPosition, style: containerStyle, children: jsx("div", { ref: elementRef, className: "mower-position", style: {
+    return (jsx("div", { className: styles$5.mowerPosition, style: containerStyle, children: jsx("div", { ref: elementRef, className: "mower-position", style: {
                 position: 'absolute',
                 width: 30,
                 height: 30,
@@ -14381,9 +14710,9 @@ const CharginPile = React__default.memo(({ mapData, mapConfig = {}, viewBox, rot
             }, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }, `pile-${idx}`))) }));
 });
 
-var css_248z$g = ".index-module_container__7IatW {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_boundaryLabel__GDHFn {\n  position: absolute;\n  background-color: rgba(30, 30, 31, 0.6);\n  color: rgb(255, 255, 255);\n  padding: 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: bold;\n  max-width: 220px;\n  pointer-events: auto;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.index-module_base__qy2SG {\n  font-size: 14px;\n}\n\n.index-module_extended__0TMAt {\n  margin-top: 6px;\n  font-size: 11px;\n  opacity: 0.9;\n  border-top: 1px solid rgba(255, 255, 255, 0.2);\n  padding-top: 6px;\n}";
-var styles$g = {"container":"index-module_container__7IatW","boundaryLabel":"index-module_boundaryLabel__GDHFn","base":"index-module_base__qy2SG","extended":"index-module_extended__0TMAt"};
-styleInject(css_248z$g);
+var css_248z$4 = ".index-module_container__7IatW {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_boundaryLabel__GDHFn {\n  position: absolute;\n  background-color: rgba(30, 30, 31, 0.6);\n  color: rgb(255, 255, 255);\n  padding: 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: bold;\n  max-width: 220px;\n  pointer-events: auto;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.index-module_base__qy2SG {\n  font-size: 14px;\n}\n\n.index-module_extended__0TMAt {\n  margin-top: 6px;\n  font-size: 11px;\n  opacity: 0.9;\n  border-top: 1px solid rgba(255, 255, 255, 0.2);\n  padding-top: 6px;\n}";
+var styles$4 = {"container":"index-module_container__7IatW","boundaryLabel":"index-module_boundaryLabel__GDHFn","base":"index-module_base__qy2SG","extended":"index-module_extended__0TMAt"};
+styleInject(css_248z$4);
 
 const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionData, realTimeData = [], }) => {
     const [processStateIsMowing, updateProcessStateIsMowing] = useState(false);
@@ -14426,7 +14755,7 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
         }
     }, [mapData, pathData, realTimeData]);
     const items = useMemo(() => {
-        console.log('boundartItme->', viewBox, mapData);
+        // console.log('boundartItme->', viewBox, mapData)
         if (!mapData || !viewBox)
             return [];
         // 构建边界数据
@@ -14469,7 +14798,7 @@ const useBoundaryLabels = ({ mapData, pathData, unitType, viewBox, mowPartitionD
 function computePolygonCentroid(points) {
     if (!points || points.length < 3)
         return null;
-    const valid = points.filter(p => p.length >= 2);
+    const valid = points.filter((p) => p.length >= 2);
     if (valid.length < 3)
         return null;
     const polygon = [...valid];
@@ -14537,7 +14866,7 @@ const BoundaryLabels = React__default.memo(({ editMap, mapData, pathData, unitTy
         zIndex: expandedId != null ? 9999 : containerZIndex,
         display: editMap ? 'none' : 'block',
     }), [containerZIndex, expandedId, editMap]);
-    return (jsx("div", { className: styles$g.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `${styles$g.boundaryLabel} boundary-label`, "data-boundary-id": item.id, style: {
+    return (jsx("div", { className: styles$4.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `${styles$4.boundaryLabel} boundary-label`, "data-boundary-id": item.id, style: {
                 transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
                 left: `${item.leftPct}%`,
                 top: `${item.topPct}%`,
@@ -14547,12 +14876,12 @@ const BoundaryLabels = React__default.memo(({ editMap, mapData, pathData, unitTy
                 if (onlyRead)
                     return;
                 handleClick(item.id);
-            }, children: [jsx("div", { className: styles$g.base, children: item.baseText }), jsxs("div", { className: styles$g.extended, style: { display: expandedId === item.id ? 'block' : 'none' }, children: [jsx("div", { style: { marginBottom: 3, fontWeight: 'bold' }, children: item.coverageText }), jsx("div", { children: item.dateText })] })] }, item.id))) }));
+            }, children: [jsx("div", { className: styles$4.base, children: item.baseText }), jsxs("div", { className: styles$4.extended, style: { display: expandedId === item.id ? 'block' : 'none' }, children: [jsx("div", { style: { marginBottom: 3, fontWeight: 'bold' }, children: item.coverageText }), jsx("div", { children: item.dateText })] })] }, item.id))) }));
 });
 
-var css_248z$f = ".index-module_container__gB52e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_item__zHoZP {\n  position: absolute;\n  pointer-events: auto;\n}\n\n.index-module_icon__CS56A {\n  position: relative;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.index-module_tooltip__NMCmR {\n  position: absolute;\n  bottom: 40px;\n  left: 0;\n  background-color: rgb(247, 251, 255);\n  color: rgb(65, 93, 116);\n  padding: 10px;\n  border-radius: 16px;\n  font-size: 14px;\n  text-align: left;\n}";
-var styles$f = {"container":"index-module_container__gB52e","item":"index-module_item__zHoZP","icon":"index-module_icon__CS56A","tooltip":"index-module_tooltip__NMCmR"};
-styleInject(css_248z$f);
+var css_248z$3 = ".index-module_container__gB52e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.index-module_item__zHoZP {\n  position: absolute;\n  pointer-events: auto;\n}\n\n.index-module_icon__CS56A {\n  position: relative;\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.index-module_tooltip__NMCmR {\n  position: absolute;\n  bottom: 40px;\n  left: 0;\n  background-color: rgb(247, 251, 255);\n  color: rgb(65, 93, 116);\n  padding: 10px;\n  border-radius: 16px;\n  font-size: 14px;\n  text-align: left;\n}";
+var styles$3 = {"container":"index-module_container__gB52e","item":"index-module_item__zHoZP","icon":"index-module_icon__CS56A","tooltip":"index-module_tooltip__NMCmR"};
+styleInject(css_248z$3);
 
 const useAntennaInfo = (data = [], options = {}) => {
     const { viewBox } = options;
@@ -14661,13 +14990,13 @@ const Antennas = React__default.memo(({ editMap, antennaConfig = [], viewBox, ro
         document.addEventListener('pointerdown', handleOutside);
         return () => document.removeEventListener('pointerdown', handleOutside);
     }, []);
-    return (jsx("div", { className: styles$f.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `antenna-container-item ${styles$f.item}`, style: {
+    return (jsx("div", { className: styles$3.container, style: containerStyle, children: items.map((item) => (jsxs("div", { className: `antenna-container-item ${styles$3.item}`, style: {
                 left: `${item.leftPct}%`,
                 top: `${item.topPct}%`,
                 transform: `translate(calc(-50% + ${item.offsetX || 0}px), calc(-50% + ${item.offsetY || 0}px)) rotate(${-rotation}deg)`,
                 zIndex: openType === item.type ? 10000 : containerZIndex,
                 pointerEvents: onlyRead ? 'none' : 'auto',
-            }, children: [jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$f.icon}`, style: {}, onClick: (e) => {
+            }, children: [jsx("div", { className: `antenna vector-antenna antenna-${item.type} ${item.isOnline ? 'antenna-online' : 'antenna-offline'} ${styles$3.icon}`, style: {}, onClick: (e) => {
                         e.stopPropagation();
                         if (onlyRead)
                             return;
@@ -14682,7 +15011,7 @@ const Antennas = React__default.memo(({ editMap, antennaConfig = [], viewBox, ro
                             return;
                         e.currentTarget.style.transform =
                             'scale(1)';
-                    }, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxs("div", { className: styles$f.tooltip, style: {
+                    }, children: jsx("img", { src: item.imageSrc, style: { width: '100%', height: '100%', objectFit: 'contain', opacity: 1 } }) }), jsxs("div", { className: styles$3.tooltip, style: {
                         display: openType === item.type ? 'block' : 'none',
                         minWidth: item.tooltip.minWidth,
                     }, children: [jsx("div", { style: { marginBottom: 4, fontWeight: 600 }, children: item.tooltip.title }), jsxs("div", { style: { color: 'rgba(65, 93, 116, 1)', fontWeight: 400 }, children: [item.tooltip.statusText, item.tooltip.syncText || ''] })] })] }, `antenna-${item.type}`))) }));
@@ -14735,30 +15064,32 @@ function generateStraightParallelPaths(points, offsetDistance) {
     }
     return [parallelPath2Data, parallelPath1Data];
 }
-const DashPath = ({ points, stroke, strokeWidth, strokeOpacity, className }) => {
+const DashPath = ({ points, stroke, strokeWidth, strokeOpacity, className, }) => {
     const [parallelPath2Data, parallelPath1Data] = generateStraightParallelPaths(points, strokeWidth);
-    return (jsxs(Fragment, { children: [jsx("path", { className: className, fill: "none", d: parallelPath2Data, stroke: stroke, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: `${strokeWidth}px ${strokeWidth * 2}px`, style: { pointerEvents: 'none' } }), jsx("path", { className: className, fill: "none", d: parallelPath1Data, stroke: stroke, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: `${strokeWidth}px ${strokeWidth * 2}px`, style: { pointerEvents: 'none' } })] }));
+    return (jsxs(Fragment, { children: [jsx("path", { fill: "none", d: parallelPath2Data, stroke: stroke, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: `${strokeWidth}px ${strokeWidth * 2}px`, style: { pointerEvents: 'none' }, vectorEffect: "non-scaling-stroke" }), jsx("path", { fill: "none", d: parallelPath1Data, stroke: stroke, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: `${strokeWidth}px ${strokeWidth * 2}px`, style: { pointerEvents: 'none' }, vectorEffect: "non-scaling-stroke" })] }));
 };
 
 const VertexElement = React__default.memo(({ r, stroke, ...props }) => {
-    return (jsx("circle", { r: r || 12, stroke: stroke || "#fff", fill: "#fff", strokeWidth: 2, vectorEffect: "non-scaling-stroke", ...props }));
+    const { overlayScale } = useCommonContext();
+    const radius = typeof r === 'number' ? r : 12;
+    return (jsx("circle", { r: radius * overlayScale, stroke: stroke || '#fff', fill: '#fff', strokeWidth: 2 * overlayScale, ...props }));
 });
 
-var _path$c;
-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 SvgDelete$1 = function SvgDelete(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+var _path$2;
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
+var SvgDelete = function SvgDelete(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "none"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.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"
   })));
 };
 
-const DragDistanceIndicator = ({ dragState, strokeColor, editMode = false, createMode = false, completed = false, }) => {
+const DragDistanceIndicator = ({ fontSize, dragState, strokeColor, editMode = false, createMode = false, completed = false, }) => {
     // 计算两点间的距离（使用通用工具函数）
     const calculateDistance$1 = React__default.useCallback((point1, point2) => {
         const distance = calculateDistance(point1, point2);
@@ -14774,7 +15105,10 @@ const DragDistanceIndicator = ({ dragState, strokeColor, editMode = false, creat
         return isFootOnSegment(foot);
     }, []);
     // 只在符合条件时渲染
-    if (!(editMode || (createMode && completed)) || !dragState.isDragging || dragState.dragIndex === -1 || !dragState.currentPosition) {
+    if (!(editMode || (createMode && completed)) ||
+        !dragState.isDragging ||
+        dragState.dragIndex === -1 ||
+        !dragState.currentPosition) {
         return null;
     }
     return (jsx(Fragment, { children: dragState.dragType === 'new' && dragState.edgeInfo ? (
@@ -14785,7 +15119,7 @@ const DragDistanceIndicator = ({ dragState, strokeColor, editMode = false, creat
             const foot = calculatePerpendicularFoot$1(currentPoint, startPoint, endPoint);
             const distance = calculateDistance$1(currentPoint, foot);
             const isOnSegment = isFootOnSegment$1(foot);
-            return (jsxs(Fragment, { children: [jsx("line", { x1: currentPoint.x, y1: currentPoint.y, x2: foot.x, y2: foot.y, stroke: isOnSegment ? "#ff6b6b" : "#ffa500", strokeWidth: "2", strokeDasharray: isOnSegment ? "none" : "5,5", pointerEvents: "none" }), jsx(VertexElement, { r: "3", stroke: strokeColor, cx: foot.x, cy: foot.y, fill: isOnSegment ? "#ff6b6b" : "#ffa500", pointerEvents: "none" }), (() => {
+            return (jsxs(Fragment, { children: [jsx("line", { x1: currentPoint.x, y1: currentPoint.y, x2: foot.x, y2: foot.y, stroke: isOnSegment ? '#ff6b6b' : '#ffa500', strokeWidth: "2", strokeDasharray: isOnSegment ? 'none' : '5,5', pointerEvents: "none" }), jsx(VertexElement, { r: "3", stroke: strokeColor, cx: foot.x, cy: foot.y, fill: isOnSegment ? '#ff6b6b' : '#ffa500', pointerEvents: "none" }), (() => {
                         const { param } = foot;
                         let lineStartX, lineStartY, lineEndX, lineEndY;
                         if (param >= 0 && param <= 1) {
@@ -14810,10 +15144,10 @@ const DragDistanceIndicator = ({ dragState, strokeColor, editMode = false, creat
                             lineEndY = foot.y;
                         }
                         return (jsx("line", { x1: lineStartX, y1: lineStartY, x2: lineEndX, y2: lineEndY, stroke: "#999", strokeWidth: "2", strokeDasharray: "3,3", pointerEvents: "none" }));
-                    })(), jsx("text", { x: (currentPoint.x + foot.x) / 2, y: (currentPoint.y + foot.y) / 2 - 10, textAnchor: "middle", fill: "#ffa500", fontSize: "20", pointerEvents: "none", children: distance })] }));
+                    })(), jsx("text", { x: (currentPoint.x + foot.x) / 2, y: (currentPoint.y + foot.y) / 2 - 10, textAnchor: "middle", fill: '#ffa500', fontSize: fontSize, pointerEvents: "none", children: distance })] }));
         })()) : dragState.dragType === 'existing' && dragState.originalPosition ? (
         // 已有顶点拖拽：显示原始位置距离
-        jsxs(Fragment, { children: [jsx("line", { x1: dragState.originalPosition[0], y1: dragState.originalPosition[1], x2: dragState.currentPosition[0], y2: dragState.currentPosition[1], stroke: "#999", strokeWidth: "2", strokeDasharray: "3,3", pointerEvents: "none" }), calculateDistance({ x: dragState.originalPosition[0], y: dragState.originalPosition[1] }, { x: dragState.currentPosition[0], y: dragState.currentPosition[1] }) > 0 ? jsx("text", { x: (dragState.originalPosition[0] + dragState.currentPosition[0]) / 2, y: (dragState.originalPosition[1] + dragState.currentPosition[1]) / 2 - 10, textAnchor: "middle", fill: "#999", fontSize: "20", pointerEvents: "none", children: calculateDistance$1({ x: dragState.originalPosition[0], y: dragState.originalPosition[1] }, { x: dragState.currentPosition[0], y: dragState.currentPosition[1] }) }) : null] })) : null }));
+        jsxs(Fragment, { children: [jsx("line", { x1: dragState.originalPosition[0], y1: dragState.originalPosition[1], x2: dragState.currentPosition[0], y2: dragState.currentPosition[1], stroke: "#999", strokeWidth: "2", strokeDasharray: "3,3", pointerEvents: "none" }), calculateDistance({ x: dragState.originalPosition[0], y: dragState.originalPosition[1] }, { x: dragState.currentPosition[0], y: dragState.currentPosition[1] }) > 0 ? (jsx("text", { x: (dragState.originalPosition[0] + dragState.currentPosition[0]) / 2, y: (dragState.originalPosition[1] + dragState.currentPosition[1]) / 2 - 10, textAnchor: "middle", fill: '#999', fontSize: fontSize, pointerEvents: "none", children: calculateDistance$1({ x: dragState.originalPosition[0], y: dragState.originalPosition[1] }, { x: dragState.currentPosition[0], y: dragState.currentPosition[1] }) })) : null] })) : null }));
 };
 
 const normalizePadding = (padding) => {
@@ -14821,7 +15155,7 @@ const normalizePadding = (padding) => {
         return { x: padding, y: padding };
     return { x: padding?.x ?? 4, y: padding?.y ?? 2 };
 };
-const TextElement = ({ x, y, fontSize = 20, fill = '#fff', text, background = 'rgba(0, 0, 0, 0.34)', padding = 2, rx = 4, ry = 4, backgroundStroke, backgroundStrokeWidth = 0, textAnchor = 'middle', alignmentBaseline = 'middle', className, style, rotate, pointerEvents = 'auto', onClick, onMouseEnter, onMouseLeave, children, }) => {
+const TextElement = ({ x, y, fontSize = 30, fill = '#fff', text, background = 'rgba(0, 0, 0, 0.34)', padding = 2, rx = 4, ry = 4, backgroundStroke, backgroundStrokeWidth = 0, textAnchor = 'middle', alignmentBaseline = 'middle', className, style, rotate, pointerEvents = 'auto', onClick, onMouseEnter, onMouseLeave, children, }) => {
     const textRef = useRef(null);
     const [bbox, setBbox] = useState(null);
     const pad = useMemo(() => normalizePadding(padding), [padding]);
@@ -14848,7 +15182,7 @@ const TextElement = ({ x, y, fontSize = 20, fill = '#fff', text, background = 'r
             height: bbox.height + pad.y * 2,
         };
     }, [bbox, pad.x, pad.y]);
-    return (jsxs("g", { className: className, style: style, pointerEvents: pointerEvents, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [background && rectProps && (jsx("rect", { x: rectProps.x, y: rectProps.y, width: rectProps.width, height: rectProps.height, rx: rx, ry: ry, fill: background, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth })), jsx("text", { ref: textRef, x: x, y: y, fontSize: fontSize, fill: fill, textAnchor: textAnchor, alignmentBaseline: alignmentBaseline, 
+    return (jsxs("g", { className: className, style: style, pointerEvents: pointerEvents, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [background && rectProps && (jsx("rect", { x: rectProps.x, y: rectProps.y, width: rectProps.width, height: rectProps.height, rx: rx, ry: ry, fill: background, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth })), jsx("text", { ref: textRef, x: x, y: y, letterSpacing: -5, fontSize: fontSize, fill: fill, textAnchor: textAnchor, alignmentBaseline: alignmentBaseline, 
                 // keep text crisp at various zoom levels
                 vectorEffect: "non-scaling-stroke", style: { pointerEvents: 'none' }, children: children || text })] }));
 };
@@ -14873,14 +15207,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, }) => {
+const DistanceLabels = ({ coordinates, createMode = false, editMode = false, completed = false, showPoints = false, mousePos: _mousePos = null, ghostLastDistance = null, ghostLastMidpoint = null, ghostFirstDistance = null, ghostFirstMidpoint = null, fontSize = 30, }) => {
     // 只在显示可操作顶点时显示距离
-    if (!(createMode && showPoints || editMode || (createMode && completed)) || coordinates.length < 2) {
+    if (!((createMode && showPoints) || editMode || (createMode && completed)) ||
+        coordinates.length < 1) {
         return null;
     }
     return (jsxs(Fragment, { children: [coordinates.map((coord, idx) => {
@@ -14892,16 +15224,16 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
                 }
                 const midpoint = calculateMidpoint$1(coord, nextCoord);
                 const distance = calculatePhysicalDistance$1(coord, nextCoord);
-                return (jsx(TextElement, { x: midpoint[0], y: midpoint[1], textAnchor: "middle", alignmentBaseline: "middle", fontSize: 20, fill: "#fff", style: {
+                return (jsx(TextElement, { x: midpoint[0], y: midpoint[1], textAnchor: "middle", alignmentBaseline: "middle", fontSize: fontSize, fill: "#fff", style: {
                         pointerEvents: 'none',
                         fontWeight: 'bold',
                     }, text: distance }, `distance-${idx}`));
-            }), ghostLastDistance && ghostLastMidpoint && (jsx(TextElement, { x: ghostLastMidpoint[0], y: ghostLastMidpoint[1], text: ghostLastDistance })), ghostFirstDistance && ghostFirstMidpoint && (jsx(TextElement, { x: ghostFirstMidpoint[0], y: ghostFirstMidpoint[1], text: ghostFirstDistance }))] }));
+            }), ghostLastDistance && ghostLastMidpoint && (jsx(TextElement, { fontSize: fontSize, x: ghostLastMidpoint[0], y: ghostLastMidpoint[1], text: ghostLastDistance })), ghostFirstDistance && ghostFirstMidpoint && (jsx(TextElement, { fontSize: fontSize, x: ghostFirstMidpoint[0], y: ghostFirstMidpoint[1], text: ghostFirstDistance }))] }));
 };
 
-var css_248z$e = ".index-module_polygonPathG__S-Bpl {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.index-module_vertex__-Qb1u {\n  cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n  cursor: grabbing;\n}\n\n.index-module_createVertex__ldz2E {\n  cursor: crosshair;\n}\n\n.index-module_addVertex__hrF71 {\n  cursor: pointer;\n}\n\n.index-module_polygonPath__PynOn {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.index-module_notCreate__bFnkV {\n  cursor: no-drop;\n}";
-var styles$e = {"polygonPathG":"index-module_polygonPathG__S-Bpl","vertex":"index-module_vertex__-Qb1u","dragging":"index-module_dragging__xSFdO","addVertex":"index-module_addVertex__hrF71","polygonPath":"index-module_polygonPath__PynOn","notCreate":"index-module_notCreate__bFnkV"};
-styleInject(css_248z$e);
+var css_248z$2 = ".index-module_polygonPathG__S-Bpl {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.index-module_vertex__-Qb1u {\n  cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n  cursor: grabbing;\n}\n\n.index-module_createVertex__ldz2E {\n  cursor: crosshair;\n}\n\n.index-module_addVertex__hrF71 {\n  cursor: pointer;\n}\n\n.index-module_polygonPath__PynOn {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.index-module_notCreate__bFnkV {\n  cursor: no-drop;\n}";
+var styles$2 = {"polygonPathG":"index-module_polygonPathG__S-Bpl","vertex":"index-module_vertex__-Qb1u","dragging":"index-module_dragging__xSFdO","addVertex":"index-module_addVertex__hrF71","polygonPath":"index-module_polygonPath__PynOn","notCreate":"index-module_notCreate__bFnkV"};
+styleInject(css_248z$2);
 
 var CreateStatus;
 (function (CreateStatus) {
@@ -14925,23 +15257,21 @@ var MobileEditMode;
     MobileEditMode[MobileEditMode["EDIT"] = 1] = "EDIT";
     MobileEditMode[MobileEditMode["CREATE"] = 2] = "CREATE";
 })(MobileEditMode || (MobileEditMode = {}));
+var ClickEventType;
+(function (ClickEventType) {
+    // 点击doodle的active time的时候触发
+    ClickEventType["DOODLE_ACTIVE_TIME"] = "doodleActiveTime";
+})(ClickEventType || (ClickEventType = {}));
 const INIT_EDIT_MAP_INFO = {
-    minDistance: 0,
     editMap: false,
     selectElement: null,
-    createMode: CreateStatus.CREATING,
+    createMode: null,
     elementType: undefined,
     isShowDrag: false,
     mobileMode: MobileEditMode.START,
     allVisionOffPoints: [],
     historyList: [],
     currentHistoryIndex: 0,
-    onHandleEnterRecord: () => Promise.resolve(),
-    onHandleCompleteRecord: () => Promise.resolve(),
-    onHandleStopRecord: () => Promise.resolve(),
-    onSaveBoundaryData: () => Promise.resolve(),
-    onSaveMap: () => Promise.resolve(),
-    onHandleDeleteElement: () => Promise.resolve(),
 };
 const MapEditContext = createContext({
     editMapInfo: { ...INIT_EDIT_MAP_INFO },
@@ -15026,7 +15356,7 @@ function isPointInPolygon(point, polygon) {
         const yi = polygon[i].y;
         const xj = polygon[j].x;
         const yj = polygon[j].y;
-        if (((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)) {
+        if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) {
             inside = !inside;
         }
     }
@@ -15094,8 +15424,7 @@ function lineSegmentsIntersect(line1Start, line1End, line2Start, line2End) {
     const d2 = direction(line2Start, line2End, line1End);
     const d3 = direction(line1Start, line1End, line2Start);
     const d4 = direction(line1Start, line1End, line2End);
-    if (((d1 > 0 && d2 < 0) || (d1 < 0 && d2 > 0)) &&
-        ((d3 > 0 && d4 < 0) || (d3 < 0 && d4 > 0))) {
+    if (((d1 > 0 && d2 < 0) || (d1 < 0 && d2 > 0)) && ((d3 > 0 && d4 < 0) || (d3 < 0 && d4 > 0))) {
         return true;
     }
     if (d1 === 0 && onSegment(line2Start, line1Start, line2End))
@@ -15126,8 +15455,10 @@ function direction(p1, p2, p3) {
  * @returns 是否在线段上
  */
 function onSegment(p, q, r) {
-    return q.x <= Math.max(p.x, r.x) && q.x >= Math.min(p.x, r.x) &&
-        q.y <= Math.max(p.y, r.y) && q.y >= Math.min(p.y, r.y);
+    return (q.x <= Math.max(p.x, r.x) &&
+        q.x >= Math.min(p.x, r.x) &&
+        q.y <= Math.max(p.y, r.y) &&
+        q.y >= Math.min(p.y, r.y));
 }
 /**
  * 判断两个多边形是否相交（包括边界相交、部分重叠、完全包含等所有情况）
@@ -15274,6 +15605,7 @@ const useCheckElement = () => {
             }
             // 检查距离是否大于 2m
             const distance = polygonToPolygonDistance(doodlePoints, elementPoints);
+            console.log('distance--->', distance, minDistance, doodlePoints, elementPoints);
             if (distance < minDistance) {
                 const elementTypeName = {
                     [DataType.OBSTACLE]: '障碍物',
@@ -15283,7 +15615,7 @@ const useCheckElement = () => {
                 }[element.type] || '未知元素';
                 return {
                     isValid: false,
-                    reason: `Doodle 与${elementTypeName}距离过近 (${distance.toFixed(2) / SCALE_FACTOR}m < ${minDistance / 2}m)`,
+                    reason: `Doodle 与${elementTypeName}距离过近 (${distance.toFixed(2) / SCALE_FACTOR}m < ${minDistance / SCALE_FACTOR}m)`,
                 };
             }
         }
@@ -15291,11 +15623,12 @@ const useCheckElement = () => {
         console.log('Doodle 位置检查通过');
         return { isValid: true };
     }, [editMapInfo, svgElementDatas, minDistance]);
-    const checkCanNotCreateAtPosition = useCallback((checkPoint) => {
-        // console.log('editMapInfo.elementType--->', editMapInfo.elementType);
+    const checkCanNotCreateAtPosition = useCallback((checkPoint, checkPoints) => {
+        console.log('editMapInfo.elementType--->', editMapInfo);
         if (!editMapInfo.elementType)
             return false;
-        const points = editMapInfo?.selectElement?.points || [];
+        const currentPoints = editMapInfo?.selectElement?.points;
+        const points = checkPoints || currentPoints;
         const firstPoint = coordinatesToPoints$1(points)?.[0] || checkPoint;
         const boundary = svgElementDatas?.[DataType.BOUNDARY] || [];
         let currentBoundary = null;
@@ -15308,6 +15641,7 @@ const useCheckElement = () => {
                 break;
             }
         }
+        console.log('currentBoundary--->', currentBoundary, points);
         if (!currentBoundary)
             return true;
         if (!isPointInPolygon(checkPoint, coordinatesToPoints$1(currentBoundary.points)))
@@ -15316,7 +15650,7 @@ const useCheckElement = () => {
         if (editMapInfo.elementType !== DataType.OBSTACLE)
             return false;
         // 获取当前正在创建的 obstacle 的点
-        const currentObstaclePoints = coordinatesToPoints$1(points);
+        const currentObstaclePoints = coordinatesToPoints$1(points) || [];
         if (currentObstaclePoints.length === 0)
             return false; // 还没有开始绘制
         // 构建当前 obstacle 的多边形（包括检查点位置）
@@ -15347,7 +15681,6 @@ const useCheckElement = () => {
             return doodleTransformedPoints.some((point) => isPointInPolygon(point, currentBoundaryPoints));
         });
         // 4. 检查当前 obstacle 和 doodle 不能相交，且间隔要大于2m
-        const MIN_DISTANCE = 2 * SCALE_FACTOR; // 2m 最小距离要求
         // console.log('doodlesInBoundary--->', doodlesInBoundary);
         for (const doodle of doodlesInBoundary) {
             const doodleTransformedPoints = transformSvgElements(doodle).flat();
@@ -15358,13 +15691,14 @@ const useCheckElement = () => {
             }
             // 检查距离
             const distance = polygonToPolygonDistance(currentObstaclePolygon, doodleTransformedPoints);
-            if (distance < MIN_DISTANCE) {
-                console.log('Obstacle-Doodle distance too close:', distance, 'required:', MIN_DISTANCE);
+            console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
+            if (distance < minDistance) {
+                console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
                 return true; // 显示不能创建的光标
             }
         }
         return false;
-    }, [editMapInfo.selectElement, editMapInfo.elementType, svgElementDatas]);
+    }, [editMapInfo.selectElement, editMapInfo.elementType, svgElementDatas, minDistance]);
     return {
         checkDoodle,
         checkCanNotCreateAtPosition,
@@ -15459,8 +15793,9 @@ const createPathData = (points) => {
     }
     return pathData;
 };
-const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity = 1, strokeColor = '#000', strokeWidth = 2, strokeOpacity = 1, createMode = false, showPoints = false, onPointClick, completed = false, mousePos = null, editMode = false, onCoordinatesChange, onPathClick, onPolygonClick, onVertexDelete, draggable = true, // 新增参数，如果未指定则根据createMode和editMode自动判断
+const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity = 1, strokeColor = '#000', strokeWidth = 2, strokeOpacity = 1, createMode = false, showPoints = false, onPointClick, completed = false, mousePos = null, editMode = false, onCoordinatesChange, onPathClick, onPolygonClick, onVertexDelete, draggable = true, // 新增参数，如果未指定则根据createMode和editMode自动判断
  }) => {
+    const { overlayScale } = useCommonContext();
     const { svgRef } = useSvgEditContext();
     const [dragState, setDragState] = useState({
         isDragging: false,
@@ -15476,6 +15811,10 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
     const { checkCanNotCreateAtPosition } = useCheckElement();
     const { editMapInfo } = useMapEditContext();
     const { platform } = useCommonContext();
+    // delete icon可能被上一个点遮挡，因为delete在右上方，所以手动处理点让点按照顺时针渲染，这样delete icon层级就会高一些
+    const coordinates = useMemo(() => {
+        return editMapInfo?.createMode === CreateStatus.CREATING ? points : [...points].reverse();
+    }, [points, editMapInfo?.createMode]);
     // 计算点到线段的垂足坐标（使用通用工具函数）
     const calculatePerpendicularFoot$1 = useCallback((point, lineStart, lineEnd) => {
         return calculatePerpendicularFoot(point, lineStart, lineEnd);
@@ -15614,15 +15953,25 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
     const showNotCreateCursor = useMemo(() => {
         if (!dragState?.isDragging || !dragState?.currentPosition)
             return false;
+        console.log('------>', dragState, dragState.currentPosition);
+        // 新建点可以使用editMapInfo中的点做距离校验，拖动已有点需要将拖动点替换为鼠标当前位置再判断
+        if (dragState?.dragType === 'new')
+            return (checkCanNotCreateAtPosition?.({
+                x: dragState.currentPosition[0],
+                y: dragState.currentPosition[1],
+            }) === true);
+        const prePoints = coordinates.slice(0, dragState.dragIndex);
+        const afterPoints = coordinates.slice(dragState.dragIndex + 1);
+        const checkPoints = [...prePoints, dragState.currentPosition, ...afterPoints];
         return (checkCanNotCreateAtPosition?.({
             x: dragState.currentPosition[0],
             y: dragState.currentPosition[1],
-        }) === true);
-    }, [dragState.currentPosition, checkCanNotCreateAtPosition]);
+        }, checkPoints) === true);
+    }, [dragState.currentPosition, checkCanNotCreateAtPosition, coordinates]);
     const generateVertexClassName = useMemo(() => {
         if (!dragState.isDragging)
-            return styles$e.vertex;
-        return showNotCreateCursor ? styles$e.notCreate : styles$e.dragging;
+            return styles$2.vertex;
+        return showNotCreateCursor ? styles$2.notCreate : styles$2.dragging;
     }, [dragState.isDragging, showNotCreateCursor]);
     // 使用 useRef 来存储 requestAnimationFrame ID
     const rafIdRef = useRef(null);
@@ -15684,8 +16033,6 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                 else {
                     // mouseUp 时才真正插入新顶点
                     newCoordinates.splice(dragState.newVertexIndex, 0, dragState.currentPosition);
-                    // 通知外部坐标变化
-                    onCoordinatesChange?.(newCoordinates);
                 }
             }
             else {
@@ -15696,9 +16043,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,
@@ -15709,7 +16058,7 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
             edgeInfo: null,
             dragType: null,
         });
-    }, [dragState, coordinates, onCoordinatesChange, showNotCreateCursor]);
+    }, [dragState, coordinates, onCoordinatesChange, showNotCreateCursor, editMapInfo?.createMode]);
     // 添加全局事件监听（支持触摸和鼠标事件）
     useEffect(() => {
         if (dragState.isDragging) {
@@ -15781,22 +16130,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 (jsxs(Fragment, { children: [(editMode || (createMode && completed)) &&
@@ -15808,24 +16149,24 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                         const nextIndex = (dragState.dragIndex + 1) % coordinates.length;
                         return (jsxs(Fragment, { children: [jsx("line", { x1: coordinates[prevIndex][0], y1: coordinates[prevIndex][1], x2: dragState.originalPosition[0], y2: dragState.originalPosition[1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none" }), jsx("line", { x1: dragState.originalPosition[0], y1: dragState.originalPosition[1], x2: coordinates[nextIndex][0], y2: coordinates[nextIndex][1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none" })] }));
                     })()] })), renderCoordinates.length >= 3 && (jsx("polygon", { className: "vector-boundary-fill", points: polygonPoints, fill: fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
-                , onClick: onPolygonClick })), jsxs("g", { className: styles$e.polygonPathG, children: [renderCoordinates.length >= 2 &&
+                , onClick: onPolygonClick })), jsxs("g", { className: styles$2.polygonPathG, children: [renderCoordinates.length >= 2 &&
                         pathSegments.map((segment, index) => {
                             if (segment.points.length < 2)
                                 return null;
                             const pathData = createPathData(segment.points);
                             const isDash = segment.type === 1;
-                            return (jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: styles$e.polygonPath, vectorEffect: "non-scaling-stroke", onClick: onPathClick }, index));
+                            return (jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: styles$2.polygonPath, vectorEffect: "non-scaling-stroke", onClick: onPathClick }, index));
                         }), renderCoordinates.length >= 2 &&
                         dashPaths.map((segment, index) => {
                             if (segment.points.length < 2)
                                 return null;
-                            return (jsx(DashPath, { className: styles$e.polygonPath, points: segment.points, stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity }, index));
+                            return (jsx(DashPath, { className: styles$2.polygonPath, points: segment.points, stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity }, index));
                         })] }), (editMode || (createMode && completed)) &&
                 renderCoordinates.length >= 2 &&
                 renderCoordinates.map((coord, index) => {
                     const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
                     const isDashPath = coord[2] === 1;
-                    return (jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: strokeWidth, className: styles$e.addVertex, vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
+                    return (jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: strokeWidth, className: styles$2.addVertex, vectorEffect: "non-scaling-stroke", ...(platform === PlatformType.H5
                             ? {
                                 onTouchStart: createReactEventHandler((e) => handleEdgeClick(e, index)),
                             }
@@ -15850,14 +16191,14 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                                     setHoverVertex(null);
                                 },
                             }) }, `edge-${index}`));
-                }), ghostLastPath && (jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 3 && (jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint }), hoverVertex && !dragState.isDragging && (jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
+                }), ghostLastPath && (jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: 30 * overlayScale }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: 30 * overlayScale }), hoverVertex && !dragState.isDragging && (jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
                 renderCoordinates.map((coord, idx) => {
                     // 判断当前顶点的状态
                     const isLastPoint = idx === renderCoordinates.length - 1;
                     const canComplete = createMode && !completed && renderCoordinates.length >= 3 && isLastPoint;
                     const isCreatedAndCanDrag = createMode && completed; // 创建完成后可拖拽
                     const isInEditMode = editMode;
-                    return (jsxs("g", { children: [jsx(VertexElement, { className: generateVertexClassName, stroke: strokeColor, cx: coord[0], cy: coord[1], onClick: (e) => handleVertexClick(e, idx), onDoubleClick: (e) => {
+                    return (jsxs("g", { children: [jsx(VertexElement, { className: generateVertexClassName, stroke: strokeColor, cx: coord[0], cy: coord[1], r: canComplete ? 16 : 12, onClick: (e) => handleVertexClick(e, idx), onDoubleClick: (e) => {
                                     // 阻止双击事件冒泡到Google Maps
                                     e.preventDefault();
                                     e.stopPropagation();
@@ -15905,22 +16246,46 @@ const PolygonElement = ({ coordinates, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpa
                                                 }
                                             }
                                         },
-                                    }) }), tooltipIndex === idx && (jsxs("g", { transform: `translate(${coord[0] + 4}, ${coord[1] - 4})`, onClick: (e) => {
+                                        onMouseUp: (e) => {
+                                            // 拖拽逻辑：编辑模式或创建完成后
+                                            if (isInEditMode || isCreatedAndCanDrag) {
+                                                if (draggable) {
+                                                    // 延迟执行mouseDown，等待可能的doubleClick
+                                                    if (mouseDownTimerRef.current !== null) {
+                                                        window.clearTimeout(mouseDownTimerRef.current);
+                                                    }
+                                                }
+                                            }
+                                        },
+                                    }) }), tooltipIndex === idx && (jsxs("g", { transform: `translate(${coord[0] + 4 * overlayScale * 2}, ${coord[1] - 4 * overlayScale * 2}) scale(${overlayScale * 2})`, onClick: (e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                     if (onVertexDelete &&
                                         (editMode || (createMode && completed)) &&
                                         coordinates.length > 3) {
-                                        onVertexDelete(idx);
+                                        // 当前是逆时针展示的，但是外部数据是顺时针的，所以idx需要转换一下
+                                        onVertexDelete(renderCoordinates?.length - 1 - idx);
                                     }
                                     setTooltipIndex(null);
-                                }, style: { cursor: 'pointer' }, children: [jsx("rect", { x: 0, y: -24, width: 20, height: 20, rx: 2, ry: 2, fill: "#fff", strokeWidth: 1, filter: "url(#vertex-tooltip-shadow)" }), jsx("g", { transform: `translate(2, -22)`, children: jsx(SvgDelete$1, {}) })] })), canComplete && (jsx("text", { x: coord[0], y: coord[1], textAnchor: "middle", alignmentBaseline: "middle", fontSize: 20, fill: strokeColor, style: { pointerEvents: 'none' }, children: "\u2713" }))] }, `vertex-${idx}`));
+                                }, style: { cursor: 'pointer' }, children: [jsx("rect", { x: 0, y: -24, width: 20, height: 20, rx: 2, ry: 2, fill: "#fff", strokeWidth: 1, filter: "url(#vertex-tooltip-shadow)" }), jsx("g", { transform: `translate(2, -22)`, children: jsx(SvgDelete, {}) })] })), canComplete && (jsx("g", { style: { pointerEvents: 'none' }, transform: `translate(${coord[0] - 5 * overlayScale * 3}, ${coord[1] - 2.5 * overlayScale * 3}) scale(${overlayScale * 3})`, children: jsx("svg", { width: "10", height: "5", viewBox: "0 0 6 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M0.5 2.5L1.3452 3.3452C1.71469 3.71469 2.30636 3.73741 2.7031 3.39735L5.5 1", stroke: "#FF7A33", "stroke-linecap": "round" }) }) })
+                            // <rect
+                            //   x={coord[0]}
+                            //   y={coord[1]}
+                            //   width={20}
+                            //   height={20}
+                            //   rx={2}
+                            //   ry={2}
+                            //   fill="transparent"
+                            //   style={{ pointerEvents: 'none' }}
+                            // >
+                            // </rect>
+                            )] }, `vertex-${idx}`));
                 })] }));
 };
 
 const BoundaryElement = ({ data }) => {
     const style = data.style || {};
-    const { editMapInfo, setEditMapInfo } = useMapEditContext();
+    const { editMapInfo, setEditMapInfo, onSelectElement } = useMapEditContext();
     const { platform } = useCommonContext();
     const currentPoints = useMemo(() => {
         if (editMapInfo?.selectElement?.id === data.id) {
@@ -15933,15 +16298,16 @@ const BoundaryElement = ({ data }) => {
      */
     const strokeWidth = useMemo(() => {
         // 如果是h5选中的情况下，边界需要加粗
-        if (platform === PlatformType.H5 && editMapInfo?.selectElement?.id === data.id) {
+        if (editMapInfo?.selectElement?.id === data.id) {
             return dp2px((style.lineWidth || 3) * 2);
         }
         return dp2px(style.lineWidth || 3);
-    }, [platform, style, editMapInfo]);
+    }, [style, editMapInfo]);
     /**
      * 点击边界的回调
      */
     const onPathClick = useCallback(() => {
+        onSelectElement?.(DataType.BOUNDARY);
         if (platform === PlatformType.H5) {
             // 对于地块来说，如果当前有元素是在编辑和创建模式下，则不进行选中
             if (editMapInfo.mobileMode === MobileEditMode.EDIT ||
@@ -15966,7 +16332,7 @@ const BoundaryElement = ({ data }) => {
             }));
         }
     }, [platform, data, editMapInfo]);
-    return (jsx(PolygonElement, { coordinates: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onCoordinatesChange: (coordinates) => {
+    return (jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onCoordinatesChange: (coordinates) => {
             console.log('onCoordinatesChange', coordinates);
             setEditMapInfo((prev) => ({
                 ...prev,
@@ -16001,7 +16367,7 @@ const ChannelElement = ({ data }) => {
  * @returns
  */
 const useHistoryHandle = (props) => {
-    const { maxHistoryCount = 15 } = {};
+    const { maxHistoryCount = 16 } = {};
     const { setEditMapInfo } = useMapEditContext();
     // redo
     const redo = () => {
@@ -16036,7 +16402,12 @@ const useHistoryHandle = (props) => {
     const addHistory = useCallback((history) => {
         // 添加历史记录的时候，应该把当前的索引之后的所有历史记录都清空
         setEditMapInfo((prev) => {
-            console.log('addHistory->', JSON.stringify(prev?.historyList), prev?.historyList, prev.currentHistoryIndex);
+            // console.log(
+            //   'addHistory->',
+            //   JSON.stringify(prev?.historyList),
+            //   prev?.historyList,
+            //   prev.currentHistoryIndex
+            // );
             if (!prev?.historyList || prev?.historyList?.length === 0) {
                 return {
                     ...prev,
@@ -16045,13 +16416,13 @@ const useHistoryHandle = (props) => {
                 };
             }
             let newHistoryList = prev.historyList.slice(0, prev.currentHistoryIndex + 1);
-            console.log('newHistoryList->', JSON.stringify(newHistoryList), newHistoryList);
+            // console.log('newHistoryList->', JSON.stringify(newHistoryList), newHistoryList);
             // 保持历史记录的条数不超过maxHistoryCount
             if (newHistoryList.length >= maxHistoryCount) {
                 newHistoryList.shift();
             }
             newHistoryList = [...newHistoryList, history];
-            console.log('newHistoryList result->', JSON.stringify(newHistoryList), newHistoryList);
+            // console.log('newHistoryList result->', JSON.stringify(newHistoryList), newHistoryList);
             return {
                 ...prev,
                 historyList: newHistoryList,
@@ -16101,6 +16472,7 @@ const ObstacleElement = ({ data }) => {
         }
     }, [editMapInfo]);
     const currentPoints = useMemo(() => {
+        // 为了方便解决删除顶点的时候，delete icon被遮挡的问题，所以逆序一下
         if (editMapInfo?.selectElement?.id === data.id) {
             return editMapInfo.selectElement.points;
         }
@@ -16115,7 +16487,7 @@ const ObstacleElement = ({ data }) => {
         if (platform === PlatformType.H5 &&
             editMapInfo?.selectElement?.id === data.id &&
             editMapInfo.mobileMode === MobileEditMode.START) {
-            return (style.lineWidth || 2) * 1.5;
+            return (style.lineWidth || 2) * 3;
         }
         return style.lineWidth || 2;
     }, [platform, style, editMapInfo]);
@@ -16144,7 +16516,11 @@ const ObstacleElement = ({ data }) => {
             setEditMapInfo((prev) => ({
                 ...prev,
                 selectElement: data,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: data,
+                    },
+                ],
                 currentHistoryIndex: 0,
                 elementType: DataType.OBSTACLE,
                 editMap: true,
@@ -16158,7 +16534,7 @@ const ObstacleElement = ({ data }) => {
         }
         return editMapInfo?.selectElement?.id === data.id;
     }, [editMapInfo, data, platform]);
-    return (jsx(PolygonElement, { coordinates: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
+    return (jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
             if (platform === PlatformType.H5) {
                 onPathClick();
             }
@@ -16585,15 +16961,15 @@ 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); }
+var _g$3, _defs$3;
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 var SvgTransformDelete = function SvgTransformDelete(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none"
-  }, props), _g$7 || (_g$7 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$3 || (_g$3 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#transform-delete_svg__a)"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: 10,
@@ -16616,7 +16992,7 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
     fill: "#fff",
     rx: 0.8,
     transform: "rotate(45 6.323 5.191)"
-  }))), _defs$7 || (_defs$7 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }))), _defs$3 || (_defs$3 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "transform-delete_svg__b",
     x1: 17.727,
     x2: -1.215,
@@ -16636,15 +17012,15 @@ 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); }
+var _g$2, _defs$2;
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgTransformRotate = function SvgTransformRotate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
     fill: "none"
-  }, props), _g$6 || (_g$6 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#transform-rotate_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "url(#transform-rotate_svg__b)",
@@ -16652,7 +17028,7 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M11.602 14.719a5.447 5.447 0 0 1-6.608-5.116l-.004-.205a.818.818 0 0 1 1.633-.084l.004.084.01.285a3.81 3.81 0 0 0 2.127 3.137l.26.115a3.8 3.8 0 0 0 2.227.184l.276-.071q.29-.088.561-.219l-1.147-.441a.817.817 0 0 1 .587-1.525l2.54.977a.817.817 0 0 1 .316 1.308l.001.001a5.45 5.45 0 0 1-2.783 1.57M8.623 4.548a5.447 5.447 0 0 1 6.608 5.116l.004.204a.818.818 0 0 1-1.633.084l-.004-.084-.01-.284a3.81 3.81 0 0 0-2.127-3.138l-.26-.115a3.8 3.8 0 0 0-2.227-.184l-.276.072q-.29.087-.561.218l1.147.442a.817.817 0 0 1-.586 1.524l-2.542-.976a.817.817 0 0 1-.315-1.309 5.45 5.45 0 0 1 2.782-1.57"
-  }))), _defs$6 || (_defs$6 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }))), _defs$2 || (_defs$2 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "transform-rotate_svg__b",
     x1: 17.84,
     x2: -1.103,
@@ -16672,15 +17048,15 @@ 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); }
+var _g$1, _defs$1;
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgTransformScale = function SvgTransformScale(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 21,
     height: 20,
     fill: "none"
-  }, props), _g$5 || (_g$5 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#transform-scale_svg__a)"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "url(#transform-scale_svg__b)",
@@ -16688,7 +17064,7 @@ var SvgTransformScale = function SvgTransformScale(props) {
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M5.078 8.265a.8.8 0 0 0 1.6.001v-.544l5.69 5.69h-.494a.8.8 0 0 0 0 1.6l2.474-.002a.8.8 0 0 0 .311-.062.8.8 0 0 0 .49-.738v-2.474a.8.8 0 1 0-1.6 0v.594L7.81 6.59h.544a.8.8 0 0 0 0-1.6H5.879a.8.8 0 0 0-.8.8z"
-  }))), _defs$5 || (_defs$5 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "transform-scale_svg__b",
     x1: 17.84,
     x2: -1.103,
@@ -16708,15 +17084,15 @@ 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); }
+var _g, _defs;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgTransformTranslate = function SvgTransformTranslate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 20,
     height: 20,
     fill: "none"
-  }, props), _g$4 || (_g$4 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#transform-translate_svg__a)"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: 10,
@@ -16726,7 +17102,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M16.18 10.758a.8.8 0 0 0-.105-1.218l-1.66-1.66a.801.801 0 0 0-1.132 1.132l.383.381h-2.96V6.418l.385.386a.8.8 0 1 0 1.131-1.13l-1.75-1.75a.8.8 0 0 0-1.222.11L7.594 5.689a.8.8 0 0 0 1.131 1.13l.381-.38v2.954H6.137l.381-.38a.8.8 0 1 0-1.13-1.132l-1.752 1.75a.8.8 0 0 0 .106 1.22l1.66 1.66a.801.801 0 0 0 1.132-1.133l-.386-.385h2.958v2.972l-.38-.38a.8.8 0 0 0-1.132 1.131l1.751 1.75a.8.8 0 0 0 1.223-.11l1.654-1.655a.8.8 0 1 0-1.13-1.131l-.386.386v-2.963h2.978l-.385.384a.8.8 0 1 0 1.131 1.131z"
-  }))), _defs$4 || (_defs$4 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "transform-translate_svg__b",
     x1: 17.727,
     x2: -1.215,
@@ -16747,6 +17123,7 @@ var SvgTransformTranslate = function SvgTransformTranslate(props) {
 };
 
 const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCancel, onDragEnd, onDragMove, disabled = false, className = '', scaleConstraints = { minEdgeLength: 0.5, maxEdgeLength: 10000 }, showInfo = true, }) => {
+    const { overlayScale } = useCommonContext();
     const { platform } = useCommonContext();
     const { editMapInfo } = useMapEditContext();
     const dataPoints = useMemo(() => {
@@ -16862,7 +17239,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
             return;
         onDragMove?.(currentPoints.map((point) => [point.x, point.y]));
     }, [currentPoints, isSelected, isDragging, isRotating, isScaling]);
-    return (jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsx(PolygonElement, { coordinates: visionOffData?.points, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: () => {
+    return (jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsx(PolygonElement, { points: visionOffData?.points, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: () => {
                     onSelect?.();
                 }, onPolygonClick: () => {
                     if (platform === PlatformType.H5) {
@@ -16888,10 +17265,10 @@ 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 (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
                                     ? {
@@ -16943,7 +17320,8 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
                                         fontSize: '12px',
                                         color: 'white',
                                         fontWeight: '400',
-                                    }, children: [dimensions.height, "m \u00D7 ", dimensions.width, "m"] }) }))] }));
+                                        // transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
+                                    }, children: [dimensions.height, " m \u00D7 ", dimensions.width, " m"] }) }))] }));
                 })()] }));
 };
 
@@ -17000,7 +17378,11 @@ const VisionOffElement = ({ data, onSelect }) => {
                 ...prev,
                 selectElement: data,
                 elementType: DataType.VISION_OFF,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: data,
+                    },
+                ],
                 currentHistoryIndex: 0,
                 editMap: true,
                 isShowDrag: true,
@@ -17362,8 +17744,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位小数
@@ -17395,15 +17777,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$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgTransformArrow = function SvgTransformArrow(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 7,
     height: 11,
     fill: "none"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.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
@@ -17464,8 +17846,8 @@ const DoodleTransform = ({ data, isSelected: _isSelected, onSelect }) => {
     }
 };
 
-const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, }) => {
-    const { platform } = useCommonContext();
+const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOperation = false, onSelect, onCancel, onTransformChange, disabled = false, className = '', minScale, onMinScaleReached, onDragMove, onDragEnd, showInfo = true, onClickInfo, }) => {
+    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,
@@ -17486,6 +17868,21 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
         };
     }, [data?.svg, currentCenter, currentScale, currentDirection]);
     const isWeb = useMemo(() => platform === 'web', [platform]);
+    const activeTime = useMemo(() => {
+        if (data.create_ts && data.expiration_ts) {
+            return Math.floor((data.expiration_ts - data.create_ts) / (60 * 60 * 24));
+        }
+        return 0;
+    }, [data]);
+    const remainingTime = useMemo(() => {
+        const currentTime = Math.floor(Date.now() / 1000);
+        console.log('data.expiration_ts--', data.expiration_ts);
+        if (data.expiration_ts <= currentTime) {
+            return 0;
+        }
+        // 保留一位小数
+        return ((data.expiration_ts - currentTime) / (24 * 60 * 60)).toFixed(1);
+    }, [data]);
     // 初始化变换状态
     useEffect(() => {
         initializeTransform();
@@ -17503,6 +17900,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                     onEnd: (event) => {
                         event.preventDefault();
                         handleMouseUp();
+                        onDragEnd?.(transformedData);
                     },
                 }, platform);
                 document.body.style.userSelect = 'none';
@@ -17565,7 +17963,18 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
     };
     const selectionBoxWithoutOperation = () => {
         const selectionBoxPoints = calculateSelectionBoxPoints();
-        return (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
+        // 计算选择框的边界
+        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 (jsxs(Fragment, { children: [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);
@@ -17573,7 +17982,27 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                         }
                         : {
                             onMouseDown: handleMouseDownWithDisabled,
-                        }) }), jsx("circle", { cx: selectionBoxPoints[0].x, cy: selectionBoxPoints[0].y, r: "6", fill: "#9EA6BA", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[3].x, cy: selectionBoxPoints[3].y, r: "6", fill: "#9EA6BA", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[1].x, cy: selectionBoxPoints[1].y, r: "6", fill: "#9EA6BA", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[2].x, cy: selectionBoxPoints[2].y, r: "6", fill: "#9EA6BA", stroke: "none" })] }));
+                        }) }), jsx("circle", { cx: selectionBoxPoints[0].x, cy: selectionBoxPoints[0].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[3].x, cy: selectionBoxPoints[3].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[1].x, cy: selectionBoxPoints[1].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[2].x, cy: selectionBoxPoints[2].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), platform === PlatformType.H5 && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
+                        onClickInfo?.();
+                    }, children: 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: jsx("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: '10px',
+                                color: '#325069',
+                            }, children: jsxs("div", { children: ["Remaining Time: ", remainingTime] }) }) }) }))] }));
     };
     useEffect(() => {
         const isMove = isDragging || isRotating || isScaling;
@@ -17590,7 +18019,8 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
         transformedData?.direction,
         transformedData?.scale,
     ]);
-    return (jsxs("g", { ref: containerRef, className: `doodle-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsx(DoodleTransform, { data: transformedData, onSelect: onSelect, isSelected: isSelected }), !isSelected && isSelectedWithoutOperation && selectionBoxWithoutOperation(), isSelected &&
+    return (jsxs("g", { ref: containerRef, className: `doodle-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsx(DoodleTransform, { data: transformedData, onSelect: onSelect, isSelected: isSelected }), isSelected && isSelectedWithoutOperation && selectionBoxWithoutOperation(), isSelected &&
+                !isSelectedWithoutOperation &&
                 (() => {
                     const selectionBoxPoints = calculateSelectionBoxPoints();
                     // 计算 doodle 的边界框
@@ -17611,6 +18041,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                 onMouseDown: handleMouseDownWithDisabled,
                             }) }));
                 })(), isSelected &&
+                !isSelectedWithoutOperation &&
                 (() => {
                     const selectionBoxPoints = calculateSelectionBoxPoints();
                     // 计算选择框的边界
@@ -17621,10 +18052,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 (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
                                     ? {
@@ -17666,7 +18097,9 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                     }
                                     : {
                                         onMouseDown: handleScaleStartWithDisabled,
-                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) }), showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, children: jsxs("div", { style: {
+                                    }), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) }), showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
+                                    onClickInfo?.();
+                                }, children: jsxs("div", { style: {
                                         padding: '5px 6px',
                                         background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
                                         borderRadius: '10px',
@@ -17677,28 +18110,31 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
                                         fontSize: '12px',
                                         color: 'white',
                                         fontWeight: '400',
-                                    }, children: [jsxs("div", { children: [dimensions.height, "m \u00D7 ", dimensions.width, "m"] }), jsxs("div", { style: {
+                                        // transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
+                                    }, children: [jsxs("div", { children: [dimensions.width, " m \u00D7 ", dimensions.height, " m"] }), jsxs("div", { style: {
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 justifyContent: 'center',
                                                 gap: '10px',
-                                            }, children: [jsx("div", { children: "Active Time:3" }), jsx(SvgTransformArrow, {})] })] }) }))] }));
+                                            }, children: [jsxs("div", { children: ["Active Time: ", activeTime] }), jsx(SvgTransformArrow, {})] })] }) }))] }));
                 })()] }));
 };
 
 const DoodleElement = ({ data }) => {
-    const { editMapInfo, setEditMapInfo, onHandleEnterRecord } = useMapEditContext();
+    const { editMapInfo, setEditMapInfo, onHandleEnterRecord, onHandleEvent } = useMapEditContext();
     const { addHistory } = useHistoryHandle();
-    const { platform } = useCommonContext();
+    const { platform, doodleList } = useCommonContext();
     const isSelected = useMemo(() => {
-        if (platform === PlatformType.H5) {
-            if (editMapInfo.mobileMode !== MobileEditMode.START &&
-                editMapInfo?.selectElement?.id === data.id) {
-                return true;
-            }
-            return editMapInfo?.isShowDrag && editMapInfo?.selectElement?.id === data.id;
-        }
-        return editMapInfo?.isShowDrag && editMapInfo?.selectElement?.id === data.id;
+        // if (platform === PlatformType.H5) {
+        //   if (
+        //     editMapInfo.mobileMode !== MobileEditMode.START &&
+        //     editMapInfo?.selectElement?.id === data.id
+        //   ) {
+        //     return true;
+        //   }
+        //   return editMapInfo?.isShowDrag && editMapInfo?.selectElement?.id === data.id;
+        // }
+        return editMapInfo?.elementType && editMapInfo?.selectElement?.id === data.id;
     }, [editMapInfo, data]);
     const originData = useMemo(() => {
         if (editMapInfo?.selectElement?.id === data.id) {
@@ -17706,14 +18142,28 @@ const DoodleElement = ({ data }) => {
         }
         return data;
     }, [data, editMapInfo?.selectElement]);
+    const minScale = 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;
+        });
+        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 = useMemo(() => {
+        const isExistDoodle = Boolean(editMapInfo?.elementType && editMapInfo?.selectElement?.id === data.id && data?.id);
         if (platform === PlatformType.H5) {
-            if (editMapInfo.mobileMode === MobileEditMode.START &&
-                editMapInfo?.selectElement?.id === data.id) {
-                return true;
-            }
+            return editMapInfo.mobileMode === MobileEditMode.START && isExistDoodle;
         }
-        return false;
+        return isExistDoodle;
     }, [editMapInfo, platform, data]);
     const transformedElements = useMemo(() => {
         return transformSvgElements(data);
@@ -17723,9 +18173,8 @@ const DoodleElement = ({ data }) => {
         if (platform === PlatformType.H5) {
             // h5编辑模式下，
             // 如果是创建，只能选择新建的doodle
-            if ((editMapInfo.mobileMode === MobileEditMode.CREATE ||
-                editMapInfo.mobileMode === MobileEditMode.EDIT) &&
-                editMapInfo.elementType !== DataType.DOODLE) {
+            if (editMapInfo.mobileMode === MobileEditMode.CREATE ||
+                editMapInfo.mobileMode === MobileEditMode.EDIT) {
                 return;
             }
             // 如果是编辑的话
@@ -17746,7 +18195,14 @@ const DoodleElement = ({ data }) => {
         })?.then(() => {
             setEditMapInfo((prev) => ({
                 ...prev,
-                historyList: [data],
+                historyList: [
+                    {
+                        selectElement: {
+                            ...data,
+                            transformedPoints: transformedElements,
+                        },
+                    },
+                ],
                 currentHistoryIndex: 0,
                 selectElement: {
                     ...data,
@@ -17759,6 +18215,16 @@ const DoodleElement = ({ data }) => {
         });
     }, [data, onHandleEnterRecord, platform, editMapInfo]);
     const handleCancel = useCallback(() => {
+        if (platform === PlatformType.H5) {
+            setEditMapInfo((prev) => ({
+                ...prev,
+                selectElement: null,
+            }));
+            addHistory({
+                selectElement: null,
+            });
+            return;
+        }
         setEditMapInfo((prev) => ({
             ...prev,
             editMap: false,
@@ -17767,6 +18233,9 @@ const DoodleElement = ({ data }) => {
             isShowDrag: false,
         }));
     }, []);
+    const handleClickInfo = useCallback(() => {
+        onHandleEvent?.(ClickEventType.DOODLE_ACTIVE_TIME);
+    }, [onHandleEvent]);
     // const handleDragMove = useCallback(
     //   (data: DoodleData) => {
     //     setEditMapInfo((prev: EditMapInfo) => ({
@@ -17794,7 +18263,8 @@ const DoodleElement = ({ data }) => {
             },
         });
     }, [transformedElements]);
-    return (jsx(DoodleTransformWrapper, { data: originData, onTransformChange: handleTransformChange, isSelected: isSelected, isSelectedWithoutOperation: isSelectedWithoutOperation, onSelect: handleSelect, onCancel: handleCancel, onDragEnd: handleDragEnd, showInfo: platform === PlatformType.H5 }));
+    console.log('isSelectedWithoutOperation--->', editMapInfo, isSelectedWithoutOperation, isSelected);
+    return (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__default.memo(({ type, data, interactive = false }) => {
@@ -17839,9 +18309,9 @@ const GElement = ({ type, children }) => {
     return jsx("g", { id: `layer-${type}`, children: children }, type);
 };
 
-var css_248z$d = ".index-module_mapEdit__XC5Gw {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  cursor: default;\n}\n.index-module_mapEdit__XC5Gw.index-module_createMode__14EPH {\n  cursor: crosshair;\n}\n.index-module_mapEdit__XC5Gw.index-module_notCreateCursor__1-OjF {\n  cursor: no-drop;\n}";
-var styles$d = {"mapEdit":"index-module_mapEdit__XC5Gw","createMode":"index-module_createMode__14EPH","notCreateCursor":"index-module_notCreateCursor__1-OjF"};
-styleInject(css_248z$d);
+var css_248z$1 = ".index-module_mapEdit__XC5Gw {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  cursor: default;\n}\n.index-module_mapEdit__XC5Gw.index-module_createMode__14EPH {\n  cursor: crosshair;\n}\n.index-module_mapEdit__XC5Gw.index-module_notCreateCursor__1-OjF {\n  cursor: no-drop;\n}";
+var styles$1 = {"mapEdit":"index-module_mapEdit__XC5Gw","createMode":"index-module_createMode__14EPH","notCreateCursor":"index-module_notCreateCursor__1-OjF"};
+styleInject(css_248z$1);
 
 var classnames = {exports: {}};
 
@@ -17924,22 +18394,18 @@ var classnamesExports = classnames.exports;
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const ChannelClipPath = React__default.memo(() => {
-    const { svgElementDatas, svgRef } = useSvgEditContext();
-    const { editMapInfo } = useMapEditContext();
+    const { svgViewBox } = useCommonContext();
+    const { svgElementDatas } = useSvgEditContext();
     const boundaryData = svgElementDatas?.[DataType.BOUNDARY] || [];
-    useEffect(() => {
-        console.log('ChannelClipPath', svgElementDatas);
-    }, [svgElementDatas]);
-    // console.log('ChannelClipPath refresh', svgElementDatas, editMapInfo);
     const [minX, minY, maxX, maxY] = useMemo(() => {
-        const baseVal = svgRef?.viewBox.baseVal;
+        const baseVal = svgViewBox;
         return [
             baseVal?.x || 0,
             baseVal?.y || 0,
             baseVal?.x + (baseVal?.width || 0),
             baseVal?.y + (baseVal?.height || 0),
         ];
-    }, [svgRef?.viewBox.baseVal?.x]);
+    }, [svgViewBox]);
     /**
      * 判断多边形是否为逆时针方向
      * 使用叉积法计算多边形的有向面积
@@ -18839,7 +19305,7 @@ function usePolygonDrawing(options = {}) {
     const [mousePos, setMousePos] = useState(null);
     const { editMapInfo, setEditMapInfo } = useMapEditContext();
     const { checkCanNotCreateAtPosition } = useCheckElement();
-    const { addHistory, clearHistory } = useHistoryHandle();
+    const { addHistory} = useHistoryHandle();
     const points = useMemo(() => {
         console.log('points->', editMapInfo?.selectElement?.points);
         return editMapInfo?.selectElement?.points?.map((item) => ({ x: item[0], y: item[1] })) || [];
@@ -18893,8 +19359,13 @@ function usePolygonDrawing(options = {}) {
             setEditMapInfo({
                 ...editMapInfo,
                 createMode: CreateStatus.COMPLETED,
+                historyList: [
+                    {
+                        selectElement: editMapInfo.selectElement,
+                    },
+                ],
+                currentHistoryIndex: 0,
             });
-            clearHistory();
         }
     }, [points.length, editMapInfo]);
     const reset = useCallback(() => {
@@ -19027,27 +19498,37 @@ const getScreenCenterSvgPoint = (svgElement, mapInstance) => {
  */
 const CreateObstacleElement = forwardRef(({ enabled = false, svgElement, onPointsChange, styles, points }, ref) => {
     const { mapRef } = useCommonContext();
+    const { checkCanNotCreateAtPosition } = useCheckElement();
     // 使用固定的样式，确保能正常渲染
     // 在十字准心位置添加点
     const addPoint = 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 = useCallback(() => {
@@ -19081,7 +19562,7 @@ const CreateObstacleElement = forwardRef(({ enabled = false, svgElement, onPoint
     if (!enabled || points.length === 0) {
         return null;
     }
-    return (jsx(PolygonElement, { coordinates: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 2, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
+    return (jsx(PolygonElement, { points: points.map((p) => [p.x, p.y, 2]), fillColor: styles.fillColor, fillOpacity: 0.3, strokeColor: styles.strokeColor, strokeWidth: 2, strokeOpacity: 1, createMode: true, showPoints: true, editMode: false, completed: true, draggable: false }));
 });
 CreateObstacleElement.displayName = 'CreateObstacleElement';
 
@@ -19134,10 +19615,10 @@ const useCreateVisionOffElement = () => {
 
 const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChange }, ref) => {
     const pointManagerRef = useRef(null);
-    const { editMapInfo, setEditMapInfo } = useMapEditContext();
-    const { getVisionOffPoints } = useCreateVisionOffElement();
+    const { editMapInfo, setEditMapInfo, onSelectElement } = useMapEditContext();
+    const { getVisionOffPoints, centerPoint } = useCreateVisionOffElement();
     const { svgElementDatas } = useSvgEditContext();
-    const { checkCanNotCreateAtPosition } = useCheckElement();
+    const { checkCanNotCreateAtPosition, checkDoodle } = useCheckElement();
     const svgRef = useRef(null);
     const containerRef = useRef(null);
     const { platform } = useCommonContext();
@@ -19152,6 +19633,24 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
     const isCreating = useMemo(() => {
         return editMapInfo.createMode === CreateStatus.CREATING;
     }, [editMapInfo.createMode]);
+    const centerBounds = useMemo(() => {
+        if (!svgRef || !centerPoint)
+            return null;
+        const elementWidth = 50 * 10;
+        const [minX, minY, maxX, maxY] = [
+            centerPoint[0] - elementWidth / 2,
+            centerPoint[1] - elementWidth / 2,
+            centerPoint[0] + elementWidth / 2,
+            centerPoint[1] + elementWidth / 2,
+        ];
+        const elementPoints = [
+            [minX, minY],
+            [minX, maxY],
+            [maxX, maxY],
+            [maxX, minY],
+        ];
+        return elementPoints;
+    }, [centerPoint]);
     // 调整SVG大小的函数
     const adjustSvgSize = (layoutData) => {
         const padding = 20; // 添加一些边距以避免内容贴边
@@ -19234,1761 +19733,231 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
         addHistory({
             selectElement: editMapInfo.selectElement,
             allVisionOffPoints,
-        });
-    };
-    useEffect(() => {
-        onEditInfoMapChange?.(editMapInfo);
-    }, [editMapInfo]);
-    // 暴露ref方法
-    useImperativeHandle(ref, () => ({
-        adjustSvgSize,
-        getSvgElement: () => svgRef.current,
-        getContainerElement: () => containerRef.current,
-        updateEditMapInfo,
-        resetEditMapInfo,
-        getEditMapInfo,
-        // 十字准心点管理器方法
-        addCreateObstaclePoint: () => {
-            return pointManagerRef.current?.addPoint();
-        },
-        undoCreateObstaclePoint: () => {
-            pointManagerRef.current?.undoLastPoint();
-        },
-        clearCreateObstaclePoints: () => {
-            pointManagerRef.current?.clear();
-        },
-        getCreateObstaclePoints: () => pointManagerRef.current?.getPoints() || [],
-        getCreateObstaclePointCount: () => pointManagerRef.current?.getPointCount() || 0,
-        // h5进入视觉失效区编辑模式
-        enterVisionOffEditMode,
-        // h5中添加视觉失效区
-        addVisionOffPoint,
-        // 重做
-        redo,
-        // 撤销
-        undo,
-        // 清空历史记录
-        clearHistory,
-        addHistory,
-    }));
-    // 初始化多边形绘制 Hook
-    const { onSvgClick, onSvgMouseMove, onPointClick, points, completed, mousePos, updatePoints } = usePolygonDrawing({ createMode: isCreating });
-    // 处理删除顶点
-    const handleCreateVertexDelete = (vertexIndex) => {
-        const newPoints = points?.filter((_, index) => index !== vertexIndex);
-        updatePoints(newPoints);
-    };
-    // 基于鼠标位置的检查结果
-    const showNotCreateCursor = useMemo(() => {
-        if (!mousePos)
-            return false;
-        return checkCanNotCreateAtPosition(mousePos);
-    }, [mousePos, checkCanNotCreateAtPosition]);
-    console.log('editMapInfo--->', editMapInfo);
-    return (jsx("div", { ref: containerRef, className: classNames(styles$d.mapEdit, {
-            [styles$d.createMode]: isCreating,
-            [styles$d.notCreateCursor]: showNotCreateCursor,
-        }), style: {
-            display: editMap ? 'block' : 'none',
-        }, children: jsxs("svg", { style: {
-                position: 'absolute',
-                left: '50%',
-                top: '50%',
-                transform: 'translate(-50%, -50%)',
-                // cursor: createMode ? 'crosshair' : editMode ? 'default' : 'move',
-                // pointerEvents: 'auto', // 关键：允许接收鼠标事件
-            }, xmlns: "http://www.w3.org/2000/svg", "shape-rendering": "geometricPrecision", "text-rendering": "geometricPrecision", "image-rendering": "optimizeQuality", ref: svgRef, onClick: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgClick : undefined, onMouseMove: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgMouseMove : undefined, children: [jsxs("defs", { children: [jsx("filter", { id: "vertex-tooltip-shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: jsx("feDropShadow", { dx: "2", dy: "2", stdDeviation: "2", floodColor: "#000", floodOpacity: "0.12" }) }), jsxs("filter", { id: `path-hover-${DataType.BOUNDARY}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: BOUNDARY_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.VISION_OFF}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: VISION_OFF_AREA_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.OBSTACLE}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: OBSTACLE_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] })] }), Object.keys(svgElementDatas)
-                    ?.sort?.((a, b) => {
-                    const aVal = a === editMapInfo.elementType ? 1 : 0;
-                    const bVal = b === editMapInfo.elementType ? 1 : 0;
-                    return aVal - bVal;
-                })
-                    ?.map((key) => {
-                    const elements = svgElementDatas[key] || [];
-                    return (jsxs(GElement, { type: key, data: elements, children: [key === 'channel' && jsx(ChannelClipPath, {}), elements.map((item) => (jsx(SvgElement, { type: key, data: item }, item?.id)))] }, key));
-                }), platform === PlatformType.WEB &&
-                    editMapInfo.createMode &&
-                    editMapInfo.elementType !== DataType.DOODLE &&
-                    editMapInfo.elementType !== DataType.VISION_OFF &&
-                    (points.length > 0 || editMapInfo?.selectElement?.points?.length > 0) && (jsx(PolygonElement, { coordinates: points?.length > 0
-                        ? points.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) => {
-                        // 创建模式下的坐标变化（拖拽时）
-                        // 实时更新当前绘制的多边形
-                        updatePoints(newCoords.map((coord) => ({ x: coord[0], y: coord[1] })));
-                    }, svgRef: svgRef })), platform === PlatformType.WEB &&
-                    editMapInfo.createMode &&
-                    editMapInfo.elementType === DataType.VISION_OFF &&
-                    (points.length > 0 || editMapInfo?.selectElement?.points?.length > 0) && (jsx(VisionOffElement, { data: {
-                        ...editMapInfo?.selectElement,
-                        style: {
-                            fillColor: createElementStyle.fillColor,
-                            lineColor: createElementStyle.lineColor,
-                            lineWidth: createElementStyle.lineWidth,
-                        },
-                    } })), platform === PlatformType.WEB &&
-                    editMapInfo.createMode &&
-                    editMapInfo?.selectElement?.svg && (jsx(DoodleElement, { data: { ...editMapInfo?.selectElement } })), platform === PlatformType.H5 &&
-                    editMapInfo.elementType === DataType.OBSTACLE &&
-                    editMapInfo.mobileMode === MobileEditMode.CREATE && (jsx(CreateObstacleElement, { ref: pointManagerRef, styles: {
-                        fillColor: '#FF7133',
-                        strokeColor: '#FF7133',
-                    }, points: (editMapInfo?.selectElement?.points || []).map((p) => ({
-                        x: p[0],
-                        y: p[1],
-                    })), enabled: true, svgElement: svgRef.current, onPointsChange: (newPoints) => {
-                        const new_points = newPoints.map((p) => [p.x, p.y, 2]);
-                        setEditMapInfo((prev) => {
-                            return {
-                                ...prev,
-                                selectElement: {
-                                    ...prev.selectElement,
-                                    points: new_points,
-                                },
-                                elementType: DataType.OBSTACLE,
-                                mobileMode: MobileEditMode.CREATE,
-                            };
-                        });
-                        addHistory({
-                            selectElement: { ...editMapInfo?.selectElement, points: new_points },
-                        });
-                    } })), platform === PlatformType.H5 &&
-                    editMapInfo.elementType === DataType.VISION_OFF &&
-                    (editMapInfo.mobileMode === MobileEditMode.CREATE ||
-                        editMapInfo.mobileMode === MobileEditMode.EDIT) &&
-                    editMapInfo.allVisionOffPoints?.length > 0 &&
-                    editMapInfo.allVisionOffPoints.map((item) => (jsx(VisionOffElement, { data: {
-                            level: 100,
-                            renderType: RenderType.POLYGON,
-                            type: DataType.VISION_OFF,
-                            // ...editMapInfo.selectElement,
-                            originalData: {
-                                points: item.points,
-                                id: item.id,
-                                name: '',
-                                type: 'VISION_OFF_AREA',
-                            },
-                            style: {
-                                fillColor: createElementStyle.fillColor,
-                                lineColor: createElementStyle.lineColor,
-                                lineWidth: createElementStyle.lineWidth,
-                            },
-                            points: item.points,
-                            id: item.id,
-                        } })))] }) }));
-});
-SvgEditMap.displayName = 'SvgEditMap';
-
-var css_248z$c = ".index-module_addEntry__QsQHD {\n  position: absolute;\n  right: 8px;\n  top: 8px;\n  cursor: pointer;\n  z-index: 10;\n}\n.index-module_addEntry__QsQHD .index-module_icon__qIgA4 {\n  padding: 6px;\n  border-radius: 8px;\n  background: #fff;\n  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.2);\n}\n\n.index-module_addItem__mglwZ {\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  justify-content: flex-start;\n  cursor: pointer;\n}\n.index-module_addItem__mglwZ:hover {\n  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);\n  border-radius: 4px;\n}\n.index-module_addItem__mglwZ:not(:last-child) {\n  margin-bottom: 6px;\n}\n.index-module_addItem__mglwZ .index-module_icon__qIgA4 {\n  width: 16px;\n  height: 16px;\n}\n.index-module_addItem__mglwZ .index-module_label__QqZ-9 {\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 16px;\n  color: rgb(158, 158, 158);\n  margin-left: 4px;\n}";
-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 SvgAddEntry = function SvgAddEntry(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
-  }, props), _rect$2 || (_rect$2 = /*#__PURE__*/React.createElement("rect", {
-    width: 10.95,
-    height: 10.95,
-    x: 10.613,
-    y: 3.15,
-    fill: "#1F1F1F",
-    stroke: "url(#add-entry_svg__a)",
-    strokeWidth: 0.3,
-    opacity: 0.795,
-    rx: 1.05
-  })), /*#__PURE__*/React.createElement("foreignObject", {
-    width: 23.468,
-    height: 20.501,
-    x: -1.543,
-    y: 3.499
-  }, /*#__PURE__*/React.createElement("div", {
-    xmlns: "http://www.w3.org/1999/xhtml",
-    style: {
-      backdropFilter: "blur(1.63px)",
-      clipPath: "url(#add-entry_svg__b)",
-      height: "100%",
-      width: "100%"
-    }
-  })), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
-    fill: "#1F1F1F",
-    stroke: "url(#add-entry_svg__c)",
-    strokeWidth: 0.3,
-    d: "M9.302 7.402a1.05 1.05 0 0 1 1.778 0l7.27 11.578a1.05 1.05 0 0 1-.89 1.608H2.92a1.05 1.05 0 0 1-.889-1.608z",
-    "data-figma-bg-blur-radius": 3.262
-  })), _defs$3 || (_defs$3 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "add-entry_svg__a",
-    x1: 16.851,
-    x2: 20.384,
-    y1: 10.392,
-    y2: 4.767,
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    stopColor: "#fff",
-    stopOpacity: 0.01
-  }), /*#__PURE__*/React.createElement("stop", {
-    offset: 1,
-    stopColor: "#fff"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "add-entry_svg__c",
-    x1: 21.47,
-    x2: 12.314,
-    y1: 15.036,
-    y2: 5.769,
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    stopColor: "#fff",
-    stopOpacity: 0.01
-  }), /*#__PURE__*/React.createElement("stop", {
-    offset: 1,
-    stopColor: "#fff"
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "add-entry_svg__b",
-    transform: "translate(1.543 -3.499)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M9.302 7.402a1.05 1.05 0 0 1 1.778 0l7.27 11.578a1.05 1.05 0 0 1-.89 1.608H2.92a1.05 1.05 0 0 1-.889-1.608z"
-  })))));
-};
-
-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 SvgBoundary = function SvgBoundary(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.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",
-    clipRule: "evenodd",
-    opacity: 0.602
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
-    fill: "#1DBEAC",
-    d: "M12.615 2.923c.255 0 .462.207.462.462v9.23a.46.46 0 0 1-.462.462h-9.23a.46.46 0 0 1-.462-.462v-9.23c0-.255.207-.462.462-.462z",
-    opacity: 0.152
-  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
-    fill: "#1DBEAC",
-    fillRule: "evenodd",
-    d: "M2.833 2a.833.833 0 1 0 0 1.667.833.833 0 0 0 0-1.667m0 10.333a.833.833 0 1 0 0 1.667.833.833 0 0 0 0-1.667m9.5-9.5a.833.833 0 1 1 1.667 0 .833.833 0 0 1-1.667 0m.834 9.5a.833.833 0 1 0 0 1.667.833.833 0 0 0 0-1.667M6.49 10.333s.335-4.388 3.451-5.666c-1.725 2.439-1.725 5.666-1.725 5.666zm2.305 0s.548-4.108 2.872-4.816c-1.071 1.7-1.071 4.816-1.071 4.816zM6.87 5.517c-2.384 1.42-2.537 4.816-2.537 4.816h1.582s-.21-2.698.955-4.816",
-    clipRule: "evenodd"
-  })));
-};
-
-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 SvgLimitIsland = function SvgLimitIsland(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.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.createElement("path", {
-    fill: "#FF5D17",
-    d: "M11.195 3.637c-.863.109-.623 2.341.354 3.024 1.603.79 2.575-.099 2.517-.459-.072-.445-.983-1.014-2.029-.274.455-.92-.08-2.387-.842-2.291M10.004 9.084l.308.87c1.202.178 2.002.494 2.002.856 0 .556-1.887 1.007-4.215 1.007-2.329 0-4.216-.451-4.217-1.007 0-.334.683-.63 1.733-.812l.593-1.679zm-.777-2.197.518 1.463-3.312-.667.443-1.253zM7.467 4.76a.535.535 0 0 1 1.01 0l.493 1.398L7.1 5.794z"
-  })), _rect$1 || (_rect$1 = /*#__PURE__*/React.createElement("rect", {
-    width: 14.237,
-    height: 10.667,
-    x: 0.882,
-    y: 2.667,
-    fill: "#F50",
-    opacity: 0.15,
-    rx: 2
-  })), _rect2$1 || (_rect2$1 = /*#__PURE__*/React.createElement("rect", {
-    width: 14.237,
-    height: 10.667,
-    x: 0.882,
-    y: 2.667,
-    stroke: "#FF5D17",
-    strokeWidth: 0.867,
-    rx: 2
-  })));
-};
-
-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); }
-var SvgVisionFence = function SvgVisionFence(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
-    width: 14.333,
-    height: 10.667,
-    x: 0.833,
-    y: 2.667,
-    fill: "#B1D9FF",
-    rx: 2.667
-  })), _rect2 || (_rect2 = /*#__PURE__*/React.createElement("rect", {
-    width: 13.333,
-    height: 9.667,
-    x: 1.333,
-    y: 3.167,
-    stroke: "#5C9DFF",
-    strokeDasharray: "6.33 6.33",
-    rx: 1.333
-  })), _rect3 || (_rect3 = /*#__PURE__*/React.createElement("rect", {
-    width: 6,
-    height: 6,
-    x: 5,
-    y: 4.833,
-    fill: "#B1D9FF",
-    rx: 3
-  })), /*#__PURE__*/React.createElement("mask", {
-    id: "visionFence_svg__a",
-    width: 6,
-    height: 6,
-    x: 5,
-    y: 5,
-    maskUnits: "userSpaceOnUse",
-    style: {
-      maskType: "alpha"
-    }
-  }, _rect4 || (_rect4 = /*#__PURE__*/React.createElement("rect", {
-    width: 5.333,
-    height: 5.333,
-    x: 5.333,
-    y: 5.5,
-    fill: "#B1D9FF",
-    rx: 2.667
-  }))), _g$3 || (_g$3 = /*#__PURE__*/React.createElement("g", {
-    fill: "#5C9DFF",
-    mask: "url(#visionFence_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "m8.838 3.395.636.636-5.42 5.421-.637-.636zM9.896 4.452l.637.637-5.422 5.42-.636-.635zM10.954 5.51l.636.637-5.421 5.421-.636-.636zM12.172 6.547l.636.637-5.421 5.42-.636-.635z"
-  }))));
-};
-
-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); }
-var SvgDoodle = function SvgDoodle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#doodle_svg__a)"
-  }, /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#doodle_svg__b)"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: 14.237,
-    height: 10.667,
-    x: 0.333,
-    y: 4.332,
-    fill: "#CBFCF7",
-    stroke: "#9AEEE5",
-    strokeWidth: 0.867,
-    rx: 2
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#F2FFFD",
-    d: "M1.374 9.88a4 4 0 0 0 4 4h.546l.514-1.524c.073-.216-.087-.443-.312-.48-1.415-.229-3.6-1.485-4.399-4.639a.35.35 0 0 0-.135-.197c-.138.405-.214.84-.214 1.293z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#50D0C2",
-    d: "M15.814 2.13c-.352 2.267-6.501 9.305-8.003 9.43a.282.282 0 0 1-.238-.455L15.565.828c.398.332.293 1.015.249 1.303"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#50D0C2",
-    d: "M14.208.95c-2.147.946-7.434 8.618-7.15 10.058a.2.2 0 0 0 .017.047.295.295 0 0 0 .498.051L15.565.826c-.437-.28-1.084.003-1.357.123"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#9CE7DE",
-    d: "M7.76 11.558a.282.282 0 0 1-.187-.453.295.295 0 0 1-.498-.05.2.2 0 0 1-.016-.048c-.108-.55.598-2.01 1.63-3.658l2.297 1.689c-1.348 1.415-2.6 2.473-3.174 2.522a.2.2 0 0 1-.053-.002"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#50D0C2",
-    d: "M5.602 11.02c.658-.873 1.769-1.145 2.482-.607.714.537.759 1.68.1 2.553-.657.873-2.733.94-2.733.94s-.507-2.013.15-2.886"
-  })))), _defs$2 || (_defs$2 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "doodle_svg__a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h16v16H0z"
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "doodle_svg__b"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h16v16H0z"
-  })))));
-};
-
-var HandleElementMapType;
-(function (HandleElementMapType) {
-    HandleElementMapType["name"] = "name";
-    HandleElementMapType["focus"] = "focus";
-    HandleElementMapType["delete"] = "delete";
-    HandleElementMapType["timePeriod"] = "timePeriod";
-    HandleElementMapType["area"] = "area";
-    HandleElementMapType["dooleExist"] = "dooleExist";
-})(HandleElementMapType || (HandleElementMapType = {}));
-const DATE_TYPE_MAP = [
-    { type: DataType.BOUNDARY, label: 'Boundary', icon: jsx(SvgBoundary, {}) },
-    {
-        type: DataType.OBSTACLE,
-        paramType: RecordTypeEnum.OBSTACLE,
-        label: 'Off-limit island',
-        icon: jsx(SvgLimitIsland, {}),
-    },
-    // { type: DataType.CHANNEL, label: 'Channel', icon: <ChannelIcon /> },
-    {
-        type: DataType.VISION_OFF,
-        paramType: RecordTypeEnum.VISI_OFF,
-        label: 'VisionFence-off zone',
-        icon: jsx(SvgVisionFence, {}),
-    },
-    {
-        type: DataType.DOODLE,
-        paramType: RecordTypeEnum.DOODLE,
-        label: 'Doodle',
-        icon: jsx(SvgDoodle, {}),
-    },
-];
-({
-    [DataType.BOUNDARY]: {
-        },
-    [DataType.OBSTACLE]: {
-        },
-    [DataType.CHANNEL]: {
-        },
-    [DataType.VISION_OFF]: {
-        },
-    [DataType.DOODLE]: {
-        },
-    [DataType.PATH]: undefined,
-    [DataType.ANTENNA]: undefined,
-    [DataType.CHARGING_PILE]: undefined,
-});
-
-var css_248z$b = ".ant-modal .ant-modal-body .ant-modal-confirm-title {\n  text-align: center;\n}\n.ant-modal .ant-modal-body .ant-modal-confirm-btns {\n  margin-top: 24px;\n}\n.ant-modal .ant-modal-body .ant-modal-confirm-btns .ant-btn + .ant-btn {\n  margin-left: 24px;\n}\n\n.index-module_modal__fkxhn.index-module_center__d461v .ant-modal-title {\n  text-align: center;\n  padding: 10px 20px 0;\n  font-size: 18px;\n}\n.index-module_modal__fkxhn.index-module_center__d461v .ant-modal-header {\n  margin-bottom: 24px;\n}\n.index-module_modal__fkxhn.index-module_center__d461v .ant-modal .ant-modal-footer {\n  margin-top: 24px;\n}\n.index-module_modal__fkxhn.index-module_center__d461v .ant-modal .ant-modal-footer .ant-btn + .ant-btn {\n  margin-left: 24px;\n}";
-var styles$b = {"modal":"index-module_modal__fkxhn","center":"index-module_center__d461v"};
-styleInject(css_248z$b);
-
-const CustomModal = ({ children, titleCenter, hasMinHeight, height, ...props }) => {
-    return (jsx(Modal, { centered: true, styles: {
-            body: {
-                maxHeight: height ? `${height}px` : 'calc(100vh - 200px)',
-                minHeight: hasMinHeight ? '520px' : undefined,
-                overflow: 'auto',
-            },
-        }, wrapClassName: classNames(styles$b.modal, {
-            [styles$b.center]: titleCenter,
-        }), 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-"};
-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.createElement("svg", _extends$9({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 14,
-    height: 12,
-    fill: "none"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.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] = useState(null);
-    const noNeed = useMemo(() => {
-        return '1234567890QWERTYUIOPASDFGHJKLZXCVBNM';
-    }, []);
-    // 选择 Doodle
-    const handleSelectDoodle = useCallback((item) => {
-        setSelectedDoodle(item);
-    }, []);
-    // 确认选择
-    const handleConfirm = useCallback(() => {
-        if (selectedDoodle) {
-            const newDoodle = initDoodle();
-            const svg = selectedDoodle?.svgStr;
-            const minLength = selectedDoodle.minLength;
-            const parseSvg = SvgParserNative.parseSvg(svg);
-            const svgMinLength = Math.min(parseSvg.width, parseSvg.height) / SCALE_FACTOR;
-            // 使用获取到的 SVG 内容，如果没有获取到则使用 URL
-            newDoodle.svg = svg;
-            newDoodle.scale = minLength / svgMinLength;
-            newDoodle.direction = 0;
-            newDoodle.center = restorePoint(centerPoint);
-            onHandleEnterRecord?.({
-                type: 1,
-                function: 0,
-            })?.then(() => {
-                setEditMapInfo({
-                    ...editMapInfo,
-                    historyList: [newDoodle],
-                    currentHistoryIndex: 0,
-                    createMode: CreateStatus.COMPLETED,
-                    elementType: DataType.DOODLE,
-                    selectElement: newDoodle,
-                    isShowDrag: true,
-                });
-                setOpen(false);
-                onSelect?.(svg);
-            }, (error) => {
-                message.error('Save failed, please try again');
-            });
-        }
-    }, [selectedDoodle, setEditMapInfo, editMapInfo, setOpen, onSelect, centerPoint]);
-    return (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: jsxs("div", { className: styles$a.doodleModal, children: [jsx("div", { className: styles$a.title, children: "Please select a doodle" }), jsx("div", { className: styles$a.content, children: doodleList
-                        ?.filter((item) => !noNeed.includes(item.name))
-                        .map((item) => {
-                        return (jsxs("div", { className: classNames(styles$a.item, {
-                                [styles$a.active]: selectedDoodle?.svg === item.svg,
-                            }), onClick: () => handleSelectDoodle(item), children: [jsx("div", { className: styles$a.svgImage, dangerouslySetInnerHTML: { __html: item?.svgStr } }), jsx("div", { className: styles$a.selectIcon, children: jsx(SvgSelect, {}) })] }, item.id));
-                    }) })] }) }));
-};
-
-const AddEntry = ({ doodleList, disabledObstacles, editMap }) => {
-    const { svgRef } = useSvgEditContext();
-    const { editMapInfo, setEditMapInfo, onHandleEnterRecord } = useMapEditContext();
-    const divRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [doodleOpen, setDoodleOpen] = useState(false);
-    const centerPoint = useMemo(() => {
-        if (!svgRef)
-            return null;
-        const baseVal = svgRef?.viewBox.baseVal;
-        const center = [
-            baseVal?.x + (baseVal?.width || 0) / 2,
-            baseVal?.y + (baseVal?.height || 0) / 2,
-        ];
-        return center;
-    }, [svgRef?.viewBox?.baseVal?.x]);
-    const centerBounds = useMemo(() => {
-        if (!svgRef)
-            return null;
-        const elementWidth = 50 * 10;
-        const [minX, minY, maxX, maxY] = [
-            centerPoint[0] - elementWidth / 2,
-            centerPoint[1] - elementWidth / 2,
-            centerPoint[0] + elementWidth / 2,
-            centerPoint[1] + elementWidth / 2,
-        ];
-        const elementPoints = [
-            [minX, minY],
-            [minX, maxY],
-            [maxX, maxY],
-            [maxX, minY],
-        ];
-        return elementPoints;
-    }, [centerPoint]);
-    const addNewElement = useCallback((type, item) => {
-        setOpen(false);
-        let newElement = null;
-        if (type === DataType.BOUNDARY) {
-            newElement = initBoundary();
-        }
-        else if (type === DataType.OBSTACLE) {
-            newElement = initObstacle();
-        }
-        else if (type === DataType.CHANNEL) {
-            newElement = initChannel();
-        }
-        else if (type === DataType.VISION_OFF) {
-            newElement = initVisionOff();
-            newElement.points = centerBounds;
-        }
-        else if (type === DataType.DOODLE) {
-            return setDoodleOpen(true);
-        }
-        onHandleEnterRecord?.({
-            type: item?.paramType,
-            function: item?.type === DataType.OBSTACLE ? 0 : undefined,
-        })?.then(() => {
-            setEditMapInfo({
-                ...editMapInfo,
-                historyList: [newElement],
-                currentHistoryIndex: 0,
-                createMode: type === DataType.VISION_OFF ? CreateStatus.COMPLETED : CreateStatus.CREATING,
-                elementType: type,
-                selectElement: newElement,
-            });
-        }, (errorText) => {
-            message.error('Save failed, please try again');
-        });
-    }, [centerBounds]);
-    const addItems = useMemo(() => {
-        return DATE_TYPE_MAP?.filter((item) => {
-            if (item.type === DataType.OBSTACLE) {
-                return !disabledObstacles;
-            }
-            return item.type !== DataType.BOUNDARY;
-        });
-    }, [disabledObstacles]);
-    // console.log('addEntry->', editMapInfo, editMap);
-    if (editMapInfo.createMode || editMapInfo.editMap || !editMap) {
-        return null;
-    }
-    return (jsxs("div", { ref: divRef, className: styles$c.addEntry, children: [jsx(Popover, { open: open, onOpenChange: setOpen, arrow: false, placement: "leftTop", content: addItems?.map((item) => {
-                    return (jsxs("div", { className: styles$c.addItem, onClick: () => {
-                            addNewElement(item.type, item);
-                        }, children: [jsx("div", { className: styles$c.icon, children: item?.icon }), jsx("div", { className: styles$c.label, children: item?.label })] }, item.label));
-                }), children: jsx("div", { className: styles$c.icon, children: jsx(SvgAddEntry, {}) }) }), jsx(DoodleModal, { centerPoint: centerPoint, doodleList: doodleList, open: doodleOpen, onOk: () => setDoodleOpen(false), setOpen: setDoodleOpen })] }));
-};
-
-var css_248z$9 = ".index-module_handleElementInfo__vWIaf {\n  position: absolute;\n  right: 0;\n  top: 0;\n  border-radius: 8px;\n  padding: 4px 8px;\n  background: #fff;\n  width: 265px;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 {\n  position: absolute;\n  left: -96px;\n  top: 0;\n  display: flex;\n  gap: 12px;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_undo__lPY1X,\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_redo__EU5u- {\n  background: #fff;\n  border-radius: 8px;\n  padding: 6px;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_undo__lPY1X:not(.index-module_disabled__w6gCJ):hover,\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_redo__EU5u-:not(.index-module_disabled__w6gCJ):hover {\n  opacity: 0.8;\n  cursor: pointer;\n}\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_undo__lPY1X.index-module_disabled__w6gCJ,\n.index-module_handleElementInfo__vWIaf .index-module_undoAndRedo__EKeA8 .index-module_redo__EU5u-.index-module_disabled__w6gCJ {\n  color: #d8d8d8;\n}\n.index-module_handleElementInfo__vWIaf .index-module_nameEdit__eVzQ- {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0 0 4px 0;\n}\n.index-module_handleElementInfo__vWIaf .index-module_nameEdit__eVzQ- input {\n  padding: 2px 0;\n}\n.index-module_handleElementInfo__vWIaf .index-module_nameEdit__eVzQ- .index-module_edit__b0r9I {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_handleElementInfo__vWIaf .index-module_boundaryOther__FyJvt {\n  padding-top: 4px;\n  border-top: 1px solid rgb(197, 197, 197);\n}\n.index-module_handleElementInfo__vWIaf .index-module_handle__4mIxr {\n  border-top: 1px solid rgb(197, 197, 197);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 0;\n}\n\n.index-module_doodleInfo__bd2ua .index-module_time__1bUFf {\n  width: 100%;\n}\n.index-module_doodleInfo__bd2ua .index-module_exist__gWtNo {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n.index-module_doodleInfo__bd2ua .index-module_tip__1HNmj {\n  color: #ff3f33;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.index-module_obstacleInfo__w6Sod .index-module_areaInfo__-WJPL {\n  border-top: 1px solid rgb(197, 197, 197);\n}\n\n.index-module_areaInfo__-WJPL {\n  color: #9e9e9e;\n  width: 100%;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px; /* 114.286% */\n}\n.index-module_areaInfo__-WJPL .index-module_areaItem__fk-i2 {\n  display: flex;\n  justify-content: space-between;\n  padding: 6px 0;\n}\n\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM {\n  color: #1f1f1f;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n}\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM .index-module_otherItem__ATLFZ {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM .index-module_otherItem__ATLFZ .index-module_value__x3-se {\n  margin-left: auto;\n}\n.index-module_boundaryInfo__VfR-N .index-module_otherEdit__17SuM .index-module_otherItem__ATLFZ .index-module_icon__167WB {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_boundaryInfo__VfR-N .index-module_areaInfo__-WJPL {\n  border-top: 1px solid rgb(197, 197, 197);\n}";
-var styles$9 = {"handleElementInfo":"index-module_handleElementInfo__vWIaf","undoAndRedo":"index-module_undoAndRedo__EKeA8","undo":"index-module_undo__lPY1X","redo":"index-module_redo__EU5u-","disabled":"index-module_disabled__w6gCJ","nameEdit":"index-module_nameEdit__eVzQ-","handle":"index-module_handle__4mIxr","doodleInfo":"index-module_doodleInfo__bd2ua","time":"index-module_time__1bUFf","exist":"index-module_exist__gWtNo","tip":"index-module_tip__1HNmj","obstacleInfo":"index-module_obstacleInfo__w6Sod","areaInfo":"index-module_areaInfo__-WJPL","areaItem":"index-module_areaItem__fk-i2","boundaryInfo":"index-module_boundaryInfo__VfR-N","otherEdit":"index-module_otherEdit__17SuM","otherItem":"index-module_otherItem__ATLFZ","value":"index-module_value__x3-se","icon":"index-module_icon__167WB"};
-styleInject(css_248z$9);
-
-var css_248z$8 = ".index-module_infoHeader__l9F6q {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 8px 0;\n  border-bottom: 1px solid rgb(197, 197, 197);\n}\n.index-module_infoHeader__l9F6q .index-module_headerIcon__sK1hg {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_infoHeader__l9F6q .index-module_headerName__UGnrH {\n  margin-left: 4px;\n  color: rgb(158, 158, 158);\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 16px;\n}\n.index-module_infoHeader__l9F6q .index-module_headerHandle__ymh7f {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.index-module_infoHeader__l9F6q .index-module_headerHandle__ymh7f .index-module_focus__llcox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n.index-module_infoHeader__l9F6q .index-module_headerHandle__ymh7f .index-module_delete__hD4-Q {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n  cursor: pointer;\n}";
-var 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);
-
-var _path$6;
-function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
-var SvgFocus = function SvgFocus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
-    fill: "#FF5A00",
-    d: "M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m-1.733-4h-.022c-.728 0-1.306 0-1.77.038-.476.039-.878.12-1.246.307a3.17 3.17 0 0 0-1.384 1.384c-.187.367-.268.77-.307 1.246-.038.464-.038 1.042-.038 1.77v.022a.5.5 0 0 0 1 0c0-.755 0-1.292.035-1.711.033-.413.098-.67.201-.873.208-.408.54-.74.947-.947.203-.103.46-.167.873-.201.42-.034.956-.035 1.71-.035a.5.5 0 0 0 0-1m3.466 1c.756 0 1.292 0 1.711.035.413.033.67.098.873.201.408.208.74.54.947.947.103.203.167.46.201.873.034.42.035.956.035 1.71a.5.5 0 0 0 1 0v-.021c0-.728 0-1.306-.038-1.77-.039-.476-.12-.878-.307-1.246a3.17 3.17 0 0 0-1.384-1.384c-.368-.187-.77-.268-1.246-.307-.464-.038-1.042-.038-1.77-.038h-.022a.5.5 0 0 0 0 1M2.5 9.733a.5.5 0 0 0-1 0v.022c0 .728 0 1.306.038 1.77.039.476.12.878.307 1.246.304.596.788 1.08 1.384 1.384.367.187.77.268 1.246.307.464.038 1.042.038 1.77.038h.022a.5.5 0 0 0 0-1c-.755 0-1.292 0-1.711-.035-.413-.033-.67-.098-.873-.201a2.17 2.17 0 0 1-.947-.947c-.103-.203-.167-.46-.201-.873-.034-.42-.035-.956-.035-1.71m12 0a.5.5 0 0 0-1 0c0 .756 0 1.292-.035 1.711-.033.413-.098.67-.201.873-.208.408-.54.74-.947.947-.203.103-.46.167-.873.201-.42.034-.956.035-1.71.035a.5.5 0 0 0 0 1h.021c.728 0 1.306 0 1.77-.038.476-.039.878-.12 1.246-.307a3.17 3.17 0 0 0 1.384-1.384c.187-.368.268-.77.307-1.246.038-.464.038-1.042.038-1.77z"
-  })));
-};
-
-var _path$5;
-function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
-var SvgDelete = function SvgDelete(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
-    fill: "#FF5A00",
-    d: "M4.667 14q-.55 0-.942-.391a1.29 1.29 0 0 1-.392-.942V4h-.666V2.667H6V2h4v.667h3.333V4h-.666v8.667q0 .549-.392.942-.39.391-.942.391zM6 11.333h1.333v-6H6zm2.667 0H10v-6H8.667z"
-  })));
-};
-
-const Header = ({ handleDelete, handleFocus, showFocus = false, showDelete = true, type }) => {
-    const currentType = useMemo(() => {
-        return DATE_TYPE_MAP.find((item) => item.type === type);
-    }, [type]);
-    return (jsxs("div", { className: styles$8.infoHeader, children: [jsx("div", { className: styles$8.headerIcon, children: currentType?.icon }), jsx("div", { className: styles$8.headerName, children: currentType?.label }), jsxs("div", { className: styles$8.headerHandle, children: [showFocus && (jsx("div", { className: styles$8.focus, onClick: handleFocus, children: jsx(SvgFocus, {}) })), showDelete && (jsx("div", { className: styles$8.delete, onClick: handleDelete, children: jsx(SvgDelete, {}) }))] })] }));
-};
-
-var css_248z$7 = ".index-module_nameEdit__O5bL0 {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n}\n.index-module_nameEdit__O5bL0 .index-module_content__Bi2fa {\n  flex: 1;\n  line-height: 28px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.index-module_nameEdit__O5bL0 .index-module_edit__3yRM0 {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}";
-var styles$7 = {"nameEdit":"index-module_nameEdit__O5bL0","content":"index-module_content__Bi2fa","edit":"index-module_edit__3yRM0"};
-styleInject(css_248z$7);
-
-var _path$4;
-function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
-var SvgEdit = function SvgEdit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
-    fill: "#FF5A00",
-    d: "M9.068 1.916a.751.751 0 0 1 0 1.501h-4.9a.75.75 0 0 0-.75.75v7.667c0 .414.336.75.75.75h7.667c.414 0 .75-.336.75-.75v-4.9a.75.75 0 0 1 1.5 0v4.9a2.25 2.25 0 0 1-2.25 2.25H4.168a2.25 2.25 0 0 1-2.25-2.25V4.167a2.25 2.25 0 0 1 2.25-2.251zm3.735.22a.75.75 0 0 1 1.06 1.061L8.53 8.53a.75.75 0 0 1-1.06-1.06z"
-  })));
-};
-
-const NameModal = ({ name, open, setOpen, onOk }) => {
-    const [nameValue, setNameValue] = useState('');
-    useEffect(() => {
-        if (open) {
-            setNameValue(name || '');
-        }
-    }, [name, open]);
-    return (jsx(CustomModal, { title: `${name}`, titleCenter: true, open: open, onOk: () => {
-            onOk?.(nameValue);
-            setOpen(false);
-        }, onCancel: () => setOpen(false), okText: "Confirm", afterClose: () => {
-            setNameValue('');
-        }, children: jsx(Input, { maxLength: 120, showCount: true, placeholder: "Please enter boundary name", value: nameValue, onChange: (e) => setNameValue(e.target.value) }) }));
-};
-
-const NameEdit = ({ name, onChange }) => {
-    const [open, setOpen] = React__default.useState(false);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: styles$7.nameEdit, children: [jsx("div", { className: styles$7.content, children: name }), jsx("div", { className: styles$7.edit, onClick: () => setOpen(true), children: jsx(SvgEdit, {}) })] }), jsx(NameModal, { name: name, open: open, setOpen: setOpen, onOk: onChange })] }));
-};
-
-var _path$3;
-function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
-var SvgArrow = function SvgArrow(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    fill: "none"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
-    fill: "#FF5A00",
-    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 styles$6 = {"item":"index-module_item__wwHEt"};
-styleInject(css_248z$6);
-
-const Item = ({ children }) => {
-    return (jsx("div", { className: styles$6.item, children: children }));
-};
-
-var css_248z$5 = ".index-module_edgeMowing__kmHPN .index-module_item__O2omj {\n  border-bottom: 1px solid #C5C5C5;\n  margin-bottom: 20px;\n}\n.index-module_edgeMowing__kmHPN .index-module_item__O2omj .index-module_content__ENa5I {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 4px 0;\n}\n.index-module_edgeMowing__kmHPN .index-module_item__O2omj .index-module_tip__BoRNQ {\n  color: #9E9E9E;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n  padding: 10px 0;\n}";
-var styles$5 = {"edgeMowing":"index-module_edgeMowing__kmHPN","item":"index-module_item__O2omj","content":"index-module_content__ENa5I","tip":"index-module_tip__BoRNQ"};
-styleInject(css_248z$5);
-
-const MowingEdgeModal = ({ open, setOpen, onChange, value }) => {
-    const [currentValue, setCurrentValue] = useState({});
-    const handleOk = () => {
-        onChange(currentValue);
-        setOpen(false);
-    };
-    useEffect(() => {
-        if (!open)
-            return;
-        setCurrentValue(value);
-    }, [open]);
-    return (jsx(CustomModal, { title: "Edge Mowing", titleCenter: true, open: open, onCancel: () => setOpen(false), onOk: handleOk, afterClose: () => {
-            setCurrentValue({});
-        }, children: jsxs("div", { className: styles$5.edgeMowing, children: [jsxs("div", { className: styles$5.item, children: [jsxs("div", { className: styles$5.content, children: [jsx("div", { className: styles$5.label, children: "Mow along boundary" }), jsx("div", { className: styles$5.value, children: jsx(Switch, { checked: currentValue['edgeMowing'], onChange: (val) => setCurrentValue({
-                                            obstacleMowEdge: currentValue?.obstacleMowEdge,
-                                            edgeMowing: val,
-                                        }) }) })] }), jsx("div", { className: styles$5.tip, children: "When enabled, the mower will mow along the selected boundary." })] }), jsxs("div", { className: styles$5.item, children: [jsxs("div", { className: styles$5.content, children: [jsx("div", { className: styles$5.label, children: "Mow around off-limit island" }), jsx("div", { className: styles$5.value, children: jsx(Switch, { value: currentValue['obstacleMowEdge'], onChange: (val) => setCurrentValue({
-                                            obstacleMowEdge: val,
-                                            edgeMowing: currentValue?.edgeMowing,
-                                        }) }) })] }), jsx("div", { className: styles$5.tip, children: "When enabled, the mower will mow around the off-limit islands within the selected mowing zone." })] })] }) }));
-};
-
-var css_248z$4 = ".index-module_zoneHeightModal__ehNMQ {\n  padding: 0 10px;\n}\n.index-module_zoneHeightModal__ehNMQ .ant-radio-group {\n  display: block;\n}\n.index-module_zoneHeightModal__ehNMQ .index-module_item__wQUzZ {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 14px;\n  opacity: 0.4;\n}\n.index-module_zoneHeightModal__ehNMQ .index-module_item__wQUzZ.index-module_checked__xbxQ4 {\n  opacity: 1;\n}\n.index-module_zoneHeightModal__ehNMQ .index-module_item__wQUzZ:not(:last-child) {\n  margin-bottom: 20px;\n}\n.index-module_zoneHeightModal__ehNMQ .index-module_item__wQUzZ .index-module_right__IuIfk {\n  text-align: right;\n  width: 300px;\n  margin-left: auto;\n}";
-var styles$4 = {"zoneHeightModal":"index-module_zoneHeightModal__ehNMQ","item":"index-module_item__wQUzZ","checked":"index-module_checked__xbxQ4","right":"index-module_right__IuIfk"};
-styleInject(css_248z$4);
-
-const CutHeightSlider = ({ units, value, onChange, heightOptions, ...rest }) => {
-    const converteOptions = useCallback((options) => {
-        return options.map((item) => ({
-            label: units === UnitsType.Metric
-                ? `${item}`
-                : `${convertCutHeightFormatted(item)}`,
-            value: item,
-        }));
-    }, [units, convertCutHeightFormatted]);
-    const options = useMemo(() => {
-        if (heightOptions && heightOptions?.length > 0) {
-            return converteOptions(heightOptions);
-        }
-        return [];
-    }, [heightOptions, converteOptions]);
-    return (jsx(Slider, { value: value, ...rest, tooltip: {
-            open: false,
-        }, step: null, min: options?.[0]?.value, max: options?.[options?.length - 1]?.value, marks: options?.reduce((acc, item) => {
-            acc[item?.value] = {
-                label: item?.label,
-                style: {
-                    color: item?.value === Number(value)
-                        ? 'rgba(241, 102, 41, 1)'
-                        : 'rgba(0, 0, 0, 0.20)',
-                    fontWeight: item?.value === Number(value) ? 'bold' : 'normal',
-                },
-            };
-            return acc;
-        }, {}), onChange: onChange }));
-};
-
-var ZoneHeightModalTypeEnum;
-(function (ZoneHeightModalTypeEnum) {
-    ZoneHeightModalTypeEnum[ZoneHeightModalTypeEnum["GLOBAL"] = 1] = "GLOBAL";
-    ZoneHeightModalTypeEnum[ZoneHeightModalTypeEnum["RADIO"] = 0] = "RADIO";
-})(ZoneHeightModalTypeEnum || (ZoneHeightModalTypeEnum = {}));
-const HeightModal = ({ zoneName, open, setOpen, onChange, value, heightOptions, globalHeight, }) => {
-    const { unitType } = useCommonContext();
-    const [currentValue, setCurrentValue] = useState(value);
-    const handleOk = useCallback(() => {
-        setOpen(false);
-        onChange?.(currentValue);
-    }, [currentValue, setOpen, onChange]);
-    const onHeightChange = useCallback((value) => {
-        console.log('change->', value);
-        setCurrentValue({
-            cuttingHeight: value,
-            isFlowGlobal: ZoneHeightModalTypeEnum.RADIO,
-        });
-    }, []);
-    console.log('globalHeight', globalHeight, heightOptions);
-    useEffect(() => {
-        if (!open)
-            return;
-        setCurrentValue(value);
-    }, [value, open]);
-    return (jsx(CustomModal, { title: `${zoneName} cutting height`, titleCenter: true, width: 600, open: open, onCancel: () => setOpen(false), onOk: handleOk, okText: "Confirm", afterClose: () => { }, children: jsx("div", { className: styles$4.zoneHeightModal, children: jsxs(Radio.Group, { value: currentValue?.isFlowGlobal, onChange: (e) => setCurrentValue({
-                    isFlowGlobal: e.target.value,
-                    cuttingHeight: currentValue?.cuttingHeight,
-                }), children: [jsxs("div", { className: classNames(styles$4.item, {
-                            [styles$4.checked]: currentValue?.isFlowGlobal === ZoneHeightModalTypeEnum.GLOBAL,
-                        }), children: [jsx("div", { className: styles$4.left, children: jsx(Radio, { value: ZoneHeightModalTypeEnum.GLOBAL, children: "Global" }) }), jsx("div", { className: styles$4.right, children: jsx("span", { style: { color: 'rgba(241, 102, 41, 1)' }, children: generateHeightStr(globalHeight, unitType, true) }) })] }), jsxs("div", { className: classNames(styles$4.item, {
-                            [styles$4.checked]: currentValue?.isFlowGlobal === ZoneHeightModalTypeEnum.RADIO,
-                        }), children: [jsx("div", { className: styles$4.left, children: jsxs(Radio, { value: ZoneHeightModalTypeEnum.RADIO, children: ["Customize zone height (", getHeightUnit(unitType), ")"] }) }), jsx("div", { className: styles$4.right, children: jsx(CutHeightSlider, { units: unitType, value: currentValue?.cuttingHeight, heightOptions: heightOptions, onChange: onHeightChange }) })] })] }) }) }));
-};
-
-var css_248z$3 = ".index-module_directions__Hv0zx {\n  color: #1d1d1d;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n}\n.index-module_directions__Hv0zx .index-module_default__sSWp4 {\n  position: absolute;\n  bottom: 20px;\n  left: 9px;\n}\n.index-module_directions__Hv0zx .index-module_tips__VVEuO {\n  line-height: 16px;\n}\n.index-module_directions__Hv0zx .index-module_optimal__07le4 {\n  color: rgb(255, 113, 51);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  margin: 4px 0 12px;\n}\n.index-module_directions__Hv0zx .index-module_content__PiCFf {\n  position: relative;\n  width: 100%;\n  margin-bottom: 12px;\n}\n.index-module_directions__Hv0zx .index-module_background__WM4u- {\n  position: absolute;\n  width: 100%;\n  height: 300px;\n  background: #f5f5f5;\n  border-radius: 8px;\n  z-index: 0;\n}\n.index-module_directions__Hv0zx .index-module_luppan__nGfH2 {\n  inset: 0;\n  z-index: 1;\n}\n.index-module_directions__Hv0zx .index-module_slideTip__RGnd1 {\n  margin: 20px 0;\n}\n.index-module_directions__Hv0zx .index-module_slider__VDKnB {\n  padding: 0 24px;\n}";
-var 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);
-
-var css_248z$2 = ".style-module_commonModalContainer__WHZnl {\n  width: inherit;\n  height: inherit;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh {\n  display: flex;\n  flex-direction: column;\n  width: 300px;\n  height: 100%;\n  position: relative;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directText__b7QUs {\n  padding-top: 15px;\n  color: #1d1d1d;\n  text-align: center;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 24px;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directOption__IFsis {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  pointer-events: none;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directOption__IFsis .style-module_leftTop__H39Uk {\n  width: 22px;\n  height: 18px;\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translate(-50%, 0) rotate(90deg);\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directOption__IFsis .style-module_rightBottom__f3c7n {\n  width: 22px;\n  height: 18px;\n  position: absolute;\n  bottom: -5px;\n  left: 50%;\n  transform: translate(-50%, 0) rotate(-90deg);\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directDialPlateBox__tie9n {\n  flex: 1;\n  min-height: 293px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directDialPlateBox__tie9n .style-module_directDialPlate__zkFHk {\n  position: relative;\n  width: 293px;\n  height: 293px;\n  border-radius: 50%;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directDialPlateBox__tie9n .style-module_directDialPlate__zkFHk .style-module_directLineMain__p60DH {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directDialPlateBox__tie9n .style-module_directDialPlate__zkFHk .style-module_directLineMain__p60DH .style-module_directLineContent__D9N62 {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 224px;\n  cursor: pointer;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directDialPlateBox__tie9n .style-module_directDialPlate__zkFHk .style-module_directLineMain__p60DH .style-module_directLineContent__D9N62 .style-module_directLineText__DOhL4 {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directDialPlateBox__tie9n .style-module_directDialPlate__zkFHk .style-module_directLineMain__p60DH .style-module_directLineContent__D9N62 .style-module_directLine__ngnPh {\n  width: 100%;\n  height: 186px;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directDialPlateBox__tie9n .style-module_directDialPlate__zkFHk .style-module_directCenterCircle__YUrtv {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 28px;\n  height: 28px;\n  border: 6px solid #e0e0e6;\n  background: #f2f3f6;\n  border-radius: 50%;\n  box-sizing: border-box;\n}\n.style-module_commonModalContainer__WHZnl .style-module_commonModalContent__UQ98C .style-module_content__tR9Fh .style-module_directDialPlateBox__tie9n .style-module_directDialPlate__zkFHk .style-module_directCenterCircle__YUrtv.style-module_active__ga2w0 {\n  border-color: rgb(254, 226, 213);\n}";
-var styles$2 = {"commonModalContainer":"style-module_commonModalContainer__WHZnl","commonModalContent":"style-module_commonModalContent__UQ98C","content":"style-module_content__tR9Fh","directOption":"style-module_directOption__IFsis","leftTop":"style-module_leftTop__H39Uk","rightBottom":"style-module_rightBottom__f3c7n","directDialPlateBox":"style-module_directDialPlateBox__tie9n","directDialPlate":"style-module_directDialPlate__zkFHk","directLineMain":"style-module_directLineMain__p60DH","directLineContent":"style-module_directLineContent__D9N62","directLineText":"style-module_directLineText__DOhL4","directLine":"style-module_directLine__ngnPh","directCenterCircle":"style-module_directCenterCircle__YUrtv","active":"style-module_active__ga2w0"};
-styleInject(css_248z$2);
-
-const DirectionLine = (props) => {
-    const { selected = false, ...svgProps } = props;
-    const colorMap = useMemo(() => {
-        if (selected) {
-            return {
-                circleFill: '#FEE2D5',
-                circleStroke: '#FF7133',
-                line: '#FF7133',
-            };
-        }
-        return {
-            circleFill: '#E0E0E6',
-            circleStroke: '#B3B4C3',
-            line: '#D2D2E0',
-        };
-    }, [selected]);
-    return (jsxs("svg", { width: "16", height: "186", viewBox: "0 0 16 186", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...svgProps, children: [jsx("path", { d: "M8.54148 10.4062L7.98535 175.173", stroke: colorMap.line, strokeWidth: "2", strokeDasharray: "5 5" }), jsx("circle", { cx: "8.26392", cy: "177.535", r: "6.67359", fill: colorMap.circleFill, stroke: colorMap.circleStroke, strokeWidth: "2" }), jsx("circle", { cx: "8.26344", cy: "8.47047", r: "6.67359", fill: colorMap.circleFill, stroke: colorMap.circleStroke, strokeWidth: "2" })] }));
-};
-
-var _g$1, _defs$1;
-function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
-var SvgDirectDialPlate = function SvgDirectDialPlate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 293,
-    height: 293,
-    fill: "none"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#direct-dial-plate_svg__a)"
-  }, /*#__PURE__*/React.createElement("g", {
-    opacity: 0.55
-  }, /*#__PURE__*/React.createElement("g", {
-    filter: "url(#direct-dial-plate_svg__b)",
-    shapeRendering: "crispEdges"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: 146.549,
-    cy: 146.553,
-    r: 133.643,
-    fill: "#fff",
-    fillOpacity: 0.65
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 146.549,
-    cy: 146.553,
-    r: 133.643,
-    stroke: "#C1C2D1"
-  })), /*#__PURE__*/React.createElement("g", {
-    filter: "url(#direct-dial-plate_svg__c)",
-    shapeRendering: "crispEdges"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: 146.549,
-    cy: 146.553,
-    r: 140,
-    fill: "#fff",
-    fillOpacity: 0.65
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 146.549,
-    cy: 146.553,
-    r: 140,
-    stroke: "#fff"
-  })), /*#__PURE__*/React.createElement("circle", {
-    cx: 146.549,
-    cy: 146.553,
-    r: 112,
-    fill: "#fff",
-    transform: "rotate(90 146.549 146.553)"
-  })), /*#__PURE__*/React.createElement("circle", {
-    cx: 146.549,
-    cy: 146.553,
-    r: 115,
-    stroke: "#E0E0E6",
-    strokeWidth: 6
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#E0E0E7",
-    d: "m24.863 157.648-.078-.895 6.163-.54q.037.449.075.896zm6.162-21.672-.076.894-6.159-.539.078-.894zm1.346-10.014q-.079.442-.153.886l-6.08-1.071.157-.885zm-6.074 42.25-.156-.885 6.077-1.072q.074.444.153.886zm2.344 10.398-.234-.868 5.954-1.595q.114.434.23.868zm5.95-62.523q-.117.434-.23.869l-5.953-1.594.233-.869zm3.08-9.641-.307.843-5.788-2.105.308-.844zm-5.788 82.319-.307-.845 5.788-2.107q.152.423.307.844zm4.114 9.833-.38-.815 5.587-2.605q.189.408.381.814zM41.585 97.11q-.191.405-.38.814l-5.587-2.604.38-.815zm-.63 110.924-.45-.778 5.345-3.086q.224.39.45.777zm5.347-119.88q-.228.388-.451.777l-5.344-3.084.45-.778zm.412 128.85-.515-.736 5.064-3.546q.256.369.515.735zm4.55-136.626-5.062-3.543.515-.735 5.062 3.544q-.259.366-.515.734m6.713-8.735q-.29.343-.577.688l-4.74-3.977.576-.688zm-4.74 153.795-.577-.689 4.74-3.977q.287.346.577.688zM72.33 57.402q-.345.286-.69.577l-3.977-4.74.689-.578zm-3.977 183.041-.689-.578 3.978-4.74q.342.29.688.577zm11.29-188.662-3.546-5.063.736-.515 3.545 5.062q-.368.256-.735.517M76.834 246.9l-.735-.516 3.545-5.062q.366.26.734.516zM88.93 45.853q-.39.224-.778.451l-3.087-5.346.779-.449zm-3.084 206.741-.779-.449 3.086-5.345q.388.227.778.451zM97.923 41.206q-.408.188-.814.38l-2.605-5.585.813-.38zm-2.604 216.276-.814-.38 2.604-5.585q.407.191.815.38zm9.86 4.043-.844-.307 2.107-5.788q.422.154.844.306zm2.109-224.158q-.423.15-.845.306l-2.107-5.787.845-.308zm8.07 227.327-.868-.233 1.595-5.951q.434.116.869.229zm1.598-230.331q-.435.113-.869.23l-1.595-5.95.868-.233zm8.817 232.599-.884-.156 1.072-6.076q.441.078.885.153zm1.075-234.742q-.444.075-.885.152l-1.072-6.075.884-.156zm10.037-1.27q-.448.037-.895.076l-.539-6.158.895-.078zm-.535 237.365-.895-.079.539-6.159q.447.04.896.077zm20.4 0-.538-6.162q.448-.036.894-.076l.539 6.16zm.36-237.288q-.446-.04-.894-.077l.538-6.16.894.078zm10.029 1.346q-.443-.077-.886-.153l1.071-6.078.885.156zm.187 234.589-1.071-6.08q.443-.075.886-.152l1.071 6.076zm9.688-232.369q-.434-.116-.868-.23l1.594-5.953.867.234zm.728 230.1-1.595-5.954q.435-.113.87-.23l1.593 5.951zm8.912-227.02q-.42-.154-.843-.306l2.106-5.789.844.307zm1.264 223.853-2.106-5.789.844-.307 2.107 5.788zm9.863-4.044-2.603-5.586q.407-.189.813-.38l2.605 5.587zm-1.788-215.894q-.406-.192-.814-.38l2.604-5.587.815.38zm8.954 4.716a98 98 0 0 0-.777-.451l3.086-5.345.778.45zm2.308 206.291-3.085-5.345q.39-.224.776-.451l3.086 5.347zm6.202-200.813q-.367-.26-.735-.516l3.546-5.064.735.515zm2.809 195.119-3.544-5.064.735-.515 3.545 5.063zm5.192-188.922q-.344-.29-.689-.577l3.977-4.74.689.578zm3.288 182.465-3.977-4.742q.345-.287.688-.578l3.978 4.741zM235.7 72.334q-.287-.345-.577-.69l4.741-3.978.577.689zm4.162 153.103-4.739-3.978q.29-.344.577-.689l4.74 3.978zm1.973-145.059q-.257-.368-.517-.734l5.063-3.545.515.735zm4.549 136.626-5.064-3.547q.26-.366.516-.735l5.063 3.547zm.863-128.074q-.224-.39-.45-.776l5.345-3.086.449.777zm4.897 119.105-5.346-3.087q.226-.387.45-.777l5.345 3.087zm-.25-110.112q-.19-.408-.38-.813l5.585-2.605.38.815zm5.205 100.675-5.585-2.606q.191-.405.381-.813l5.584 2.604zm-1.365-91.309q-.151-.423-.306-.844l5.788-2.107.306.845zm5.482 81.477-5.788-2.108q.155-.421.306-.844l5.789 2.108zm-2.479-71.811q-.114-.435-.23-.869l5.951-1.594.232.869zm5.722 61.656-5.951-1.596q.116-.434.229-.867l5.954 1.595zm-3.578-51.762q-.076-.444-.153-.886l6.078-1.071.156.885zm5.923 41.363-6.076-1.072.153-.885 6.079 1.072zm-4.654-31.325q-.035-.447-.075-.894l6.156-.538.079.894zm6.084 20.762-6.159-.54q.04-.447.075-.895l6.162.54z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#B3B4C3",
-    d: "M142.291 27.432v-11h1.684l5.82 8.27-1.339-.693h.97v-7.577h1.865v11h-1.677l-5.819-8.279 1.338.694h-.97v7.585zM57.438 66.693l-4.982-4.982.466-.466 7.337 1.287-.497.152.248-.248-4.14-4.14.463-.463 4.983 4.983-.453.452-7.354-1.278.5-.155-.248.249 4.143 4.143zM63.66 60.471l-6.353-3.611.49-.49 5.342 3.159.034-.035-3.052-5.448.466-.466 5.452 3.048.031-.03-3.156-5.346.487-.486 3.612 6.352-.435.436-5.387-2.942-.034.034 2.942 5.387zM52.28 232.95q-.53-.53-.753-1.105a2.3 2.3 0 0 1-.152-1.119q.07-.546.428-.98l.035-.042.47.47-.035.041a1.2 1.2 0 0 0-.27.698q-.024.396.163.818.189.424.573.808.376.376.79.542.419.162.801.11.387-.055.667-.335l.003-.003a1.07 1.07 0 0 0 .325-.843q-.022-.497-.466-1.204l-.398-.625q-.583-.922-.593-1.582-.007-.663.507-1.177l.004-.004q.397-.397.922-.486a2.1 2.1 0 0 1 1.09.11 2.9 2.9 0 0 1 1.064.704q.487.487.687 1.033.203.549.135 1.06-.063.51-.394.897l-.038.045-.47-.469.032-.045a1.2 1.2 0 0 0 .234-.628q.032-.357-.124-.739a2.15 2.15 0 0 0-.51-.732 2.2 2.2 0 0 0-.736-.501 1.47 1.47 0 0 0-.76-.11q-.367.048-.646.328l-.003.003a.98.98 0 0 0-.297.794q.03.467.47 1.16l.393.629q.405.638.539 1.139.138.504.028.911a1.7 1.7 0 0 1-.456.753l-.004.004a1.9 1.9 0 0 1-.994.545q-.552.103-1.14-.117-.586-.222-1.122-.756M56.209 236.672l3.611-6.353.49.49-3.159 5.341.035.035 5.448-3.052.466.466-3.049 5.452.032.031 5.344-3.156.487.487-6.353 3.611-.435-.435 2.942-5.386-.035-.035-5.386 2.942zM235.144 238.465q-.529.528-1.105.753a2.3 2.3 0 0 1-1.119.151 1.9 1.9 0 0 1-.98-.428l-.042-.034.47-.47.041.035q.301.245.698.269a1.75 1.75 0 0 0 .818-.162 2.7 2.7 0 0 0 .808-.573q.377-.377.542-.791.162-.417.111-.801a1.15 1.15 0 0 0-.335-.666l-.004-.004a1.07 1.07 0 0 0-.842-.324q-.498.02-1.205.466l-.625.397q-.922.583-1.581.594-.663.006-1.178-.508l-.003-.003a1.7 1.7 0 0 1-.487-.922 2.1 2.1 0 0 1 .11-1.091q.208-.566.705-1.064a2.9 2.9 0 0 1 1.032-.687q.549-.203 1.06-.134.511.061.898.393l.045.038-.47.47-.045-.031a1.18 1.18 0 0 0-.628-.235 1.6 1.6 0 0 0-.739.124 2.2 2.2 0 0 0-.732.511q-.345.346-.501.736a1.5 1.5 0 0 0-.11.759q.048.366.328.646l.003.003a.98.98 0 0 0 .794.297q.466-.03 1.161-.469l.628-.394q.64-.404 1.139-.539.504-.138.912-.027.406.11.753.456l.003.003q.442.442.545.994.104.553-.117 1.14-.22.587-.756 1.122M237.875 235.527l-4.982-4.983 3.007-3.007.425.425-2.538 2.538 1.796 1.795 2.413-2.414.421.422-2.413 2.413 1.916 1.916 2.538-2.537.424.424zM226.781 57.137l4.982-4.983.467.466-1.288 7.337-.152-.497.248.249 4.14-4.14.463.463-4.982 4.982-.453-.452 1.278-7.355.155.501-.248-.249-4.144 4.144zM231.943 62.298l4.982-4.982 3.008 3.007-.425.425-2.538-2.538-1.795 1.796 2.413 2.413-.421.421-2.413-2.413-1.917 1.916 2.538 2.538-.425.425zM266.486 152.604l-.197-11.065 6.803-.135.03 1.664-4.924.098.053 2.998 4.655-.092.028 1.572-4.655.092.057 3.167 4.923-.097.03 1.664zM146.805 276.672q-1.278 0-2.222-.378-.936-.377-1.476-1.052a2.8 2.8 0 0 1-.609-1.576l-.008-.102h1.903l.007.073q.047.443.366.77.327.326.867.515.541.182 1.233.182.663 0 1.172-.196.51-.196.799-.538.29-.348.29-.798v-.008a1.11 1.11 0 0 0-.465-.922q-.464-.363-1.529-.581l-1.18-.232q-1.69-.342-2.458-1.089-.762-.756-.761-1.924v-.007q0-.937.517-1.641.525-.705 1.439-1.097.92-.399 2.108-.399 1.218 0 2.108.392.89.384 1.4 1.053.51.667.571 1.51l.008.094h-1.872l-.016-.087a1.34 1.34 0 0 0-.357-.719 1.9 1.9 0 0 0-.754-.493 3.1 3.1 0 0 0-1.103-.182q-.602 0-1.073.182-.473.174-.746.493-.267.32-.267.77v.007q0 .552.449.915.457.363 1.484.567l1.18.239q1.157.233 1.88.617.723.385 1.058.959.342.565.342 1.365v.007q0 1.016-.525 1.757-.518.74-1.484 1.147-.959.407-2.276.407M16.514 152.004l-2.706-10h1.874l1.734 7.505h.098l1.993-7.505h1.601l2.014 7.505h.098l1.728-7.505h1.86l-2.7 10h-1.692l-2.056-7.159h-.105l-2.042 7.159z"
-  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: "direct-dial-plate_svg__b",
-    width: 276.285,
-    height: 276.285,
-    x: 8.406,
-    y: 8.41,
-    colorInterpolationFilters: "sRGB",
-    filterUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("feFlood", {
-    floodOpacity: 0,
-    result: "BackgroundImageFix"
-  }), /*#__PURE__*/React.createElement("feColorMatrix", {
-    "in": "SourceAlpha",
-    result: "hardAlpha",
-    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
-    stdDeviation: 2
-  }), /*#__PURE__*/React.createElement("feComposite", {
-    in2: "hardAlpha",
-    operator: "out"
-  }), /*#__PURE__*/React.createElement("feColorMatrix", {
-    values: "0 0 0 0 0.0683333 0 0 0 0 0.103468 0 0 0 0 0.133333 0 0 0 0.25 0"
-  }), /*#__PURE__*/React.createElement("feBlend", {
-    in2: "BackgroundImageFix",
-    result: "effect1_dropShadow_10512_51195"
-  }), /*#__PURE__*/React.createElement("feBlend", {
-    "in": "SourceGraphic",
-    in2: "effect1_dropShadow_10512_51195",
-    result: "shape"
-  })), /*#__PURE__*/React.createElement("filter", {
-    id: "direct-dial-plate_svg__c",
-    width: 291,
-    height: 291,
-    x: 1.049,
-    y: 1.053,
-    colorInterpolationFilters: "sRGB",
-    filterUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("feFlood", {
-    floodOpacity: 0,
-    result: "BackgroundImageFix"
-  }), /*#__PURE__*/React.createElement("feColorMatrix", {
-    "in": "SourceAlpha",
-    result: "hardAlpha",
-    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-  }), /*#__PURE__*/React.createElement("feOffset", null), /*#__PURE__*/React.createElement("feGaussianBlur", {
-    stdDeviation: 2.5
-  }), /*#__PURE__*/React.createElement("feComposite", {
-    in2: "hardAlpha",
-    operator: "out"
-  }), /*#__PURE__*/React.createElement("feColorMatrix", {
-    values: "0 0 0 0 0.0683333 0 0 0 0 0.103468 0 0 0 0 0.133333 0 0 0 0.5 0"
-  }), /*#__PURE__*/React.createElement("feBlend", {
-    in2: "BackgroundImageFix",
-    result: "effect1_dropShadow_10512_51195"
-  }), /*#__PURE__*/React.createElement("feBlend", {
-    "in": "SourceGraphic",
-    in2: "effect1_dropShadow_10512_51195",
-    result: "shape"
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "direct-dial-plate_svg__a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M.549 292.553v-292h292v292z"
-  })))));
-};
-
-var _g, _defs;
-function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
-var SvgOption = function SvgOption(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 22,
-    height: 18,
-    fill: "none"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    filter: "url(#option_svg__a)"
-  }, /*#__PURE__*/React.createElement("mask", {
-    id: "option_svg__b",
-    width: 18,
-    height: 15,
-    x: 2,
-    y: 0.612,
-    fill: "#000",
-    maskUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    d: "M2 .612h18v15H2z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M4 4.39a1 1 0 0 1 1.599-.801l4.419 3.302h7.27v1.992H10.32L5.6 12.412A1 1 0 0 1 4 11.61z"
-  })), /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M4 4.39a1 1 0 0 1 1.599-.801l4.419 3.302h7.27v1.992H10.32L5.6 12.412A1 1 0 0 1 4 11.61z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "#F5F6F8",
-    d: "M5.599 3.589 4.4 5.19zm4.419 3.302L8.82 8.493l.533.398h.665zm7.27 0h2v-2h-2zm0 1.992v2h2v-2zm-6.968 0v-2h-.665l-.532.398zM5.6 12.412l1.196 1.603.001-.001zM4 11.61H2v.001zm0-7.22h2a1 1 0 0 1-1.599.8L5.6 3.59l1.197-1.602C4.818.509 2 1.919 2 4.39zm1.599-.801L4.402 5.19 8.82 8.493l1.198-1.602 1.197-1.603-4.42-3.301zm4.419 3.302v2h7.27v-4h-7.27zm7.27 0h-2v1.992h4V6.89zm0 1.992v-2H10.32v4h6.967zm-6.968 0L9.123 7.28 4.4 10.81 5.6 12.411l1.197 1.602 4.722-3.53zM5.6 12.412l-1.197-1.603a1 1 0 0 1 1.598.8l-2 .001-2 .001c0 2.466 2.815 3.882 4.795 2.404zM4 11.61h2V4.39H2v7.22z",
-    mask: "url(#option_svg__b)"
-  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: "option_svg__a",
-    width: 21.287,
-    height: 17.232,
-    x: 0,
-    y: 0.384,
-    colorInterpolationFilters: "sRGB",
-    filterUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("feFlood", {
-    floodOpacity: 0,
-    result: "BackgroundImageFix"
-  }), /*#__PURE__*/React.createElement("feColorMatrix", {
-    "in": "SourceAlpha",
-    result: "hardAlpha",
-    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-  }), /*#__PURE__*/React.createElement("feOffset", {
-    dy: 1
-  }), /*#__PURE__*/React.createElement("feGaussianBlur", {
-    stdDeviation: 1
-  }), /*#__PURE__*/React.createElement("feComposite", {
-    in2: "hardAlpha",
-    operator: "out"
-  }), /*#__PURE__*/React.createElement("feColorMatrix", {
-    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-  }), /*#__PURE__*/React.createElement("feBlend", {
-    in2: "BackgroundImageFix",
-    result: "effect1_dropShadow_13071_1578"
-  }), /*#__PURE__*/React.createElement("feBlend", {
-    "in": "SourceGraphic",
-    in2: "effect1_dropShadow_13071_1578",
-    result: "shape"
-  })))));
-};
-
-// json中返回的是多选方向的加值，所以需要拆开
-function convertDirectionToParams(value) {
-    const A = 1 << 0; // bit0 = 1
-    const B = 1 << 1; // bit1 = 2
-    const C = 1 << 2; // bit2 = 4
-    const D = 1 << 3; // bit3 = 8
-    const E = 1 << 4; // bit4 = 16
-    const F = 1 << 5; // bit5 = 32
-    const directions = [];
-    // 检查每个位标志是否被设置
-    if (value & A)
-        directions.push(A);
-    if (value & B)
-        directions.push(B);
-    if (value & C)
-        directions.push(C);
-    if (value & D)
-        directions.push(D);
-    if (value & E)
-        directions.push(E);
-    if (value & F)
-        directions.push(F);
-    return directions;
-}
-
-const MowDirection_L = (props) => {
-    const { value, angleValue, optionAngle = 45, zIndex = 10000, onChange,
-    // children,
-     } = props;
-    const [angle, setAngle] = useState(0);
-    const [lineList, setLineList] = 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 hitRectAngle = useMemo(() => {
-        const direction = lineList
-            ?.filter((item) => item?.selected)
-            ?.reduce((pre, line) => {
-            return pre + line.value;
-        }, 0);
-        const angles = getSelectAngles(direction)?.map((item) => item + angleValue);
-        return angles?.includes(optionAngle);
-    }, [lineList, angleValue, optionAngle]);
-    const allSelect = useMemo(() => {
-        return lineList?.every((item) => item?.selected);
-    }, [lineList]);
-    useEffect(() => {
-        setLineList(lineList.map((line) => ({
-            ...line,
-            selected: convertDirectionToParams(value).includes(line.value),
-        })));
-    }, [value]);
-    useEffect(() => {
-        setAngle(angleValue);
-    }, [angleValue]);
-    console.log('hitRectAngle-->', hitRectAngle);
-    const onLineClick = (index) => {
-        const newLine = lineList.map((line, i) => {
-            if (i === index) {
-                return {
-                    ...line,
-                    selected: !line.selected,
-                };
-            }
-            return { ...line };
-        });
-        setLineList(newLine);
-        onChange?.(newLine
-            ?.filter((item) => item?.selected)
-            .reduce((pre, line) => {
-            return pre + line.value;
-        }, 0));
-    };
-    return (jsx("div", { className: styles$2.commonModalContainer, style: { zIndex }, children: jsx("div", { className: styles$2.commonModalContent, children: jsxs("div", { className: styles$2.content, children: [jsx("div", { className: styles$2.directDialPlateBox, children: jsxs("div", { className: styles$2.directDialPlate, children: [jsx(SvgDirectDialPlate, {}), jsx("div", { className: styles$2.directLineMain, style: {
-                                        transform: `rotate(${angle}deg)`,
-                                    }, children: lineList.map((line, index) => (jsxs("div", { className: styles$2.directLineContent, style: {
-                                            transform: `translate(-50%, -50%) rotate(${30 * index}deg)`,
-                                        }, children: [jsx("div", { className: styles$2.directLineText, style: {
-                                                    color: line.selected ? '#FF996C' : '#B3B4C3',
-                                                }, children: line.text }), jsx(DirectionLine, { className: styles$2.directLine, selected: line.selected, onClick: () => onLineClick(index) }), jsx("div", { className: styles$2.directLineText, style: {
-                                                    transform: 'rotate(180deg)',
-                                                    color: line.selected ? '#FF996C' : '#B3B4C3',
-                                                }, children: line.text })] }, line.value))) }), jsx("div", { className: classNames(styles$2.directCenterCircle, {
-                                        [styles$2.active]: allSelect && hitRectAngle,
-                                    }) })] }) }), jsxs("div", { className: styles$2.directOption, style: {
-                            transform: `rotate(${optionAngle}deg)`,
-                            color: hitRectAngle ? '#FF996C' : '#B3B4C3',
-                        }, children: [jsx("div", { className: styles$2.leftTop, children: jsx(SvgOption, {}) }), jsx("div", { className: styles$2.rightBottom, children: jsx(SvgOption, {}) })] })] }) }) }));
-};
-
-const DirectionModal = ({ directionInfo, open, setOpen, zoneName, optionAngle, onChange, }) => {
-    const { mapJson, mapConfig, drag } = useCommonContext();
-    const { editMapInfo } = useMapEditContext();
-    const { svgElementDatas } = useSvgEditContext();
-    const [directions, setDirections] = useState(ALL_DIRECTION_SELECTED);
-    const [angle, setAngle] = useState(MIN_DIRECTION_ANGLE);
-    const canSetDefault = useMemo(() => {
-        const angles = getSelectAngles(directions)?.map((item) => item + angle);
-        const hitRectAngle = angles?.includes(optionAngle);
-        return directions !== ALL_DIRECTION_SELECTED || !hitRectAngle;
-    }, [directions, angle]);
-    const canSave = useMemo(() => {
-        return directions !== directionInfo?.direction || angle !== directionInfo?.angle;
-    }, [directions, angle, directionInfo]);
-    useEffect(() => {
-        if (!open)
-            return;
-        setDirections(directionInfo.direction);
-        setAngle(directionInfo.angle);
-    }, [directionInfo, open]);
-    const resetDirection = () => {
-        setDirections(ALL_DIRECTION_SELECTED);
-        const defaultAngle = getDefaultAngle(optionAngle);
-        console.log('defaultAngle=>', defaultAngle, optionAngle);
-        if (defaultAngle) {
-            setAngle(defaultAngle);
-        }
-    };
-    // 计算当前boundary的viewBox
-    const boundaryViewBox = useMemo(() => {
-        const currentBoundary = editMapInfo.selectElement;
-        if (!currentBoundary?.points || currentBoundary.points.length === 0) {
-            return null;
-        }
-        // 计算边界
-        let minX = Infinity;
-        let minY = Infinity;
-        let maxX = -Infinity;
-        let maxY = -Infinity;
-        currentBoundary.points.forEach((point) => {
-            minX = Math.min(minX, point[0]);
-            minY = Math.min(minY, point[1]);
-            maxX = Math.max(maxX, point[0]);
-            maxY = Math.max(maxY, point[1]);
-        });
-        // 添加边距
-        const padding = 50;
-        const width = maxX - minX + padding * 2;
-        const height = maxY - minY + padding * 2;
-        return {
-            x: minX - padding,
-            y: minY - padding,
-            width,
-            height,
-        };
-    }, [editMapInfo.selectElement]);
-    console.log('directionInfo=>', directionInfo, mapJson);
-    return (jsx(CustomModal, { maskClosable: false, titleCenter: true, title: `${zoneName} mowing direction`, open: open, width: 600, onCancel: () => {
-            setOpen(false);
-        }, onOk: () => {
-            onChange?.(directions, angle);
-            setOpen(false);
-        }, okText: "Confirm", cancelText: "Cancel", okButtonProps: { disabled: !canSave }, afterClose: () => {
-            setDirections(ALL_DIRECTION_SELECTED);
-            setAngle(MIN_DIRECTION_ANGLE);
-        }, children: jsxs("div", { className: styles$3.directions, children: [jsx("div", { className: styles$3.default, children: jsx(Button, { disabled: !canSetDefault, variant: "link", color: "primary", onClick: resetDirection, children: "Default" }) }), jsx("div", { className: styles$3.tips, children: "\u4E00\u4E2A\u7B80\u77ED\u7684\u8BF4\u660E\uFF0C\u5E0C\u671B\u80FD\u5145\u5F53\u7B80\u5355\u7684\u6559\u7A0B\uFF0C\u9700\u8981\u53EF\u5FC3\u6839\u636EC\u7AEF\u5DF2\u6709\u7684\u6574\u5408\u4E00\u4E0B" }), jsxs("div", { className: styles$3.optimal, children: [jsx("div", { children: "*" }), jsx(SvgOption, {}), jsx("div", { className: styles$3.text, children: "Optimal direction" })] }), jsxs("div", { className: styles$3.content, children: [jsx("div", { className: styles$3.background, children: jsxs("div", { style: {
-                                    position: 'relative',
-                                    width: `${300 * (boundaryViewBox.width / boundaryViewBox.height)}px`,
-                                    height: '300px',
-                                    margin: '0 auto',
-                                }, children: [boundaryViewBox && (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `${boundaryViewBox.x} ${boundaryViewBox.y} ${boundaryViewBox.width} ${boundaryViewBox.height}`, width: `${300 * (boundaryViewBox.width / boundaryViewBox.height)}px`, height: "300px", style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: Object.keys(svgElementDatas)?.map((key) => {
-                                            return svgElementDatas[key]?.map((element) => {
-                                                if (key === DataType.VISION_OFF)
-                                                    return null;
-                                                return (jsx(GElement, { type: key, data: svgElementDatas[key], children: jsx(SvgElement, { type: key, data: element, onSelect: () => { }, onCancel: () => { } }, element.id) }, key));
-                                            });
-                                        }) })), jsx(CharginPile, { mapData: mapJson, mapConfig: mapConfig, viewBox: boundaryViewBox || null, rotation: drag?.rotation })] }) }), jsx("div", { className: styles$3.luppan, children: jsx(MowDirection_L, { value: directions, angleValue: angle, optionAngle: optionAngle, onChange: (value) => {
-                                    console.log('valie=>', value);
-                                    setDirections(value);
-                                } }) })] }), jsx("div", { className: styles$3.slideTip, children: "\u7528\u6237\u8FD8\u53EF\u4EE5\u901A\u8FC7\u6ED1\u8F68\u5FAE\u8C03\u5272\u8349\u65B9\u5411\uFF08\u975E\u5FC5\u987B\uFF09" }), jsx("div", { className: styles$3.slider, children: jsx(Slider, { tooltip: {
-                            formatter: (value) => `${value}°`,
-                        }, min: MIN_DIRECTION_ANGLE, max: MAX_DIRECTION_ANGLE, value: angle, onChange: (value) => setAngle(value) }) })] }) }));
-};
-
-const BoundaryInfo = ({ onHandleDelete }) => {
-    const { unitType, heightOptions, globalHeight } = useCommonContext();
-    const { editMapInfo, setEditMapInfo } = useMapEditContext();
-    const nameValue = editMapInfo.selectElement?.name;
-    const onHandleFocus = () => { };
-    const [open, setOpen] = useState(false);
-    const [heightOpen, setHeightOpen] = useState(false);
-    const [directionOpen, setDirectionOpen] = useState(false);
-    const sizeValue = useMemo(() => {
-        const points = editMapInfo.selectElement?.points?.map((item) => [
-            item[0] / SCALE_FACTOR,
-            item[1] / SCALE_FACTOR,
-        ]);
-        const { area: areaValue, perimeter: perimeterValue } = calculatePolygonAreaAndPerimeter(points) || {};
-        const formatArea = convertAreaByUnits(areaValue);
-        const formatPerimeter = convertDistanceByUnits(perimeterValue);
-        return {
-            area: formatArea.value,
-            perimeter: formatPerimeter.value,
-        };
-    }, [editMapInfo.selectElement]);
-    const edgeMowingValue = useMemo(() => {
-        return {
-            edgeMowing: editMapInfo?.selectElement?.edgeMowing,
-            obstacleMowEdge: editMapInfo?.selectElement?.obstacleMowEdge,
-        };
-    }, [editMapInfo.selectElement]);
-    const heightValue = useMemo(() => {
-        return {
-            isFlowGlobal: editMapInfo?.selectElement?.isFlowGlobal,
-            cuttingHeight: editMapInfo?.selectElement?.cuttingHeight,
-        };
-    }, [editMapInfo.selectElement]);
-    const directionInfo = useMemo(() => {
-        return {
-            direction: editMapInfo?.selectElement?.direction,
-            angle: editMapInfo?.selectElement?.angle,
-        };
-    }, [editMapInfo.selectElement?.direction, editMapInfo.selectElement?.angle]);
-    const optionAngle = useMemo(() => {
-        return editMapInfo?.selectElement?.recBaseAngle;
-    }, [editMapInfo.selectElement?.recBaseAngle]);
-    console.log('height---->', editMapInfo?.selectElement, heightValue, edgeMowingValue);
-    return (jsxs("div", { className: styles$9.boundaryInfo, children: [jsx(Header, { handleDelete: onHandleDelete, handleFocus: onHandleFocus, type: editMapInfo.elementType }), jsx("div", { className: styles$9.nameEdit, children: jsx(NameEdit, { name: nameValue, onChange: (name) => {
-                        setEditMapInfo({
-                            ...editMapInfo,
-                            isShowDrag: false,
-                            selectElement: {
-                                ...editMapInfo.selectElement,
-                                name: name,
-                            },
-                        });
-                    } }) }), jsxs("div", { className: styles$9.otherEdit, children: [jsx(Item, { children: jsxs("div", { className: styles$9.otherItem, children: [jsx("div", { className: styles$9.label, children: "Height" }), jsx("div", { className: styles$9.value, children: generateHeightStr(heightValue?.cuttingHeight, unitType, true) }), jsx("div", { className: styles$9.icon, onClick: () => {
-                                        setHeightOpen(true);
-                                    }, children: jsx(SvgArrow, {}) })] }) }), jsx(Item, { children: jsxs("div", { className: styles$9.otherItem, children: [jsx("div", { className: styles$9.label, children: "Direction" }), jsx("div", { className: styles$9.value }), jsx("div", { className: styles$9.icon, onClick: () => {
-                                        setDirectionOpen(true);
-                                    }, children: jsx(SvgArrow, {}) })] }) }), jsx(Item, { children: jsxs("div", { className: styles$9.otherItem, children: [jsx("div", { className: styles$9.label, children: "Mowing Edge" }), jsx("div", { className: styles$9.value }), jsx("div", { className: styles$9.icon, onClick: () => {
-                                        setOpen(true);
-                                    }, children: jsx(SvgArrow, {}) })] }) })] }), jsxs("div", { className: styles$9.areaInfo, children: [jsxs("div", { className: styles$9.areaItem, children: [jsx("div", { className: styles$9.label, children: "Area:" }), jsx("div", { className: styles$9.value, children: sizeValue?.area })] }), jsxs("div", { className: styles$9.areaItem, children: [jsx("div", { className: styles$9.label, children: "Perimeter:" }), jsx("div", { className: styles$9.value, children: sizeValue?.perimeter })] })] }), jsx(MowingEdgeModal, { value: edgeMowingValue, onChange: (value) => {
-                    setEditMapInfo({
-                        ...editMapInfo,
-                        selectElement: {
-                            ...editMapInfo.selectElement,
-                            edgeMowing: value.edgeMowing ? 1 : 0,
-                            obstacleMowEdge: value.obstacleMowEdge ? 1 : 0,
-                        },
-                    });
-                }, open: open, setOpen: setOpen }), jsx(HeightModal, { zoneName: editMapInfo.selectElement?.name, heightOptions: heightOptions, globalHeight: globalHeight, open: heightOpen, setOpen: setHeightOpen, value: heightValue, onChange: (value) => {
-                    setEditMapInfo({
-                        ...editMapInfo,
-                        selectElement: {
-                            ...editMapInfo.selectElement,
-                            cuttingHeight: value.cuttingHeight,
-                            isFlowGlobal: value.isFlowGlobal,
-                        },
-                    });
-                } }), jsx(DirectionModal, { directionInfo: directionInfo, optionAngle: optionAngle, open: directionOpen, setOpen: setDirectionOpen, zoneName: editMapInfo.selectElement?.name, onChange: (direction, angle) => {
-                    setEditMapInfo({
-                        ...editMapInfo,
-                        selectElement: {
-                            ...editMapInfo.selectElement,
-                            direction,
-                            angle,
-                        },
-                    });
-                } })] }));
-};
-
-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 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);
-
-var RadioValue;
-(function (RadioValue) {
-    RadioValue[RadioValue["LONG_TIME"] = 0] = "LONG_TIME";
-    RadioValue[RadioValue["SHORT_TIME"] = 1] = "SHORT_TIME";
-})(RadioValue || (RadioValue = {}));
-const TimePeriod = ({ value, onChange }) => {
-    // eslint-disable-next-line no-undef
-    const [date, setDate] = useState();
-    const [open, setOpen] = useState(false);
-    const [radioValue, setRadioValue] = useState(RadioValue.LONG_TIME);
-    console.log('time period->', date, radioValue);
-    return (jsxs("div", { className: styles$1.timePeriod, children: [jsxs("div", { className: styles$1.timePeriodHeader, children: [jsx("div", { className: styles$1.timePeriodTitle, children: "Enabled" }), jsx("div", { className: styles$1.timePeriodHandle, children: jsx(Switch, { checked: value.status === 1, onChange: (checked) => {
-                                onChange({
-                                    ...value,
-                                    status: checked ? 1 : 0,
-                                });
-                            } }) })] }), jsx("div", { className: styles$1.timePeriodContent, children: jsxs(Radio.Group, { value: radioValue, onChange: (e) => {
-                        setRadioValue(e.target.value);
-                        if (e.target.value === RadioValue.LONG_TIME) {
-                            setDate(null);
-                            onChange({
-                                ...value,
-                                startTimestamp: 0,
-                                endTimestamp: 0,
-                            });
-                        }
-                        else if (e.target.value === RadioValue.SHORT_TIME) {
-                            setOpen(true);
-                            // onChange({
-                            //   ...value,
-                            //   startTimestamp: dayjs().add(30, 'minute').unix(),
-                            //   endTimestamp: dayjs().add(1, 'hour').unix(),
-                            // });
-                        }
-                    }, style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: [jsx(Radio, { value: RadioValue.LONG_TIME, children: jsx("div", { className: styles$1.timePeriodRadioItem, children: "\u957F\u65F6\u95F4\u5F00\u542F" }) }), jsx(Radio, { value: RadioValue.SHORT_TIME, children: jsx("div", { className: styles$1.timePeriodRadioItem, children: jsx(DatePicker.RangePicker, { open: open, onOpenChange: (open) => {
-                                        if (!open) {
-                                            setRadioValue(RadioValue.LONG_TIME);
-                                        }
-                                        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);
-                                        if (dateValue?.length === 2) {
-                                            setDate(dateValue);
-                                            onChange({
-                                                status: RadioValue.SHORT_TIME,
-                                                startTimestamp: dateValue[0].unix(),
-                                                endTimestamp: dateValue[1].unix(),
-                                            });
-                                        }
-                                    } }) }) })] }) })] }));
-};
-
-const ObstacleInfo = ({ onHandleDelete }) => {
-    const { editMapInfo, setEditMapInfo } = useMapEditContext();
-    const nameValue = editMapInfo.selectElement?.name;
-    console.log('obstacle->', editMapInfo.selectElement);
-    const timePeriodValue = useMemo(() => {
-        if (!editMapInfo.selectElement)
-            return null;
-        const status = editMapInfo.selectElement?.status;
-        const startTimestamp = editMapInfo.selectElement?.start_timestamp;
-        const endTimestamp = editMapInfo.selectElement?.end_timestamp;
-        return {
-            status,
-            startTimestamp,
-            endTimestamp,
-        };
-    }, [editMapInfo.selectElement]);
-    const sizeValue = useMemo(() => {
-        const points = editMapInfo.selectElement?.points?.map((item) => [
-            item[0] / SCALE_FACTOR,
-            item[1] / SCALE_FACTOR,
-        ]);
-        const { area: areaValue, perimeter: perimeterValue } = calculatePolygonAreaAndPerimeter(points) || {};
-        const formatArea = convertAreaByUnits(areaValue);
-        const formatPerimeter = convertDistanceByUnits(perimeterValue);
-        return {
-            area: formatArea.value,
-            perimeter: formatPerimeter.value,
-        };
-    }, [editMapInfo.selectElement]);
-    return (jsxs("div", { className: styles$9.obstacleInfo, children: [jsx(Header, { handleDelete: () => {
-                    onHandleDelete();
-                }, handleFocus: () => { }, type: editMapInfo.elementType }), jsx("div", { className: styles$9.nameEdit, children: jsx(NameEdit, { name: nameValue, onChange: (name) => {
-                        setEditMapInfo({
-                            ...editMapInfo,
-                            isShowDrag: false,
-                            selectElement: {
-                                ...editMapInfo.selectElement,
-                                name: name,
-                            },
-                        });
-                    } }) }), jsx("div", { className: styles$9.timePeriod, children: 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,
-                            },
-                        });
-                    } }) }), jsxs("div", { className: styles$9.areaInfo, children: [jsxs("div", { className: styles$9.areaItem, children: [jsx("div", { className: styles$9.label, children: "Area:" }), jsx("div", { className: styles$9.value, children: sizeValue?.area })] }), jsxs("div", { className: styles$9.areaItem, children: [jsx("div", { className: styles$9.label, children: "Perimeter:" }), jsx("div", { className: styles$9.value, children: sizeValue?.perimeter })] })] })] }));
-};
-
-const DoodleInfo = ({ onHandleDelete }) => {
-    const { editMapInfo, setEditMapInfo } = useMapEditContext();
-    const options = useMemo(() => {
-        return new Array(30).fill(0).map((_, index) => {
-            return {
-                label: `${index + 1}day`,
-                value: index + 1,
-            };
-        });
-    }, []);
-    const isCreate = useMemo(() => {
-        return editMapInfo?.createMode;
-    }, [editMapInfo?.createMode]);
-    const doodleInfo = useMemo(() => {
-        if (!editMapInfo.selectElement)
-            return null;
-        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);
-        return {
-            day: day,
-        };
-    }, [editMapInfo?.selectElement]);
-    const sizeValue = useMemo(() => {
-        if (!editMapInfo.selectElement || !editMapInfo.selectElement.svg)
-            return '';
-        const svg = editMapInfo.selectElement?.svg;
-        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`;
-    }, [editMapInfo.selectElement]);
-    const handleChange = 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,
-                },
-            };
-        });
-    }, [editMapInfo.selectElement]);
-    console.log('doodleInfo->', doodleInfo);
-    return (jsxs("div", { className: styles$9.doodleInfo, children: [jsx(Header, { handleDelete: () => {
-                    onHandleDelete();
-                }, handleFocus: () => { }, type: editMapInfo.elementType }), isCreate ? (jsx(Item, { children: jsxs("div", { className: styles$9.time, children: [jsxs("div", { className: styles$9.exist, children: [jsx("div", { className: styles$9.label, children: "Graph maintenance time" }), jsx("div", { className: styles$9.value, children: jsx(Select, { defaultValue: doodleInfo?.day, style: { width: 80 }, onChange: (value) => handleChange(value), options: options }) })] }), doodleInfo?.day >= 14 && (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." }))] }) })) : (jsxs("div", { className: styles$9.areaInfo, children: [jsxs("div", { className: styles$9.areaItem, children: [jsx("div", { className: styles$9.label, children: "Graph maintenance time:" }), jsxs("div", { className: styles$9.value, children: [doodleInfo?.day, " day"] })] }), jsxs("div", { className: styles$9.areaItem, children: [jsx("div", { className: styles$9.label, children: "Size:" }), jsx("div", { className: styles$9.value, children: sizeValue })] })] }))] }));
-};
-
-const VisionOffInfo = ({ onHandleDelete }) => {
-    const { editMapInfo, setEditMapInfo } = useMapEditContext();
-    const sizeValue = useMemo(() => {
-        if (!editMapInfo.selectElement)
-            return '';
-        const points = editMapInfo.selectElement?.points;
-        const [width, height] = calculateRectangleDimensions(points);
-        const formatWidth = convertDistanceByUnits(width / SCALE_FACTOR);
-        const formatHeight = convertDistanceByUnits(height / SCALE_FACTOR);
-        return `${formatWidth.value} x ${formatHeight.value}`;
-    }, [editMapInfo.selectElement]);
-    return (jsxs("div", { className: "visionOffInfo", children: [jsx(Header, { handleDelete: () => {
-                    onHandleDelete?.();
-                }, handleFocus: () => { }, type: DataType.VISION_OFF }), jsx("div", { className: styles$9.areaInfo, children: jsxs("div", { className: styles$9.areaItem, children: [jsx("div", { className: styles$9.label, children: "Size:" }), jsx("div", { className: styles$9.value, children: sizeValue })] }) })] }));
-};
-
-var _path$2, _path2$1;
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
-var SvgUndo = function SvgUndo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M4.329 7.821h10.506a5.581 5.581 0 0 1 0 11.163h-5.27"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "m7.293 3.607-4.39 4.215 4.39 4.316"
-  })));
-};
-
-var _path$1, _path2;
-function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
-var SvgRedo = function SvgRedo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M19.672 7.821H9.165a5.581 5.581 0 1 0 0 11.163h5.27"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "m16.708 3.607 4.389 4.215-4.39 4.315"
-  })));
-};
-
-const HandleElementInfo = () => {
-    const { svgElementDatas } = useSvgEditContext();
-    const { checkDoodle } = useCheckElement();
-    const { undo, redo } = useHistoryHandle();
-    const { editMapInfo, setEditMapInfo, onHandleStopRecord, onHandleCompleteRecord, onHandleDeleteElement, onUpdateBoundary, } = useMapEditContext();
-    const currentType = useMemo(() => {
-        return DATE_TYPE_MAP.find((item) => item.type === editMapInfo.elementType);
-    }, [editMapInfo.elementType]);
-    const isUndoDisabled = useMemo(() => {
-        if (editMapInfo?.elementType === DataType.OBSTACLE &&
-            editMapInfo?.createMode === CreateStatus.CREATING) {
-            return !(editMapInfo?.currentHistoryIndex >= 0 && editMapInfo?.historyList?.length);
+        });
+    };
+    const addDoodle = (selectedDoodle) => {
+        const newDoodle = initDoodle();
+        const svg = selectedDoodle?.svgStr;
+        const minLength = selectedDoodle.minLength;
+        const parseSvg = SvgParserNative.parseSvg(svg);
+        const svgMinLength = parseSvg.height / SCALE_FACTOR;
+        // 使用获取到的 SVG 内容，如果没有获取到则使用 URL
+        newDoodle.svg = svg;
+        newDoodle.scale = minLength / svgMinLength;
+        newDoodle.direction = 0;
+        newDoodle.center = restorePoint(centerPoint);
+        if (platform === PlatformType.H5) {
+            setEditMapInfo((prev) => ({
+                ...prev,
+                currentHistoryIndex: 0,
+                mobileMode: MobileEditMode.CREATE,
+                elementType: DataType.DOODLE,
+                selectElement: newDoodle,
+            }));
+            addHistory({
+                selectElement: newDoodle,
+            });
         }
         else {
-            return !(editMapInfo?.currentHistoryIndex > 0 && editMapInfo?.historyList?.length);
+            setEditMapInfo({
+                ...editMapInfo,
+                historyList: [
+                    {
+                        selectElement: newDoodle,
+                    },
+                ],
+                currentHistoryIndex: 0,
+                createMode: CreateStatus.COMPLETED,
+                elementType: DataType.DOODLE,
+                selectElement: newDoodle,
+                isShowDrag: true,
+            });
         }
-    }, [
-        editMapInfo?.currentHistoryIndex,
-        editMapInfo?.historyList,
-        editMapInfo?.createMode,
-        editMapInfo?.elementType,
-    ]);
-    const idRedoDisabled = useMemo(() => {
-        return !(editMapInfo?.currentHistoryIndex < editMapInfo?.historyList?.length - 1 &&
-            editMapInfo?.historyList?.length);
-    }, [editMapInfo?.currentHistoryIndex, editMapInfo?.historyList]);
-    const handleUndo = useCallback(() => {
-        undo();
-    }, [undo]);
-    const handleRedo = useCallback(() => {
-        redo();
-    }, [redo]);
-    const renderElementData = useCallback((element) => {
-        if (!editMapInfo.selectElement)
-            return null;
-        const data = {
-            doodle: undefined,
-            visionOffAreas: undefined,
-            obstacle: undefined,
-            boundary: undefined,
-        };
-        if (element?.type === DataType.DOODLE) {
-            const doodleData = {
-                center: element.center,
-                direction: element.direction,
-                scale: element.scale,
-                svg: element.svg,
-                expiration_ts: element.expiration_ts,
-                create_ts: element.create_ts,
-            };
-            if (element?.id) {
-                doodleData.id = element?.id;
-            }
-            data.doodle = JSON.stringify([doodleData]);
-        }
-        if (element?.type === DataType.VISION_OFF) {
-            const visionOffArea = svgElementDatas?.[DataType.VISION_OFF]
-                ?.filter((item) => item.id !== element.id)
-                ?.map((item) => ({
-                id: item.id,
-                points: restorePointsFormat(item.points),
-            })) || [];
-            const visionOffAreaData = [
-                ...visionOffArea,
-                {
-                    id: element?.id,
-                    points: restorePointsFormat(element.points),
-                },
-            ]?.map((item) => {
-                if (item?.id) {
-                    return {
-                        id: item.id,
-                        points: item.points,
-                    };
-                }
-                return {
-                    points: item.points,
-                };
-            }) || [];
-            data.visionOffAreas = JSON.stringify(visionOffAreaData);
-        }
-        if (element?.type === DataType.OBSTACLE) {
-            data.obstacle = {
-                name: element?.name,
-                status: element?.status || 1,
-                end_timestamp: element?.end_timestamp || 1758870283,
-                start_timestamp: element?.start_timestamp || 1768870283,
-                points: restorePointsFormat(element.points),
-            };
-            if (element?.id) {
-                data.obstacle.id = element?.id;
-            }
+    };
+    const addElement = (type, item) => {
+        let newElement = null;
+        if (type === DataType.BOUNDARY) {
+            newElement = initBoundary();
         }
-        if (element?.type === DataType.BOUNDARY) {
-            data.boundary = {
-                cuttingHeight: element?.cuttingHeight,
-                isFlowGlobal: element?.isFlowGlobal,
-                angle: element?.angle,
-                direction: element?.direction,
-                name: element?.name,
-                edgeMowing: element?.edgeMowing,
-                edgeVision: element?.edgeVision,
-                obstacleMowEdge: element?.obstacleMowEdge,
-            };
-            if (element?.id) {
-                data.boundary.id = element?.id;
-            }
+        else if (type === DataType.OBSTACLE) {
+            newElement = initObstacle();
         }
-        return data;
-    }, [editMapInfo.selectElement]);
-    const handleSave = useCallback(() => {
-        const params = renderElementData(editMapInfo?.selectElement);
-        const isObstacle = editMapInfo?.selectElement?.type === DataType.OBSTACLE;
-        const hasNotEnoughPoints = params?.obstacle?.points?.length < 3;
-        if (isObstacle && hasNotEnoughPoints) {
-            message.error('Save failed, please draw a closed shape');
-            return;
+        else if (type === DataType.CHANNEL) {
+            newElement = initChannel();
         }
-        console.log('save->', editMapInfo, params);
-        if (editMapInfo?.selectElement?.type === DataType.BOUNDARY) {
-            onUpdateBoundary?.(params)?.then(() => {
-                setEditMapInfo({
-                    ...editMapInfo,
-                    createMode: null,
-                    elementType: null,
-                    selectElement: null,
-                    isShowDrag: false,
-                });
-            }, (errorText) => {
-                message.error('Save failed, please try again');
-            });
+        else if (type === DataType.VISION_OFF) {
+            newElement = initVisionOff();
+            newElement.points = centerBounds;
         }
-        else {
-            onHandleCompleteRecord?.(params)?.then(() => {
-                setEditMapInfo({
-                    ...editMapInfo,
-                    createMode: null,
-                    elementType: null,
-                    selectElement: null,
-                    isShowDrag: false,
-                });
-            }, (errorText) => {
-                message.error('Save failed, please try again');
-            });
+        else if (type === DataType.DOODLE) {
+            addDoodle(item);
+            return;
         }
-    }, [editMapInfo.selectElement]);
-    const handleCancel = useCallback(() => {
-        onHandleStopRecord?.()?.then(() => {
-            setEditMapInfo({
-                ...editMapInfo,
-                createMode: null,
-                elementType: null,
-                selectElement: null,
-                isShowDrag: false,
-            });
+        setEditMapInfo({
+            ...editMapInfo,
+            historyList: [
+                {
+                    selectElement: newElement,
+                },
+            ],
+            currentHistoryIndex: 0,
+            createMode: type === DataType.VISION_OFF ? CreateStatus.COMPLETED : CreateStatus.CREATING,
+            elementType: type,
+            selectElement: newElement,
         });
+    };
+    const saveElement = (type, item) => { };
+    useEffect(() => {
+        onEditInfoMapChange?.(editMapInfo);
     }, [editMapInfo]);
-    const handleDelete = useCallback(() => {
-        console.log('handleDelete 1->', editMapInfo);
-        Modal.confirm({
-            icon: null,
-            title: 'Delete',
-            content: 'Are you sure you want to delete this element?',
-            okText: 'Delete',
-            cancelText: 'Cancel',
-            onOk: () => {
-                onHandleStopRecord?.()?.then(() => {
-                    console.log('handleDelete 2->', editMapInfo, onHandleDeleteElement);
-                    if (editMapInfo?.selectElement?.id) {
-                        onHandleDeleteElement?.({
-                            id: editMapInfo.selectElement?.id,
-                            type: editMapInfo.elementType,
-                        })?.then(() => {
-                            setEditMapInfo({
-                                ...editMapInfo,
-                                createMode: null,
-                                elementType: null,
-                                selectElement: null,
-                                isShowDrag: false,
-                            });
-                        }, (errorText) => {
-                            message.error('Save failed, please try again');
-                        });
+    // 暴露ref方法
+    useImperativeHandle(ref, () => ({
+        adjustSvgSize,
+        getSvgElement: () => svgRef.current,
+        getContainerElement: () => containerRef.current,
+        updateEditMapInfo,
+        resetEditMapInfo,
+        getEditMapInfo,
+        // 十字准心点管理器方法
+        addCreateObstaclePoint: () => {
+            return pointManagerRef.current?.addPoint?.();
+        },
+        undoCreateObstaclePoint: () => {
+            pointManagerRef.current?.undoLastPoint();
+        },
+        clearCreateObstaclePoints: () => {
+            pointManagerRef.current?.clear();
+        },
+        getCreateObstaclePoints: () => pointManagerRef.current?.getPoints() || [],
+        getCreateObstaclePointCount: () => pointManagerRef.current?.getPointCount() || 0,
+        // h5进入视觉失效区编辑模式
+        enterVisionOffEditMode,
+        // h5中添加视觉失效区
+        addVisionOffPoint,
+        // 重做
+        redo,
+        // 撤销
+        undo,
+        // 清空历史记录
+        clearHistory,
+        addHistory,
+        addDoodle,
+        checkDoodle: () => checkDoodle?.(),
+        addElement,
+        saveElement,
+    }));
+    // 初始化多边形绘制 Hook
+    const { onSvgClick, onSvgMouseMove, onPointClick, points, completed, mousePos, updatePoints } = usePolygonDrawing({ createMode: isCreating });
+    // 处理删除顶点
+    const handleCreateVertexDelete = (vertexIndex) => {
+        const newPoints = points?.filter((_, index) => index !== vertexIndex);
+        updatePoints(newPoints);
+    };
+    // 基于鼠标位置的检查结果
+    const showNotCreateCursor = useMemo(() => {
+        if (!mousePos)
+            return false;
+        return checkCanNotCreateAtPosition(mousePos);
+    }, [mousePos, checkCanNotCreateAtPosition]);
+    return (jsx("div", { ref: containerRef, className: classNames(styles$1.mapEdit, {
+            [styles$1.createMode]: isCreating,
+            [styles$1.notCreateCursor]: showNotCreateCursor,
+        }), style: {
+            display: editMap ? 'block' : 'none',
+        }, children: jsxs("svg", { style: {
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                // cursor: createMode ? 'crosshair' : editMode ? 'default' : 'move',
+                // pointerEvents: 'auto', // 关键：允许接收鼠标事件
+            }, xmlns: "http://www.w3.org/2000/svg", "shape-rendering": "geometricPrecision", "text-rendering": "geometricPrecision", "image-rendering": "optimizeQuality", ref: svgRef, onClick: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgClick : undefined, onMouseMove: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgMouseMove : undefined, children: [jsxs("defs", { children: [jsx("filter", { id: "vertex-tooltip-shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: jsx("feDropShadow", { dx: "2", dy: "2", stdDeviation: "2", floodColor: "#000", floodOpacity: "0.12" }) }), jsxs("filter", { id: `path-hover-${DataType.BOUNDARY}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: BOUNDARY_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.VISION_OFF}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: VISION_OFF_AREA_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.OBSTACLE}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: OBSTACLE_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] })] }), Object.keys(svgElementDatas)
+                    ?.sort?.((a, b) => {
+                    if (a === DataType.BOUNDARY || b === DataType.BOUNDARY) {
+                        return 0;
                     }
-                    else {
-                        setEditMapInfo({
-                            ...editMapInfo,
-                            createMode: null,
-                            elementType: null,
-                            selectElement: null,
-                            isShowDrag: false,
+                    const aVal = a === editMapInfo.elementType ? 1 : 0;
+                    const bVal = b === editMapInfo.elementType ? 1 : 0;
+                    return aVal - bVal;
+                })
+                    ?.map((key) => {
+                    const elements = svgElementDatas[key] || [];
+                    return (jsxs(GElement, { type: key, data: elements, children: [key === 'channel' && jsx(ChannelClipPath, {}), elements.map((item) => (jsx(SvgElement, { type: key, data: item }, item?.id)))] }, key));
+                }), platform === PlatformType.WEB &&
+                    editMapInfo.createMode &&
+                    editMapInfo.elementType !== DataType.DOODLE &&
+                    editMapInfo.elementType !== DataType.VISION_OFF &&
+                    (points.length > 0 || editMapInfo?.selectElement?.points?.length > 0) && (jsx(PolygonElement, { points: points?.length > 0
+                        ? points.map((p) => [p.x, p.y, 2])
+                        : editMapInfo?.selectElement?.points, fillColor: createElementStyle.fillColor, strokeColor: createElementStyle.lineColor, strokeWidth: createElementStyle.lineWidth, createMode: editMapInfo.elementType !== DataType.VISION_OFF, showPoints: editMapInfo.elementType !== DataType.VISION_OFF, onPointClick: onPointClick, completed: completed, mousePos: mousePos, onVertexDelete: (vertexIndex) => handleCreateVertexDelete(vertexIndex), onCoordinatesChange: (newCoords) => {
+                        // 创建模式下的坐标变化（拖拽时）
+                        // 实时更新当前绘制的多边形
+                        updatePoints(newCoords.map((coord) => ({ x: coord[0], y: coord[1] })));
+                    }, svgRef: svgRef })), platform === PlatformType.WEB &&
+                    editMapInfo.createMode &&
+                    editMapInfo.elementType === DataType.VISION_OFF &&
+                    (points.length > 0 || editMapInfo?.selectElement?.points?.length > 0) && (jsx(VisionOffElement, { data: {
+                        ...editMapInfo?.selectElement,
+                        style: {
+                            fillColor: createElementStyle.fillColor,
+                            lineColor: createElementStyle.lineColor,
+                            lineWidth: createElementStyle.lineWidth,
+                        },
+                    } })), platform === PlatformType.WEB &&
+                    editMapInfo.createMode &&
+                    editMapInfo?.selectElement?.svg && (jsx(DoodleElement, { data: { ...editMapInfo?.selectElement } })), platform === PlatformType.H5 &&
+                    editMapInfo.elementType === DataType.OBSTACLE &&
+                    editMapInfo.mobileMode === MobileEditMode.CREATE && (jsx(CreateObstacleElement, { ref: pointManagerRef, styles: {
+                        fillColor: '#FF7133',
+                        strokeColor: '#FF7133',
+                    }, points: (editMapInfo?.selectElement?.points || []).map((p) => ({
+                        x: p[0],
+                        y: p[1],
+                    })), enabled: true, svgElement: svgRef.current, onPointsChange: (newPoints) => {
+                        const new_points = newPoints.map((p) => [p.x, p.y, 2]);
+                        setEditMapInfo((prev) => {
+                            return {
+                                ...prev,
+                                selectElement: {
+                                    ...prev.selectElement,
+                                    points: new_points,
+                                },
+                                elementType: DataType.OBSTACLE,
+                                mobileMode: MobileEditMode.CREATE,
+                            };
                         });
-                    }
-                }, (errorText) => {
-                    message.error('Save failed, please try again');
-                });
-            },
-        });
-    }, [editMapInfo?.selectElement, onHandleDeleteElement, onHandleStopRecord]);
-    const checkDisabled = 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 (jsxs("div", { className: styles$9.handleElementInfo, children: [editMapInfo?.elementType !== DataType.BOUNDARY ? (jsxs("div", { className: styles$9.undoAndRedo, children: [jsx("div", { className: classNames(styles$9.undo, { [styles$9.disabled]: isUndoDisabled }), onClick: handleUndo, children: jsx(SvgUndo, {}) }), jsx("div", { className: classNames(styles$9.redo, { [styles$9.disabled]: idRedoDisabled }), onClick: handleRedo, children: jsx(SvgRedo, {}) })] })) : null, editMapInfo?.elementType === DataType.BOUNDARY && (jsx(BoundaryInfo, { onHandleDelete: handleDelete })), editMapInfo?.elementType === DataType.OBSTACLE && (jsx(ObstacleInfo, { onHandleDelete: handleDelete })), editMapInfo?.elementType === DataType.DOODLE && jsx(DoodleInfo, { onHandleDelete: handleDelete }), editMapInfo?.elementType === DataType.VISION_OFF && (jsx(VisionOffInfo, { onHandleDelete: handleDelete })), jsxs("div", { className: styles$9.handle, children: [jsx(Button, { disabled: checkDisabled(), variant: "solid", color: "primary", onClick: handleSave, children: "Save & Done" }), jsx(Button, { variant: "outlined", color: "default", onClick: () => {
-                            handleCancel();
-                            setEditMapInfo({
-                                createMode: null,
-                                editMap: false,
-                                elementType: undefined,
-                                selectElement: null,
-                                isShowDrag: false,
-                            });
-                        }, children: "Cancel" })] })] }));
-};
+                        addHistory({
+                            selectElement: { ...editMapInfo?.selectElement, points: new_points },
+                        });
+                    } })), platform === PlatformType.H5 &&
+                    editMapInfo.elementType === DataType.VISION_OFF &&
+                    (editMapInfo.mobileMode === MobileEditMode.CREATE ||
+                        editMapInfo.mobileMode === MobileEditMode.EDIT) &&
+                    editMapInfo.allVisionOffPoints?.length > 0 &&
+                    editMapInfo.allVisionOffPoints.map((item) => (jsx(VisionOffElement, { data: {
+                            level: 100,
+                            renderType: RenderType.POLYGON,
+                            type: DataType.VISION_OFF,
+                            // ...editMapInfo.selectElement,
+                            originalData: {
+                                points: item.points,
+                                id: item.id,
+                                name: '',
+                                type: 'VISION_OFF_AREA',
+                            },
+                            style: {
+                                fillColor: createElementStyle.fillColor,
+                                lineColor: createElementStyle.lineColor,
+                                lineWidth: createElementStyle.lineWidth,
+                            },
+                            points: item.points,
+                            id: item.id,
+                        } }))), platform === PlatformType.H5 &&
+                    editMapInfo.elementType === DataType.DOODLE &&
+                    editMapInfo.mobileMode === MobileEditMode.CREATE &&
+                    editMapInfo?.selectElement?.svg && (jsx(DoodleElement, { data: { ...editMapInfo?.selectElement } }))] }) }));
+});
+SvgEditMap.displayName = 'SvgEditMap';
 
 var _path;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -21113,7 +20082,7 @@ const defaultMapConfig = DEFAULT_STYLES;
 // 地图渲染器组件
 const MowerMapRenderer = forwardRef(({ sn, platform = PlatformType.WEB, edger = false, unitType = UnitsType.Imperial, language = 'en', onlyRead = false, mapConfig, 
 // pathConfig,
-modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, onPathLoad, onError, className, style, googleMapInstance: _googleMapInstance, dragMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, }, ref) => {
+modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, onPathLoad, onError, className, style, googleMapInstance: _googleMapInstance, dragMap = false, dragCallbacks, defaultTransform, debug: _debug = false, doodleList = [], editMap = false, unStructMapData, disabledObstacles = false, onHandleEnterRecord, onHandleCompleteRecord, onHandleStopRecord, onHandleDeleteElement, onSaveBoundaryData, onSaveMap, onEditInfoMapChange, onUpdateBoundary, heightOptions, globalHeight, onHandleEvent, onSelectElement, }, ref) => {
     const [currentError, setCurrentError] = useState(null);
     const overlayRef = useRef(null);
     // const mapRef = useMap();
@@ -21128,14 +20097,15 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     });
     const [overlay, setOverlay] = useState(null);
     const [overlayLayout, setOverlayLayout] = useState(null);
+    const [overlayScale, setOverlayScale] = useState(1);
+    // 参考zoom级别,在此级别时overlayScale=1,元素显示原始大小
+    const REFERENCE_ZOOM = useMemo(() => {
+        return platform === PlatformType.WEB ? 21 : 21;
+    }, [platform]);
     const svgMapRef = useRef(null);
     const svgEditMapRef = useRef(null);
     const [editMapInfo, setEditMapInfo] = useState({
-        editMap: false,
-        selectElement: null,
-        createMode: null,
-        elementType: null,
-        isShowDrag: false,
+        ...INIT_EDIT_MAP_INFO,
     });
     const minDistance = useMemo(() => {
         return getMinSvgDistanceByModel(modelType);
@@ -21170,6 +20140,8 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
             onSaveMap,
             onHandleDeleteElement,
             onUpdateBoundary,
+            onHandleEvent,
+            onSelectElement,
         };
     }, [
         minDistance,
@@ -21181,6 +20153,8 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         onSaveBoundaryData,
         onSaveMap,
         onUpdateBoundary,
+        onHandleEvent,
+        onSelectElement,
     ]);
     // 合并配置
     const mergedMapConfig = useMemo(() => {
@@ -21213,6 +20187,8 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
             mapJson,
             drag: defaultTransform,
             mapRef,
+            overlayScale,
+            doodleList,
         };
     }, [
         sn,
@@ -21226,6 +20202,8 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         mapJson,
         defaultTransform,
         mapRef,
+        overlayScale,
+        doodleList,
     ]);
     // console.log('svgElementDatas->', svgElementDatas, unStructMapData, commonValue);
     // 处理地图分区边界
@@ -21244,7 +20222,6 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     //   }
     //   return allBoundaryElements;
     // }, [mapJson]);
-    useMemo(() => antennaConfig, [antennaConfig]);
     const mowerPositionData = useMemo(() => {
         // realTimeData 中包含三个种类的数据，之需要实时坐标的数据即可。
         if (!realTimeData || realTimeData.length === 0)
@@ -21457,6 +20434,46 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     useEffect(() => {
         setDrag(defaultTransform ?? { x: 0, y: 0, rotation: 0 });
     }, [defaultTransform]);
+    // 监听地图zoom变化,计算缩放比例
+    useEffect(() => {
+        if (!mapRef)
+            return;
+        const updateScale = () => {
+            const currentZoom = mapRef.getZoom();
+            if (currentZoom === undefined)
+                return;
+            // 基于固定的参考zoom级别计算overlayScale
+            const zoomDiff = currentZoom - REFERENCE_ZOOM;
+            const scale = Math.pow(2, -zoomDiff); // 负数实现反向缩放
+            console.log('scale', scale, currentZoom, zoomDiff);
+            setOverlayScale(scale < 1 ? 1 : scale);
+            // if (scale < 1) {
+            //   setOverlayScale(1);
+            // } else if (scale > 4) {
+            //   setOverlayScale(4);
+            // } else {
+            //   setOverlayScale(scale);
+            // }
+        };
+        // 使用lodash throttle进行节流处理: 100ms内只执行一次
+        const handleZoomChanged = throttle$2(updateScale, 50);
+        // 添加zoom监听
+        const listener = mapRef.addListener('zoom_changed', handleZoomChanged);
+        // 初始化时获取当前zoom
+        updateScale();
+        return () => {
+            if (listener) {
+                window.google.maps.event.removeListener(listener);
+            }
+            // 取消未执行的节流函数
+            handleZoomChanged.cancel();
+        };
+    }, [mapRef]);
+    useEffect(() => {
+        if (!editMap) {
+            setEditMapInfo(INIT_EDIT_MAP_INFO);
+        }
+    }, [editMap]);
     useEffect(() => {
         if (!mapJson)
             return;
@@ -21527,6 +20544,14 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
         clearHistory: () => svgEditMapRef.current?.clearHistory(),
         // 添加历史记录
         addHistory: (history) => svgEditMapRef.current?.addHistory(history),
+        // 添加doodle
+        addDoodle: (doodle) => svgEditMapRef.current?.addDoodle(doodle),
+        // 检查doodle
+        checkDoodle: () => svgEditMapRef.current?.checkDoodle?.(),
+        // 增加元素（web）
+        addElement: (type, item) => svgEditMapRef.current?.addElement(type, item),
+        // 保存元素
+        saveElement: (type, item) => svgEditMapRef.current?.saveElement(type, item),
     }));
     /**
      * 根据割草机的位置更新路径
@@ -21541,7 +20566,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
     }
     // console.log('mowerrender------->', svgViewBox);
     // 使用goole maps自定义叠加层，返回debug信息（如果启用）
-    return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxs(MapEditContextProvider, { value: mapEditValue, children: [platform !== PlatformType.H5 && (jsxs(Fragment, { children: [jsx(AddEntry, { disabledObstacles: disabledObstacles, doodleList: doodleList, editMap: editMap }), jsx(HandleElementInfo, { editMapInfo: editMapInfo, setEditMapInfo: setEditMapInfo })] })), platform === PlatformType.H5 && jsx(Crosshair, {}), jsxs(OverlayViewF, { onLoad: (lay) => {
+    return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxs(MapEditContextProvider, { value: mapEditValue, children: [platform !== PlatformType.H5 && (jsx(Fragment, {})), platform === PlatformType.H5 && jsx(Crosshair, {}), jsxs(OverlayViewF, { onLoad: (lay) => {
                             setOverlay(lay);
                         }, onDraw: (style) => {
                             const layout = Object.keys(style).reduce((pre, cur) => {
@@ -21551,7 +20576,6 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
                                 pre[cur] = parseFloat(curLayout);
                                 return pre;
                             }, {});
-                            // console.log('setedit svg ------------->', layout);
                             if (layout?.width && layout?.height) {
                                 svgEditMapRef?.current?.adjustSvgSize?.(layout);
                                 setOverlayLayout(layout);
@@ -21560,4 +20584,66 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
 });
 MowerMapRenderer.displayName = 'MowerMapRenderer';
 
-export { MapDataProcessor, MowerMapRenderer, PathDataProcessor, calculateMapGpsCenter, estimateGpsFromMapBounds };
+const BoundarySvgRender = React__default.memo(({ mapJson, id, maxWidth = 300 }) => {
+    const svgElementData = useMemo(() => {
+        const data = UnifiedMapDataProcessor.processMapData(mapJson, DEFAULT_STYLES) || {};
+        return data;
+    }, [mapJson, DEFAULT_STYLES]);
+    const boundaryInfo = useMemo(() => {
+        const boundary = svgElementData.boundary.find((item) => item.id === id);
+        return boundary;
+    }, [id, svgElementData]);
+    // 计算当前boundary的viewBox
+    const boundaryViewBox = useMemo(() => {
+        if (!boundaryInfo?.points || boundaryInfo.points.length === 0) {
+            return null;
+        }
+        // 计算边界
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        boundaryInfo.points.forEach((point) => {
+            minX = Math.min(minX, point[0]);
+            minY = Math.min(minY, point[1]);
+            maxX = Math.max(maxX, point[0]);
+            maxY = Math.max(maxY, point[1]);
+        });
+        // 添加边距
+        const padding = 50;
+        const width = maxX - minX + padding * 2;
+        const height = maxY - minY + padding * 2;
+        return {
+            x: minX - padding,
+            y: minY - padding,
+            width,
+            height,
+        };
+    }, [boundaryInfo]);
+    const style = useMemo(() => {
+        if (boundaryViewBox?.width > boundaryViewBox?.height) {
+            return {
+                width: maxWidth,
+                height: maxWidth * (boundaryViewBox.height / boundaryViewBox.width),
+            };
+        }
+        return {
+            width: maxWidth * (boundaryViewBox.height / boundaryViewBox.width),
+            height: maxWidth,
+        };
+    }, [boundaryViewBox, maxWidth]);
+    return (jsxs("div", { style: {
+            position: 'relative',
+            width: style.width,
+            height: style.height,
+            margin: '0 auto',
+        }, children: [jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `${boundaryViewBox.x} ${boundaryViewBox.y} ${boundaryViewBox.width} ${boundaryViewBox.height}`, width: `${style.width}px`, height: `${style.height}px`, style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: Object.keys(svgElementData)?.map((key) => {
+                    return svgElementData[key]?.map((element) => {
+                        if (key === DataType.VISION_OFF)
+                            return null;
+                        return (jsx(GElement, { type: key, data: svgElementData[key], children: jsx(SvgElement, { type: key, data: element, onSelect: () => { }, onCancel: () => { } }, element.id) }, key));
+                    });
+                }) }), jsx(CharginPile, { mapData: mapJson, mapConfig: DEFAULT_STYLES, viewBox: boundaryViewBox || null, rotation: 0 })] }));
+});
+
+export { ALL_DIRECTION_SELECTED, AntennaData, AntennaDataBuilder, BaseData, BoundaryData, BoundarySvgRender, ChannelData, ChargingPileData, CreateStatus, DataType, DoodleData, MAX_DIRECTION_ANGLE, MIN_DIRECTION_ANGLE, MapDataProcessor, MobileEditMode, MowerMapRenderer, ObstacleData, PathData, PathDataProcessor, PlatformType, RecordFunctionEnum, RecordTypeEnum, RenderType, SCALE_FACTOR, SvgParserNative, UnifiedMapDataProcessor, VisionOffData, calculateMapGpsCenter, estimateGpsFromMapBounds, initBoundary, initChannel, initDoodle, initObstacle, initVisionOff, restorePointsFormat };