Skip to content

Commit 9d9fe60

Browse files
azeembaazeemba
committed
Add UI Support for File Selection
The simple data object is moved inside the vue component since the new handler for "Open" event needs access to `this.$refs`. We use a hidden FileInput element to trigger the native file selection dialog. After the user selects a file, we read it in and print it for now.
1 parent c3174ba commit 9d9fe60

File tree

1 file changed

+116
-93
lines changed

1 file changed

+116
-93
lines changed

‎client/web/src/components/widgets/inputs/MenuBarInput.vue

Lines changed: 116 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
</div>
1313
<MenuList :menuEntries="entry.children" :direction="MenuDirection.Bottom" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
1414
</div>
15+
<input type="file" ref="fileTrigger" style="display: none" />
1516
</div>
1617
</template>
1718

@@ -62,99 +63,6 @@ import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.
6263
6364
const wasm = import("@/../wasm/pkg");
6465
65-
const menuEntries: MenuListEntries = [
66-
{
67-
label: "File",
68-
ref: undefined,
69-
children: [
70-
[
71-
{ label: "New", icon: "File", shortcut: ["Ctrl", "N"], shortcutRequiresLock: true, action: async () => (await wasm).new_document() },
72-
{ label: "Open…", shortcut: ["Ctrl", "O"] },
73-
{
74-
label: "Open Recent",
75-
shortcut: ["Ctrl", "⇧", "O"],
76-
children: [
77-
[{ label: "Reopen Last Closed", shortcut: ["Ctrl", "⇧", "T"], shortcutRequiresLock: true }, { label: "Clear Recently Opened" }],
78-
[
79-
{ label: "Some Recent File.gdd" },
80-
{ label: "Another Recent File.gdd" },
81-
{ label: "An Older File.gdd" },
82-
{ label: "Some Other Older File.gdd" },
83-
{ label: "Yet Another Older File.gdd" },
84-
],
85-
],
86-
},
87-
],
88-
[
89-
{ label: "Close", shortcut: ["Ctrl", "W"], shortcutRequiresLock: true, action: async () => (await wasm).close_active_document_with_confirmation() },
90-
{ label: "Close All", shortcut: ["Ctrl", "Alt", "W"], action: async () => (await wasm).close_all_documents_with_confirmation() },
91-
],
92-
[
93-
{ label: "Save", shortcut: ["Ctrl", "S"], action: async () => (await wasm).save_file() },
94-
{ label: "Save As…", shortcut: ["Ctrl", "⇧", "S"] },
95-
{ label: "Save All", shortcut: ["Ctrl", "Alt", "S"] },
96-
{ label: "Auto-Save", checkbox: true, checked: true },
97-
],
98-
[
99-
{ label: "Import…", shortcut: ["Ctrl", "I"] },
100-
{ label: "Export…", shortcut: ["Ctrl", "E"], action: async () => (await wasm).export_document() },
101-
],
102-
[{ label: "Quit", shortcut: ["Ctrl", "Q"] }],
103-
],
104-
},
105-
{
106-
label: "Edit",
107-
ref: undefined,
108-
children: [
109-
[
110-
{ label: "Undo", shortcut: ["Ctrl", "Z"], action: async () => (await wasm).undo() },
111-
{ label: "Redo", shortcut: ["Ctrl", "⇧", "Z"] },
112-
],
113-
[
114-
{ label: "Cut", shortcut: ["Ctrl", "X"] },
115-
{ label: "Copy", icon: "Copy", shortcut: ["Ctrl", "C"] },
116-
{ label: "Paste", icon: "Paste", shortcut: ["Ctrl", "V"] },
117-
],
118-
],
119-
},
120-
{
121-
label: "Layer",
122-
ref: undefined,
123-
children: [
124-
[
125-
{ label: "Select All", shortcut: ["Ctrl", "A"], action: async () => (await wasm).select_all_layers() },
126-
{ label: "Deselect All", shortcut: ["Ctrl", "Alt", "A"], action: async () => (await wasm).deselect_all_layers() },
127-
{
128-
label: "Order",
129-
children: [
130-
[
131-
{ label: "Raise To Front", shortcut: ["Ctrl", "Shift", "]"], action: async () => (await wasm).reorder_selected_layers(2147483647) },
132-
{ label: "Raise", shortcut: ["Ctrl", "]"], action: async () => (await wasm).reorder_selected_layers(1) },
133-
{ label: "Lower", shortcut: ["Ctrl", "["], action: async () => (await wasm).reorder_selected_layers(-1) },
134-
{ label: "Lower to Back", shortcut: ["Ctrl", "Shift", "["], action: async () => (await wasm).reorder_selected_layers(-2147483648) },
135-
],
136-
],
137-
},
138-
],
139-
],
140-
},
141-
{
142-
label: "Document",
143-
ref: undefined,
144-
children: [[{ label: "Menu entries coming soon" }]],
145-
},
146-
{
147-
label: "View",
148-
ref: undefined,
149-
children: [[{ label: "Menu entries coming soon" }]],
150-
},
151-
{
152-
label: "Help",
153-
ref: undefined,
154-
children: [[{ label: "Menu entries coming soon" }]],
155-
},
156-
];
157-
15866
export default defineComponent({
15967
methods: {
16068
setEntryRefs(menuEntry: MenuListEntry, ref: typeof MenuList) {
@@ -167,8 +75,123 @@ export default defineComponent({
16775
handleLogoClick() {
16876
window.open("https://www.graphite.design", "_blank");
16977
},
78+
handleOpen() {
79+
// Prep the reader object's handlers first.
80+
// Used to read the file after user selects a file
81+
const reader = new FileReader();
82+
reader.addEventListener("loadend", () => {
83+
const content = reader.result;
84+
// Need to send this to the backend
85+
console.log(content);
86+
});
87+
// Prep the file selector's handler
88+
// Will be triggered when the user selects a file
89+
const fileElement = this.$refs.fileTrigger as HTMLInputElement;
90+
fileElement.addEventListener(
91+
"change",
92+
() => {
93+
if (fileElement.files && fileElement.files.length > 0) reader.readAsText(fileElement.files[0]);
94+
},
95+
{ capture: false, once: true }
96+
);
97+
// Trigger "select file" popup
98+
fileElement.click();
99+
},
170100
},
171101
data() {
102+
const menuEntries: MenuListEntries = [
103+
{
104+
label: "File",
105+
ref: undefined,
106+
children: [
107+
[
108+
{ label: "New", icon: "File", shortcut: ["Ctrl", "N"], shortcutRequiresLock: true, action: async () => (await wasm).new_document() },
109+
{ label: "Open…", shortcut: ["Ctrl", "O"], action: async () => this.handleOpen() },
110+
{
111+
label: "Open Recent",
112+
shortcut: ["Ctrl", "⇧", "O"],
113+
children: [
114+
[{ label: "Reopen Last Closed", shortcut: ["Ctrl", "⇧", "T"], shortcutRequiresLock: true }, { label: "Clear Recently Opened" }],
115+
[
116+
{ label: "Some Recent File.gdd" },
117+
{ label: "Another Recent File.gdd" },
118+
{ label: "An Older File.gdd" },
119+
{ label: "Some Other Older File.gdd" },
120+
{ label: "Yet Another Older File.gdd" },
121+
],
122+
],
123+
},
124+
],
125+
[
126+
{ label: "Close", shortcut: ["Ctrl", "W"], shortcutRequiresLock: true, action: async () => (await wasm).close_active_document_with_confirmation() },
127+
{ label: "Close All", shortcut: ["Ctrl", "Alt", "W"], action: async () => (await wasm).close_all_documents_with_confirmation() },
128+
],
129+
[
130+
{ label: "Save", shortcut: ["Ctrl", "S"], action: async () => (await wasm).save_file() },
131+
{ label: "Save As…", shortcut: ["Ctrl", "⇧", "S"] },
132+
{ label: "Save All", shortcut: ["Ctrl", "Alt", "S"] },
133+
{ label: "Auto-Save", checkbox: true, checked: true },
134+
],
135+
[
136+
{ label: "Import…", shortcut: ["Ctrl", "I"] },
137+
{ label: "Export…", shortcut: ["Ctrl", "E"], action: async () => (await wasm).export_document() },
138+
],
139+
[{ label: "Quit", shortcut: ["Ctrl", "Q"] }],
140+
],
141+
},
142+
{
143+
label: "Edit",
144+
ref: undefined,
145+
children: [
146+
[
147+
{ label: "Undo", shortcut: ["Ctrl", "Z"], action: async () => (await wasm).undo() },
148+
{ label: "Redo", shortcut: ["Ctrl", "⇧", "Z"] },
149+
],
150+
[
151+
{ label: "Cut", shortcut: ["Ctrl", "X"] },
152+
{ label: "Copy", icon: "Copy", shortcut: ["Ctrl", "C"] },
153+
{ label: "Paste", icon: "Paste", shortcut: ["Ctrl", "V"] },
154+
],
155+
],
156+
},
157+
{
158+
label: "Layer",
159+
ref: undefined,
160+
children: [
161+
[
162+
{ label: "Select All", shortcut: ["Ctrl", "A"], action: async () => (await wasm).select_all_layers() },
163+
{ label: "Deselect All", shortcut: ["Ctrl", "Alt", "A"], action: async () => (await wasm).deselect_all_layers() },
164+
{
165+
label: "Order",
166+
children: [
167+
[
168+
{ label: "Raise To Front", shortcut: ["Ctrl", "Shift", "]"], action: async () => (await wasm).reorder_selected_layers(2147483647) },
169+
{ label: "Raise", shortcut: ["Ctrl", "]"], action: async () => (await wasm).reorder_selected_layers(1) },
170+
{ label: "Lower", shortcut: ["Ctrl", "["], action: async () => (await wasm).reorder_selected_layers(-1) },
171+
{ label: "Lower to Back", shortcut: ["Ctrl", "Shift", "["], action: async () => (await wasm).reorder_selected_layers(-2147483648) },
172+
],
173+
],
174+
},
175+
],
176+
],
177+
},
178+
{
179+
label: "Document",
180+
ref: undefined,
181+
children: [[{ label: "Menu entries coming soon" }]],
182+
},
183+
{
184+
label: "View",
185+
ref: undefined,
186+
children: [[{ label: "Menu entries coming soon" }]],
187+
},
188+
{
189+
label: "Help",
190+
ref: undefined,
191+
children: [[{ label: "Menu entries coming soon" }]],
192+
},
193+
];
194+
172195
return {
173196
ApplicationPlatform,
174197
menuEntries,

0 commit comments

Comments
 (0)