feat: honor skip snaps (#202)

* feat: honor skip snaps * feat: demos skip snaps to false --------- Co-authored-by: Roman Antipov <[email protected]>
xiel · May 28, 2024 · d1d2e37 · d1d2e37
1 parent a2a7740
commit d1d2e37
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -49,7 +49,7 @@ import { useEmblaCarousel } from 'embla-carousel-react'
 import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
 
 const EmblaCarouselComponent = ({ children }) => {
-  const [emblaRef, embla] = useEmblaCarousel({ loop: false, skipSnaps: true }, [
+  const [emblaRef, embla] = useEmblaCarousel({ loop: false, skipSnaps: false }, [
     WheelGesturesPlugin(),
   ])
 

diff --git a/docs/react/src/js/EmblaCarousel.tsx b/docs/react/src/js/EmblaCarousel.tsx
@@ -10,7 +10,7 @@ const EmblaCarouselComponent = ({ children }: { children: React.ReactNode }) =>
   const [axis, setAxis] = useState<Axis>('x')
   const [forceWheelAxis, setForceWheelAxis] = useState<Axis | undefined>()
   const [target, setTarget] = useState<Element | undefined>()
-  const [emblaRef, embla] = useEmblaCarousel({ loop: false, skipSnaps: true, axis }, [
+  const [emblaRef, embla] = useEmblaCarousel({ loop: false, skipSnaps: false, axis }, [
     WheelGesturesPlugin({
       forceWheelAxis,
       target,

diff --git a/docs/vanilla/src/js/index.ts b/docs/vanilla/src/js/index.ts
@@ -23,7 +23,7 @@ const embla = EmblaCarousel(
   viewPort as HTMLElement,
   {
     loop: false,
-    skipSnaps: true,
+    skipSnaps: false,
   },
   [
     // Add support for wheel gestures

diff --git a/docs/vanilla/src/shadow/index.ts b/docs/vanilla/src/shadow/index.ts
@@ -12,7 +12,7 @@ function initializeEmbla(root: ShadowRoot | HTMLElement) {
     viewport as HTMLElement,
     {
       loop: true,
-      skipSnaps: true,
+      skipSnaps: false,
       dragFree: true,
     },
     [WheelGesturesPlugin()]

diff --git a/docs/vanilla/umd.html b/docs/vanilla/umd.html
@@ -41,7 +41,7 @@
     <script src="https://unpkg.com/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.umd.js"></script>
     <script type="text/javascript">
       var emblaNode = document.querySelector('.embla__viewport')
-      var options = { loop: false, skipSnaps: true }
+      var options = { loop: false, skipSnaps: false }
       var plugins = [EmblaCarouselWheelGestures()]
       var embla = EmblaCarousel(emblaNode, options, plugins)
     </script>

diff --git a/embla-carousel-wheel-gestures/src/WheelGesturesPlugin.ts b/embla-carousel-wheel-gestures/src/WheelGesturesPlugin.ts
@@ -108,9 +108,17 @@ export function WheelGesturesPlugin(userOptions: WheelGesturesPluginType['option
         ;[moveY, moveX] = state.axisMovement
       }
 
+      // prevent skipping slides (X axis)
+      const noSkipSnapsMoveX =
+        moveX < 0 ? Math.max(moveX, -engine.containerRect.width) : Math.min(moveX, engine.containerRect.width)
+
+      // prevent skipping slides (Y axis)
+      const noSkipSnapsMoveY =
+        moveY < 0 ? Math.max(moveY, -engine.containerRect.height) : Math.min(moveY, engine.containerRect.height)
+
       return new MouseEvent(type, {
-        clientX: startEvent.clientX + moveX,
-        clientY: startEvent.clientY + moveY,
+        clientX: startEvent.clientX + (engine.options.skipSnaps ? moveX : noSkipSnapsMoveX),
+        clientY: startEvent.clientY + (engine.options.skipSnaps ? moveY : noSkipSnapsMoveY),
         screenX: startEvent.screenX + moveX,
         screenY: startEvent.screenY + moveY,
         movementX: moveX,

diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   "license": "MIT",
   "dependencies": {},
   "resolutions": {
-    "embla-carousel": "8.0.0-rc14",
-    "embla-carousel-react": "8.0.0-rc14"
+    "embla-carousel": "8.1.3",
+    "embla-carousel-react": "8.1.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3364,23 +3364,23 @@ electron-to-chromium@^1.4.84:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.88.tgz#ebe6a2573b563680c7a7bf3a51b9e465c9c501db"
   integrity sha512-oA7mzccefkvTNi9u7DXmT0LqvhnOiN2BhSrKerta7HeUC1cLoIwtbf2wL+Ah2ozh5KQd3/1njrGrwDBXx6d14Q==
 
-[email protected]:
-  version "8.0.0-rc14"
-  resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-8.0.0-rc14.tgz#ed5d9e641134fdc7e060a9188b0ccf13f7677da1"
-  integrity sha512-2b9vXACEcn0qja4QyaFMfCgFbFhumV3krOCGr9+jlQiuXt5z/EyfiYYziDsm70DhTtxtg/uKEGflIqZSfWRYKg==
-  dependencies:
-    embla-carousel "8.0.0-rc14"
-    embla-carousel-reactive-utils "8.0.0-rc14"
-
-embla-carousel-reactive-utils@8.0.0-rc14:
-  version "8.0.0-rc14"
-  resolved "https://registry.yarnpkg.com/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0-rc14.tgz#a8844b3930fb3b1423e07544b3efb125525c454a"
-  integrity sha512-r153bynAo9eTBuWWggPWLYnE9xqVOYmkkeMbAuGX8pkUisJN8aTLMW9b7CYOzjURRB7z85EmYRbeBg+axQzc9g==
-
-[email protected]:
-  version "8.0.0-rc14"
-  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-8.0.0-rc14.tgz#039372f97b57e95c9b839c6e27b8ff2f63b23053"
-  integrity sha512-/NLkMFZ7xKryRVYeUjmhbfV63Vr07saPBDwAX2TPMbcaiWwfQfU5Xsc2AiCMZANtwmzsjRK6gSBa7hOy/VXu6g==
+[email protected], [email protected]:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-8.1.3.tgz#a07770eee003a56dfe2fa55304b48892cc00c013"
+  integrity sha512-YrezDPgxPDKa+OKMhSrwuPEU2OgF5147vFW473EWT3bx9DETV3W/RyWTxq0/2pf3M4VXkjqFNbS/W1xM8lTaVg==
+  dependencies:
+    embla-carousel "8.1.3"
+    embla-carousel-reactive-utils "8.1.3"
+
+embla-carousel-reactive-utils@8.1.3:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.3.tgz#b4e7d439ab6aefb9554b14198e567e919b52f167"
+  integrity sha512-D8tAK6NRQVEubMWb+b/BJ3VvGPsbEeEFOBM6cCCwfiyfLzNlacOAt0q2dtUEA9DbGxeWkB8ExgXzFRxhGV2Hig==
+
+[email protected], [email protected]:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-8.1.3.tgz#d086738ee529e59815dae4e2ecd9ee37c47ffc1a"
+  integrity sha512-GiRpKtzidV3v50oVMly8S+D7iE1r96ttt7fSlvtyKHoSkzrAnVcu8fX3c4j8Ol2hZSQlVfDqDIqdrFPs0u5TWQ==
 
 emoji-regex@^7.0.1, emoji-regex@^7.0.2:
   version "7.0.3"