feat: graph editor supports multiple properties at once

1 files changed, 251 insertions, 347 deletions

diff --git a/apps/web/src/stores/keybindings-store.ts b/apps/web/src/stores/keybindings-store.ts
index 630b287b..ff77e0b4 100644
--- a/apps/web/src/stores/keybindings-store.ts
+++ b/apps/web/src/stores/keybindings-store.ts
@@ -1,347 +1,251 @@
-"use client";

-

-import { create } from "zustand";

-import { persist } from "zustand/middleware";

-import type { TActionWithOptionalArgs } from "@/lib/actions";

-import { getDefaultShortcuts } from "@/lib/actions";

-import { isTypableDOMElement } from "@/utils/browser";

-import { isAppleDevice } from "@/utils/platform";

-import type { KeybindingConfig, ShortcutKey } from "@/lib/actions/keybinding";

-import { runMigrations, CURRENT_VERSION } from "./keybindings/migrations";

-

-const defaultKeybindings: KeybindingConfig = getDefaultShortcuts();

-

-export interface KeybindingConflict {

-	key: ShortcutKey;

-	existingAction: TActionWithOptionalArgs;

-	newAction: TActionWithOptionalArgs;

-}

-

-interface KeybindingsState {

-	keybindings: KeybindingConfig;

-	isCustomized: boolean;

-	overlayDepth: number;

-	openOverlayIds: string[];

-	isLoadingProject: boolean;

-	isRecording: boolean;

-

-	updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => void;

-	removeKeybinding: (key: ShortcutKey) => void;

-	resetToDefaults: () => void;

-	importKeybindings: (config: KeybindingConfig) => void;

-	exportKeybindings: () => KeybindingConfig;

-	openOverlay: (overlayId: string, source: string) => void;

-	closeOverlay: (overlayId: string, source: string) => void;

-	setLoadingProject: (loading: boolean) => void;

-	setIsRecording: (isRecording: boolean) => void;

-	validateKeybinding: (

-		key: ShortcutKey,

-		action: TActionWithOptionalArgs,

-	) => KeybindingConflict | null;

-	getKeybindingsForAction: (action: TActionWithOptionalArgs) => ShortcutKey[];

-	getKeybindingString: (ev: KeyboardEvent) => ShortcutKey | null;

-}

-

-function isDOMElement(element: EventTarget | null): element is HTMLElement {

-	return element instanceof HTMLElement;

-}

-

