Problem/Motivation

When working with the Navigator tree panel, users currently need to single-click a tree node to open the settings sidebar, or hover over a node to see a brief highlight on the corresponding canvas element. There is no way to quickly locate a node's position on the builder/scaffold canvas without manually scrolling.

Proposed resolution

Add double-click support to Navigator tree nodes. When a user double-clicks a tree node (component, block, or slot), the corresponding element on the currently visible canvas panel (Builder, Wireframe, or Scaffold) is scrolled into view and briefly highlighted.

Implementation approach (client-side only, panel_tree.js):
1. Capture-phase click interception — A capture-phase click listener on .db-tree intercepts clicks before HTMX processes them. A 200ms debounce timer distinguishes single-click from double-click on the same node.
2. Double-click action — scrollToNodeAndHighlight():
- Finds the matching element in the visible non-tree view panel using the existing data-node-id / data-slot-id attributes
- Calls element.scrollIntoView({ behavior: 'smooth', block: 'center' })
- Adds .db-tree--selected class (purple/fuchsia outline, same as hover highlight) for 2 seconds
- Uses offsetParent check to only scroll the currently active/visible panel (since Shoelace tabs hide inactive panes via display: none CSS class, not the [hidden] attribute)
3. Single-click action (debounce timer expires) — For component/block nodes: programmatically fires the HTMX GET request (htmx.ajax()) and opens the settings sidebar (handleSecondDrawer()), preserving existing behavior. For slot nodes: toggles collapse/expand (toggleNode()).
4. Chevron button clicks — Still excluded from interception, so existing expand/collapse behavior is unaffected.

User interface changes

N/A

API changes

N/A

Data model changes

N/A

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

ipumpkin created an issue. See original summary.

ipumpkin’s picture

Status: Active » Needs review
mogtofu33’s picture

Assigned: Unassigned » mogtofu33