feat(label): add label page

components/label/useBottomToolsStore.ts

@@ -0,0 +1,102 @@
+import { create } from "zustand"
+
+interface KeyFrameData {
+  key_frame: boolean
+  label1_ts: number
+  label1_uid: number
+  review1_ts: number
+  review1_uid: number
+  review2_ts: number
+  review2_uid: number
+}
+
+interface BottomToolsState {
+  activeImage: string
+  setActiveImage: (val: string) => void
+  inputNumber: string
+  setInputNumber: (val: string) => void
+  activeImageId: number
+  setActiveImageId: (val: number) => void
+  onlyKeyFrame: boolean
+  setOnlyKeyFrame: (val: boolean) => void
+  keyFrameData: Map<string, KeyFrameData>
+  setKeyFrameData: (imageId: string, value: KeyFrameData) => void
+  allItems: string[]
+  setAllItems: (arr: string[]) => void
+  selectedItems: string[]
+  setSelectedItems: (
+    imageId: string,
+    ctrlKey: boolean,
+    shiftKey: boolean
+  ) => void
+}
+
+const initialBottomToolsState = {
+  activeImage: "",
+  inputNumber: "",
+}
+
+export const useBottomToolsStore = create<BottomToolsState>((set) => ({
+  activeImage: initialBottomToolsState.activeImage,
+  setActiveImage: (val: string) =>
+    set((state: BottomToolsState) => ({
+      ...state,
+      activeImage: val,
+    })),
+  inputNumber: initialBottomToolsState.inputNumber,
+  setInputNumber: (val: string) =>
+    set((state: BottomToolsState) => ({
+      ...state,
+      inputNumber: val,
+    })),
+  activeImageId: 0,
+  setActiveImageId: (val) =>
+    set((state: BottomToolsState) => ({
+      ...state,
+      activeImageId: val,
+    })),
+  onlyKeyFrame: false,
+  setOnlyKeyFrame: (val) =>
+    set((state) => ({
+      ...state,
+      onlyKeyFrame: val,
+    })),
+  keyFrameData: new Map(),
+  setKeyFrameData: (imageId, value) => {
+    const data = useBottomToolsStore.getState().keyFrameData
+    data.set(imageId, value)
+    return set((state) => ({
+      ...state,
+      keyFrameData: data,
+    }))
+  },
+  allItems: [],
+  setAllItems: (arr) =>
+    set((state) => ({
+      ...state,
+      allItems: arr,
+    })),
+  selectedItems: [],
+  setSelectedItems: (id, ctrlKey, shiftKey) => {
+    let arr = [...useBottomToolsStore.getState().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 prevIndex = allItems.findIndex((v) => v === prevId)
+      const currentIndex = allItems.findIndex((v) => v === id)
+      arr =
+        prevIndex < currentIndex
+          ? allItems.slice(prevIndex, currentIndex + 1)
+          : allItems.slice(currentIndex, prevIndex + 1)
+    }
+    return set((state) => ({
+      ...state,
+      selectedItems: arr,
+    }))
+  },
+}))