fix for eyedropper functionality

hxf31891 · Oct 27, 2022 · a3c9b24 · a3c9b24
1 parent 03cb477
commit a3c9b24
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-best-gradient-color-picker",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "An easy to use color/gradient picker for React.js",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/EyeDropper.js b/src/EyeDropper.js
@@ -3,6 +3,8 @@ import Portal from './Portal'
 import html2canvas from 'html2canvas'
 import { controlBtnStyles } from './Controls'
 
+var tc = require('tinycolor2')
+
 const DropperIcon = ({ color }) => {
   const col = color || '#323136'
   const style1 = {
@@ -44,45 +46,64 @@ const DropperIcon = ({ color }) => {
   )
 }
 
-const EyeDropper = ({ onSelect, buttonStyle }) => {
+const Dropper = ({ onSelect, buttonStyle }) => {
   const [pickerCanvas, setPickerCanvas] = useState('')
   const [coverUp, setCoverUp] = useState(false)
 
-  const takePick = () =>
-    html2canvas(document.body).then(canvas => {
-      const croppedCanvas = document.createElement('canvas')
-      const croppedCanvasContext = croppedCanvas.getContext('2d')
-
-      const cropPositionTop = 0
-      const cropPositionLeft = 0
-      const cropWidth = window.innerWidth * 2
-      const cropHeight = window.innerHeight * 2
-      croppedCanvas.width = cropWidth
-      croppedCanvas.height = cropHeight
+  const takePick = () => {
+    let root = document.getElementById('root')
+    setCoverUp(true)
 
-      croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop)
+    html2canvas(root).then(canvas => {
+      const blankCanvas = document.createElement('canvas')
+      const ctx = blankCanvas.getContext('2d', { willReadFrequently: true })
+      blankCanvas.width = root.offsetWidth * 2
+      blankCanvas.height = root.offsetHeight * 2
+      ctx.drawImage(canvas, 0, 0)
 
-      setPickerCanvas(croppedCanvasContext)
-      setCoverUp(true)
+      setPickerCanvas(ctx)
     })
+  }
 
-  const getEyeDrop = e => {
+  const getColorLegacy = e => {
     e.stopPropagation()
-    const x1 = e.clientX * 2
-    const y1 = e.clientY * 2
-    const [r, g, b] = pickerCanvas.getImageData(x1, y1, 1, 1).data
+    let { pageX, pageY } = e
+    const x1 = pageX * 2
+    const y1 = pageY * 2
+    let [r, g, b] = pickerCanvas.getImageData(x1, y1, 1, 1).data
     onSelect(`rgba(${r}, ${g}, ${b}, 1)`)
     setCoverUp(false)
   }
 
+  const getEyeDrop = () => {
+    if (!window.EyeDropper) {
+      takePick()
+    } else {
+      const eyeDropper = new window.EyeDropper()
+      const abortController = new window.AbortController()
+
+      eyeDropper
+        .open({ signal: abortController.signal })
+        .then(result => {
+          let tinyHex = tc(result.sRGBHex)
+          let { r, g, b } = tinyHex.toRgb()
+          onSelect(`rgba(${r}, ${g}, ${b}, 1)`)
+        })
+        .catch(e => {
+          console.log(e)
+        })
+    }
+  }
+
   return (
     <div>
       <div
         style={{ ...buttonStyle, ...controlBtnStyles(coverUp) }}
-        onClick={takePick}
+        onClick={getEyeDrop}
       >
         <DropperIcon color={coverUp ? 'rgb(86, 140, 245)' : ''} />
       </div>
+
       {coverUp && (
         <Portal id="eyeDropCover">
           <div
@@ -95,12 +116,12 @@ const EyeDropper = ({ onSelect, buttonStyle }) => {
               height: window.innerHeight,
               cursor: 'copy',
             }}
-            onClick={e => getEyeDrop(e)}
+            onClick={e => getColorLegacy(e)}
           />
         </Portal>
       )}
     </div>
   )
 }
 
-export default EyeDropper
+export default Dropper
diff --git a/src/Square.js b/src/Square.js
@@ -1,8 +1,8 @@
-import React, { useRef, useState } from "react";
-import throttle from "lodash.throttle";
-import usePaintSquare from "./usePaintSquare";
-import { usePicker } from "./context";
-import { psRl, cCross, handle, canvasWrapper } from "./style";
+import React, { useRef, useState } from 'react'
+import throttle from 'lodash.throttle'
+import usePaintSquare from './usePaintSquare'
+import { usePicker } from './context'
+import { psRl, cCross, handle, canvasWrapper } from './style'
 
 const Square = () => {
   const {
@@ -11,43 +11,43 @@ const Square = () => {
     y,
     internalHue,
     squareSize,
-    squareHeight
-  } = usePicker();
-  const [dragging, setDragging] = useState(false);
-  const canvas = useRef(null);
-  usePaintSquare(canvas, internalHue, squareSize, squareHeight);
+    squareHeight,
+  } = usePicker()
+  const [dragging, setDragging] = useState(false)
+  const canvas = useRef(null)
+  usePaintSquare(canvas, internalHue, squareSize, squareHeight)
 
   const handleChange = e => {
-    const ctx = canvas?.current?.getContext("2d");
-    const onMouseMove = throttle(() => handleColor(e, ctx), 250);
-    onMouseMove();
-  };
+    const ctx = canvas?.current?.getContext('2d', { willReadFrequently: true })
+    const onMouseMove = throttle(() => handleColor(e, ctx), 250)
+    onMouseMove()
+  }
 
   const stopDragging = () => {
-    setDragging(false);
-  };
+    setDragging(false)
+  }
 
   const handleMove = e => {
     if (dragging) {
-      handleChange(e);
+      handleChange(e)
     }
-  };
+  }
 
   const handleClick = e => {
     if (!dragging) {
-      handleChange(e);
+      handleChange(e)
     }
-  };
+  }
 
   return (
     <div style={psRl}>
       <div
         style={{
-          position: "absolute",
+          position: 'absolute',
           left: -7,
           top: -7,
           width: squareSize + 14,
-          height: squareHeight + 14
+          height: squareHeight + 14,
         }}
         onMouseEnter={stopDragging}
       />
@@ -73,7 +73,7 @@ const Square = () => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Square;
+export default Square
diff --git a/src/usePaintHue.js b/src/usePaintHue.js
@@ -3,7 +3,7 @@ var tinycolor = require('tinycolor2')
 
 const usePaintHue = (canvas, squareSize) => {
   useEffect(() => {
-    const ctx = canvas?.current?.getContext('2d')
+    const ctx = canvas?.current?.getContext('2d', { willReadFrequently: true })
     ctx.rect(0, 0, squareSize, 14)
 
     const gradient = ctx.createLinearGradient(0, 0, squareSize, 0)
@@ -19,7 +19,7 @@ export default usePaintHue
 
 export const usePaintSat = (canvas, h, l, squareSize) => {
   useEffect(() => {
-    const ctx = canvas?.current?.getContext('2d')
+    const ctx = canvas?.current?.getContext('2d', { willReadFrequently: true })
     if (ctx) {
       ctx.rect(0, 0, squareSize, 14)
 
@@ -35,7 +35,7 @@ export const usePaintSat = (canvas, h, l, squareSize) => {
 
 export const usePaintLight = (canvas, h, s, squareSize) => {
   useEffect(() => {
-    const ctx = canvas?.current?.getContext('2d')
+    const ctx = canvas?.current?.getContext('2d', { willReadFrequently: true })
     if (ctx) {
       ctx.rect(0, 0, squareSize, 14)
 
@@ -51,7 +51,7 @@ export const usePaintLight = (canvas, h, s, squareSize) => {
 
 export const usePaintBright = (canvas, h, s, squareSize) => {
   useEffect(() => {
-    const ctx = canvas?.current?.getContext('2d')
+    const ctx = canvas?.current?.getContext('2d', { willReadFrequently: true })
     if (ctx) {
       ctx.rect(0, 0, squareSize, 14)
 

diff --git a/src/usePaintSquare.js b/src/usePaintSquare.js
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 
 const usePaintSquare = (canvas, hue, squareSize, squareHeight) => {
   useEffect(() => {
-    const ctx = canvas.current.getContext('2d')
+    const ctx = canvas.current.getContext('2d', { willReadFrequently: true })
     ctx.fillStyle = `hsl(${hue}, 100%, 50%)`
     ctx.fillRect(0, 0, squareSize, squareHeight)
     const gradientWhite = ctx.createLinearGradient(0, 0, squareSize, 0)