react-native-image-pan-zoom - npm Package Compare versions

react-native-image-pan-zoom

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.1.6 to 2.1.7

148

built/image-zoom/image-zoom.component.js

		@@ -134,3 +134,3 @@ "use strict";
		}
		if (_this.props.enableHorizontalBounce && _this.props.imageWidth * _this.scale > _this.props.cropWidth) {
		if (_this.props.imageWidth * _this.scale > _this.props.cropWidth) {
		// 纵向能容忍的绝对值
		@@ -297,77 +297,71 @@ var horizontalMax = (_this.props.imageWidth * _this.scale - _this.props.cropWidth) / 2 / _this.scale;
		if (_this.props.imageWidth * _this.scale > _this.props.cropWidth) {
		if (_this.props.enableHorizontalBounce) {
		_this.positionX += diffX / _this.scale;
		_this.animatedPositionX.setValue(_this.positionX);
		}
		else {
		// 如果图片宽度大图盒子宽度，可以横向拖拽
		// 没有溢出偏移量或者这次位移完全收回了偏移量才能拖拽
		if (_this.horizontalWholeOuterCounter > 0) {
		// 溢出在右侧
		if (diffX < 0) {
		// 从右侧收紧
		if (_this.horizontalWholeOuterCounter > Math.abs(diffX)) {
		// 偏移量还没有用完
		_this.horizontalWholeOuterCounter += diffX;
		diffX = 0;
		}
		else {
		// 溢出量置为0，偏移量减去剩余溢出量，并且可以被拖动
		diffX += _this.horizontalWholeOuterCounter;
		_this.horizontalWholeOuterCounter = 0;
		if (_this.props.horizontalOuterRangeOffset) {
		_this.props.horizontalOuterRangeOffset(0);
		}
		}
		// 如果图片宽度大图盒子宽度，可以横向拖拽
		// 没有溢出偏移量或者这次位移完全收回了偏移量才能拖拽
		if (_this.horizontalWholeOuterCounter > 0) {
		// 溢出在右侧
		if (diffX < 0) {
		// 从右侧收紧
		if (_this.horizontalWholeOuterCounter > Math.abs(diffX)) {
		// 偏移量还没有用完
		_this.horizontalWholeOuterCounter += diffX;
		diffX = 0;
		}
		else {
		// 向右侧扩增
		_this.horizontalWholeOuterCounter += diffX;
		// 溢出量置为0，偏移量减去剩余溢出量，并且可以被拖动
		diffX += _this.horizontalWholeOuterCounter;
		_this.horizontalWholeOuterCounter = 0;
		if (_this.props.horizontalOuterRangeOffset) {
		_this.props.horizontalOuterRangeOffset(0);
		}
		}
		}
		else if (_this.horizontalWholeOuterCounter < 0) {
		// 溢出在左侧
		if (diffX > 0) {
		// 从左侧收紧
		if (Math.abs(_this.horizontalWholeOuterCounter) > diffX) {
		// 偏移量还没有用完
		_this.horizontalWholeOuterCounter += diffX;
		diffX = 0;
		}
		else {
		// 溢出量置为0，偏移量减去剩余溢出量，并且可以被拖动
		diffX += _this.horizontalWholeOuterCounter;
		_this.horizontalWholeOuterCounter = 0;
		if (_this.props.horizontalOuterRangeOffset) {
		_this.props.horizontalOuterRangeOffset(0);
		}
		}
		else {
		// 向右侧扩增
		_this.horizontalWholeOuterCounter += diffX;
		}
		}
		else if (_this.horizontalWholeOuterCounter < 0) {
		// 溢出在左侧
		if (diffX > 0) {
		// 从左侧收紧
		if (Math.abs(_this.horizontalWholeOuterCounter) > diffX) {
		// 偏移量还没有用完
		_this.horizontalWholeOuterCounter += diffX;
		diffX = 0;
		}
		else {
		// 向左侧扩增
		_this.horizontalWholeOuterCounter += diffX;
		// 溢出量置为0，偏移量减去剩余溢出量，并且可以被拖动
		diffX += _this.horizontalWholeOuterCounter;
		_this.horizontalWholeOuterCounter = 0;
		if (_this.props.horizontalOuterRangeOffset) {
		_this.props.horizontalOuterRangeOffset(0);
		}
		}
		}
		else {
		// 溢出偏移量为0，正常移动
		// 向左侧扩增
		_this.horizontalWholeOuterCounter += diffX;
		}
		// 产生位移
		_this.positionX += diffX / _this.scale;
		// 但是横向不能出现黑边
		// 横向能容忍的绝对值
		var horizontalMax = (_this.props.imageWidth * _this.scale - _this.props.cropWidth) / 2 / _this.scale;
		if (_this.positionX < -horizontalMax) {
		// 超越了左边临界点，还在继续向左移动
		_this.positionX = -horizontalMax;
		// 让其产生细微位移，偏离轨道
		_this.horizontalWholeOuterCounter += -1 / 1e10;
		}
		else if (_this.positionX > horizontalMax) {
		// 超越了右侧临界点，还在继续向右移动
		_this.positionX = horizontalMax;
		// 让其产生细微位移，偏离轨道
		_this.horizontalWholeOuterCounter += 1 / 1e10;
		}
		_this.animatedPositionX.setValue(_this.positionX);
		}
		else {
		// 溢出偏移量为0，正常移动
		}
		// 产生位移
		_this.positionX += diffX / _this.scale;
		// 但是横向不能出现黑边
		// 横向能容忍的绝对值
		var horizontalMax = (_this.props.imageWidth * _this.scale - _this.props.cropWidth) / 2 / _this.scale;
		if (_this.positionX < -horizontalMax) {
		// 超越了左边临界点，还在继续向左移动
		_this.positionX = -horizontalMax;
		// 让其产生细微位移，偏离轨道
		_this.horizontalWholeOuterCounter += -1 / 1e10;
		}
		else if (_this.positionX > horizontalMax) {
		// 超越了右侧临界点，还在继续向右移动
		_this.positionX = horizontalMax;
		// 让其产生细微位移，偏离轨道
		_this.horizontalWholeOuterCounter += 1 / 1e10;
		}
		_this.animatedPositionX.setValue(_this.positionX);
		}
		@@ -378,16 +372,14 @@ else {
		}
		if (_this.props.enableHorizontalBounce) {
		// 溢出量不会超过设定界限
		if (_this.horizontalWholeOuterCounter > (_this.props.maxOverflow \|\| 0)) {
		_this.horizontalWholeOuterCounter = _this.props.maxOverflow \|\| 0;
		// 溢出量不会超过设定界限
		if (_this.horizontalWholeOuterCounter > (_this.props.maxOverflow \|\| 0)) {
		_this.horizontalWholeOuterCounter = _this.props.maxOverflow \|\| 0;
		}
		else if (_this.horizontalWholeOuterCounter < -(_this.props.maxOverflow \|\| 0)) {
		_this.horizontalWholeOuterCounter = -(_this.props.maxOverflow \|\| 0);
		}
		if (_this.horizontalWholeOuterCounter !== 0) {
		// 如果溢出偏移量不是0，执行溢出回调
		if (_this.props.horizontalOuterRangeOffset) {
		_this.props.horizontalOuterRangeOffset(_this.horizontalWholeOuterCounter);
		}
		else if (_this.horizontalWholeOuterCounter < -(_this.props.maxOverflow \|\| 0)) {
		_this.horizontalWholeOuterCounter = -(_this.props.maxOverflow \|\| 0);
		}
		if (_this.horizontalWholeOuterCounter !== 0) {
		// 如果溢出偏移量不是0，执行溢出回调
		if (_this.props.horizontalOuterRangeOffset) {
		_this.props.horizontalOuterRangeOffset(_this.horizontalWholeOuterCounter);
		}
		}
		}
		@@ -394,0 +386,0 @@ }

built/image-zoom/image-zoom.type.js

		@@ -55,6 +55,2 @@ "use strict";
		/**
		* for enabling bouncing back to image when overscrolling horizontally
		*/
		this.enableHorizontalBounce = false;
		/**
		* for disabling focus on image center if user doesn't want it
		@@ -61,0 +57,0 @@ */

package.json

		{
		"name": "react-native-image-pan-zoom",
		"version": "2.1.6",
		"version": "2.1.7",
		"description": "react native image pan zoom",
		@@ -5,0 +5,0 @@ "main": "built/index.js",

readme.md

		@@ -21,3 +21,3 @@ ## Show Cases

		* Install create-react-native-app first
		- Install create-react-native-app first

		@@ -28,3 +28,3 @@ ```bash

		* Initialization of a react-native project
		- Initialization of a react-native project

		@@ -35,3 +35,3 @@ ```bash

		* Then, edit `AwesomeProject/App.js`, like this:
		- Then, edit `AwesomeProject/App.js`, like this:

		@@ -59,38 +59,34 @@ ```typescript

		\| Props \| Type \| Description \| DefaultValue \|
		\| -------------------------- \| -------------------------------------------------------------------------------------------------------------------------------- \| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- \| ---------------------------------------------------- \|
		\| cropWidth(required) \| number \| operating area width \| 100 \|
		\| cropHeight(required) \| number \| operating area height \| 100 \|
		\| imageWidth(required) \| number \| picture width \| 100 \|
		\| imageHeight(required) \| number \| picture height \| 100 \|
		\| onClick \| ()=>void \| onClick \| ()=>{} \|
		\| panToMove \| boolean \| allow to move picture with one finger \| true \|
		\| pinchToZoom \| boolean \| allow scale with two fingers \| true \|
		\| clickDistance \| number \| how many finger movement can also trigger `onClick` \| 10 \|
		\| horizontalOuterRangeOffset \| (offsetX?: number)=>void \| horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation \| ()=>{} \|
		\| onDragLeft \| ()=>void \| trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered \| ()=>{} \|
		\| responderRelease \| (vx: number)=>void \| let go but do not cancel \| ()=>{} \|
		\| maxOverflow \| number \| maximum sliding threshold \| 100 \|
		\| longPressTime \| number \| long press threshold \| 800 \|
		\| onLongPress \| ()=>void \| on longPress \| ()=> {} \|
		\| doubleClickInterval \| number \| time allocated for second click to be considered as doublClick event \| 175 \|
		\| onMove \| ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void \| reports movement position data (helpful to build overlays) \| ()=> {} \|
		\| centerOn \| { x: number, y: number, scale: number, duration: number } \| if given this will cause the map to pan and zoom to the desired location \| undefined \|
		\| enableSwipeDown \| boolean \| for enabling vertical movement if user doesn't want it \| false \|
		\| enableHorizontalBounce \| boolean \| for enabling bouncing back to image when overscrolling horizontally \| false \|
		\| enableCenterFocus \| boolean \| for disabling focus on image center if user doesn't want it \| true \|
		\| onSwipeDown \| () => void \| function that fires when user swipes down \| null \|
		\| swipeDownThreshold \| number \| threshold for firing swipe down function \| 230 \|
		\| minScale \| number \| minimum zoom scale \| 0.6 \|
		\| maxScale \| number \| maximum zoom scale \| 10 \|
		\| Props \| Type \| Description \| DefaultValue \|
		\| -------------------------- \| -------------------------------------------------------------------------------------------------------------------------------- \| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- \| ------------ \|
		\| cropWidth(required) \| number \| operating area width \| 100 \|
		\| cropHeight(required) \| number \| operating area height \| 100 \|
		\| imageWidth(required) \| number \| picture width \| 100 \|
		\| imageHeight(required) \| number \| picture height \| 100 \|
		\| onClick \| ()=>void \| onClick \| ()=>{} \|
		\| panToMove \| boolean \| allow to move picture with one finger \| true \|
		\| pinchToZoom \| boolean \| allow scale with two fingers \| true \|
		\| clickDistance \| number \| how many finger movement can also trigger `onClick` \| 10 \|
		\| horizontalOuterRangeOffset \| (offsetX?: number)=>void \| horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation \| ()=>{} \|
		\| onDragLeft \| ()=>void \| trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered \| ()=>{} \|
		\| responderRelease \| (vx: number)=>void \| let go but do not cancel \| ()=>{} \|
		\| maxOverflow \| number \| maximum sliding threshold \| 100 \|
		\| longPressTime \| number \| long press threshold \| 800 \|
		\| onLongPress \| ()=>void \| on longPress \| ()=> {} \|
		\| doubleClickInterval \| number \| time allocated for second click to be considered as doublClick event \| 175 \|
		\| onMove \| ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void \| reports movement position data (helpful to build overlays) \| ()=> {} \|
		\| centerOn \| { x: number, y: number, scale: number, duration: number } \| if given this will cause the map to pan and zoom to the desired location \| undefined \|
		\| enableSwipeDown \| boolean \| for enabling vertical movement if user doesn't want it \| false \| \| false \|
		\| enableCenterFocus \| boolean \| for disabling focus on image center if user doesn't want it \| true \|
		\| onSwipeDown \| () => void \| function that fires when user swipes down \| null \|
		\| swipeDownThreshold \| number \| threshold for firing swipe down function \| 230 \|
		\| minScale \| number \| minimum zoom scale \| 0.6 \|
		\| maxScale \| number \| maximum zoom scale \| 10 \|

		\| Method \| params \| Description \|
		\| ---------- \| --------- \| ---------------------------------------------------------------------------------------------------------------- \|
		\| reset \| \| Reset the position and the scale of the image \|
		\| resetScale \| \| Reset the scale of the image \|
		\| centerOn \| ICenterOn \| Centers the image in the position indicated. ICenterOn={ x: number, y: number, scale: number, duration: number } \|

		\| Method \| params \| Description \|
		\| -------- \| ----------- \| ------------------- \|
		\| reset \| \| Reset the position and the scale of the image \|
		\| resetScale \| \| Reset the scale of the image \|
		\| centerOn \| ICenterOn \| Centers the image in the position indicated. ICenterOn={ x: number, y: number, scale: number, duration: number } \|



		## Development pattern
		@@ -97,0 +93,0 @@

src/image-zoom/image-zoom.type.ts

		@@ -88,7 +88,2 @@ import { ViewStyle } from 'react-native';
		/**
		* for enabling bouncing back to image when overscrolling horizontally
		*/
		public enableHorizontalBounce?: boolean = false;

		/**
		* for disabling focus on image center if user doesn't want it
		@@ -95,0 +90,0 @@ */

built/image-zoom/image-zoom.component.js.map

Sorry, the diff of this file is not supported yet

built/image-zoom/image-zoom.type.js.map

Sorry, the diff of this file is not supported yet

src/image-zoom/image-zoom.component.tsx

Sorry, the diff of this file is not supported yet

		@@ -21,3 +21,3 @@ ## Show Cases

		* Install create-react-native-app first
		- Install create-react-native-app first

		@@ -28,3 +28,3 @@ ```bash

		* Initialization of a react-native project
		- Initialization of a react-native project

		@@ -35,3 +35,3 @@ ```bash

		* Then, edit `AwesomeProject/App.js`, like this:
		- Then, edit `AwesomeProject/App.js`, like this:

		@@ -59,38 +59,34 @@ ```typescript

		\| Props \| Type \| Description \| DefaultValue \|
		\| -------------------------- \| -------------------------------------------------------------------------------------------------------------------------------- \| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- \| ---------------------------------------------------- \|
		\| cropWidth(required) \| number \| operating area width \| 100 \|
		\| cropHeight(required) \| number \| operating area height \| 100 \|
		\| imageWidth(required) \| number \| picture width \| 100 \|
		\| imageHeight(required) \| number \| picture height \| 100 \|
		\| onClick \| ()=>void \| onClick \| ()=>{} \|
		\| panToMove \| boolean \| allow to move picture with one finger \| true \|
		\| pinchToZoom \| boolean \| allow scale with two fingers \| true \|
		\| clickDistance \| number \| how many finger movement can also trigger `onClick` \| 10 \|
		\| horizontalOuterRangeOffset \| (offsetX?: number)=>void \| horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation \| ()=>{} \|
		\| onDragLeft \| ()=>void \| trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered \| ()=>{} \|
		\| responderRelease \| (vx: number)=>void \| let go but do not cancel \| ()=>{} \|
		\| maxOverflow \| number \| maximum sliding threshold \| 100 \|
		\| longPressTime \| number \| long press threshold \| 800 \|
		\| onLongPress \| ()=>void \| on longPress \| ()=> {} \|
		\| doubleClickInterval \| number \| time allocated for second click to be considered as doublClick event \| 175 \|
		\| onMove \| ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void \| reports movement position data (helpful to build overlays) \| ()=> {} \|
		\| centerOn \| { x: number, y: number, scale: number, duration: number } \| if given this will cause the map to pan and zoom to the desired location \| undefined \|
		\| enableSwipeDown \| boolean \| for enabling vertical movement if user doesn't want it \| false \|
		\| enableHorizontalBounce \| boolean \| for enabling bouncing back to image when overscrolling horizontally \| false \|
		\| enableCenterFocus \| boolean \| for disabling focus on image center if user doesn't want it \| true \|
		\| onSwipeDown \| () => void \| function that fires when user swipes down \| null \|
		\| swipeDownThreshold \| number \| threshold for firing swipe down function \| 230 \|
		\| minScale \| number \| minimum zoom scale \| 0.6 \|
		\| maxScale \| number \| maximum zoom scale \| 10 \|
		\| Props \| Type \| Description \| DefaultValue \|
		\| -------------------------- \| -------------------------------------------------------------------------------------------------------------------------------- \| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- \| ------------ \|
		\| cropWidth(required) \| number \| operating area width \| 100 \|
		\| cropHeight(required) \| number \| operating area height \| 100 \|
		\| imageWidth(required) \| number \| picture width \| 100 \|
		\| imageHeight(required) \| number \| picture height \| 100 \|
		\| onClick \| ()=>void \| onClick \| ()=>{} \|
		\| panToMove \| boolean \| allow to move picture with one finger \| true \|
		\| pinchToZoom \| boolean \| allow scale with two fingers \| true \|
		\| clickDistance \| number \| how many finger movement can also trigger `onClick` \| 10 \|
		\| horizontalOuterRangeOffset \| (offsetX?: number)=>void \| horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation \| ()=>{} \|
		\| onDragLeft \| ()=>void \| trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered \| ()=>{} \|
		\| responderRelease \| (vx: number)=>void \| let go but do not cancel \| ()=>{} \|
		\| maxOverflow \| number \| maximum sliding threshold \| 100 \|
		\| longPressTime \| number \| long press threshold \| 800 \|
		\| onLongPress \| ()=>void \| on longPress \| ()=> {} \|
		\| doubleClickInterval \| number \| time allocated for second click to be considered as doublClick event \| 175 \|
		\| onMove \| ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void \| reports movement position data (helpful to build overlays) \| ()=> {} \|
		\| centerOn \| { x: number, y: number, scale: number, duration: number } \| if given this will cause the map to pan and zoom to the desired location \| undefined \|
		\| enableSwipeDown \| boolean \| for enabling vertical movement if user doesn't want it \| false \| \| false \|
		\| enableCenterFocus \| boolean \| for disabling focus on image center if user doesn't want it \| true \|
		\| onSwipeDown \| () => void \| function that fires when user swipes down \| null \|
		\| swipeDownThreshold \| number \| threshold for firing swipe down function \| 230 \|
		\| minScale \| number \| minimum zoom scale \| 0.6 \|
		\| maxScale \| number \| maximum zoom scale \| 10 \|

		\| Method \| params \| Description \|
		\| ---------- \| --------- \| ---------------------------------------------------------------------------------------------------------------- \|
		\| reset \| \| Reset the position and the scale of the image \|
		\| resetScale \| \| Reset the scale of the image \|
		\| centerOn \| ICenterOn \| Centers the image in the position indicated. ICenterOn={ x: number, y: number, scale: number, duration: number } \|

		\| Method \| params \| Description \|
		\| -------- \| ----------- \| ------------------- \|
		\| reset \| \| Reset the position and the scale of the image \|
		\| resetScale \| \| Reset the scale of the image \|
		\| centerOn \| ICenterOn \| Centers the image in the position indicated. ICenterOn={ x: number, y: number, scale: number, duration: number } \|



		## Development pattern
		@@ -97,0 +93,0 @@

Worsened metrics