msand / zoomable-svg

Pinch to pan-n-zoom react-native-svg components using a render prop.
38 stars 14 forks source link

feat(rotation): consider adding rotation angle as well #20

Open theonetheycallneo opened 1 year ago

theonetheycallneo commented 1 year ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch zoomable-svg@5.0.1 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/zoomable-svg/index.js b/node_modules/zoomable-svg/index.js
index 1b3f5e2..1667658 100644
--- a/node_modules/zoomable-svg/index.js
+++ b/node_modules/zoomable-svg/index.js
@@ -238,6 +238,7 @@ function getDerivedStateFromProps(props, state) {
 }

 function getZoomTransform({
+  angle,
   left,
   top,
   zoom,
@@ -247,6 +248,7 @@ function getZoomTransform({
   translateY,
 }) {
   return {
+    angle,
     translateX: left + zoom * translateX,
     translateY: top + zoom * translateY,
     scaleX: zoom * scaleX,
@@ -258,6 +260,7 @@ class ZoomableSvg extends Component {
   constructor(props) {
     super();
     this.state = getDerivedStateFromProps(props, {
+      angle: props.angle || 0,
       zoom: props.initialZoom || 1,
       left: props.initialLeft || 0,
       top: props.initialTop || 0,
@@ -430,7 +433,7 @@ class ZoomableSvg extends Component {
         initialTop: top,
         initialLeft: left,
         initialZoom: zoom,
-        initialDistance: distance,
+        initialDistance: distance
       });
     } else {
       const {
@@ -451,10 +454,14 @@ class ZoomableSvg extends Component {
       const top = (initialTop + dy - y) * touchZoom + y;
       const zoom = initialZoom * touchZoom;

+      let angle = (Math.atan2(y2-y1, x2-x1) * 180) / Math.PI 
+      console.log("??????tempAngle", angle)
+
       const nextState = {
         zoom,
         left,
         top,
+        angle
       };

       this.setState(constrain ? this.constrainExtent(nextState) : nextState);
@@ -473,7 +480,7 @@ class ZoomableSvg extends Component {
         initialY: y,
       });
     } else {
-      const { initialX, initialY, initialLeft, initialTop, zoom } = this.state;
+      const { initialX, initialY, initialLeft, initialTop, zoom, angle } = this.state;
       const { constrain } = this.props;

       const dx = x - initialX;
@@ -483,6 +490,7 @@ class ZoomableSvg extends Component {
         left: initialLeft + dx,
         top: initialTop + dy,
         zoom,
+        angle
       };

       this.setState(constrain ? this.constrainExtent(nextState) : nextState);
@@ -494,6 +502,7 @@ class ZoomableSvg extends Component {
       top: initialTop,
       left: initialLeft,
       zoom: initialZoom,
+      angle
     } = this.state;
     const { constrain } = this.props;

@@ -505,6 +514,7 @@ class ZoomableSvg extends Component {
       zoom,
       left,
       top,
+      angle
     };

     this.setState(constrain ? this.constrainExtent(nextState) : nextState);

This issue body was partially generated by patch-package.