fix(Shadow): offsetX, offsetY and blur supports float from string par…

…se (#7019)
fabricjs · Apr 20, 2021 · 172a721 · 172a721
1 parent 4861f78
commit 172a721
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## [NEXT]
+- fix(fabric.Shadow): `offsetX`, `offsetY` and `blur` supports float [#7019](https://github.com/fabricjs/fabric.js/pull/7019)
+
 ## [4.4.0]
 
 - fix(fabric.Object) wrong variable name `cornerStrokeColor ` [#6981](https://github.com/fabricjs/fabric.js/pull/6981)

diff --git a/src/shadow.class.js b/src/shadow.class.js
@@ -98,9 +98,9 @@
 
       return {
         color: color.trim(),
-        offsetX: parseInt(offsetsAndBlur[1], 10) || 0,
-        offsetY: parseInt(offsetsAndBlur[2], 10) || 0,
-        blur: parseInt(offsetsAndBlur[3], 10) || 0
+        offsetX: parseFloat(offsetsAndBlur[1], 10) || 0,
+        offsetY: parseFloat(offsetsAndBlur[2], 10) || 0,
+        blur: parseFloat(offsetsAndBlur[3], 10) || 0
       };
     },
 
@@ -190,6 +190,6 @@
    * @memberOf fabric.Shadow
    */
   // eslint-disable-next-line max-len
-  fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:px)?(?:\s?|$))?(-?\d+(?:px)?(?:\s?|$))?(\d+(?:px)?)?(?:\s?|$)(?:$|\s)/;
+  fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/;
 
 })(typeof exports !== 'undefined' ? exports : this);
diff --git a/test/unit/shadow.js b/test/unit/shadow.js
@@ -109,6 +109,34 @@
     assert.equal(shadow11.offsetX, 0);
     assert.equal(shadow11.offsetY, 0);
     assert.equal(shadow11.blur, 0);
+
+    var shadow12 = new fabric.Shadow('#FF0000 0.1px 0.1px 0.28px');
+
+    assert.equal(shadow12.color, '#FF0000');
+    assert.equal(shadow12.offsetX, 0.1);
+    assert.equal(shadow12.offsetY, 0.1);
+    assert.equal(shadow12.blur, 0.28);
+
+    var shadow13 = new fabric.Shadow('rgba(0,0,255,0.5) -0.1px -0.1px 0.28px');
+
+    assert.equal(shadow13.color, 'rgba(0,0,255,0.5)');
+    assert.equal(shadow13.offsetX, -0.1);
+    assert.equal(shadow13.offsetY, -0.1);
+    assert.equal(shadow13.blur, 0.28);
+
+    var shadow14 = new fabric.Shadow('rgba(0,0,255,0.5) -0.1 -0.1 0.77');
+
+    assert.equal(shadow14.color, 'rgba(0,0,255,0.5)');
+    assert.equal(shadow14.offsetX, -0.1);
+    assert.equal(shadow14.offsetY, -0.1);
+    assert.equal(shadow14.blur, 0.77);
+
+    var shadow15 = new fabric.Shadow('rgba(0,0,255,0.5) 0.1 0.1 1');
+
+    assert.equal(shadow15.color, 'rgba(0,0,255,0.5)');
+    assert.equal(shadow15.offsetX, 0.1);
+    assert.equal(shadow15.offsetY, 0.1);
+    assert.equal(shadow15.blur, 1);
   });
 
   QUnit.test('properties', function(assert) {