132 lines
3.3 KiB
TypeScript
132 lines
3.3 KiB
TypeScript
import { create } from "zustand";
|
|
import { models } from "@/constant/models.ts";
|
|
import { Vector3 } from "three";
|
|
import { devtools } from "zustand/middleware";
|
|
|
|
// import { v4 as uuidv4 } from "uuid";
|
|
export enum StickerType {
|
|
text,
|
|
logo,
|
|
}
|
|
|
|
export interface DecalSticker {
|
|
id: string;
|
|
position: Vector3;
|
|
text?: string;
|
|
url: string;
|
|
scale: number;
|
|
type: StickerType;
|
|
}
|
|
|
|
interface ModelState {
|
|
modelLoading: number;
|
|
setModelLoading: (progress: number) => void;
|
|
|
|
activeModel: number;
|
|
setActiveModel: (index: number) => void;
|
|
|
|
activeArea: number;
|
|
setActiveArea: (index: number) => void;
|
|
|
|
activeTextures: number[];
|
|
setActiveTextures: (activeArea: number, activeTexture: number) => void;
|
|
|
|
decalDragging: boolean;
|
|
setDecalDragging: (enable: boolean) => void;
|
|
|
|
decalZooming: boolean;
|
|
setDecalZooming: (enable: boolean) => void;
|
|
|
|
decals: DecalSticker[];
|
|
activeDecal?: string;
|
|
setDecalPosition: (id: string, position: Vector3) => void;
|
|
setDecals: (decals: DecalSticker[]) => void;
|
|
setDecalScale: (id: string, scale: number) => void;
|
|
setActiveDecal: (decalId: string) => void;
|
|
}
|
|
|
|
const useModelStore = create<ModelState>()(
|
|
devtools((set) => ({
|
|
modelLoading: 0,
|
|
setModelLoading: (progress: number) =>
|
|
set(() => ({ modelLoading: progress })),
|
|
setDecalScale: (id: string, scale: number) =>
|
|
set((state) => {
|
|
const _decals = state.decals.map((el) => {
|
|
if (el.id === id) {
|
|
el.scale = scale;
|
|
}
|
|
return el;
|
|
});
|
|
return {
|
|
decals: _decals,
|
|
};
|
|
}),
|
|
activeModel: 0,
|
|
setActiveModel: (index: number) =>
|
|
set(() => ({
|
|
activeModel: index,
|
|
activeArea: 0,
|
|
activeTextures: Array(models[index].mesh.length).fill(0),
|
|
})),
|
|
|
|
activeArea: 0,
|
|
setActiveArea: (index: number) => set(() => ({ activeArea: index })),
|
|
|
|
activeTextures: Array(models[0].mesh.length).fill(0),
|
|
setActiveTextures: (activeArea: number, activeTexture: number) =>
|
|
set((state) => ({
|
|
activeTextures: state.activeTextures.length
|
|
? state.activeTextures.map((item, index) =>
|
|
index === activeArea ? activeTexture : item,
|
|
)
|
|
: Array(state.activeTextures.length).fill(0),
|
|
})),
|
|
|
|
// 是否正在拖拽sticker
|
|
decalDragging: false,
|
|
setDecalDragging: (enable: boolean) =>
|
|
set(() => ({ decalDragging: enable })),
|
|
|
|
// 是否正在缩放sticker
|
|
decalZooming: false,
|
|
setDecalZooming: (enable: boolean) => set(() => ({ decalZooming: enable })),
|
|
|
|
decals: [],
|
|
activeDecal: undefined,
|
|
setDecalPosition: (id: string, position: Vector3) =>
|
|
set((state) => {
|
|
const _decals = state.decals.map((el) => {
|
|
if (el.id === id) {
|
|
return {
|
|
...el,
|
|
position,
|
|
};
|
|
} else {
|
|
return el;
|
|
}
|
|
});
|
|
return {
|
|
decals: _decals,
|
|
};
|
|
}),
|
|
setDecals: (decals: DecalSticker[]) =>
|
|
set(() => ({
|
|
decals,
|
|
})),
|
|
|
|
setActiveDecal: (decalId: string) =>
|
|
set(() => ({
|
|
activeDecal: decalId,
|
|
})),
|
|
|
|
// // @ts-ignore
|
|
// setDecalScale: (id: string, scale: number) =>
|
|
// set(() => ({
|
|
// activeArea: 0
|
|
// })),
|
|
})),
|
|
);
|
|
|
|
export default useModelStore;
|