web-map/src/services/editor.service.ts

import {
  EDITOR_CONFIG,
  type MapAreaInfo,
  MapAreaType,
  type MapPen,
  type MapPointInfo,
  MapPointType,
  type MapRouteInfo,
  MapRoutePassType,
  MapRouteType,
  type Point,
  type Rect,
} from '@api/map';
import type { RobotGroup, RobotInfo, RobotType } from '@api/robot';
import type {
  GroupSceneDetail,
  SceneData,
  StandardScene,
  StandardSceneArea,
  StandardScenePoint,
  StandardSceneRoute,
} from '@api/scene';
import sTheme from '@core/theme.service';
import { CanvasLayer, LockState, Meta2d, type Meta2dStore, type Pen, s8 } from '@meta2d/core';
import { useObservable } from '@vueuse/rxjs';
import { clone, get, isEmpty, isNil, isString, nth, pick, remove, some } from 'lodash-es';
import { BehaviorSubject, debounceTime, filter, map, Subject, switchMap } from 'rxjs';
import { reactive, watch } from 'vue';

import { AreaOperationService } from './area-operation.service';
import { BinTaskManagerService } from './bintask-manager.service';
import colorConfig from './color/color-config.service';
import {
  drawStorageBackground,
  drawStorageLocation,
  drawStorageMore,
} from './draw/storage-location-drawer';
import { LayerManagerService } from './layer-manager.service';
import { createStorageLocationUpdater,StorageLocationService } from './storage-location.service';
import { AutoStorageGenerator } from './utils/auto-storage-generator';

/**
 * 场景编辑器服务类
 * 继承自Meta2D，提供完整的场景编辑功能
 *
 * 主要功能：
 * - 场景文件的加载、保存和管理
 * - 点位、路线、区域的创建和编辑
 * - 机器人组的管理和实时状态更新
 * - 鼠标事件的处理和响应式数据流
 * - 自定义绘制和渲染逻辑
 */
export class EditorService extends Meta2d {
  /** 图层管理服务实例 */
  private readonly layerManager: LayerManagerService;
  /** 库位服务实例 */
  private readonly storageLocationService: StorageLocationService;

  /** 区域操作服务实例 */
  private readonly areaOperationService!: AreaOperationService;

  /** 自动生成库位工具实例 */
  private readonly autoStorageGenerator!: AutoStorageGenerator;

