From a453b82a04e1b8e49d5ba8a64c521b16cec2e28c Mon Sep 17 00:00:00 2001
From: Nikhilesh Sigatapu <s.nikhilesh@gmail.com>
Date: Sat, 23 Dec 2017 00:36:46 -0500
Subject: [PATCH] recompute page-space origin coordinates every gesture

---
 src/TriangleColorPicker.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/TriangleColorPicker.js b/src/TriangleColorPicker.js
index 9459708..e747234 100644
--- a/src/TriangleColorPicker.js
+++ b/src/TriangleColorPicker.js
@@ -188,17 +188,25 @@ export class TriangleColorPicker extends React.PureComponent {
 
   componentWillMount() {
     const handleColorChange = ({ x, y }) => {
-      if (this._changingHColor) {
-        this._handleHColorChange({ x, y })
-      } else {
-        this._handleSVColorChange({ x, y })
+      if (this._changingHColor !== undefined) {
+        if (this._changingHColor) {
+          this._handleHColorChange({ x, y })
+        } else {
+          this._handleSVColorChange({ x, y })
+        }
       }
     }
     this._pickerResponder = createPanResponder({
       onStart: ({ x, y }) => {
-        const { s, v } = this._computeColorFromTriangle({ x, y })
-        this._changingHColor = s > 1 || s < 0 || v > 1 || v < 0
-        handleColorChange({ x, y })
+        this._changingHColor = undefined
+        this.refs.pickerContainer && this.refs.pickerContainer.measure((measureX, measureY, width, height, pageX, pageY) => {
+          // picker position in the screen
+          this._pageX = pageX
+          this._pageY = pageY
+          const { s, v } = this._computeColorFromTriangle({ x, y })
+          this._changingHColor = s > 1 || s < 0 || v > 1 || v < 0
+          handleColorChange({ x, y })
+        })
       },
       onMove: handleColorChange,
     })