Include the flip normalization from the core library

README.md

@@ -12,7 +12,7 @@
 
 ---
 
-:warning: It's the beta version. The API can be changed in the future.
+:warning: It's the beta version. The API can be changed in the future. Therefore, it's recommended to fix the version with `~`.
 
 ---
 

example/src/components/croppers/DefaultCropper/DefaultCropper.tsx

@@ -34,26 +34,17 @@ export const DefaultCropper = ({ wrapperClassName, className, ...props }: Defaul
 	};
 
 	const onRotate = (angle: number) => {
-		if (cropperRef.current) {
-			cropperRef.current.rotateImage(angle);
-		}
+		cropperRef.current?.rotateImage(angle);
 	};
 
 	const onFlip = (horizontal: boolean, vertical: boolean) => {
-		const cropper = cropperRef.current;
-		if (cropper) {
-			if (cropper.getTransforms().rotate % 180 !== 0) {
-				cropper.flipImage(!horizontal, !vertical);
-			} else {
-				cropper.flipImage(horizontal, vertical);
-			}
-		}
+		cropperRef.current?.flipImage(horizontal, vertical);
 	};
 
 	const onReset = () => {
 		const cropper = cropperRef.current;
 		if (cropper) {
-			cropper.setState(getDefaultState(cropper));
+			cropperRef.current?.setState(getDefaultState(cropper));
 		}
 	};
 	const onChange = (cropper: CropperRef) => {

example/src/components/examples/RotateImageExample.tsx

@@ -13,21 +13,11 @@ export const RotateImageExample = () => {
 	const cropperRef = useRef<CropperRef>(null);
 
 	const flip = (horizontal: boolean, vertical: boolean) => () => {
-		const cropper = cropperRef.current;
-		if (cropper) {
-			if (cropper.getTransforms().rotate % 180 !== 0) {
-				cropper.flipImage(!horizontal, !vertical);
-			} else {
-				cropper.flipImage(horizontal, vertical);
-			}
-		}
+		cropperRef.current?.flipImage(horizontal, vertical);
 	};
 
 	const rotate = (angle: number) => () => {
-		const cropper = cropperRef.current;
-		if (cropper) {
-			cropper.rotateImage(angle);
-		}
+		cropperRef.current?.rotateImage(angle);
 	};
 
 	const download = () => {
@@ -46,9 +36,7 @@ export const RotateImageExample = () => {
 			<Cropper
 				ref={cropperRef}
 				className={'rotate-image-example__cropper'}
-				src={
-					'/react-advanced-cropper/img/images/photo-1600353068867-5b4de71e3afb.jpg'
-				}
+				src={'/react-advanced-cropper/img/images/photo-1600353068867-5b4de71e3afb.jpg'}
 			/>
 			<VerticalButtons>
 				<SquareButton title="Flip Horizontal" onClick={flip(true, false)}>

example/src/components/showcase/Telegram/components/Navigation.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
-import { ImmediatelyOptions, InteractionOptions, TransitionOptions } from 'advanced-cropper';
+import { ImmediatelyOptions, InteractionOptions, NormalizeOptions, TransitionOptions } from 'advanced-cropper';
 import cn from 'classnames';
 import { FlipHorizontalIcon } from '../icons/FlipHorizontalIcon';
 import { RotateRightIcon } from '../icons/RotateRightIcon';
@@ -26,7 +26,7 @@ interface NavigationProps extends PublicNavigationProps {
 	onFlip?: (
 		horizontal: boolean,
 		vertical?: boolean,
-		options?: TransitionOptions & InteractionOptions & ImmediatelyOptions,
+		options?: TransitionOptions & InteractionOptions & ImmediatelyOptions & NormalizeOptions,
 	) => void;
 	className?: string;
 	disabled?: unknown;
@@ -122,16 +122,24 @@ export const Navigation = forwardRef<NavigationRef, NavigationProps>(
 			}
 		};
 
-		const flipHorizontal = () => {
-			if (onFlip && !disabled) {
-				onFlip(true);
+		const flip = (horizontal: boolean, vertical: boolean) => {
+			if (quarter % 2 === 0) {
+				onFlip?.(horizontal, vertical, {
+					normalize: false,
+				});
+			} else {
+				onFlip?.(vertical, horizontal, {
+					normalize: false,
+				});
 			}
 		};
 
+		const flipHorizontal = () => {
+			flip(true, false);
+		};
+
 		const flipVertical = () => {
-			if (onFlip && !disabled) {
-				onFlip(false, true);
-			}
+			flip(false, true);
 		};
 
 		return (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-advanced-cropper",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "description": "The react cropper library that gives the possibility to create croppers exactly suited for your website design",
   "author": "Norserium",
   "license": "MIT",
@@ -78,7 +78,7 @@
     "dist"
   ],
   "dependencies": {
-    "advanced-cropper": "~0.10.3",
+    "advanced-cropper": "~0.11.0",
     "classnames": "^2.2.6",
     "tslib": "^2.4.0"
   },