  //#region 场景文件管理
  /**
   * 加载场景文件到编辑器
   * @param map 场景文件的JSON字符串，为空则创建新场景
   * @param editable 是否可编辑状态，控制编辑器锁定状态
   * @param detail 群组场景详情，包含机器人组和机器人信息
   * @param isImport 是否为导入场景文件，true时进行反向坐标转换
   */
  public async load(
    map?: string,
    editable = false,
    detail?: Partial<GroupSceneDetail>,
    isImport = false,
  ): Promise<void> {
    const scene: StandardScene = map ? JSON.parse(map) : {};
    if (!isEmpty(detail?.group)) {
      scene.robotGroups = [detail.group];
      scene.robots = detail.robots;
    }
    const { robotGroups, robots, points, routes, areas, ...extraFields } = scene;
    // 保存所有额外字段（包括width、height等）
    this.#originalSceneData = extraFields;
    
    // 颜色配置现在使用本地存储，不再从场景数据加载

    this.open();
    this.setState(editable);
    this.#loadRobots(robotGroups, robots);
    await this.#loadScenePoints(points, isImport);
    this.#loadSceneRoutes(routes, isImport);
    await this.#loadSceneAreas(areas, isImport);

    // 确保正确的层级顺序：路线 < 点位 < 机器人
    this.#ensureCorrectLayerOrder();

    // 为所有动作点创建库位pen对象
    this.createAllStorageLocationPens();

    this.store.historyIndex = undefined;
    this.store.histories = [];
    // this.scale(scale);与xd 自定义缩放冲突，暂时去掉
    // if (isEmpty(origin)) {
    //   this.centerView();
    // } else {
    //   this.translate(origin.x / scale, origin.y / scale);
    // }
  }
  /**
   * 保存当前场景为JSON字符串
   * @returns 包含完整场景数据的JSON字符串
   */
  public save(): string {
    const { scale, x, y, origin } = this.data();
    const scene: StandardScene = {
      scale,
      origin: { x: x + origin.x, y: y + origin.y },
      robotGroups: this.robotGroups.value,
      robots: this.robots,
      points: this.points.value.map((v) => this.#mapScenePoint(v)).filter((v) => !isNil(v)),
      routes: this.routes.value.map((v) => this.#mapSceneRoute(v)).filter((v) => !isNil(v)),
      areas: this.areas.value.map((v) => this.#mapSceneArea(v)).filter((v) => !isNil(v)),
      blocks: [],
      colorConfig: colorConfig.getConfigForSave(), // 添加颜色配置到场景数据
      ...this.#originalSceneData, // 统一保留所有额外字段（包括width、height等）
    };

    return JSON.stringify(scene);
  }

  /** BinTask管理服务实例 */
  private readonly binTaskManager: BinTaskManagerService;

  /**
   * 获取BinTask管理服务实例
   * @returns BinTask管理服务实例
   */
  public getBinTaskManager(): BinTaskManagerService {
    return this.binTaskManager;
  }

  /**
   * 检查库位项是否存在
   * @param pointName 动作点名称
   * @param locationName 库位名称
   * @returns 如果库位项存在则返回true，否则返回false
   */
  public checkBinLocationExists(pointName: string, locationName: string): boolean {
    return this.binTaskManager.hasBinTaskConfig(pointName, locationName);
  }

  /**
   * 更新库位任务配置中的库位名称
   * @param pointName 动作点名称
   * @param oldLocationName 旧的库位名称
   * @param newLocationName 新的库位名称
   */
  public updateBinLocationName(pointName: string, oldLocationName: string, newLocationName: string): void {
    this.binTaskManager.updateBinLocationName(pointName, oldLocationName, newLocationName);
  }

  /**
   * 删除库位任务配置中的库位
   * @param pointName 动作点名称
   * @param locationName 要删除的库位名称
   */
  public removeBinLocation(pointName: string, locationName: string): void {
    this.binTaskManager.removeBinLocation(pointName, locationName);
  }

  /**
   * 更新库位的BinTask配置
   * @param pointName 动作点名称
   * @param locationName 库位名称
   * @param binTasks BinTask配置数据
   */
  public updateBinTask(pointName: string, locationName: string, binTasks: any[]): void {
    this.binTaskManager.updateBinTask(pointName, locationName, binTasks);
  }

  /**
   * 获取库位任务配置数据
   * @returns 库位任务配置列表
   */
  public getBinLocationsList(): unknown {
    return (this.#originalSceneData as Record<string, unknown>)?.binLocationsList;
  }

  /**
   * 加载机器人数据到编辑器
   * @param groups 机器人组列表
   * @param robots 机器人信息列表
   */
  #loadRobots(groups?: RobotGroup[], robots?: RobotInfo[]): void {
    this.#robotMap.clear();
    robots?.forEach((v) => this.#robotMap.set(v.id, v));
    this.#robotGroups$$.next(groups ?? []);
  }
  /**
   * 从场景数据加载点位到画布
   * @param points 标准场景点位数据数组
   * @param isImport 是否为导入场景文件，true时进行反向坐标转换
   */
  async #loadScenePoints(points?: StandardScenePoint[], isImport = false): Promise<void> {
    if (!points?.length) return;
    await Promise.all(
      points.map(async (v) => {
        const {
          id,
          name,
          desc,
          x,
          y,
          type,
          extensionType,
          robots,
          actions,
          associatedStorageLocations,
          properties,
          deviceId,
          enabled,
        } = v;
        // 只有在导入场景文件时才进行反向坐标转换
        let finalX = x;
        let finalY = y;
        if (isImport) {
          const transformedCoords = this.#reverseTransformCoordinate(x, y);
          finalX = transformedCoords.x;
          finalY = transformedCoords.y;
        }
        await this.addPoint({ x: finalX, y: finalY }, type, id);
        this.setValue(
          {
            id,
            label: name,
            desc,
            properties,
            point: { type, extensionType, robots, actions, associatedStorageLocations, deviceId, enabled },
          },
          { render: false, history: false, doEvent: false },
        );
      }),
    );
  }
  /**
   * 从场景数据加载路线到画布
   * @param routes 标准场景路线数据数组
   * @param isImport 是否为导入场景文件，true时进行反向坐标转换
   */
  #loadSceneRoutes(routes?: StandardSceneRoute[], isImport = false): void {
    if (!routes?.length) return;
    routes.map((v) => {
      const { id, desc, from, to, type, pass, c1, c2, properties } = v;
      const p1 = this.getPenById(from);
      const p2 = this.getPenById(to);
      if (isNil(p1) || isNil(p2)) return;
      this.addRoute([p1, p2], <MapRouteType>type, id);
      const { x: x1, y: y1 } = this.getPointRect(p1)!;
      const { x: x2, y: y2 } = this.getPointRect(p2)!;

      // 只有在导入场景文件时才对控制点坐标进行反向转换
      let transformedC1 = { x: (c1?.x ?? 0) - x1, y: (c1?.y ?? 0) - y1 };
      let transformedC2 = { x: (c2?.x ?? 0) - x2, y: (c2?.y ?? 0) - y2 };

      if (isImport) {
        if (c1 && c1.x !== undefined && c1.y !== undefined) {
          const reversedC1 = this.#reverseTransformCoordinate(c1.x, c1.y);
          transformedC1 = { x: reversedC1.x - x1, y: reversedC1.y - y1 };
        }

        if (c2 && c2.x !== undefined && c2.y !== undefined) {
          const reversedC2 = this.#reverseTransformCoordinate(c2.x, c2.y);
          transformedC2 = { x: reversedC2.x - x2, y: reversedC2.y - y2 };
        }
      }

      this.setValue(
        {
          id,
          desc,
          properties,
          route: {
            type,
            pass,
            c1: transformedC1,
            c2: transformedC2,
          },
        },
        { render: false, history: false, doEvent: false },
      );
    });
  }
  /**
   * 从场景数据加载区域到画布
   * @param areas 标准场景区域数据数组
   * @param isImport 是否为导入场景文件，true时进行反向坐标转换
   */
  async #loadSceneAreas(areas?: StandardSceneArea[], isImport = false): Promise<void> {
    if (!areas?.length) return;
    await Promise.all(
      areas.map(async (v) => {
        const { id, name, desc, x, y, w, h, type, points, routes, maxAmr, inoutflag, storageLocations, properties } = v;
        // 只有在导入场景文件时才进行反向坐标转换
        let finalX = x;
        let finalY = y;
        let finalW = w;
        let finalH = h;

        if (isImport) {
          const transformedCoords = this.#reverseTransformCoordinate(x, y);
          finalX = transformedCoords.x;
          finalY = transformedCoords.y;
          finalW = this.#reverseTransformSize(w);
          finalH = this.#reverseTransformSize(h);
        }

        await this.addArea({ x: finalX, y: finalY }, { x: finalX + finalW, y: finalY + finalH }, type, id);

        // 对于库区类型，需要将点位名称数组转换为点位ID数组，并更新动作点的库位信息
        let processedPoints = points;
        if (type === MapAreaType.库区 && points?.length) {
          // 将点位名称数组转换为点位ID数组
          const actionPoints = this.find('point').filter(
            (pen: MapPen) => pen.point?.type === MapPointType.动作点 && points.includes(pen.label || pen.id!),
          );

          processedPoints = actionPoints.map((pen) => pen.id!);

          // 如果有storageLocations数据，更新对应动作点的库位信息
          if (storageLocations && Array.isArray(storageLocations)) {
            // 将数组格式转换为对象格式以便查找
            const storageLocationsMap: Record<string, string[]> = {};
            storageLocations.forEach((item) => {
              Object.entries(item).forEach(([pointName, locations]) => {
                storageLocationsMap[pointName] = locations;
              });
            });

            actionPoints.forEach((pen) => {
              const pointName = pen.label || pen.id!;
              if (storageLocationsMap[pointName]) {
                this.setValue(
                  { id: pen.id, point: { ...pen.point, associatedStorageLocations: storageLocationsMap[pointName] } },
                  { render: false, history: false, doEvent: false },
                );
              }
            });
          }
        }

        this.setValue(
          { id, label: name, desc, properties, area: { type, points: processedPoints, routes, maxAmr, inoutflag } },
          { render: false, history: false, doEvent: false },
        );
      }),
    );
  }

  #mapScenePoint(pen?: MapPen): StandardScenePoint | null {
    if (!pen?.id || isEmpty(pen?.point)) return null;

    // 过滤掉临时视图中心点
    if (pen.id.includes('view-center-point')) {
      return null;
    }
    const { id, label, desc, properties } = pen;
    const { type, extensionType, robots, actions, associatedStorageLocations, deviceId, enabled } = pen.point;
    const { x = 0, y = 0 } = this.getPointRect(pen) ?? {};

    // 进行坐标转换：左上角原点 -> 中心点原点，同时应用ratio缩放
    const transformedCoords = this.#transformCoordinate(x, y);

    const point: StandardScenePoint = {
      id: id,
      name: label || id,
      desc,
      x: transformedCoords.x,
      y: transformedCoords.y,
      type,
      extensionType,
      config: {},
      properties,
    };
    if ([MapPointType.充电点, MapPointType.停靠点].includes(type)) {
      point.robots = robots?.filter((v) => this.#robotMap.has(v));
    }
    if (MapPointType.等待点 === type) {
      point.actions = actions?.filter((v) => this.getPenById(v)?.point?.type === MapPointType.动作点);
    }
    if (MapPointType.动作点 === type) {
      point.associatedStorageLocations = associatedStorageLocations;
    }
    if (MapPointType.自动门点 === type) {
      point.deviceId = deviceId;
    }
    if (MapPointType.停靠点 === type) {
      point.enabled = enabled === 0 ? 0 : 1; //默认启用
    }
    return point;
  }
  #mapSceneRoute(pen?: MapPen): StandardSceneRoute | null {
    if (!pen?.id || pen.anchors?.length !== 2 || isEmpty(pen?.route)) return null;
    const { id, anchors, desc, properties } = pen;
    const { type, direction = 1, pass, c1, c2 } = pen.route;
    const [p1, p2] = anchors.map((v) => this.getPenById(v.connectTo!));
    if (isNil(p1) || isNil(p2)) return null;
    const route: StandardSceneRoute = {
      id: id,
      desc,
      from: direction < 0 ? p2.id! : p1.id!,
      to: direction < 0 ? p1.id! : p2.id!,
      type,
      pass,
      config: {},
      properties,
    };
    const { x: x1, y: y1 } = this.getPointRect(p1)!;
    const { x: x2, y: y2 } = this.getPointRect(p2)!;
    const cp1 = { x: x1 + (c1?.x ?? 0), y: y1 + (c1?.y ?? 0) };
    const cp2 = { x: x2 + (c2?.x ?? 0), y: y2 + (c2?.y ?? 0) };

    switch (type) {
      case MapRouteType.二阶贝塞尔曲线:
        // 对控制点进行坐标转换
        route.c1 = this.#transformCoordinate(cp1.x, cp1.y);
        break;
      case MapRouteType.三阶贝塞尔曲线: {
        // 对两个控制点进行坐标转换
        const transformedCp1 = this.#transformCoordinate(cp1.x, cp1.y);
        const transformedCp2 = this.#transformCoordinate(cp2.x, cp2.y);
        route.c1 = direction < 0 ? transformedCp2 : transformedCp1;
        route.c2 = direction < 0 ? transformedCp1 : transformedCp2;
        break;
      }
      default:
        break;
    }
    return route;
  }
  #mapSceneArea(pen: MapPen): StandardSceneArea | null {
    if (!pen.id || isEmpty(pen.area)) return null;
    const { id, label, desc, properties } = pen;
    const { type, points, maxAmr, inoutflag } = pen.area;
    const { x, y, width, height } = this.getPenRect(pen);
    // 进行坐标转换：左上角原点 -> 中心点原点，同时应用ratio缩放
    const transformedCoords = this.#transformCoordinate(x, y);
    const area: StandardSceneArea = {
      id,
      name: label || id,
      desc,
      x: transformedCoords.x,
      y: transformedCoords.y,
      w: this.#transformSize(width),
      h: this.#transformSize(height),
      type,
      config: {},
      properties,
    };
    if (type === MapAreaType.约束区) {
      area.maxAmr = maxAmr;
    }
    if (MapAreaType.库区 === type) {
      // 获取库区内的动作点
      const actionPoints =
        points
          ?.map((id) => this.getPenById(id))
          .filter((pen): pen is MapPen => !!pen && pen.point?.type === MapPointType.动作点) ?? [];

      // 保存动作点名称
      area.points = actionPoints.map((pen) => pen.label || pen.id!);

      // 构建storageLocations数组：[{动作点名称: [库位列表]}]
      area.storageLocations = actionPoints
        .map((pen) => {
          const pointName = pen.label || pen.id!;
          const storageLocations = pen.point?.associatedStorageLocations ?? [];

          return { [pointName]: storageLocations };
        })
        .filter((item): item is Record<string, string[]> => item !== null);

      area.inoutflag = inoutflag;
    }
    if ([MapAreaType.互斥区, MapAreaType.非互斥区, MapAreaType.约束区].includes(type)) {
      area.points = points?.filter((v) => {
        const { point } = this.getPenById(v) ?? {};
        if (isNil(point)) return false;
        if (point.type === MapPointType.禁行点) return false;
        return true;
      });
    }
    // 互斥区不再保存路段信息
    return area;
  }

  /**
   * 确保正确的层级顺序
   * 委托给图层管理服务处理
   */
  #ensureCorrectLayerOrder(): void {
    this.layerManager.ensureCorrectLayerOrder();
  }
  //#endregion

  /**
   * 设置编辑器状态
   * @param editable 是否可编辑，true为可编辑状态，false为只读状态
   */
  public setState(editable?: boolean): void {
    this.lock(editable ? LockState.None : LockState.DisableEdit);
    this.data().pens.forEach((pen: MapPen) => {
      if (pen.name !== 'area') {
        if (pen.locked !== LockState.DisableEdit) {
          this.setValue(
            { id: pen.id, locked: LockState.DisableEdit },
            { render: false, history: false, doEvent: false },
          );
        }
      }
    });
    this.render();
  }

  public override data(): SceneData {
    return super.data();
  }

  /** 鼠标事件流主体，用于内部事件分发 */
  readonly #mouse$$ = new Subject<{ type: 'click' | 'mousedown' | 'mouseup'; value: Point }>();

  /** 鼠标点击事件的响应式流，防抖处理后的点击坐标 */
  public readonly mouseClick = useObservable<Point>(
    this.#mouse$$.pipe(
      filter(({ type }) => type === 'click'),
      debounceTime(100),
      map(({ value }) => value),
    ),
  );

  /** 鼠标拖拽事件的响应式流，返回起始点和结束点坐标，用于创建区域 */
  public readonly mouseBrush = useObservable<[Point, Point]>(
    this.#mouse$$.pipe(
      filter(({ type }) => type === 'mousedown'),
      switchMap(({ value: s }) =>
        this.#mouse$$.pipe(
          filter(({ type }) => type === 'mouseup'),
          map(({ value: e }) => <[Point, Point]>[s, e]),
        ),
      ),
    ),
  );

  //#region 机器人组管理
  /** 机器人信息映射表，响应式存储所有机器人数据 */
  readonly #robotMap = reactive<Map<RobotInfo['id'], RobotInfo>>(new Map());

  /** 获取所有机器人信息数组 */
  public get robots(): RobotInfo[] {
    return Array.from(this.#robotMap.values());
  }

  public checkRobotById(id: RobotInfo['id']): boolean {
    return this.#robotMap.has(id);
  }
  public getRobotById(id: RobotInfo['id']): RobotInfo | undefined {
    return this.#robotMap.get(id);
  }

  public updateRobot(id: RobotInfo['id'], value: Partial<RobotInfo>): void {
    const robot = this.getRobotById(id);
    if (isNil(robot)) return;
    this.#robotMap.set(id, { ...robot, ...value });
    if (value.label) {
      this.setValue({ id, text: value.label }, { render: false, history: false, doEvent: false });
    }
    (<SceneData>this.store.data).robots = [...this.#robotMap.values()];
  }

  public addRobots(gid: RobotInfo['gid'], robots: RobotInfo[]): void {
    const groups = clone(this.#robotGroups$$.value);
    const group = groups.find((v) => v.id === gid);
    if (isNil(group)) throw Error('未找到目标机器人组');
    group.robots ??= [];
    robots.forEach((v) => {
      if (this.#robotMap.has(v.id)) return;
      this.#robotMap.set(v.id, { ...v, gid });
      group.robots?.push(v.id);
    });
    this.#robotGroups$$.next(groups);
    (<SceneData>this.store.data).robots = [...this.#robotMap.values()];
    (<SceneData>this.store.data).robotGroups = this.#robotGroups$$.value;
  }
  public removeRobots(ids: RobotInfo['id'][]): void {
    ids?.forEach((v) => this.#robotMap.delete(v));
    const groups = clone(this.#robotGroups$$.value);
    groups.forEach(({ robots }) => remove(robots ?? [], (v) => !this.#robotMap.has(v)));
    this.#robotGroups$$.next(groups);
    (<SceneData>this.store.data).robots = [...this.#robotMap.values()];
    (<SceneData>this.store.data).robotGroups = this.#robotGroups$$.value;
  }
  public updateRobots(ids: RobotInfo['id'][], value: Partial<RobotInfo>): void {
    ids?.forEach((v) => {
      const robot = this.#robotMap.get(v);
      if (isNil(robot)) return;
      this.#robotMap.set(v, { ...robot, ...value });
    });
    (<SceneData>this.store.data).robots = [...this.#robotMap.values()];
  }

  readonly #robotGroups$$ = new BehaviorSubject<RobotGroup[]>([]);
  public readonly robotGroups = useObservable<RobotGroup[]>(this.#robotGroups$$.pipe(debounceTime(300)));

  public createRobotGroup(): void {
    const id = s8();
    const label = `RG${id}`;
    const groups = clone(this.#robotGroups$$.value);
    groups.push({ id, label });
    this.#robotGroups$$.next(groups);
    (<SceneData>this.store.data).robotGroups = this.#robotGroups$$.value;
  }
  public deleteRobotGroup(id: RobotGroup['id']): void {
    const groups = clone(this.#robotGroups$$.value);
    const group = groups.find((v) => v.id === id);
    group?.robots?.forEach((v) => this.#robotMap.delete(v));
    remove(groups, group);
    this.#robotGroups$$.next(groups);
    (<SceneData>this.store.data).robots = [...this.#robotMap.values()];
    (<SceneData>this.store.data).robotGroups = this.#robotGroups$$.value;
  }
  public updateRobotGroupLabel(id: RobotGroup['id'], label: RobotGroup['label']): void {
    const groups = this.#robotGroups$$.value;
    const group = groups.find((v) => v.id === id);
    if (isNil(group)) throw Error('未找到目标机器人组');
    if (some(groups, ['label', label])) throw Error('机器人组名称已经存在');
    group.label = label;
    this.#robotGroups$$.next([...groups]);
    (<SceneData>this.store.data).robotGroups = this.#robotGroups$$.value;
  }
  //#endregion

  /** 保存从后台传来的所有额外字段（除了已处理的robotGroups、robots、points、routes、areas之外的字段） */
  #originalSceneData?: Partial<StandardScene>;

  /** 坐标转换方法 - 将左上角原点的坐标转换为中心点原点的坐标 */
  #transformCoordinate(x: number, y: number): { x: number; y: number } {
    const { ratio = 1, width = 0, height = 0 } = this.#originalSceneData ?? {};

    // 先根据ratio进行缩放
    const scaledX = x / ratio;
    const scaledY = y / ratio;

    // 再进行坐标系转换：左上角原点 -> 中心点原点
    const centerX = scaledX - width / 2;
    const centerY = height / 2 - scaledY;

    // 应用精度控制：保留3位小数，之后直接舍去
    return {
      x: this.#fixPrecision(centerX),
      y: this.#fixPrecision(centerY),
    };
  }

  /** 尺寸转换方法 - 根据ratio缩放尺寸 */
  #transformSize(size: number): number {
    const { ratio = 1 } = this.#originalSceneData ?? {};
    const scaledSize = size / ratio;

    // 应用精度控制：保留3位小数，之后直接舍去
    return this.#fixPrecision(scaledSize);
  }

  /** 反向坐标转换方法 - 将中心点原点的坐标转换为左上角原点的坐标 */
  #reverseTransformCoordinate(x: number, y: number): { x: number; y: number } {
    const { ratio = 1, width = 0, height = 0 } = this.#originalSceneData ?? {};

    // 先进行坐标系转换：中心点原点 -> 左上角原点
    const topLeftX = x + width / 2;
    const topLeftY = height / 2 - y;

    // 再根据ratio进行缩放
    const scaledX = topLeftX * ratio;
    const scaledY = topLeftY * ratio;

    // 应用精度控制：保留3位小数，之后直接舍去
    return {
      x: this.#fixPrecision(scaledX),
      y: this.#fixPrecision(scaledY),
    };
  }

  /** 反向尺寸转换方法 - 根据ratio还原尺寸 */
  #reverseTransformSize(size: number): number {
    const { ratio = 1 } = this.#originalSceneData ?? {};
    const scaledSize = size * ratio;

    // 应用精度控制：保留3位小数，之后直接舍去
    return this.#fixPrecision(scaledSize);
  }

  /** 精度控制方法 - 固定3位小数，3位之后直接舍去（不四舍五入），不足3位则补齐 */
  #fixPrecision(value: number): number {
    // 先截断到3位小数（不四舍五入）
    const truncated = Math.floor(value * 1000) / 1000;
    // 然后格式化为固定3位小数的字符串，再转回数字
    return parseFloat(truncated.toFixed(3));
  }

  /**
   * 优化的像素对齐算法 - 确保在所有缩放比例下都能精确对齐像素边界
   * 解决小车和光圈在特定缩放比例下不重合的问题
   */
  #calculatePixelAlignedOffset(baseOffset: number): number {
    const scale = this.store.data.scale || 1;
    const devicePixelRatio = window.devicePixelRatio || 1;

    // 计算实际像素偏移量
    const scaledOffset = baseOffset * scale;

    // 多重对齐策略：
    // 1. 设备像素对齐 - 确保在高DPI屏幕上也能对齐
    const deviceAlignedOffset = Math.round(scaledOffset * devicePixelRatio) / devicePixelRatio;

    // 2. 子像素对齐 - 对于常见的缩放比例使用特殊处理
    let finalOffset = deviceAlignedOffset;

    // 针对常见问题缩放比例的特殊处理
    const roundedScale = Math.round(scale * 100) / 100; // 避免浮点数精度问题

    if (roundedScale <= 0.2) {
      // 极小缩放：使用更粗粒度的对齐（0.5像素边界）
      finalOffset = Math.round(scaledOffset * 2) / 2;
    } else if (roundedScale <= 0.5) {
      // 小缩放：使用0.25像素边界对齐
      finalOffset = Math.round(scaledOffset * 4) / 4;
    } else if (roundedScale >= 2) {
      // 大缩放：使用精确的像素边界对齐
      finalOffset = Math.round(scaledOffset);
    } else {
      // 标准缩放：使用设备像素对齐结果，但增加额外的精度控制
      const precisionFactor = 8; // 1/8像素精度
      finalOffset = Math.round(scaledOffset * precisionFactor) / precisionFactor;
    }

    // 3. 转换回逻辑坐标系并应用精度控制
    const logicalOffset = finalOffset / scale;

    // 4. 使用现有的精度控制方法确保数值稳定性
    return this.#fixPrecision(logicalOffset);
  }

  /** 画布变化事件流，用于触发响应式数据更新 */
  readonly #change$$ = new Subject<boolean>();

  /** 区域大小变化防抖处理的事件流 */
  readonly #areaSizeChange$$ = new Subject<MapPen>();

  /** 防抖处理后的区域大小变化事件，延迟500ms执行 */
  readonly #debouncedAreaSizeChange = this.#areaSizeChange$$.pipe(
    debounceTime(500), // 500ms防抖延迟
    map((pen) => pen),
  );

  /** 当前选中的图形对象，响应式更新 */
  public readonly current = useObservable<MapPen>(
    this.#change$$.pipe(
      debounceTime(100),
      map(() => <MapPen>clone(this.store.active?.[0])),
    ),
  );

  /** 当前选中的图形ID列表，响应式更新 */
  public readonly selected = useObservable<string[], string[]>(
    this.#change$$.pipe(
      filter((v) => !v),
      debounceTime(100),
      map(() => this.store.active?.map(({ id }) => id).filter((v) => !isNil(v)) ?? []),
    ),
    { initialValue: new Array<string>() },
  );

  /** 画布上所有图形对象列表，响应式更新 */
  public readonly pens = useObservable<MapPen[]>(
    this.#change$$.pipe(
      filter((v) => v),
      debounceTime(100),
      map(() => this.data().pens),
    ),
  );

  public override find(target: string): MapPen[] {
    return super.find(target);
  }
  public getPenById(id?: string): MapPen | undefined {
    if (!id) return;
    return this.find(id)[0];
  }

  public override active(target: string | Pen[], emit?: boolean): void {
    const pens = isString(target) ? this.find(target) : target;
    super.active(pens, emit);
    this.render();
  }
  public override inactive(): void {
    super.inactive();
    this.render();
  }

  public gotoById(id: string): void {
    const pen = this.getPenById(id);
    if (isNil(pen)) return;
    // 判断机器人是否可见，如果不可见直接返回
    if (pen.visible === false && pen.tags?.includes('robot')) return;
    this.gotoView(pen);
  }

  public deleteById(id?: string): void {
    const pen = this.getPenById(id);
    if (pen?.name !== 'area') return;
    this.delete([pen], true, true);
  }

  public updatePen(id: string, pen: Partial<MapPen>, record = true, render = true): void {
    this.setValue({ ...pen, id }, { render, history: record, doEvent: true });
  }

  /**
   * 更新动作点的边框颜色
   * @param pointId 动作点ID
   * @param color 边框颜色（如 '#ff4d4f' 红色或 '#52c41a' 绿色）
   */
  public updatePointBorderColor(pointId: string, color: string): void {
    const pen = this.getPenById(pointId);
    if (!pen || pen.name !== 'point') return;
    this.updatePen(pointId, { statusStyle: color }, false);
  }

  /**
   * 为动作点创建库位pen对象
   * @param pointId 动作点ID
   * @param storageLocations 库位名称列表
   * @param render 是否立即渲染，默认为true
   */
  public createStorageLocationPens(pointId: string, storageLocations: string[], render = true): void {
    this.storageLocationService?.create(pointId, storageLocations, render);
  }

  /**
   * 删除动作点的所有库位pen对象
   * @param pointId 动作点ID
   */
  public removeStorageLocationPens(pointId: string): void {
    this.storageLocationService?.delete(pointId);
  }

  /**
   * 创建库位
   * @param pointId 动作点ID
   * @param storageLocations 库位名称列表
   */
  public createStorageLocation(pointId: string, storageLocations: string[]): void {
    this.storageLocationService?.create(pointId, storageLocations);
  }

  /**
   * 更新库位状态
   * @param pointId 动作点ID
   * @param updates 更新操作，可以是单个库位或批量更新
   * @param state 单个库位状态（当updates为字符串时使用）
   */
  public updateStorageLocation(
    pointId: string,
    updates: string | Record<string, { occupied?: boolean; locked?: boolean }>,
    state?: { occupied?: boolean; locked?: boolean }
  ): void {
    this.storageLocationService?.update(pointId, updates, state);
  }

  /**
   * 删除库位
   * @param pointId 动作点ID
   */
  public deleteStorageLocation(pointId: string): void {
    this.storageLocationService?.delete(pointId);
  }

  /**
   * 获取库位更新器实例
   * @returns 库位更新器实例
   */
  public getStorageLocationUpdater() {
    if (!this.storageLocationService) {
      throw new Error('StorageLocationService 未初始化');
    }
    return createStorageLocationUpdater(this.storageLocationService);
  }


  /**
   * 为所有动作点创建库位pen对象
   * 用于初始化或刷新所有动作点的库位显示
   * 优化性能：使用批量操作减少DOM操作次数
   */
  public createAllStorageLocationPens(): void {
    if (!this.storageLocationService) return;
    
    // 使用 requestIdleCallback 在浏览器空闲时执行，避免阻塞UI
    if (typeof requestIdleCallback !== 'undefined') {
      requestIdleCallback(() => {
        this.storageLocationService?.createAll();
      }, { timeout: 200 });
    } else {
      // 降级到 requestAnimationFrame
      requestAnimationFrame(() => {
        this.storageLocationService?.createAll();
      });
    }
  }

  /**
   * 自动为动作点生成库位
   * @param areaName 库区名称
   * @param actionPoints 动作点列表
   */
  public autoCreateStorageLocations(areaName: string, actionPoints: MapPen[]): void {
    this.autoStorageGenerator.autoCreateStorageLocations(areaName, actionPoints);
  }

  /**
   * 为指定动作点生成库位
   * @param pointId 动作点ID
   * @param areaName 库区名称
   * @returns 生成的库位名称，如果失败返回null
   */
  public generateStorageForPoint(pointId: string, areaName: string): string | null {
    return this.autoStorageGenerator.generateStorageForPoint(pointId, areaName);
  }

  /**
   * 批量生成库位
   * @param pointIds 动作点ID列表
   * @param areaName 库区名称
   * @returns 生成结果统计
   */
  public batchGenerateStorageForPoints(pointIds: string[], areaName: string): {
    success: number;
    skipped: number;
    failed: number;
    generatedNames: string[];
  } {
    return this.autoStorageGenerator.batchGenerateStorageForPoints(pointIds, areaName);
  }





  /**
   * 根据设备ID更新自动门点状态
   * @param deviceId 设备ID
   * @param deviceStatus 设备状态（0=关门，1=开门）
   * @param isConnected 连接状态（true=已连接，false=未连接）
   * @param active 是否显示光圈
   * @param pointId 可选的点位ID，如果提供则直接使用，避免查找
   */
  public updateAutoDoorByDeviceId(
    deviceId: string,
    deviceStatus: number,
    isConnected: boolean,
    active = true,
    pointId?: string,
  ): void {
    let autoDoorPointId = pointId;

    // 如果没有提供pointId，则通过deviceId查找
    if (!autoDoorPointId) {
      const autoDoorPoint = this.data().pens.find(
        (pen) =>
          pen.name === 'point' &&
          (pen as MapPen).point?.type === MapPointType.自动门点 &&
          (pen as MapPen).point?.deviceId === deviceId,
      ) as MapPen | undefined;

      if (!autoDoorPoint?.id) {
        console.warn(`未找到设备ID为 ${deviceId} 的自动门点`);
        return;
      }

      autoDoorPointId = autoDoorPoint.id;
    }

    // 通过pointId获取点位对象
    const autoDoorPoint = this.getPenById(autoDoorPointId) as MapPen | undefined;

    if (!autoDoorPoint?.point) {
      console.warn(`自动门点 ${autoDoorPointId} 不存在或数据异常`);
      return;
    }

    // 更新自动门点状态
    this.updatePen(
      autoDoorPointId,
      {
        point: {
          ...autoDoorPoint.point,
          deviceStatus,
          isConnected,
          active,
        },
      },
      false,
    );
  }

  public updatePointLockIcon(pointId: string, show: boolean): void {
    const pointPen = this.getPenById(pointId);
    if (!pointPen || pointPen.name !== 'point') return;

    const lockIconId = `lock-icon-${pointId}`;
    const existingIcon = this.getPenById(lockIconId);

    if (show) {
      if (existingIcon) {
        this.setValue({ id: lockIconId, visible: true }, { render: true, history: false, doEvent: false });
      } else {
        const { x = 0, y = 0 } = this.getPenRect(pointPen);
        const iconPen: MapPen = {
          id: lockIconId,
          name: 'circle',
          tags: ['lock-icon'],
          x: x + 48, // 在点右侧显示
          y: y + 60,
          width: 8,
          height: 8,
          background: '#ff4d4f', // 红色背景
          color: '#ff4d4f',
          locked: LockState.Disable,
          visible: true,
        };
        this.addPen(iconPen, false, false, true);
        this.inactive();
      }
    } else {
      if (existingIcon) {
        this.setValue({ id: lockIconId, visible: false }, { render: true, history: false, doEvent: false });
      }
    }
  }

  //#region 实时机器人
  public async initRobots(): Promise<void> {
    await Promise.all(
      this.robots.map(async ({ id, label, type }) => {
        const pen: MapPen = {
          ...this.#mapRobotImage(type, true, label), // 传递机器人名称(label)
          id,
          name: 'robot',
          tags: ['robot'],
          x: 0,
          y: 0,
          width: 120,
          height: 120,
          lineWidth: 1,
          robot: { type },
          visible: false,
          text: label,
          textTop: -18, // 调整标签位置，更靠近机器人本体，减少被覆盖的可能性
          whiteSpace: 'nowrap',
          ellipsis: false,
          locked: LockState.Disable,
        };
        await this.addPen(pen, false, true, true);
      }),
    );
    
    // 机器人初始化完成后，确保层级正确（机器人应在最顶层）
    this.#ensureCorrectLayerOrder();

  }

  // public refreshRobot(id: RobotInfo['id'], info: Partial<RobotRealtimeInfo>): void {
  //   const pen = this.getPenById(id);
  //   const { rotate: or, robot } = pen ?? {};
  //   if (!robot?.type) return;
  //   const { x: ox, y: oy } = this.getPenRect(pen!);
  //   const { x: cx = 37, y: cy = 37, active, angle, path: points, isWaring, isFault } = info;
  //   const x = cx - 60;
  //   const y = cy - 60;
  //   const rotate = angle ?? or;
  //   const path =
  //     points?.map((p) => ({ x: p.x - cx, y: p.y - cy })) ??
  //     robot.path?.map((p) => ({ x: p.x + ox! - x, y: p.y + oy! - y }));
  //   const o = { ...robot, ...omitBy({ active, path, isWaring, isFault }, isNil) };
  //   if (isNil(active)) {
  //     this.setValue(
  //       { id, x, y, rotate, robot: o, visible: true, locked: LockState.None }, 
  //       { render: true, history: false, doEvent: false }
  //     );
  //   } else {
  //     this.setValue(
  //       { 
  //         id, 
  //         ...this.#mapRobotImage(robot.type, active), 
  //         x, y, rotate, robot: o, 
  //         visible: true, 
  //         locked: LockState.None 
  //       },
  //       { render: true, history: false, doEvent: false },
  //     );
  //   }
    


  // }

  /**
   * 更新所有机器人的图片尺寸
   * 当机器人图片尺寸配置发生变化时调用
   */
  public updateAllRobotImageSizes(): void {
    this.robots.forEach(({ id, type, label }) => {
      const pen = this.getPenById(id);
      if (pen && pen.robot) {
        const imageConfig = this.#mapRobotImage(type, pen.robot.active, label); // 传递机器人名称
        this.setValue(
          {
            id,
            iconWidth: imageConfig.iconWidth,
            iconHeight: imageConfig.iconHeight,
            iconTop: imageConfig.iconTop,
          },
          { render: true, history: false, doEvent: false },
        );
      }
    });
  }

  /**
   * 更新单个机器人的图片
   * 当机器人自定义图片配置发生变化时调用
   * @param robotName 机器人名称
   */
  public updateRobotImage(robotName: string): void {
    const robot = this.robots.find(r => r.label === robotName);
    if (!robot) return;

    const pen = this.getPenById(robot.id);
    if (pen && pen.robot) {
      const imageConfig = this.#mapRobotImage(robot.type, pen.robot.active, robotName);
      this.setValue(
        {
          id: robot.id,
          image: imageConfig.image,
          iconWidth: imageConfig.iconWidth,
          iconHeight: imageConfig.iconHeight,
          iconTop: imageConfig.iconTop,
        },
        { render: true, history: false, doEvent: false },
      );
    }
  }


  #mapRobotImage(
    type: RobotType,
    active?: boolean,
    robotName?: string,
  ): Required<Pick<MapPen, 'image' | 'iconWidth' | 'iconHeight' | 'iconTop' | 'canvasLayer'>> {
    const theme = this.data().theme;
    
    // 检查是否启用自定义图片且有机器人名称
    const useCustomImages = colorConfig.getColor('robot.useCustomImages') === 'true';
    
    let image: string;
    if (useCustomImages && robotName) {
      // 尝试获取自定义图片
      const customImage = colorConfig.getRobotCustomImage(robotName, active ? 'active' : 'normal');
      if (customImage) {
        image = customImage;
      } else {
        // 如果没有自定义图片，回退到默认图片
        image = import.meta.env.BASE_URL + (active ? `/robot/${type}-active-${theme}.png` : `/robot/${type}-${theme}.png`);
      }
    } else {
      // 使用默认图片
      image = import.meta.env.BASE_URL + (active ? `/robot/${type}-active-${theme}.png` : `/robot/${type}-${theme}.png`);
    }

    // 使用配置的机器人图片尺寸，如果没有配置则使用默认值
    const iconWidth = colorConfig.getColor('robot.imageWidth') ? Number(colorConfig.getColor('robot.imageWidth')) : 42;
    const iconHeight = colorConfig.getColor('robot.imageHeight') 
      ? Number(colorConfig.getColor('robot.imageHeight')) 
      : 76;

    // 使用优化的像素对齐算法，确保小车和光圈精确重合
    const iconTop = this.#calculatePixelAlignedOffset(-16);

    return { image, iconWidth, iconHeight, iconTop, canvasLayer: CanvasLayer.CanvasImage };
  }
  //#endregion

  //#region 点位
  /** 画布上所有点位对象列表，响应式更新 */
  public readonly points = useObservable<MapPen[], MapPen[]>(
    this.#change$$.pipe(
      filter((v) => v),
      debounceTime(100),
      map(() => this.find('point')),
    ),
    { initialValue: new Array<MapPen>() },
  );

  public getPointRect(pen?: MapPen): Rect | null {
    if (isNil(pen)) return null;
    const { x, y, width, height } = this.getPenRect(pen);
    return { x: x + width / 2, y: y + height / 2, width, height };
  }

  /**
   * 在指定位置添加点位
   * @param p 点位坐标
   * @param type 点位类型，默认为普通点
   * @param id 点位ID，未指定则自动生成
   */
  public async addPoint(p: Point, type = MapPointType.普通点, id?: string): Promise<void> {
    id ||= s8();
    const pointInfo: MapPointInfo = { type };

    // 为停靠点设置默认启用状态
    if (type === MapPointType.停靠点) {
      pointInfo.enabled = 1;
    }

    const pen: MapPen = {
      ...p,
      ...this.#mapPoint(type),
      ...this.#mapPointImage(type),
      id,
      name: 'point',
      tags: ['point'],
      label: `P${id}`,
      point: pointInfo,
      locked: LockState.DisableEdit,
    };
    pen.x! -= pen.width! / 2;
    pen.y! -= pen.height! / 2;
    const addedPen = await this.addPen(pen, false, true, true);

    // 将新创建的点位移到最上层
    this.layerManager.adjustElementLayer(addedPen);

    // 如果是动作点且有库位信息，创建库位pen对象
    if (type === MapPointType.动作点 && pointInfo.associatedStorageLocations?.length) {
      this.createStorageLocationPens(addedPen.id!, pointInfo.associatedStorageLocations);
    }
  }

  public updatePoint(id: string, info: Partial<MapPointInfo>, autoCreateStorage = true): void {
    const { point } = this.getPenById(id) ?? {};
    if (!point?.type) return;
    const o = { ...point, ...info };
    this.setValue({ id, point: o }, { render: true, history: true, doEvent: true });

    // 如果是动作点且库位信息发生变化，重新创建库位pen对象
    if (point.type === MapPointType.动作点 && info.associatedStorageLocations && autoCreateStorage) {
      this.createStorageLocationPens(id, info.associatedStorageLocations);
    }
  }
  public changePointType(id: string, type: MapPointType): void {
    const pen = this.getPenById(id);
    const rect = this.getPointRect(pen);
    if (isNil(rect)) return;
    
    // 如果原点位是动作点，需要先删除相关的库位元素
    if (pen?.point?.type === MapPointType.动作点) {
      this.removeStorageLocationPens(id);
    }
    
    const point = this.#mapPoint(type);
    const pointInfo: MapPointInfo = { type };

    // 为停靠点设置默认启用状态
    if (type === MapPointType.停靠点) {
      pointInfo.enabled = 1;
    }

    this.setValue(
      {
        id,
        x: rect.x - point.width / 2,
        y: rect.y - point.height / 2,
        ...point,
        ...this.#mapPointImage(type),
        point: pointInfo,
      },
      { render: true, history: true, doEvent: true },
    );

    // 如果是大点位类型（需要图片），异步重新加载主题确保图片正确显示
    if (type >= 10) {
      requestAnimationFrame(() => {
        this.reloadTheme();
      });
    }
  }

  #mapPoint(type: MapPointType): Required<Pick<MapPen, 'width' | 'height' | 'lineWidth' | 'iconSize'>> {
    const width = type < 10 ? 24 : 48;
    const height = type < 10 ? 24 : 60;
    const lineWidth = type < 10 ? 2 : 3;
    const iconSize = type < 10 ? 4 : 10;
    return { width, height, lineWidth, iconSize };
  }
  #mapPointImage(type: MapPointType): Required<Pick<MapPen, 'image' | 'canvasLayer'>> {
    const theme = this.data().theme;
    const image = type < 10 ? '' : `${import.meta.env.BASE_URL}/point/${type}-${theme}.png`;
    return { image, canvasLayer: CanvasLayer.CanvasMain };
  }

  //#endregion

  //#region 线路
  /** 画布上所有路线对象列表，响应式更新，包含动态生成的标签 */
  public readonly routes = useObservable<MapPen[], MapPen[]>(
    this.#change$$.pipe(
      filter((v) => v),
      debounceTime(100),
      map(() => this.find('route').map((v) => ({ ...v, label: this.getRouteLabel(v.id) }))),
    ),
    { initialValue: new Array<MapPen>() },
  );

  public getRouteLabel(id?: string, d?: number): string {
    if (!id) return '';
    const pen = this.getPenById(id);
    if (isNil(pen)) return '';
    const [a1, a2] = pen.anchors ?? [];
    if (!a1?.connectTo || !a2?.connectTo) return '';
    const p1 = this.getPenById(a1.connectTo);
    const p2 = this.getPenById(a2.connectTo);
    if (isNil(p1) || isNil(p2)) return '';
    const { direction = 1 } = pen.route ?? {};
    return `${p1.label}${(d ?? direction) > 0 ? '→' : '←'}${p2.label}`;
  }

  /**
   * 在两个点位之间添加路线
   * @param p 两个点位的数组
   * @param type 路线类型，默认为直线
   * @param id 路线ID，未指定则自动生成
   */
  public addRoute(p: [MapPen, MapPen], type = MapRouteType.直线, id?: string): void {
    const [p1, p2] = p;
    if (!p1?.anchors?.length || !p2?.anchors?.length) return;
    const line = this.connectLine(p1, p2, undefined, undefined, false);
    id ||= line.id!;
    this.changePenId(line.id!, id);
    const pen: MapPen = {
      tags: ['route'],
      route: { type },
      lineWidth: 1,
      locked: LockState.DisableEdit,
      canvasLayer: CanvasLayer.CanvasMain,
    };
    this.setValue({ id, ...pen }, { render: false, history: false, doEvent: false });
    this.updateLineType(line, type);

    // 将路线移到底层，确保点位能覆盖在路线之上
    this.bottom([line]);

    this.active(id);
    this.render();
  }

  public updateRoute(id: string, info: Partial<MapRouteInfo>): void {
    const { route } = this.getPenById(id) ?? {};
    if (!route?.type) return;
    const o = { ...route, ...info };
    this.setValue({ id, route: o }, { render: true, history: true, doEvent: true });
  }
  public changeRouteType(id: string, type: MapRouteType): void {
    const pen = this.getPenById(id);
    if (isNil(pen)) return;
    this.updateLineType(pen, type);
    this.setValue({ id, route: { type } }, { render: true, history: true, doEvent: true });
  }

  /**
   * 获取两个点位之间的所有路线
   * @param point1Id 第一个点位ID
   * @param point2Id 第二个点位ID
   * @returns 连接这两个点位的所有路线数组
   */
  public getRoutesBetweenPoints(point1Id: string, point2Id: string): MapPen[] {
    return this.find('route').filter(route => {
      const [a1, a2] = route.anchors ?? [];
      if (!a1?.connectTo || !a2?.connectTo) return false;
      return (a1.connectTo === point1Id && a2.connectTo === point2Id) ||
             (a1.connectTo === point2Id && a2.connectTo === point1Id);
    });
  }

  /**
   * 获取指定路线的反向路线
   * @param routeId 路线ID
   * @returns 反向路线，如果不存在则返回null
   */
  public getReverseRoute(routeId: string): MapPen | null {
    const route = this.getPenById(routeId);
    if (!route) return null;
    
    const [a1, a2] = route.anchors ?? [];
    if (!a1?.connectTo || !a2?.connectTo) return null;
    
    const reverseRoutes = this.getRoutesBetweenPoints(a1.connectTo, a2.connectTo);
    return reverseRoutes.find(r => r.id !== routeId) || null;
  }

  /**
   * 创建双向路线
   * @param p 两个点位的数组
   * @param type 路线类型，默认为直线
   * @param forwardId 正向路线ID，未指定则自动生成
   * @param reverseId 反向路线ID，未指定则自动生成
   */
  public addBidirectionalRoute(
    p: [MapPen, MapPen], 
    type = MapRouteType.直线, 
    forwardId?: string, 
    reverseId?: string
  ): void {
    const [p1, p2] = p;
    if (!p1?.anchors?.length || !p2?.anchors?.length) return;

    // 创建正向路线
    const forwardLine = this.connectLine(p1, p2, undefined, undefined, false);
    forwardId ||= forwardLine.id!;
    this.changePenId(forwardLine.id!, forwardId);
    const forwardPen: MapPen = {
      tags: ['route'],
      route: { type, direction: 1 },
      lineWidth: 1,
      locked: LockState.DisableEdit,
      canvasLayer: CanvasLayer.CanvasMain,
    };
    this.setValue({ id: forwardId, ...forwardPen }, { render: false, history: false, doEvent: false });
    this.updateLineType(forwardLine, type);

    // 创建反向路线
    const reverseLine = this.connectLine(p2, p1, undefined, undefined, false);
    reverseId ||= reverseLine.id!;
    this.changePenId(reverseLine.id!, reverseId);
    const reversePen: MapPen = {
      tags: ['route'],
      route: { type, direction: -1 },
      lineWidth: 1,
      locked: LockState.DisableEdit,
      canvasLayer: CanvasLayer.CanvasMain,
    };
    this.setValue({ id: reverseId, ...reversePen }, { render: false, history: false, doEvent: false });
    this.updateLineType(reverseLine, type);

    // 将路线移到底层，确保点位能覆盖在路线之上
    this.bottom([forwardLine, reverseLine]);
    
    // 将反向路线移到正向路线之上，解决重叠选择问题
    this.top([reverseLine]);

    this.active(forwardId);
    this.render();
  }

  /**
   * 删除双向路线
   * @param routeId 任意一条路线的ID
   */
  public removeBidirectionalRoute(routeId: string): void {
    const route = this.getPenById(routeId);
    if (!route) return;

    const [a1, a2] = route.anchors ?? [];
    if (!a1?.connectTo || !a2?.connectTo) return;

    // 找到所有连接这两个点位的路线
    const routesBetweenPoints = this.getRoutesBetweenPoints(a1.connectTo, a2.connectTo);
    
    // 删除所有相关路线
    routesBetweenPoints.forEach(r => {
      this.delete([r]);
    });

    this.render();
  }

  /**
   * 检查两个点位之间是否存在双向路线
   * @param point1Id 第一个点位ID
   * @param point2Id 第二个点位ID
   * @returns 是否存在双向路线
   */
  public hasBidirectionalRoute(point1Id: string, point2Id: string): boolean {
    const routes = this.getRoutesBetweenPoints(point1Id, point2Id);
    return routes.length >= 2;
  }

  //#endregion

  //#region 区域
  /** 画布上所有区域对象列表，响应式更新 */
  public readonly areas = useObservable<MapPen[], MapPen[]>(
    this.#change$$.pipe(
      filter((v) => v),
      debounceTime(100),
      map(() => this.find('area')),
    ),
    { initialValue: new Array<MapPen>() },
  );

  public getBoundAreas(id: string = '', name: 'point' | 'line', type: MapAreaType): MapPen[] {
    if (!id) return [];
    return this.find(`area-${type}`).filter(({ area }) => {
      if (name === 'point') return area?.points?.includes(id);
      if (name === 'line') return area?.routes?.includes(id);
      return false;
    });
  }

  /**
   * 在指定区域添加功能区域
   * @param p1 区域起始坐标
   * @param p2 区域结束坐标
   * @param type 区域类型，默认为库区
   * @param id 区域ID，未指定则自动生成
   */
  public async addArea(p1: Point, p2: Point, type = MapAreaType.库区, id?: string) {
    const w = Math.abs(p1.x - p2.x);
    const h = Math.abs(p1.y - p2.y);
    if (w < 50 || h < 60) return;
    const points = new Array<string>();
    const routes = new Array<string>();
    if (!id) {
      id = s8();
      const selected = <MapPen[]>this.store.active;
      switch (type) {
        case MapAreaType.库区:
          selected?.filter(({ point }) => point?.type === MapPointType.动作点).forEach(({ id }) => points.push(id!));
          break;
        case MapAreaType.互斥区:
          selected?.filter(({ point }) => point?.type).forEach(({ id }) => points.push(id!));
          // 互斥区不再绑定路段
          break;
        case MapAreaType.非互斥区:
          selected?.filter(({ point }) => point?.type).forEach(({ id }) => points.push(id!));
          break;
        case MapAreaType.约束区:
          selected?.filter(({ point }) => point?.type).forEach(({ id }) => points.push(id!));
          break;
        case MapAreaType.描述区:
          // 描述区不需要绑定点位或路线
          break;

        default:
          break;
      }
    }
    const areaInfo: MapAreaInfo = { type, points, routes };
    if (type === MapAreaType.库区) {
      areaInfo.inoutflag = 2;
    }
    const pen: MapPen = {
      id,
      name: 'area',
      tags: ['area', `area-${type}`],
      label: `A${id}`,
      x: Math.min(p1.x, p2.x),
      y: Math.min(p1.y, p2.y),
      width: w,
      height: h,
      lineWidth: 1,
      area: areaInfo,
      locked: LockState.None,
    };
    const area = await this.addPen(pen, true, true, true);
    this.bottom(area);

    // 如果是库区且包含动作点，触发自动生成库位的确认对话框
    if (type === MapAreaType.库区 && points.length > 0) {
      this.autoStorageGenerator.triggerAutoCreateStorageDialog(pen, points);
    }
  }

  public updateArea(id: string, info: Partial<MapAreaInfo>): void {
    const { area } = this.getPenById(id) ?? {};
    if (!area?.type) return;
    const o = { ...area, ...info };
    this.setValue({ id, area: o }, { render: true, history: true, doEvent: true });
  }
  //#endregion

  /**
   * 构造函数 - 初始化场景编辑器
   * @param container 编辑器容器DOM元素
   */
  constructor(container: HTMLDivElement) {
    super(container, EDITOR_CONFIG);

    // 初始化图层管理服务
    this.layerManager = new LayerManagerService(this);

    // 初始化区域操作服务
    this.areaOperationService = new AreaOperationService();

    // 初始化库位服务
    this.storageLocationService = new StorageLocationService(this, '');

    // 初始化自动生成库位工具
    this.autoStorageGenerator = new AutoStorageGenerator(this);

    // 初始化BinTask管理服务
    this.binTaskManager = new BinTaskManagerService(this);

    // 设置颜色配置服务的编辑器实例
    colorConfig.setEditorService(this);

    // 禁用第6个子元素的拖放功能
    (<HTMLDivElement>container.children.item(5)).ondrop = null;
    // 监听所有画布事件
    this.on('*', (e, v) => this.#listen(e, v));
    
    // 添加额外的右键事件监听器，确保阻止默认行为
    const canvasElement = this.canvas as unknown as HTMLCanvasElement;
    if (canvasElement && canvasElement.addEventListener) {
      canvasElement.addEventListener('contextmenu', (event) => {
        event.preventDefault();
        event.stopPropagation();
      }, true);
    }
    
    // 注册自定义绘制函数和锚点
    this.#register();

    // 监听主题变化并重新加载样式
    watch(
      () => sTheme.theme,
      (v) => this.#load(v),
      { immediate: true },
    );

    // 订阅防抖处理后的区域大小变化事件
    this.#debouncedAreaSizeChange.subscribe((pen: MapPen) => {
      this.areaOperationService.handleAreaSizeChange(
        pen,
        (type) => this.find(type),
        (id, info) => this.updateArea(id, info),
      );
    });
  }

  #load(theme: string): void {
    this.setTheme(theme);

    this.setOptions({ color: get(sTheme.editor, 'color') });
    this.find('point').forEach((pen) => {
      if (!pen.point?.type) return;
      if (pen.point.type < 10) return;
      this.canvas.updateValue(pen, this.#mapPointImage(pen.point.type));
    });
    this.find('robot').forEach((pen) => {
      if (!pen.robot?.type) return;
      // 从pen的text属性获取机器人名称
      const robotName = pen.text || '';
      this.canvas.updateValue(pen, this.#mapRobotImage(pen.robot.type, pen.robot.active, robotName));
    });
    this.render();
  }

  /**
   * 重新加载主题和图片配置
   * 用于批量编辑后确保大点位图片正确显示
   * 异步执行，避免阻塞UI
   */
  public reloadTheme(): void {
    const currentTheme = this.data().theme || 'light';
    // 使用 requestAnimationFrame 确保在下一个渲染帧执行，避免阻塞UI
    requestAnimationFrame(() => {
      this.#load(currentTheme);
    });
  }

  #onDelete(pens?: MapPen[]): void {
    pens?.forEach((pen) => {
      switch (pen.name) {
        case 'point':
          this.delete(this.getLines(pen), true, false);
          break;
        default:
          break;
      }
    });
  }

   
  #listen(e: unknown, v: any) {
    switch (e) {
      case 'opened':
        this.#load(sTheme.theme);
        this.#change$$.next(true);
        break;

      case 'add':
        this.#change$$.next(true);
        break;
      case 'delete':
        this.#onDelete(v);
        this.#change$$.next(true);
        break;
      case 'update':
        this.#change$$.next(true);
        break;
      case 'valueUpdate':
        this.#change$$.next(true);
        // 检查是否是区域属性更新
        if (v && v.area?.type && ['area'].includes(v.tags?.[0] || '')) {
          // 发送到防抖流，避免频繁触发
          this.#areaSizeChange$$.next(v);
        }
        break;

      case 'active':
      case 'inactive':
        this.#change$$.next(false);
        break;

      case 'click':
      case 'mousedown':
      case 'mouseup':
        this.#mouse$$.next({ type: e, value: pick(this.getPenRect(v), 'x', 'y') });
        break;
      case 'contextmenu':
        // 右键菜单事件由 Meta2D 自动处理，不需要额外处理
        // 事件会直接传递给外部监听器
        console.log('EditorService 捕获到右键菜单事件:', v);
        // 触发自定义的右键菜单事件，传递画布数据
        this.emit('customContextMenu', v);
        break;
      // 监听区域调整大小事件
      case 'resizePens': {
        // resizePens 事件的目标可能是 undefined，需要从 store.active 获取
        const activePens = this.store.active;
        if (activePens && activePens.length > 0) {
          activePens.forEach((pen: MapPen) => {
            if (pen.area?.type && ['area'].includes(pen.tags?.[0] || '')) {
              // 发送到防抖流，避免频繁触发
              this.#areaSizeChange$$.next(pen);
            }
          });
        }
        break;
      }

      // 监听区域线条更新事件，这通常是区域位置变化时触发的
      case 'updateLines':
        if (v && v.area?.type && ['area'].includes(v.tags?.[0] || '')) {
          // 发送到防抖流，避免频繁触发
          this.#areaSizeChange$$.next(v);
        }
        break;

      default:
        break;
    }
  }

  /**
   * 手动检查并更新指定区域的点位绑定
   * 当用户调整区域大小后，可以调用此方法手动触发检查
   * @param areaId 区域ID
   */
  public checkAndUpdateAreaPoints(areaId: string): void {
    this.areaOperationService.checkAndUpdateAreaPoints(
      areaId,
      (id) => this.getPenById(id),
      (type) => this.find(type),
      (id, info) => this.updateArea(id, info),
    );
  }

  /**
   * 检查并更新所有互斥区和非互斥区的点位绑定
   * 用于批量检查和更新
   */
  public checkAndUpdateAllAreas(): void {
    this.areaOperationService.checkAndUpdateAllAreas(
      (type) => this.find(type),
      (type) => this.find(type),
      (id, info) => this.updateArea(id, info),
    );
  }

  /**
   * 批量更新点位类型
   * @param pointIds 点位ID数组
   * @param pointType 新的点位类型
   */
  public batchUpdatePointType(pointIds: string[], pointType: MapPointType): void {
    pointIds.forEach(id => {
      const pen = this.getPenById(id);
      if (pen?.name === 'point') {
        this.updatePen(id, {
          point: {
            ...pen.point,
            type: pointType
          }
        });
      }
    });
  }

  /**
   * 批量更新路线类型
   * @param routeIds 路线ID数组
   * @param routeType 新的路线类型
   */
  public batchUpdateRouteType(routeIds: string[], routeType: MapRouteType): void {
    routeIds.forEach(id => {
      const pen = this.getPenById(id);
      if (pen?.name === 'line' && pen.route) {
        this.updatePen(id, {
          route: {
            ...pen.route,
            type: routeType
          }
        });
      }
    });
  }

  /**
   * 批量更新路线通行类型
   * @param routeIds 路线ID数组
   * @param passType 新的通行类型
   */
  public batchUpdateRoutePassType(routeIds: string[], passType: MapRoutePassType): void {
    routeIds.forEach(id => {
      const pen = this.getPenById(id);
      if (pen?.name === 'line' && pen.route) {
        this.updatePen(id, {
          route: {
            ...pen.route,
            pass: passType
          }
        });
      }
    });
  }

  /**
   * 批量更新路线方向
   * @param routeIds 路线ID数组
   * @param direction 新的方向
   */
  public batchUpdateRouteDirection(routeIds: string[], direction: 1 | -1): void {
    routeIds.forEach(id => {
      const pen = this.getPenById(id);
      if (pen?.name === 'line' && pen.route) {
        this.updatePen(id, {
          route: {
            ...pen.route,
            direction
          }
        });
      }
    });
  }

  /**
   * 批量更新多个属性
   * @param updates 更新配置数组
   */
  public batchUpdate(updates: Array<{ id: string; updates: Partial<MapPen> }>): void {
    // 批量更新所有点位，避免多次渲染
    updates.forEach(({ id, updates }) => {
      this.updatePen(id, updates, true, false); // 记录历史但不立即渲染
    });
    // 统一渲染一次
    this.render();
  }

  #register() {
    this.register({ line: () => new Path2D() });
    this.registerCanvasDraw({ 
      point: drawPoint, 
      line: drawLine, 
      area: drawArea, 
      robot: drawRobot,
      'storage-location': drawStorageLocation,
      'storage-more': drawStorageMore,
      'storage-background': drawStorageBackground
    });
    this.registerAnchors({ point: anchorPoint });
    this.addDrawLineFn('bezier2', lineBezier2);
    this.addDrawLineFn('bezier3', lineBezier3);
  }
}

