react-draggable - npm Package Compare versions

Comparing version 0.8.3 to 0.8.4

bower.json

 {
   "name": "react-draggable",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "homepage": "https://github.com/mzabriskie/react-draggable",
@@ -5,0 +5,0 @@ "authors": [

CHANGELOG.md

@@ -111,1 +111,5 @@ # Changelog
 - Bugfix: Short-circuiting drag throws due to `e.changedTouches` check.
+
+### 0.8.4 (Oct 15, 2015)
+
+- Bugfix: SVG elements now properly use `transform` attribute instead of `style`. Thanks @martinRoss

lib/draggable.js

@@ -222,2 +222,5 @@ 'use strict';
 
+function createSVGTransform(args) {
+  return 'translate(' + args.x + ',' + args.y + ')';
+}
 
@@ -467,3 +470,3 @@ //
      */
-    onMouseDown: React.PropTypes.func
+    onMouseDown: React.PropTypes.func,
   },
@@ -478,2 +481,9 @@
 
+  componentDidMount: function() {
+    // Check to see if the element passed is an instanceof SVGElement
+    if( React.findDOMNode(this) instanceof SVGElement) {
+        this.setState({ isElementSVG: true });
+    }
+  },
+
   componentWillUnmount: function() {
@@ -500,3 +510,3 @@ // Remove any leftover event handlers
       onStop: emptyFunction,
-      onMouseDown: emptyFunction
+      onMouseDown: emptyFunction,
     };
@@ -516,3 +526,7 @@ },
       // Current transform x and y.
-      clientX: props.start.x, clientY: props.start.y
+      clientX: props.start.x, clientY: props.start.y,
+
+      // Can only determine if is SVG after mounted
+      isElementSVG: false
+
     };
@@ -675,14 +689,30 @@ },
     // has a clean slate.
-    var transform = createCSSTransform({
-      // Set left if horizontal drag is enabled
-      x: canDragX(this) ?
-        this.state.clientX :
-        this.props.start.x,
+    var transform = this.state.isElementSVG ? null :
+        createCSSTransform({
+          // Set left if horizontal drag is enabled
+          x: canDragX(this) ?
+            this.state.clientX :
+            this.props.start.x,
 
-      // Set top if vertical drag is enabled
-      y: canDragY(this) ?
-        this.state.clientY :
-        this.props.start.y
-    });
+          // Set top if vertical drag is enabled
+          y: canDragY(this) ?
+            this.state.clientY :
+            this.props.start.y
+        });
 
+
+    var svgTransform = !this.state.isElementSVG ? null :
+        createSVGTransform({
+          // Set left if horizontal drag is enabled
+          x: canDragX(this) ?
+            this.state.clientX :
+            this.props.start.x,
+
+          // Set top if vertical drag is enabled
+          y: canDragY(this) ?
+            this.state.clientY :
+            this.props.start.y
+        });
+
+
     // Workaround IE pointer events; see #51
@@ -710,2 +740,3 @@ // https://github.com/mzabriskie/react-draggable/issues/51#issuecomment-103488278
       style: style,
+      transform: svgTransform,
       className: className,
@@ -712,0 +743,0 @@

package.json

 {
   "name": "react-draggable",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "React draggable component",
@@ -5,0 +5,0 @@ "main": "index.js",

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

Total package byte prevSize

38163

increased by2.75%

Lines of code

687

increased by3.62%

No dependency changes