From c19b2850e2672d4ed1ee4cbe1308b580cbbd9e6b Mon Sep 17 00:00:00 2001 From: Ayush Amawate Date: Thu, 15 Jan 2026 18:22:22 +0530 Subject: [PATCH 1/3] add keyboard shortcuts for renaming layers --- frontend/src/components/panels/Layers.svelte | 72 +++++++++++++++++++- 1 file changed, 70 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte index 8954721d7e..4d85f9246e 100644 --- a/frontend/src/components/panels/Layers.svelte +++ b/frontend/src/components/panels/Layers.svelte @@ -106,6 +106,7 @@ addEventListener("pointermove", draggingPointerMove); addEventListener("mousedown", draggingMouseDown); addEventListener("keydown", draggingKeyDown); + addEventListener("keydown", handleLayerPanelKeyDown); addEventListener("pointermove", clippingHover); addEventListener("keydown", clippingKeyPress); @@ -123,6 +124,7 @@ removeEventListener("pointermove", draggingPointerMove); removeEventListener("mousedown", draggingMouseDown); removeEventListener("keydown", draggingKeyDown); + removeEventListener("keydown", handleLayerPanelKeyDown); removeEventListener("pointermove", clippingHover); removeEventListener("keydown", clippingKeyPress); @@ -431,6 +433,58 @@ } } + function handleLayerPanelKeyDown(e: KeyboardEvent) { + // Only handle F2 if not currently editing a layer name + if (e.key === "F2" && !isAnyLayerBeingEdited()) { + // Find the first selected layer + const selectedLayer = layers.find((layer) => layer.entry.selected); + if (selectedLayer) { + e.preventDefault(); + onEditLayerName(selectedLayer); + } + } + } + + function isAnyLayerBeingEdited(): boolean { + return layers.some((layer) => layer.editingName); + } + + async function navigateToLayer(currentListing: LayerListingInfo, direction: "next" | "previous" | "up" | "down") { + // Save the current layer name + const inputElement = document.activeElement; + if (inputElement instanceof HTMLInputElement) { + const name = inputElement.value || ""; + editor.handle.setLayerName(currentListing.entry.id, name); + currentListing.entry.alias = name; + } + + // Find current layer index + const currentIndex = layers.findIndex((layer) => layer.entry.id === currentListing.entry.id); + if (currentIndex === -1) return; + + // Calculate target index based on direction + let targetIndex: number; + if (direction === "next" || direction === "down") { + targetIndex = currentIndex + 1; + if (targetIndex >= layers.length) return; // Don't wrap around at the end + } else { + // previous or up + targetIndex = currentIndex - 1; + if (targetIndex < 0) return; // Don't wrap around at the beginning + } + + const targetListing = layers[targetIndex]; + if (!targetListing) return; + + // Exit edit mode on current layer + currentListing.editingName = false; + draggable = true; + layers = layers; + + // Start edit mode on target layer + await onEditLayerName(targetListing); + } + function fileDragOver(e: DragEvent) { if (!draggable || !e.dataTransfer || !e.dataTransfer.types.includes("Files")) return; @@ -572,8 +626,22 @@ placeholder={listing.entry.implementationName} disabled={!listing.editingName} on:blur={() => onEditLayerNameDeselect(listing)} - on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)} - on:keydown={(e) => e.key === "Enter" && onEditLayerNameChange(listing, e)} + on:keydown={(e) => { + if (e.key === "Escape") { + onEditLayerNameDeselect(listing); + } else if (e.key === "Enter") { + onEditLayerNameChange(listing, e); + } else if (e.key === "Tab") { + e.preventDefault(); + navigateToLayer(listing, e.shiftKey ? "previous" : "next"); + } else if (e.key === "ArrowUp") { + e.preventDefault(); + navigateToLayer(listing, "up"); + } else if (e.key === "ArrowDown") { + e.preventDefault(); + navigateToLayer(listing, "down"); + } + }} on:change={(e) => onEditLayerNameChange(listing, e)} /> From fba93c0d2ce555010ccc94a0dadd8cf3c2f673dd Mon Sep 17 00:00:00 2001 From: Ayush Amawate Date: Sat, 24 Jan 2026 15:31:22 +0530 Subject: [PATCH 2/3] apply reviewed suggestions --- frontend/src/components/panels/Layers.svelte | 25 ++++++-------------- 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte index 4d85f9246e..962defba01 100644 --- a/frontend/src/components/panels/Layers.svelte +++ b/frontend/src/components/panels/Layers.svelte @@ -435,7 +435,7 @@ function handleLayerPanelKeyDown(e: KeyboardEvent) { // Only handle F2 if not currently editing a layer name - if (e.key === "F2" && !isAnyLayerBeingEdited()) { + if (e.key === "F2" && !layers.some((layer) => layer.editingName)) { // Find the first selected layer const selectedLayer = layers.find((layer) => layer.entry.selected); if (selectedLayer) { @@ -445,11 +445,7 @@ } } - function isAnyLayerBeingEdited(): boolean { - return layers.some((layer) => layer.editingName); - } - - async function navigateToLayer(currentListing: LayerListingInfo, direction: "next" | "previous" | "up" | "down") { + async function navigateToLayer(currentListing: LayerListingInfo, direction: "Up" | "Down") { // Save the current layer name const inputElement = document.activeElement; if (inputElement instanceof HTMLInputElement) { @@ -463,15 +459,8 @@ if (currentIndex === -1) return; // Calculate target index based on direction - let targetIndex: number; - if (direction === "next" || direction === "down") { - targetIndex = currentIndex + 1; - if (targetIndex >= layers.length) return; // Don't wrap around at the end - } else { - // previous or up - targetIndex = currentIndex - 1; - if (targetIndex < 0) return; // Don't wrap around at the beginning - } + const targetIndex = direction === "Down" ? currentIndex + 1 : currentIndex - 1; + if (targetIndex >= layers.length || targetIndex < 0) return; const targetListing = layers[targetIndex]; if (!targetListing) return; @@ -633,13 +622,13 @@ onEditLayerNameChange(listing, e); } else if (e.key === "Tab") { e.preventDefault(); - navigateToLayer(listing, e.shiftKey ? "previous" : "next"); + navigateToLayer(listing, e.shiftKey ? "Up" : "Down"); } else if (e.key === "ArrowUp") { e.preventDefault(); - navigateToLayer(listing, "up"); + navigateToLayer(listing, "Up"); } else if (e.key === "ArrowDown") { e.preventDefault(); - navigateToLayer(listing, "down"); + navigateToLayer(listing, "Down"); } }} on:change={(e) => onEditLayerNameChange(listing, e)} From e596d2a736f613daf9b0ec79414b31f9aac58a40 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Wed, 18 Feb 2026 02:08:24 -0800 Subject: [PATCH 3/3] Add todo comment --- frontend/src/components/panels/Layers.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte index 962defba01..9a1e8e5243 100644 --- a/frontend/src/components/panels/Layers.svelte +++ b/frontend/src/components/panels/Layers.svelte @@ -434,6 +434,8 @@ } function handleLayerPanelKeyDown(e: KeyboardEvent) { + // TODO: Handle this F2 shortcut detection in the backend, not frontend, so it uses the standard key binding system + // Only handle F2 if not currently editing a layer name if (e.key === "F2" && !layers.some((layer) => layer.editingName)) { // Find the first selected layer