fix handle glitch

jaames · Apr 10, 2021 · 54c745f · 54c745f
1 parent c6dfa1a
commit 54c745f
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 ### Changelog
 
+#### 5.5.1
+
+##### Fixes
+
+- Fixed an issue introduced in v5.4.0 where the color picker handles were glitching out on certain devices, causing the handle width/height to skew randomly as they moved around the wheel. Likely a browser bug, but it can be avoided. 
+
+As a bonus, this also should make UI interactions a little less choppy
+
 #### 5.5.0
 
 ##### Additions
@@ -8,7 +16,7 @@
 
 - Added `kelvin` object option for a Color's constructor and `set()` method. See https://github.com/jaames/iro.js/issues/149
 
-##### Fixes
+##### Additions
 
 - Fixed an issue where calling a ColorPicker's `resize()` or `setOptions()` methods directly after another state update (e.g `addColor`, `removeColor`, `setColors`, etc) would cause the color picker to lock up. See https://github.com/jaames/iro.js/issues/156.
 

diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -7,7 +7,7 @@ import { IroBox } from './Box';
 import { IroWheel } from './Wheel';
 import { IroColorPicker } from './ColorPicker';
 declare namespace iro {
-    const version = "5.5.0";
+    const version = "5.5.1";
     type Color = IroColor;
     const Color: typeof IroColor;
     type ColorPicker = IroColorPicker;

diff --git a/dist/iro.es.js b/dist/iro.es.js
@@ -1,5 +1,5 @@
 /*!
- * iro.js v5.5.0
+ * iro.js v5.5.1
  * 2016-2021 James Daniel
  * Licensed under MPL 2.0
  * github.com/jaames/iro.js
@@ -1280,17 +1280,21 @@ var IroComponentWrapper = /*@__PURE__*/(function (Component) {
 function IroHandle(props) {
     var radius = props.r;
     var url = props.url;
+    var cx = radius;
+    var cy = radius;
     return (h("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: {
-            top: cssValue(props.y),
-            left: cssValue(props.x),
-            width: '1px',
-            height: '1px',
+            transform: ("translate(" + (cssValue(props.x)) + ", " + (cssValue(props.y)) + ")"),
+            willChange: 'transform',
+            top: cssValue(-radius),
+            left: cssValue(-radius),
+            width: cssValue(radius * 2),
+            height: cssValue(radius * 2),
             position: 'absolute',
             overflow: 'visible'
         } },
         url && (h("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))),
-        !url && (h("circle", { r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })),
-        !url && (h("circle", { r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" }))));
+        !url && (h("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })),
+        !url && (h("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" }))));
 }
 IroHandle.defaultProps = {
     fill: 'none',
@@ -1756,7 +1760,7 @@ var IroColorPickerWidget = createWidget(IroColorPicker);
 
 var iro;
 (function (iro) {
-    iro.version = "5.5.0"; // replaced by @rollup/plugin-replace; see rollup.config.js
+    iro.version = "5.5.1"; // replaced by @rollup/plugin-replace; see rollup.config.js
     iro.Color = IroColor;
     iro.ColorPicker = IroColorPickerWidget;
     var ui;

diff --git a/dist/iro.js b/dist/iro.js
@@ -1,11 +1,10 @@
 /*!
- * iro.js v5.5.0
+ * iro.js v5.5.1
  * 2016-2021 James Daniel
  * Licensed under MPL 2.0
  * github.com/jaames/iro.js
  */
 
-(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.head.appendChild(r) })(window.document);
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -1287,17 +1286,21 @@
   function IroHandle(props) {
       var radius = props.r;
       var url = props.url;
+      var cx = radius;
+      var cy = radius;
       return (h("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: {
-              top: cssValue(props.y),
-              left: cssValue(props.x),
-              width: '1px',
-              height: '1px',
+              transform: ("translate(" + (cssValue(props.x)) + ", " + (cssValue(props.y)) + ")"),
+              willChange: 'transform',
+              top: cssValue(-radius),
+              left: cssValue(-radius),
+              width: cssValue(radius * 2),
+              height: cssValue(radius * 2),
               position: 'absolute',
               overflow: 'visible'
           } },
           url && (h("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))),
-          !url && (h("circle", { r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })),
-          !url && (h("circle", { r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" }))));
+          !url && (h("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })),
+          !url && (h("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" }))));
   }
   IroHandle.defaultProps = {
       fill: 'none',
@@ -1763,7 +1766,7 @@
 
   var iro;
   (function (iro) {
-      iro.version = "5.5.0"; // replaced by @rollup/plugin-replace; see rollup.config.js
+      iro.version = "5.5.1"; // replaced by @rollup/plugin-replace; see rollup.config.js
       iro.Color = IroColor;
       iro.ColorPicker = IroColorPickerWidget;
       var ui;
@@ -1781,4 +1784,3 @@
   return iro$1;
 
 }));
-//# sourceMappingURL=iro.js.map
diff --git a/dist/iro.js.map b/dist/iro.js.map
diff --git a/dist/iro.min.js b/dist/iro.min.js
diff --git a/docs/.vuepress/theme/js/iro.es.js b/docs/.vuepress/theme/js/iro.es.js
@@ -1,5 +1,5 @@
 /*!
- * iro.js v5.5.0
+ * iro.js v5.5.1
  * 2016-2021 James Daniel
  * Licensed under MPL 2.0
  * github.com/jaames/iro.js
@@ -1280,17 +1280,21 @@ var IroComponentWrapper = /*@__PURE__*/(function (Component) {
 function IroHandle(props) {
     var radius = props.r;
     var url = props.url;
+    var cx = radius;
+    var cy = radius;
     return (h("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: {
-            top: cssValue(props.y),
-            left: cssValue(props.x),
-            width: '1px',
-            height: '1px',
+            transform: ("translate(" + (cssValue(props.x)) + ", " + (cssValue(props.y)) + ")"),
+            willChange: 'transform',
+            top: cssValue(-radius),
+            left: cssValue(-radius),
+            width: cssValue(radius * 2),
+            height: cssValue(radius * 2),
             position: 'absolute',
             overflow: 'visible'
         } },
         url && (h("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))),
-        !url && (h("circle", { r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })),
-        !url && (h("circle", { r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" }))));
+        !url && (h("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })),
+        !url && (h("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" }))));
 }
 IroHandle.defaultProps = {
     fill: 'none',
@@ -1756,7 +1760,7 @@ var IroColorPickerWidget = createWidget(IroColorPicker);
 
 var iro;
 (function (iro) {
-    iro.version = "5.5.0"; // replaced by @rollup/plugin-replace; see rollup.config.js
+    iro.version = "5.5.1"; // replaced by @rollup/plugin-replace; see rollup.config.js
     iro.Color = IroColor;
     iro.ColorPicker = IroColorPickerWidget;
     var ui;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jaames/iro",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "description": "Modular, design-conscious color picker widget for JavaScript",
   "module": "dist/iro.es.js",
   "main": "dist/iro.js",

diff --git a/src/Handle.tsx b/src/Handle.tsx
@@ -15,15 +15,19 @@ interface IroHandleProps {
 export function IroHandle(props: IroHandleProps) {
   const radius = props.r;
   const url = props.url;
+  const cx = radius;
+  const cy = radius;
 
   return (
     <svg 
       className={`IroHandle IroHandle--${props.index} ${props.isActive ? 'IroHandle--isActive' : ''}`}
       style={{
-        top: cssValue(props.y),
-        left: cssValue(props.x),
-        width: '1px',
-        height: '1px',
+        transform: `translate(${ cssValue(props.x) }, ${ cssValue(props.y) })`,
+        willChange: 'transform',
+        top: cssValue(-radius),
+        left: cssValue(-radius),
+        width: cssValue(radius * 2),
+        height: cssValue(radius * 2),
         position: 'absolute',
         overflow: 'visible'
       }}
@@ -32,7 +36,9 @@ export function IroHandle(props: IroHandleProps) {
         <use xlinkHref={resolveSvgUrl(url)} { ...props.props }/>
       )}
       {!url && (
-        <circle 
+        <circle
+          cx={ cx }
+          cy={ cy }
           r={ radius }
           fill="none"
           stroke-width={ 2 }
@@ -41,6 +47,8 @@ export function IroHandle(props: IroHandleProps) {
       )}
       {!url && (
         <circle 
+          cx={ cx }
+          cy={ cy }
           r={ radius - 2 }
           fill={ props.fill } 
           stroke-width={ 2 }