@choice-ui/react 1.6.8 → 1.6.9

package/dist/components/picture-preview/dist/index.js

@@ -1,7 +1,8 @@
 import { Dropdown as Dropdown2 } from "../../dropdown/dist/index.js";
 import { IconButton } from "../../icon-button/dist/index.js";
 import { LoaderCircle, ImageRemove, Delete, Add } from "@choiceform/icons-react";
-import { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { forwardRef, useState, useMemo, useRef, useEffect, useCallback } from "react";
+import { useEventCallback } from "usehooks-ts";
 import isHotkey from "is-hotkey";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -91,7 +92,7 @@ function useDraggable(initialPosition = { x: 0, y: 0 }, options = {}) {
   };
 }
 function useWheelHandler(targetRef, zoomRef, positionRef, options = {}) {
-  const { minZoom = 0.01, maxZoom = 10, zoomStep = 0.1, onZoom, onPan } = options;
+  const { minZoom = 0.01, maxZoom = 10, zoomStep = 0.1, onZoom, onPan, onZoomAtPoint } = options;
   const isMac = useRef(
     typeof navigator !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0
   );
@@ -100,14 +101,32 @@ function useWheelHandler(targetRef, zoomRef, positionRef, options = {}) {
     (event) => {
       event.preventDefault();
       event.stopPropagation();
-      if (!zoomRef.current || !positionRef.current) return;
+      if (zoomRef.current === void 0 || zoomRef.current === null || !positionRef.current) return;
       const isPreciseEvent = event.deltaMode === 0;
       const hasDeltaX = Math.abs(event.deltaX) > 0;
       const isZoomModifier = isMac.current && event.metaKey || !isMac.current && event.ctrlKey;
-      if (isZoomModifier) {
-        const delta = -Math.sign(event.deltaY) * zoomStep;
-        const newZoom = Math.max(minZoom, Math.min(maxZoom, zoomRef.current + delta));
-        if (onZoom) {
+      const isPinchZoom = event.ctrlKey && isPreciseEvent && !event.metaKey;
+      if (isZoomModifier || isPinchZoom) {
+        const oldZoom = zoomRef.current;
+        let newZoom;
+        const sensitivity = isPinchZoom ? 8e-3 : 3e-3;
+        const delta = event.deltaY;
+        newZoom = oldZoom * Math.exp(-delta * sensitivity);
+        newZoom = Math.max(minZoom, Math.min(maxZoom, newZoom));
+        const target = targetRef.current;
+        if (onZoomAtPoint && target) {
+          const rect = target.getBoundingClientRect();
+          const mouseX = event.clientX - rect.left - rect.width / 2;
+          const mouseY = event.clientY - rect.top - rect.height / 2;
+          const zoomRatio = newZoom / oldZoom;
+          const currentX = positionRef.current.x;
+          const currentY = positionRef.current.y;
+          const newPosition = {
+            x: mouseX - (mouseX - currentX) * zoomRatio,
+            y: mouseY - (mouseY - currentY) * zoomRatio
+          };
+          onZoomAtPoint({ newZoom, newPosition });
+        } else if (onZoom) {
           onZoom(newZoom);
         }
       } else if (isPreciseEvent && hasDeltaX) {
@@ -139,7 +158,7 @@ function useWheelHandler(targetRef, zoomRef, positionRef, options = {}) {
         }
       }
     },
-    [minZoom, maxZoom, zoomStep, onZoom, onPan]
+    [minZoom, maxZoom, onZoom, onPan, onZoomAtPoint, targetRef]
   );
   const handleKeyDown = useCallback((e) => {
     if (isMac.current && e.metaKey || !isMac.current && e.ctrlKey) {
@@ -200,24 +219,30 @@ var HOTKEYS = {
 };
 var PicturePreviewTv = tcv({
   slots: {
-    root: ["relative flex flex-col overflow-hidden", "h-full w-full", "touch-none select-none"],
+    root: [
+      "group/picture-preview relative flex flex-col overflow-hidden",
+      "h-full w-full",
+      "touch-none select-none"
+    ],
     loading: [
       "text-secondary-foreground absolute inset-0 z-10 flex flex-col items-center justify-center gap-4"
     ],
     content: [
       "relative flex-1 overflow-hidden",
       "flex items-center justify-center",
-      "bg-gray-100 dark:bg-gray-900"
+      "bg-gray-100 dark:bg-gray-900",
+      "[contain:layout_paint]"
     ],
     canvas: [
-      "relative h-full w-full",
       "transform-gpu will-change-transform",
-      "cursor-grab active:cursor-grabbing"
+      "cursor-grab active:cursor-grabbing",
+      "origin-center",
+      "flex items-center justify-center"
     ],
-    image: ["pointer-events-none", "h-full w-full object-contain"],
+    image: ["pointer-events-none", "block w-auto h-auto"],
     controlGroup: [
       "overflow-hidden",
-      "absolute right-2 bottom-2 flex items-center",
+      "absolute flex items-center",
       "bg-default-background",
       "rounded-md",
       "shadow-md"
@@ -226,26 +251,58 @@ var PicturePreviewTv = tcv({
   variants: {
     isLoading: {
       true: {
-        image: "opacity-0 transition-opacity duration-300"
+        image: "opacity-0 scale-105 blur-sm transition-all duration-500 ease-out"
       },
-      false: {}
+      false: {
+        image: "opacity-100 scale-100 blur-0 transition-all duration-500 ease-out"
+      }
     },
     isError: {
       true: {
-        image: "opacity-0 transition-opacity duration-300"
+        image: "opacity-0"
+      },
+      false: {}
+    },
+    isMenuOpen: {
+      true: {
+        controlGroup: "opacity-100"
       },
       false: {}
+    },
+    controlPosition: {
+      "top-left": {
+        controlGroup: "top-2 left-2"
+      },
+      "top-right": {
+        controlGroup: "top-2 right-2"
+      },
+      "bottom-left": {
+        controlGroup: "bottom-2 left-2"
+      },
+      "bottom-right": {
+        controlGroup: "bottom-2 right-2"
+      }
+    },
+    controlShow: {
+      always: {
+        controlGroup: ""
+      },
+      hover: {
+        controlGroup: "group-hover/picture-preview:opacity-100 opacity-0 transition-opacity duration-200"
+      }
     }
   },
   defaultVariants: {
     isLoading: false,
-    isError: false
+    isError: false,
+    isMenuOpen: false,
+    controlPosition: "bottom-right"
   }
 });
-var MIN_ZOOM = 0.01;
-var MAX_ZOOM = 10;
 var ZOOM_STEP = 0.1;
 var INITIAL_ZOOM = 1;
+var MIN_ACTUAL_PERCENT = 2;
+var MAX_ACTUAL_PERCENT = 1e3;
 var PicturePreview = forwardRef(
   function PicturePreview2(props, ref) {
     const {
@@ -263,16 +320,32 @@ var PicturePreview = forwardRef(
         zoomTo200: "Zoom to 200%",
         error: "Image loading failed, please try again."
       },
+      control = {
+        enable: true,
+        position: "bottom-right",
+        show: "hover"
+      },
       ...rest
     } = props;
     const [zoom, setZoom] = useState(INITIAL_ZOOM);
     const [isLoading, setIsLoading] = useState(true);
     const [isError, setIsError] = useState(false);
+    const [naturalSize, setNaturalSize] = useState(null);
+    const [baseScale, setBaseScale] = useState(1);
+    const [menuIsOpen, setMenuIsOpen] = useState(false);
+    const minZoom = useMemo(
+      () => baseScale > 0 ? MIN_ACTUAL_PERCENT / 100 / baseScale : 0.01,
+      [baseScale]
+    );
+    const maxZoom = useMemo(
+      () => baseScale > 0 ? MAX_ACTUAL_PERCENT / 100 / baseScale : 100,
+      [baseScale]
+    );
     const internalRef = useRef(null);
     const canvasRef = useRef(null);
     const zoomRef = useRef(zoom);
     const rafId = useRef(null);
-    const scheduleUpdate = useCallback(() => {
+    const scheduleUpdate = useEventCallback(() => {
       if (rafId.current !== null) {
         return;
       }
@@ -280,7 +353,7 @@ var PicturePreview = forwardRef(
         setZoom(zoomRef.current);
         rafId.current = null;
       });
-    }, []);
+    });
     useEffect(() => {
       return () => {
         if (rafId.current !== null) {
@@ -292,43 +365,52 @@ var PicturePreview = forwardRef(
       zoomRef.current = zoom;
     }, [zoom]);
     const { position, isDragging, handleMouseDown, updatePosition, positionRef } = useDraggable();
-    const handleZoomChange = useCallback(
-      (newZoom) => {
-        zoomRef.current = newZoom;
+    const handlePositionChange = useEventCallback((newPosition) => {
+      updatePosition(newPosition);
+    });
+    const handleZoomAtPoint = useEventCallback(
+      (params) => {
+        zoomRef.current = params.newZoom;
+        updatePosition(params.newPosition);
         scheduleUpdate();
-      },
-      [scheduleUpdate]
-    );
-    const handlePositionChange = useCallback(
-      (newPosition) => {
-        updatePosition(newPosition);
-      },
-      [updatePosition]
+      }
     );
     useWheelHandler(internalRef, zoomRef, positionRef, {
-      minZoom: MIN_ZOOM,
-      maxZoom: MAX_ZOOM,
+      minZoom,
+      maxZoom,
       zoomStep: ZOOM_STEP,
-      onZoom: handleZoomChange,
-      onPan: handlePositionChange
+      onPan: handlePositionChange,
+      onZoomAtPoint: handleZoomAtPoint
+    });
+    const zoomIn = useEventCallback(() => {
+      zoomRef.current = Math.min(maxZoom, zoomRef.current + ZOOM_STEP);
+      scheduleUpdate();
     });
-    const zoomIn = useCallback(() => {
-      handleZoomChange(Math.min(MAX_ZOOM, zoomRef.current + ZOOM_STEP));
-    }, [handleZoomChange]);
-    const zoomOut = useCallback(() => {
-      handleZoomChange(Math.max(MIN_ZOOM, zoomRef.current - ZOOM_STEP));
-    }, [handleZoomChange]);
-    const resetView = useCallback(() => {
+    const zoomOut = useEventCallback(() => {
+      zoomRef.current = Math.max(minZoom, zoomRef.current - ZOOM_STEP);
+      scheduleUpdate();
+    });
+    const resetView = useEventCallback(() => {
       zoomRef.current = INITIAL_ZOOM;
       updatePosition({ x: 0, y: 0 });
       scheduleUpdate();
-    }, [updatePosition, scheduleUpdate]);
-    const fitToView = useCallback(() => {
-      if (!canvasRef.current) return;
-      zoomRef.current = 1;
+    });
+    const fitToView = useEventCallback(() => {
+      if (!canvasRef.current || !naturalSize || !internalRef.current || baseScale <= 0) return;
+      const containerRect = internalRef.current.getBoundingClientRect();
+      const containerWidth = containerRect.width;
+      const containerHeight = containerRect.height;
+      if (naturalSize.width <= 0 || naturalSize.height <= 0) return;
+      const scaleX = containerWidth / naturalSize.width;
+      const scaleY = containerHeight / naturalSize.height;
+      const fitScale = Math.min(scaleX, scaleY);
+      zoomRef.current = fitScale / baseScale;
       updatePosition({ x: 0, y: 0 });
       scheduleUpdate();
-    }, [updatePosition, scheduleUpdate]);
+    });
+    const handleDoubleClick = useEventCallback(() => {
+      fitToView();
+    });
     useHotkeys([
       {
         hotkey: HOTKEYS.ZOOM_IN,
@@ -347,13 +429,16 @@ var PicturePreview = forwardRef(
         handler: () => fitToView()
       }
     ]);
-    const handleZoomMenuItemClick = useCallback(
-      (zoomLevel) => {
-        zoomRef.current = zoomLevel;
-        scheduleUpdate();
-      },
-      [scheduleUpdate]
-    );
+    const handleZoomMenuItemClick = useEventCallback((zoomLevel) => {
+      zoomRef.current = zoomLevel;
+      scheduleUpdate();
+    });
+    const setActualZoomPercent = useEventCallback((percent) => {
+      if (baseScale === 0) return;
+      const newZoom = percent / 100 / baseScale;
+      zoomRef.current = Math.max(minZoom, Math.min(maxZoom, newZoom));
+      scheduleUpdate();
+    });
     useEffect(() => {
       if (!internalRef.current) return;
       if (typeof ref === "function") {
@@ -373,26 +458,75 @@ var PicturePreview = forwardRef(
         backfaceVisibility: "hidden"
       };
     }, [position.x, position.y, zoom, isDragging]);
+    const calculateBaseScale = useCallback(() => {
+      if (!naturalSize || !internalRef.current) return 1;
+      const containerRect = internalRef.current.getBoundingClientRect();
+      const containerWidth = containerRect.width;
+      const containerHeight = containerRect.height;
+      if (naturalSize.width <= 0 || naturalSize.height <= 0 || containerWidth <= 0 || containerHeight <= 0) {
+        return 1;
+      }
+      const scaleX = containerWidth / naturalSize.width;
+      const scaleY = containerHeight / naturalSize.height;
+      return Math.min(scaleX, scaleY);
+    }, [naturalSize]);
+    useEffect(() => {
+      if (!naturalSize || !internalRef.current) return;
+      const updateBaseScale = () => {
+        const scale = calculateBaseScale();
+        setBaseScale(scale);
+      };
+      updateBaseScale();
+      const resizeObserver = new ResizeObserver(() => {
+        updateBaseScale();
+      });
+      resizeObserver.observe(internalRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [naturalSize, calculateBaseScale]);
     useEffect(() => {
       setIsLoading(true);
+      setIsError(false);
+      setNaturalSize(null);
       const img = new Image();
-      img.src = src;
+      let isCancelled = false;
       img.onload = () => {
+        if (isCancelled) return;
+        setNaturalSize({ width: img.naturalWidth, height: img.naturalHeight });
         setIsLoading(false);
       };
       img.onerror = () => {
+        if (isCancelled) return;
+        setIsError(true);
         setIsLoading(false);
       };
+      img.src = src;
+      return () => {
+        isCancelled = true;
+        img.onload = null;
+        img.onerror = null;
+        img.src = "";
+      };
     }, [src]);
-    const styles = PicturePreviewTv({ isLoading, isError });
+    const actualZoomPercent = useMemo(() => {
+      return Math.round(zoom * baseScale * 100);
+    }, [zoom, baseScale]);
+    const tv = PicturePreviewTv({
+      isLoading,
+      isError,
+      isMenuOpen: menuIsOpen,
+      controlPosition: control.position,
+      controlShow: control.show
+    });
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref: internalRef,
-        className: tcx(styles.root(), className),
+        className: tcx(tv.root(), className),
         ...rest,
         children: [
-          isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading(), children: /* @__PURE__ */ jsx(
+          isLoading && /* @__PURE__ */ jsx("div", { className: tv.loading(), children: /* @__PURE__ */ jsx(
             LoaderCircle,
             {
               className: "animate-spin",
@@ -400,7 +534,7 @@ var PicturePreview = forwardRef(
               height: 32
             }
           ) }),
-          isError && /* @__PURE__ */ jsxs("div", { className: styles.loading(), children: [
+          isError && /* @__PURE__ */ jsxs("div", { className: tv.loading(), children: [
             /* @__PURE__ */ jsx(
               ImageRemove,
               {
@@ -410,19 +544,24 @@ var PicturePreview = forwardRef(
             ),
             /* @__PURE__ */ jsx("span", { children: defaultText.error })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.content(), children: /* @__PURE__ */ jsx(
+          !isError && /* @__PURE__ */ jsx("div", { className: tv.content(), children: /* @__PURE__ */ jsx(
             "div",
             {
               ref: canvasRef,
-              className: styles.canvas(),
+              className: tv.canvas(),
               style: transformStyle,
               onMouseDown: handleMouseDown,
+              onDoubleClick: handleDoubleClick,
               children: /* @__PURE__ */ jsx(
                 "img",
                 {
                   src,
                   alt: fileName || "Preview",
-                  className: styles.image(),
+                  className: tv.image(),
+                  style: naturalSize ? {
+                    width: naturalSize.width * baseScale,
+                    height: naturalSize.height * baseScale
+                  } : void 0,
                   draggable: false,
                   loading: "eager",
                   decoding: "async",
@@ -432,7 +571,7 @@ var PicturePreview = forwardRef(
               )
             }
           ) }),
-          isError || isLoading ? null : /* @__PURE__ */ jsxs("div", { className: styles.controlGroup(), children: [
+          isError || isLoading || control.enable === false ? null : /* @__PURE__ */ jsxs("div", { className: tv.controlGroup(), children: [
             /* @__PURE__ */ jsx(
               IconButton,
               {
@@ -449,82 +588,90 @@ var PicturePreview = forwardRef(
                 children: /* @__PURE__ */ jsx(Delete, {})
               }
             ),
-            /* @__PURE__ */ jsxs(Dropdown2, { selection: true, children: [
-              /* @__PURE__ */ jsx(
-                Dropdown2.Trigger,
-                {
-                  variant: "ghost",
-                  className: "border-x-default rounded-none",
-                  size: "large",
-                  children: /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
-                    Math.round(zoom * 100),
-                    "%"
+            /* @__PURE__ */ jsxs(
+              Dropdown2,
+              {
+                selection: true,
+                open: menuIsOpen,
+                onOpenChange: setMenuIsOpen,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Dropdown2.Trigger,
+                    {
+                      variant: "ghost",
+                      className: "border-x-default rounded-none",
+                      size: "large",
+                      children: /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
+                        actualZoomPercent,
+                        "%"
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Dropdown2.Content, { children: [
+                    /* @__PURE__ */ jsx(
+                      Dropdown2.Item,
+                      {
+                        onMouseUp: () => handleZoomMenuItemClick(zoomRef.current + ZOOM_STEP),
+                        shortcut: {
+                          keys: "+",
+                          modifier: "command"
+                        },
+                        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomIn })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Dropdown2.Item,
+                      {
+                        onMouseUp: () => handleZoomMenuItemClick(zoomRef.current - ZOOM_STEP),
+                        shortcut: {
+                          keys: "-",
+                          modifier: "command"
+                        },
+                        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomOut })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Dropdown2.Item,
+                      {
+                        selected: actualZoomPercent === 50,
+                        onMouseUp: () => setActualZoomPercent(50),
+                        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo50 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Dropdown2.Item,
+                      {
+                        selected: actualZoomPercent === 100,
+                        onMouseUp: () => setActualZoomPercent(100),
+                        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo100 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Dropdown2.Item,
+                      {
+                        selected: actualZoomPercent === 200,
+                        onMouseUp: () => setActualZoomPercent(200),
+                        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo200 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Dropdown2.Divider, {}),
+                    /* @__PURE__ */ jsx(
+                      Dropdown2.Item,
+                      {
+                        onMouseUp: () => {
+                          fitToView();
+                        },
+                        shortcut: {
+                          keys: "1",
+                          modifier: "command"
+                        },
+                        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.fitToScreen })
+                      }
+                    )
                   ] })
-                }
-              ),
-              /* @__PURE__ */ jsxs(Dropdown2.Content, { children: [
-                /* @__PURE__ */ jsx(
-                  Dropdown2.Item,
-                  {
-                    onMouseUp: () => handleZoomMenuItemClick(zoomRef.current + ZOOM_STEP),
-                    shortcut: {
-                      keys: "+",
-                      modifier: "command"
-                    },
-                    children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomIn })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Dropdown2.Item,
-                  {
-                    onMouseUp: () => handleZoomMenuItemClick(zoomRef.current - ZOOM_STEP),
-                    shortcut: {
-                      keys: "-",
-                      modifier: "command"
-                    },
-                    children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomOut })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Dropdown2.Item,
-                  {
-                    selected: zoomRef.current === 0.5,
-                    onMouseUp: () => handleZoomMenuItemClick(0.5),
-                    children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo50 })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Dropdown2.Item,
-                  {
-                    selected: zoomRef.current === 1,
-                    onMouseUp: () => handleZoomMenuItemClick(1),
-                    children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo100 })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Dropdown2.Item,
-                  {
-                    selected: zoomRef.current === 2,
-                    onMouseUp: () => handleZoomMenuItemClick(2),
-                    children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo200 })
-                  }
-                ),
-                /* @__PURE__ */ jsx(Dropdown2.Divider, {}),
-                /* @__PURE__ */ jsx(
-                  Dropdown2.Item,
-                  {
-                    onMouseUp: () => {
-                      fitToView();
-                    },
-                    shortcut: {
-                      keys: "1",
-                      modifier: "command"
-                    },
-                    children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.fitToScreen })
-                  }
-                )
-              ] })
-            ] }),
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx(
               IconButton,
               {

package/dist/components/picture-preview/src/hooks/useWheelHandler.d.ts

@@ -2,12 +2,17 @@ interface Position {
     x: number;
     y: number;
 }
+interface ZoomAtPointParams {
+    newZoom: number;
+    newPosition: Position;
+}
 interface WheelHandlerOptions {
     minZoom?: number;
     maxZoom?: number;
     zoomStep?: number;
     onZoom?: (newZoom: number) => void;
     onPan?: (newPosition: Position) => void;
+    onZoomAtPoint?: (params: ZoomAtPointParams) => void;
 }
 /**
  * 用于处理鼠标滚轮和触摸板手势的自定义Hook
@@ -16,7 +21,7 @@ interface WheelHandlerOptions {
  * @param positionRef 当前位置的ref
  * @param options 配置选项
  */
-export declare function useWheelHandler(targetRef: React.RefObject<HTMLElement>, zoomRef: React.RefObject<number>, positionRef: React.RefObject<Position>, options?: WheelHandlerOptions): {
+export declare function useWheelHandler(targetRef: React.RefObject<HTMLElement | null>, zoomRef: React.RefObject<number>, positionRef: React.RefObject<Position>, options?: WheelHandlerOptions): {
     isMac: boolean;
     isCmdPressed: import('react').MutableRefObject<boolean>;
 };

package/dist/components/picture-preview/src/hooks/useWheelHandler.js

@@ -1,6 +1,6 @@
 import { useRef, useCallback, useEffect } from "react";
 function useWheelHandler(targetRef, zoomRef, positionRef, options = {}) {
-  const { minZoom = 0.01, maxZoom = 10, zoomStep = 0.1, onZoom, onPan } = options;
+  const { minZoom = 0.01, maxZoom = 10, zoomStep = 0.1, onZoom, onPan, onZoomAtPoint } = options;
   const isMac = useRef(
     typeof navigator !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0
   );
@@ -9,14 +9,32 @@ function useWheelHandler(targetRef, zoomRef, positionRef, options = {}) {
     (event) => {
       event.preventDefault();
       event.stopPropagation();
-      if (!zoomRef.current || !positionRef.current) return;
+      if (zoomRef.current === void 0 || zoomRef.current === null || !positionRef.current) return;
       const isPreciseEvent = event.deltaMode === 0;
       const hasDeltaX = Math.abs(event.deltaX) > 0;
       const isZoomModifier = isMac.current && event.metaKey || !isMac.current && event.ctrlKey;
-      if (isZoomModifier) {
-        const delta = -Math.sign(event.deltaY) * zoomStep;
-        const newZoom = Math.max(minZoom, Math.min(maxZoom, zoomRef.current + delta));
-        if (onZoom) {
+      const isPinchZoom = event.ctrlKey && isPreciseEvent && !event.metaKey;
+      if (isZoomModifier || isPinchZoom) {
+        const oldZoom = zoomRef.current;
+        let newZoom;
+        const sensitivity = isPinchZoom ? 8e-3 : 3e-3;
+        const delta = event.deltaY;
+        newZoom = oldZoom * Math.exp(-delta * sensitivity);
+        newZoom = Math.max(minZoom, Math.min(maxZoom, newZoom));
+        const target = targetRef.current;
+        if (onZoomAtPoint && target) {
+          const rect = target.getBoundingClientRect();
+          const mouseX = event.clientX - rect.left - rect.width / 2;
+          const mouseY = event.clientY - rect.top - rect.height / 2;
+          const zoomRatio = newZoom / oldZoom;
+          const currentX = positionRef.current.x;
+          const currentY = positionRef.current.y;
+          const newPosition = {
+            x: mouseX - (mouseX - currentX) * zoomRatio,
+            y: mouseY - (mouseY - currentY) * zoomRatio
+          };
+          onZoomAtPoint({ newZoom, newPosition });
+        } else if (onZoom) {
           onZoom(newZoom);
         }
       } else if (isPreciseEvent && hasDeltaX) {
@@ -48,7 +66,7 @@ function useWheelHandler(targetRef, zoomRef, positionRef, options = {}) {
         }
       }
     },
-    [minZoom, maxZoom, zoomStep, onZoom, onPan]
+    [minZoom, maxZoom, onZoom, onPan, onZoomAtPoint, targetRef]
   );
   const handleKeyDown = useCallback((e) => {
     if (isMac.current && e.metaKey || !isMac.current && e.ctrlKey) {