pregame cleanup

WordPress · Jul 7, 2022 · bb9f1dd · bb9f1dd
1 parent 84196c2
commit bb9f1dd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 21 deletions.
diff --git a/packages/components/src/focal-point-picker/focal-point.js b/packages/components/src/focal-point-picker/focal-point.js
@@ -21,10 +21,7 @@ export default function FocalPoint( {
 		'components-focal-point-picker__icon_container'
 	);
 
-	const style = {
-		left: coordinates.left,
-		top: coordinates.top,
-	};
+	const style = { ...coordinates };
 
 	return (
 		<FocalPointWrapper { ...props } className={ classes } style={ style }>

diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
@@ -23,7 +23,6 @@ import {
 	MediaWrapper,
 	MediaContainer,
 } from './styles/focal-point-picker-style';
-import { roundClamp } from '../utils/math';
 import { INITIAL_BOUNDS } from './utils';
 
 export class FocalPointPicker extends Component {
@@ -83,7 +82,7 @@ export class FocalPointPicker extends Component {
 		} = this.state;
 		const { value } = this.props;
 		if ( ! isDragging && ( value.x !== x || value.y !== y ) ) {
-			this.setState( { percentages: this.props.value } );
+			this.setState( { percentages: value } );
 		}
 	}
 	componentWillUnmount() {
@@ -129,7 +128,7 @@ export class FocalPointPicker extends Component {
 		}
 		return bounds;
 	}
-	updateValue( nextValue = {}, callback ) {
+	updateValue( nextValue, callback ) {
 		const resolvedValue =
 			this.props.resolvePoint?.( nextValue ) ?? nextValue;
 
@@ -148,7 +147,6 @@ export class FocalPointPicker extends Component {
 		} );
 	}
 	startDrag( event ) {
-		event.persist();
 		this.containerRef.current.focus();
 		this.setState( { isDragging: true } );
 		const { ownerDocument } = this.containerRef.current;
@@ -182,7 +180,7 @@ export class FocalPointPicker extends Component {
 		const axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';
 		const value = parseFloat( next[ axis ] ) + delta;
 
-		next[ axis ] = roundClamp( value, 0, 1, step );
+		next[ axis ] = value;
 
 		this.updateValue( next, () => {
 			this.props.onChange( this.state.percentages );
@@ -223,10 +221,10 @@ export class FocalPointPicker extends Component {
 			( top - bounds.top ) / ( pickerDimensions.height - bounds.top * 2 );
 
 		// Enables holding shift to jump values by 10%
-		const step = byTenths ? 0.1 : 0.01;
-
-		nextX = roundClamp( nextX, 0, 1, step );
-		nextY = roundClamp( nextY, 0, 1, step );
+		if ( byTenths ) {
+			nextX = Math.round( nextX / 0.1 ) * 0.1;
+			nextY = Math.round( nextY / 0.1 ) * 0.1;
+		}
 
 		return { x: nextX, y: nextY };
 	}
@@ -259,10 +257,7 @@ export class FocalPointPicker extends Component {
 		} = this.state;
 
 		if ( bounds.left === undefined || bounds.top === undefined ) {
-			return {
-				left: '50%',
-				top: '50%',
-			};
+			return;
 		}
 
 		const { width, height } = this.pickerDimensions();
@@ -275,7 +270,6 @@ export class FocalPointPicker extends Component {
 		const { autoPlay, className, help, instanceId, label, url } =
 			this.props;
 		const { bounds, isDragging, percentages } = this.state;
-		const iconCoordinates = this.iconCoordinates();
 
 		const classes = classnames(
 			'components-focal-point-picker-control',
@@ -313,7 +307,7 @@ export class FocalPointPicker extends Component {
 							src={ url }
 						/>
 						<FocalPoint
-							coordinates={ iconCoordinates }
+							coordinates={ this.iconCoordinates() }
 							isDragging={ isDragging }
 						/>
 					</MediaContainer>

diff --git a/packages/components/src/focal-point-picker/test/index.js b/packages/components/src/focal-point-picker/test/index.js
@@ -63,7 +63,7 @@ describe( 'FocalPointPicker', () => {
 	} );
 
 	describe( 'resolvePoint handling', () => {
-		it( 'should allow value altering', async () => {
+		it( 'should allow value altering', () => {
 			const spyChange = jest.fn();
 			const spy = jest.fn();
 			const { getByRole } = render(
@@ -99,7 +99,7 @@ describe( 'FocalPointPicker', () => {
 			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
-		it( 'call onChange with the expected values', async () => {
+		it( 'call onChange with the expected values', () => {
 			const spyChange = jest.fn();
 			const { getByRole } = render(
 				<Picker value={ { x: 0.14, y: 0.62 } } onChange={ spyChange } />