//#region 自定义绘制函数
/**
 * 绘制点位的自定义函数
 * @param ctx Canvas 2D绘制上下文
 * @param pen 点位图形对象
 */
function drawPoint(ctx: CanvasRenderingContext2D, pen: MapPen): void {
  const theme = sTheme.editor;
  const { active, iconSize: r = 0, fontSize = 14, lineHeight = 1.5, fontFamily } = pen.calculative ?? {};
  const { x = 0, y = 0, width: w = 0, height: h = 0 } = pen.calculative?.worldRect ?? {};
  const { type, isConnected, deviceStatus, active: pointActive } = pen.point ?? {};
  const { label = '', statusStyle } = pen ?? {};

  ctx.save();

  // 自动门点：根据连接与开关状态绘制矩形光圈（无边框）
  if (type === MapPointType.自动门点 && pointActive) {
    // 让光圈随点位尺寸等比缩放，避免缩放画布时视觉上变大
    const base = Math.min(w, h);
    const padding = Math.max(2, Math.min(10, base * 0.2));
    const rx = x - padding;
    const ry = y - padding;
    const rw = w + padding * 2;
    const rh = h + padding * 2;

    // 使用与点位相同的圆角半径，使观感统一
    ctx.beginPath();
    ctx.roundRect(rx, ry, rw, rh, r);

    if (isConnected === false) {
      // 未连接：深红色实心，不描边
      ctx.fillStyle = colorConfig.getColor('autoDoor.strokeClosed') || '#fe5a5ae0';
    } else {
      // 已连接：根据门状态显示颜色（0=关门-浅红，1=开门-蓝色）
      if (deviceStatus === 0) {
        ctx.fillStyle = colorConfig.getColor('autoDoor.fillClosed') || '#cddc39';
      } else {
        ctx.fillStyle = colorConfig.getColor('autoDoor.fillOpen') || '#1890FF';
      }
    }
    ctx.fill();
    // 重置路径，避免后续对点位边框的 stroke 影响到光圈路径
    ctx.beginPath();
  }

  switch (type) {
    case MapPointType.普通点:
    case MapPointType.等待点:
    case MapPointType.避让点:
    case MapPointType.临时避让点:
    case MapPointType.库区点: {
      ctx.beginPath();
      ctx.moveTo(x + w / 2 - r, y + r);
      ctx.arcTo(x + w / 2, y, x + w - r, y + h / 2 - r, r);
      ctx.arcTo(x + w, y + h / 2, x + w / 2 + r, y + h - r, r);
      ctx.arcTo(x + w / 2, y + h, x + r, y + h / 2 + r, r);
      ctx.arcTo(x, y + h / 2, x + r, y + h / 2 - r, r);
      ctx.closePath();
      // 优先使用小点位专用颜色，如果没有则使用类型专用颜色
      const smallGeneralColor = colorConfig.getColor(`point.small.fill.${type}`);
      const smallTypeColor = colorConfig.getColor(`point.types.${type}.fill`);
      const smallThemeColor = get(theme, `point-s.fill-${type}`);
      const finalColor = smallGeneralColor || smallTypeColor || smallThemeColor || '';
      
      
      ctx.fillStyle = finalColor;
      ctx.fill();
      
      const smallTypeStrokeColor = colorConfig.getColor(`point.types.${type}.stroke`);
      const smallGeneralStrokeColor = colorConfig.getColor(active ? 'point.small.strokeActive' : 'point.small.stroke');
      const smallThemeStrokeColor = get(theme, active ? 'point-s.strokeActive' : 'point-s.stroke');
      ctx.strokeStyle = smallTypeStrokeColor || smallGeneralStrokeColor || smallThemeStrokeColor || '';
      if (type === MapPointType.临时避让点) {
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(x + 0.66 * r, y + h / 2 - 0.66 * r);
        ctx.lineTo(x + r, y + h / 2 - r);
        ctx.moveTo(x + w / 2 - 0.66 * r, y + 0.66 * r);
        ctx.lineTo(x + w / 2 - r, y + r);
        ctx.moveTo(x + w / 2 + 0.66 * r, y + 0.66 * r);
        ctx.lineTo(x + w / 2 + r, y + r);
        ctx.moveTo(x + w - 0.66 * r, y + h / 2 - 0.66 * r);
        ctx.lineTo(x + w - r, y + h / 2 - r);
        ctx.moveTo(x + w - 0.66 * r, y + h / 2 + 0.66 * r);
        ctx.lineTo(x + w - r, y + h / 2 + r);
        ctx.moveTo(x + w / 2 + 0.66 * r, y + h - 0.66 * r);
        ctx.lineTo(x + w / 2 + r, y + h - r);
        ctx.moveTo(x + w / 2 - 0.66 * r, y + h - 0.66 * r);
        ctx.lineTo(x + w / 2 - r, y + h - r);
        ctx.moveTo(x + 0.66 * r, y + h / 2 + 0.66 * r);
        ctx.lineTo(x + r, y + h / 2 + r);
      }
      ctx.stroke();
      break;
    }
    case MapPointType.电梯点:
    case MapPointType.自动门点:
    case MapPointType.充电点:
    case MapPointType.停靠点:
    case MapPointType.动作点:
    case MapPointType.禁行点: {
      ctx.roundRect(x, y, w, h, r);
      
      // 优先使用类型专用颜色，如果没有则使用通用颜色
      const largeTypeStrokeColor = colorConfig.getColor(`point.types.${type}.stroke`);
      const largeGeneralStrokeColor = colorConfig.getColor(active ? 'point.large.strokeActive' : 'point.large.stroke');
      const largeThemeStrokeColor = get(theme, active ? 'point-l.strokeActive' : 'point-l.stroke');
      ctx.strokeStyle = statusStyle ?? (largeTypeStrokeColor || largeGeneralStrokeColor || largeThemeStrokeColor || '');
      ctx.stroke();
      break;
    }
    default:
      break;
  }
  ctx.fillStyle = colorConfig.getColor('common.color') || (get(theme, 'color') ?? '');
  ctx.font = `${fontSize}px/${lineHeight} ${fontFamily}`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText(label, x + w / 2, y - fontSize * lineHeight);

  // 库位2x3栅格：动作点在画布上直接绘制（静态数据）
  // 注意：库位现在通过动态pen对象渲染，不再使用静态绘制
  // if (type === MapPointType.动作点) {
  //   drawStorageGrid(ctx, pen, {
  //     fontFamily,
  //     stateResolver: (penId: string, layerName: string) => {
  //       const inner = storageStateMap.get(penId);
  //       if (!inner) {
  //         return {};
  //       }
  //       const state = inner.get(layerName);

  //       return state ?? {};
  //     },
  //   });
  // }
  ctx.restore();
}
/**
 * 设置点位的连接锚点
 * @param pen 点位图形对象
 */
