react-best-gradient-color-picker - npm Package Compare versions

Comparing version 1.4.13 to 1.4.14

lib/context.js

 import React, { createContext, useContext, useState, useEffect } from 'react';
-import { computePickerPosition, getGradientType, computeSquareXY, getDegrees, getNewHsl, getColors, getHandleValue } from './utils';
+import { computePickerPosition, getGradientType, computeSquareXY, getDegrees, getNewHsl, getColors, getHandleValue, safeBounds } from './utils';
 import { config } from './constants';
-import cloneDeep from 'lodash.clonedeep';
+import { cloneDeep } from 'lodash';
 
@@ -67,3 +67,3 @@ var tinycolor = require("tinycolor2");
   const handleOpacity = e => {
-    let newO = getHandleValue(e, offsetLeft) / 100;
+    let newO = getHandleValue(e) / 100;
     let newColor = `rgba(${r}, ${g}, ${b}, ${newO})`;
@@ -74,3 +74,3 @@ handleChange(newColor);
   const handleHue = e => {
-    let newHue = getHandleValue(e, offsetLeft) * 3.6;
+    let newHue = getHandleValue(e) * 3.6;
     let newHsl = getNewHsl(newHue, s, l, opacity);
@@ -81,3 +81,3 @@ handleChange(newHsl);
   const handleColor = (e, ctx) => {
-    const [x, y] = computePickerPosition(e, offsetLeft, offsetTop);
+    const [x, y] = computePickerPosition(e);
     const x1 = Math.min(x + crossSize / 2, squareSize - 1);
@@ -84,0 +84,0 @@ const y1 = Math.min(y + crossSize / 2, squareSize - 1);

lib/GradientBar.js

@@ -26,13 +26,5 @@ import React, { useState } from "react";
 
-  const handleUp = e => {
-    if (dragging) {
-      e.stopPropagation();
-      handleGradient(currentColor, getHandleValue(e, offsetLeft));
-      stopDragging();
-    }
-  };
-
   const handleMove = e => {
     if (dragging) {
-      handleGradient(currentColor, getHandleValue(e, offsetLeft));
+      handleGradient(currentColor, getHandleValue(e));
     }
@@ -47,3 +39,3 @@ };
     className: "ps-rl bar-wrap-inner",
-    onMouseUp: e => handleUp(e)
+    onMouseUp: stopDragging
   }, /*#__PURE__*/React.createElement("div", {
@@ -50,0 +42,0 @@ onMouseDown: e => handleDown(e),

lib/index.js

@@ -16,13 +16,5 @@ import React, { useRef, useState, useEffect } from "react";
   const [bounds, setBounds] = useState({});
-  const boundingRect = contRef?.current?.getBoundingClientRect() || {};
-  const {
-    bottom,
-    height,
-    right,
-    x,
-    y
-  } = boundingRect;
   useEffect(() => {
     setBounds(contRef?.current?.getBoundingClientRect());
-  }, [bottom, height, right, x, y]);
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -29,0 +21,0 @@ ref: contRef

lib/Square.js

@@ -1,2 +0,2 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useState } from "react";
 import throttle from "lodash.throttle";
@@ -9,45 +9,53 @@ import usePaintSquare from "./usePaintSquare";
     handleColor,
-    offsetLeft,
     x,
     y,
-    hue
+    hue,
+    setBounds,
+    bounds
   } = usePicker();
-  const square = useRef(null);
+  const [dragging, setDragging] = useState(false);
   const canvas = useRef(null);
   usePaintSquare(canvas, hue);
-  useEffect(() => {
-    const canvasRef = canvas.current;
-    const squareRef = square.current;
-    const ctx = canvasRef.getContext("2d");
-    const onMouseMove = throttle(e => {
-      handleColor(e, ctx);
-    }, 150);
 
-    function onMouseUp(e) {
-      handleColor(e, ctx);
-      document.body.removeEventListener("mousemove", onMouseMove);
-      document.body.removeEventListener("mouseup", onMouseUp);
+  const handleChange = e => {
+    const ctx = canvas?.current?.getContext("2d");
+    const onMouseMove = throttle(() => handleColor(e, ctx), 250);
+    onMouseMove();
+  };
+
+  const stopDragging = () => {
+    setDragging(false);
+  };
+
+  const stopDraggingTest = () => {
+    setDragging(false);
+  };
+
+  const handleMove = e => {
+    if (dragging) {
+      handleChange(e);
     }
+  };
 
-    function onMouseDown(e) {
-      document.body.addEventListener("mousemove", onMouseMove);
-      document.body.addEventListener("mouseup", onMouseUp);
+  const handleClick = e => {
+    if (!dragging) {
+      handleChange(e);
     }
+  };
 
-    canvasRef.addEventListener("mousedown", onMouseDown);
-    squareRef.addEventListener("mousedown", onMouseDown);
-    return () => {
-      canvasRef.removeEventListener("mousedown", onMouseDown);
-      squareRef.removeEventListener("mousedown", onMouseDown);
-      document.body.removeEventListener("mousemove", onMouseMove);
-      document.body.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [handleColor, offsetLeft]);
   return /*#__PURE__*/React.createElement("div", {
-    ref: square,
+    className: "ps-rl"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: -7,
+      top: -7,
+      width: 308,
+      height: 308
+    },
+    onMouseEnter: stopDraggingTest
+  }), /*#__PURE__*/React.createElement("div", {
     className: "ps-rl c-cross",
-    style: {
-      height: 294,
-      width: 294
-    }
+    onMouseMove: e => handleMove(e),
+    onMouseUp: stopDragging
   }, /*#__PURE__*/React.createElement("div", {
@@ -58,5 +66,7 @@ style: {
     },
-    className: "handle npe"
+    className: "handle",
+    onMouseDown: () => setDragging(true)
   }), /*#__PURE__*/React.createElement("div", {
-    className: "canvas-wrapper"
+    className: "canvas-wrapper",
+    onClick: e => handleClick(e)
   }, /*#__PURE__*/React.createElement("canvas", {
@@ -66,5 +76,5 @@ ref: canvas,
     height: "294px"
-  })));
+  }))));
 };
 
 export default Square;

