@uiw/react-color-wheel - npm Package Compare versions

Comparing version 2.9.5 to 2.9.6

cjs/index.js

@@ -41,5 +41,8 @@ "use strict";
   var hex = color ? (0, _colorConvert.hsvaToHex)(hsva) : '';
-  var positions = (0, _utils.getWheelHandlePosition)({
-    width: width
-  }, hsva);
+  var wheelProps = {
+    width: width,
+    direction: direction,
+    angle: angle
+  };
+  var positions = (0, _utils.getWheelHandlePosition)(wheelProps, hsva);
   var comProps = {
@@ -51,5 +54,3 @@ top: '0',
   var handleChange = function handleChange(interaction, event) {
-    var result = (0, _utils.getWheelValueFromInput)({
-      width: width
-    }, width - interaction.x, height - interaction.y);
+    var result = (0, _utils.getWheelValueFromInput)(wheelProps, interaction.x, interaction.y);
     var handleHsva = {
@@ -91,4 +92,4 @@ h: result.h,
         borderRadius: '50%',
-        background: direction === 'anticlockwise' ? HUE_GRADIENT_CLOCKWISE : HUE_GRADIENT_ANTICLOCKWISE,
-        transform: "rotateZ(".concat(angle + 90, "deg)"),
+        background: direction === 'anticlockwise' ? HUE_GRADIENT_ANTICLOCKWISE : HUE_GRADIENT_CLOCKWISE,
+        transform: "rotateZ(".concat(90 - angle, "deg)"),
         inset: 0
@@ -95,0 +96,0 @@ }

esm/index.js

@@ -30,5 +30,8 @@ import _extends from "@babel/runtime/helpers/extends";
   var hex = color ? hsvaToHex(hsva) : '';
-  var positions = getWheelHandlePosition({
-    width
-  }, hsva);
+  var wheelProps = {
+    width,
+    direction,
+    angle
+  };
+  var positions = getWheelHandlePosition(wheelProps, hsva);
   var comProps = {
@@ -40,5 +43,3 @@ top: '0',
   var handleChange = (interaction, event) => {
-    var result = getWheelValueFromInput({
-      width
-    }, width - interaction.x, height - interaction.y);
+    var result = getWheelValueFromInput(wheelProps, interaction.x, interaction.y);
     var handleHsva = {
@@ -80,4 +81,4 @@ h: result.h,
         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
@@ -84,0 +85,0 @@ }

package.json

 {
   "name": "@uiw/react-color-wheel",
-  "version": "2.9.5",
+  "version": "2.9.6",
   "description": "Color wheel",
@@ -51,4 +51,4 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/color-convert": "2.9.5",
-    "@uiw/react-drag-event-interactive": "2.9.5"
+    "@uiw/color-convert": "2.9.6",
+    "@uiw/react-drag-event-interactive": "2.9.6"
   },
@@ -55,0 +55,0 @@ "devDependencies": {

README.md

 <div markdown="1">
   <sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup>
   <br>
+  <a target="_blank" href="https://apps.apple.com/app/6758053530" title="Scap: Screenshot & Markup Edit for macOS"><img alt="Scap: Screenshot & Markup Edit" height="52" width="52" src="https://wangchujiang.com/appicon/scap.png"></a>
   <a target="_blank" href="https://apps.apple.com/app/6757317079" title="Screen Test for macOS"><img alt="Screen Test" height="52" width="52" src="https://wangchujiang.com/appicon/screen-test.png"></a>
@@ -5,0 +6,0 @@ <a target="_blank" href="https://apps.apple.com/app/Deskmark/6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" width="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>

src/index.tsx

@@ -45,3 +45,4 @@ import React from 'react';
   const hex = color ? hsvaToHex(hsva) : '';
-  const positions = getWheelHandlePosition({ width }, hsva);
+  const wheelProps = { width, direction, angle };
+  const positions = getWheelHandlePosition(wheelProps, hsva);
   const comProps = {
@@ -53,3 +54,3 @@ top: '0',
   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 = {
@@ -96,4 +97,4 @@ h: result.h,
           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,
@@ -100,0 +101,0 @@ }}

No alert changes

Improved metrics

Total package byte prevSize

45364

0.76%

Lines of code

906

0.33%

Number of lines in readme file

218

0.46%

Dependency changes

• + Added

  @uiw/color-convert@2.9.6
  (transitive)

• + Added

  @uiw/react-drag-event-interactive@2.9.6
  (transitive)

• - Removed

  @uiw/color-convert@2.9.5
  (transitive)

• - Removed

  @uiw/react-drag-event-interactive@2.9.5
  (transitive)

• Updated

  @uiw/color-convert@2.9.6

• Updated

  @uiw/react-drag-event-interactive@2.9.6