webstudio-is / webstudio

Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.
https://webstudio.is
GNU Affero General Public License v3.0
4.8k stars 565 forks source link

Canvas instance selection bugs #4095

Open johnsicili opened 1 month ago

johnsicili commented 1 month ago

The canvas has seemed to become buggy. I'm noticing several issues.

  1. When quickly selecting different instances, the instance is not selected. It only selects them when you don't click quickly.
  2. The navigator closes when slightly dragging an instance (see here https://github.com/webstudio-is/webstudio/issues/4095#issuecomment-2338814814) New issue opened https://github.com/webstudio-is/webstudio/issues/4158
  3. When you click into an instance to edit it, such as a paragraph, the hover outline no longer shows when you hover over other instances. Only in the navigator does the hover show.
  4. Dragging spacing is not working unless you click and hold for a second then drag. While this is not a canvas bug, it may be solved with code from item 1.
  5. The navigator sometimes shows the state as if an instance is being dragged but no instance is being dragged. Fixed (issue was clicking on the icon in instance)

Item 4 issue: https://github.com/user-attachments/assets/a6334cb7-1c0c-4332-a127-cd752aa32135

Instance selection issues: https://github.com/user-attachments/assets/edbb1e74-bb2f-4981-b942-8a02220e3bd1 https://github.com/user-attachments/assets/4d0bf08c-6309-45c2-aea5-ce1d6a2f9977

Sorry about movie format, was trying a new setup

johnsicili commented 1 month ago

Repro! Slightly drag the instance, navigator opens/closes

https://github.com/user-attachments/assets/57c6bef0-f057-4d58-81e9-377e0d858ce0

johnsicili commented 1 month ago
  1. No outline shows when selecting instances. (No repro yet)

https://github.com/user-attachments/assets/10043991-a70b-446b-9993-2fb31e3fa529