@wenle_2523097/agri-map 2.0.1 → 2.0.2

package/dist/index.umd.js

@@ -5379,7 +5379,7 @@
    * 管理线要素图层的创建与清理
    *
    * 负责：
-   * 1. 编辑模式下过滤数据（create/edit 模式不渲染已有要素）
+   * 1. 编辑模式下过滤数据（create/redraw 模式不渲染已有要素）
    * 2. 创建 LayerGroup 并将数据渲染进去
    * 3. 组件卸载时移除 editingLayerRef
    *
@@ -5432,7 +5432,8 @@
         return renderItem(item, layerGroup, index);
       });
       // 数据变化时清理编辑图层（新建保存后数据源更新时，移除临时的编辑图层避免重复）
-      if (dataChanged && editingLayerRef.current) {
+      // 注意：在 redraw 模式下 editingLayerRef 不应被清理（可能在编辑过程中）
+      if (dataChanged && editingLayerRef.current && currentMode !== 'redraw') {
         currentMap.removeLayer(editingLayerRef.current);
         editingLayerRef.current = null;
       }
@@ -16092,7 +16093,9 @@
           mode: mode,
           value: getSelectedIdsForType(plotType),
           onSelect: handleSelect(plotType),
-          onClick: handleClick(plotType),
+          onClick: function onClick(item) {
+            return handleClick(plotType)(item, undefined);
+          },
           onHover: handleHover(plotType),
           onContextMenu: handleContextMenu(plotType),
           groupKey: groupKey,
@@ -23781,6 +23784,10 @@
    * - click 模式：点击道路切换 Popup 显示/隐藏（toggle）
    * - hover 模式：鼠标进入道路延迟显示 Popup，离开立即隐藏（带防抖）
    * - 地图点击：点击地图空白区域自动关闭 Popup
+   *
+   * 【稳定性优化】
+   * handleRoadClick 和 handleRoadHover 通过 useRef 保持稳定引用，
+   * 避免因内部状态变化导致回调函数引用改变。
    */
   /**
    * 计算 Popup 位置参数（用于 usePopupTrigger）
@@ -23836,6 +23843,11 @@
       },
       canClose: popupTrigger.canClosePopup
     });
+    // ========== 稳定性优化：使用 ref 保持 popupTrigger 稳定引用 ==========
+    // popupTrigger 来自 usePopupState，其内部状态变化会导致函数引用改变
+    // 通过 ref 缓存，避免 handleRoadClick/handleRoadHover 依赖变化
+    var popupTriggerLocalRef = React.useRef(popupTrigger);
+    popupTriggerLocalRef.current = popupTrigger;
     // ========== 业务逻辑 ==========
     /** 计算 Popup 参数的辅助函数 */
     var getPopupParams = React.useCallback(function (road, layer) {
@@ -23845,30 +23857,30 @@
     // 处理道路点击
     var handleRoadClick = React.useCallback(function (roadId, road, layer) {
       // Popup 处理（仅 click 模式）
-      if ((popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) === 'click' && onPopupOpenRef !== null && onPopupOpenRef !== void 0 && onPopupOpenRef.current) {
+      if (popupTriggerRef.current === 'click' && onPopupOpenRef !== null && onPopupOpenRef !== void 0 && onPopupOpenRef.current) {
         var _getPopupParams = getPopupParams(road, layer),
           position = _getPopupParams.position,
           bounds = _getPopupParams.bounds;
-        popupTrigger.handleItemClick(roadId, road, layer, position, bounds);
+        popupTriggerLocalRef.current.handleItemClick(roadId, road, layer, position, bounds);
       }
-    }, [popupTriggerRef, onPopupOpenRef, popupTrigger, getPopupParams]);
+    }, [onPopupOpenRef, getPopupParams, popupTriggerRef]);
     // 处理道路悬停进入
     var handleRoadHover = React.useCallback(function (roadId, road, layer, type) {
       if (type === 'mouseover') {
         // Popup 处理（仅 hover 模式）
-        if ((popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) === 'hover' && onPopupOpenRef !== null && onPopupOpenRef !== void 0 && onPopupOpenRef.current) {
+        if (popupTriggerRef.current === 'hover' && onPopupOpenRef !== null && onPopupOpenRef !== void 0 && onPopupOpenRef.current) {
           var _getPopupParams2 = getPopupParams(road, layer),
             position = _getPopupParams2.position,
             bounds = _getPopupParams2.bounds;
-          popupTrigger.handleMouseOver(roadId, road, layer, position, bounds);
+          popupTriggerLocalRef.current.handleMouseOver(roadId, road, layer, position, bounds);
         }
       } else {
         // mouseout: 清除防抖定时器
-        if ((popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) === 'hover') {
-          popupTrigger.handleMouseOut();
+        if (popupTriggerRef.current === 'hover') {
+          popupTriggerLocalRef.current.handleMouseOut();
         }
       }
-    }, [popupTriggerRef, onPopupOpenRef, popupTrigger, getPopupParams]);
+    }, [onPopupOpenRef, getPopupParams, popupTriggerRef]);
     // 处理道路右键
     var handleRoadContextMenu = React.useCallback(function (_roadId, _road, _layer, _event) {
       // 右键默认行为由外层处理，这里仅提供基础支持
@@ -24249,6 +24261,16 @@
     }, [map, editEnabled]);
     var renderItem = React.useCallback(function (road, layerGroup, index) {
       var _onRowRef$current, _onRowRef$current2;
+      // ========== 方案一修复：redraw 模式下跳过正在编辑的道路 ==========
+      // 修复描述：当进入重绘模式时，被选中的道路（id === value）不应该被 renderItem 渲染
+      // 原因：被选中的道路已经通过 editingLayerRef 在地图上以编辑样式（绿色）渲染
+      //      如果 renderItem 仍然渲染，会导致同一道路以两种样式（红色原始样式 + 绿色编辑样式）同时显示
+      // 撤销方法：删除以下 if 块及其注释即可恢复到修改前的状态
+      // 问题根因：usePolylineRenderer 在 currentMode === 'redraw' 时仍然渲染了所有数据，包括被编辑的道路
+      // ========== 方案一修复结束 ==========================================
+      if (currentModeRef.current === 'redraw' && road.id === valueRef.current) {
+        return; // 跳过渲染，由 editingLayerRef 处理该道路的显示
+      }
       var isSelected = road.id === value;
       var style = getRoadStyle(road, isSelected);
       var rowEvents = (_onRowRef$current = (_onRowRef$current2 = onRowRef.current) === null || _onRowRef$current2 === void 0 ? void 0 : _onRowRef$current2.call(onRowRef, road, index)) !== null && _onRowRef$current !== void 0 ? _onRowRef$current : {};
@@ -24417,8 +24439,10 @@
       }
     }, [value, normalizedData, onEditRef, enabledButtonsRef]);
     var handleRedraw = React.useCallback(function () {
-      var _editingPath$vertexBo3, _editingPath$vertexFi3, _editingPath$vertexFi4, _editLayer$pm;
-      if (!map || !enabledButtonsRef.current.includes('redraw') || !value || !map.pm) return;
+      var _editingPath$vertexBo3, _editingPath$vertexFi3, _editingPath$vertexFi4, _map$pm, _map$pm$globalEditMod, _editLayer$pm;
+      if (!map || !enabledButtonsRef.current.includes('redraw') || !value || !map.pm) {
+        return;
+      }
       var layer = layerByIdRef.current[value];
       if (!layer) return;
       var road = normalizedData.find(function (r) {
@@ -24438,6 +24462,10 @@
         map.removeLayer(layerGroupRef.current);
         layerGroupRef.current = null;
       }
+      // 禁用全局编辑模式
+      if ((_map$pm = map.pm) !== null && _map$pm !== void 0 && (_map$pm$globalEditMod = _map$pm.globalEditModeEnabled) !== null && _map$pm$globalEditMod !== void 0 && _map$pm$globalEditMod.call(_map$pm)) {
+        map.pm.disableGlobalEditMode();
+      }
       var editLayer = L$1.polyline(road.points, _objectSpread2(_objectSpread2({}, editingPath), {}, {
         className: 'road-line'
       })).addTo(map);
@@ -24459,7 +24487,9 @@
     }, [value, normalizedData, map, editingPath, enabledButtonsRef]);
     React.useEffect(function () {
       var _editingPath$vertexBo4, _editingPath$vertexFi5, _editingPath$vertexFi6;
-      if (currentMode !== 'redraw' || !editingLayerRef.current || !map) return;
+      if (currentMode !== 'redraw' || !editingLayerRef.current || !map) {
+        return;
+      }
       editingLayerRef.current.setStyle(editingPath);
       // 设置顶点样式 CSS 变量（与 PlotLayer 保持一致）
       var vertexBorderColor = (_editingPath$vertexBo4 = editingPath.vertexBorderColor) !== null && _editingPath$vertexBo4 !== void 0 ? _editingPath$vertexBo4 : ROAD_STYLE.editing.vertexBorderColor;
@@ -25391,6 +25421,15 @@
       }, animated, detected.type === 'svg' ? detected.config : null, detected.type === 'url' ? detected.src : null, 'irrigation-port-marker');
     }, []);
     var renderItem = React.useCallback(function (channel, layerGroup, _index) {
+      // ========== 方案一修复：redraw 模式下跳过正在编辑的渠道 ==========
+      // 修复描述：当进入重绘模式时，被选中的渠道（id === value）不应该被 renderItem 渲染
+      // 原因：被选中的渠道已经通过 editingLayerRef 在地图上以编辑样式渲染
+      //      如果 renderItem 仍然渲染，会导致同一渠道以两种样式同时显示
+      // 撤销方法：删除以下 if 块及其注释即可恢复到修改前的状态
+      // ========== 方案一修复结束 ==========================================
+      if (currentModeRef.current === 'redraw' && channel.id === valueRef.current) {
+        return; // 跳过渲染，由 editingLayerRef 处理该渠道的显示
+      }
       var isSelected = channel.id === value;
       var style = getChannelStyle(channel, isSelected);
       var hitArea = L$1.polyline(channel.points, {