🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-zoom-pan-pinch

Package Overview
Dependencies
Maintainers
1
Versions
69
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-zoom-pan-pinch - npm Package Compare versions

Comparing version

1.4.1
to
1.4.5

7

dist/store/InitialState.d.ts

@@ -19,2 +19,4 @@ export declare const initialState: {

centerContent: boolean;
wrapperClass: string;
contentClass: string;
};

@@ -40,7 +42,8 @@ wheel: {

velocityBaseTime: number;
velocityAnimationType: string;
limitToWrapperBounds: boolean;
padding: boolean;
paddingSize: number;
animationTime: number;
animationType: string;
panReturnAnimationTime: number;
panReturnAnimationType: string;
disableOnTarget: any[];

@@ -47,0 +50,0 @@ };

15

dist/store/StateContext.d.ts

@@ -27,2 +27,4 @@ import React, { Component } from "react";

centerContent: boolean;
wrapperClass: string;
contentClass: string;
};

@@ -48,7 +50,8 @@ wheel: {

velocityBaseTime: number;
velocityAnimationType: string;
limitToWrapperBounds: boolean;
padding: boolean;
paddingSize: number;
animationTime: number;
animationType: string;
panReturnAnimationTime: number;
panReturnAnimationType: string;
disableOnTarget: any[];

@@ -131,6 +134,6 @@ };

handleDbClick: (event: any) => void;
setScale: (scale: any) => void;
setPositionX: (positionX: any) => void;
setPositionY: (positionY: any) => void;
setTransform: (positionX: any, positionY: any, scale: any) => void;
setScale: (newScale: any, speed?: number, type?: string) => void;
setPositionX: (newPosX: any, speed?: number, type?: string) => void;
setPositionY: (newPosY: any, speed?: number, type?: string) => void;
setTransform: (newPosX: any, newPosY: any, newScale: any, speed?: number, type?: string) => void;
resetTransform: () => void;

@@ -137,0 +140,0 @@ setDefaultState: () => void;

3

dist/store/utils.d.ts

