@wenle_2523097/agri-map 1.0.2 → 1.0.4

package/dist/components/shared/ToolbarButton.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 工具栏按钮组件
+ * @description 提供统一样式的工具栏按钮，避免与 Ant Design Button 命名冲突
+ */
+import type { ButtonVariant, ToolbarSize, ToolbarColor } from './BaseEditToolbar';
+export interface ToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 按钮样式变体（兼容，优先使用 color） */
+    variant?: ButtonVariant;
+    /** 按钮颜色 */
+    color?: ToolbarColor;
+    /** 按钮尺寸 */
+    size?: ToolbarSize;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否仅显示图标（不显示文字） */
+    iconOnly?: boolean;
+    /** 类名前缀（可选，默认从 Context 获取） */
+    classPrefix?: string;
+    /** 子元素 */
+    children?: React.ReactNode;
+}
+/**
+ * 工具栏按钮组件
+ * @description 提供与 BaseEditToolbar 按钮一致的样式
+ *
+ * @example
+ * ```tsx
+ * // 在 Marker 组件中使用
+ * <Marker
+ *   editMode={{
+ *     enabled: ['create', 'move', 'delete'],
+ *     toolbar: (
+ *       <ToolbarButton variant="primary" onClick={() => console.log('clicked')}>
+ *         自定义按钮
+ *       </ToolbarButton>
+ *     )
+ *   }}
+ * />
+ *
+ * // 带图标
+ * <ToolbarButton variant="danger" icon={<DeleteIcon />}>
+ *   删除
+ * </ToolbarButton>
+ * ```
+ */
+declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default ToolbarButton;

package/dist/components/shared/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 共享组件导出
+ */
+export { default as BaseEditToolbar, type BaseEditToolbarProps, type BaseEditToolbarRef, type ButtonVariant, type ToolbarColor, type ToolbarPresetColors, type ToolbarSize, ToolbarContext, useToolbarContext } from './BaseEditToolbar';
+export { default as ToolbarButton, type ToolbarButtonProps } from './ToolbarButton';

package/dist/constants/device.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 设备相关常量定义
+ */
+/** 设备类型枚举值映射 */
+export declare const DeviceType: {
+    readonly TRACTOR: "tractor";
+    readonly HARVESTER: "harvester";
+    readonly SEEDER: "seeder";
+    readonly SPRAYER: "sprayer";
+    readonly DRONE: "drone";
+    readonly OTHER: "other";
+};
+/** 设备类型颜色配置 */
+export declare const DEVICE_TYPE_COLORS: Record<string, string>;

package/dist/constants/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 常量定义
+ * @description 组件库中使用的各种常量配置
+ *
+ * 按领域拆分的常量模块：
+ * - plot.ts: 地块相关常量
+ * - road.ts: 道路相关常量
+ * - device.ts: 设备相关常量
+ * - map.ts: 地图配置常量
+ * - unit.ts: 单位换算常量
+ * - theme.ts: 主题配置常量
+ * - styles.ts: 默认 PathOptions 样式常量
+ */
+export { PlotType, PlotStatus, PLOT_TYPE_COLORS, getPlotTypeColor, type PlotTypeColorConfig, } from './plot';
+export { RoadType, ROAD_TYPE_STYLES, } from './road';
+export { DeviceType, DEVICE_TYPE_COLORS, } from './device';
+export { DEFAULT_MAP_CONFIG, } from './map';
+export { UNIT_CONVERSION, } from './unit';
+export { THEME_CONFIG, THEME_CSS_VARS, getThemeColors, type ThemeMode, type ThemeColors, } from './theme';
+export { PLOT_DEFAULT_PATH, PLOT_DEFAULT_SELECTED_PATH, PLOT_DEFAULT_EDIT_PATH, PLOT_DEFAULT_HIGHLIGHT_PATH, PLOT_FALLBACK_PATH, PLOT_PM_CREATE_OPTIONS, PLOT_CLIP_FRAGMENT_DEFAULT, PLOT_CLIP_FRAGMENT_SELECTED, ROAD_DEFAULT_PATH, ROAD_DEFAULT_SELECTED_PATH, ROAD_PM_PATH_OPTIONS, IRRIGATION_DEFAULT_PATH, IRRIGATION_DEFAULT_SELECTED_PATH, IRRIGATION_PM_PATH_OPTIONS, PM_TEMPLATE_LINE_STYLE, PM_HINT_LINE_STYLE, PM_DRAW_COMMON_OPTIONS, } from './styles';