-export const useKeybindingsStore = create<KeybindingsState>()(

-	persist(

-		(set, get) => ({

-			keybindings: { ...defaultKeybindings },

-			isCustomized: false,

-			overlayDepth: 0,

-			openOverlayIds: [],

-			isLoadingProject: false,

-			isRecording: false,

-

-			openOverlay: (overlayId, source) =>

-				set((s) => {

-					const openOverlayIds = s.openOverlayIds.includes(overlayId)

-						? s.openOverlayIds

-						: [...s.openOverlayIds, overlayId];

-					const nextOverlayDepth = openOverlayIds.length;

-					// #region agent log

-					fetch(

-						"http://127.0.0.1:7245/ingest/669b22f8-172b-4e65-aa3f-1c702ede83f7",

-						{

-							method: "POST",

-							headers: {

-								"Content-Type": "application/json",

-								"X-Debug-Session-Id": "3997d9",

-							},

-							body: JSON.stringify({

-								sessionId: "3997d9",

-								runId: "initial",

-								hypothesisId: "H2",

-								location: "keybindings-store.ts:openOverlay",

-								message: "Overlay depth incremented",

-								data: {

-									source,

-									overlayId,

-									overlayDepth: s.overlayDepth,

-									nextOverlayDepth,

-									openOverlayIds,

-								},

-								timestamp: Date.now(),

-							}),

-						},

-					).catch(() => {});

-					// #endregion

-					return {

-						openOverlayIds,

-						overlayDepth: nextOverlayDepth,

-					};

-				}),

-			closeOverlay: (overlayId, source) =>

-				set((s) => {

-					const openOverlayIds = s.openOverlayIds.filter(

-						(id) => id !== overlayId,

-					);

-					const nextOverlayDepth = openOverlayIds.length;

-					// #region agent log

-					fetch(

-						"http://127.0.0.1:7245/ingest/669b22f8-172b-4e65-aa3f-1c702ede83f7",

-						{

-							method: "POST",

-							headers: {

-								"Content-Type": "application/json",

-								"X-Debug-Session-Id": "3997d9",

-							},

-							body: JSON.stringify({

-								sessionId: "3997d9",

-								runId: "initial",

-								hypothesisId: "H2",

-								location: "keybindings-store.ts:closeOverlay",

-								message: "Overlay depth decremented",

-								data: {

-									source,

-									overlayId,

-									overlayDepth: s.overlayDepth,

-									nextOverlayDepth,

-									openOverlayIds,

-								},

-								timestamp: Date.now(),

-							}),

-						},

-					).catch(() => {});

-					// #endregion

-					return {

-						openOverlayIds,

-						overlayDepth: nextOverlayDepth,

-					};

-				}),

-			setLoadingProject: (loading) => {

-				// #region agent log

-				fetch(

-					"http://127.0.0.1:7245/ingest/669b22f8-172b-4e65-aa3f-1c702ede83f7",

-					{

-						method: "POST",

-						headers: {

-							"Content-Type": "application/json",

-							"X-Debug-Session-Id": "3997d9",

-						},

-						body: JSON.stringify({

-							sessionId: "3997d9",

-							runId: "initial",

-							hypothesisId: "H2",

-							location: "keybindings-store.ts:setLoadingProject",

-							message: "Loading gate updated",

-							data: { loading },

-							timestamp: Date.now(),

-						}),

-					},

-				).catch(() => {});

-				// #endregion

-				set({ isLoadingProject: loading });

-			},

-

-			updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => {

-				set((state) => {

-					const newKeybindings = { ...state.keybindings };

-					newKeybindings[key] = action;

-

-					return {

-						keybindings: newKeybindings,

-						isCustomized: true,

-					};

-				});

-			},

-

-			removeKeybinding: (key: ShortcutKey) => {

-				set((state) => {

-					const newKeybindings = { ...state.keybindings };

-					delete newKeybindings[key];

-

-					return {

-						keybindings: newKeybindings,

-						isCustomized: true,

-					};

-				});

-			},

-

-			resetToDefaults: () => {

-				set({

-					keybindings: { ...defaultKeybindings },

-					isCustomized: false,

-				});

-			},

-

-			importKeybindings: (config: KeybindingConfig) => {

-				for (const [key] of Object.entries(config)) {

-					if (typeof key !== "string" || key.length === 0) {

-						throw new Error(`Invalid key format: ${key}`);

-					}

-				}

-				set({

-					keybindings: { ...config },

-					isCustomized: true,

-				});

-			},

-

-			exportKeybindings: () => {

-				return get().keybindings;

-			},

-

-			validateKeybinding: (

-				key: ShortcutKey,

-				action: TActionWithOptionalArgs,

-			) => {

-				const { keybindings } = get();

-				const existingAction = keybindings[key];

-

-				if (existingAction && existingAction !== action) {

-					return {

-						key,

-						existingAction,

-						newAction: action,

-					};

-				}

-

-				return null;

-			},

-			setIsRecording: (isRecording: boolean) => {

-				// #region agent log

-				fetch(

-					"http://127.0.0.1:7245/ingest/669b22f8-172b-4e65-aa3f-1c702ede83f7",

-					{

-						method: "POST",

-						headers: {

-							"Content-Type": "application/json",

-							"X-Debug-Session-Id": "3997d9",

-						},

-						body: JSON.stringify({

-							sessionId: "3997d9",

-							runId: "initial",

-							hypothesisId: "H2",

-							location: "keybindings-store.ts:setIsRecording",

-							message: "Recording gate updated",

-							data: { isRecording },

-							timestamp: Date.now(),

-						}),

-					},

-				).catch(() => {});

-				// #endregion

-				set({ isRecording });

-			},

-

-			getKeybindingsForAction: (action: TActionWithOptionalArgs) => {

-				const { keybindings } = get();

-				return Object.keys(keybindings).filter(

-					(key) => keybindings[key as ShortcutKey] === action,

-				) as ShortcutKey[];

-			},

-

-			getKeybindingString: (ev: KeyboardEvent) => {

-				return generateKeybindingString(ev) as ShortcutKey | null;

-			},

-		}),

-		{

-			name: "opencut-keybindings",

-			version: CURRENT_VERSION,

-			partialize: (state) => ({

-				keybindings: state.keybindings,

-				isCustomized: state.isCustomized,

-			}),

-			migrate: (persisted, version) =>

-				runMigrations({ state: persisted, fromVersion: version }),

-		},

-	),

-);

-

-function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {

-	const target = ev.target;

-	const modifierKey = getActiveModifier(ev);

-	const key = getPressedKey(ev);

-	if (!key) return null;

-

-	if (modifierKey) {

-		if (

-			modifierKey === "shift" &&

-			isDOMElement(target) &&

-			isTypableDOMElement({ element: target as HTMLElement })

-		) {

-			return null;

-		}

-

-		return `${modifierKey}+${key}` as ShortcutKey;

-	}

-

-	if (

-		isDOMElement(target) &&

-		isTypableDOMElement({ element: target as HTMLElement })

-	)

-		return null;

-

-	return `${key}` as ShortcutKey;

-}

