fix: prevent hue from being reset (#33)

web-padawan · May 21, 2021 · 02b1423 · 02b1423
1 parent 4776869
commit 02b1423
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/lib/components/color-picker.ts b/src/lib/components/color-picker.ts
@@ -42,7 +42,7 @@ export abstract class ColorPicker<C extends AnyColor> extends HTMLElement {
     if (!this[$isSame](newColor)) {
       const newHsva = this.colorModel.toHsva(newColor);
       this[$update](newHsva);
-      this[$change](newColor, newHsva);
+      this[$change](newColor);
     }
   }
 
@@ -77,14 +77,15 @@ export abstract class ColorPicker<C extends AnyColor> extends HTMLElement {
 
   handleEvent(event: CustomEvent): void {
     // Merge the current HSV color object with updated params.
-    const newHsva = Object.assign({}, this[$hsva], event.detail);
+    const oldHsva = this[$hsva];
+    const newHsva = { ...oldHsva, ...event.detail };
     this[$update](newHsva);
     let newColor;
     if (
-      !equalColorObjects(newHsva, this[$hsva]) &&
+      !equalColorObjects(newHsva, oldHsva) &&
       !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))
     ) {
-      this[$change](newColor, newHsva);
+      this[$change](newColor);
     }
   }
 
@@ -93,12 +94,12 @@ export abstract class ColorPicker<C extends AnyColor> extends HTMLElement {
   }
 
   private [$update](hsva: HsvaColor): void {
+    this[$hsva] = hsva;
     this[$parts].forEach((part) => part.update(hsva));
   }
 
-  private [$change](color: C, hsva: HsvaColor): void {
+  private [$change](color: C): void {
     this[$color] = color;
-    this[$hsva] = hsva;
     this.dispatchEvent(
       new CustomEvent('color-changed', { bubbles: true, detail: { value: color } })
     );

diff --git a/src/test/color-picker.test.ts b/src/test/color-picker.test.ts
@@ -312,6 +312,20 @@ describe('hex-color-picker', () => {
         elem.dispatchEvent(new FakeMouseEvent('mousemove', { pageX: left + 125, pageY: y })); // 4
         expect(spy.callCount).to.equal(2);
       });
+
+      it('should not reset hue after saturation is changed', () => {
+        picker.color = { r: 0, g: 0, b: 0, a: 1 };
+
+        const { x: hx, y: hy } = middleOfNode(hue);
+        hue.dispatchEvent(new FakeTouchEvent('touchstart', [{ pageX: hx, pageY: hy }]));
+        hue.dispatchEvent(new FakeTouchEvent('touchend', [{ pageX: hx, pageY: hy }]));
+
+        const { x: sx, y: sy } = middleOfNode(saturation);
+        saturation.dispatchEvent(new FakeTouchEvent('touchstart', [{ pageX: sx, pageY: sy }]));
+        saturation.dispatchEvent(new FakeTouchEvent('touchend', [{ pageX: sx, pageY: sy }]));
+
+        expect(picker.color).to.deep.equal({ r: 64, g: 128, b: 128, a: 1 });
+      });
     });
   });
 });