Skip to content

Conversation

@Hell1213
Copy link

Description

Fixes #10252 - Color picker falls apart after resetting the canvas on the new mobile UI

This PR addresses a critical mobile UI bug where the color picker would display incorrectly after canvas reset, showing only basic color swatches instead of the full expanded interface.

Root Cause

The issue was caused by two problems:

  1. State Reset: During canvas reset (actionClearCanvas), the stylesPanelMode was being reset to "full" instead of preserving the current mode ("mobile" for mobile devices)
  2. Width Measurement: The MobileShapeActions component was using synchronous width measurement that could fail during re-renders after canvas reset

Solution

1. Preserve stylesPanelMode during canvas reset

  • Modified actionClearCanvas to preserve the current stylesPanelMode value
  • This ensures mobile devices maintain stylesPanelMode: "mobile" which is required for proper color picker display

2. Improve width measurement reliability

  • Added proper useEffect with ResizeObserver for accurate width measurement
  • Added fallback for test environments where ResizeObserver is not available
  • This prevents layout calculation errors that could break the mobile UI

Before/After Screenshots

Before (Broken)

The color picker shows only basic horizontal color swatches with "Stroke" text - broken layout after canvas reset.
Screenshot from 2025-10-26 14-19-48

After (Fixed)

The color picker displays the full expanded interface with proper sections: Background, Colors, Shades, Hex code - working correctly after canvas reset.
=>

Screencast.from.2025-10-26.14-29-36.mp4

Testing

  • All existing tests pass (1034 passed, 47 skipped)
  • Mobile color picker works correctly after canvas reset
  • Desktop functionality remains unaffected
  • No regressions in other mobile UI components

Technical Details

The fix ensures that:

  1. Mobile devices always maintain proper stylesPanelMode state
  2. Color picker components receive correct compactMode props
  3. Width measurements are accurate and reliable
  4. Test environments handle missing browser APIs gracefully

Closes #10252

@vercel
Copy link

vercel bot commented Oct 26, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
excalidraw Ready Ready Preview Oct 27, 2025 7:16am

@vercel
Copy link

vercel bot commented Oct 26, 2025

@Hell1213 is attempting to deploy a commit to the Excalidraw Team on Vercel.

A member of the Team first needs to authorize it.

@zsviczian
Copy link
Collaborator

based on my testing, the solution does work.
@Hell1213, can you remove excalidraw.code-workspace from the commit?

…olor picker UI corruption

- Preserve stylesPanelMode in actionClearCanvas to maintain mobile UI state
- Add ResizeObserver to MobileShapeActions for proper width measurement
- Fixes issue where color picker would show broken layout after canvas reset on mobile
- Ensures mobile color picker always displays full interface with proper styling

Fixes excalidraw#10252
@Hell1213
Copy link
Author

hey @zsviczian Thanks for pointing that out! I’ve removed the excalidraw.code-workspace file and updated the PR.

@Hell1213 Hell1213 changed the title Fix/mobile color picker reset issue fix: preserve stylesPanelMode during canvas reset to prevent Oct 27, 2025
@Hell1213 Hell1213 changed the title fix: preserve stylesPanelMode during canvas reset to prevent fix: preserve stylesPanelMode during canvas reset to prevent mobile color picker UI corruption Oct 27, 2025
@Hell1213
Copy link
Author

@dwelle pr is ready to review

@zsviczian
Copy link
Collaborator

@ryan-di, this looks like a correct solution to #10252. It would be important to push this (or another solution in) before the new mobile UI is moved from staging to live.

@ryan-di
Copy link
Member

ryan-di commented Oct 28, 2025

@Hell1213 Thanks for working on this! We've moved away from stylesPanelMode property in app state in the refactor here #10178 From my testing, it fixes #10252

/cc @zsviczian @dwelle

zsviczian added a commit to zsviczian/excalidraw that referenced this pull request Nov 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Color picker falls apart after resetting the canvas on the new mobile UI

3 participants