From 24622489ded9d309674bb8d3afcdce387768969d Mon Sep 17 00:00:00 2001 From: Ayush Amawate Date: Thu, 15 Jan 2026 18:22:22 +0530 Subject: [PATCH 1/2] 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 9892932e5b..f2472a70ee 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); @@ -490,6 +492,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; @@ -655,8 +709,22 @@ placeholder={listing.entry.reference.data} 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 ea20e6de1adb801827eb95412d0484c8681eab3f Mon Sep 17 00:00:00 2001 From: Ayush Amawate Date: Sat, 24 Jan 2026 15:31:22 +0530 Subject: [PATCH 2/2] 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 f2472a70ee..94086841c6 100644 --- a/frontend/src/components/panels/Layers.svelte +++ b/frontend/src/components/panels/Layers.svelte @@ -494,7 +494,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) { @@ -504,11 +504,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) { @@ -522,15 +518,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; @@ -716,13 +705,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)}