Skip to content

Commit

Permalink
Image editing: zoom in percentage (#23362)
Browse files Browse the repository at this point in the history
  • Loading branch information
ellatrix authored and noisysocks committed Jun 24, 2020
1 parent 4d505e6 commit 23e187c
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions packages/block-library/src/image/image-editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,8 @@ import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';

const MIN_ZOOM = 1;
const MAX_ZOOM = 3;
const ZOOM_STEP = 0.01;
const MIN_ZOOM = 100;
const MAX_ZOOM = 300;
const POPOVER_PROPS = { position: 'bottom right' };

function AspectGroup( { aspectRatios, isDisabled, label, onClick } ) {
Expand Down Expand Up @@ -148,7 +147,7 @@ export default function ImageEditor( {
const [ inProgress, setIsProgress ] = useState( false );
const [ crop, setCrop ] = useState( null );
const [ position, setPosition ] = useState( { x: 0, y: 0 } );
const [ zoom, setZoom ] = useState( 1 );
const [ zoom, setZoom ] = useState( 100 );
const [ aspect, setAspect ] = useState( naturalWidth / naturalHeight );
const [ rotation, setRotation ] = useState( 0 );
const [ editedUrl, setEditedUrl ] = useState();
Expand Down Expand Up @@ -275,14 +274,16 @@ export default function ImageEditor( {
<Cropper
image={ editedUrl || url }
disabled={ inProgress }
minZoom={ MIN_ZOOM }
maxZoom={ MAX_ZOOM }
minZoom={ MIN_ZOOM / 100 }
maxZoom={ MAX_ZOOM / 100 }
crop={ position }
zoom={ zoom }
zoom={ zoom / 100 }
aspect={ aspect }
onCropChange={ setPosition }
onCropComplete={ setCrop }
onZoomChange={ setZoom }
onZoomChange={ ( newZoom ) => {
setZoom( newZoom * 100 );
} }
/>
{ inProgress && <Spinner /> }
</div>
Expand All @@ -292,8 +293,7 @@ export default function ImageEditor( {
label={ __( 'Zoom' ) }
min={ MIN_ZOOM }
max={ MAX_ZOOM }
step={ ZOOM_STEP }
value={ zoom }
value={ Math.round( zoom ) }
onChange={ setZoom }
/>
) }
Expand Down

0 comments on commit 23e187c

Please sign in to comment.