Current Issue
The structure panel’s auto-scroll behavior currently centers selected items regardless of context, which creates significant usability problems:
- Accidental clicks: When clicking on already-visible items in the structure panel, the auto-scroll moves the element away from the user’s cursor position, often resulting in unintended clicks on other elements
- Disruptive workflow: The constant repositioning interrupts the user’s flow when working directly within the structure panel
- Unnecessary movement: Elements that are already in view don’t need to be repositioned
Proposed Solution
Implement conditional auto-scroll logic based on selection context:
When to Scroll (Canvas → Structure Panel)
- Selection from canvas: Auto-scroll and expand the structure panel to reveal the selected element
- Out-of-view elements: Scroll only when the target element is outside the visible area (off-screen above or below)
- Collapsed parents: Expand parent containers to reveal nested elements when selected from canvas
When NOT to Scroll (Structure Panel → Structure Panel)
- Direct panel selection: No scrolling when clicking directly on visible items in the structure panel
- Already visible elements: Skip repositioning if the element is currently in view
Example Implementation Logic
if (selectedFrom === "canvas") {
if (elementNotInView || parentCollapsed) {
scrollIntoView();
expandParentIfNeeded();
}
} else if (selectedFrom === "structurePanel") {
// No scrolling in structure panel
// Canvas can still scroll to show off-screen elements
}
This enhancement would significantly improve the user experience by making the auto-scroll behavior more intelligent and less intrusive while preserving its core functionality.
