1- import React , { Component } from 'react' ;
1+ import React , { Component } from 'react'
22import {
3- AppRegistry ,
4- StyleSheet ,
53 View ,
64 Image ,
75 PanResponder
8- } from 'react-native' ;
6+ } from 'react-native'
97
108import { Surface } from 'gl-react-native'
11- const { Image : GLImage } = require ( "gl-react-image" ) ;
9+ const { Image : GLImage } = require ( "gl-react-image" )
1210
1311const imageDimensionsAfterZoom = ( viewport , dimensions , zoom ) => {
1412 const ImageRatio = dimensions . width / dimensions . height
@@ -27,16 +25,17 @@ const imageDimensionsAfterZoom = (viewport, dimensions, zoom) => {
2725}
2826
2927const movementFromZoom = ( gestureState , viewport , dimensions , offsets , zoom ) => {
28+ let newPosX , newPosY
3029 // X-axis
31- var widthOffset = dimensions . width - viewport . width
32- var pxVsMovX = ( 1 / dimensions . width )
33- var moveX = ( gestureState . dx * pxVsMovX ) * zoom
30+ let widthOffset = dimensions . width - viewport . width
31+ let pxVsMovX = ( 1 / dimensions . width )
32+ let moveX = ( gestureState . dx * pxVsMovX ) * zoom
3433 newPosX = ( parseFloat ( offsets . x ) - parseFloat ( moveX ) )
3534
3635 // Y-axis
37- var heightOffset = dimensions . height - viewport . height
38- var pxVsMovY = ( 1 / dimensions . height )
39- var moveY = ( gestureState . dy * pxVsMovY ) * zoom
36+ let heightOffset = dimensions . height - viewport . height
37+ let pxVsMovY = ( 1 / dimensions . height )
38+ let moveY = ( gestureState . dy * pxVsMovY ) * zoom
4039 newPosY = ( parseFloat ( offsets . y ) - parseFloat ( moveY ) )
4140 return {
4241 x : newPosX ,
@@ -47,7 +46,7 @@ const movementFromZoom = (gestureState, viewport, dimensions, offsets, zoom) =>{
4746
4847class ImageCrop extends Component {
4948 constructor ( props ) {
50- super ( props ) ;
49+ super ( props )
5150 this . state = {
5251 zoom : 1 ,
5352
@@ -61,15 +60,15 @@ class ImageCrop extends Component {
6160 imageDimHeight : 0 ,
6261 imageDimWidth : 0 ,
6362 currentCapture : '' ,
64- } ;
63+ }
6564 }
6665 componentWillMount ( ) {
6766 Image . getSize ( this . props . image , ( width , height ) => {
6867 //update state
6968 this . setState ( {
7069 imageHeight : height ,
7170 imageWidth : width ,
72- } ) ;
71+ } )
7372 } )
7473
7574 //
@@ -96,25 +95,25 @@ class ImageCrop extends Component {
9695
9796 onPanResponderGrant : ( evt , gestureState ) => {
9897 //move variables
99- this . offsetX = this . state . centerX ;
100- this . offsetY = this . state . centerY ;
98+ this . offsetX = this . state . centerX
99+ this . offsetY = this . state . centerY
101100
102101 //zoom variables
103- this . zoomLastDistance = 0 ;
104- this . zoomCurrentDistance = 0 ;
102+ this . zoomLastDistance = 0
103+ this . zoomCurrentDistance = 0
105104 } ,
106105
107106 onPanResponderMove : ( evt , gestureState ) => {
108107 //We are moving the image
109108 if ( evt . nativeEvent . changedTouches . length <= 1 ) {
110- var trackX = ( gestureState . dx / this . props . cropWidth ) * this . state . zoom ;
111- var trackY = ( gestureState . dy / this . props . cropHeight ) * this . state . zoom ;
112- var newPosX = ( Number ( this . offsetX ) - Number ( trackX ) ) ;
113- var newPosY = ( Number ( this . offsetY ) - Number ( trackY ) ) ;
114- if ( newPosX > 1 ) newPosX = Number ( 1 ) ;
115- if ( newPosY > 1 ) newPosY = Number ( 1 ) ;
116- if ( newPosX < 0 ) newPosX = Number ( 0 ) ;
117- if ( newPosY < 0 ) newPosY = Number ( 0 ) ;
109+ var trackX = ( gestureState . dx / this . props . cropWidth ) * this . state . zoom
110+ var trackY = ( gestureState . dy / this . props . cropHeight ) * this . state . zoom
111+ var newPosX = ( Number ( this . offsetX ) - Number ( trackX ) )
112+ var newPosY = ( Number ( this . offsetY ) - Number ( trackY ) )
113+ if ( newPosX > 1 ) newPosX = Number ( 1 )
114+ if ( newPosY > 1 ) newPosY = Number ( 1 )
115+ if ( newPosX < 0 ) newPosX = Number ( 0 )
116+ if ( newPosY < 0 ) newPosY = Number ( 0 )
118117
119118 var movement = movementFromZoom (
120119 gestureState ,
@@ -130,35 +129,35 @@ class ImageCrop extends Component {
130129 if ( this . zoomLastDistance == 0 ) {
131130 let a = evt . nativeEvent . changedTouches [ 0 ] . locationX - evt . nativeEvent . changedTouches [ 1 ] . locationX
132131 let b = evt . nativeEvent . changedTouches [ 0 ] . locationY - evt . nativeEvent . changedTouches [ 1 ] . locationY
133- let c = Math . sqrt ( a * a + b * b ) ;
134- this . zoomLastDistance = c . toFixed ( 1 ) ;
132+ let c = Math . sqrt ( a * a + b * b )
133+ this . zoomLastDistance = c . toFixed ( 1 )
135134 } else {
136135 let a = evt . nativeEvent . changedTouches [ 0 ] . locationX - evt . nativeEvent . changedTouches [ 1 ] . locationX
137136 let b = evt . nativeEvent . changedTouches [ 0 ] . locationY - evt . nativeEvent . changedTouches [ 1 ] . locationY
138- let c = Math . sqrt ( a * a + b * b ) ;
139- this . zoomCurrentDistance = c . toFixed ( 1 ) ;
137+ let c = Math . sqrt ( a * a + b * b )
138+ this . zoomCurrentDistance = c . toFixed ( 1 )
140139
141140 //what is the zoom level
142- var screenDiagonal = Math . sqrt ( this . state . imageHeight * this . state . imageHeight + this . state . imageWidth * this . state . imageWidth ) ;
143- var distance = ( this . zoomCurrentDistance - this . zoomLastDistance ) / 400 ;
144- var zoom = this . state . zoom - distance ;
141+ var screenDiagonal = Math . sqrt ( this . state . imageHeight * this . state . imageHeight + this . state . imageWidth * this . state . imageWidth )
142+ var distance = ( this . zoomCurrentDistance - this . zoomLastDistance ) / 400
143+ var zoom = this . state . zoom - distance
145144
146- if ( zoom < 0 ) zoom = 0.0000001 ;
147- if ( zoom > 1 ) zoom = 1 ;
145+ if ( zoom < 0 ) zoom = 0.0000001
146+ if ( zoom > 1 ) zoom = 1
148147 this . setState ( {
149148 zoom : zoom ,
150149 } )
151150 //Set last distance..
152- this . zoomLastDistance = this . zoomCurrentDistance ;
151+ this . zoomLastDistance = this . zoomCurrentDistance
153152 }
154153 }
155154 }
156155 } )
157156 }
158157 componentWillReceiveProps ( nextProps ) {
159158 if ( this . props . zoom != nextProps . zoom ) {
160- var zoom = ( 100 - nextProps . zoom ) / 100 ;
161- this . setState ( { zoom : zoom } ) ;
159+ var zoom = ( 100 - nextProps . zoom ) / 100
160+ this . setState ( { zoom : zoom } )
162161 }
163162
164163 //
@@ -188,7 +187,7 @@ class ImageCrop extends Component {
188187 />
189188 </ Surface >
190189 </ View >
191- ) ;
190+ )
192191 }
193192 crop ( ) {
194193 return this . refs . cropit . captureFrame ( { quality : this . props . quality , type : this . props . type , format : this . props . format } )
@@ -216,4 +215,4 @@ ImageCrop.propTypes = {
216215 type : React . PropTypes . string ,
217216 format : React . PropTypes . string ,
218217}
219- module . exports = ImageCrop ;
218+ module . exports = ImageCrop
0 commit comments