fix(Colorful): center circle around cursor in Colorful picker. #169

Author: jaywcjlove

packages/color-colorful/src/index.tsx

@@ -26,7 +26,7 @@ const Pointer = ({ style, color, ...props }: React.HTMLAttributes<HTMLDivElement
     height: 28,
     width: 28,
     position: 'absolute',
-    transform: 'translate(-16px, -10px)',
+    transform: 'translate(-16px, -16px)',
     boxShadow: '0 2px 4px rgb(0 0 0 / 20%)',
     borderRadius: '50%',
     background: `url(${BACKGROUND_IMG})`,
@@ -78,15 +78,17 @@ const Colorful = React.forwardRef<HTMLDivElement, ColorfulProps>((props, ref) =>
         radius={disableAlpha ? '0 0 8px 8px' : 0}
         className={prefixCls}
         onChange={(newHue) => handleChange({ ...hsva, ...newHue })}
-        pointer={({ left }) => <Pointer style={{ left }} color={`hsl(${hsva.h || 0}deg 100% 50%)`} />}
+        pointer={({ left }) => (
+          <Pointer style={{ left, transform: 'translate(-16px, -5px)' }} color={`hsl(${hsva.h || 0}deg 100% 50%)`} />
+        )}
       />
       {!disableAlpha && (
         <Alpha
           hsva={hsva}
           height={24}
           className={prefixCls}
           radius="0 0 8px 8px"
-          pointer={({ left }) => <Pointer style={{ left }} color={hsvaToRgbaString(hsva)} />}
+          pointer={({ left }) => <Pointer style={{ left, transform: 'translate(-16px, -5px)' }} color={hsvaToRgbaString(hsva)} />}
           onChange={(newAlpha) => handleChange({ ...hsva, ...newAlpha })}
         />
       )}

packages/color-saturation/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { HsvaColor, hsvaToHslaString } from '@uiw/color-convert';
 import Interactive, { Interaction } from '@uiw/react-drag-event-interactive';
 import { Pointer, PointerProps } from './Pointer';
@@ -24,7 +24,9 @@ const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref
     position: 'relative',
   };
 
+  const [interaction, setInteraction] = useState<Interaction>({ left: 0, top: 0, x: 0, y: 0, width: 0, height: 0 });
   const handleChange = (interaction: Interaction, event: MouseEvent | TouchEvent) => {
+    setInteraction(interaction);
     onChange &&
       hsva &&
       onChange({
@@ -39,15 +41,15 @@ const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref
   const pointerElement = useMemo(() => {
     if (!hsva) return null;
     const comProps = {
-      top: `${100 - hsva.v}%`,
-      left: `${hsva.s}%`,
+      top: `${interaction.y}px`,
+      left: `${interaction.x}px`,
       color: hsvaToHslaString(hsva),
     };
     if (pointer && typeof pointer === 'function') {
       return pointer({ prefixCls, ...comProps });
     }
     return <Pointer prefixCls={prefixCls} {...comProps} />;
-  }, [hsva, pointer, prefixCls]);
+  }, [hsva, interaction, pointer, prefixCls]);
 
   return (
     <Interactive

packages/drag-event-interactive/src/utils.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { useRef, useEffect, useCallback } from 'react';
 
 // Saves incoming handler to the ref in order to avoid "useCallback hell"
 export function useEventCallback<T, K>(handler?: (value: T, event: K) => void): (value: T, event: K) => void {
@@ -36,19 +36,37 @@ export interface Interaction {
   y: number;
 }
 
+// // Returns a relative position of the pointer inside the node's bounding box
+// export const getRelativePosition = (node: HTMLDivElement, event: MouseEvent | TouchEvent): Interaction => {
+//   const rect = node.getBoundingClientRect();
+
+//   // Get user's pointer position from `touches` array if it's a `TouchEvent`
+//   const pointer = isTouch(event) ? event.touches[0] : (event as MouseEvent);
+
+//   return {
+//     left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
+//     top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
+//     width: rect.width,
+//     height: rect.height,
+//     x: pointer.pageX - (rect.left + window.pageXOffset),
+//     y: pointer.pageY - (rect.top + window.pageYOffset),
+//   };
+// };
+
 // Returns a relative position of the pointer inside the node's bounding box
 export const getRelativePosition = (node: HTMLDivElement, event: MouseEvent | TouchEvent): Interaction => {
   const rect = node.getBoundingClientRect();
-
-  // Get user's pointer position from `touches` array if it's a `TouchEvent`
   const pointer = isTouch(event) ? event.touches[0] : (event as MouseEvent);
 
+  const x = clamp(pointer.pageX - (rect.left + window.pageXOffset), 0, rect.width);
+  const y = clamp(pointer.pageY - (rect.top + window.pageYOffset), 0, rect.height);
+
   return {
-    left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
-    top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
+    left: x / rect.width,
+    top: y / rect.height,
     width: rect.width,
     height: rect.height,
-    x: pointer.pageX - (rect.left + window.pageXOffset),
-    y: pointer.pageY - (rect.top + window.pageYOffset),
+    x,
+    y,
   };
 };