-

-function getPressedKey(ev: KeyboardEvent): string | null {

-	const key = (ev.key ?? "").toLowerCase();

-	const code = ev.code ?? "";

-

-	if (code === "Space" || key === " " || key === "spacebar" || key === "space")

-		return "space";

-

-	if (key.startsWith("arrow")) return key.slice(5);

-

-	if (key === "escape") return "escape";

-	if (key === "tab") return "tab";

-	if (key === "home") return "home";

-	if (key === "end") return "end";

-	if (key === "delete") return "delete";

-	if (key === "backspace") return "backspace";

-

-	if (code.startsWith("Key")) {

-		const letter = code.slice(3).toLowerCase();

-		if (letter.length === 1 && letter >= "a" && letter <= "z") return letter;

-	}

-

-	// Use physical key position for AZERTY and other non-QWERTY layouts

-	if (code.startsWith("Digit")) {

-		const digit = code.slice(5);

-		if (digit.length === 1 && digit >= "0" && digit <= "9") return digit;

-	}

-

-	const isDigit = key.length === 1 && key >= "0" && key <= "9";

-	if (isDigit) return key;

-

-	if (key === "/" || key === "." || key === "enter") return key;

-

-	return null;

-}

-

-function getActiveModifier(ev: KeyboardEvent): string | null {

-	const modifierKeys = {

-		ctrl: isAppleDevice() ? ev.metaKey : ev.ctrlKey,

-		alt: ev.altKey,

-		shift: ev.shiftKey,

-	};

-

-	const activeModifier = Object.keys(modifierKeys)

-		.filter((key) => modifierKeys[key as keyof typeof modifierKeys])

-		.join("+");

-

-	return activeModifier === "" ? null : activeModifier;

-}

