diff --git a/src/app/page.tsx b/src/app/page.tsx index fb56386..d504bb5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,7 +6,7 @@ import KeycodePicker from "@/components/KeycodePicker"; import LayerSelector from "@/components/LayerSelector"; import Toolbar from "@/components/Toolbar"; import { parseViaDefinition } from "@/lib/parser"; -import { createDefaultKeymap, exportKeymap, importKeymap, downloadJson } from "@/lib/keymap"; +import { createDefaultKeymap, exportKeymap, exportToVIA, importAnyKeymap, downloadJson } from "@/lib/keymap"; import { ParsedLayout, Keymap, KeyboardDefinition } from "@/types/keyboard"; import defaultKb from "../../keyboards/60-percent.json"; @@ -37,25 +37,36 @@ export default function Home() { [selectedKey, activeLayer] ); - const handleExport = useCallback(() => { - const json = exportKeymap("My Keymap", kbName, keymap); - downloadJson(json, "keymap.json"); + const handleExportVIA = useCallback(() => { + try { + const json = exportToVIA(keymap); + downloadJson(json, "via-keymap.json"); + } catch (e) { + console.error(e); + alert("Failed to export VIA keymap") + } + }, [keymap]); + + const handleExportKeylab = useCallback(() => { + try { + const json = exportKeymap("My Keymap", kbName, keymap); + downloadJson(json, "zumap-keymap.json"); + } catch (e) { + console.error(e); + alert("Failed to export keymap") + } }, [keymap, kbName]); const handleImport = useCallback( (json: string) => { try { - const file = importKeymap(json); - // Pad layers to 4 if needed - while (file.layers.length < 4) { - file.layers.push( - Array.from({ length: layout.keys.length }, () => "KC_NO") - ); - } - setKeymap(file.layers); + const layers = importAnyKeymap(json, layout.keys.length); + + setKeymap(layers); setSelectedKey(null); setActiveLayer(0); } catch (e) { + console.error(e); alert("Invalid keymap file"); } }, @@ -98,7 +109,8 @@ export default function Home() {

diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx index 2653170..4a3104f 100644 --- a/src/components/Toolbar.tsx +++ b/src/components/Toolbar.tsx @@ -3,12 +3,13 @@ import { useRef } from "react"; interface Props { - onExport: () => void; + onExportVIA: () => void; + onExportKeylab: () => void; onImport: (json: string) => void; onLoadKeyboard: (json: string) => void; } -export default function Toolbar({ onExport, onImport, onLoadKeyboard }: Props) { +export default function Toolbar({ onExportVIA, onExportKeylab, onImport, onLoadKeyboard }: Props) { const keymapInputRef = useRef(null); const kbInputRef = useRef(null); @@ -27,11 +28,19 @@ export default function Toolbar({ onExport, onImport, onLoadKeyboard }: Props) { return (
+ + +