From ff1b3965c2f90c717e64e57f0ca0b9e9cc7db0fe Mon Sep 17 00:00:00 2001 From: Norserium Date: Sat, 1 Oct 2022 19:33:13 +0300 Subject: [PATCH] Return the imageRestriction prop --- README.md | 43 +++++++++++++++++++------------------- package.json | 4 ++-- src/components/Cropper.tsx | 19 ++++++++++------- 3 files changed, 35 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 16982af..9a6d436 100644 --- a/README.md +++ b/README.md @@ -66,30 +66,31 @@ To change the cropper's main color you should redefine `color` property for the ## Cropper -| Prop | Type | Description | Default -| ------------------------- | ------------------------- | --------------------------------------------------------------------------- | --------------- -| src | `string` | The cropping image (link / base64) | -| stencilType | `'circle'`, `'rectangle'` | The type of stencil | `'rectangle'` -| stencilComponent | `Component` | The stencil component | `RectangleStencil` -| stencilProps | `object` | The props for the stencil component | `{}` -| className | `string` | The optional class for the root cropper block | -| imageClassName | `string` | The optional class for the cropping image | -| boundaryClassName | `string` | The optional class for the area. | -| backgroundClassName | `string` | The optional class for the background under the image | -| transitions | `boolean`, `object` | Enable / disable auto zoom | `false` -| canvas | `boolean` | The flag that indicates if canvas should be used | `true` -| minWidth | `number` | The minimum width of the stencil (percents) | -| minHeight | `number` | The minimum height of the stencil (percents) | -| maxWidth | `number` | The maximum width of the stencil (percents) | -| maxHeight | `number` | The maximum height of the stencil (percents) | -| checkOrientation | `boolean` | Check if EXIF orientation should be checked | `true` +| Prop | Type | Description | Default +| ------------------------- |---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------| --------------- +| src | `string` | The cropping image (link / base64) | +| stencilType | `'circle'`, `'rectangle'` | The type of stencil | `'rectangle'` +| stencilComponent | `Component` | The stencil component | `RectangleStencil` +| stencilProps | `object` | The props for the stencil component | `{}` +| className | `string` | The optional class for the root cropper block | +| imageClassName | `string` | The optional class for the cropping image | +| boundaryClassName | `string` | The optional class for the area. | +| backgroundClassName | `string` | The optional class for the background under the image | +| transitions | `boolean`, `object` | Enable / disable auto zoom | `false` +| canvas | `boolean` | The flag that indicates if canvas should be used | `true` +| minWidth | `number` | The minimum width of the stencil (percents) | +| minHeight | `number` | The minimum height of the stencil (percents) | +| maxWidth | `number` | The maximum width of the stencil (percents) | +| maxHeight | `number` | The maximum height of the stencil (percents) | +| checkOrientation | `boolean` | Check if EXIF orientation should be checked | `true` | resizeImage | `boolean`, `object` | The options for the image resizing ([details](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper#resizeimage)) | `true` -| moveImage | `boolean`, `object` | The options for the image moving ([details](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper#moveimage)) | `true` -| defaultSize | `object`, `Function` | The function that returns the default size of the stencil or object | -| defaultPosition | `object`, `Function` | The function that returns the default position of the stencil or object | +| moveImage | `boolean`, `object` | The options for the image moving ([details](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper#moveimage)) | `true` +| imageRestriction | `string` | Set restrictions for image position ('stencil', 'none') | `'stencil'` +| defaultSize | `object`, `Function` | The function that returns the default size of the stencil or object | +| defaultPosition | `object`, `Function` | The function that returns the default position of the stencil or object | See [the documentation](https://advanced-cropper.github.io/react-mobile-cropper/docs/components/Cropper) for more props and details. -Notice, in this cropper props `transitions`, `priority`, `imageRestrictions` and `stencilSize` are not available. +Notice, in this cropper props `transitions`, `priority`, and `stencilSize` are not available. ## RectangleStencil diff --git a/package.json b/package.json index 30e26e4..cf955e4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-mobile-cropper", - "version": "0.7.0", + "version": "0.8.0", "description": "The react mobile cropper inspired by Android mobile croppers", "author": "Norserium", "license": "MIT", @@ -80,7 +80,7 @@ ], "dependencies": { "classnames": "^2.2.6", - "react-advanced-cropper": "~0.12.1", + "react-advanced-cropper": "~0.13.0", "tslib": "^2.4.0" }, "sideEffects": false diff --git a/src/components/Cropper.tsx b/src/components/Cropper.tsx index 11c44e0..645e2c1 100644 --- a/src/components/Cropper.tsx +++ b/src/components/Cropper.tsx @@ -3,18 +3,19 @@ import cn from 'classnames'; import { Cropper as DefaultCropper, CropperProps as DefaultCropperProps, - ScaleImageSettings, CropperRef, - mergeRefs, ImageRestriction, + mergeRefs, + ScaleImageSettings, } from 'react-advanced-cropper'; import { - autoZoom, - resizeCoordinates, - transformImage, + fitStencilToImage, + zoomStencil, defaultSize, + resizeCoordinates, stencilConstraints, -} from 'advanced-cropper/showcase/telegram'; + transformImage, +} from 'advanced-cropper/showcase/mobile'; import { PublicNavigationProps } from './Navigation'; import { CropperWrapper } from './CropperWrapper'; @@ -27,6 +28,7 @@ export interface CropperProps resizeImage?: boolean | Omit; navigation?: boolean; navigationProps?: PublicNavigationProps; + imageRestriction?: ImageRestriction.none | ImageRestriction.stencil; } export const Cropper = forwardRef((props: CropperProps, ref) => { @@ -37,6 +39,7 @@ export const Cropper = forwardRef((props: CropperProps, ref) => { stencilProps = {}, navigationProps = {}, wrapperComponent, + imageRestriction = ImageRestriction.stencil, ...cropperProps } = props; @@ -62,11 +65,11 @@ export const Cropper = forwardRef((props: CropperProps, ref) => { }} imageRestriction={ImageRestriction.none} className={cn('rmc-cropper', className)} - postProcess={autoZoom} defaultSize={defaultSize} transformImageAlgorithm={transformImage} - resizeCoordinatesAlgorithm={resizeCoordinates} transitions={true} + postProcess={imageRestriction === ImageRestriction.none ? zoomStencil : [fitStencilToImage, zoomStencil]} + resizeCoordinatesAlgorithm={imageRestriction === ImageRestriction.none ? undefined : resizeCoordinates} /> ); });