feat(reactive-controllers): Migrate to Colorjs from Tinycolor

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 3bb8a93772e35ef3bb5e156f76b7c8bd72786144
+        default: e7d473fdc54f656c3cc077b7c99d6c1cd8c4a8de
     wireit_cache_name:
         type: string
         default: wireit

packages/color-area/src/ColorArea.ts

@@ -29,10 +29,11 @@ import { streamingListener } from '@spectrum-web-components/base/src/streaming-l
 import { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';
 import type { ColorHandle } from '@spectrum-web-components/color-handle';
 import '@spectrum-web-components/color-handle/sp-color-handle.js';
+
 import {
     ColorController,
-    ColorValue,
-} from '@spectrum-web-components/reactive-controllers/src/Color.js';
+    ColorTypes,
+} from '@spectrum-web-components/reactive-controllers/src/ColorController.js';
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 import {
     isAndroid,
@@ -72,18 +73,7 @@ export class ColorArea extends SpectrumElement {
 
     private languageResolver = new LanguageResolutionController(this);
 
-    private colorController = new ColorController(this, {
-        extractColorFromState: () => ({
-            h: this.hue,
-            s: this.x,
-            v: this.y,
-        }),
-        applyColorToState: ({ s, v }) => {
-            this._x = s;
-            this._y = v;
-            this.requestUpdate();
-        },
-    });
+    private colorController = new ColorController(this, { manageAs: 'hsv' });
 
     @property({ type: Number })
     public get hue(): number {
@@ -95,16 +85,16 @@ export class ColorArea extends SpectrumElement {
     }
 
     @property({ type: String })
-    public get value(): ColorValue {
-        return this.colorController.color;
+    public get value(): ColorTypes {
+        return this.colorController.colorValue;
     }
 
     @property({ type: String })
-    public get color(): ColorValue {
-        return this.colorController.color;
+    public get color(): ColorTypes {
+        return this.colorController.colorValue;
     }
 
-    public set color(color: ColorValue) {
+    public set color(color: ColorTypes) {
         this.colorController.color = color;
     }
 
@@ -113,48 +103,48 @@ export class ColorArea extends SpectrumElement {
 
     @property({ type: Number })
     public get x(): number {
-        return this._x;
+        return this.colorController.color.hsv.s / 100;
     }
 
     public set x(x: number) {
         if (x === this.x) {
             return;
         }
         const oldValue = this.x;
-        this._x = x;
         if (this.inputX) {
             // Use the native `input[type='range']` control to validate this value after `firstUpdate`
             this.inputX.value = x.toString();
-            this._x = this.inputX.valueAsNumber;
+            this.colorController.color.set(
+                's',
+                this.inputX.valueAsNumber * 100
+            );
+        } else {
+            this.colorController.color.set('s', x * 100);
         }
         this.requestUpdate('x', oldValue);
-        this.colorController.applyColorFromState();
     }
 
-    private _x = 1;
-
     @property({ type: Number })
     public get y(): number {
-        return this._y;
+        return this.colorController.color.hsv.v / 100;
     }
 
     public set y(y: number) {
         if (y === this.y) {
             return;
         }
         const oldValue = this.y;
-        this._y = y;
         if (this.inputY) {
             // Use the native `input[type='range']` control to validate this value after `firstUpdate`
             this.inputY.value = y.toString();
-            this._y = this.inputY.valueAsNumber;
+            this.colorController.color.set(
+                'v',
+                this.inputY.valueAsNumber * 100
+            );
         }
         this.requestUpdate('y', oldValue);
-        this.colorController.applyColorFromState();
     }
 
-    private _y = 1;
-
     @property({ type: Number })
     public step = 0.01;
 
@@ -164,7 +154,7 @@ export class ColorArea extends SpectrumElement {
     @query('[name="y"]')
     public inputY!: HTMLInputElement;
 
-    private altered = 0;
+    public altered = 0;
 
     private activeKeys = new Set();
 
@@ -201,6 +191,7 @@ export class ColorArea extends SpectrumElement {
     private handleKeydown(event: KeyboardEvent): void {
         const { code } = event;
         this.focused = true;
+
         this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(
             (key) => !!key
         ).length;
@@ -262,7 +253,6 @@ export class ColorArea extends SpectrumElement {
         this.y = Math.min(1, Math.max(this.y + deltaY, 0));
 
         this.colorController.savePreviousColor();
-        this.colorController.applyColorFromState();
 
         if (deltaX != 0 || deltaY != 0) {
             this._valueChanged = true;
@@ -295,7 +285,6 @@ export class ColorArea extends SpectrumElement {
         const { valueAsNumber, name } = event.target;
 
         this[name as 'x' | 'y'] = valueAsNumber;
-        this.colorController.applyColorFromState();
     }
 
     private handleChange(event: Event & { target: HTMLInputElement }): void {
@@ -332,8 +321,8 @@ export class ColorArea extends SpectrumElement {
         this._valueChanged = false;
 
         this.x = x;
-        this.y = 1 - y;
-        this.colorController.applyColorFromState();
+        this.y = y;
+
         this.dispatchEvent(
             new Event('input', {
                 bubbles: true,
@@ -390,7 +379,7 @@ export class ColorArea extends SpectrumElement {
             Math.min(1, (offsetY - minOffsetY) / height)
         );
 
-        return [this.isLTR ? percentX : 1 - percentX, percentY];
+        return [this.isLTR ? percentX : 1 - percentX, 1 - percentY];
     }
 
     private handleAreaPointerdown(event: PointerEvent): void {
@@ -537,10 +526,16 @@ export class ColorArea extends SpectrumElement {
     protected override updated(changed: PropertyValues): void {
         super.updated(changed);
         if (this.x !== this.inputX.valueAsNumber) {
-            this._x = this.inputX.valueAsNumber;
+            this.colorController.color.set(
+                's',
+                this.inputX.valueAsNumber * 100
+            );
         }
         if (this.y !== this.inputY.valueAsNumber) {
-            this._y = this.inputY.valueAsNumber;
+            this.colorController.color.set(
+                'v',
+                (1 - this.inputY.valueAsNumber) * 100
+            );
         }
         if (changed.has('focused') && this.focused) {
             // Lazily bind the `input[type="range"]` elements in shadow roots

packages/color-area/stories/color-area.stories.ts

@@ -25,10 +25,10 @@ export default {
         onChange: { action: 'change' },
         color: {
             name: 'color',
-            type: { name: 'ColorValue', required: 'true' },
+            type: { name: 'ColorTypes', required: 'true' },
             description: 'The color displayed by the ColorArea.',
             table: {
-                type: { summary: 'ColorValue' },
+                type: { summary: 'ColorTypes' },
                 defaultValue: { summary: '' },
             },
             control: 'text',
@@ -44,6 +44,7 @@ type StoryArgs = {
 export const Default = ({ onChange, onInput }: StoryArgs): TemplateResult => {
     return html`
         <sp-color-area
+            color="#ff0000"
             @input=${({ target }: Event & { target: ColorArea }) => {
                 const next = target.nextElementSibling as HTMLElement;
                 next.textContent = target.color as string;
@@ -58,6 +59,16 @@ export const Default = ({ onChange, onInput }: StoryArgs): TemplateResult => {
     `;
 };
 
+export const appliedValues = (): TemplateResult => {
+    return html`
+        <sp-color-area
+            .color=${{ space: 'hsv', coords: [250, 90, 80] }}
+        ></sp-color-area>
+        <sp-color-area color="hsv(250, 90%, 80%)"></sp-color-area>
+        <sp-color-area hue="250" x="0.1" y="0.1"></sp-color-area>
+    `;
+};
+
 export const joint = (): TemplateResult => {
     return html`
         <div>