+"use client";
+
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import type { TActionWithOptionalArgs } from "@/lib/actions";
+import { getDefaultShortcuts } from "@/lib/actions";
+import { isTypableDOMElement } from "@/utils/browser";
+import { isAppleDevice } from "@/utils/platform";
+import type { KeybindingConfig, ShortcutKey } from "@/lib/actions/keybinding";
+import { runMigrations, CURRENT_VERSION } from "./keybindings/migrations";
+
+const defaultKeybindings: KeybindingConfig = getDefaultShortcuts();
+
+export interface KeybindingConflict {
+	key: ShortcutKey;
+	existingAction: TActionWithOptionalArgs;
+	newAction: TActionWithOptionalArgs;
+}
+
+interface KeybindingsState {
+	keybindings: KeybindingConfig;
+	isCustomized: boolean;
+	overlayDepth: number;
+	openOverlayIds: string[];
+	isLoadingProject: boolean;
+	isRecording: boolean;
+
+	updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => void;
+	removeKeybinding: (key: ShortcutKey) => void;
+	resetToDefaults: () => void;
+	importKeybindings: (config: KeybindingConfig) => void;
+	exportKeybindings: () => KeybindingConfig;
+	openOverlay: (overlayId: string) => void;
+	closeOverlay: (overlayId: string) => void;
+	setLoadingProject: (loading: boolean) => void;
+	setIsRecording: (isRecording: boolean) => void;
+	validateKeybinding: (
+		key: ShortcutKey,
+		action: TActionWithOptionalArgs,
+	) => KeybindingConflict | null;
+	getKeybindingsForAction: (action: TActionWithOptionalArgs) => ShortcutKey[];
+	getKeybindingString: (ev: KeyboardEvent) => ShortcutKey | null;
+}
+
+function isDOMElement(element: EventTarget | null): element is HTMLElement {
+	return element instanceof HTMLElement;
+}
+
+export const useKeybindingsStore = create<KeybindingsState>()(
+	persist(
+		(set, get) => ({
+			keybindings: { ...defaultKeybindings },
+			isCustomized: false,
+			overlayDepth: 0,
+			openOverlayIds: [],
+			isLoadingProject: false,
+			isRecording: false,
+
+			openOverlay: (overlayId) =>
+				set((s) => {
+					const openOverlayIds = s.openOverlayIds.includes(overlayId)
+						? s.openOverlayIds
+						: [...s.openOverlayIds, overlayId];
+					const nextOverlayDepth = openOverlayIds.length;
+					return {
+						openOverlayIds,
+						overlayDepth: nextOverlayDepth,
+					};
+				}),
+			closeOverlay: (overlayId) =>
+				set((s) => {
+					const openOverlayIds = s.openOverlayIds.filter(
+						(id) => id !== overlayId,
+					);
+					const nextOverlayDepth = openOverlayIds.length;
+					return {
+						openOverlayIds,
+						overlayDepth: nextOverlayDepth,
+					};
+				}),
+			setLoadingProject: (loading) => {
+				set({ isLoadingProject: loading });
+			},
+
+			updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => {
+				set((state) => {
+					const newKeybindings = { ...state.keybindings };
+					newKeybindings[key] = action;
+
+					return {
+						keybindings: newKeybindings,
+						isCustomized: true,
+					};
+				});
+			},
+
+			removeKeybinding: (key: ShortcutKey) => {
+				set((state) => {
+					const newKeybindings = { ...state.keybindings };
+					delete newKeybindings[key];
+
+					return {
+						keybindings: newKeybindings,
+						isCustomized: true,
+					};
+				});
+			},
+
+			resetToDefaults: () => {
+				set({
+					keybindings: { ...defaultKeybindings },
+					isCustomized: false,
+				});
+			},
+
+			importKeybindings: (config: KeybindingConfig) => {
+				for (const [key] of Object.entries(config)) {
+					if (typeof key !== "string" || key.length === 0) {
+						throw new Error(`Invalid key format: ${key}`);
+					}
+				}
+				set({
+					keybindings: { ...config },
+					isCustomized: true,
+				});
+			},
+
+			exportKeybindings: () => {
+				return get().keybindings;
+			},
+
+			validateKeybinding: (
+				key: ShortcutKey,
+				action: TActionWithOptionalArgs,
+			) => {
+				const { keybindings } = get();
+				const existingAction = keybindings[key];
+
+				if (existingAction && existingAction !== action) {
+					return {
+						key,
+						existingAction,
+						newAction: action,
+					};
+				}
+
+				return null;
+			},
+			setIsRecording: (isRecording: boolean) => {
+				set({ isRecording });
+			},
+
+			getKeybindingsForAction: (action: TActionWithOptionalArgs) => {
+				const { keybindings } = get();
+				return Object.keys(keybindings).filter(
+					(key) => keybindings[key as ShortcutKey] === action,
+				) as ShortcutKey[];
+			},
+
+			getKeybindingString: (ev: KeyboardEvent) => {
+				return generateKeybindingString(ev) as ShortcutKey | null;
+			},
+		}),
+		{
+			name: "opencut-keybindings",
+			version: CURRENT_VERSION,
+			partialize: (state) => ({
+				keybindings: state.keybindings,
+				isCustomized: state.isCustomized,
+			}),
+			migrate: (persisted, version) =>
+				runMigrations({ state: persisted, fromVersion: version }),
+		},
+	),
+);
+
+function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
+	const target = ev.target;
+	const modifierKey = getActiveModifier(ev);
+	const key = getPressedKey(ev);
+	if (!key) return null;
+
+	if (modifierKey) {
+		if (
+			modifierKey === "shift" &&
+			isDOMElement(target) &&
+			isTypableDOMElement({ element: target as HTMLElement })
+		) {
+			return null;
+		}
+
+		return `${modifierKey}+${key}` as ShortcutKey;
+	}
+
+	if (
+		isDOMElement(target) &&
+		isTypableDOMElement({ element: target as HTMLElement })
+	)
+		return null;
+
+	return `${key}` as ShortcutKey;
+}
+
+function getPressedKey(ev: KeyboardEvent): string | null {
+	const key = (ev.key ?? "").toLowerCase();
+	const code = ev.code ?? "";
+
+	if (code === "Space" || key === " " || key === "spacebar" || key === "space")
+		return "space";
+
+	if (key.startsWith("arrow")) return key.slice(5);
+
+	if (key === "escape") return "escape";
+	if (key === "tab") return "tab";
+	if (key === "home") return "home";
+	if (key === "end") return "end";
+	if (key === "delete") return "delete";
+	if (key === "backspace") return "backspace";
+
+	if (code.startsWith("Key")) {
+		const letter = code.slice(3).toLowerCase();
+		if (letter.length === 1 && letter >= "a" && letter <= "z") return letter;
+	}
+
+	// Use physical key position for AZERTY and other non-QWERTY layouts
+	if (code.startsWith("Digit")) {
+		const digit = code.slice(5);
+		if (digit.length === 1 && digit >= "0" && digit <= "9") return digit;
+	}
+
+	const isDigit = key.length === 1 && key >= "0" && key <= "9";
+	if (isDigit) return key;
+
+	if (key === "/" || key === "." || key === "enter") return key;
+
+	return null;
+}
+
+function getActiveModifier(ev: KeyboardEvent): string | null {
+	const modifierKeys = {
+		ctrl: isAppleDevice() ? ev.metaKey : ev.ctrlKey,
+		alt: ev.altKey,
+		shift: ev.shiftKey,
+	};
+
+	const activeModifier = Object.keys(modifierKeys)
+		.filter((key) => modifierKeys[key as keyof typeof modifierKeys])
+		.join("+");
+
+	return activeModifier === "" ? null : activeModifier;
+}