feat: 新增画布视图状态管理Hook，支持保存、恢复视图状态及获取视图状态信息

src/services/useViewState.ts

@@ -0,0 +1,306 @@
+import { ref } from 'vue';
+
+import type { EditorService } from './editor.service';
+
+/**
+ * 画布视图状态接口
+ */
+interface ViewState {
+  /** 缩放比例 */
+  scale: number;
+  /** 中心点X坐标 */
+  centerX: number;
+  /** 中心点Y坐标 */
+  centerY: number;
+  /** 保存时间戳 */
+  timestamp: number;
+}
+
+/**
+ * 画布视图状态管理Hook
+ * 用于保存和恢复画布的缩放比例和中心坐标
+ */
+export function useViewState() {
+  const isSaving = ref(false);
+  const isRestoring = ref(false);
+
+  /**
+   * 生成localStorage的key
+   * @param sceneId 场景ID
+   * @param groupId 群组ID (可选)
+   */
+  const getStorageKey = (sceneId: string, groupId?: string): string => {
+    return groupId ? `view-state-${groupId}-${sceneId}` : `view-state-${sceneId}`;
+  };
+
+  /**
+   * 获取当前画布的视图状态
+   * @param editor 编辑器服务实例
+   */
+  const getCurrentViewState = (editor: EditorService): ViewState => {
+    console.groupCollapsed('🔍 [getCurrentViewState] - 获取当前视图状态');
+
+    // 1. 查找画布上所有的点位
+    const points = editor.find('point');
+    console.log('📍 画布上的点位数量:', points.length);
+
+    // 打印所有点位的原始数据，以便检查
+    console.log(
+      '📊 点位原始数据:',
+      points.map((point) => ({
+        id: point.id,
+        x: point.x,
+        y: point.y,
+        name: point.name,
+        text: point.text,
+      })),
+    );
+
+    // 2. 计算所有点位的边界
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+
+    // 尝试获取编辑器中的原始场景数据
+    // 编辑器中的#originalSceneData是Partial<StandardScene>类型
+    type SceneDataType = { ratio?: number; width?: number; height?: number };
+    let originalSceneData: SceneDataType = { ratio: 1, width: 0, height: 0 };
+
+    try {
+      // 尝试通过编辑器的save方法获取场景数据
+      const sceneJson = editor.save();
+      if (sceneJson) {
+        const sceneData = JSON.parse(sceneJson);
+        // 提取需要的字段
+        originalSceneData = {
+          ratio: sceneData.ratio || 1,
+          width: sceneData.width || 0,
+          height: sceneData.height || 0,
+        };
+        console.log('🗺️ 从场景数据中提取的信息:', originalSceneData);
+      }
+    } catch (error) {
+      console.error('获取编辑器原始数据失败:', error);
+      console.log('⚠️ 使用默认值');
+    }
+
+    const ratio = originalSceneData?.ratio || 1;
+    const mapWidth = originalSceneData?.width || 0;
+    const mapHeight = originalSceneData?.height || 0;
+
+    console.log('🗺️ 地图信息:', { ratio, mapWidth, mapHeight });
+
+    points.forEach((point) => {
+      // 获取点位的实际坐标（画布上显示的坐标）
+      const { x: displayX = 0, y: displayY = 0 } = editor.getPointRect(point) ?? {};
+
+      // 将显示坐标转换回原始坐标系统
+      // 这里我们尝试逆转编辑器中的坐标转换逻辑
+      // 根据editor.service.ts中的#transformCoordinate方法
+
+      // 1. 从显示坐标转回中心点原点坐标
+      const centerX = displayX;
+      const centerY = displayY;
+
+      // 2. 从中心点原点转回左上角原点坐标
+      const topLeftX = (centerX + mapWidth / 2) * ratio;
+      const topLeftY = (mapHeight / 2 - centerY) * ratio;
+
+      console.log(
+        `点位 ${point.id || point.name || '未命名'}: 显示坐标(${displayX}, ${displayY}), 原始坐标(${topLeftX.toFixed(1)}, ${topLeftY.toFixed(1)})`,
+      );
+
+      // 使用原始坐标系统的坐标计算边界
+      minX = Math.min(minX, topLeftX);
+      minY = Math.min(minY, topLeftY);
+      maxX = Math.max(maxX, topLeftX);
+      maxY = Math.max(maxY, topLeftY);
+    });
+
+    // 如果没有找到任何点位，使用默认值
+    if (minX === Infinity || minY === Infinity || maxX === -Infinity || maxY === -Infinity) {
+      minX = 0;
+      minY = 0;
+      maxX = 0;
+      maxY = 0;
+    }
+
+    // 3. 计算边界的中心点（在原始坐标系统中）
+    const centerX = (minX + maxX) / 2;
+    const centerY = (minY + maxY) / 2;
+
+    console.log('🔍 原始坐标系中的点位边界:', { minX, minY, maxX, maxY });
+    console.log('🎯 原始坐标系中的中心点:', { centerX, centerY });
+
+    // 4. 将中心点从原始坐标系统转换回编辑器的显示坐标系统
+    // 先根据ratio进行缩放
+    const scaledCenterX = centerX / ratio;
+    const scaledCenterY = centerY / ratio;
+
+    // 再进行坐标系转换：左上角原点 -> 中心点原点
+    const displayCenterX = scaledCenterX - mapWidth / 2;
+    const displayCenterY = mapHeight / 2 - scaledCenterY;
+
+    console.log('🎯 显示坐标系中的中心点:', { x: displayCenterX, y: displayCenterY });
+    console.log('⚙️ 当前画布状态 (origin, scale):', {
+      origin: JSON.parse(JSON.stringify(editor.store.data.origin)),
+      scale: editor.store.data.scale,
+    });
+
+    const finalState: ViewState = {
+      scale: editor.store.data.scale || 1,
+      centerX: displayCenterX,
+      centerY: displayCenterY,
+      timestamp: Date.now(),
+    };
+    console.log('💾 保存的最终视图状态:', finalState);
+    console.groupEnd();
+    return finalState;
+  };
+
+  /**
+   * 保存当前视图状态到localStorage
+   * @param editor 编辑器服务实例
+   * @param sceneId 场景ID
+   * @param groupId 群组ID (可选)
+   */
+  const saveViewState = async (editor: EditorService, sceneId: string, groupId?: string): Promise<void> => {
+    isSaving.value = true;
+    try {
+      const viewState = getCurrentViewState(editor);
+      const storageKey = getStorageKey(sceneId, groupId);
+      localStorage.setItem(storageKey, JSON.stringify(viewState));
+    } catch (error) {
+      console.error('保存视图状态失败:', error);
+      throw error;
+    } finally {
+      isSaving.value = false;
+    }
+  };
+
+  /**
+   * 从localStorage恢复视图状态
+   * @param editor 编辑器服务实例
+   * @param sceneId 场景ID
+   * @param groupId 群组ID (可选)
+   */
+  const restoreViewState = async (editor: EditorService, sceneId: string, groupId?: string): Promise<boolean> => {
+    console.groupCollapsed('🔄 [restoreViewState] - 恢复视图状态');
+    isRestoring.value = true;
+    try {
+      const storageKey = getStorageKey(sceneId, groupId);
+      const savedState = localStorage.getItem(storageKey);
+
+      if (!savedState) {
+        console.warn('⚠️ 未找到保存的视图状态');
+        console.groupEnd();
+        return false;
+      }
+
+      const viewState: ViewState = JSON.parse(savedState);
+      console.log('💾 读取到的视图状态:', viewState);
+
+      // 1. 设置缩放比例
+      editor.scale(viewState.scale);
+      console.log(`🔎 1. 设置缩放比例为: ${viewState.scale}`);
+
+      // 2. 尝试跳转到画布上的一个随机点位
+      if (viewState.centerX !== undefined && viewState.centerY !== undefined) {
+        try {
+          // 查找画布上所有的点位
+          const points = editor.find('point');
+          console.log('📍 画布上的点位数量:', points.length);
+
+          // 如果没有找到点位或跳转失败，创建一个临时点位
+          console.log('⚠️ 创建临时点位进行跳转');
+          const centerPointId = 'view-center-point-' + Date.now();
+
+          // 使用 addPoint 方法添加临时点位
+          // 这个方法会处理坐标转换和其他必要的设置
+          await editor.addPoint(
+            { x: viewState.centerX, y: viewState.centerY }, // 点位坐标
+            1, // 点位类型：普通点
+            centerPointId, // 点位ID
+          );
+
+          // 设置点位为不可见
+          editor.setValue({ id: centerPointId, visible: false }, { render: false, history: false, doEvent: false });
+
+          // 使用 gotoById 方法跳转到临时点
+          editor.gotoById(centerPointId);
+          console.log('🎯 使用 gotoById 跳转到临时点:', { x: viewState.centerX, y: viewState.centerY });
+
+          // 延迟一段时间后移除临时点
+          setTimeout(() => {
+            const tempPen = editor.getPenById(centerPointId);
+            if (tempPen) {
+              editor.delete([tempPen]);
+            }
+          }, 100);
+        } catch (error) {
+          console.error('使用 gotoById 跳转失败:', error);
+        }
+      }
+
+      // 3. 触发重绘
+      // editor.render();
+      console.log('🎨 3. 重绘画布完成');
+
+      console.groupEnd();
+      return true;
+    } catch (error) {
+      console.error('恢复视图状态失败:', error);
+      console.groupEnd();
+      return false;
+    } finally {
+      isRestoring.value = false;
+    }
+  };
+
+  /**
+   * 检查是否存在保存的视图状态
+   * @param sceneId 场景ID
+   * @param groupId 群组ID (可选)
+   */
+  const hasViewState = (sceneId: string, groupId?: string): boolean => {
+    const storageKey = getStorageKey(sceneId, groupId);
+    return localStorage.getItem(storageKey) !== null;
+  };
+
+  /**
+   * 清除保存的视图状态
+   * @param sceneId 场景ID
+   * @param groupId 群组ID (可选)
+   */
+  const clearViewState = (sceneId: string, groupId?: string): void => {
+    const storageKey = getStorageKey(sceneId, groupId);
+    localStorage.removeItem(storageKey);
+  };
+
+  /**
+   * 获取保存的视图状态信息
+   * @param sceneId 场景ID
+   * @param groupId 群组ID (可选)
+   */
+  const getViewStateInfo = (sceneId: string, groupId?: string): ViewState | null => {
+    try {
+      const storageKey = getStorageKey(sceneId, groupId);
+      const savedState = localStorage.getItem(storageKey);
+      return savedState ? JSON.parse(savedState) : null;
+    } catch {
+      return null;
+    }
+  };
+
+  return {
+    isSaving,
+    isRestoring,
+    saveViewState,
+    restoreViewState,
+    hasViewState,
+    clearViewState,
+    getViewStateInfo,
+    getCurrentViewState,
+  };
+}