-
-
- The ZMK Project:{" "}
-
-
- - ZMK Studio is made possible thanks to the generous donation of time - from our contributors, as well as the financial sponsorship from the - following vendors: -
-
- {sponsors.map((s) => {
- const heightVariants = {
- [SponsorSize.Large]: "h-16",
- [SponsorSize.Medium]: "h-12",
- [SponsorSize.Small]: "h-8",
- };
-
- return (
-
-
-
- );
- })}
-
-
- {s.vendors.map((v) => {
- const maxSizeVariants = {
- [SponsorSize.Large]: "max-h-16",
- [SponsorSize.Medium]: "max-h-12",
- [SponsorSize.Small]: "max-h-8",
- };
-
- return (
-
-
- {v.darkModeImg && (
- 
-
-
- );
- })}
-
-
+
+
+ The ZMK Project:{" "}
+
+
+ + ZMK Studio is made possible thanks to the generous donation of time + from our contributors, as well as the financial sponsorship from the + following vendors: +
+
+ {sponsors.map((s) => {
+ const heightVariants = {
+ [SponsorSize.Large]: "h-16",
+ [SponsorSize.Medium]: "h-12",
+ [SponsorSize.Small]: "h-8",
+ };
+
+ return (
+
+
+
+ );
+ })}
+
+
+ {s.vendors.map((v) => {
+ const maxSizeVariants = {
+ [SponsorSize.Large]: "max-h-16",
+ [SponsorSize.Medium]: "max-h-12",
+ [SponsorSize.Small]: "max-h-8",
+ };
+
+ return (
+
+
+ {v.darkModeImg && (
+
+
+ );
+ })}
+
+
- setShowAbout(true)}
- onShowLicenseNotice={() => setShowLicenseNotice(true)}
- />
-
-
+ setShowAbout(true)}
+ onShowLicenseNotice={() => setShowLicenseNotice(true)}
+ />
+
+
-
-
- );
-};
+export interface AppFooterProps {
+ onShowAbout: () => void;
+ onShowLicenseNotice: () => void;
+}
+
+export const AppFooter = ({
+ onShowAbout,
+ onShowLicenseNotice,
+}: AppFooterProps) => {
+ return (
+
+
+
+ );
+};
diff --git a/src/AppHeader.stories.ts b/src/AppHeader.stories.ts
index 62ff88b0..5e6f7b5b 100644
--- a/src/AppHeader.stories.ts
+++ b/src/AppHeader.stories.ts
@@ -1,27 +1,27 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { AppHeader } from "./AppHeader";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
- title: "Application/AppHeader",
- component: AppHeader,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
- layout: "centered",
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ["autodocs"],
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
- argTypes: {
- // backgroundColor: { control: 'color' },
- },
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- args: {},
-} satisfies Meta
- 
-
-
- Studio
-Restore Stock Settings
-
-
- - Settings reset will remove any customizations previously made in ZMK - Studio and restore the stock keymap -
-Continue?
-
-
-
-
-
- {onUndo && (
-
-
-
- )}
-
- {onRedo && (
-
-
-
- )}
-
-
-
-
-
-
-
-
+
+
+
+ Studio
+Restore Stock Settings
+
+
+ + Settings reset will remove any customizations previously made in ZMK + Studio and restore the stock keymap +
+Continue?
+
+
+
+
+
+ {onUndo && (
+
+
+
+ )}
+
+ {onRedo && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
-
- {([t, d]) => (
-
- {t.isWireless && (
-
- )}
-
-
- );
-}
-
-function simpleDevicePicker(
- transports: TransportFactory[],
- onTransportCreated: (t: RpcTransport) => void
-) {
- const [availableDevices, setAvailableDevices] = useState<
- AvailableDevice[] | undefined
- >(undefined);
- const [selectedTransport, setSelectedTransport] = useState<
- TransportFactory | undefined
- >(undefined);
-
- useEffect(() => {
- if (!selectedTransport) {
- setAvailableDevices(undefined);
- return;
- }
-
- let ignore = false;
-
- if (selectedTransport.connect) {
- async function connectTransport() {
- try {
- const transport = await selectedTransport?.connect?.();
-
- if (!ignore) {
- if (transport) {
- onTransportCreated(transport);
- }
- setSelectedTransport(undefined);
- }
- } catch (e) {
- if (!ignore) {
- console.error(e);
- if (e instanceof Error && !(e instanceof UserCancelledError)) {
- alert(e.message);
- }
- setSelectedTransport(undefined);
- }
- }
- }
-
- connectTransport();
- } else {
- async function loadAvailableDevices() {
- const devices = await selectedTransport?.pick_and_connect?.list();
-
- if (!ignore) {
- setAvailableDevices(devices);
- }
- }
-
- loadAvailableDevices();
- }
-
- return () => {
- ignore = true;
- };
- }, [selectedTransport]);
-
- let connections = transports.map((t) => (
-
-
-
-
-
-
- );
-}
-
-function noTransportsOptionsPrompt() {
- return (
- Select a connection type.
-- {connections}
-
- {availableDevices.map((d) => (
-
- { - onTransportCreated( - await selectedTransport!.pick_and_connect!.connect(d) - ); - setSelectedTransport(undefined); - }} - > - {d.label} - - ))} -
-
- );
-}
-
-function connectOptions(
- transports: TransportFactory[],
- onTransportCreated: (t: RpcTransport) => void,
- open?: boolean
-) {
- const useSimplePicker = useMemo(
- () => transports.every((t) => !t.pick_and_connect),
- [transports]
- );
-
- return useSimplePicker
- ? simpleDevicePicker(transports, onTransportCreated)
- : deviceList(open || false, transports, onTransportCreated);
-}
-
-export const ConnectModal = ({
- open,
- transports,
- onTransportCreated,
-}: ConnectModalProps) => {
- const dialog = useModalRef(open || false, false, false);
-
- const haveTransports = useMemo(() => transports.length > 0, [transports]);
-
- return (
-
- Your browser is not supported. ZMK Studio uses either{" "}
-
-
- To use ZMK Studio, either:
--
-
- - Use a browser that supports the above web technologies, e.g. - Chrome/Edge, or - -
-
- Download our{" "}
-
- cross platform application - - . -
-
Welcome to ZMK Studio
- {haveTransports - ? connectOptions(transports, onTransportCreated, open) - : noTransportsOptionsPrompt()} -
+
+ {([t, d]) => (
+
+ {t.isWireless && (
+
+ )}
+
+
+ );
+}
+
+function simpleDevicePicker(
+ transports: TransportFactory[],
+ onTransportCreated: (t: RpcTransport) => void
+) {
+ const [availableDevices, setAvailableDevices] = useState<
+ AvailableDevice[] | undefined
+ >(undefined);
+ const [selectedTransport, setSelectedTransport] = useState<
+ TransportFactory | undefined
+ >(undefined);
+
+ useEffect(() => {
+ if (!selectedTransport) {
+ setAvailableDevices(undefined);
+ return;
+ }
+
+ let ignore = false;
+
+ if (selectedTransport.connect) {
+ async function connectTransport() {
+ try {
+ const transport = await selectedTransport?.connect?.();
+
+ if (!ignore) {
+ if (transport) {
+ onTransportCreated(transport);
+ }
+ setSelectedTransport(undefined);
+ }
+ } catch (e) {
+ if (!ignore) {
+ console.error(e);
+ if (e instanceof Error && !(e instanceof UserCancelledError)) {
+ alert(e.message);
+ }
+ setSelectedTransport(undefined);
+ }
+ }
+ }
+
+ connectTransport();
+ } else {
+ async function loadAvailableDevices() {
+ const devices = await selectedTransport?.pick_and_connect?.list();
+
+ if (!ignore) {
+ setAvailableDevices(devices);
+ }
+ }
+
+ loadAvailableDevices();
+ }
+
+ return () => {
+ ignore = true;
+ };
+ }, [selectedTransport]);
+
+ let connections = transports.map((t) => (
+
+
+
+
+
+
+ );
+}
+
+function noTransportsOptionsPrompt() {
+ return (
+ Select a connection type.
+- {connections}
-
+ {availableDevices.map((d) => (
+
- { + onTransportCreated( + await selectedTransport!.pick_and_connect!.connect(d) + ); + setSelectedTransport(undefined); + }} + > + {d.label} + + ))} +
+
+ );
+}
+
+function connectOptions(
+ transports: TransportFactory[],
+ onTransportCreated: (t: RpcTransport) => void,
+ open?: boolean
+) {
+ const useSimplePicker = useMemo(
+ () => transports.every((t) => !t.pick_and_connect),
+ [transports]
+ );
+
+ return useSimplePicker
+ ? simpleDevicePicker(transports, onTransportCreated)
+ : deviceList(open || false, transports, onTransportCreated);
+}
+
+export const ConnectModal = ({
+ open,
+ transports,
+ onTransportCreated,
+}: ConnectModalProps) => {
+ const dialog = useModalRef(open || false, false, false);
+
+ const haveTransports = useMemo(() => transports.length > 0, [transports]);
+
+ return (
+
+ Your browser is not supported. ZMK Studio uses either{" "}
+
+
+ To use ZMK Studio, either:
+-
+
- + Use a browser that supports the above web technologies, e.g. + Chrome/Edge, or + +
-
+ Download our{" "}
+
+ cross platform application + + . +
+
Welcome to ZMK Studio
+ {haveTransports + ? connectOptions(transports, onTransportCreated, open) + : noTransportsOptionsPrompt()} +
- 
-
- );
-};
+import { useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faAndroid,
+ faApple,
+ faLinux,
+ faWindows,
+ IconDefinition,
+} from "@fortawesome/free-brands-svg-icons";
+import { DownloadIcon } from "lucide-react";
+import releaseData from "./data/release-data.json";
+
+type Platform = "windows" | "mac" | "linux" | "ios" | "android" | "unknown";
+
+const PlatformMetadata: Record<
+ Platform,
+ { name: string; icon: IconDefinition }
+> = {
+ windows: {
+ name: "Windows",
+ icon: faWindows,
+ },
+ mac: {
+ name: "macOS",
+ icon: faApple,
+ },
+ linux: {
+ name: "Linux",
+ icon: faLinux,
+ },
+ ios: {
+ name: "iOS",
+ icon: faApple,
+ },
+ android: {
+ name: "Android",
+ icon: faAndroid,
+ },
+ unknown: {
+ name: "Unknown",
+ icon: faAndroid,
+ },
+};
+
+type DownloadLink = {
+ name: string;
+ urlPattern: RegExp;
+};
+
+const DownloadLinks: Record
- ZMK Studio
-
- {ReleaseVersion}
-
-
- {PlatformLinks[platform].length > 0 && (
- <>
-
-
- See GitHub Releases →
-
-
- {PlatformLinks[platform].map((link) => (
-
-
-
- )}
-
- {PlatformLinks[platform].length > 0 && (
-
- )}
- {showAll && (
-
-
- {Object.entries(PlatformLinks).map(([platform, links]) => (
-
- )}
-
- {links.map((link) => (
-
-
- ))}
-
+
+
+ );
+};
diff --git a/src/GenericModal.tsx b/src/GenericModal.tsx
index 8aad01b6..4f69d615 100644
--- a/src/GenericModal.tsx
+++ b/src/GenericModal.tsx
@@ -1,19 +1,19 @@
-import React from 'react';
-
-export interface GenericModalProps {
- onClose?: () => void;
- className?: string;
- children: React.ReactNode;
-}
-
-export const GenericModal = React.forwardRef(({ onClose, children, className }: GenericModalProps, ref: React.Ref
+ ZMK Studio
+
+ {ReleaseVersion}
+
+
+ {PlatformLinks[platform].length > 0 && (
+ <>
+
+
+ See GitHub Releases →
+
+
+ {PlatformLinks[platform].map((link) => (
+
+
+
+ )}
+
+ {PlatformLinks[platform].length > 0 && (
+
+ )}
+ {showAll && (
+
+
+ {Object.entries(PlatformLinks).map(([platform, links]) => (
+
+ )}
+
+ {links.map((link) => (
+
+
+ ))}
+ Unlock To Continue
-- For security reasons, your keyboard requires unlocking before using ZMK - Studio. -
-
- If studio unlocking hasn't been added to your keymap or a combo, see the{" "}
-
Unlock To Continue
++ For security reasons, your keyboard requires unlocking before using ZMK + Studio. +
+
+ If studio unlocking hasn't been added to your keymap or a combo, see the{" "}
+
-
- );
-};
+import { useEffect, useMemo, useState } from "react";
+
+import {
+ GetBehaviorDetailsResponse,
+ BehaviorBindingParametersSet,
+} from "@zmkfirmware/zmk-studio-ts-client/behaviors";
+import { BehaviorBinding } from "@zmkfirmware/zmk-studio-ts-client/keymap";
+import { BehaviorParametersPicker } from "./BehaviorParametersPicker";
+import { validateValue } from "./parameters";
+
+export interface BehaviorBindingPickerProps {
+ binding: BehaviorBinding;
+ behaviors: GetBehaviorDetailsResponse[];
+ layers: { id: number; name: string }[];
+ onBindingChanged: (binding: BehaviorBinding) => void;
+}
+
+function validateBinding(
+ metadata: BehaviorBindingParametersSet[],
+ layerIds: number[],
+ param1?: number,
+ param2?: number
+): boolean {
+ if (
+ (param1 === undefined || param1 === 0) &&
+ metadata.every((s) => !s.param1 || s.param1.length === 0)
+ ) {
+ return true;
+ }
+
+ let matchingSet = metadata.find((s) =>
+ validateValue(layerIds, param1, s.param1)
+ );
+
+ if (!matchingSet) {
+ return false;
+ }
+
+ return validateValue(layerIds, param2, matchingSet.param2);
+}
+
+export const BehaviorBindingPicker = ({
+ binding,
+ layers,
+ behaviors,
+ onBindingChanged,
+}: BehaviorBindingPickerProps) => {
+ const [behaviorId, setBehaviorId] = useState(binding.behaviorId);
+ const [param1, setParam1] = useState
-
-
-
- {metadata && (
-
+
+ );
+};
diff --git a/src/behaviors/BehaviorParametersPicker.stories.ts b/src/behaviors/BehaviorParametersPicker.stories.ts
index 8c085bc1..25da5bb9 100644
--- a/src/behaviors/BehaviorParametersPicker.stories.ts
+++ b/src/behaviors/BehaviorParametersPicker.stories.ts
@@ -1,65 +1,65 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-
-import { BehaviorParametersPicker } from "./BehaviorParametersPicker";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
- title: "Behaviors/BehaviorParametersPicker",
- component: BehaviorParametersPicker,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
- layout: "centered",
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ["autodocs"],
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
- argTypes: {
- // backgroundColor: { control: 'color' },
- },
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- args: {
- layers: [
- { name: "Base", id: 0 },
- { id: 1, name: "Num" },
- ],
- onParam1Changed: fn(),
- onParam2Changed: fn(),
- },
-} satisfies Meta
+
+
+
+ {metadata && (
+
- m.param1)}
- onValueChanged={onParam1Changed}
- layers={layers}
- />
-
- );
- } else {
- const set = metadata.find((s) =>
- validateValue(
- layers.map((l) => l.id),
- param1,
- s.param1
- )
- );
- return (
- <>
-
+ m.param1)}
+ onValueChanged={onParam1Changed}
+ layers={layers}
+ />
+
+ );
+ } else {
+ const set = metadata.find((s) =>
+ validateValue(
+ layers.map((l) => l.id),
+ param1,
+ s.param1
+ )
+ );
+ return (
+ <>
+
- {label && }
-
-
-
- {({ id, min, max }) =>
-
-
-
- {all_mods.map((m) => (
-
- {mod_labels[m]}
-
- ))}
-
-
- );
-};
+import {
+ Button,
+ Checkbox,
+ CheckboxGroup,
+ Collection,
+ ComboBox,
+ Header,
+ Input,
+ Key,
+ Label,
+ ListBox,
+ ListBoxItem,
+ Popover,
+ Section,
+} from "react-aria-components";
+import {
+ hid_usage_from_page_and_id,
+ hid_usage_get_labels,
+ hid_usage_get_labels,
+ hid_usage_page_get_ids,
+ UsageId,
+} from "../hid-usages";
+import { useCallback, useMemo, useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+export interface HidUsagePage {
+ id: number;
+ min?: number;
+ max?: number;
+}
+
+export interface HidUsagePickerProps {
+ label?: string;
+ value?: number;
+ usagePages: HidUsagePage[];
+ onValueChanged: (value?: number) => void;
+}
+
+export interface UsageSectionGridProps {
+ id: number;
+ min?: number;
+ max?: number;
+ onMouseOver?: (mouseOverData: {
+ id: number, i: UsageId
+ }) => void;
+}
+
+type UsageSectionProps = HidUsagePage;
+
+const UsageSection = ({ id, min, max }: UsageSectionProps) => {
+ const info = useMemo(() => hid_usage_page_get_ids(id), [id]);
+
+ let usages = useMemo(() => {
+ let usages = info?.UsageIds || [];
+ if (max || min) {
+ usages = usages.filter(
+ (i) =>
+ (i.Id <= (max || Number.MAX_SAFE_INTEGER) && i.Id >= (min || 0)) ||
+ (id === 7 && i.Id >= 0xe0 && i.Id <= 0xe7)
+ );
+ }
+
+ return usages;
+ }, [id, min, max, info]);
+
+ return (
+
-
-
-
-
+
+ )}}
+ + {labels.short || labels.med || labels.long || i.Name} +
+ {labels.secondary && ( ++ {labels.secondary} +
+ )} +
+ selectionChanged(currentKey)}
+ aria-labelledby="hid-usage-picker"
+ >
+ {({ id, min, max }) =>
+
+ );
+};
diff --git a/src/behaviors/ParameterValuePicker.stories.ts b/src/behaviors/ParameterValuePicker.stories.ts
index cbd0db8e..8d8adf2f 100644
--- a/src/behaviors/ParameterValuePicker.stories.ts
+++ b/src/behaviors/ParameterValuePicker.stories.ts
@@ -1,57 +1,57 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { ParameterValuePicker } from "./ParameterValuePicker";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
- title: "Behaviors/ParameterValuePicker",
- component: ParameterValuePicker,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
- layout: "centered",
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ["autodocs"],
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
- argTypes: {
- // backgroundColor: { control: 'color' },
- },
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- args: {
- layers: [
- { name: "Base", id: 0 },
- { id: 1, name: "Num" },
- ],
- onValueChanged: fn(),
- },
-} satisfies Meta
+ {label && }
+
+
+
+ {({ id, min, max }) =>
+
+
+
+ {all_mods.map((m) => (
+
+ {mod_labels[m]}
+
+ ))}
+
+
+
+
+
+
+
-
-
- );
- } else if (values.length == 1) {
- if (values[0].range) {
- return (
-
-
- onValueChanged(parseInt(e.target.value))}
- />
-
- );
- } else if (values[0].hidUsage) {
- return (
-
-
-
-
- );
- }
- } else {
- console.log("Not sure how to handle", values);
- return (
- <>
- Some composite?
- - ); - } - - return <>; -}; +import { BehaviorParameterValueDescription } from "@zmkfirmware/zmk-studio-ts-client/behaviors"; +import { HidUsagePicker } from "./HidUsagePicker"; + +export interface ParameterValuePickerProps { + value?: number; + values: BehaviorParameterValueDescription[]; + layers: { id: number; name: string }[]; + onValueChanged: (value?: number) => void; +} + +export const ParameterValuePicker = ({ + value, + values, + layers, + onValueChanged, +}: ParameterValuePickerProps) => { + if (values.length == 0) { + return <>; + } else if (values.every((v) => v.constant !== undefined)) { + return ( +
+
+
+ );
+ } else if (values.length == 1) {
+ if (values[0].range) {
+ return (
+
+
+ onValueChanged(parseInt(e.target.value))}
+ />
+
+ );
+ } else if (values[0].hidUsage) {
+ return (
+
+
+
+
+ );
+ }
+ } else {
+ console.log("Not sure how to handle", values);
+ return (
+ <>
+ Some composite?
+ + ); + } + + return <>; +}; diff --git a/src/behaviors/parameters.ts b/src/behaviors/parameters.ts index 96f91527..f812f9f5 100644 --- a/src/behaviors/parameters.ts +++ b/src/behaviors/parameters.ts @@ -1,32 +1,32 @@ -import { BehaviorParameterValueDescription } from "@zmkfirmware/zmk-studio-ts-client/behaviors"; -import { hid_usage_page_and_id_from_usage } from "../hid-usages"; - -export function validateValue( - layerIds: number[], - value?: number, - values?: BehaviorParameterValueDescription[] -): boolean { - if (value === undefined) { - return values === undefined || values?.length === 0 || !!values[0].nil; - } - - const matchingValue = values?.find((v) => { - if (v.constant !== undefined) { - return v.constant == value; - } else if (v.range) { - return value >= v.range.min && value <= v.range.max; - } else if (v.hidUsage) { - const [page, id] = hid_usage_page_and_id_from_usage(value); - return page !== 0 && id !== 0; - } else if (v.layerId) { - return layerIds.includes(value); - } else if (v.nil) { - return value === 0; - } else { - console.error("Unknown check type!"); - return false; - } - }); - - return !!matchingValue || (value === 0 && (!values || values.length === 0)); -} +import { BehaviorParameterValueDescription } from "@zmkfirmware/zmk-studio-ts-client/behaviors"; +import { hid_usage_page_and_id_from_usage } from "../hid-usages"; + +export function validateValue( + layerIds: number[], + value?: number, + values?: BehaviorParameterValueDescription[] +): boolean { + if (value === undefined) { + return values === undefined || values?.length === 0 || !!values[0].nil; + } + + const matchingValue = values?.find((v) => { + if (v.constant !== undefined) { + return v.constant == value; + } else if (v.range) { + return value >= v.range.min && value <= v.range.max; + } else if (v.hidUsage) { + const [page, id] = hid_usage_page_and_id_from_usage(value); + return page !== 0 && id !== 0; + } else if (v.layerId) { + return layerIds.includes(value); + } else if (v.nil) { + return value === 0; + } else { + console.error("Unknown check type!"); + return false; + } + }); + + return !!matchingValue || (value === 0 && (!values || values.length === 0)); +} diff --git a/src/context/keymap.tsx b/src/context/keymap.tsx new file mode 100644 index 00000000..6c6ce061 --- /dev/null +++ b/src/context/keymap.tsx @@ -0,0 +1,35 @@ +import { Keymap } from '@zmkfirmware/zmk-studio-ts-client/keymap'; +import { createContext, Dispatch, PropsWithChildren, SetStateAction, useContext } from 'react'; +import { useConnectedDeviceData } from '../rpc/useConnectedDeviceData'; + +interface KeymapContextValue { + keymap: Keymap | undefined; + setKeymap: Dispatch
- {c}
-
- ));
-
- return (
-
-
-
- );
-};
+// import './key.css';
+
+import { PropsWithChildren, Children, CSSProperties } from "react";
+
+interface KeyProps {
+ /**
+ * Is this the principal call to action on the page?
+ */
+ selected?: boolean;
+ /**
+ * How large should the button be?
+ */
+ width: number;
+ height: number;
+
+ oneU: number;
+
+ hoverZoom?: boolean;
+ /**
+ * Button contents
+ */
+ header?: string;
+ /**
+ * Optional click handler
+ */
+ onClick?: () => void;
+}
+
+interface KeyDimension {
+ width: number;
+ height: number;
+}
+
+function makeSize(
+ { width, height }: KeyDimension,
+ oneU: number
+): CSSProperties {
+ width *= oneU;
+ height *= oneU;
+
+ return {
+ "--zmk-key-center-width": "calc(" + width + "px - 2px)",
+ "--zmk-key-center-height": "calc(" + height + "px - 2px)",
+ };
+}
+
+export const Key = ({
+ selected = false,
+ header,
+ oneU,
+ hoverZoom = true,
+ ...props
+}: PropsWithChildren
+ {c}
+
+ ));
+
+ return (
+
+
+
+ );
+};
diff --git a/src/keyboard/Keyboard.tsx b/src/keyboard/Keyboard.tsx
index e4a9e4bf..4d73fad1 100644
--- a/src/keyboard/Keyboard.tsx
+++ b/src/keyboard/Keyboard.tsx
@@ -1,577 +1,574 @@
-import React, {
- SetStateAction,
- useCallback,
- useContext,
- useEffect,
- useMemo,
- useState,
-} from "react";
-
-import { Request } from "@zmkfirmware/zmk-studio-ts-client";
-import { call_rpc } from "../rpc/logging";
-import {
- PhysicalLayout,
- Keymap,
- SetLayerBindingResponse,
- SetLayerPropsResponse,
- BehaviorBinding,
- Layer,
-} from "@zmkfirmware/zmk-studio-ts-client/keymap";
-import type { GetBehaviorDetailsResponse } from "@zmkfirmware/zmk-studio-ts-client/behaviors";
-
-import { LayerPicker } from "./LayerPicker";
-import { PhysicalLayoutPicker } from "./PhysicalLayoutPicker";
-import { Keymap as KeymapComp } from "./Keymap";
-import { useConnectedDeviceData } from "../rpc/useConnectedDeviceData";
-import { ConnectionContext } from "../rpc/ConnectionContext";
-import { UndoRedoContext } from "../undoRedo";
-import { BehaviorBindingPicker } from "../behaviors/BehaviorBindingPicker";
-import { produce } from "immer";
-import { LockStateContext } from "../rpc/LockStateContext";
-import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
-import { deserializeLayoutZoom, LayoutZoom } from "./PhysicalLayout";
-import { useLocalStorageState } from "../misc/useLocalStorageState";
-
-type BehaviorMap = Record
-
- );
-}
+import React, {
+ SetStateAction,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from "react";
+
+import { Request } from "@zmkfirmware/zmk-studio-ts-client";
+import { call_rpc } from "../rpc/logging";
+import {
+ PhysicalLayout,
+ Keymap,
+ SetLayerBindingResponse,
+ SetLayerPropsResponse,
+ BehaviorBinding,
+ Layer,
+} from "@zmkfirmware/zmk-studio-ts-client/keymap";
+import type { GetBehaviorDetailsResponse } from "@zmkfirmware/zmk-studio-ts-client/behaviors";
+
+import { LayerPicker } from "./LayerPicker";
+import { PhysicalLayoutPicker } from "./PhysicalLayoutPicker";
+import { Keymap as KeymapComp } from "./Keymap";
+import { useConnectedDeviceData } from "../rpc/useConnectedDeviceData";
+import { ConnectionContext } from "../rpc/ConnectionContext";
+import { UndoRedoContext } from "../undoRedo";
+import { BehaviorBindingPicker } from "../behaviors/BehaviorBindingPicker";
+import { produce } from "immer";
+import { LockStateContext } from "../rpc/LockStateContext";
+import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
+import { deserializeLayoutZoom, LayoutZoom } from "./PhysicalLayout";
+import { useLocalStorageState } from "../misc/useLocalStorageState";
+import { useKeymap } from "../context/keymap";
+
+type BehaviorMap = Record
- {layouts && (
-
- {layouts && keymap && behaviors && (
-
-
- )}
-
- {keymap && (
-
- 0}
- canRemove={(keymap.layers?.length || 0) > 1}
- onAddClicked={addLayer}
- onRemoveClicked={removeLayer}
- onLayerNameChanged={changeLayerName}
- />
-
- )}
-
-
- )}
- {keymap && selectedBinding && (
-
- ({
- id,
- name: name || li.toLocaleString(),
- }))}
- onBindingChanged={doUpdateBinding}
- />
-
- )}
-
+
+ );
+}
diff --git a/src/keyboard/Keymap.tsx b/src/keyboard/Keymap.tsx
index 4d457b13..24aa5470 100644
--- a/src/keyboard/Keymap.tsx
+++ b/src/keyboard/Keymap.tsx
@@ -1,79 +1,79 @@
-import {
- PhysicalLayout,
- Keymap as KeymapMsg,
-} from "@zmkfirmware/zmk-studio-ts-client/keymap";
-import type { GetBehaviorDetailsResponse } from "@zmkfirmware/zmk-studio-ts-client/behaviors";
-
-import {
- LayoutZoom,
- PhysicalLayout as PhysicalLayoutComp,
-} from "./PhysicalLayout";
-import { HidUsageLabel } from "./HidUsageLabel";
-
-type BehaviorMap = Record
+ {layouts && (
+
+ {layouts && keymap && behaviors && (
+
+
+ )}
+
+ {keymap && (
+
+ 0}
+ canRemove={(keymap.layers?.length || 0) > 1}
+ onAddClicked={addLayer}
+ onRemoveClicked={removeLayer}
+ onLayerNameChanged={changeLayerName}
+ />
+
+ )}
+
+
+ )}
+ {keymap && selectedBinding && (
+
+ ({
+ id,
+ name: name || li.toLocaleString(),
+ }))}
+ onBindingChanged={doUpdateBinding}
+ />
+
+ )}
+
-
-
-
-
- setEditLabelData(null)}
- editLabelData={editLabelData}
- handleSaveNewLabel={handleSaveNewLabel}
- />
- )}
-
- {(layer_item) => (
-
- {layer_item.name}
-
- setEditLabelData({ id: layer_item.id, name: layer_item.name })
- }
- />
-
- )}
-
-
- );
-};
+import { Pencil, Minus, Plus } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import {
+ DropIndicator,
+ Label,
+ ListBox,
+ ListBoxItem,
+ Selection,
+ useDragAndDrop,
+} from "react-aria-components";
+import { useModalRef } from "../misc/useModalRef";
+import { GenericModal } from "../GenericModal";
+
+interface Layer {
+ id: number;
+ name?: string;
+}
+
+export type LayerClickCallback = (index: number) => void;
+export type LayerMovedCallback = (index: number, destination: number) => void;
+
+interface LayerPickerProps {
+ layers: Array
-
- {onRemoveClicked && (
-
- )}
- {onAddClicked && (
-
- )}
-
- {editLabelData !== null && (
-
+
+
+
+
+ setEditLabelData(null)}
+ editLabelData={editLabelData}
+ handleSaveNewLabel={handleSaveNewLabel}
+ />
+ )}
+
+ {(layer_item) => (
+
+ {layer_item.name}
+
+ setEditLabelData({ id: layer_item.id, name: layer_item.name })
+ }
+ />
+
+ )}
+
+
+ );
+};
diff --git a/src/keyboard/PhysicalLayout.stories.tsx b/src/keyboard/PhysicalLayout.stories.tsx
index fa1b2f07..5f0071d6 100644
--- a/src/keyboard/PhysicalLayout.stories.tsx
+++ b/src/keyboard/PhysicalLayout.stories.tsx
@@ -1,195 +1,195 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { PhysicalLayout } from "./PhysicalLayout";
-import { HidUsageLabel } from "./HidUsageLabel";
-import { hid_usage_from_page_and_id } from "../hid-usages";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
- title: "Keyboard/PhysicalLayout",
- component: PhysicalLayout,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ["autodocs"],
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
- argTypes: {},
- args: {
- onPositionClicked: fn(),
- },
-} satisfies Meta
+
+ {onRemoveClicked && (
+
+ )}
+ {onAddClicked && (
+
+ )}
+
+ {editLabelData !== null && (
+ onPositionClicked?.(idx)}
- className="absolute data-[zoomer=true]:hover:z-[1000] leading-[0]"
- data-zoomer={hoverZoom}
- style={scalePosition(p, oneU)}
- >
-
- ));
-
- return (
-
- {positionItems}
-
- );
-};
+import {
+ CSSProperties,
+ PropsWithChildren,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from "react";
+import { Key } from "./Key";
+
+export type KeyPosition = PropsWithChildren<{
+ header?: string;
+ width: number;
+ height: number;
+ x: number;
+ y: number;
+ r?: number;
+ rx?: number;
+ ry?: number;
+}>;
+
+export type LayoutZoom = number | "auto";
+
+export function deserializeLayoutZoom(value: string): LayoutZoom {
+ if (value === "auto") {
+ return "auto";
+ }
+ return parseFloat(value) || "auto";
+}
+
+interface PhysicalLayoutProps {
+ positions: Array onPositionClicked?.(idx)}
+ className="absolute data-[zoomer=true]:hover:z-[1000] leading-[0]"
+ data-zoomer={hoverZoom}
+ style={scalePosition(p, oneU)}
+ >
+
+ ));
+
+ return (
+
+ {positionItems}
+
+ );
+};
diff --git a/src/keyboard/PhysicalLayoutPicker.stories.ts b/src/keyboard/PhysicalLayoutPicker.stories.ts
index 9ab11688..96d57387 100644
--- a/src/keyboard/PhysicalLayoutPicker.stories.ts
+++ b/src/keyboard/PhysicalLayoutPicker.stories.ts
@@ -1,52 +1,52 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { PhysicalLayoutPicker } from "./PhysicalLayoutPicker";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
- title: "Keyboard/PhysicalLayoutPicker",
- component: PhysicalLayoutPicker,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
- layout: "centered",
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ["autodocs"],
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
- argTypes: {
- // backgroundColor: { control: 'color' },
- },
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- args: {
- onPhysicalLayoutClicked: fn(),
- },
-} satisfies Meta
-
-
-
- - ZMK Studio is released under the open source Apache 2.0 license. A - copy of the NOTICE file from the ZMK Studio repository is included - here: -
- -{NOTICE}
-
+
+
+
+ + ZMK Studio is released under the open source Apache 2.0 license. A + copy of the NOTICE file from the ZMK Studio repository is included + here: +
+ +{NOTICE}
+