Skip to content

2d-color-picker: code editor support and other improvements - #9161

Open
mxmou wants to merge 9 commits into
ScratchAddons:masterfrom
mxmou:2d-color-picker
Open

2d-color-picker: code editor support and other improvements#9161
mxmou wants to merge 9 commits into
ScratchAddons:masterfrom
mxmou:2d-color-picker

Conversation

@mxmou

@mxmou mxmou commented Aug 11, 2026

Copy link
Copy Markdown
Member

Resolves #2017
Resolves #7253

Changes

Code editor

The addon now works in the code editor. I moved UI code to a new ShadePicker class which is shared between the code editor and costume editor versions.

image

UI improvements

  • Moving the 2D slider now immediately changes the color of the selected object in the paint editor and the background gradient of the hue slider. Similarly, moving the hue slider immediately updates the background gradient of the 2D slider. This is consistent with the behavior of the vanilla color picker.
  • Fixed dragging not working well on touch screens.
  • Fixed the handle moving slightly on drag start if the mouse wasn't at the center of the handle.
  • The draggable handle now stays mostly inside the 2D slider, even if the saturation or brightness is 0 or 100. Screenshot of 1.45.2:
    image
    And this PR:
    image
    This was also done for consistency with Scratch's sliders. The background gradient has been updated so that the center of the handle is still on the correct shade.

Other improvements

  • The costume editor code now interacts directly with Scratch's color picker component instead of using Redux. This is much simpler than the previous implementation.
  • Added support for dynamic enable/disable.

Tests

Tested on Edge (Windows) and mobile Firefox (Android).

mxmou and others added 8 commits August 11, 2026 11:00
@mxmou mxmou self-assigned this Aug 11, 2026
@mxmou
mxmou requested a review from WorldLanguages as a code owner August 11, 2026 12:03
@mxmou mxmou added the scope: addon Related to one or multiple addons label Aug 11, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This SVG file is intentionally not minified - it contains a comment explaining how I calculated the offsets for gradient stops.

"name": "2D color picker",
"description": "Replaces saturation and brightness sliders in the costume editor with a 2D color picker. Hold Shift while dragging the cursor to change the values on a single axis.",
"description": "Replaces saturation and brightness sliders with a 2D color picker. Hold Shift while dragging the cursor to change the values on a single axis.",
"tags": ["editor", "costumeEditor"],

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't sure if I should add the codeEditor tag. The hex color picker addon doesn't have it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: addon Related to one or multiple addons

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2D color picker touch issues 2D color picker in code editor

1 participant