labelmain-demo/components/label/useRightToolsStore.ts

import { create } from "zustand"
import { persist } from "zustand/middleware"
import { storage, useLabelStore } from "./store"
import { usePaperStore } from "./usePaperStore"

interface RightToolsState {
  pathIds: number[]
  setPathIds: (pathIds: number[]) => void
  pushPathId: (pathId: number) => void
  pathGroupIds: number[]
  setPathGroupIds: (groupIds: number[]) => void
  pushPathGroupId: (groupId: number) => void
  pathGroupMap: Map<string, Map<number, number[]>>
  setPathGroupMap: (pathGroupMap: Map<string, Map<number, number[]>>) => void
  groupPathVisible: boolean
  setGroupPathVisible: (visible: boolean) => void
  addPathGroupInMap: (
    imageId: string,
    groupId: number,
    pathIds: number[]
  ) => void
  removePathGroupInMap: (imageId: string, groupId: number) => void
}

const initRightToolsState = {
  pathIds: [],
  pathGroupIds: [],
  pathGroupMap: new Map(),
}

export const useRightToolsStore = create(
  persist<RightToolsState>(
    (set) => ({
      pathIds: initRightToolsState.pathIds,
      setPathIds: (pathIds) =>
        set((state: RightToolsState) => ({
          ...state,
          pathIds,
        })),
      pushPathId: (pathId) => {
        let newIds = useRightToolsStore.getState().pathIds
        newIds.push(pathId)
        set((state: RightToolsState) => ({
          ...state,
          pathIds: newIds,
        }))
      },
      pathGroupIds: initRightToolsState.pathGroupIds,
      setPathGroupIds: (pathGroupIds) =>
        set((state: RightToolsState) => ({
          ...state,
          pathGroupIds,
        })),
      pushPathGroupId: (pathGroupId) => {
        let newIds = useRightToolsStore.getState().pathGroupIds
        newIds.push(pathGroupId)
        set((state: RightToolsState) => ({
          ...state,
          pathGroupIds: [...new Set(newIds)],
        }))
      },
      pathGroupMap: initRightToolsState.pathGroupMap,
      setPathGroupMap: (value) =>
        set((state: RightToolsState) => ({
          ...state,
          pathGroupMap: value,
        })),
      groupPathVisible: false,
      setGroupPathVisible: (value) =>
        set((state) => ({ ...state, groupPathVisible: value })),
      addPathGroupInMap: (
        imageId: string,
        groupId: number,
        pathIds: number[]
      ) =>
        set((state) => {
          if (!state.pathGroupMap?.has(imageId))
            state.pathGroupMap.set(imageId, new Map())
          let groupMap = state.pathGroupMap.get(imageId)
          let keys = groupMap && Array.from(groupMap!.keys())
          let deleteIds: number[] = []
          if (keys && keys.length) {
            keys.forEach((key) => {
              let newPathIds = groupMap
                ?.get(key)
                ?.filter((child) => !pathIds.includes(child))
              if (newPathIds && newPathIds.length > 1) {
                groupMap?.set(key, newPathIds)
              } else {
                deleteIds.push(...(groupMap?.get(key) ?? []))
                groupMap?.delete(key)
              }
            })
          }
          state.pathGroupMap.get(imageId)?.set(groupId, pathIds)
          // update LabelData
          const data = structuredClone(useLabelStore.getState().label)
          // handle delete
          if (deleteIds.length) {
            let operationIds: any[] = []
            deleteIds.forEach((childId) => {
              const childPath = usePaperStore.getState().getItemById(childId)!
              childPath.data.parentGroupId = null
              operationIds.push(childPath.data.operationId)
            })
            operationIds.forEach((operationId, index) => {
              if (data.get(imageId)?.get(operationId)?.length) {
                let result =
                  data
                    .get(imageId)
                    ?.get(operationId)
                    ?.map((item) =>
                      item[0] !== deleteIds[index]
                        ? item
                        : [
                            item[0],
                            item[1],
                            { ...item[2], parentGroupId: null },
                            item[3],
                          ]
                    ) || []
                data.get(imageId)?.set(operationId, result as any)
              }
            })
          }
          for (let [currentGroupId, currentPathIds] of state.pathGroupMap.get(
            imageId
          )!) {
            let needUpdateOperationIds: any[] = []
            currentPathIds.forEach((childId) => {
              const childPath = usePaperStore.getState().getItemById(childId)!
              childPath.data.parentGroupId = currentGroupId
              needUpdateOperationIds.push(childPath.data.operationId)
            })
            needUpdateOperationIds.forEach((operationId, index) => {
              if (data.get(imageId)?.get(operationId)?.length) {
                let result =
                  data
                    .get(imageId)
                    ?.get(operationId)
                    ?.map((item) =>
                      item[0] !== currentPathIds[index]
                        ? item
                        : [
                            item[0],
                            item[1],
                            { ...item[2], parentGroupId: currentGroupId },
                            item[3],
                          ]
                    ) || []
                data.get(imageId)?.set(operationId, result as any)
              }
            })
          }
          useLabelStore.getState().setLabel(data)
          return state
        }),
      removePathGroupInMap: (imageId, groupId) =>
        set((state) => {
          let groupMap = state.pathGroupMap.get(imageId)
          if (!groupMap) return state
          groupMap.delete(groupId)
          return state
        }),
    }),
    {
      name: "right-tools",
      storage: storage,
    }
  )
)