1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
import { create } from "zustand";
import { persist } from "zustand/middleware";
import type { TPlatformLayout } from "@/types/editor";
interface LayoutGuideSettings {
platform: TPlatformLayout | null;
}
interface PreviewOverlaysState {
bookmarks: boolean;
}
interface PreviewState {
layoutGuide: LayoutGuideSettings;
overlays: PreviewOverlaysState;
setLayoutGuide: (settings: Partial<LayoutGuideSettings>) => void;
toggleLayoutGuide: (platform: TPlatformLayout) => void;
setOverlayVisibility: ({
overlay,
isVisible,
}: {
overlay: keyof PreviewOverlaysState;
isVisible: boolean;
}) => void;
toggleOverlayVisibility: ({
overlay,
}: {
overlay: keyof PreviewOverlaysState;
}) => void;
}
const DEFAULT_PREVIEW_OVERLAYS: PreviewOverlaysState = {
bookmarks: true,
};
export const usePreviewStore = create<PreviewState>()(
persist(
(set) => ({
layoutGuide: { platform: null },
overlays: DEFAULT_PREVIEW_OVERLAYS,
setLayoutGuide: (settings) => {
set((state) => ({
layoutGuide: {
...state.layoutGuide,
...settings,
},
}));
},
toggleLayoutGuide: (platform) => {
set((state) => ({
layoutGuide: {
platform: state.layoutGuide.platform === platform ? null : platform,
},
}));
},
setOverlayVisibility: ({ overlay, isVisible }) => {
set((state) => ({
overlays: {
...state.overlays,
[overlay]: isVisible,
},
}));
},
toggleOverlayVisibility: ({ overlay }) => {
set((state) => ({
overlays: {
...state.overlays,
[overlay]: !state.overlays[overlay],
},
}));
},
}),
{
name: "preview-settings",
version: 2,
migrate: (persistedState) => {
const state = persistedState as
| {
layoutGuide?: LayoutGuideSettings;
overlays?: PreviewOverlaysState;
}
| undefined;
return {
layoutGuide: state?.layoutGuide ?? { platform: null },
overlays: state?.overlays ?? DEFAULT_PREVIEW_OVERLAYS,
};
},
partialize: (state) => ({
layoutGuide: state.layoutGuide,
overlays: state.overlays,
}),
},
),
);
|
