From 8397ad4a4ad9eab80ad3f875a9cd78c97de3d71c Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 18 Jul 2023 23:17:32 +0200 Subject: [PATCH 01/15] Don't update saturation based on parsed color --- .../lib/uui-color-area.element.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index 0bb2c8565..90dea824a 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -150,15 +150,25 @@ export class UUIColorAreaElement extends LitElement { // TODO: Can we move the parsing of a color string to shared utility function? const parsed = colord(newVal); + console.log("newVal", newVal); + if (parsed.isValid()) { const { h, s, l } = parsed.toHsl(); + console.log("value saturation", s); + + // Test + if (s === 0) { + console.log("parsed", parsed.toHsl()); + } + this.hue = h; - this.saturation = s; + //this.saturation = s; this.lightness = l; this.brightness = this.getBrightness(l); } } catch (e) { + console.log("value err", e); // TODO: Should we log this? console.error('Something went wrong parsing the color string.', e); } @@ -245,6 +255,9 @@ export class UUIColorAreaElement extends LitElement { a: this.alpha / 100, }); + console.log("syncValues saturation", this.saturation); + console.log("syncValues value", color.toRgbString()); + this._value = color.toRgbString(); this.dispatchEvent(new UUIColorAreaEvent(UUIColorAreaEvent.CHANGE)); @@ -271,6 +284,8 @@ export class UUIColorAreaElement extends LitElement { const gridHandleX = this.saturation; const gridHandleY = 100 - this.brightness; + console.log("gridHandleX", gridHandleX); + return html`
Date: Thu, 28 Sep 2023 16:19:25 +0200 Subject: [PATCH 02/15] Workaround to update color area when hue slider change --- .../lib/uui-color-area.element.ts | 13 +++++++--- .../lib/uui-color-picker.element.ts | 26 ++++++++++++++++--- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index 90dea824a..1d3a3a945 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -146,23 +146,28 @@ export class UUIColorAreaElement extends LitElement { this._value = newVal; this.requestUpdate('value', oldVal); + console.log("newVal", newVal); + try { // TODO: Can we move the parsing of a color string to shared utility function? const parsed = colord(newVal); - console.log("newVal", newVal); - if (parsed.isValid()) { const { h, s, l } = parsed.toHsl(); - console.log("value saturation", s); + console.log("h, s, l", h, s, l); // Test if (s === 0) { console.log("parsed", parsed.toHsl()); } + + if (h !== 0) { + this.hue = h; + } + + console.log("hue", this.hue); - this.hue = h; //this.saturation = s; this.lightness = l; this.brightness = this.getBrightness(l); diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts index 18e51e9c5..c6f0e9ad2 100644 --- a/packages/uui-color-picker/lib/uui-color-picker.element.ts +++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts @@ -406,6 +406,8 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { this._swatches?.resetSelection(); const element = event.target as UUIColorSliderElement; + console.log("handleHueChange", element.value); + const newColor: HslaColor = { h: element.value, s: this.saturation, @@ -520,15 +522,29 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { } setColor(colorString: string | HslaColor) { - this._colord = new Colord(colorString); + console.log("setColor", colorString); + + const colord = new Colord(colorString); + + console.log("colord", colord); - const { h, l, s, a } = this._colord.toHsl(); + const { h, s, l, a } = colord.toHsl(); this.hue = h; this.saturation = s; this.lightness = l; this.alpha = this.opacity ? a * 100 : 100; + const hslaColor = colorString as HslaColor; + console.log("hslaColor", hslaColor); + + // Workaround as hue isn't correct when changing hue slider, but Colord parse hue value as zero when color is black. + if (hslaColor && hslaColor.h) { + this.hue = hslaColor.h; + } + + this._colord = colord; + this._syncValues(); this.dispatchEvent( @@ -558,8 +574,12 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { 'color-picker--disabled': this.disabled, })} aria-disabled=${this.disabled ? 'true' : 'false'}> - + + ${Math.round(this.hue)}
Date: Thu, 28 Sep 2023 16:40:18 +0200 Subject: [PATCH 03/15] Fix typo --- packages/uui-color-slider/lib/uui-color-slider.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/uui-color-slider/lib/uui-color-slider.element.ts b/packages/uui-color-slider/lib/uui-color-slider.element.ts index 10f8c47f0..cce83ff6d 100644 --- a/packages/uui-color-slider/lib/uui-color-slider.element.ts +++ b/packages/uui-color-slider/lib/uui-color-slider.element.ts @@ -330,7 +330,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) { this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE)); } - get ccsPropCurrentValue() { + get cssPropCurrentValue() { return this.value === 0 ? this.vertical ? 100 @@ -370,7 +370,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
${Math.round(this.value)}`; From dd340627d1c7b07db22fba844705e9b6ea0b1b45 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 28 Sep 2023 16:53:47 +0200 Subject: [PATCH 04/15] Don't change opacity of gradient in opacity-slider as value change and value itself may contain alpha --- .../lib/uui-color-picker.element.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts index c6f0e9ad2..fc4bbe371 100644 --- a/packages/uui-color-picker/lib/uui-color-picker.element.ts +++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts @@ -560,6 +560,23 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { return this.uppercase ? string.toUpperCase() : string.toLowerCase(); } + /** Generates a hex string from HSL values. Hue must be 0-360. All other arguments must be 0-100. */ + private getHexString( + hue: number, + saturation: number, + lightness: number, + alpha = 100 + ) { + const color = colord( + `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})` + ); + if (!color.isValid()) { + return ''; + } + + return color.toHex(); + } + private _syncValues() { this.inputValue = this.getFormattedValue(this.format); this.value = this.inputValue; @@ -595,7 +612,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { class="opacity-slider" .value=${Math.round(this.alpha)} type="opacity" - .color=${this.value} + .color=${this.getHexString(this.hue, this.saturation, this.lightness)} @change=${this.handleAlphaChange}> ` From 6468c605b8385e15e7568e87f81647cbee4c032c Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 28 Sep 2023 18:38:26 +0200 Subject: [PATCH 05/15] Make handle opacity based on alpha --- .../uui-color-area/lib/uui-color-area.element.ts | 14 +++----------- .../lib/uui-color-picker.element.ts | 5 ++--- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index 1d3a3a945..82f279911 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -146,31 +146,23 @@ export class UUIColorAreaElement extends LitElement { this._value = newVal; this.requestUpdate('value', oldVal); - console.log("newVal", newVal); - try { // TODO: Can we move the parsing of a color string to shared utility function? const parsed = colord(newVal); if (parsed.isValid()) { - const { h, s, l } = parsed.toHsl(); + const { h, s, l, a } = parsed.toHsl(); - console.log("h, s, l", h, s, l); + console.log("h, s, l, a", h, s, l, a); - // Test - if (s === 0) { - console.log("parsed", parsed.toHsl()); - } - if (h !== 0) { this.hue = h; } - console.log("hue", this.hue); - //this.saturation = s; this.lightness = l; this.brightness = this.getBrightness(l); + this.alpha = a * 100; } } catch (e) { console.log("value err", e); diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts index fc4bbe371..e1bb346b1 100644 --- a/packages/uui-color-picker/lib/uui-color-picker.element.ts +++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts @@ -406,8 +406,6 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { this._swatches?.resetSelection(); const element = event.target as UUIColorSliderElement; - console.log("handleHueChange", element.value); - const newColor: HslaColor = { h: element.value, s: this.saturation, @@ -684,7 +682,8 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { swatch => html`` + .value=${swatch}> + ` )} `; } From ea6af275221347b1136199260809942efb7002ed Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Fri, 29 Sep 2023 08:54:53 +0200 Subject: [PATCH 06/15] Clear console --- packages/uui-color-picker/lib/uui-color-picker.element.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts index e1bb346b1..1ee6b3f25 100644 --- a/packages/uui-color-picker/lib/uui-color-picker.element.ts +++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts @@ -520,12 +520,9 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { } setColor(colorString: string | HslaColor) { - console.log("setColor", colorString); const colord = new Colord(colorString); - console.log("colord", colord); - const { h, s, l, a } = colord.toHsl(); this.hue = h; @@ -534,9 +531,8 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { this.alpha = this.opacity ? a * 100 : 100; const hslaColor = colorString as HslaColor; - console.log("hslaColor", hslaColor); - // Workaround as hue isn't correct when changing hue slider, but Colord parse hue value as zero when color is black. + // Workaround as hue isn't correct after changing hue slider, but Colord parse hue value as zero when color is black. if (hslaColor && hslaColor.h) { this.hue = hslaColor.h; } From 2570972f73bbe011919328f26d0d893a290581ed Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Fri, 29 Sep 2023 08:56:30 +0200 Subject: [PATCH 07/15] Clear console --- packages/uui-color-area/lib/uui-color-area.element.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index 82f279911..3a0eaf473 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -153,8 +153,6 @@ export class UUIColorAreaElement extends LitElement { if (parsed.isValid()) { const { h, s, l, a } = parsed.toHsl(); - console.log("h, s, l, a", h, s, l, a); - if (h !== 0) { this.hue = h; } @@ -165,7 +163,6 @@ export class UUIColorAreaElement extends LitElement { this.alpha = a * 100; } } catch (e) { - console.log("value err", e); // TODO: Should we log this? console.error('Something went wrong parsing the color string.', e); } From 5eec6bd61be01d6ebf45e438c43772b86f450df2 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Fri, 29 Sep 2023 08:57:19 +0200 Subject: [PATCH 08/15] Clear console --- packages/uui-color-area/lib/uui-color-area.element.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index 3a0eaf473..e57dcdf61 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -249,9 +249,6 @@ export class UUIColorAreaElement extends LitElement { a: this.alpha / 100, }); - console.log("syncValues saturation", this.saturation); - console.log("syncValues value", color.toRgbString()); - this._value = color.toRgbString(); this.dispatchEvent(new UUIColorAreaEvent(UUIColorAreaEvent.CHANGE)); @@ -278,8 +275,6 @@ export class UUIColorAreaElement extends LitElement { const gridHandleX = this.saturation; const gridHandleY = 100 - this.brightness; - console.log("gridHandleX", gridHandleX); - return html`
Date: Fri, 29 Sep 2023 08:59:59 +0200 Subject: [PATCH 09/15] Add comment --- packages/uui-color-area/lib/uui-color-area.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index e57dcdf61..370551127 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -153,6 +153,7 @@ export class UUIColorAreaElement extends LitElement { if (parsed.isValid()) { const { h, s, l, a } = parsed.toHsl(); + // Update hue from parsed color, but when color is black, value from hue slider may be different from zero. if (h !== 0) { this.hue = h; } From 6d26f02e294db2ce168530c0c5549b86353a58b8 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Fri, 29 Sep 2023 11:30:52 +0200 Subject: [PATCH 10/15] Remove output of hue value --- packages/uui-color-picker/lib/uui-color-picker.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts index 1ee6b3f25..84998a9ca 100644 --- a/packages/uui-color-picker/lib/uui-color-picker.element.ts +++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts @@ -590,7 +590,6 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { .hue="${Math.round(this.hue)}" @change=${this.handleGridChange}> - ${Math.round(this.hue)}
Date: Sat, 14 Oct 2023 15:18:24 +0200 Subject: [PATCH 11/15] Update saturation --- packages/uui-color-area/lib/uui-color-area.element.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index 370551127..819057a88 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -158,7 +158,10 @@ export class UUIColorAreaElement extends LitElement { this.hue = h; } - //this.saturation = s; + if (s !== 0) { + this.saturation = s; + } + this.lightness = l; this.brightness = this.getBrightness(l); this.alpha = a * 100; From 3bdf47a5035f826906a938577ea127fd5ac1aff0 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 14 Oct 2023 16:06:30 +0200 Subject: [PATCH 12/15] Don't update saturation --- packages/uui-color-area/lib/uui-color-area.element.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index 819057a88..370551127 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -158,10 +158,7 @@ export class UUIColorAreaElement extends LitElement { this.hue = h; } - if (s !== 0) { - this.saturation = s; - } - + //this.saturation = s; this.lightness = l; this.brightness = this.getBrightness(l); this.alpha = a * 100; From 429f299351ab473f6667cfb395b7cd8a428776c4 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 5 Feb 2024 10:40:54 +0100 Subject: [PATCH 13/15] Remove commented line --- packages/uui-color-area/lib/uui-color-area.element.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index c0a49da9d..08a6eec62 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -103,8 +103,7 @@ export class UUIColorAreaElement extends LitElement { if (h !== 0) { this.hue = h; } - - //this.saturation = s; + this.lightness = l; this.brightness = this.getBrightness(l); this.alpha = a * 100; From 49e54c5c228bba929b97f6a0d09590b2c8b40602 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 5 Feb 2024 11:59:39 +0100 Subject: [PATCH 14/15] Remove unused parameter --- packages/uui-color-area/lib/uui-color-area.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index 08a6eec62..feef490f7 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -97,7 +97,7 @@ export class UUIColorAreaElement extends LitElement { const parsed = colord(newVal); if (parsed.isValid()) { - const { h, s, l, a } = parsed.toHsl(); + const { h, l, a } = parsed.toHsl(); // Update hue from parsed color, but when color is black, value from hue slider may be different from zero. if (h !== 0) { From f9598d5db27bf666a67f9a7e3e935b3f7925ef32 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 5 Feb 2024 12:58:29 +0100 Subject: [PATCH 15/15] Run linter --- packages/uui-color-area/lib/uui-color-area.element.ts | 2 +- .../uui-color-picker/lib/uui-color-picker.element.ts | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts index feef490f7..998eace0e 100644 --- a/packages/uui-color-area/lib/uui-color-area.element.ts +++ b/packages/uui-color-area/lib/uui-color-area.element.ts @@ -103,7 +103,7 @@ export class UUIColorAreaElement extends LitElement { if (h !== 0) { this.hue = h; } - + this.lightness = l; this.brightness = this.getBrightness(l); this.alpha = a * 100; diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts index e4ff48a6a..cb77e03ee 100644 --- a/packages/uui-color-picker/lib/uui-color-picker.element.ts +++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts @@ -360,7 +360,6 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { } setColor(colorString: string | HslaColor) { - const colord = new Colord(colorString); const { h, s, l, a } = colord.toHsl(); @@ -376,7 +375,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { if (hslaColor && hslaColor.h) { this.hue = hslaColor.h; } - + this._colord = colord; this._syncValues(); @@ -447,7 +446,11 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) { class="opacity-slider" .value=${Math.round(this.alpha)} type="opacity" - .color=${this.getHexString(this.hue, this.saturation, this.lightness)} + .color=${this.getHexString( + this.hue, + this.saturation, + this.lightness + )} ?disabled=${this.disabled} @change=${this.handleAlphaChange}>