[Feature]: Allow Over Panning/Padding on Resumable Zoom

[KasperGam]

Summary

This project is great and works really well for most use cases I have! I have one small feature request, and I would be happy to put up a small PR to add it. Basically, I need to allow "over panning" in some cases, which doesn't snap back when the user is done. I just want to be able to let the user pan over a bit more than the child size, regardless of the current scale.

Expected API

My proposed api would be a new prop on the ResumableZoom component. I am thinking of calling it panPadding like the following:

panPadding: { horizontal: number; vertical: number };

When set, it would allow the user to pan or set the pan value with the extra padding applied to the child component. This seems easy to implement using the existing boundsFn, where we just add the user's provided panPadding to what it calculates there, e.g.

  const userExtraPadding = useDerivedValue(() => {
    return { x: panPadding.horizontal, y: panPadding.vertical };
  }, [panPadding.horizontal, panPadding.vertical]);

  const boundsFn: BoundsFuction = (optionalScale) => {
    'worklet';
    const actualScale = optionalScale ?? scale.value;
    const { width: cWidth, height: cHeight } = childSize;
    const { width: rWidth, height: rHeight } = rootSize;

    const boundX = Math.max(0, cWidth.value * actualScale - rWidth.value) / 2 + userExtraPadding.value.x;
    const boundY = Math.max(0, cHeight.value * actualScale - rHeight.value) / 2 + userExtraPadding.value.y;
    return { x: boundX, y: boundY };
  };

I've tested the code above, and it seems to work. Please let me know your thoughts. Thanks!