package/dist/constants/map.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 地图配置常量定义
+ */
+/**
+ * 默认地图配置
+ */
+export declare const DEFAULT_MAP_CONFIG: {
+    readonly DEFAULT_CENTER: [number, number];
+    readonly DEFAULT_ZOOM: 13;
+    readonly MIN_ZOOM: 3;
+    readonly MAX_ZOOM: 18;
+    readonly TILE_LAYER_URL: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+};

package/dist/constants/plot.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 地块相关常量定义
+ */
+/** 地块类型枚举值映射 */
+export declare const PlotType: {
+    readonly FARMLAND: "farmland";
+    readonly VEGETABLE: "vegetable";
+    readonly ORCHARD: "orchard";
+    readonly FOREST: "forest";
+    readonly GRASSLAND: "grassland";
+    readonly PADDY: "paddy";
+    readonly GREENHOUSE: "greenhouse";
+};
+/** 地块状态枚举值映射 */
+export declare const PlotStatus: {
+    readonly CULTIVATING: "cultivating";
+    readonly FALLOW: "fallow";
+    readonly HARVESTING: "harvesting";
+    readonly PLANTING: "planting";
+    readonly IRRIGATING: "irrigating";
+};
+/** 地块类型颜色配置 */
+export interface PlotTypeColorConfig {
+    fillColor: string;
+    color: string;
+}
+export declare const PLOT_TYPE_COLORS: Record<string, PlotTypeColorConfig>;
+/**
+ * 根据地块类型获取颜色配置
+ * @param type - 地块类型
+ * @returns 颜色配置 { fillColor, color }
+ */
+export declare const getPlotTypeColor: (type: string | undefined) => PlotTypeColorConfig;

package/dist/constants/road.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 道路相关常量定义
+ */
+import type { PathOptions } from '../types';
+/** 道路类型枚举值映射 */
+export declare const RoadType: {
+    readonly MAIN: "main";
+    readonly SECONDARY: "secondary";
+    readonly FOOTPATH: "footpath";
+};
+/** 道路类型样式配置 */
+export declare const ROAD_TYPE_STYLES: Record<string, PathOptions>;

