Skip to content

fix(Util): preserve alpha of the named color "transparent"#2056

Open
spokodev wants to merge 1 commit into
konvajs:masterfrom
spokodev:fix/named-color-transparent-alpha
Open

fix(Util): preserve alpha of the named color "transparent"#2056
spokodev wants to merge 1 commit into
konvajs:masterfrom
spokodev:fix/named-color-transparent-alpha

Conversation

@spokodev

Copy link
Copy Markdown
Contributor

Problem

Konva.Util.colorToRGBA('transparent') returns an opaque color:

Konva.Util.colorToRGBA('transparent');
// { r: 255, g: 255, b: 255, a: 1 }   ← a should be 0

The named-color table already defines it correctly with a zero alpha:

// src/Util.ts
transparent: [255, 255, 255, 0],

but _namedColorToRBA hard-codes a: 1 and ignores the fourth element:

return { r: c[0], g: c[1], b: c[2], a: 1 };

Every other parser honors alpha — #0000 and rgba(0,0,0,0) both correctly
return a: 0. Named colors are the only branch that drops it, and
transparent is the only named color that carries a non-1 alpha, so it is the
one value this branch gets wrong.

Impact

colorToRGBA feeds Tween color interpolation (fill / stroke / shadowColor).
Tweening to or from 'transparent' — the canonical fade in/out idiom —
computes an alpha delta of 1 - 1 = 0, so the shape never fades; it snaps to
fully opaque white (255, 255, 255) instead of fading out.

Fix

Honor the alpha in the color table, mirroring the hex/rgba parsers:

a: c.length > 3 ? c[3] : 1,

Test

Added a colorToRGBA() case asserting transparent → a: 0 (and red → a: 1
so the default-alpha path stays covered). Fails on master, passes with the fix.

Util.colorToRGBA('transparent') returned { r: 255, g: 255, b: 255, a: 1 }
instead of a: 0. The named-color table defines COLORS.transparent as
[255, 255, 255, 0], but _namedColorToRBA hard-coded a: 1 and ignored the
fourth element, unlike the hex and rgba parsers which both honor alpha.

As a result any tween to/from 'transparent' (the canonical fade in/out
idiom) computes an alpha delta of 0, so the shape never fades and instead
snaps to fully opaque white.
@spokodev

Copy link
Copy Markdown
Contributor Author

Heads-up: the failing fmt-check here is unrelated to this PR — it flags test/unit/DragAndDrop-test.ts, which this change doesn't touch and which is already unformatted on master, so prettier --check . currently fails on any branch. This PR's own files (src/Util.ts, test/unit/Util-test.ts) pass prettier --check.

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.

1 participant