function anchorPoint(pen: MapPen): void {
  pen.anchors = [
    { penId: pen.id, id: '0', x: 0.5, y: 0.5 },
    // { penId: pen.id, id: 't', x: 0.5, y: 0 },
    // { penId: pen.id, id: 'b', x: 0.5, y: 1 },
    // { penId: pen.id, id: 'l', x: 0, y: 0.5 },
    // { penId: pen.id, id: 'r', x: 1, y: 0.5 },
  ];
}

/**
 * 绘制路线的自定义函数
 * @param ctx Canvas 2D绘制上下文
 * @param pen 路线图形对象
 */
function drawLine(ctx: CanvasRenderingContext2D, pen: MapPen): void {
  const theme = sTheme.editor;
  const { active, lineWidth: s = 1 } = pen.calculative ?? {};
  const [p1, p2] = pen.calculative?.worldAnchors ?? [];
  const { x: x1 = 0, y: y1 = 0 } = p1 ?? {};
  const { x: x2 = 0, y: y2 = 0 } = p2 ?? {};
  const { type, direction = 1, pass = 0, c1, c2 } = pen.route ?? {};
  const { x: dx1 = 0, y: dy1 = 0 } = c1 ?? {};
  const { x: dx2 = 0, y: dy2 = 0 } = c2 ?? {};
  const [c1x, c1y] = [x1 + dx1 * s, y1 + dy1 * s];
  const [c2x, c2y] = [x2 + dx2 * s, y2 + dy2 * s];

  ctx.save();
  ctx.beginPath();
  // 根据路线通行类型获取颜色
  let routeColor = '';
  if (active) {
    routeColor = colorConfig.getColor('route.strokeActive') || get(theme, 'route.strokeActive') || '';
  } else {
    // 根据通行类型选择颜色
    switch (pass) {
      case MapRoutePassType.无:
        routeColor = colorConfig.getColor('route.strokeNone') || get(theme, 'route.stroke-0') || '';
        break;
      case MapRoutePassType.仅空载可通行:
        routeColor = colorConfig.getColor('route.strokeEmpty') || get(theme, 'route.stroke-empty') || '';
        break;
      case MapRoutePassType.仅载货可通行:
        routeColor = colorConfig.getColor('route.strokeLoaded') || get(theme, 'route.stroke-loaded') || '';
        break;
      case MapRoutePassType.禁行:
        routeColor = colorConfig.getColor('route.strokeForbidden') || get(theme, 'route.stroke-forbidden') || '';
        break;
      default:
        // 无限制路线使用无路线颜色作为默认
        routeColor = colorConfig.getColor('route.strokeNone') || get(theme, 'route.stroke-0') || '';
        break;
    }
  }
  ctx.strokeStyle = routeColor;
  // 使用配置的路线宽度
  const routeWidth = colorConfig.getRouteWidth(active);
  ctx.lineWidth = routeWidth * s;
  ctx.moveTo(x1, y1);
  switch (type) {
    case MapRouteType.直线:
      ctx.lineTo(x2, y2);
      break;
    case MapRouteType.二阶贝塞尔曲线:
      ctx.quadraticCurveTo(c1x, c1y, x2, y2);
      p1.next = { x: x1 + (2 / 3) * dx1 * s, y: y1 + (2 / 3) * dy1 * s };
      p2.prev = { x: x2 / 3 + (2 / 3) * c1x, y: y2 / 3 + (2 / 3) * c1y };
      break;
    case MapRouteType.三阶贝塞尔曲线:
      ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x2, y2);
      p1.next = { x: c1x, y: c1y };
      p2.prev = { x: c2x, y: c2y };
      break;
    default:
      break;
  }
  if (pass === MapRoutePassType.禁行) {
    ctx.setLineDash([s * 5]);
  }
  ctx.stroke();
  ctx.beginPath();
  ctx.setLineDash([0]);

  const { dx, dy, r } = (() => {
    switch (type) {
      case MapRouteType.直线: {
        const t = direction < 0 ? 0.55 : 0.45;
        const dx = x1 + (x2 - x1) * t;
        const dy = y1 + (y2 - y1) * t;
        const r = Math.atan2(y2 - y1, x2 - x1) + (direction > 0 ? Math.PI : 0);
        return { dx, dy, r };
      }
      case MapRouteType.二阶贝塞尔曲线: {
        const { x: dx, y: dy, t } = getBezier2Center(p1, { x: c1x, y: c1y }, p2);
        const r = getBezier2Tange(p1, { x: c1x, y: c1y }, p2, t) + (direction > 0 ? Math.PI : 0);
        return { dx, dy, r };
      }
      case MapRouteType.三阶贝塞尔曲线: {
        const { x: dx, y: dy, t } = getBezier3Center(p1, { x: c1x, y: c1y }, { x: c2x, y: c2y }, p2);
        const r = getBezier3Tange(p1, { x: c1x, y: c1y }, { x: c2x, y: c2y }, p2, t) + (direction > 0 ? Math.PI : 0);
        return { dx, dy, r };
      }
      default:
        return { dx: 0, dy: 0, r: 0 };
    }
  })();
  ctx.translate(dx, dy);
  ctx.moveTo(Math.cos(r + Math.PI / 5) * s * 10, Math.sin(r + Math.PI / 5) * s * 10);
  ctx.lineTo(0, 0);
  ctx.lineTo(Math.cos(r - Math.PI / 5) * s * 10, Math.sin(r - Math.PI / 5) * s * 10);
  ctx.stroke();
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.restore();
}
function lineBezier2(_: Meta2dStore, pen: MapPen): void {
  if (pen.calculative?.worldAnchors?.length !== 2) return;
  const { c1 } = pen.route ?? {};
  const { lineWidth: s = 1 } = pen.calculative ?? {};
  const [p1, p2] = pen.calculative?.worldAnchors ?? [];
  const { x: x1 = 0, y: y1 = 0 } = p1 ?? {};
  const { x: x2 = 0, y: y2 = 0 } = p2 ?? {};
  const { x: dx = 0, y: dy = 0 } = c1 ?? {};
  pen.calculative.worldAnchors[0].next = { x: x1 + (2 / 3) * dx * s, y: y1 + (2 / 3) * dy * s };
  pen.calculative.worldAnchors[1].prev = { x: x2 / 3 + (2 / 3) * (x1 + dx * s), y: y2 / 3 + (2 / 3) * (y1 + dy * s) };
}
function lineBezier3(_: Meta2dStore, pen: MapPen): void {
  if (pen.calculative?.worldAnchors?.length !== 2) return;
  const { c1, c2 } = pen.route ?? {};
  const { lineWidth: s = 1 } = pen.calculative ?? {};
  const [p1, p2] = pen.calculative?.worldAnchors ?? [];
  const { x: x1 = 0, y: y1 = 0 } = p1 ?? {};
  const { x: x2 = 0, y: y2 = 0 } = p2 ?? {};
  const { x: dx1 = 0, y: dy1 = 0 } = c1 ?? {};
  const { x: dx2 = 0, y: dy2 = 0 } = c2 ?? {};
  pen.calculative.worldAnchors[0].next = { x: x1 + dx1 * s, y: y1 + dy1 * s };
  pen.calculative.worldAnchors[1].prev = { x: x2 + dx2 * s, y: y2 + dy2 * s };
}