@@ -39,3 +39,3 @@ /**

*/
export declare const calculateBoundingArea: (wrapperWidth: any, contentWidth: any, diffWidth: any, wrapperHeight: any, contentHeight: any, diffHeight: any, limitToWrapperBounds: any) => {
export declare const calculateBoundingArea: (wrapperWidth: any, newContentWidth: any, diffWidth: any, wrapperHeight: any, newContentHeight: any, diffHeight: any, limitToWrapperBounds: any) => {
minPositionX: number;

@@ -89,1 +89,2 @@ maxPositionX: number;

export declare const mergeProps: (initialState: any, dynamicProps: any) => {};
export declare const additionalAnimationDelay = 45;

2

dist/store/zoom/utils.d.ts

@@ -11,3 +11,3 @@ export declare function checkZoomBounds(zoom: any, minScale: any, maxScale: any, zoomPadding: any, enablePadding: any): any;

};
export declare function getComponentsSizes(wrapperComponent: any, newScale: any): {
export declare function getComponentsSizes(wrapperComponent: any, contentComponent: any, newScale: any): {
wrapperWidth: any;

@@ -14,0 +14,0 @@ wrapperHeight: any;

2

package.json
{
"name": "react-zoom-pan-pinch",
"version": "1.4.1",
"version": "1.4.5",
"description": "Zoom and pan html elements in easy way",

@@ -5,0 +5,0 @@ "author": "prc5",

79

README.md

@@ -6,3 +6,2 @@ # react-zoom-pan-pinch

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![Package Quality](https://npm.packagequality.com/shield/react-zoom-pan-pinch.svg)](https://packagequality.com/#?package=react-zoom-pan-pinch)
![NPM](https://img.shields.io/npm/l/react-zoom-pan-pinch)

@@ -12,3 +11,4 @@ ![npm](https://img.shields.io/npm/dm/react-zoom-pan-pinch)

> Super fast and light react npm package for zooming, panning and pinching html elements in easy way
> Super fast and light react npm package for zooming, panning and pinching html
> elements in easy way

@@ -70,3 +70,7 @@ ## Features

return (
<TransformWrapper defaultScale={1} defaultPositionX={200} defaultPositionY={100}>
<TransformWrapper
defaultScale={1}
defaultPositionX={200}
defaultPositionY={100}
>
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (

@@ -81,3 +85,3 @@ <React.Fragment>

<img src="image.jpg" alt="test" />
<div>Some text</div>
<div>Example text</div>
</TransformComponent>

@@ -159,19 +163,20 @@ </React.Fragment>

| Props | Default | Type |
| :------------------- | :-----: | ----------------------------------------------: |
| disabled | false | boolean |
| disableOnTarget | [] | array of class names or node tags (div,span...) |
| lockAxisX | false | boolean |
| lockAxisY | false | boolean |
| panPaddingShiftTime | 50 | number |
| velocity | false | boolean |
| velocityEqualToMove | false | boolean |
| velocitySensitivity | 1 | number |
| velocityMinSpeed | 1.2 | number |
| velocityBaseTime | 1800 | number |
| limitToWrapperBounds | false | boolean |
| padding | true | boolean |
| paddingSize | 6 | number |
| animationTime | 200 | number |
| animationType | easeOut | string |
| Props | Default | Type |
| :-------------------- | :-----: | ----------------------------------------------: |
| disabled | false | boolean |
| disableOnTarget | [] | array of class names or node tags (div,span...) |
| lockAxisX | false | boolean |
| lockAxisY | false | boolean |
| panPaddingShiftTime | 50 | number |
| velocity | false | boolean |
| velocityEqualToMove | false | boolean |
| velocitySensitivity | 1 | number |
| velocityMinSpeed | 1.2 | number |
| velocityBaseTime | 1800 | number |
| velocityAnimationType | easeOut | string |
| limitToWrapperBounds | false | boolean |
| padding | true | boolean |
| paddingSize | 40 | number |
| animationTime | 200 | number |
| animationType | easeOut | string |

@@ -189,3 +194,3 @@ #### Pinch prop elements

| disabled | false | boolean |
| step | 60 | number |
| step | 70 | number |
| animation | true | boolean |

@@ -200,3 +205,3 @@ | animationTime | 200 | number |

| disabled | false | boolean |
| step | 60 | number |
| step | 70 | number |
| animation | true | boolean |

@@ -211,3 +216,3 @@ | animationTime | 200 | number |

| disabled | false | boolean |
| step | 60 | number |
| step | 70 | number |
| animation | true | boolean |

@@ -248,12 +253,12 @@ | animationTime | 200 | number |

| Value | Description | Type |
| :---------------------------------------- | :--------------------------------------------- | :------------: |
| setScale(scale) | Sets scale | Number |
| setPositionX(positionX) | Sets position x | Number |
| setPositionY(positionY) | Sets position y | Number |
| zoomIn() | Zooming in function, used for controls button | --- |
| zoomOut() | Zooming out function, used for controls button | --- |
| setTransform(positionX, positionY, scale) | Sets transformations of content | Number or null |
| resetTransform() | Reset transformations to the initial values | Number |
| dbClickMode | Available modes: "zoomIn", "zoomOut", "reset" | String |
| Value | Description | Type |
| :---------------------------------------------------------------------- | :--------------------------------------------- | :------------: |
| setScale(scale, animationTime, animationType) | Sets scale | Number |
| setPositionX(positionX, animationTime, animationType) | Sets position x | Number |
| setPositionY(positionY, animationTime, animationType) | Sets position y | Number |
| zoomIn() | Zooming in function, used for controls button | --- |
| zoomOut() | Zooming out function, used for controls button | --- |
| setTransform(positionX, positionY, scale, animationTime, animationType) | Sets transformations of content | Number or null |
| resetTransform() | Reset transformations to the initial values | Number |
| dbClickMode | Available modes: "zoomIn", "zoomOut", "reset" | String |

@@ -266,3 +271,4 @@ ## License

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Thanks goes to these wonderful people
([emoji key](https://allcontributors.org/docs/en/emoji-key)):

@@ -283,3 +289,4 @@ <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)
This project follows the
[all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!
dist/index.es.js

Sorry, the diff of this file is too big to display

dist/index.es.js.map

Sorry, the diff of this file is not supported yet

dist/index.js

Sorry, the diff of this file is too big to display

dist/index.js.map

Sorry, the diff of this file is not supported yet