handle Decimals with FocalPointPicker ?

[Nonimart]

Hi everyone,

I'm reposting a question originally submitted here.
(with the idea here might be a better place for that kind of question ? ) .

I was wondering if there is a propper/native way to handle decimals for the focal point picker component ?

I’am building a simple gutenberg block, requiring precise positionning, with decimals (ex 88.5%) . I could surely handle this with custom fields, but I’m curious to know it if there would be a native way to handle this scenario.

<FocalPointPicker
   url={coverUrl ?? null}
   value={objectPosition}
   onChange={(focalPoint) => {
   handleChangeobjectPosition(focalPoint);
   }}
   resolvePoint={resolvepoint}
 /> 

I’ve tried using the resolvePoint method mentionned in the doc, which outputs a precise position, but the number with decimals then get rounded when passed to the handleChange function anyway.

Many thanks in advance for the Help,

[stokesman]

I suspect it may work to side-step the issue using resolvePoint to stash the point in a ref at the precision you desire and then reference that from the onChange callback instead of the value it receives.

const refPrecisePoint = useRef();

<FocalPointPicker
   url={coverUrl ?? null}
   value={objectPosition}
   onChange={() => {
      handleChangeobjectPosition(refPrecisePoint.current);
   }}
   resolvePoint={(focalPoint) => {
      const [ x, y ] = Object.values( focalPoint ).map(
         // Clamps the value from zero to one and rounds to three decimals.
         v => Math.round( Math.max( 0, Math.min( v, 1 ) * 1e3 ) ) / 1e3
      );
      refPrecisePoint.current = { x, y };
      return focalPoint;
   }}
 /> 

If that doesn’t work, it’s going to require opening a feature request that FocalPointPicker support configurable precision. Even if this does work it’s a bit ugly/wasteful so the feature request is not frivolous IMO.