@prose-reader/enhancer-gestures 1.303.0 → 1.304.0

package/dist/index.umd.cjs

@@ -1,544 +1,404 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@prose-reader/core"), require("gesturx"), require("rxjs")) : typeof define === "function" && define.amd ? define(["exports", "@prose-reader/core", "gesturx", "rxjs"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["prose-reader-enhancer-gestures"] = {}, global.core, global.gesturx, global.rxjs));
-})(this, (function(exports2, core, gesturx, rxjs) {
-  "use strict";
-  const name = "@prose-reader/enhancer-gestures";
-  const registerPan = ({
-    reader,
-    recognizer,
-    settingsManager
-  }) => {
-    const gestures$ = settingsManager.values$.pipe(
-      rxjs.switchMap(({ panNavigation }) => {
-        const panStart$ = recognizer.events$.pipe(
-          rxjs.filter((event) => event.type === `panStart`)
-        );
-        const panMove$ = recognizer.events$.pipe(
-          rxjs.filter((event) => event.type === `panMove`)
-        );
-        const panEnd$ = recognizer.events$.pipe(
-          rxjs.filter((event) => event.type === `panEnd`)
-        );
-        const pan$ = panStart$.pipe(
-          rxjs.switchMap((panStartEvent) => {
-            let lastDelta = { x: 0, y: 0 };
-            const moveAndEnd$ = rxjs.merge(panMove$, panEnd$).pipe(
-              rxjs.tap((event) => {
-                const isZooming = reader.zoom.state.isZooming;
-                const isZoomingIn = reader.zoom.state.currentScale > 1;
-                if (isZooming && isZoomingIn) {
-                  const deltaX = event.deltaX - lastDelta.x;
-                  const deltaY = event.deltaY - lastDelta.y;
-                  lastDelta = {
-                    x: event.deltaX,
-                    y: event.deltaY
-                  };
-                  reader.zoom.move(
-                    {
-                      x: reader.zoom.state.currentPosition.x + deltaX,
-                      y: reader.zoom.state.currentPosition.y + deltaY
-                    },
-                    {
-                      constrain: "within-viewport"
-                    }
-                  );
-                  return;
-                }
-                if (panNavigation !== "pan") return;
-                if (event.type === `panMove`) {
-                  if (!reader.navigation.panNavigator.value.isStarted) {
-                    reader.navigation.panNavigator.start({
-                      x: event.deltaX,
-                      y: event.deltaY
-                    });
-                    return;
-                  }
-                  reader.navigation.panNavigator.panMoveTo({
-                    x: event.deltaX,
-                    y: event.deltaY
-                  });
-                  return;
-                }
-                if (event.type === `panEnd` && reader.navigation.panNavigator.value.isStarted) {
-                  reader.navigation.panNavigator.stop({
-                    x: event.deltaX,
-                    y: event.deltaY
-                  });
-                }
-              })
-            );
-            return rxjs.merge(rxjs.of(panStartEvent), moveAndEnd$).pipe(
-              rxjs.map((event) => ({
-                type: "pan",
-                gestureEvent: event
-              }))
-            );
-          })
-        );
-        return pan$;
-      })
-    );
-    return gestures$;
-  };
-  const isHtmlImageElement = (target) => core.isHtmlElement(target) && !!target.ownerDocument.defaultView && target instanceof target.ownerDocument.defaultView.HTMLImageElement;
-  const registerPinch = ({
-    reader,
-    recognizable,
-    settingsManager
-  }) => {
-    const pinchStart$ = recognizable.events$.pipe(
-      rxjs.map(({ event }) => event),
-      rxjs.filter((event) => event.type === "pinchStart")
-    );
-    const pinchMove$ = recognizable.events$.pipe(
-      rxjs.map(({ event }) => event),
-      rxjs.filter((event) => event.type === "pinchMove")
-    );
-    const pinchEnd$ = recognizable.events$.pipe(
-      rxjs.map(({ event }) => event),
-      rxjs.filter((event) => event.type === "pinchEnd")
-    );
-    const shouldStartZoom = (target) => isHtmlImageElement(target) && !reader.zoom.state.isZooming;
-    return settingsManager.values$.pipe(
-      rxjs.switchMap(({ fontScalePinchEnabled, fontScalePinchThrottleTime }) => {
-        const zoomGestures$ = pinchStart$.pipe(
-          rxjs.switchMap(() => {
-            const startScale = reader.zoom.state.currentScale;
-            return pinchMove$.pipe(
-              rxjs.withLatestFrom(reader.viewportState$),
-              rxjs.map(([event, viewportState]) => {
-                const newScale = startScale * event.scale;
-                if (viewportState === "busy") {
-                  return event;
-                }
-                if (!reader.zoom.state.isZooming && event.scale > 1) {
-                  reader.zoom.enter({ animate: false, scale: newScale });
-                  return event;
-                }
-                if (reader.zoom.state.isZooming) {
-                  if (newScale < 1) {
-                    reader.zoom.exit();
-                  } else {
-                    reader.zoom.scaleAt(
-                      Math.min(newScale, settingsManager.values.zoomMaxScale),
-                      {
-                        constrain: "within-viewport"
-                      }
-                    );
-                  }
-                  return event;
-                }
-                return event;
-              })
-            );
-          })
-        );
-        const watchForFontScaleChange$ = !fontScalePinchEnabled ? rxjs.EMPTY : pinchStart$.pipe(
-          rxjs.withLatestFrom(reader.viewportState$),
-          rxjs.switchMap(([pinchStartEvent, viewportState]) => {
-            if (viewportState === "busy" || shouldStartZoom(pinchStartEvent.event.target) || reader.zoom.state.isZooming)
-              return rxjs.EMPTY;
-            const lastFontScaleOnPinchStart = reader.settings.values.fontScale;
-            return pinchMove$.pipe(
-              rxjs.throttleTime(
-                fontScalePinchThrottleTime,
-                rxjs.animationFrameScheduler,
-                {
-                  trailing: true
-                }
-              ),
-              rxjs.tap((event) => {
-                const newScale = Number.parseFloat(
-                  (lastFontScaleOnPinchStart + (event.scale - 1)).toFixed(2)
-                );
-                const newMinMaxedFontScale = Math.max(
-                  Math.min(
-                    newScale,
-                    settingsManager.values.fontScaleMaxScale
-                  ),
-                  settingsManager.values.fontScaleMinScale
-                );
-                reader.settings.update({
-                  fontScale: newMinMaxedFontScale
-                });
-              }),
-              rxjs.takeUntil(pinchEnd$)
-            );
-          })
-        );
-        return rxjs.merge(zoomGestures$, watchForFontScaleChange$).pipe(
-          rxjs.map((event) => ({
-            type: "pinch",
-            gestureEvent: event
-          }))
-        );
-      })
-    );
-  };
-  const isSwipeEvent = (event) => event.type === "swipe";
-  const registerSwipe = ({
-    reader,
-    recognizable,
-    settingsManager
-  }) => {
-    const gestures$ = settingsManager.values$.pipe(
-      rxjs.switchMap(
-        ({ panNavigation }) => panNavigation !== "swipe" ? rxjs.EMPTY : recognizable.events$.pipe(
-          rxjs.map(({ event }) => event),
-          rxjs.filter(isSwipeEvent),
-          rxjs.tap((event) => {
-            const { computedPageTurnDirection } = reader.settings.values;
-            if (computedPageTurnDirection === "vertical") {
-              if (event.velocityY < -0.5) {
-                reader?.navigation.turnRight();
-              }
-              if (event.velocityY > 0.5) {
-                reader?.navigation.turnLeft();
-              }
-            } else {
-              if (event.velocityX < -0.5) {
-                reader?.navigation.turnRight();
-              }
-              if (event.velocityX > 0.5) {
-                reader?.navigation.turnLeft();
-              }
-            }
-          }),
-          rxjs.map((event) => ({ type: "swipe", gestureEvent: event }))
-        )
-      )
-    );
-    return gestures$;
-  };
-  const isNotLink = (event) => {
-    const target = event.event.target;
-    if (core.isHtmlElement(target) && target.tagName === "a") return false;
-    return true;
-  };
-  const getPositionRelativeToContainer = (event, containerElementRect) => {
-    const { x, y } = event;
-    const { left, top } = containerElementRect;
-    return {
-      x: x - left,
-      y: y - top
-    };
-  };
-  const istMatchingSelectors = (selectors, event) => {
-    const target = event.event.target;
-    if (!core.isHtmlElement(target)) return false;
-    const match = selectors.find((selector) => {
-      if (target.matches(selector)) return true;
-      if (target.closest(selector)) return true;
-      return false;
-    });
-    return !!match;
-  };
-  const isPositionInArea = (position, area, containerSize) => {
-    const { x, y } = position;
-    const { width, height } = containerSize;
-    switch (area.type) {
-      case "margins": {
-        const { top, bottom, left, right } = area;
-        const inTop = top !== void 0 ? y < height * top : true;
-        const inBottom = bottom !== void 0 ? y > height * (1 - bottom) : true;
-        const inLeft = left !== void 0 ? x < width * left : true;
-        const inRight = right !== void 0 ? x > width * (1 - right) : true;
-        return top !== void 0 && inTop || bottom !== void 0 && inBottom || left !== void 0 && inLeft || right !== void 0 && inRight;
-      }
-      case "rectangle": {
-        const {
-          x: rectX,
-          y: rectY,
-          width: rectWidth,
-          height: rectHeight,
-          unit = "%"
-        } = area;
-        const actualX = unit === "%" ? width * (rectX / 100) : rectX;
-        const actualY = unit === "%" ? height * (rectY / 100) : rectY;
-        const actualWidth = unit === "%" ? width * (rectWidth / 100) : rectWidth;
-        const actualHeight = unit === "%" ? height * (rectHeight / 100) : rectHeight;
-        return x >= actualX && x <= actualX + actualWidth && y >= actualY && y <= actualY + actualHeight;
-      }
-      case "corner": {
-        const { corner, size, unit = "%" } = area;
-        const actualSize = unit === "%" ? Math.min(width, height) * (size / 100) : size;
-        switch (corner) {
-          case "top-left":
-            return x < actualSize && y < actualSize;
-          case "top-right":
-            return x > width - actualSize && y < actualSize;
-          case "bottom-left":
-            return x < actualSize && y > height - actualSize;
-          case "bottom-right":
-            return x > width - actualSize && y > height - actualSize;
-          default:
-            return false;
-        }
-      }
-      case "center": {
-        const { width: centerWidth, height: centerHeight, unit = "%" } = area;
-        const actualWidth = unit === "%" ? width * (centerWidth / 100) : centerWidth;
-        const actualHeight = unit === "%" ? height * (centerHeight / 100) : centerHeight;
-        const centerX = width / 2;
-        const centerY = height / 2;
-        return x >= centerX - actualWidth / 2 && x <= centerX + actualWidth / 2 && y >= centerY - actualHeight / 2 && y <= centerY + actualHeight / 2;
-      }
-      default:
-        return false;
-    }
-  };
-  const calculatePageTurnLinearMargin = (screenWidth) => {
-    const minMargin = 0.15;
-    const maxMargin = 0.2;
-    const minWidth = 320;
-    const maxWidth = 1200;
-    if (screenWidth <= minWidth) return maxMargin;
-    if (screenWidth >= maxWidth) return minMargin;
-    const ratio = (screenWidth - minWidth) / (maxWidth - minWidth);
-    return maxMargin - ratio * (maxMargin - minMargin);
-  };
-  const registerTaps = ({
-    reader,
-    recognizable,
-    hookManager,
-    settingsManager,
-    recognizer
-  }) => {
-    const gestures$ = recognizable.events$.pipe(
-      rxjs.filter((event) => event.recognizer === recognizer),
-      rxjs.withLatestFrom(reader.context.watch(`rootElement`), reader.spine.element$),
-      rxjs.switchMap(([{ event }, containerElement, spineElement]) => {
-        if (!containerElement || !spineElement) return rxjs.EMPTY;
-        const normalizedEvent = event.event;
-        const { computedPageTurnDirection, computedPageTurnMode } = reader.settings.values;
-        if (event.type === "tap" && isNotLink(event) && !istMatchingSelectors(settingsManager.values.ignore, event)) {
-          if (`x` in normalizedEvent) {
-            const containerElementRect = containerElement.getBoundingClientRect();
-            const width = containerElementRect.width;
-            const pageTurnMargin = calculatePageTurnLinearMargin(width);
-            const positionInContainer = getPositionRelativeToContainer(
-              normalizedEvent,
-              containerElementRect
-            );
-            const positionInSpineNonTransformed = reader.coordinates.getSpinePositionFromClientPosition(
-              normalizedEvent
-            );
-            const spineItemPageInfo = positionInSpineNonTransformed ? reader.spine.locator.getSpineItemPagePositionFromSpinePosition(
-              positionInSpineNonTransformed
-            ) : void 0;
-            const beforeTapResults$ = hookManager.execute("beforeTapGesture", {
-              event$: rxjs.of({ event, page: spineItemPageInfo })
-            });
-            return rxjs.combineLatest([...beforeTapResults$, rxjs.of(true)]).pipe(
-              rxjs.first(),
-              rxjs.filter((results) => !results.some((result) => result === false)),
-              rxjs.map(() => {
-                const isZoomedIn = reader.zoom.state.isZooming && reader.zoom.state.currentScale > 1;
-                if (computedPageTurnMode === "scrollable" || isZoomedIn) {
-                  return {
-                    type: "tap",
-                    gestureEvent: event,
-                    handled: false
-                  };
-                }
-                if (computedPageTurnDirection === "horizontal" && isPositionInArea(
-                  positionInContainer,
-                  { type: "margins", left: pageTurnMargin },
-                  containerElementRect
-                )) {
-                  reader.navigation.turnLeftOrTop();
-                } else if (computedPageTurnDirection === "vertical" && isPositionInArea(
-                  positionInContainer,
-                  { type: "margins", top: pageTurnMargin },
-                  containerElementRect
-                )) {
-                  reader.navigation.turnLeftOrTop();
-                } else if (computedPageTurnDirection === "vertical" && isPositionInArea(
-                  positionInContainer,
-                  { type: "margins", bottom: pageTurnMargin },
-                  containerElementRect
-                )) {
-                  reader.navigation.turnRightOrBottom();
-                } else if (computedPageTurnDirection === "horizontal" && isPositionInArea(
-                  positionInContainer,
-                  { type: "margins", right: pageTurnMargin },
-                  containerElementRect
-                )) {
-                  reader.navigation.turnRightOrBottom();
-                } else {
-                  return {
-                    type: "tap",
-                    gestureEvent: event,
-                    handled: false
-                  };
-                }
-                return {
-                  type: "tap",
-                  gestureEvent: event,
-                  handled: true
-                };
-              })
-            );
-          }
-        }
-        return rxjs.EMPTY;
-      })
-    );
-    return gestures$;
-  };
-  class GesturesSettingsManager extends core.SettingsManager {
-    constructor(initialSettings, reader) {
-      super(initialSettings);
-      this.reader = reader;
-      reader.settings.values$.pipe(
-        rxjs.tap(() => {
-          this.update({});
-        }),
-        rxjs.takeUntil(this.destroy$)
-      ).subscribe();
-    }
-    reader;
-    getOutputSettings(inputSettings) {
-      return {
-        ...inputSettings,
-        panNavigation: this.reader.settings.values.computedPageTurnMode === `scrollable` ? false : inputSettings.panNavigation
-      };
-    }
-    getDefaultSettings() {
-      return {
-        panNavigation: "pan",
-        pinchCancelPan: true,
-        fontScalePinchEnabled: true,
-        fontScalePinchThrottleTime: 500,
-        fontScaleMaxScale: 5,
-        fontScaleMinScale: 0.2,
-        zoomMaxScale: Infinity,
-        ignore: []
-      };
-    }
-  }
-  const styles = '[data-prose-reader-container="${id}"] * {\n  /* Make sure that touche actions are correctly dispatched no matter where the user interact */\n  touch-action: inherit;\n}\n';
-  const gesturesEnhancer = (next) => (options) => {
-    const { gestures = {}, ...rest } = options;
-    const reader = next(rest);
-    const removeStylesheet = reader.utils.injectScopedCSS(
-      document,
-      name,
-      styles
-    );
-    const settingsManager = new GesturesSettingsManager(gestures, reader);
-    const hookManager = new core.HookManager();
-    const pinchRecognizer = new gesturx.PinchRecognizer({
-      options: {
-        /**
-         * @important
-         * Ideally we want pinch to triggers before pan so we can
-         * capture zoom before starting panning.
-         */
-        posThreshold: 10
-      }
-    });
-    const failWithSelection = {
-      start$: reader.selection.selectionStart$,
-      end$: reader.selection.selectionEnd$
-    };
-    const panRecognizer = new gesturx.PanRecognizer({
-      failWith: [pinchRecognizer, failWithSelection],
-      options: {
-        // we want to have some margin to trigger zoom
-        posThreshold: 20
-      }
-    });
-    const tapRecognizer = new gesturx.TapRecognizer({
-      failWith: [panRecognizer]
-    });
-    const swipeRecognizer = new gesturx.SwipeRecognizer({
-      failWith: [failWithSelection]
-    });
-    const recognizable = new gesturx.Recognizable({
-      recognizers: [
-        tapRecognizer,
-        panRecognizer,
-        swipeRecognizer,
-        pinchRecognizer
-      ],
-      disableTextSelection: false
-    });
-    const tapGestures$ = registerTaps({
-      hookManager,
-      reader,
-      recognizable,
-      settingsManager,
-      recognizer: tapRecognizer
-    });
-    const panGestures$ = registerPan({
-      reader,
-      recognizer: panRecognizer,
-      settingsManager
-    });
-    const swipeGestures$ = registerSwipe({
-      reader,
-      recognizable,
-      settingsManager
-    });
-    const pinchGestures$ = registerPinch({
-      reader,
-      recognizable,
-      settingsManager
-    });
-    const containerUpdate$ = reader.context.watch(`rootElement`).pipe(
-      rxjs.tap((container) => {
-        recognizable.update({
-          container
-        });
-      })
-    );
-    const watchSettings$ = rxjs.combineLatest([
-      settingsManager.values$,
-      panRecognizer.config$
-    ]).pipe(
-      rxjs.tap(([{ pinchCancelPan }, panRecognizerConfig]) => {
-        const pinchAlreadyInFailWith = panRecognizerConfig.failWith?.includes(pinchRecognizer);
-        if (pinchCancelPan && !pinchAlreadyInFailWith) {
-          panRecognizer.update({
-            failWith: [
-              ...panRecognizerConfig.failWith ?? [],
-              pinchRecognizer
-            ]
-          });
-        }
-        if (!pinchCancelPan && pinchAlreadyInFailWith) {
-          panRecognizer.update({
-            failWith: panRecognizerConfig.failWith?.filter(
-              (recognizer) => recognizer !== pinchRecognizer
-            )
-          });
-        }
-      })
-    );
-    const gestures$ = rxjs.merge(
-      pinchGestures$,
-      tapGestures$,
-      swipeGestures$,
-      panGestures$
-    ).pipe(rxjs.share());
-    rxjs.merge(containerUpdate$, watchSettings$, gestures$).pipe(rxjs.takeUntil(reader.$.destroy$)).subscribe();
-    return {
-      ...reader,
-      destroy: () => {
-        removeStylesheet();
-        reader.destroy();
-        settingsManager.destroy();
-      },
-      gestures: {
-        settings: settingsManager,
-        gestures$,
-        hooks: hookManager
-      }
-    };
-  };
-  exports2.gesturesEnhancer = gesturesEnhancer;
-  exports2.isPositionInArea = isPositionInArea;
-  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-}));
-//# sourceMappingURL=index.umd.cjs.map
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@prose-reader/core"), require("gesturx"), require("rxjs")) : typeof define === "function" && define.amd ? define([
+		"exports",
+		"@prose-reader/core",
+		"gesturx",
+		"rxjs"
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["prose-reader-enhancer-gestures"] = {}, global._prose_reader_core, global.gesturx, global.rxjs));
+})(this, function(exports, _prose_reader_core, gesturx, rxjs) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region package.json
+	var name = "@prose-reader/enhancer-gestures";
+	//#endregion
+	//#region src/gestures/pan.ts
+	var registerPan = ({ reader, recognizer, settingsManager }) => {
+		return settingsManager.values$.pipe((0, rxjs.switchMap)(({ panNavigation }) => {
+			const panStart$ = recognizer.events$.pipe((0, rxjs.filter)((event) => event.type === `panStart`));
+			const panMove$ = recognizer.events$.pipe((0, rxjs.filter)((event) => event.type === `panMove`));
+			const panEnd$ = recognizer.events$.pipe((0, rxjs.filter)((event) => event.type === `panEnd`));
+			return panStart$.pipe((0, rxjs.switchMap)((panStartEvent) => {
+				/**
+				* We use the last cumulative delta to derive the new event atomic delta.
+				* This is because panning the zoom does not necessarily means the zoom position
+				* will always changes. If the user keep dragging while the zoom is blocked, we want
+				* it to move the other direction when he start dragging the other way.
+				* We cannot use the `reader.zoom.state.currentPosition` as previous position
+				* and the event.deltaX to compute the new zoom position.
+				*/
+				let lastDelta = {
+					x: 0,
+					y: 0
+				};
+				const moveAndEnd$ = (0, rxjs.merge)(panMove$, panEnd$).pipe((0, rxjs.tap)((event) => {
+					const isZooming = reader.zoom.state.isZooming;
+					const isZoomingIn = reader.zoom.state.currentScale > 1;
+					/**
+					* When user is zooming in, we don't navigate anymore.
+					* We still allow the pan gesture to move the zoomed controlled
+					* viewport even when pan navigation itself is disabled.
+					*/
+					if (isZooming && isZoomingIn) {
+						const deltaX = event.deltaX - lastDelta.x;
+						const deltaY = event.deltaY - lastDelta.y;
+						lastDelta = {
+							x: event.deltaX,
+							y: event.deltaY
+						};
+						reader.zoom.move({
+							x: reader.zoom.state.currentPosition.x + deltaX,
+							y: reader.zoom.state.currentPosition.y + deltaY
+						}, { constrain: "within-viewport" });
+						return;
+					}
+					if (panNavigation !== "pan") return;
+					if (event.type === `panMove`) {
+						if (!reader.navigation.panNavigator.value.isStarted) {
+							reader.navigation.panNavigator.start({
+								x: event.deltaX,
+								y: event.deltaY
+							});
+							return;
+						}
+						reader.navigation.panNavigator.panMoveTo({
+							x: event.deltaX,
+							y: event.deltaY
+						});
+						return;
+					}
+					if (event.type === `panEnd` && reader.navigation.panNavigator.value.isStarted) reader.navigation.panNavigator.stop({
+						x: event.deltaX,
+						y: event.deltaY
+					});
+				}));
+				return (0, rxjs.merge)((0, rxjs.of)(panStartEvent), moveAndEnd$).pipe((0, rxjs.map)((event) => ({
+					type: "pan",
+					gestureEvent: event
+				})));
+			}));
+		}));
+	};
+	//#endregion
+	//#region src/gestures/pinch.ts
+	var isHtmlImageElement = (target) => (0, _prose_reader_core.isHtmlElement)(target) && !!target.ownerDocument.defaultView && target instanceof target.ownerDocument.defaultView.HTMLImageElement;
+	var registerPinch = ({ reader, recognizable, settingsManager }) => {
+		const pinchStart$ = recognizable.events$.pipe((0, rxjs.map)(({ event }) => event), (0, rxjs.filter)((event) => event.type === "pinchStart"));
+		const pinchMove$ = recognizable.events$.pipe((0, rxjs.map)(({ event }) => event), (0, rxjs.filter)((event) => event.type === "pinchMove"));
+		const pinchEnd$ = recognizable.events$.pipe((0, rxjs.map)(({ event }) => event), (0, rxjs.filter)((event) => event.type === "pinchEnd"));
+		const shouldStartZoom = (target) => isHtmlImageElement(target) && !reader.zoom.state.isZooming;
+		return settingsManager.values$.pipe((0, rxjs.switchMap)(({ fontScalePinchEnabled, fontScalePinchThrottleTime }) => {
+			return (0, rxjs.merge)(pinchStart$.pipe((0, rxjs.switchMap)(() => {
+				const startScale = reader.zoom.state.currentScale;
+				return pinchMove$.pipe((0, rxjs.withLatestFrom)(reader.viewportState$), (0, rxjs.map)(([event, viewportState]) => {
+					const newScale = startScale * event.scale;
+					/**
+					* @important
+					* We don't want to trigger zoom gestures if there is a pan navigation
+					* in progress. This can happens if the user start panning and then adds
+					* another finger triggering a pinch.
+					*/
+					if (viewportState === "busy") return event;
+					if (!reader.zoom.state.isZooming && event.scale > 1) {
+						reader.zoom.enter({
+							animate: false,
+							scale: newScale
+						});
+						return event;
+					}
+					if (reader.zoom.state.isZooming) {
+						if (newScale < 1) reader.zoom.exit();
+						else reader.zoom.scaleAt(Math.min(newScale, settingsManager.values.zoomMaxScale), { constrain: "within-viewport" });
+						return event;
+					}
+					return event;
+				}));
+			})), !fontScalePinchEnabled ? rxjs.EMPTY : pinchStart$.pipe((0, rxjs.withLatestFrom)(reader.viewportState$), (0, rxjs.switchMap)(([pinchStartEvent, viewportState]) => {
+				if (viewportState === "busy" || shouldStartZoom(pinchStartEvent.event.target) || reader.zoom.state.isZooming) return rxjs.EMPTY;
+				const lastFontScaleOnPinchStart = reader.settings.values.fontScale;
+				return pinchMove$.pipe((0, rxjs.throttleTime)(fontScalePinchThrottleTime, rxjs.animationFrameScheduler, { trailing: true }), (0, rxjs.tap)((event) => {
+					const newScale = Number.parseFloat((lastFontScaleOnPinchStart + (event.scale - 1)).toFixed(2));
+					const newMinMaxedFontScale = Math.max(Math.min(newScale, settingsManager.values.fontScaleMaxScale), settingsManager.values.fontScaleMinScale);
+					reader.settings.update({ fontScale: newMinMaxedFontScale });
+				}), (0, rxjs.takeUntil)(pinchEnd$));
+			}))).pipe((0, rxjs.map)((event) => ({
+				type: "pinch",
+				gestureEvent: event
+			})));
+		}));
+	};
+	//#endregion
+	//#region src/gestures/swipe.ts
+	var isSwipeEvent = (event) => event.type === "swipe";
+	var registerSwipe = ({ reader, recognizable, settingsManager }) => {
+		return settingsManager.values$.pipe((0, rxjs.switchMap)(({ panNavigation }) => panNavigation !== "swipe" ? rxjs.EMPTY : recognizable.events$.pipe((0, rxjs.map)(({ event }) => event), (0, rxjs.filter)(isSwipeEvent), (0, rxjs.tap)((event) => {
+			const { computedPageTurnDirection } = reader.settings.values;
+			if (computedPageTurnDirection === "vertical") {
+				if (event.velocityY < -.5) reader?.navigation.turnRight();
+				if (event.velocityY > .5) reader?.navigation.turnLeft();
+			} else {
+				if (event.velocityX < -.5) reader?.navigation.turnRight();
+				if (event.velocityX > .5) reader?.navigation.turnLeft();
+			}
+		}), (0, rxjs.map)((event) => ({
+			type: "swipe",
+			gestureEvent: event
+		})))));
+	};
+	//#endregion
+	//#region src/utils.ts
+	var isNotLink = (event) => {
+		const target = event.event.target;
+		if ((0, _prose_reader_core.isHtmlElement)(target) && target.tagName === "a") return false;
+		return true;
+	};
+	var getPositionRelativeToContainer = (event, containerElementRect) => {
+		const { x, y } = event;
+		const { left, top } = containerElementRect;
+		return {
+			x: x - left,
+			y: y - top
+		};
+	};
+	var istMatchingSelectors = (selectors, event) => {
+		const target = event.event.target;
+		if (!(0, _prose_reader_core.isHtmlElement)(target)) return false;
+		return !!selectors.find((selector) => {
+			if (target.matches(selector)) return true;
+			if (target.closest(selector)) return true;
+			return false;
+		});
+	};
+	//#endregion
+	//#region src/gestures/taps/utils.ts
+	var isPositionInArea = (position, area, containerSize) => {
+		const { x, y } = position;
+		const { width, height } = containerSize;
+		switch (area.type) {
+			case "margins": {
+				const { top, bottom, left, right } = area;
+				const inTop = top !== void 0 ? y < height * top : true;
+				const inBottom = bottom !== void 0 ? y > height * (1 - bottom) : true;
+				const inLeft = left !== void 0 ? x < width * left : true;
+				const inRight = right !== void 0 ? x > width * (1 - right) : true;
+				return top !== void 0 && inTop || bottom !== void 0 && inBottom || left !== void 0 && inLeft || right !== void 0 && inRight;
+			}
+			case "rectangle": {
+				const { x: rectX, y: rectY, width: rectWidth, height: rectHeight, unit = "%" } = area;
+				const actualX = unit === "%" ? width * (rectX / 100) : rectX;
+				const actualY = unit === "%" ? height * (rectY / 100) : rectY;
+				const actualWidth = unit === "%" ? width * (rectWidth / 100) : rectWidth;
+				const actualHeight = unit === "%" ? height * (rectHeight / 100) : rectHeight;
+				return x >= actualX && x <= actualX + actualWidth && y >= actualY && y <= actualY + actualHeight;
+			}
+			case "corner": {
+				const { corner, size, unit = "%" } = area;
+				const actualSize = unit === "%" ? Math.min(width, height) * (size / 100) : size;
+				switch (corner) {
+					case "top-left": return x < actualSize && y < actualSize;
+					case "top-right": return x > width - actualSize && y < actualSize;
+					case "bottom-left": return x < actualSize && y > height - actualSize;
+					case "bottom-right": return x > width - actualSize && y > height - actualSize;
+					default: return false;
+				}
+			}
+			case "center": {
+				const { width: centerWidth, height: centerHeight, unit = "%" } = area;
+				const actualWidth = unit === "%" ? width * (centerWidth / 100) : centerWidth;
+				const actualHeight = unit === "%" ? height * (centerHeight / 100) : centerHeight;
+				const centerX = width / 2;
+				const centerY = height / 2;
+				return x >= centerX - actualWidth / 2 && x <= centerX + actualWidth / 2 && y >= centerY - actualHeight / 2 && y <= centerY + actualHeight / 2;
+			}
+			default: return false;
+		}
+	};
+	var calculatePageTurnLinearMargin = (screenWidth) => {
+		const minMargin = .15;
+		const maxMargin = .2;
+		const minWidth = 320;
+		const maxWidth = 1200;
+		if (screenWidth <= minWidth) return maxMargin;
+		if (screenWidth >= maxWidth) return minMargin;
+		return maxMargin - (screenWidth - minWidth) / (maxWidth - minWidth) * (maxMargin - minMargin);
+	};
+	//#endregion
+	//#region src/gestures/taps/registerTaps.ts
+	var registerTaps = ({ reader, recognizable, hookManager, settingsManager, recognizer }) => {
+		return recognizable.events$.pipe((0, rxjs.filter)((event) => event.recognizer === recognizer), (0, rxjs.withLatestFrom)(reader.context.watch(`rootElement`), reader.spine.element$), (0, rxjs.switchMap)(([{ event }, containerElement, spineElement]) => {
+			if (!containerElement || !spineElement) return rxjs.EMPTY;
+			const normalizedEvent = event.event;
+			const { computedPageTurnDirection, computedPageTurnMode } = reader.settings.values;
+			if (event.type === "tap" && isNotLink(event) && !istMatchingSelectors(settingsManager.values.ignore, event)) {
+				if (`x` in normalizedEvent) {
+					const containerElementRect = containerElement.getBoundingClientRect();
+					const width = containerElementRect.width;
+					const pageTurnMargin = calculatePageTurnLinearMargin(width);
+					const positionInContainer = getPositionRelativeToContainer(normalizedEvent, containerElementRect);
+					const positionInSpineNonTransformed = reader.coordinates.getSpinePositionFromClientPosition(normalizedEvent);
+					const spineItemPageInfo = positionInSpineNonTransformed ? reader.spine.locator.getSpineItemPagePositionFromSpinePosition(positionInSpineNonTransformed) : void 0;
+					return (0, rxjs.combineLatest)([...hookManager.execute("beforeTapGesture", { event$: (0, rxjs.of)({
+						event,
+						page: spineItemPageInfo
+					}) }), (0, rxjs.of)(true)]).pipe((0, rxjs.first)(), (0, rxjs.filter)((results) => !results.some((result) => result === false)), (0, rxjs.map)(() => {
+						const isZoomedIn = reader.zoom.state.isZooming && reader.zoom.state.currentScale > 1;
+						if (computedPageTurnMode === "scrollable" || isZoomedIn) return {
+							type: "tap",
+							gestureEvent: event,
+							handled: false
+						};
+						if (computedPageTurnDirection === "horizontal" && isPositionInArea(positionInContainer, {
+							type: "margins",
+							left: pageTurnMargin
+						}, containerElementRect)) reader.navigation.turnLeftOrTop();
+						else if (computedPageTurnDirection === "vertical" && isPositionInArea(positionInContainer, {
+							type: "margins",
+							top: pageTurnMargin
+						}, containerElementRect)) reader.navigation.turnLeftOrTop();
+						else if (computedPageTurnDirection === "vertical" && isPositionInArea(positionInContainer, {
+							type: "margins",
+							bottom: pageTurnMargin
+						}, containerElementRect)) reader.navigation.turnRightOrBottom();
+						else if (computedPageTurnDirection === "horizontal" && isPositionInArea(positionInContainer, {
+							type: "margins",
+							right: pageTurnMargin
+						}, containerElementRect)) reader.navigation.turnRightOrBottom();
+						else return {
+							type: "tap",
+							gestureEvent: event,
+							handled: false
+						};
+						return {
+							type: "tap",
+							gestureEvent: event,
+							handled: true
+						};
+					}));
+				}
+			}
+			return rxjs.EMPTY;
+		}));
+	};
+	//#endregion
+	//#region src/SettingsManager.ts
+	var GesturesSettingsManager = class extends _prose_reader_core.SettingsManager {
+		reader;
+		constructor(initialSettings, reader) {
+			super(initialSettings);
+			this.reader = reader;
+			/**
+			* Since we have settings that may be locked due to some reader settings
+			* we need to update as soon as they update as well.
+			*/
+			reader.settings.values$.pipe((0, rxjs.tap)(() => {
+				this.update({});
+			}), (0, rxjs.takeUntil)(this.destroy$)).subscribe();
+		}
+		getOutputSettings(inputSettings) {
+			return {
+				...inputSettings,
+				panNavigation: this.reader.settings.values.computedPageTurnMode === `scrollable` ? false : inputSettings.panNavigation
+			};
+		}
+		getDefaultSettings() {
+			return {
+				panNavigation: "pan",
+				pinchCancelPan: true,
+				fontScalePinchEnabled: true,
+				fontScalePinchThrottleTime: 500,
+				fontScaleMaxScale: 5,
+				fontScaleMinScale: .2,
+				zoomMaxScale: Infinity,
+				ignore: []
+			};
+		}
+	};
+	//#endregion
+	//#region src/style.css?inline
+	var style_default = "[data-prose-reader-container=\"${id}\"] * {\n  /* Make sure that touche actions are correctly dispatched no matter where the user interact */\n  touch-action: inherit;\n}\n";
+	//#endregion
+	//#region src/index.ts
+	var gesturesEnhancer = (next) => (options) => {
+		const { gestures = {}, ...rest } = options;
+		const reader = next(rest);
+		const removeStylesheet = reader.utils.injectScopedCSS(document, name, style_default);
+		const settingsManager = new GesturesSettingsManager(gestures, reader);
+		const hookManager = new _prose_reader_core.HookManager();
+		const pinchRecognizer = new gesturx.PinchRecognizer({ options: { 
+		/**
+		* @important
+		* Ideally we want pinch to triggers before pan so we can
+		* capture zoom before starting panning.
+		*/
+posThreshold: 10 } });
+		const failWithSelection = {
+			start$: reader.selection.selectionStart$,
+			end$: reader.selection.selectionEnd$
+		};
+		const panRecognizer = new gesturx.PanRecognizer({
+			failWith: [pinchRecognizer, failWithSelection],
+			options: { posThreshold: 20 }
+		});
+		const tapRecognizer = new gesturx.TapRecognizer({ failWith: [panRecognizer] });
+		const recognizable = new gesturx.Recognizable({
+			recognizers: [
+				tapRecognizer,
+				panRecognizer,
+				new gesturx.SwipeRecognizer({ failWith: [failWithSelection] }),
+				pinchRecognizer
+			],
+			disableTextSelection: false
+		});
+		const tapGestures$ = registerTaps({
+			hookManager,
+			reader,
+			recognizable,
+			settingsManager,
+			recognizer: tapRecognizer
+		});
+		const panGestures$ = registerPan({
+			hookManager,
+			reader,
+			recognizer: panRecognizer,
+			settingsManager
+		});
+		const swipeGestures$ = registerSwipe({
+			hookManager,
+			reader,
+			recognizable,
+			settingsManager
+		});
+		const pinchGestures$ = registerPinch({
+			hookManager,
+			reader,
+			recognizable,
+			settingsManager
+		});
+		const containerUpdate$ = reader.context.watch(`rootElement`).pipe((0, rxjs.tap)((container) => {
+			recognizable.update({ container });
+		}));
+		const watchSettings$ = (0, rxjs.combineLatest)([settingsManager.values$, panRecognizer.config$]).pipe((0, rxjs.tap)(([{ pinchCancelPan }, panRecognizerConfig]) => {
+			const pinchAlreadyInFailWith = panRecognizerConfig.failWith?.includes(pinchRecognizer);
+			if (pinchCancelPan && !pinchAlreadyInFailWith) panRecognizer.update({ failWith: [...panRecognizerConfig.failWith ?? [], pinchRecognizer] });
+			if (!pinchCancelPan && pinchAlreadyInFailWith) panRecognizer.update({ failWith: panRecognizerConfig.failWith?.filter((recognizer) => recognizer !== pinchRecognizer) });
+		}));
+		const gestures$ = (0, rxjs.merge)(pinchGestures$, tapGestures$, swipeGestures$, panGestures$).pipe((0, rxjs.share)());
+		(0, rxjs.merge)(containerUpdate$, watchSettings$, gestures$).pipe((0, rxjs.takeUntil)(reader.$.destroy$)).subscribe();
+		return {
+			...reader,
+			destroy: () => {
+				removeStylesheet();
+				reader.destroy();
+				settingsManager.destroy();
+			},
+			gestures: {
+				settings: settingsManager,
+				gestures$,
+				hooks: hookManager
+			}
+		};
+	};
+	//#endregion
+	exports.gesturesEnhancer = gesturesEnhancer;
+	exports.isPositionInArea = isPositionInArea;
+});
+
+//# sourceMappingURL=index.umd.cjs.map