fix(wheel): align angle/direction for pointer, input and background

#139

Author: jaywcjlove

packages/color-editable-input/src/index.tsx

@@ -33,6 +33,8 @@ const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((pr
   } = props;
   const [value, setValue] = useState<string | number | undefined>(initValue);
   const isFocus = useRef(false);
+  const inputIdRef = useRef(other.id || `${prefixCls}-${Math.random().toString(36).slice(2, 11)}`);
+  const inputId = other.id || inputIdRef.current;
 
   useEffect(() => {
     if (props.value !== value) {
@@ -103,6 +105,7 @@ const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((pr
     autoComplete: 'off',
     onFocus: () => (isFocus.current = true),
     ...other,
+    id: inputId,
     style: editableStyle,
     onFocusCapture: (e) => {
       let elm = e.target as HTMLInputElement;
@@ -113,7 +116,8 @@ const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((pr
     <div className={[prefixCls, className || ''].filter(Boolean).join(' ')} style={wrapperStyle}>
       {renderInput ? renderInput(inputProps, ref) : <input ref={ref} {...inputProps} />}
       {label && (
-        <span
+        <label
+          htmlFor={inputId}
           style={{
             color: 'var(--editable-input-label-color)',
             textTransform: 'capitalize',

packages/color-wheel/src/index.tsx

@@ -42,14 +42,15 @@ const Wheel = React.forwardRef<HTMLDivElement, WheelProps>((props, ref) => {
   } = props;
   const hsva = (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color || {}) as HsvaColor;
   const hex = color ? hsvaToHex(hsva) : '';
-  const positions = getWheelHandlePosition({ width }, hsva);
+  const wheelProps = { width, direction, angle };
+  const positions = getWheelHandlePosition(wheelProps, hsva);
   const comProps = {
     top: '0',
     left: '0',
     color: hex,
   };
   const handleChange = (interaction: Interaction, event: MouseEvent | TouchEvent) => {
-    const result = getWheelValueFromInput({ width }, width - interaction.x, height - interaction.y);
+    const result = getWheelValueFromInput(wheelProps, interaction.x, interaction.y);
     const handleHsva = {
       h: result.h,
       s: result.s,
@@ -91,8 +92,8 @@ const Wheel = React.forwardRef<HTMLDivElement, WheelProps>((props, ref) => {
         style={{
           position: 'absolute',
           borderRadius: '50%',
-          background: direction === 'anticlockwise' ? HUE_GRADIENT_CLOCKWISE : HUE_GRADIENT_ANTICLOCKWISE,
-          transform: `rotateZ(${angle + 90}deg)`,
+          background: direction === 'anticlockwise' ? HUE_GRADIENT_ANTICLOCKWISE : HUE_GRADIENT_CLOCKWISE,
+          transform: `rotateZ(${90 - angle}deg)`,
           inset: 0,
         }}
       />

test/editable-input.test.tsx

@@ -45,13 +45,19 @@ it('EditableInput', async () => {
           expect(child.type).toEqual('input');
         }
         if (typeof child === 'object' && idx === 1) {
-          expect(child.type).toEqual('span');
+          expect(child.type).toEqual('label');
         }
       });
     }
   }
 });
 
+it('EditableInput supports getByLabelText', async () => {
+  render(<EditableInput label="Hex" value="#ffffff" />);
+  const input = screen.getByLabelText('Hex');
+  expect(input.tagName).toEqual('INPUT');
+});
+
 it('EditableInput placement = top', async () => {
   function MyComponent() {
     const [hsva, setHsva] = useState({ h: 209, s: 36, v: 90, a: 1 });

test/wheel.test.tsx

@@ -5,6 +5,7 @@ import React, { useState } from 'react';
 import TestRenderer from 'react-test-renderer';
 import { screen, render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { hexToHsva, hsvaToHex } from '@uiw/color-convert';
 import {
   getWheelDimensions,
   getHandleRange,
@@ -28,20 +29,25 @@ class FakeMouseEvent extends MouseEvent {
 
 it('Wheel mousedown onChange', async () => {
   const handleChange = jest.fn((color) => color.hex);
+  const color = '#ff7300';
+  const hsva = hexToHsva(color);
   const {
     container: { firstChild },
-  } = render(<Wheel color="#ff7300" onChange={handleChange} />);
+  } = render(<Wheel color={color} onChange={handleChange} />);
   fireEvent(firstChild!, new FakeMouseEvent('mousedown', { pageX: 20, pageY: 1 }));
-  expect(handleChange).toHaveReturnedWith('#ffd900');
+  const result = getWheelValueFromInput({ width: 200, direction: 'anticlockwise', angle: 180 }, 20, 1);
+  expect(handleChange).toHaveReturnedWith(hsvaToHex({ ...hsva, ...result }));
 });
 
 it('Wheel color=hsvaColor ', async () => {
   const handleChange = jest.fn((color) => color.hex);
+  const hsva = { h: 209, s: 36, v: 90, a: 1 };
   const {
     container: { firstChild },
-  } = render(<Wheel color={{ h: 209, s: 36, v: 90, a: 1 }} onChange={handleChange} />);
+  } = render(<Wheel color={hsva} onChange={handleChange} />);
   fireEvent(firstChild!, new FakeMouseEvent('mousedown', { pageX: 20, pageY: 1 }));
-  expect(handleChange).toHaveReturnedWith('#e6c300');
+  const result = getWheelValueFromInput({ width: 200, direction: 'anticlockwise', angle: 180 }, 20, 1);
+  expect(handleChange).toHaveReturnedWith(hsvaToHex({ ...hsva, ...result }));
 });
 
 it('Wheel mousedown onChange 2', async () => {
@@ -62,6 +68,39 @@ it('Wheel direction="clockwise" onChange', async () => {
   expect(handleChange).toHaveReturnedWith('#000000');
 });
 
+it('Wheel direction and angle should affect pointer position', () => {
+  const hsv = { h: 60, s: 100, v: 100, a: 1 };
+  const {
+    container: { firstChild },
+    container,
+  } = render(<Wheel color={hsv} direction="clockwise" angle={30} />);
+  expect(firstChild).toBeTruthy();
+  const pointer = container.querySelector('.w-color-wheel-pointer') as HTMLDivElement;
+  const { x, y } = getWheelHandlePosition({ width: 200, direction: 'clockwise', angle: 30 }, hsv);
+  expect(pointer.style.transform).toContain(`translate(${x}px, ${y}px)`);
+});
+
+it('Wheel direction and angle should affect onChange hue', async () => {
+  const handleChange = jest.fn();
+  const wheelProps = { width: 200, direction: 'clockwise' as const, angle: 30 };
+  const {
+    container: { firstChild },
+  } = render(<Wheel color={{ h: 200, s: 20, v: 100, a: 1 }} {...wheelProps} onChange={handleChange} />);
+  fireEvent(firstChild!, new FakeMouseEvent('mousedown', { pageX: 20, pageY: 1 }));
+  const expected = getWheelValueFromInput(wheelProps, 20, 1).h;
+  expect(handleChange).toHaveBeenCalled();
+  expect(handleChange.mock.calls[0][0].hsva.h).toEqual(expected);
+});
+
+it('Wheel background should rotate with angle in the same coordinate system', () => {
+  const {
+    container: { firstChild },
+  } = render(<Wheel color={{ h: 0, s: 100, v: 100, a: 1 }} angle={30} />);
+  expect(firstChild).toBeTruthy();
+  const background = (firstChild as HTMLDivElement).children[1] as HTMLDivElement;
+  expect(background.style.transform).toBe('rotateZ(60deg)');
+});
+
 it('getWheelDimensions', () => {
   expect(getWheelDimensions({ width: 200 })).toEqual({
     cx: 100,