117 |
118 |
119 |
126 |
133 |
134 |
135 |
136 |
137 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 | {
161 | window.open(
162 | "https://github.com/dennishansen/holograph",
163 | "_blank"
164 | );
165 | }}
166 | />
167 |
191 |
192 | {!isMobile && (
193 |
206 | {showUpdate ? (
207 | <>
208 | {"New stuff!"}
209 |
210 |
211 | ) : (
212 | "How to"
213 | )}
214 |
215 | )}
216 | {showUpdate && isMobile && (
217 |
223 | )}
224 |
40 | 
34 | );
35 |
36 | const CustomMainMenu = ({
37 | editor,
38 | showUpdate,
39 | setShowUpdate,
40 | latestUpdateTime,
41 | }) => {
42 | const actions = useActions();
43 | const exportAs = useExportAs();
44 | const trackEvent = useUiEvents();
45 | const isDarkMode = useIsDarkMode();
46 | const toasts = useToasts();
47 |
48 | useEffect(() => {
49 | document.toasts = toasts;
50 | return () => {
51 | document.toasts = () => {};
52 | };
53 | }, []);
54 |
55 | const isMobile = useMediaQuery("(max-width: 414px)");
56 |
57 | const openFile = () => {
58 | // Open file selection dialog
59 | const input = document.createElement("input");
60 | input.type = "file";
61 | input.accept = ".json";
62 | input.onchange = (event) => {
63 | const file = event.target.files[0];
64 | const reader = new FileReader();
65 | reader.onload = (event) => {
66 | const hasShapesOnPage =
67 | Array.from(editor.getCurrentPageShapeIds().values()).length > 0;
68 | let name = file.name.replace(".json", "");
69 | if (hasShapesOnPage) {
70 | const seed = Date.now();
71 | const id = "page:" + seed;
72 | editor.createPage({ name, id });
73 | editor.setCurrentPage(id);
74 | } else {
75 | editor.updatePage({ id: editor.getCurrentPageId(), name });
76 | }
77 | const jsonData = JSON.parse(event.target.result);
78 | // Backwards compatability: Append createdAt so defaults work
79 | const jsonDataWithCreatedAt = appendCreatedAt(jsonData);
80 | editor.putContentOntoCurrentPage(jsonDataWithCreatedAt, {
81 | select: true,
82 | });
83 | };
84 | reader.readAsText(file);
85 | };
86 | input.click();
87 | };
88 |
89 | const saveFile = () => {
90 | let ids = Array.from(editor.getCurrentPageShapeIds().values());
91 | if (ids.length === 0) return;
92 | let name = editor.getCurrentPage()?.name || "Untitled";
93 | trackEvent("export-as", { format: "json", source: "user" });
94 | exportAs(ids, "json", name);
95 | };
96 |
97 | const whatsNew = () => {
98 | fetch("/tutorial.json")
99 | .then((response) => {
100 | if (response.ok) return response.json();
101 | })
102 | .then((tutorial) => {
103 | const seed = Date.now();
104 | const id = "page:how-to" + seed;
105 | editor.createPage({ name: "How to", id });
106 | editor.setCurrentPage(id);
107 | const tutorialWithCreatedAt = appendCreatedAt(tutorial);
108 | editor.putContentOntoCurrentPage(tutorialWithCreatedAt);
109 | // Set local item that visited update
110 | localStorage.setItem("lastUpdateSeen", latestUpdateTime);
111 | setShowUpdate(false);
112 | });
113 | };
114 |
115 | return (
116 |