package/dist/constants/styles.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 默认 PathOptions 样式常量
+ * @description 集中管理各组件的默认视觉样式，便于全局统一调整
+ *
+ * ⚠️ 颜色值必须与 src/styles/_variables.scss 中的语义色变量保持同步：
+ *   PLOT_DEFAULT_PATH.color/fillColor          → $color-plot (#1668dc)
+ *   PLOT_DEFAULT_SELECTED_PATH.color/fillColor → $color-plot-selected (#d32029)
+ *   PLOT_DEFAULT_EDIT_PATH.color/fillColor     → $color-plot-edit (#faad14)
+ *   PLOT_DEFAULT_HIGHLIGHT_PATH.color/fillColor → $color-plot-highlight (#fa8c16)
+ *   ROAD_PM_PATH_OPTIONS.color                 → $color-road-edit (#8B4513)
+ *   IRRIGATION_DEFAULT_PATH.color              → $color-irrigation (#1E90FF)
+ *   IRRIGATION_PM_PATH_OPTIONS.color           → $color-irrigation (#1E90FF)
+ *   PM_*.color / IRRIGATION_DEFAULT_SELECTED_PATH.color → $color-primary (#1677ff)
+ *   PLOT_CLIP_FRAGMENT_*.color                 → $color-success (#52c41a)
+ */
+import type { PathOptions } from '../types';
+/** 地块默认样式 */
+export declare const PLOT_DEFAULT_PATH: PathOptions;
+/** 地块选中样式 */
+export declare const PLOT_DEFAULT_SELECTED_PATH: PathOptions;
+/** 地块编辑样式 */
+export declare const PLOT_DEFAULT_EDIT_PATH: PathOptions;
+/** 地块高亮样式（分组高亮） */
+export declare const PLOT_DEFAULT_HIGHLIGHT_PATH: PathOptions;
+/** 地块无类型时的回退样式 */
+export declare const PLOT_FALLBACK_PATH: PathOptions;
+/** 地块新建绘制时的 PM 样式 */
+export declare const PLOT_PM_CREATE_OPTIONS: PathOptions;
+/** 地块剪切碎片默认样式 */
+export declare const PLOT_CLIP_FRAGMENT_DEFAULT: PathOptions;
+/** 地块剪切碎片选中样式 */
+export declare const PLOT_CLIP_FRAGMENT_SELECTED: PathOptions;
+/** 道路默认样式 */
+export declare const ROAD_DEFAULT_PATH: PathOptions;
+/** 道路选中样式 */
+export declare const ROAD_DEFAULT_SELECTED_PATH: PathOptions;
+/** 道路编辑样式 */
+export declare const ROAD_DEFAULT_EDIT_PATH: PathOptions;
+/** 道路 PM 编辑器全局样式 */
+export declare const ROAD_PM_PATH_OPTIONS: PathOptions;
+/** 灌溉渠默认样式 */
+export declare const IRRIGATION_DEFAULT_PATH: PathOptions;
+/** 灌溉渠选中样式 */
+export declare const IRRIGATION_DEFAULT_SELECTED_PATH: PathOptions;
+/** 灌溉渠编辑样式 */
+export declare const IRRIGATION_DEFAULT_EDIT_PATH: PathOptions;
+/** 灌溉渠 PM 编辑器全局样式 */
+export declare const IRRIGATION_PM_PATH_OPTIONS: PathOptions;
+/** PM 绘制时的临时线样式（templineStyle） */
+export declare const PM_TEMPLATE_LINE_STYLE: PathOptions;
+/** PM 绘制时的提示线样式（hintlineStyle） */
+export declare const PM_HINT_LINE_STYLE: PathOptions;
+/** PM 绘制公共配置（snappable / snapDistance） */
+export declare const PM_DRAW_COMMON_OPTIONS: {
+    readonly snappable: true;
+    readonly snapDistance: 20;
+};

package/dist/constants/theme.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 主题配置常量
+ * @description 集中管理所有主题相关的颜色和样式配置
+ *
+ * ⚠️ 颜色值必须与 src/styles/_variables.scss 中的主题变量保持同步：
+ *   light.controlBg  → $theme-light-control-bg
+ *   light.primaryColor → $theme-light-primary / $color-primary
+ *   dark.controlBg   → $theme-dark-control-bg
+ *   dark.primaryColor → $theme-dark-primary / $dark-color-primary
+ */
+/**
+ * 主题模式类型
+ */
+export type ThemeMode = 'light' | 'dark';
+/**
+ * 主题颜色配置接口
+ * @deprecated 请使用 CSS 变量或 SCSS 变量获取主题颜色，此接口将在下个大版本移除
+ */
+export interface ThemeColors {
+    /** 控件背景色 */
+    controlBg: string;
+    /** 控件文字颜色 */
+    controlText: string;
+    /** 主色调 */
+    primaryColor: string;
+    /** 边框颜色 */
+    borderColor: string;
+    /** 阴影颜色 */
+    shadowColor: string;
+}
+/**
+ * 主题配置映射
+ * @deprecated 请使用 CSS 变量或 SCSS 变量获取主题颜色，此接口将在下个大版本移除
+ */
+export declare const THEME_CONFIG: Record<ThemeMode, ThemeColors>;
+/**
+ * 根据主题获取颜色配置
+ * @deprecated 请使用 CSS 变量或 SCSS 变量获取主题颜色，此函数将在下个大版本移除
+ * @param theme 主题模式
+ * @returns 主题颜色配置
+ */
+export declare const getThemeColors: (theme: ThemeMode) => ThemeColors;
+/**
+ * CSS 变量映射（用于 JS 运行时设置 CSS 变量给非 Leaflet 控件）
+ * ⚠️ 值必须与 src/styles/_variables.scss 保持同步
+ */
+export declare const THEME_CSS_VARS: Record<ThemeMode, Record<string, string>>;

package/dist/constants/unit.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 单位换算常量定义
+ */
+/**
+ * 单位换算常量
+ */
+export declare const UNIT_CONVERSION: {
+    readonly SQUARE_METERS_TO_MU: 0.0015;
+    readonly MU_TO_SQUARE_METERS: 666.67;
+    readonly EARTH_RADIUS: 6371000;
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 自定义 Hooks 导出
+ */
+export { useLatestRef } from './useLatestRef';
+export { useEditMode, type EditModeConfig, type EditModeResult } from './useEditMode';
+export { useTheme } from './useTheme';
+export { usePolylineRenderer } from './usePolylineRenderer';
+export { usePolylineEditor, usePolylineSave } from './usePolylineEditor';

package/dist/hooks/useEditMode.d.ts

@@ -0,0 +1,75 @@
+/**
+ * 解析编辑模式的 Hook
+ * @description 统一处理各组件的 editMode 属性解析逻辑
+ */
+import type { ReactNode } from 'react';
+import type { ToolbarColor, ToolbarSize } from '../components/shared/BaseEditToolbar';
+/**
+ * 编辑模式对象配置
+ */
+export interface EditModeObjectConfig<T extends string> {
+    /** 启用的编辑按钮 */
+    enabled?: boolean | T[];
+    /** 自定义工具栏内容 */
+    toolbar?: ReactNode;
+    /** 内置按钮的统一颜色（支持预设色和自定义颜色） */
+    color?: ToolbarColor;
+    /** 内置按钮的统一尺寸（支持预设尺寸和自定义数字） */
+    size?: ToolbarSize;
+    /** 是否仅显示图标（不显示文字） */
+    iconOnly?: boolean;
+}
+/**
+ * 编辑模式类型
+ * - `false`: 禁用编辑
+ * - `true`: 启用全部编辑功能
+ * - `T[]`: 启用指定的编辑按钮
+ * - `EditModeObjectConfig<T>`: 对象配置，支持自定义工具栏
+ */
+export type EditModeConfig<T extends string> = boolean | T[] | EditModeObjectConfig<T>;
+/**
+ * 编辑模式解析结果
+ */
+export interface EditModeResult<T extends string> {
+    /** 是否启用编辑模式 */
+    editEnabled: boolean;
+    /** 启用的按钮列表 */
+    enabledButtons: T[];
+    /** 自定义工具栏内容 */
+    customToolbar?: ReactNode;
+    /** 内置按钮的统一颜色 */
+    color?: ToolbarColor;
+    /** 内置按钮的统一尺寸 */
+    size?: ToolbarSize;
+    /** 是否仅显示图标 */
+    iconOnly?: boolean;
+}
+/**
+ * 解析编辑模式配置
+ * @param editModeProp 编辑模式属性值
+ * @param defaultButtons 当 editMode 为 true 时默认启用的按钮
+ * @returns EditModeResult
+ *
+ * @example
+ * ```ts
+ * // PlotLayer
+ * const { editEnabled, enabledButtons } = useEditMode(
+ *   editModeProp,
+ *   ['redraw', 'clip', 'move', 'create', 'delete'] as const
+ * );
+ *
+ * // Marker
+ * const { editEnabled, enabledButtons } = useEditMode(
+ *   editModeProp,
+ *   ['create', 'move', 'delete'] as const
+ * );
+ *
+ * // 使用对象配置
+ * const { editEnabled, enabledButtons, customToolbar } = useEditMode(
+ *   { enabled: ['create', 'move'], toolbar: <Button>自定义</Button> },
+ *   ['create', 'move', 'delete'] as const
+ * );
+ * ```
+ */
+export declare function useEditMode<T extends string>(editModeProp: EditModeConfig<T> | undefined, defaultButtons: readonly T[]): EditModeResult<T>;
+export default useEditMode;

package/dist/hooks/useLatestRef.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 保持 ref 始终指向最新值的 Hook
+ * @description 用于在回调中访问最新值，避免闭包陷阱
+ */
+/**
+ * 返回一个 ref，其 current 始终指向传入的最新值
+ * @param value 需要保持引用的值
+ * @returns React.MutableRefObject<T>
+ *
+ * @example
+ * ```ts
+ * const onClickRef = useLatestRef(onClick);
+ * // 在回调中使用 onClickRef.current
+ * ```
+ */
+export declare function useLatestRef<T>(value: T): import("react").MutableRefObject<T>;
+export default useLatestRef;

package/dist/hooks/usePolylineEditor.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 折线编辑器状态管理 Hook
+ *
+ * 封装 Irrigation / Road 等折线类组件共享的编辑状态机逻辑：
+ * - currentMode / tempPoints 状态管理
+ * - pendingCreate 流程（新建 → 保存 → 抽屉 → 完成/取消）
+ * - handleCancel（清理编辑状态）
+ * - Escape 快捷键取消
+ * - normalizedData 变化时自动重置 pendingCreate 状态
+ * - pm:create / pm:edit 事件监听
+ */
+import L from 'leaflet';
+import type { Coordinate } from '../types';
+export interface UsePolylineEditorOptions {
+    /** Leaflet 地图实例 */
+    map: L.Map;
+    /** 编辑中的图层引用（由组件持有，类型各不相同） */
+    editingLayerRef: React.MutableRefObject<L.Polyline | null>;
+    /** 标准化后的数据源，用于检测 pendingCreate 保存后的数据变化 */
+    normalizedData: unknown[];
+    /** Whether PM event listeners (pm:create, pm:edit, etc.) should be active. Default: true */
+    pmEventsEnabled?: boolean;
+    /** Called when pm:create fires. Use this to convert the drawn layer type (e.g., asIrrigationLayer). */
+    onDrawnLayer?: (drawnLayer: L.Polyline) => void;
+    /** Optional runtime guard for pm:create event. Return false to skip handling. */
+    pmCreateGuard?: () => boolean;
+}
+export interface UsePolylineEditorReturn {
+    /** 当前编辑模式 */
+    currentMode: 'idle' | 'create' | 'edit';
+    /** 设置当前编辑模式 */
+    setCurrentMode: React.Dispatch<React.SetStateAction<'idle' | 'create' | 'edit'>>;
+    /** 临时坐标点（绘制/编辑中的坐标） */
+    tempPoints: Coordinate[];
+    /** 设置临时坐标点 */
+    setTempPoints: React.Dispatch<React.SetStateAction<Coordinate[]>>;
+    /** 新建待提交标记 ref（详见各组件中 pendingCreateRef 注释） */
+    pendingCreateRef: React.MutableRefObject<boolean>;
+    /** 编辑前原始坐标 ref */
+    originalPointsRef: React.MutableRefObject<Coordinate[] | null>;
+    /** currentMode 的最新引用（用于在回调和事件处理中读取最新值） */
+    currentModeRef: React.MutableRefObject<'idle' | 'create' | 'edit'>;
+    /** 取消操作：清理所有编辑状态 */
+    handleCancel: () => void;
+}
+export declare function usePolylineEditor(options: UsePolylineEditorOptions): UsePolylineEditorReturn;
+export interface UsePolylineSaveOptions {
+    map: L.Map;
+    currentMode: 'idle' | 'create' | 'edit';
+    tempPoints: Coordinate[];
+    value: string | number | null;
+    editingLayerRef: React.MutableRefObject<L.Polyline | null>;
+    pendingCreateRef: React.MutableRefObject<boolean>;
+    originalPointsRef: React.MutableRefObject<Coordinate[] | null>;
+    layerByIdRef: React.MutableRefObject<Record<string | number, L.Polyline>>;
+    setCurrentMode: React.Dispatch<React.SetStateAction<'idle' | 'create' | 'edit'>>;
+    setTempPoints: React.Dispatch<React.SetStateAction<Coordinate[]>>;
+    /** Called when create save is triggered with the new points */
+    onCreateSave: (points: Coordinate[]) => void;
+    /** Called when edit save is triggered with id, oldPoints, newPoints */
+    onEditSave: (id: string | number, oldPoints: Coordinate[], newPoints: Coordinate[]) => void;
+}
+export declare function usePolylineSave(options: UsePolylineSaveOptions): {
+    handleSave: () => void;
+};

package/dist/hooks/usePolylineRenderer.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview 线要素渲染 hook（共享逻辑）
+ * @description 提取 Irrigation 和 Road 组件中重复的图层管理逻辑：
+ * - 主渲染 useEffect 的图层创建/销毁/编辑模式过滤
+ * - 组件卸载时清理编辑图层 (editingLayerRef)
+ * @module hooks/usePolylineRenderer
+ */
+import { type MutableRefObject } from 'react';
+import L from 'leaflet';
+interface UsePolylineRendererOptions {
+    map: L.Map | null;
+    normalizedData: any[];
+    value: string | number | null;
+    currentMode: 'idle' | 'create' | 'edit';
+    /** 渲染单条数据到 layerGroup 中 */
+    renderItem: (item: any, layerGroup: L.LayerGroup, index: number) => void;
+    layerGroupRef: MutableRefObject<L.LayerGroup | null>;
+    layerByIdRef: MutableRefObject<Record<string | number, any>>;
+    editingLayerRef: MutableRefObject<any | null>;
+    deps: any[];
+}
+/**
+ * 管理线要素图层的创建与清理
+ *
+ * 负责：
+ * 1. 编辑模式下过滤数据（create/edit 模式不渲染已有要素）
+ * 2. 创建 LayerGroup 并将数据渲染进去
+ * 3. 组件卸载时移除 editingLayerRef
+ *
+ * 注意：editingLayerRef 的日常生命周期（handleRedraw/handleEdit 创建、
+ * handleCancel/handleSave 销毁）由组件自行管理，此 hook 仅在组件卸载时兜底清理。
+ */
+export declare function usePolylineRenderer(options: UsePolylineRendererOptions): void;
+export {};

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 主题 Hook
+ * @description 提供统一的主题访问接口
+ */
+import { type ThemeMode, type ThemeColors } from '../constants/theme';
+/**
+ * 获取当前主题及颜色配置的 Hook
+ * @returns 主题模式和颜色配置
+ */
+export declare const useTheme: () => {
+    theme: ThemeMode;
+    colors: ThemeColors;
+};