@rxdrag/website-lib-core 0.0.76 → 0.0.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.76",
+  "version": "0.0.77",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,9 +24,9 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
+    "@rxdrag/tsconfig": "0.2.0",
     "@rxdrag/slate-preview": "1.2.61",
-    "@rxdrag/eslint-config-custom": "0.2.12",
-    "@rxdrag/tsconfig": "0.2.0"
+    "@rxdrag/eslint-config-custom": "0.2.12"
   },
   "dependencies": {
     "@iconify/utils": "^3.0.2",
@@ -36,8 +36,8 @@
     "lodash-es": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/rxcms-models": "0.3.94",
-    "@rxdrag/entify-lib": "0.0.23"
+    "@rxdrag/entify-lib": "0.0.23",
+    "@rxdrag/rxcms-models": "0.3.94"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/react/components/Medias/MainMedia.tsx

@@ -36,9 +36,8 @@ export const MainMedia = ({
   const mainAreaRef = useRef<HTMLDivElement>(null);
   const [isZoomed, setIsZoomed] = useState(false);
   const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = useState(false);
-  const hasDraggedRef = useRef(false);
+  const hoverTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const lastMousePosRef = useRef({ x: 0, y: 0 });
 
   const selectedMedia = value?.find((media) => media.id === selectedId);
   const isVideo = selectedMedia?.mediaType === MediaType.video;
@@ -47,50 +46,75 @@ export const MainMedia = ({
   useEffect(() => {
     setIsZoomed(false);
     setPosition({ x: 0, y: 0 });
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
   }, [selectedId]);
 
-  const handleImageClick = () => {
-    if (!enableZoom || isVideo) return;
-    if (!hasDraggedRef.current) {
-      setIsZoomed(!isZoomed);
-      setPosition({ x: 0, y: 0 });
-    }
-  };
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if (!enableZoom || isVideo) return;
-    if (isZoomed) {
-      setIsDragging(true);
-      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
-      hasDraggedRef.current = false;
-      e.preventDefault();
+  // Clean up timer on unmount
+  useEffect(() => {
+    return () => {
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+    };
+  }, []);
+
+  const updateZoomPosition = useCallback((clientX: number, clientY: number) => {
+    if (mainAreaRef.current) {
+      const { left, top, width, height } =
+        mainAreaRef.current.getBoundingClientRect();
+      const x = clientX - left;
+      const y = clientY - top;
+
+      // Calculate percentage position (0 to 1)
+      const ratioX = Math.max(0, Math.min(1, x / width));
+      const ratioY = Math.max(0, Math.min(1, y / height));
+
+      // Formula: Translate = Dimension * (0.5 - Ratio)
+      // This shifts the image opposite to mouse movement relative to center
+      const newX = width * (0.5 - ratioX);
+      const newY = height * (0.5 - ratioY);
+
+      setPosition({ x: newX, y: newY });
     }
-  };
+  }, []);
 
-  const handleMouseMove = useCallback(
+  const handleMouseEnter = useCallback(
     (e: React.MouseEvent) => {
-      if (isDragging && isZoomed && mainAreaRef.current) {
-        hasDraggedRef.current = true;
-        const { width, height } = mainAreaRef.current.getBoundingClientRect();
-        const scale = 2;
-        const maxX = (width * (scale - 1)) / 2;
-        const maxY = (height * (scale - 1)) / 2;
+      if (!enableZoom || isVideo) return;
+      lastMousePosRef.current = { x: e.clientX, y: e.clientY };
 
-        let newX = e.clientX - dragStart.x;
-        let newY = e.clientY - dragStart.y;
+      hoverTimerRef.current = setTimeout(() => {
+        setIsZoomed(true);
+        updateZoomPosition(
+          lastMousePosRef.current.x,
+          lastMousePosRef.current.y
+        );
+      }, 200);
+    },
+    [enableZoom, isVideo, updateZoomPosition]
+  );
 
-        newX = Math.max(-maxX, Math.min(maxX, newX));
-        newY = Math.max(-maxY, Math.min(maxY, newY));
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!enableZoom || isVideo) return;
+      lastMousePosRef.current = { x: e.clientX, y: e.clientY };
 
-        setPosition({ x: newX, y: newY });
+      if (isZoomed) {
+        updateZoomPosition(e.clientX, e.clientY);
       }
     },
-    [isDragging, isZoomed, dragStart]
+    [enableZoom, isVideo, isZoomed, updateZoomPosition]
   );
 
-  const handleMouseUp = () => {
-    setIsDragging(false);
-  };
+  const handleMouseLeave = useCallback(() => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+    setIsZoomed(false);
+    setPosition({ x: 0, y: 0 });
+  }, []);
 
   return (
     <div
@@ -99,13 +123,11 @@ export const MainMedia = ({
         "relative group overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 z-0",
         aspect,
         className,
-        enableZoom && !isVideo ? (isZoomed ? "cursor-move" : "cursor-zoom-in") : ""
+        enableZoom && !isVideo && "cursor-crosshair"
       )}
-      onClick={handleImageClick}
-      onMouseDown={handleMouseDown}
+      onMouseEnter={handleMouseEnter}
       onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseUp}
+      onMouseLeave={handleMouseLeave}
     >
       {/* Navigation Arrows - Hide when zoomed to avoid misclick */}
       {!isZoomed && (
@@ -204,7 +226,7 @@ export const MainMedia = ({
                         isZoomed ? 2 : 1
                       })`
                     : undefined,
-                transition: isDragging ? "none" : "transform 0.3s ease-out",
+                transition: isZoomed ? "none" : "transform 0.3s ease-out",
               }}
             />
           )}