From b2fc2d8d73cdeacd3fc1dbf7633b83bbc74d08d0 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Fri, 10 Oct 2025 14:45:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=E6=92=AD=E6=94=BE=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E5=99=A8=E4=B8=AD=E6=B7=BB=E5=8A=A0=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E5=AE=9A=E4=BD=8D=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9C=BA=E6=99=AF=E5=88=87=E6=8D=A2=E5=90=8E?=
 =?UTF-8?q?=E7=9A=84=E8=A7=86=E5=9B=BE=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/usePlaybackWebSocket.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/hooks/usePlaybackWebSocket.ts b/src/hooks/usePlaybackWebSocket.ts
index 5acb74e..b755160 100644
--- a/src/hooks/usePlaybackWebSocket.ts
+++ b/src/hooks/usePlaybackWebSocket.ts
@@ -4,6 +4,7 @@ import { type Ref, ref, type ShallowRef, shallowRef } from 'vue';
 
 import type { RobotRealtimeInfo } from '../apis/robot';
 import type { EditorService } from '../services/editor.service';
+import { useViewState } from '../services/useViewState';
 import ws from '../services/ws';
 
 // Define the structure of WebSocket messages for playback
@@ -51,6 +52,15 @@ export function usePlaybackWebSocket(editorService: ShallowRef<EditorService | u
   const currentSceneId = ref<string | null>(null);
   const sceneJson = ref<string | null>(null);
 
+  const { calculateCenterPoint, jumpToPosition } = useViewState();
+
+  const locateCenter = () => {
+    if (editorService.value) {
+      const { centerX, centerY } = calculateCenterPoint(editorService.value);
+      jumpToPosition(editorService.value, centerX, centerY, false, 0.05);
+    }
+  };
+
   const latestRobotData = new Map<string, RobotRealtimeInfo>();
   let animationFrameId: number;
 
@@ -82,6 +92,11 @@ export function usePlaybackWebSocket(editorService: ShallowRef<EditorService | u
           // For seamless scene switching, we only update the scene JSON.
           // Time and playback state should continue uninterrupted.
           sceneJson.value = msg.data;
+          // After receiving a new scene, automatically center the view.
+          // Use a timeout to allow the new scene to be rendered first.
+          setTimeout(() => {
+            locateCenter();
+          }, 100);
         } else if (msg.type === 'AMR') {
           (msg.data as RobotRealtimeInfo[]).forEach(robot => {
             latestRobotData.set(robot.id, robot);