Bugfix: How to fix side panel resize not working when cursor moves o...

Documentation for Sessions

🐛 Bugfix: How to fix side panel resize not working when cursor moves o...

📋 Decision Context

Question:

How to fix side panel resize not working when cursor moves outside panel?

Task: Session 31.2: Fix panel resize with document listeners

🎯 Decision Made

Chosen:

Use document.addEventListener for global mouse tracking instead of Angular event bindings

Options Considered:

Keep overlay with Angular (mousemove) events
Use document.addEventListener for global tracking
Use RxJS fromEvent operators

💭 Reasoning

Angular event bindings like (mousemove) only fire when the cursor is over that specific element. When users drag resize handles, the cursor often moves faster than the UI can update, leaving the element area. document.addEventListener captures mouse events globally, ensuring resize works smoothly even when cursor leaves the panel. This is the same pattern used in space-editor-sidebar and modular-universe-builder.

📁 Files Involved

libs/libs-space/universe-architect/src/lib/components/architect-side-panel/architect-side-panel.component.ts
libs/libs-space/universe-architect/src/lib/components/architect-side-panel/architect-side-panel.component.html

🔗 Related

Decision ID: dev_1767903422598_fxuhzqp
Session: 31
Workspace: editor2

Auto-generated by MCP Smart Consolidation