pdf-flipbook 1.8.0 → 1.9.4

package/dist/pdf-flipbook.css

@@ -13,7 +13,7 @@
   flex-direction: column;
   width:          100%;
   background:     var(--pfb-bg);
-  font-family:    'Georgia', serif;
+  font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   user-select: none;
@@ -44,7 +44,9 @@
   display: block;
   width:   100%;
   height:  100%;
+  cursor:  grab;
 }
+.pfb__canvas:active { cursor: grabbing; }
 
 /* Arrow buttons — sit in the side padding */
 .pfb__btn {

package/dist/pdf-flipbook.esm.js

@@ -21212,7 +21212,7 @@ var DEFAULTS = {
   flippingTime: 800,
   toolbar: true,
   theme: "dark",
-  maxDpr: 2,
+  maxDpr: 3,
   onFlip: null,
   onReady: null,
   onError: null
@@ -21310,7 +21310,7 @@ var PdfFlipbook = class {
       if (this._loaderT) this._loaderT.textContent = `Loading ${i} / ${this._total}\u2026`;
       const page = await pdf.getPage(i);
       const dpr = clamp(window.devicePixelRatio || 1, 1, this._opts.maxDpr);
-      const W = 1200 * dpr;
+      const W = 2400 * dpr;
       const vp = page.getViewport({ scale: W / vp0.width });
       const cvs = document.createElement("canvas");
       cvs.width = vp.width;
@@ -21575,19 +21575,39 @@ var PdfFlipbook = class {
       if (["ArrowLeft", "ArrowUp"].includes(e.key)) this.prev();
     };
     window.addEventListener("keydown", this._onKey);
-    this._canvas.addEventListener("click", (e) => {
-      if (this._flip) return;
+    let dragStart = null;
+    const getCanvasX = (clientX) => {
       const rect = this._canvas.getBoundingClientRect();
-      if (e.clientX - rect.left < this._canvas.width / 2) this.prev();
-      else this.next();
+      return (clientX - rect.left) * (this._canvas.width / rect.width);
+    };
+    const onDragStart = (clientX) => {
+      if (this._flip) return;
+      const cx = getCanvasX(clientX);
+      const half = this._canvas.width / 2;
+      dragStart = { x: clientX, canvasX: cx, side: cx < half ? "left" : "right" };
+    };
+    const onDragEnd = (clientX) => {
+      if (!dragStart) return;
+      const dx = clientX - dragStart.x;
+      const absDx = Math.abs(dx);
+      if (absDx > 30) {
+        if (dragStart.side === "right" && dx < 0) this.next();
+        else if (dragStart.side === "left" && dx > 0) this.prev();
+        else if (dx < 0) this.next();
+        else this.prev();
+      }
+      dragStart = null;
+    };
+    this._canvas.addEventListener("mousedown", (e) => onDragStart(e.clientX));
+    this._canvas.addEventListener("mouseup", (e) => onDragEnd(e.clientX));
+    this._canvas.addEventListener("mouseleave", () => {
+      dragStart = null;
     });
-    let tx = 0;
     this._canvas.addEventListener("touchstart", (e) => {
-      tx = e.touches[0].clientX;
+      onDragStart(e.touches[0].clientX);
     }, { passive: true });
     this._canvas.addEventListener("touchend", (e) => {
-      const dx = e.changedTouches[0].clientX - tx;
-      if (Math.abs(dx) > 40) dx < 0 ? this.next() : this.prev();
+      onDragEnd(e.changedTouches[0].clientX);
     }, { passive: true });
     this._onResize = () => this._resizeCanvas();
     window.addEventListener("resize", this._onResize);