/**
 * 绘制区域的自定义函数
 * @param ctx Canvas 2D绘制上下文
 * @param pen 区域图形对象
 */
function drawArea(ctx: CanvasRenderingContext2D, pen: MapPen): void {
  const theme = sTheme.editor;
  const { active, fontSize = 14, lineHeight = 1.5, fontFamily } = pen.calculative ?? {};
  const { x = 0, y = 0, width: w = 0, height: h = 0 } = pen.calculative?.worldRect ?? {};
  const { type } = pen.area ?? {};
  const { label = '', desc = '' } = pen ?? {};

  ctx.save();
  ctx.rect(x, y, w, h);
  
  // 优先使用通用颜色，如果没有则使用类型专用颜色
  const generalFillColor = colorConfig.getColor(`area.fill.${type}`);
  const typeFillColor = colorConfig.getColor(`area.types.${type}.fill`);
  const themeFillColor = get(theme, `area.fill-${type}`);
  const finalFillColor = generalFillColor || typeFillColor || themeFillColor || '';
  
  
  ctx.fillStyle = finalFillColor;
  ctx.fill();
  
  // 获取边框颜色 - 优先使用新的边框颜色配置
  const borderColor = type ? colorConfig.getAreaBorderColor(type) : '';
  const generalStrokeColor = colorConfig.getColor(active ? 'area.strokeActive' : `area.stroke.${type}`);
  const typeStrokeColor = colorConfig.getColor(`area.types.${type}.stroke`);
  const themeStrokeColor = get(theme, active ? 'area.strokeActive' : `area.stroke-${type}`);
  
  // 获取边框宽度和透明度
  const borderWidth = type ? colorConfig.getAreaBorderWidth(type) : 1;
  const borderOpacity = type ? colorConfig.getAreaBorderOpacity(type) : 0.15;
  
  
  // 设置边框宽度和样式
  ctx.lineWidth = borderWidth;
  ctx.setLineDash([]); // 固定为实线
  
  // 优先使用边框颜色，然后是通用颜色，最后是主题颜色
  let finalStrokeColor = borderColor || generalStrokeColor || typeStrokeColor || themeStrokeColor || '';
  
  // 应用透明度
  if (borderOpacity < 1 && finalStrokeColor.startsWith('#')) {
    const alpha = Math.round(borderOpacity * 255).toString(16).padStart(2, '0');
    finalStrokeColor = finalStrokeColor + alpha;
  }
  
  ctx.strokeStyle = finalStrokeColor;
  
  ctx.stroke();

  // 如果是描述区且有描述内容，渲染描述文字
  if (type === MapAreaType.描述区 && desc) {
    ctx.fillStyle = colorConfig.getColor('common.color') || (get(theme, 'color') ?? '');

    // 动态计算字体大小，让文字填充区域
    let descFontSize = Math.min(w / 6, h / 4, 200);
    let lines: string[] = [];

    while (descFontSize > 1) {
      ctx.font = `${descFontSize}px ${fontFamily}`;
      const maxCharsPerLine = Math.floor(w / (descFontSize * 0.8));

      if (maxCharsPerLine < 1) {
        descFontSize = Math.floor(descFontSize * 0.9);
        continue;
      }

      // 文字换行
      lines = [];
      for (let i = 0; i < desc.length; i += maxCharsPerLine) {
        lines.push(desc.slice(i, i + maxCharsPerLine));
      }

      // 计算文本高度
      const textMetrics = ctx.measureText('测试文字');
      const lineHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
      const totalHeight = lines.length * lineHeight * 1.1;

      if (totalHeight <= h * 0.9) break;
      descFontSize = Math.floor(descFontSize * 0.9);
    }

    // 渲染文字
    ctx.font = `${descFontSize}px ${fontFamily}`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    const textMetrics = ctx.measureText('测试文字');
    const lineHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
    const totalHeight = lines.length * lineHeight * 1.1;
    const startY = y + h / 2 - totalHeight / 2;

    lines.forEach((line, index) => {
      ctx.fillText(line, x + w / 2, startY + index * lineHeight * 1.1);
    });
  } else if (type !== MapAreaType.描述区 && label) {
    // 非描述区才显示标签
    ctx.fillStyle = colorConfig.getColor('common.color') || (get(theme, 'color') ?? '');
    ctx.font = `${fontSize}px/${lineHeight} ${fontFamily}`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText(label, x + w / 2, y - fontSize * lineHeight);
  }

  ctx.restore();
}

