fix(righttool): fix

components/label/useBottomToolsStore.ts

@@ -13,6 +13,12 @@ interface KeyFrameData {
 interface BottomToolsState {
   activeImage: string
   setActiveImage: (val: string) => void
+  pendingImage: string
+  frameSwitchStatus: "idle" | "preparing"
+  frameSwitchToken: number
+  requestFrameSwitch: (val: string) => number
+  commitFrameSwitch: (val: string, token: number) => void
+  clearPendingFrameSwitch: (token?: number) => void
   inputNumber: string
   setInputNumber: (val: string) => void
   activeImageId: number
@@ -36,13 +42,48 @@ const initialBottomToolsState = {
   inputNumber: "",
 }
 
-export const useBottomToolsStore = create<BottomToolsState>((set) => ({
+export const useBottomToolsStore = create<BottomToolsState>()((set, get) => ({
   activeImage: initialBottomToolsState.activeImage,
   setActiveImage: (val: string) =>
     set((state: BottomToolsState) => ({
       ...state,
       activeImage: val,
+      pendingImage: "",
+      frameSwitchStatus: "idle",
     })),
+  pendingImage: "",
+  frameSwitchStatus: "idle",
+  frameSwitchToken: 0,
+  requestFrameSwitch: (val: string): number => {
+    const nextToken = get().frameSwitchToken + 1
+    set((state: BottomToolsState) => ({
+      ...state,
+      pendingImage: val,
+      frameSwitchStatus:
+        val && val !== state.activeImage ? "preparing" : "idle",
+      frameSwitchToken: nextToken,
+    }))
+    return nextToken
+  },
+  commitFrameSwitch: (val: string, token: number) =>
+    set((state: BottomToolsState) => {
+      if (state.frameSwitchToken !== token) return state
+      return {
+        ...state,
+        activeImage: val,
+        pendingImage: "",
+        frameSwitchStatus: "idle",
+      }
+    }),
+  clearPendingFrameSwitch: (token?: number) =>
+    set((state: BottomToolsState) => {
+      if (token != null && state.frameSwitchToken !== token) return state
+      return {
+        ...state,
+        pendingImage: "",
+        frameSwitchStatus: "idle",
+      }
+    }),
   inputNumber: initialBottomToolsState.inputNumber,
   setInputNumber: (val: string) =>
     set((state: BottomToolsState) => ({
@@ -63,7 +104,7 @@ export const useBottomToolsStore = create<BottomToolsState>((set) => ({
     })),
   keyFrameData: new Map(),
   setKeyFrameData: (imageId, value) => {
-    const data = useBottomToolsStore.getState().keyFrameData
+    const data = get().keyFrameData
     data.set(imageId, value)
     return set((state) => ({
       ...state,
@@ -78,15 +119,13 @@ export const useBottomToolsStore = create<BottomToolsState>((set) => ({
     })),
   selectedItems: [],
   setSelectedItems: (id, ctrlKey, shiftKey) => {
-    let arr = [...useBottomToolsStore.getState().selectedItems]
+    let arr = [...get().selectedItems]
     if ((ctrlKey && shiftKey) || (!ctrlKey && !shiftKey)) arr = []
     else if (ctrlKey && !shiftKey) {
       arr.push(id)
     } else if (!ctrlKey && shiftKey) {
-      const allItems = useBottomToolsStore.getState().allItems
-      const prevId = arr.length
-        ? arr[arr.length - 1]
-        : useBottomToolsStore.getState().activeImage
+      const allItems = get().allItems
+      const prevId = arr.length ? arr[arr.length - 1] : get().activeImage
       const prevIndex = allItems.findIndex((v) => v === prevId)
       const currentIndex = allItems.findIndex((v) => v === id)
       arr =