@choice-ui/react 1.6.8 → 1.6.9

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

@@ -12,6 +12,11 @@ interface PicturePreviewProps extends HTMLProps<HTMLDivElement> {
     fileName?: string;
     onClose?: () => void;
     src: string;
+    control?: {
+        enable?: boolean;
+        position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        show?: "always" | "hover";
+    };
 }
 export declare const PicturePreview: import('react').ForwardRefExoticComponent<Omit<PicturePreviewProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -2,16 +2,17 @@ import { jsxs, jsx } from "react/jsx-runtime";
 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 { PicturePreviewTv } from "./tv.js";
 import { useDraggable } from "./hooks/useDraggable.js";
 import { useWheelHandler } from "./hooks/useWheelHandler.js";
 import { useHotkeys, HOTKEYS } from "./hooks/useHotkeys.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
-const MIN_ZOOM = 0.01;
-const MAX_ZOOM = 10;
 const ZOOM_STEP = 0.1;
 const INITIAL_ZOOM = 1;
+const MIN_ACTUAL_PERCENT = 2;
+const MAX_ACTUAL_PERCENT = 1e3;
 const PicturePreview = forwardRef(
   function PicturePreview2(props, ref) {
     const {
@@ -29,16 +30,32 @@ const 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;
       }
@@ -46,7 +63,7 @@ const PicturePreview = forwardRef(
         setZoom(zoomRef.current);
         rafId.current = null;
       });
-    }, []);
+    });
     useEffect(() => {
       return () => {
         if (rafId.current !== null) {
@@ -58,43 +75,52 @@ const 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,
@@ -113,13 +139,16 @@ const 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") {
@@ -139,26 +168,75 @@ const 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",
@@ -166,7 +244,7 @@ const PicturePreview = forwardRef(
               height: 32
             }
           ) }),
-          isError && /* @__PURE__ */ jsxs("div", { className: styles.loading(), children: [
+          isError && /* @__PURE__ */ jsxs("div", { className: tv.loading(), children: [
             /* @__PURE__ */ jsx(
               ImageRemove,
               {
@@ -176,19 +254,24 @@ const 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",
@@ -198,7 +281,7 @@ const 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,
               {
@@ -215,82 +298,90 @@ const 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/tv.d.ts

@@ -3,7 +3,9 @@ export declare const PicturePreviewTv: import('tailwind-variants').TVReturnType<
         true: {
             image: string;
         };
-        false: {};
+        false: {
+            image: string;
+        };
     };
     isError: {
         true: {
@@ -11,6 +13,34 @@ export declare const PicturePreviewTv: import('tailwind-variants').TVReturnType<
         };
         false: {};
     };
+    isMenuOpen: {
+        true: {
+            controlGroup: string;
+        };
+        false: {};
+    };
+    controlPosition: {
+        "top-left": {
+            controlGroup: string;
+        };
+        "top-right": {
+            controlGroup: string;
+        };
+        "bottom-left": {
+            controlGroup: string;
+        };
+        "bottom-right": {
+            controlGroup: string;
+        };
+    };
+    controlShow: {
+        always: {
+            controlGroup: string;
+        };
+        hover: {
+            controlGroup: string;
+        };
+    };
 }, {
     root: string[];
     loading: string[];
@@ -23,7 +53,9 @@ export declare const PicturePreviewTv: import('tailwind-variants').TVReturnType<
         true: {
             image: string;
         };
-        false: {};
+        false: {
+            image: string;
+        };
     };
     isError: {
         true: {
@@ -31,6 +63,34 @@ export declare const PicturePreviewTv: import('tailwind-variants').TVReturnType<
         };
         false: {};
     };
+    isMenuOpen: {
+        true: {
+            controlGroup: string;
+        };
+        false: {};
+    };
+    controlPosition: {
+        "top-left": {
+            controlGroup: string;
+        };
+        "top-right": {
+            controlGroup: string;
+        };
+        "bottom-left": {
+            controlGroup: string;
+        };
+        "bottom-right": {
+            controlGroup: string;
+        };
+    };
+    controlShow: {
+        always: {
+            controlGroup: string;
+        };
+        hover: {
+            controlGroup: string;
+        };
+    };
 }, {
     root: string[];
     loading: string[];
@@ -43,7 +103,9 @@ export declare const PicturePreviewTv: import('tailwind-variants').TVReturnType<
         true: {
             image: string;
         };
-        false: {};
+        false: {
+            image: string;
+        };
     };
     isError: {
         true: {
@@ -51,6 +113,34 @@ export declare const PicturePreviewTv: import('tailwind-variants').TVReturnType<
         };
         false: {};
     };
+    isMenuOpen: {
+        true: {
+            controlGroup: string;
+        };
+        false: {};
+    };
+    controlPosition: {
+        "top-left": {
+            controlGroup: string;
+        };
+        "top-right": {
+            controlGroup: string;
+        };
+        "bottom-left": {
+            controlGroup: string;
+        };
+        "bottom-right": {
+            controlGroup: string;
+        };
+    };
+    controlShow: {
+        always: {
+            controlGroup: string;
+        };
+        hover: {
+            controlGroup: string;
+        };
+    };
 }, {
     root: string[];
     loading: string[];