/**
 * 获取机器人状态
 * @param isWaring 是否告警
 * @param isFault 是否故障
 * @returns 机器人状态: 'fault' | 'warning' | 'normal'
 *
 * 判断逻辑：
 * - isWaring=true, isFault=true → 故障
 * - isWaring=false, isFault=true → 故障
 * - isWaring=true, isFault=false → 告警
 * - isWaring=false, isFault=false → 正常
 */
function getRobotStatus(isWaring?: boolean, isFault?: boolean): 'fault' | 'warning' | 'normal' {
  // 只要 isFault 为 true，无论 isWaring 是什么，都是故障状态
  if (isFault) return 'fault';
  // 如果 isFault 为 false 但 isWaring 为 true，则是告警状态
  if (isWaring) return 'warning';
  // 两者都为 false 时，为正常状态
  return 'normal';
}

/**
 * 绘制机器人的自定义函数
 * @param ctx Canvas 2D绘制上下文
 * @param pen 机器人图形对象
 */
function drawRobot(ctx: CanvasRenderingContext2D, pen: MapPen): void {
  const theme = sTheme.editor;
  const { lineWidth: s = 1 } = pen.calculative ?? {};
  const { x = 0, y = 0, width: w = 0, height: h = 0, rotate: deg = 0 } = pen.calculative?.worldRect ?? {};
  const { active, path, isWaring, isFault } = pen.robot ?? {};

  if (!active) return;

  // 根据机器人状态获取颜色
  const status = getRobotStatus(isWaring, isFault);

  // 基于机器人图片大小计算光圈半径，光圈比图片大20%，并随画布缩放
  const imageWidth = colorConfig.getColor('robot.imageWidth') 
    ? Number(colorConfig.getColor('robot.imageWidth')) : 60;
  const imageHeight = colorConfig.getColor('robot.imageHeight') 
    ? Number(colorConfig.getColor('robot.imageHeight')) : 80;
  // 取图片的较大边作为基准，计算圆形光圈的半径
  const imageSize = Math.max(imageWidth, imageHeight);
  const robotRadius = (imageSize * 1.2 * s) / 2;  // 光圈半径比图片大20%，并随画布缩放
  
  const ox = x + w / 2;
  const oy = y + h / 2;
  ctx.save();
  ctx.beginPath();
  ctx.arc(ox, oy, robotRadius, 0, Math.PI * 2);
  ctx.fillStyle = colorConfig.getColor(`robot.fill${status === 'normal' ? 'Normal' : status === 'warning' ? 'Warning' : 'Fault'}`) || (get(theme, `robot.fill-${status}`) ?? (get(theme, 'robot.fill') ?? ''));
  ctx.fill();
  ctx.strokeStyle = colorConfig.getColor(`robot.stroke${status === 'normal' ? 'Normal' : status === 'warning' ? 'Warning' : 'Fault'}`) || (get(theme, `robot.stroke-${status}`) ?? (get(theme, 'robot.stroke') ?? ''));
  ctx.stroke();
  if (path?.length) {
    ctx.strokeStyle = colorConfig.getColor('robot.line') || (get(theme, 'robot.line') ?? '');
    ctx.lineCap = 'round';
    ctx.lineWidth = s * 4;
    ctx.setLineDash([s * 5, s * 10]);
    ctx.translate(ox, oy);
    ctx.rotate((-deg * Math.PI) / 180);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    path.forEach((d) => ctx.lineTo(d.x * s, d.y * s));
    ctx.stroke();
    const { x: ex1 = 0, y: ey1 = 0 } = nth(path, -1) ?? {};
    const { x: ex2 = 0, y: ey2 = 0 } = nth(path, -2) ?? {};
    const r = Math.atan2(ey1 - ey2, ex1 - ex2) + Math.PI;
    ctx.setLineDash([0]);
    ctx.translate(ex1 * s, ey1 * s);
    ctx.beginPath();
    ctx.moveTo(Math.cos(r + Math.PI / 4) * s * 10, Math.sin(r + Math.PI / 4) * s * 10);
    ctx.lineTo(0, 0);
    ctx.lineTo(Math.cos(r - Math.PI / 4) * s * 10, Math.sin(r - Math.PI / 4) * s * 10);
    ctx.stroke();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
  }
  ctx.restore();
}

