From a322ab61fba58fda655093006e0b96e5e3a9a7ab Mon Sep 17 00:00:00 2001
From: Nick Lockwood <nicklockwood@fb.com>
Date: Thu, 28 Jan 2016 09:42:28 -0800
Subject: [PATCH] Fix ImageEditor example

Summary:
public

A fix added to make the ImageEditor example usable on Android inadvertantly broke the cropping logic on iOS, so that zoomed images were cropped incorrectly.

This diff fixes that, and also sets the min/max zoom scale correctly based on the image scale, instead of using a hard-coded value.

Reviewed By: bestander

Differential Revision: D2874576

fb-gh-sync-id: 02c62940c24f4d4266655de6ddbf4fe3bc9c13ce
---
 Examples/UIExplorer/ImageEditingExample.js | 42 ++++++++++++++++------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/Examples/UIExplorer/ImageEditingExample.js b/Examples/UIExplorer/ImageEditingExample.js
index 86b4f5343..1a8c93122 100644
--- a/Examples/UIExplorer/ImageEditingExample.js
+++ b/Examples/UIExplorer/ImageEditingExample.js
@@ -22,6 +22,7 @@ var {
   Image,
   ImageEditor,
   NativeModules,
+  Platform,
   ScrollView,
   StyleSheet,
   Text,
@@ -187,31 +188,49 @@ class SquareImageCropper extends React.Component {
 }
 
 class ImageCropper extends React.Component {
-  _scaledImageSize: ImageSize;
   _contentOffset: ImageOffset;
+  _maximumZoomScale: number;
+  _minimumZoomScale: number;
+  _scaledImageSize: ImageSize;
+  _horizontal: boolean;
 
   componentWillMount() {
     // Scale an image to the minimum size that is large enough to completely
     // fill the crop box.
     var widthRatio = this.props.image.width / this.props.size.width;
     var heightRatio = this.props.image.height / this.props.size.height;
-    if (widthRatio < heightRatio) {
-      this._scaledImageSize = {
-        width: this.props.size.width,
-        height: this.props.image.height / widthRatio,
-      };
-    } else {
+    this._horizontal = widthRatio > heightRatio;
+    if (this._horizontal) {
       this._scaledImageSize = {
         width: this.props.image.width / heightRatio,
         height: this.props.size.height,
       };
+    } else {
+      this._scaledImageSize = {
+        width: this.props.size.width,
+        height: this.props.image.height / widthRatio,
+      };
+      if (Platform.OS === 'android') {
+        // hack to work around Android ScrollView a) not supporting zoom, and
+        // b) not supporting vertical scrolling when nested inside another
+        // vertical ScrollView (which it is, when displayed inside UIExplorer)
+        this._scaledImageSize.width *= 2;
+        this._scaledImageSize.height *= 2;
+        this._horizontal = true;
+      }
     }
-    // a quick hack for android because Android ScrollView does not have zoom feature
-    this._scaledImageSize.width = 2 * this._scaledImageSize.width;
     this._contentOffset = {
       x: (this._scaledImageSize.width - this.props.size.width) / 2,
       y: (this._scaledImageSize.height - this.props.size.height) / 2,
     };
+    this._maximumZoomScale = Math.min(
+      this.props.image.width / this._scaledImageSize.width,
+      this.props.image.height / this._scaledImageSize.height
+    );
+    this._minimumZoomScale = Math.max(
+      this.props.size.width / this._scaledImageSize.width,
+      this.props.size.height / this._scaledImageSize.height 
+    );
     this._updateTransformData(
       this._contentOffset,
       this._scaledImageSize,
@@ -253,8 +272,9 @@ class ImageCropper extends React.Component {
         automaticallyAdjustContentInsets={false}
         contentOffset={this._contentOffset}
         decelerationRate="fast"
-        horizontal={true}
-        maximumZoomScale={3.0}
+        horizontal={this._horizontal}
+        maximumZoomScale={this._maximumZoomScale}
+        minimumZoomScale={this._minimumZoomScale}
         onMomentumScrollEnd={this._onScroll.bind(this)}
         onScrollEndDrag={this._onScroll.bind(this)}
         showsHorizontalScrollIndicator={false}