Add support for zoom on wheel with rotation 🚀 (#239)

.changeset/old-lobsters-pump.md

@@ -0,0 +1,12 @@
+---
+"@zoom-image/angular": minor
+"@zoom-image/preact": minor
+"@zoom-image/svelte": minor
+"@zoom-image/react": minor
+"@zoom-image/solid": minor
+"@zoom-image/core": minor
+"@zoom-image/qwik": minor
+"@zoom-image/vue": minor
+---
+
+Add rotation feature to zoom image wheel 🚀

examples/with-angular/src/app/app.component.html

@@ -20,10 +20,10 @@
     <p>Scroll / Pinch inside the image to see zoom in-out effect</p>
     <p>Current zoom: {{ getCurrentZoomImageValue() }}</p>
     <div class="mt-1 flex space-x-2">
-      <div #imageWheelContainer class="h-[300px] w-[300px] cursor-crosshair">
-        <img class="h-full w-full" crossorigin="anonymous" alt="Large Pic" src="../assets/large.webp" />
+      <div #imageWheelContainer class="h-[300px] w-[200px] cursor-crosshair">
+        <img class="h-full w-full" alt="Large Pic" src="../assets/sample.avif" />
       </div>
-      <img [src]="croppedImage" *ngIf="!!croppedImage" class="h-[300px] w-[300px]" alt="Cropped placeholder" />
+      <img [src]="croppedImage" *ngIf="!!croppedImage" class="h-[300px] w-[200px]" alt="Cropped placeholder" />
     </div>
     <div class="flex space-x-2">
       <button (click)="zoomIn()" class="text-dark-500 rounded bg-gray-100 p-2 text-sm font-medium">Zoom in</button>
@@ -36,23 +36,23 @@
 
   <div class="space-y-4" *ngIf="zoomType === 'hover'">
     <p>Hover inside the image to see zoom effect</p>
-    <div #imageHoverContainer class="relative mt-1 flex h-[300px] w-[300px] items-start">
-      <img class="h-full w-full" alt="Small Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+    <div #imageHoverContainer class="relative mt-1 flex h-[300px] w-[200px] items-start">
+      <img class="h-full w-full" alt="Small Pic" src="/sample.avif" />
       <div #zoomTarget class="absolute left-[350px]"></div>
     </div>
   </div>
 
   <div class="space-y-4" *ngIf="zoomType === 'move'">
     <p>Move mouse inside the image to see zoom effect</p>
-    <div #imageMoveContainer class="relative mt-1 h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-      <img class="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+    <div #imageMoveContainer class="relative mt-1 h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+      <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
     </div>
   </div>
 
   <div class="space-y-4" *ngIf="zoomType === 'click'">
     <p>Click inside the image to see zoom effect</p>
-    <div #imageClickContainer class="relative mt-1 h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-      <img class="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+    <div #imageClickContainer class="relative mt-1 h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+      <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
     </div>
   </div>
 </div>

examples/with-angular/src/app/app.component.ts

@@ -94,7 +94,7 @@ export class AppComponent implements AfterViewInit {
       },
       hover: () => {
         this.zoomImageHoverService.createZoomImage(this.imageHoverContainerRef?.nativeElement as HTMLDivElement, {
-          zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+          zoomImageSource: "/sample.avif",
           customZoom: { width: 300, height: 500 },
           zoomTarget: this.zoomTargetRef?.nativeElement as HTMLDivElement,
           scale: 2,
@@ -105,15 +105,15 @@ export class AppComponent implements AfterViewInit {
       },
       move: () => {
         this.zoomImageMoveService.createZoomImage(this.imageMoveContainerRef?.nativeElement as HTMLDivElement, {
-          zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+          zoomImageSource: "/sample.avif",
         })
         this.zoomImageMoveService.zoomImageState$.subscribe((state) => {
           this.zoomImageMoveState = state
         })
       },
       click: () => {
         this.zoomImageClickService.createZoomImage(this.imageClickContainerRef?.nativeElement as HTMLDivElement, {
-          zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+          zoomImageSource: "/sample.avif",
         })
         this.zoomImageClickService.zoomImageState$.subscribe((state) => {
           this.zoomImageClickState = state

examples/with-next/src/app/page.tsx

@@ -70,7 +70,7 @@ export default function Home() {
       const imageContainer = imageHoverContainerRef.current as HTMLDivElement
       const zoomTarget = zoomTargetRef.current as HTMLDivElement
       createZoomImageHover(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
         customZoom: { width: 300, height: 500 },
         zoomTarget,
         scale: 2,
@@ -80,14 +80,14 @@ export default function Home() {
     if (zoomType === "move") {
       const imageContainer = imageMoveContainerRef.current as HTMLDivElement
       createZoomImageMove(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
       })
     }
 
     if (zoomType === "click") {
       const imageContainer = imageClickContainerRef.current as HTMLDivElement
       createZoomImageClick(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
       })
     }
   }, [zoomType])
@@ -130,10 +130,10 @@ export default function Home() {
           <p>Current zoom: {`${Math.round(zoomImageWheelState.currentZoom * 100)}%`}</p>
           <p>Scroll inside the image to see zoom in-out effect</p>
           <div className="mt-1 flex space-x-2">
-            <div ref={imageWheelContainerRef} className="h-[300px] w-[300px] cursor-crosshair">
-              <img className="h-full w-full" alt="Large Pic" src="/large.webp" />
+            <div ref={imageWheelContainerRef} className="h-[300px] w-[200px] cursor-crosshair">
+              <img className="h-full w-full" alt="Large Pic" src="/sample.avif" />
             </div>
-            {croppedImage && <img src={croppedImage} className="h-[300px] w-[300px]" alt="Cropped placeholder" />}
+            {croppedImage && <img src={croppedImage} className="h-[300px] w-[200px]" alt="Cropped placeholder" />}
           </div>
 
           <div className="flex space-x-2">
@@ -154,7 +154,7 @@ export default function Home() {
         <>
           <p>Hover inside the image to see zoom effect</p>
           <div ref={imageHoverContainerRef} className="relative flex h-[250px] w-[250px] items-start">
-            <img className="h-full w-full" alt="Small Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+            <img className="h-full w-full" alt="Small Pic" src="/sample.avif" />
             <div ref={zoomTargetRef} className="absolute left-[300px]"></div>
           </div>
         </>
@@ -163,17 +163,17 @@ export default function Home() {
       {zoomType === "move" && (
         <>
           <p>Move mouse inside the image to see zoom effect</p>
-          <div ref={imageMoveContainerRef} className="relative h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-            <img className="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+          <div ref={imageMoveContainerRef} className="relative h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+            <img className="h-full w-full" alt="Large Pic" src="/sample.avif" />
           </div>
         </>
       )}
 
       {zoomType === "click" && (
         <>
           <p>Click inside the image to see zoom effect</p>
-          <div ref={imageClickContainerRef} className="relative h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-            <img className="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+          <div ref={imageClickContainerRef} className="relative h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+            <img className="h-full w-full" alt="Large Pic" src="/sample.avif" />
           </div>
         </>
       )}

examples/with-preact/src/app.tsx

@@ -68,7 +68,7 @@ function App() {
       const imageContainer = imageHoverContainerRef.current as HTMLDivElement
       const zoomTarget = zoomTargetRef.current as HTMLDivElement
       createZoomImageHover(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
         customZoom: { width: 300, height: 500 },
         zoomTarget,
         scale: 2,
@@ -78,14 +78,14 @@ function App() {
     if (zoomType === "move") {
       const imageContainer = imageMoveContainerRef.current as HTMLDivElement
       createZoomImageMove(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
       })
     }
 
     if (zoomType === "click") {
       const imageContainer = imageClickContainerRef.current as HTMLDivElement
       createZoomImageClick(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
       })
     }
   }, [zoomType])
@@ -128,10 +128,10 @@ function App() {
           <p>Current zoom: {`${Math.round(zoomImageWheelState.currentZoom * 100)}%`}</p>
           <p>Scroll inside the image to see zoom in-out effect</p>
           <div class="mt-1 flex space-x-2">
-            <div ref={imageWheelContainerRef} class="h-[300px] w-[300px] cursor-crosshair">
-              <img class="h-full w-full" alt="Large Pic" src="/large.webp" />
+            <div ref={imageWheelContainerRef} class="h-[300px] w-[200px] cursor-crosshair">
+              <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
             </div>
-            {croppedImage && <img src={croppedImage} class="h-[300px] w-[300px]" alt="Cropped placeholder" />}
+            {croppedImage && <img src={croppedImage} class="h-[300px] w-[200px]" alt="Cropped placeholder" />}
           </div>
 
           <div class="flex space-x-2">
@@ -152,7 +152,7 @@ function App() {
         <>
           <p>Hover inside the image to see zoom effect</p>
           <div ref={imageHoverContainerRef} class="relative flex h-[250px] w-[250px] items-start">
-            <img class="h-full w-full" alt="Small Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+            <img class="h-full w-full" alt="Small Pic" src="/sample.avif" />
             <div ref={zoomTargetRef} class="absolute left-[300px]"></div>
           </div>
         </>
@@ -161,17 +161,17 @@ function App() {
       {zoomType === "move" && (
         <>
           <p>Move mouse inside the image to see zoom effect</p>
-          <div ref={imageMoveContainerRef} class="relative h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-            <img class="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+          <div ref={imageMoveContainerRef} class="relative h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+            <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
           </div>
         </>
       )}
 
       {zoomType === "click" && (
         <>
           <p>Click inside the image to see zoom effect</p>
-          <div ref={imageClickContainerRef} class="relative h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-            <img class="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+          <div ref={imageClickContainerRef} class="relative h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+            <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
           </div>
         </>
       )}

examples/with-qwik/src/routes/index.tsx

@@ -49,7 +49,7 @@ export default component$(() => {
       const imageContainer = imageHoverContainerRef.value
       const zoomTarget = zoomTargetRef.value
       createZoomImageHover(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
         customZoom: { width: 300, height: 500 },
         zoomTarget,
         scale: 2,
@@ -59,14 +59,14 @@ export default component$(() => {
     if (zoomType.value === "move") {
       const imageContainer = imageMoveContainerRef.value as HTMLDivElement
       createZoomImageMove(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
       })
     }
 
     if (zoomType.value === "click") {
       const imageContainer = imageClickContainerRef.value as HTMLDivElement
       createZoomImageClick(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
       })
     }
   })
@@ -106,11 +106,11 @@ export default component$(() => {
           <p>Current zoom: {`${Math.round(zoomImageWheelState.currentZoom * 100)}%`}</p>
           <p>Scroll inside the image to see zoom in-out effect</p>
           <div class="mt-1 flex space-x-2">
-            <div ref={imageWheelContainerRef} class="h-[300px] w-[300px] cursor-crosshair">
-              <img class="h-full w-full" alt="Large Pic" src="/large.webp" />
+            <div ref={imageWheelContainerRef} class="h-[300px] w-[200px] cursor-crosshair">
+              <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
             </div>
             {croppedImage.value && (
-              <img src={croppedImage.value} class="h-[300px] w-[300px]" alt="Cropped placeholder" />
+              <img src={croppedImage.value} class="h-[300px] w-[200px]" alt="Cropped placeholder" />
             )}
           </div>
 
@@ -156,7 +156,7 @@ export default component$(() => {
         <>
           <p>Hover inside the image to see zoom effect</p>
           <div ref={imageHoverContainerRef} class="relative flex h-[250px] w-[250px] items-start">
-            <img class="h-full w-full" alt="Small Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+            <img class="h-full w-full" alt="Small Pic" src="/sample.avif" />
             <div ref={zoomTargetRef} class="absolute left-[300px]"></div>
           </div>
         </>
@@ -165,17 +165,17 @@ export default component$(() => {
       {zoomType.value === "move" && (
         <>
           <p>Move mouse inside the image to see zoom effect</p>
-          <div ref={imageMoveContainerRef} class="relative h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-            <img class="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+          <div ref={imageMoveContainerRef} class="relative h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+            <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
           </div>
         </>
       )}
 
       {zoomType.value === "click" && (
         <>
           <p>Click inside the image to see zoom effect</p>
-          <div ref={imageClickContainerRef} class="relative h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-            <img class="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+          <div ref={imageClickContainerRef} class="relative h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+            <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
           </div>
         </>
       )}

examples/with-react/src/App.tsx

@@ -68,7 +68,7 @@ function App() {
       const imageContainer = imageHoverContainerRef.current as HTMLDivElement
       const zoomTarget = zoomTargetRef.current as HTMLDivElement
       createZoomImageHover(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
         customZoom: { width: 300, height: 500 },
         zoomTarget,
         scale: 4,
@@ -79,14 +79,14 @@ function App() {
     if (zoomType === "move") {
       const imageContainer = imageMoveContainerRef.current as HTMLDivElement
       createZoomImageMove(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
       })
     }
 
     if (zoomType === "click") {
       const imageContainer = imageClickContainerRef.current as HTMLDivElement
       createZoomImageClick(imageContainer, {
-        zoomImageSource: "https://nam-assets.netlify.app/static/large.webp",
+        zoomImageSource: "/sample.avif",
       })
     }
   }, [zoomType])
@@ -129,10 +129,10 @@ function App() {
           <p>Current zoom: {`${Math.round(zoomImageWheelState.currentZoom * 100)}%`}</p>
           <p>Scroll inside the image to see zoom in-out effect</p>
           <div className="mt-1 flex space-x-2">
-            <div ref={imageWheelContainerRef} className="h-[300px] w-[300px] cursor-crosshair">
-              <img className="h-full w-full" alt="Large Pic" src="/large.webp" />
+            <div ref={imageWheelContainerRef} className="h-[300px] w-[200px] cursor-crosshair">
+              <img className="h-full w-full" alt="Large Pic" src="/sample.avif" />
             </div>
-            {croppedImage && <img src={croppedImage} className="h-[300px] w-[300px]" alt="Cropped placeholder" />}
+            {croppedImage && <img src={croppedImage} className="h-[300px] w-[200px]" alt="Cropped placeholder" />}
           </div>
 
           <div className="flex space-x-2">
@@ -153,7 +153,7 @@ function App() {
         <>
           <p>Hover inside the image to see zoom effect</p>
           <div ref={imageHoverContainerRef} className="relative flex h-[250px] w-[250px] items-start">
-            <img className="h-full w-full" alt="Small Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+            <img className="h-full w-full" alt="Small Pic" src="/sample.avif" />
             <div ref={zoomTargetRef} className="absolute left-[300px]"></div>
           </div>
         </>
@@ -162,17 +162,17 @@ function App() {
       {zoomType === "move" && (
         <>
           <p>Move mouse inside the image to see zoom effect</p>
-          <div ref={imageMoveContainerRef} className="relative h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-            <img className="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+          <div ref={imageMoveContainerRef} className="relative h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+            <img className="h-full w-full" alt="Large Pic" src="/sample.avif" />
           </div>
         </>
       )}
 
       {zoomType === "click" && (
         <>
           <p>Click inside the image to see zoom effect</p>
-          <div ref={imageClickContainerRef} className="relative h-[300px] w-[300px] cursor-crosshair overflow-hidden">
-            <img className="h-full w-full" alt="Large Pic" src="https://nam-assets.netlify.app/static/small.webp" />
+          <div ref={imageClickContainerRef} className="relative h-[300px] w-[200px] cursor-crosshair overflow-hidden">
+            <img className="h-full w-full" alt="Large Pic" src="/sample.avif" />
           </div>
         </>
       )}