//#endregion

//#region 辅助函数
function getBezier2Center(p1: Point, c1: Point, p2: Point): Point & { t: number } {
  const fn = (t: number) => {
    const x = (1 - t) ** 2 * p1.x + 2 * (1 - t) * t * c1.x + t ** 2 * p2.x;
    const y = (1 - t) ** 2 * p1.y + 2 * (1 - t) * t * c1.y + t ** 2 * p2.y;
    return { x, y };
  };
  return calcBezierCenter(fn);
}
function getBezier2Tange(p1: Point, c1: Point, p2: Point, t: number): number {
  const dx = 2 * (1 - t) * (c1.x - p1.x) + 2 * t * (p2.x - c1.x);
  const dy = 2 * (1 - t) * (c1.y - p1.y) + 2 * t * (p2.y - c1.y);
  return Math.atan2(dy, dx);
}

function getBezier3Center(p1: Point, c1: Point, c2: Point, p2: Point): Point & { t: number } {
  const fn = (t: number) => {
    const x = (1 - t) ** 3 * p1.x + 3 * (1 - t) ** 2 * t * c1.x + 3 * (1 - t) * t ** 2 * c2.x + t ** 3 * p2.x;
    const y = (1 - t) ** 3 * p1.y + 3 * (1 - t) ** 2 * t * c1.y + 3 * (1 - t) * t ** 2 * c2.y + t ** 3 * p2.y;
    return { x, y };
  };
  return calcBezierCenter(fn);
}
function getBezier3Tange(p1: Point, c1: Point, c2: Point, p2: Point, t: number): number {
  const t1 = 3 * Math.pow(1 - t, 2);
  const t2 = 6 * (1 - t) * t;
  const t3 = 3 * Math.pow(t, 2);

  const dx = t1 * (c1.x - p1.x) + t2 * (c2.x - c1.x) + t3 * (p2.x - c2.x);
  const dy = t1 * (c1.y - p1.y) + t2 * (c2.y - c1.y) + t3 * (p2.y - c2.y);
  return Math.atan2(dy, dx);
}

function calcBezierCenter(bezierFn: (t: number) => Point): Point & { t: number } {
  const count = 23;

  let length = 0;
  let temp = bezierFn(0);
  const samples = Array.from({ length: count }, (_, i) => {
    const t = (i + 1) / count;
    const point = bezierFn(t);
    const dx = point.x - temp.x;
    const dy = point.y - temp.y;
    length += Math.sqrt(dx * dx + dy * dy);
    temp = point;
    return { ...point, t };
  });

  const target = length * 0.45;
  let accumulated = 0;
  for (let i = 0; i < samples.length - 1; i++) {
    const p1 = samples[i];
    const p2 = samples[i + 1];
    const segment = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
    if (accumulated + segment >= target) {
      const ratio = (target - accumulated) / segment;
      return {
        x: p1.x + (p2.x - p1.x) * ratio,
        y: p1.y + (p2.y - p1.y) * ratio,
        t: p1.t + ratio * (p2.t - p1.t),
      };
    }
    accumulated += segment;
  }
  return samples[samples.length - 1];
}
//#endregion