Is there any examples for using zoom and slowly moving back to center with constraints?

[tonyneel923]

Creating a zoomable map with border constraints. I have everything working except for if you zoom and drag near the edge you cannot zoom all the way back out because of constraints.

Ideally I would like to gradually move it back to the center of the map while zooming out but could not get this functionality to work.

[bryanrsmith]

I know this is super old, but I had the same requirement and couldn't find any examples. Here's what I came up with, which is working well for me:

const constrainZoom = useMemo(
  () => (transformMatrix, prevTransformMatrix) => {
    // if trying to zoom in too far, ignore the change
    if (transformMatrix.scaleX > 4) {
      return prevTransformMatrix;
    }

    // if trying to zoom out too far, reset to default
    if (transformMatrix.scaleX <= 1) {
      return {
        skewX: 0,
        skewY: 0,
        scaleX: 1,
        scaleY: 1,
        translateX: 0,
        translateY: 0,
      };
    }

    // clamp translate so that the chart doesn't move inward when zooming out near edges
    return {
      ...transformMatrix,
      translateX: Math.min(
        0,
        Math.max(width - width * transformMatrix.scaleX, transformMatrix.translateX)
      ),
      translateY: Math.min(
        0,
        Math.max(height - height * transformMatrix.scaleY, transformMatrix.translateY)
      ),
    };
  },
  [width, height]
);

Pass as the constrain prop to the Zoom component:

<Zoom width={with} height={height} constrain={constrainZoom}>