allow for custom cropper aspect ration based on image

zio/stable
Piotr P 2024-04-27 14:23:11 +02:00
parent ebd333b331
commit bc956803b8
3 changed files with 30 additions and 5 deletions

View File

@ -17,6 +17,10 @@ export async function openCropper(opts: CropperOptions): Promise<RNImage> {
unstable__openModal({
name: 'crop-image',
uri: opts.path,
dimensions:
opts.height && opts.width
? {width: opts.width, height: opts.height}
: undefined,
onSelect: (img?: RNImage) => {
if (img) {
resolve(img)

View File

@ -47,6 +47,7 @@ export interface EditImageModal {
export interface CropImageModal {
name: 'crop-image'
uri: string
dimensions?: {width: number; height: number}
onSelect: (img?: RNImage) => void
}

View File

@ -14,11 +14,13 @@ import {Dimensions} from 'lib/media/types'
import {getDataUriSize} from 'lib/media/util'
import {gradients, s} from 'lib/styles'
import {Text} from 'view/com/util/text/Text'
import {calculateDimensions} from './cropImageUtil'
enum AspectRatio {
Square = 'square',
Wide = 'wide',
Tall = 'tall',
Custom = 'custom',
}
const DIMS: Record<string, Dimensions> = {
@ -31,17 +33,24 @@ export const snapPoints = ['0%']
export function Component({
uri,
dimensions,
onSelect,
}: {
uri: string
dimensions?: Dimensions
onSelect: (img?: RNImage) => void
}) {
const {closeModal} = useModalControls()
const pal = usePalette('default')
const {_} = useLingui()
const [as, setAs] = React.useState<AspectRatio>(AspectRatio.Square)
const defaultAspectStyle = dimensions
? AspectRatio.Custom
: AspectRatio.Square
const [as, setAs] = React.useState<AspectRatio>(defaultAspectStyle)
const [scale, setScale] = React.useState<number>(1)
const editorRef = React.useRef<ImageEditor>(null)
const imageEditorWidth = dimensions ? dimensions.width : DIMS[as].width
const imageEditorHeight = dimensions ? dimensions.height : DIMS[as].height
const doSetAs = (v: AspectRatio) => () => setAs(v)
@ -57,8 +66,8 @@ export function Component({
path: dataUri,
mime: 'image/jpeg',
size: getDataUriSize(dataUri),
width: DIMS[as].width,
height: DIMS[as].height,
width: imageEditorWidth,
height: imageEditorHeight,
})
} else {
onSelect(undefined)
@ -73,7 +82,18 @@ export function Component({
cropperStyle = styles.cropperWide
} else if (as === AspectRatio.Tall) {
cropperStyle = styles.cropperTall
} else if (as === AspectRatio.Custom) {
const cropperDimensions = calculateDimensions(
550,
imageEditorHeight,
imageEditorWidth,
)
cropperStyle = {
width: cropperDimensions.width,
height: cropperDimensions.height,
}
}
return (
<View>
<View style={[styles.cropper, pal.borderDark, cropperStyle]}>
@ -81,8 +101,8 @@ export function Component({
ref={editorRef}
style={styles.imageEditor}
image={uri}
width={DIMS[as].width}
height={DIMS[as].height}
width={imageEditorWidth}
height={imageEditorHeight}
scale={scale}
border={0}
/>