lib/utils.js

@@ -13,3 +13,6 @@ import { config } from './constants';
 
-export function getHandleValue(e, offsetLeft) {
+export function getHandleValue(e) {
+  const {
+    offsetLeft
+  } = safeBounds(e);
   let pos = e.clientX - offsetLeft - barSize / 2;
@@ -29,3 +32,8 @@ let bounded = formatInputValues(pos, 0, 276);
 }
-export function computePickerPosition(e, offsetLeft, offsetTop) {
+export function computePickerPosition(e) {
+  const {
+    offsetLeft,
+    offsetTop
+  } = safeBounds(e);
+
   const getX = () => {
@@ -89,2 +97,9 @@ let xPos = e.clientX - offsetLeft - crossSize / 2;
   }
+};
+export const safeBounds = e => {
+  let client = e.target.parentNode.getBoundingClientRect();
+  return {
+    offsetLeft: client?.x,
+    offsetTop: client?.y
+  };
 };

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "1.4.13",
+  "version": "1.4.14",
   "description": "An easy to use color/gradient picker for React.js",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/context.js

 import React, { createContext, useContext, useState, useEffect } from 'react';
-import { computePickerPosition, getGradientType, computeSquareXY, getDegrees, getNewHsl, getColors, getHandleValue } from './utils'
+import { computePickerPosition, getGradientType, computeSquareXY, getDegrees, getNewHsl, getColors, getHandleValue, safeBounds } from './utils'
 import { config } from './constants'
-import cloneDeep from 'lodash.clonedeep';
+import {cloneDeep} from 'lodash';
 
@@ -51,3 +51,3 @@ var tinycolor = require("tinycolor2");
   const handleOpacity = (e) => {
-    let newO = getHandleValue(e, offsetLeft) / 100;
+    let newO = getHandleValue(e) / 100;
     let newColor = `rgba(${r}, ${g}, ${b}, ${newO})`
@@ -58,3 +58,3 @@ handleChange(newColor)
   const handleHue = (e) => {
-    let newHue = getHandleValue(e, offsetLeft) * 3.6;
+    let newHue = getHandleValue(e) * 3.6;
     let newHsl = getNewHsl(newHue, s, l, opacity);
@@ -65,3 +65,3 @@ handleChange(newHsl)
   const handleColor = (e, ctx) => {
-    const [x, y] = computePickerPosition(e, offsetLeft, offsetTop)
+    const [x, y] = computePickerPosition(e)
     const x1 = Math.min(x + crossSize / 2, squareSize - 1)
@@ -68,0 +68,0 @@ const y1 = Math.min(y + crossSize / 2, squareSize - 1)

src/GradientBar.js

@@ -19,13 +19,5 @@ import React, { useState } from "react";
 
-  const handleUp = (e) => {
-    if (dragging) {
-      e.stopPropagation();
-      handleGradient(currentColor, getHandleValue(e, offsetLeft))
-      stopDragging()
-    }
-  }
-
   const handleMove = (e) => {
     if (dragging) {
-      handleGradient(currentColor, getHandleValue(e, offsetLeft))
+      handleGradient(currentColor, getHandleValue(e))
     }
@@ -36,3 +28,3 @@ }
     <div className='bar-wrap' onMouseEnter={stopDragging} onMouseLeave={stopDragging}>
-      <div className='ps-rl bar-wrap-inner' onMouseUp={(e) => handleUp(e)}>
+      <div className='ps-rl bar-wrap-inner' onMouseUp={stopDragging}>
         <div onMouseDown={(e) => handleDown(e)} onMouseMove={(e) => handleMove(e)} style={{paddingTop: 6, paddingBottom: 6}}>
@@ -39,0 +31,0 @@ <div style={{width: 294, height: 14, backgroundImage: value, borderRadius: 10}} />

src/index.js

@@ -6,12 +6,9 @@ import React, { useRef, useState, useEffect } from "react"
 
-
 function ColorPicker({ value = 'rgba(175, 51, 242, 1)', onChange = () => {}, hideControls = false, hideInputs = false, hidePresets = false, presets = [] }) {
   const contRef = useRef(null);
   const [bounds, setBounds] = useState({});
-  const boundingRect = contRef?.current?.getBoundingClientRect() || {};
-  const { bottom, height, right, x, y } = boundingRect
 
   useEffect(() => {
     setBounds(contRef?.current?.getBoundingClientRect())
-  }, [bottom, height, right, x, y])
+  }, [])
 
@@ -18,0 +15,0 @@ return (

src/Square.js

@@ -1,2 +0,2 @@
-import React, { useRef, useEffect } from "react"
+import React, { useRef, useState } from "react"
 import throttle from "lodash.throttle"
@@ -7,44 +7,41 @@ import usePaintSquare from "./usePaintSquare"
 const Square = () => {
-  const { handleColor, offsetLeft, x, y, hue } = usePicker();
-  const square = useRef(null);
+  const { handleColor, x, y, hue, setBounds, bounds } = usePicker();
+  const [dragging, setDragging] = useState(false);
   const canvas = useRef(null);
-
   usePaintSquare(canvas, hue);
 
-  useEffect(() => {
-    const canvasRef = canvas.current
-    const squareRef = square.current
-    const ctx = canvasRef.getContext("2d")
+  const handleChange = (e) => {
+    const ctx = canvas?.current?.getContext("2d");
+    const onMouseMove = throttle(() => handleColor(e, ctx), 250)
+    onMouseMove()
+  }
 
-    const onMouseMove = throttle(e => {
-      handleColor(e, ctx)
-    }, 150)
+  const stopDragging = () => {
+    setDragging(false)
+  }
 
-    function onMouseUp(e) {
-      handleColor(e, ctx)
-      document.body.removeEventListener("mousemove", onMouseMove)
-      document.body.removeEventListener("mouseup", onMouseUp)
-    }
+  const stopDraggingTest = () => {
+    setDragging(false)
+  }
 
-    function onMouseDown(e) {
-      document.body.addEventListener("mousemove", onMouseMove)
-      document.body.addEventListener("mouseup", onMouseUp)
+  const handleMove = (e) => {
+    if (dragging) {
+      handleChange(e)
     }
+  }
 
-    canvasRef.addEventListener("mousedown", onMouseDown)
-    squareRef.addEventListener("mousedown", onMouseDown)
-
-    return () => {
-      canvasRef.removeEventListener("mousedown", onMouseDown)
-      squareRef.removeEventListener("mousedown", onMouseDown)
-      document.body.removeEventListener("mousemove", onMouseMove)
-      document.body.removeEventListener("mouseup", onMouseUp)
+  const handleClick = (e) => {
+    if (!dragging) {
+      handleChange(e)
     }
-  }, [handleColor, offsetLeft])
+  }
 
   return (
-    <div ref={square} className='ps-rl c-cross' style={{height: 294, width: 294 }}>
-      <div style={{left: x, top: y}} className='handle npe' />
-      <div className='canvas-wrapper'>
-        <canvas ref={canvas} width='294px' height='294px' />
+    <div className='ps-rl'>
+      <div style={{position: 'absolute', left: -7, top: -7, width: 308, height: 308}} onMouseEnter={stopDraggingTest} />
+      <div className='ps-rl c-cross' onMouseMove={(e) => handleMove(e)} onMouseUp={stopDragging}>
+        <div style={{left: x, top: y}} className='handle' onMouseDown={() => setDragging(true)} />
+        <div className='canvas-wrapper' onClick={(e) => handleClick(e)}>
+          <canvas ref={canvas} width='294px' height='294px' />
+        </div>
       </div>
@@ -51,0 +48,0 @@ </div>

src/utils.js

@@ -7,3 +7,4 @@ import { config } from './constants'
 
-export function getHandleValue(e, offsetLeft) {
+export function getHandleValue(e) {
+  const { offsetLeft } = safeBounds(e);
   let pos = e.clientX - offsetLeft - barSize / 2;
@@ -25,3 +26,4 @@ let bounded = formatInputValues(pos, 0, 276)
 
-export function computePickerPosition(e, offsetLeft, offsetTop) {
+export function computePickerPosition(e) {
+  const { offsetLeft, offsetTop } = safeBounds(e)
   const getX = () => {
@@ -77,1 +79,6 @@ let xPos = e.clientX - offsetLeft - crossSize / 2
 }
+
+export const safeBounds = (e) => {
+  let client = e.target.parentNode.getBoundingClientRect();
+  return { offsetLeft: client?.x, offsetTop: client?.y}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Published versions last week

2

increased byInfinity%

Worsened metrics

Total package byte prevSize

67704

decreased by-1.46%

Lines of code

2013

decreased by-0.59%

No dependency changes