@openpageflip/core 0.0.1 → 0.1.0

package/README.md

@@ -1,16 +1,39 @@
 # @openpageflip/core
 
-Framework-agnostic page-turn engine. Successor to [`page-flip`](https://www.npmjs.com/package/page-flip) (StPageFlip).
+Framework-agnostic page-turn engine. Successor to [`page-flip`](https://www.npmjs.com/package/page-flip) (StPageFlip): the same look, pixel-matched against the original in the test suite, on modern internals.
 
-Pre-1.0 and under construction. The plan, decisions and status live in the [repository's SPEC.md](https://github.com/benhonda/openpageflip/blob/main/SPEC.md).
+Pre-1.0. The plan, decisions and status live in the [repository's SPEC.md](https://github.com/benhonda/openpageflip/blob/main/SPEC.md).
 
 ```sh
 bun add @openpageflip/core
 ```
 
+```html
+<div id="book">
+  <div data-density="hard">Cover</div>
+  <div>Page 1</div>
+  <div>Page 2</div>
+  <div data-density="hard">Back cover</div>
+</div>
+```
+
 ```ts
 import "@openpageflip/core/styles.css";
-import { Layout } from "@openpageflip/core";
+import { createBook } from "@openpageflip/core";
+
+const book = createBook(document.getElementById("book"), {
+  width: 400, // base page size; with size: "stretch" only the ratio matters
+  height: 600,
+  size: "stretch",
+  layout: "auto", // "single" | "spread" | "auto" (by container width)
+  cover: true,
+});
+
+book.on("flip", ({ page }) => console.log("now on page", page));
+await book.flipNext(); // resolves when the turn lands
+book.destroy(); // restores the DOM
 ```
 
+Pages are the container's children (or `options.pages`). Add `data-density="hard"` for rigid pages. Pointer events start on links, buttons and form fields, or anything matching `ignoreDragOn`, are left alone.
+
 A CDN build is published as `dist/index.iife.js` and exposes `window.OpenPageFlip`.

package/dist/index.d.ts

@@ -1,3 +1,22 @@
+//#region src/animation.d.ts
+/** Time and frame sources, injectable so tests can step animations by hand. */
+type Clock = {
+  now(): number;
+  requestFrame(callback: (time: number) => void): number;
+  cancelFrame(handle: number): void;
+};
+//#endregion
+//#region src/events.d.ts
+type Listener<T> = (event: T) => void;
+type Emitter<Events extends Record<string, unknown>> = {
+  on<K extends keyof Events>(name: K, listener: Listener<Events[K]>, options?: {
+    signal?: AbortSignal;
+  }): () => void;
+  off<K extends keyof Events>(name: K, listener: Listener<Events[K]>): void;
+  emit<K extends keyof Events>(name: K, event: Events[K]): void;
+  clear(): void;
+};
+//#endregion
 //#region src/options.d.ts
 /**
  * Public option vocabularies. Plain `as const` objects instead of enums so they survive
@@ -28,6 +47,268 @@ declare const PageDensity: {
   readonly hard: "hard";
 };
 type PageDensity = (typeof PageDensity)[keyof typeof PageDensity];
+/** Which way a page is turning: `forward` reads on, `back` returns to the previous spread. */
+declare const FlipDirection: {
+  readonly forward: "forward";
+  readonly back: "back";
+};
+type FlipDirection = (typeof FlipDirection)[keyof typeof FlipDirection];
+/** What the book is showing: one page (`portrait`) or a two-page spread (`landscape`). */
+declare const Orientation: {
+  readonly portrait: "portrait";
+  readonly landscape: "landscape";
+};
+type Orientation = (typeof Orientation)[keyof typeof Orientation];
+/** What the book is doing right now. */
+declare const FlipState: {
+  /** Nothing in motion. */
+  readonly read: "read";
+  /** A corner is lifted because the pointer hovers over it. */
+  readonly foldCorner: "fold_corner";
+  /** The user is dragging a corner. */
+  readonly userFold: "user_fold";
+  /** A flip animation is running. */
+  readonly flipping: "flipping";
+};
+type FlipState = (typeof FlipState)[keyof typeof FlipState];
+/** How the book sizes itself. */
+declare const SizeMode: {
+  /** Pages are exactly `width` x `height` CSS pixels. */
+  readonly fixed: "fixed";
+  /** Pages scale to the container, keeping the `width:height` ratio, between `minWidth` and `maxWidth`. */
+  readonly stretch: "stretch";
+};
+type SizeMode = (typeof SizeMode)[keyof typeof SizeMode];
+/** When a click or tap turns the page. */
+declare const ClickMode: {
+  readonly anywhere: "anywhere";
+  readonly corners: "corners";
+  readonly off: "off";
+};
+type ClickMode = (typeof ClickMode)[keyof typeof ClickMode];
+type BookOptions = {
+  /** Base page width in CSS pixels. With `size: "stretch"` only the `width:height` ratio matters. */
+  readonly width: number;
+  /** Base page height in CSS pixels. */
+  readonly height: number;
+  /** @default "fixed" */
+  readonly size?: SizeMode;
+  /** Narrowest single page in `stretch` mode; below twice this the book goes portrait. @default 100 */
+  readonly minWidth?: number;
+  /** Widest single page in `stretch` mode. @default 2000 */
+  readonly maxWidth?: number;
+  /** @default "auto" */
+  readonly layout?: Layout;
+  /** Show the first and last pages alone, as hard covers. @default false */
+  readonly cover?: boolean;
+  /** Zero-based page to open on. @default 0 */
+  readonly startPage?: number;
+  /** Duration of a full flip in milliseconds. Shorter flips take proportionally less. @default 1000 */
+  readonly flipDuration?: number;
+  /** Easing for the corner's path, `t` in 0..1. @default linear */
+  readonly easing?: (t: number) => number;
+  /** @default true */
+  readonly shadows?: boolean;
+  /** 0 hides shadows, 1 is full strength. @default 1 */
+  readonly shadowOpacity?: number;
+  /** Size the container to the book (aspect ratio and max width). @default true */
+  readonly autoSize?: boolean;
+  /** @default "anywhere" */
+  readonly click?: ClickMode;
+  /** Let the pointer drag a corner. @default true */
+  readonly drag?: boolean;
+  /** Turn the page on a quick horizontal swipe. @default true */
+  readonly swipe?: boolean;
+  /** Minimum swipe travel in CSS pixels. @default 30 */
+  readonly swipeDistance?: number;
+  /** Lift a corner when the mouse hovers over it. @default true */
+  readonly hoverCorners?: boolean;
+  /** Pointer events starting on an element matching this selector never start a flip. */
+  readonly ignoreDragOn?: string;
+  /** Page elements. @default the container's children */
+  readonly pages?: Iterable<HTMLElement>;
+};
+type ResolvedOptions = Required<Omit<BookOptions, "pages">>;
+//#endregion
+//#region src/layout.d.ts
+/** Where the book sits inside its container, in container CSS pixels. */
+type BookRect = {
+  readonly left: number;
+  readonly top: number;
+  /** Always two pages wide, even in portrait, where only the right half is visible. */
+  readonly width: number;
+  readonly height: number;
+  readonly pageWidth: number;
+};
+type LayoutResult = {
+  readonly orientation: Orientation;
+  readonly rect: BookRect;
+};
+type LayoutOptions = Pick<ResolvedOptions, "size" | "width" | "height" | "minWidth" | "maxWidth" | "layout">;
+/**
+ * Page size and orientation for a container. Same arithmetic as the original, so the book lands
+ * on the same pixels; `layout` only overrides the "is the container too narrow" decision.
+ */
+declare function computeLayout(containerWidth: number, containerHeight: number, options: LayoutOptions): LayoutResult;
+//#endregion
+//#region src/book.d.ts
+type BookEvents = {
+  /** The book is laid out and showing `startPage`. Fires once, after `createBook` returns. */
+  init: {
+    readonly page: number;
+    readonly orientation: Orientation;
+  };
+  /** Pages were replaced with `setPages`. */
+  update: {
+    readonly page: number;
+    readonly orientation: Orientation;
+  };
+  /** A different spread is showing. `page` is the first page of it. */
+  flip: {
+    readonly page: number;
+  };
+  changeState: {
+    readonly state: FlipState;
+  };
+  changeOrientation: {
+    readonly orientation: Orientation;
+  };
+};
+type Book = {
+  /** First page of the open spread, zero-based. */
+  readonly page: number;
+  readonly pageCount: number;
+  readonly orientation: Orientation;
+  readonly state: FlipState;
+  readonly rect: BookRect;
+  on: Emitter<BookEvents>["on"];
+  off: Emitter<BookEvents>["off"];
+  /** Animated turns. Resolve with `false` when there is nothing to turn to. */
+  flipNext(corner?: FlipCorner): Promise<boolean>;
+  flipPrev(corner?: FlipCorner): Promise<boolean>;
+  flipTo(page: number, corner?: FlipCorner): Promise<boolean>;
+  /** Instant turns. */
+  turnTo(page: number): void;
+  turnNext(): void;
+  turnPrev(): void;
+  /** Replace the page elements. Keeps the current page where possible. */
+  setPages(pages: Iterable<HTMLElement>): void;
+  /**
+   * Re-measure the container and redraw. Resizes are handled automatically; call this after
+   * other changes to the container or pages (a framework re-render, a swapped class name).
+   * Cheap enough to call after every render of a wrapping component.
+   */
+  update(): void;
+  /** Stop everything, drop listeners and observers, and restore the DOM. */
+  destroy(): void;
+};
+type CreateBookOptions = BookOptions & {
+  /** Time and frame source, replaceable in tests. */
+  readonly clock?: Clock;
+};
+declare function createBook(container: HTMLElement, userOptions: CreateBookOptions): Book;
+//#endregion
+//#region src/geometry/point.d.ts
+/**
+ * Plane geometry primitives for the fold calculation. Pure functions, no DOM.
+ *
+ * The maths derives from StPageFlip's `Helper` (MIT, Oleg Litovski). Where the original's
+ * behaviour is quirky, the quirk is kept and commented, because the renderer's look depends on
+ * it and the parity tests in `test/fold.parity.test.ts` hold this module to the original.
+ */
+type Point = {
+  readonly x: number;
+  readonly y: number;
+};
+/** A line through two points. Used as an infinite line, not a bounded segment. */
+type Segment = readonly [Point, Point];
+type Rect = {
+  readonly left: number;
+  readonly top: number;
+  readonly width: number;
+  readonly height: number;
+};
+/** The four corners of a rectangle after rotation, so no longer axis-aligned. */
+type RectPoints = {
+  readonly topLeft: Point;
+  readonly topRight: Point;
+  readonly bottomLeft: Point;
+  readonly bottomRight: Point;
+};
+//#endregion
+//#region src/geometry/fold.d.ts
+type FoldInput = {
+  readonly direction: FlipDirection;
+  readonly corner: FlipCorner;
+  readonly pageWidth: number;
+  readonly pageHeight: number;
+  /** Drag point in active-page coordinates: origin at the page's top-left, x grows toward the outer edge. */
+  readonly point: Point;
+};
+/** Where the fold line meets the page edges. A `null` edge is not crossed. */
+type FoldIntersections = {
+  readonly top: Point | null;
+  readonly side: Point | null;
+  readonly bottom: Point | null;
+};
+type Fold = {
+  /** Rotation of the flipping page in radians, signed by direction. */
+  readonly angle: number;
+  /** Where the dragged corner ended up after clamping to what paper can do. */
+  readonly position: Point;
+  /** 0 at rest, 100 fully turned. */
+  readonly progress: number;
+  /** Corners of the flipping page after rotation. */
+  readonly rect: RectPoints;
+  readonly intersections: FoldIntersections;
+  /** Visible part of the flipping page, as a polygon in page coordinates. */
+  readonly flippingClip: readonly Point[];
+  /** Part of the page underneath that the fold reveals. */
+  readonly bottomClip: readonly Point[];
+  /** Where the flipping page's own origin corner sits. */
+  readonly activeCorner: Point;
+  readonly bottomPagePosition: Point;
+  /** Drop-shadow origin and rotation, or `null` when the fold crosses no usable edges. */
+  readonly shadow: {
+    readonly start: Point;
+    readonly angle: number;
+  } | null;
+};
+/**
+ * Returns `null` when the point is degenerate (the corner is at rest, or the fold line would
+ * coincide with a page edge). Callers keep the previous fold for that frame, as the original did.
+ */
+declare function computeFold(input: FoldInput): Fold | null;
+//#endregion
+//#region src/controller.d.ts
+type ShadowData = {
+  readonly pos: Point;
+  readonly angle: number;
+  readonly width: number;
+  readonly opacity: number;
+  readonly direction: FlipDirection;
+  /** 0..200: the original doubled flip progress for its hard-page shadow curve. */
+  readonly progress: number;
+};
+type FlipFrame = {
+  readonly direction: FlipDirection;
+  readonly corner: FlipCorner;
+  readonly flipping: number;
+  readonly bottom: number;
+  readonly fold: Fold;
+  readonly progress: number;
+  /** Rotation about the spine for hard pages, in degrees. */
+  readonly hardAngle: number;
+  readonly shadow: ShadowData | null;
+};
+/** Everything a renderer needs to draw one moment of the book. */
+type Frame = {
+  readonly rect: BookRect;
+  readonly orientation: Orientation;
+  readonly left: number | null;
+  readonly right: number | null;
+  readonly flip: FlipFrame | null;
+};
 //#endregion
-export { Direction, FlipCorner, Layout, PageDensity };
+export { type Book, type BookEvents, type BookOptions, type BookRect, ClickMode, type Clock, type CreateBookOptions, Direction, FlipCorner, FlipDirection, FlipState, type Fold, type FoldInput, type FoldIntersections, type Frame, Layout, Orientation, PageDensity, type Point, type Rect, type RectPoints, type Segment, SizeMode, computeFold, computeLayout, createBook };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.iife.js

@@ -1,37 +1,2 @@
-var OpenPageFlip = (function(exports) {
-	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-	//#region src/options.ts
-	/**
-	* Public option vocabularies. Plain `as const` objects instead of enums so they survive
-	* `isolatedModules`, `erasableSyntaxOnly`, and consumers who only speak string literals.
-	*/
-	/** How many pages are visible at once. `auto` picks by container width. */
-	const Layout = {
-		auto: "auto",
-		single: "single",
-		spread: "spread"
-	};
-	/** Reading direction. `rtl` flips the spine to the right for manga and Hebrew/Arabic books. */
-	const Direction = {
-		ltr: "ltr",
-		rtl: "rtl"
-	};
-	/** Which corner a programmatic flip lifts. */
-	const FlipCorner = {
-		top: "top",
-		bottom: "bottom"
-	};
-	/** `hard` pages rotate as a rigid sheet (covers); `soft` pages bend along the fold. */
-	const PageDensity = {
-		soft: "soft",
-		hard: "hard"
-	};
-	//#endregion
-	exports.Direction = Direction;
-	exports.FlipCorner = FlipCorner;
-	exports.Layout = Layout;
-	exports.PageDensity = PageDensity;
-	return exports;
-})({});
-
+var OpenPageFlip=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});let t={now:()=>performance.now(),requestFrame:e=>requestAnimationFrame(e),cancelFrame:e=>cancelAnimationFrame(e)};function n(e,t){let n=e.now(),r=null,i=!1,a=()=>{i||(i=!0,r!==null&&e.cancelFrame(r),r=null,t.onFrame(1),t.onEnd())},o=s=>{if(r=null,i)return;let c=t.duration<=0?1:Math.min(1,(s-n)/t.duration);if(c>=1){a();return}t.onFrame(t.easing(c)),r=e.requestFrame(o)};return t.duration<=0?a():r=e.requestFrame(o),{finish:a,cancel:()=>{i=!0,r!==null&&e.cancelFrame(r),r=null}}}let r={auto:`auto`,single:`single`,spread:`spread`},i={ltr:`ltr`,rtl:`rtl`},a={top:`top`,bottom:`bottom`},o={soft:`soft`,hard:`hard`},s={forward:`forward`,back:`back`},c={portrait:`portrait`,landscape:`landscape`},l={read:`read`,foldCorner:`fold_corner`,userFold:`user_fold`,flipping:`flipping`},u={fixed:`fixed`,stretch:`stretch`},d={anywhere:`anywhere`,corners:`corners`,off:`off`},f={size:u.fixed,minWidth:100,maxWidth:2e3,layout:r.auto,cover:!1,startPage:0,flipDuration:1e3,easing:e=>e,shadows:!0,shadowOpacity:1,autoSize:!0,click:d.anywhere,drag:!0,swipe:!0,swipeDistance:30,hoverCorners:!0,ignoreDragOn:`a, button, input, textarea, select, [data-opf-no-flip]`};function p(e,t){return Object.values(e).includes(t)}function m(e){let{pages:t,...n}=e,i={...f,...n},a=e=>{let t=i[e];if(!(Number.isFinite(t)&&t>0))throw TypeError(`@openpageflip/core: "${e}" must be a positive number, got ${String(t)}`)};if(a(`width`),a(`height`),a(`flipDuration`),a(`minWidth`),a(`maxWidth`),i.maxWidth<i.minWidth)throw TypeError(`@openpageflip/core: "maxWidth" (${i.maxWidth}) is below "minWidth" (${i.minWidth})`);if(!p(u,i.size))throw TypeError(`@openpageflip/core: unknown "size" ${String(i.size)}`);if(!p(r,i.layout))throw TypeError(`@openpageflip/core: unknown "layout" ${String(i.layout)}`);if(!p(d,i.click))throw TypeError(`@openpageflip/core: unknown "click" ${String(i.click)}`);if(!(i.shadowOpacity>=0&&i.shadowOpacity<=1))throw TypeError(`@openpageflip/core: "shadowOpacity" must be within 0..1, got ${i.shadowOpacity}`);if(!Number.isInteger(i.startPage)||i.startPage<0)throw TypeError(`@openpageflip/core: "startPage" must be a non-negative integer, got ${i.startPage}`);return i}function h(e,t){return{x:e.x-t.left,y:e.y-t.top}}function g(e,t,n){return{x:n===s.forward?e.x-t.left-t.width/2:t.width/2-e.x+t.left,y:e.y-t.top}}function _(e,t,n){return{x:n===s.forward?e.x+t.left+t.width/2:t.width/2-e.x+t.left,y:e.y+t.top}}function v(e,t){return Math.sqrt((t.x-e.x)**2+(t.y-e.y)**2)}function y(e,t){let n=e[0].y-e[1].y,r=t[0].y-t[1].y,i=e[1].x-e[0].x,a=t[1].x-t[0].x;return Math.acos((n*r+i*a)/(Math.sqrt(n*n+i*i)*Math.sqrt(r*r+a*a)))}function b(e,t){return t.x>=e.left&&t.x<=e.left+e.width&&t.y>=e.top&&t.y<=e.top+e.height}function x(e,t,n){let r=Math.cos(n),i=Math.sin(n);return{x:e.x*r+e.y*i+t.x,y:e.y*r-e.x*i+t.y}}function S(e,t,n){if(v(e,n)<=t)return n;let r=e.x,i=e.y,a=n.x,o=n.y,s=Math.sqrt(t**2*(r-a)**2/((r-a)**2+(i-o)**2))+r;n.x<0&&(s*=-1);let c=(s-r)*(i-o)/(r-a)+i;return r-a+i===0&&(c=t),{x:s,y:c}}let C=Symbol(`collinear`);function w(e,t){let n=e[0].y-e[1].y,r=t[0].y-t[1].y,i=e[1].x-e[0].x,a=t[1].x-t[0].x,o=e[0].x*e[1].y-e[1].x*e[0].y,s=t[0].x*t[1].y-t[1].x*t[0].y,c=-((o*a-s*i)/(n*a-r*i)),l=-((n*s-r*o)/(n*a-r*i));if(Number.isFinite(c)&&Number.isFinite(l))return{x:c,y:l};let u=n*s-r*o,d=i*s-a*o;return Math.abs(u-d)<.1?C:null}function T(e,t,n){let r=w(t,n);return r===null||r===C||b(e,r)?r:null}function E(e){let{direction:t,corner:n,pageWidth:r,pageHeight:i}=e,o=D(e);if(o===null)return null;let{position:c,angle:l,rect:u}=o,d=j(e,c,u);if(d===null)return null;let{top:f,side:p,bottom:m}=d,h=[u.topLeft];f&&h.push(f);let g=!1;p===null?g=!0:h.push(p),m&&h.push(m),(g||n===a.bottom)&&h.push(u.bottomLeft);let _=[];f&&_.push(f),n===a.top?_.push({x:r,y:0}):(f!==null&&_.push({x:r,y:0}),_.push({x:r,y:i})),p===null?n===a.top&&_.push({x:r,y:i}):(f===null||v(p,f)>=10)&&_.push(p),m&&_.push(m),f&&_.push(f);let b=n===a.top?f:p??f,x=b!==p&&p!==null?p:m,S=null;if(b!==null&&x!==null){let e=y([b,x],[{x:0,y:0},{x:r,y:0}]);S={start:b,angle:t===s.forward?e:Math.PI-e}}return{angle:t===s.forward?-l:l,position:c,progress:Math.abs((c.x-r)/(2*r)*100),rect:u,intersections:d,flippingClip:h,bottomClip:_,activeCorner:t===s.forward?u.topLeft:u.topRight,bottomPagePosition:t===s.back?{x:r,y:0}:{x:0,y:0},shadow:S}}function D(e){let{corner:t,pageWidth:n,pageHeight:r}=e,i=e.point,o=O(e,i);if(o===null)return null;let s=t===a.top?{x:0,y:0}:{x:0,y:r},c=t===a.top?{x:0,y:r}:{x:0,y:0},l=S(s,n,i);if(l!==i&&(i=l,o=O(e,i),o===null))return null;let u=t===a.top?o.rect.bottomRight:o.rect.topRight,d=t===a.top?o.rect.topLeft:o.rect.bottomLeft;return u.x<=0&&(i=S(c,Math.sqrt(n**2+r**2),d),o=O(e,i),o===null)||Math.abs(i.x-n)<1&&Math.abs(i.y)<1?null:{position:i,...o}}function O(e,t){let n=k(e,t);return n===null?null:{angle:n,rect:A(e,t,n)}}function k(e,t){let{corner:n,pageWidth:r,pageHeight:i}=e,o=r-t.x+1,s=n===a.bottom?i-t.y:t.y,c=2*Math.acos(o/Math.sqrt(s*s+o*o));s<0&&(c=-c);let l=Math.PI-c;return!Number.isFinite(c)||l>=0&&l<.003?null:n===a.bottom?-c:c}function A(e,t,n){let{corner:r,pageWidth:i,pageHeight:o}=e,s=r===a.top?0:-o;return{topLeft:x({x:0,y:s},t,n),topRight:x({x:i,y:s},t,n),bottomLeft:x({x:0,y:s+o},t,n),bottomRight:x({x:i,y:s+o},t,n)}}function j(e,t,n){let{corner:r,pageWidth:i,pageHeight:o}=e,s={left:-1,top:-1,width:i+2,height:o+2},c=[{x:0,y:0},{x:i,y:0}],l=[{x:i,y:0},{x:i,y:o}],u=[{x:0,y:o},{x:i,y:o}],d=r===a.top?T(s,[t,n.topRight],c):T(s,[n.topLeft,n.topRight],c),f=r===a.top?T(s,[t,n.bottomLeft],l):T(s,[t,n.topLeft],l),p=T(s,[n.bottomLeft,n.bottomRight],u);return d===C||f===C||p===C?null:{top:d,side:f,bottom:p}}function M(e,t,n){let r=new Set,i=[],a=0;n&&e>0&&(r.add(0),i.push([0]),a=1);for(let t=a;t<e;t+=2)t<e-1?i.push([t,t+1]):(i.push([t]),r.add(t));let o=Array.from({length:e},(e,t)=>[t]);return{spreads:t===c.portrait?o:i,hardByPosition:r}}function N(e,t){let n=e.findIndex(e=>e[0]===t||e[1]===t);return n===-1?null:n}function P(e,t,n,r){let i=e[n];return i===void 0?{left:null,right:null}:i.length===2?{left:i[0],right:i[1]}:t===c.landscape&&i[0]===r-1?{left:i[0],right:null}:{left:null,right:i[0]}}function F(e,t,n,r){let i=r===s.forward;if(t===c.portrait){let t=e[n]?.[0],r=e[i?n+1:n-1]?.[0];return t===void 0||r===void 0?null:i?{flipping:t,bottom:r}:{flipping:r,bottom:r}}let a=e[i?n+1:n-1];return a===void 0?null:a.length===1?{flipping:a[0],bottom:a[0]}:i?{flipping:a[0],bottom:a[1]}:{flipping:a[1],bottom:a[0]}}var I=class{pages;spreads=[];spreadIndex=0;currentPage=0;orientation;rect;left=null;right=null;state=l.read;session=null;tween=null;settleTween=null;pressStart=null;dragged=!1;options;clock;hooks;constructor(e,t,n,r,i){this.options=e,this.clock=t,this.hooks=n,this.pages=r,this.orientation=i.orientation,this.rect=i.rect,this.rebuildSpreads()}get page(){return this.currentPage}get pageCount(){return this.pages.length}get currentState(){return this.state}get currentOrientation(){return this.orientation}get bookRect(){return this.rect}setPages(e){this.endSession(),this.pages=e,this.rebuildSpreads(),this.showPage(Math.min(this.currentPage,Math.max(0,e.length-1)))}setLayout(e){this.rect=e.rect;let t=e.orientation!==this.orientation;return t&&(this.endSession(),this.orientation=e.orientation,this.rebuildSpreads()),this.showPage(this.currentPage),t}rebuildSpreads(){let{spreads:e,hardByPosition:t}=M(this.pages.length,this.orientation,this.options.cover);this.spreads=e;for(let[e,n]of this.pages.entries())t.has(e)&&(n.density=o.hard,n.drawingDensity=o.hard)}showPage(e){let t=N(this.spreads,e);t!==null&&(this.spreadIndex=t,this.showSpread())}showNext(){this.spreadIndex<this.spreads.length-1&&(this.spreadIndex++,this.showSpread())}showPrev(){this.spreadIndex>0&&(this.spreadIndex--,this.showSpread())}showSpread(){let{left:e,right:t}=P(this.spreads,this.orientation,this.spreadIndex,this.pages.length);this.left=e,this.right=t;let n=this.spreads[this.spreadIndex],r=n===void 0?this.currentPage:n[0],i=r!==this.currentPage;this.currentPage=r,this.render(),i&&this.hooks.onPage(r)}flipNext(e){return this.flipFrom({x:this.rect.left+this.rect.pageWidth*2-10,y:e===a.top?1:this.rect.height-2})}flipPrev(e){return this.flipFrom({x:this.rect.left+10,y:e===a.top?1:this.rect.height-2})}flipTo(e,t){let n=N(this.spreads,e);return n===null||n===this.spreadIndex?Promise.resolve(!1):n>this.spreadIndex?(this.spreadIndex=n-1,this.syncCurrentPage(),this.flipNext(t)):(this.spreadIndex=n+1,this.syncCurrentPage(),this.flipPrev(t))}syncCurrentPage(){let e=this.spreads[this.spreadIndex];e!==void 0&&(this.currentPage=e[0])}flipFrom(e){this.session!==null&&this.tween?.finish();let t=this.start(e);if(t===null)return Promise.resolve(!1);this.setState(l.flipping);let{pageWidth:n,pageHeight:r}=t,i=r/10,o=t.corner===a.bottom?r-i:i,s=t.corner===a.bottom?r:0,c={x:n-i,y:o};return this.applyFold(c),this.animateTo(c,{x:-n,y:s},!0,!0)}release(){let e=this.session;if(e===null||e.fold===null)return Promise.resolve(!1);let t=e.fold.position,n=e.corner===a.bottom?e.pageHeight:0;return t.x<=0?this.animateTo(t,{x:-e.pageWidth,y:n},!0,!0):this.animateTo(t,{x:e.pageWidth,y:n},!1,!0)}animateTo(e,t,r,i){this.tween?.finish();let a=t.x-e.x,o=t.y-e.y,c=Math.min(1,Math.max(Math.abs(a),Math.abs(o))/1e3)*this.options.flipDuration;return new Promise(t=>{this.settleTween=t,this.tween=n(this.clock,{duration:c,easing:this.options.easing,onFrame:t=>this.applyFold({x:e.x+a*t,y:e.y+o*t}),onEnd:()=>{this.tween=null,this.settleTween=null;let e=this.session;if(e===null){t(!1);return}r&&(e.direction===s.back?this.showPrev():this.showNext()),i&&(this.endSession(),this.setState(l.read),this.render()),t(r)}})})}hover(e){if(this.state!==l.read&&this.state!==l.foldCorner)return;let{pageWidth:t,height:n}=this.rect;if(!this.isOnCorner(e)){if(this.session===null)return;this.setState(l.read),this.tween?.finish(),this.release();return}if(this.session!==null){this.applyFold(g(e,this.rect,this.session.direction));return}let r=this.start(e);if(r===null)return;this.setState(l.foldCorner),this.applyFold({x:t-1,y:1});let i=r.corner===a.bottom?n-1:1,o=r.corner===a.bottom?n-50:50;this.animateTo({x:t-1,y:i},{x:t-50,y:o},!1,!1)}hoverEnd(){this.state===l.foldCorner&&(this.setState(l.read),this.tween?.finish(),this.release())}pointerDown(e){this.pressStart=e,this.dragged=!1}pointerDrag(e){if(this.pressStart===null||!this.options.drag||!this.dragged&&v(this.pressStart,e)<=5)return;this.dragged=!0;let t=this.session??this.start(this.pressStart);t!==null&&(this.setState(l.userFold),this.applyFold(g(e,this.rect,t.direction)))}pointerUp(e){if(this.pressStart!==null){if(this.pressStart=null,this.dragged){this.release();return}this.click(e)}}pointerCancel(){this.pressStart!==null&&(this.pressStart=null,this.dragged&&this.release())}swipe(e,t){this.pressStart=null;let n=this.session;if(n!==null&&n.fold!==null){if(n.direction!==e)return this.release();let r=t===a.bottom?n.pageHeight:0;return this.animateTo(n.fold.position,{x:-n.pageWidth,y:r},!0,!0)}return e===s.forward?this.flipNext(t):this.flipPrev(t)}click(e){this.options.click!==d.off&&(this.options.click===d.corners&&!this.isOnCorner(e)||this.flipFrom(e))}start(e){this.endSession();let t=h(e,this.rect),n=this.directionAt(t),r=t.y>=this.rect.height/2?a.bottom:a.top;if(!(n===s.forward?this.currentPage<this.pages.length-1:this.currentPage>=1))return null;let i=F(this.spreads,this.orientation,this.spreadIndex,n);if(i===null)return null;if(this.orientation===c.landscape){let e=this.pages[i.flipping],t=this.pages[n===s.back?i.flipping+1:i.flipping-1];e!==void 0&&t!==void 0&&e.density!==t.density&&(e.drawingDensity=o.hard,t.drawingDensity=o.hard)}return this.session={direction:n,corner:r,flipping:i.flipping,bottom:i.bottom,pageWidth:this.rect.pageWidth,pageHeight:this.rect.height,fold:null,progress:0,hardAngle:0,shadow:null},this.session}endSession(){this.tween?.cancel(),this.tween=null,this.settleTween?.(!1),this.settleTween=null,this.session=null;for(let e of this.pages)e.drawingDensity=e.density}applyFold(e){let t=this.session;if(t===null)return;let n=E({direction:t.direction,corner:t.corner,pageWidth:t.pageWidth,pageHeight:t.pageHeight,point:e});if(n===null)return;let{progress:r}=n;t.fold=n,t.progress=r,t.hardAngle=(t.direction===s.forward?90:-90)*((200-r*2)/100),t.shadow=this.options.shadows&&n.shadow!==null?{pos:n.shadow.start,angle:n.shadow.angle,width:t.pageWidth*3/4*(r/100),opacity:(100-r)*(100*this.options.shadowOpacity)/100/100,direction:t.direction,progress:r*2}:null,this.render()}directionAt(e){return this.orientation===c.portrait?e.x-this.rect.pageWidth<=this.rect.width/5?s.back:s.forward:e.x<this.rect.width/2?s.back:s.forward}isOnCorner(e){let{pageWidth:t,height:n,width:r}=this.rect,i=Math.sqrt(t**2+n**2)/5,a=h(e,this.rect);return a.x>0&&a.y>0&&a.x<r&&a.y<n&&(a.x<i||a.x>r-i)&&(a.y<i||a.y>n-i)}setState(e){this.state!==e&&(this.state=e,this.hooks.onState(e))}frame(){let e=this.session;return{rect:this.rect,orientation:this.orientation,left:this.left,right:this.right,flip:e!==null&&e.fold!==null?{direction:e.direction,corner:e.corner,flipping:e.flipping,bottom:e.bottom,fold:e.fold,progress:e.progress,hardAngle:e.hardAngle,shadow:e.shadow}:null}}render(){this.hooks.onFrame(this.frame())}destroy(){this.endSession()}};function L(){let e=new Map,t=(t,n)=>{e.get(t)?.delete(n)};return{on(n,r,i){let a=e.get(n);a===void 0&&(a=new Set,e.set(n,a)),a.add(r);let o=()=>t(n,r);return i?.signal?.addEventListener(`abort`,o,{once:!0}),o},off:t,emit(t,n){let r=e.get(t);if(r!==void 0)for(let e of[...r])e(n)},clear(){e.clear()}}}function R(e,t,n){let r=null,i=t=>{let n=e.getBoundingClientRect();return{x:t.clientX-n.left,y:t.clientY-n.top}},o=a=>{if(r!==null||a.pointerType===`mouse`&&a.button!==0||a.target instanceof Element&&a.target.closest(n.ignoreDragOn)!==null)return;let o=i(a);r={id:a.pointerId,start:o,startedAt:a.timeStamp};try{e.setPointerCapture(a.pointerId)}catch{}t.pointerDown(o),a.pointerType===`mouse`&&a.preventDefault()},c=e=>{if(r!==null){e.pointerId===r.id&&t.pointerDrag(i(e));return}e.pointerType===`mouse`&&n.hoverCorners&&t.hover(i(e))},l=e=>{if(r===null||e.pointerId!==r.id)return;let{start:o,startedAt:c}=r;r=null;let l=i(e),u=l.x-o.x,d=l.y-o.y,f=e.timeStamp-c<250;if(n.swipe&&f&&Math.abs(u)>n.swipeDistance&&Math.abs(d)<n.swipeDistance*2){let e=t.bookRect,n=o.y-e.top<e.height/2?a.top:a.bottom;t.swipe(u>0?s.back:s.forward,n);return}t.pointerUp(l)},u=e=>{r!==null&&e.pointerId===r.id&&(r=null,t.pointerCancel())},d=e=>{r===null&&e.pointerType===`mouse`&&t.hoverEnd()};return e.addEventListener(`pointerdown`,o),e.addEventListener(`pointermove`,c,{passive:!0}),e.addEventListener(`pointerup`,l),e.addEventListener(`pointercancel`,u),e.addEventListener(`pointerleave`,d),()=>{e.removeEventListener(`pointerdown`,o),e.removeEventListener(`pointermove`,c),e.removeEventListener(`pointerup`,l),e.removeEventListener(`pointercancel`,u),e.removeEventListener(`pointerleave`,d)}}function z(e,t,n){let i={x:e/2,y:t/2},a=n.width/n.height,o=e=>n.layout===r.single||n.layout===r.auto&&e?c.portrait:c.landscape,s,l=n.width,d=n.height;n.size===u.stretch?(s=o(e<n.minWidth*2),l=s===c.portrait?e:e/2,l>n.maxWidth&&(l=n.maxWidth),d=l/a,d>t&&(d=t,l=d*a)):s=o(e<l*2);let f=s===c.portrait?i.x-l/2-l:i.x-l;return{orientation:s,rect:{left:f,top:i.y-d/2,width:l*2,height:d,pageWidth:l}}}function B(e,t){return e.map((e,n)=>{let r=t.has(n)||e.dataset.density===o.hard?o.hard:o.soft;return{element:e,density:r,drawingDensity:r}})}let V={flat:1,bottom:3,hardShadow:4,flipping:5,hardInnerShadow:5,shadow:10},H={book:`opf-book`,page:`opf-page`,left:`opf-page--left`,right:`opf-page--right`,flat:`opf-page--flat`,soft:`opf-page--soft`,hard:`opf-page--hard`,shadow:`opf-shadow`},U=[`display`,`position`,`zIndex`,`left`,`top`,`width`,`height`,`transformOrigin`,`transform`,`clipPath`,`backfaceVisibility`];function W(e,t){for(let n of U)e.style[n]=t[n]??``}var G=class{shadows;pages=[];saved=new Map;clone=null;container;options;constructor(e,t){this.container=e,this.options=t,e.classList.add(H.book);let n=t=>{let n=document.createElement(`div`);return n.className=`${H.shadow} ${H.shadow}--${t}`,n.style.display=`none`,e.append(n),n};this.shadows={outer:n(`outer`),inner:n(`inner`),hardOuter:n(`hard-outer`),hardInner:n(`hard-inner`)},this.applyContainerSizing()}setPages(e){for(let t of this.pages)e.some(e=>e.element===t.element)||this.restore(t.element);this.pages=e;for(let t of e)this.saved.has(t.element)||(this.saved.set(t.element,{cssText:t.element.style.cssText,className:t.element.className}),t.element.classList.add(H.page),t.element.parentElement!==this.container&&this.container.append(t.element))}applyContainerSizing(e=c.landscape){let{autoSize:t,size:n,width:r,height:i,minWidth:a,maxWidth:o,layout:s}=this.options;if(!t)return;let l=s===`spread`?2:1,u=this.container.style;u.width=`100%`,u.minWidth=`${(n===`fixed`?r:a)*l}px`,u.maxWidth=`${(n===`fixed`?r:o)*2}px`,u.aspectRatio=e===c.portrait?`${r} / ${i}`:`${r*2} / ${i}`}render(e){let{rect:t,flip:n}=e,r=new Set([e.left,e.right,n?.flipping,n?.bottom]);for(let[e,t]of this.pages.entries())r.has(e)||W(t.element,{display:`none`}),t.element.classList.toggle(H.hard,t.drawingDensity===o.hard),t.element.classList.toggle(H.soft,t.drawingDensity===o.soft);let i=n!==null&&this.pages[n.flipping]?.drawingDensity===o.hard;if(e.orientation!==c.portrait&&e.left!==null&&(n!==null&&n.direction===s.back&&i?this.drawHard(e.left,`left`,180+n.hardAngle,V.flipping,t):this.drawFlat(e.left,`left`,t)),e.right!==null&&(n!==null&&n.direction===s.forward&&i?this.drawHard(e.right,`right`,180+n.hardAngle,V.flipping,t):this.drawFlat(e.right,`right`,t)),n===null){this.dropClone(),this.hideShadows();return}let a=!i&&n.flipping===e.right;a||this.dropClone();let l=n.direction===s.back?`left`:`right`;(e.orientation!==c.portrait||n.direction!==s.back)&&(i?this.drawHard(n.bottom,l,0,V.bottom,t):this.drawSoft(n.bottom,l,n.fold.bottomClip,n.fold.bottomPagePosition,0,n.direction,V.bottom,t));let u=n.direction===s.forward&&e.orientation!==c.portrait?`left`:`right`;i?this.drawHard(n.flipping,u,n.hardAngle,V.flipping,t):this.drawSoft(n.flipping,u,n.fold.flippingClip,n.fold.activeCorner,n.fold.angle,n.direction,V.flipping,t,a),n.shadow===null?this.hideShadows():i?(this.hideSoftShadows(),this.drawHardShadows(n.shadow,t)):(this.hideHardShadows(),this.drawSoftShadows(n.shadow,n.fold.rect,t))}element(e,t,n=!1){let r=this.pages[e];if(r===void 0)return null;let i=n?this.cloneOf(r.element):r.element;return i.classList.toggle(H.left,t===`left`),i.classList.toggle(H.right,t===`right`),i}cloneOf(e){if(this.clone?.source===e)return this.clone.element;this.dropClone();let t=e.cloneNode(!0);t.removeAttribute(`id`);for(let e of t.querySelectorAll(`[id]`))e.removeAttribute(`id`);return t.setAttribute(`aria-hidden`,`true`),t.inert=!0,t.dataset.opfClone=``,e.after(t),this.clone={source:e,element:t},t}dropClone(){this.clone?.element.remove(),this.clone=null}drawFlat(e,t,n){let r=this.element(e,t);if(r===null)return;r.classList.add(H.flat);let i=t===`right`?n.left+n.pageWidth:n.left;W(r,{position:`absolute`,display:`block`,height:`${n.height}px`,left:`${i}px`,top:`${n.top}px`,width:`${n.pageWidth}px`,zIndex:String(V.flat)})}drawSoft(e,t,n,r,i,a,o,c,l=!1){let u=this.element(e,t,l);if(u===null)return;u.classList.remove(H.flat);let d=_(r,c,a),f=n.map(e=>{let t=x(a===s.back?{x:-e.x+r.x,y:e.y-r.y}:{x:e.x-r.x,y:e.y-r.y},{x:0,y:0},i);return`${t.x}px ${t.y}px`}).join(`, `);W(u,{position:`absolute`,display:`block`,zIndex:String(o),left:`0`,top:`0`,width:`${c.pageWidth}px`,height:`${c.height}px`,transformOrigin:`0 0`,clipPath:`polygon(${f})`,transform:`translate3d(${d.x}px, ${d.y}px, 0) rotate(${i}rad)`})}drawHard(e,t,n,r,i){let a=this.element(e,t);if(a===null)return;a.classList.remove(H.flat);let o=i.left+i.width/2;W(a,{position:`absolute`,display:`block`,zIndex:String(r),left:`0`,top:`0`,width:`${i.pageWidth}px`,height:`${i.height}px`,backfaceVisibility:`hidden`,clipPath:`none`,transformOrigin:t===`left`?`${i.pageWidth}px 0`:`0 0`,transform:t===`left`?`translate3d(${i.left}px, ${i.top}px, 0) rotateY(${n}deg)`:`translate3d(${o}px, ${i.top}px, 0) rotateY(${n}deg)`})}drawSoftShadows(e,t,n){let r=e.direction===s.forward,i=_(e.pos,n,e.direction),a=e.angle+3*Math.PI/2,o=(t,n)=>t.map(t=>{let i=x(r?{x:t.x-e.pos.x,y:t.y-e.pos.y}:{x:-t.x+e.pos.x,y:t.y-e.pos.y},{x:n,y:100},a);return`${i.x}px ${i.y}px`}).join(`, `),c=r?0:e.width,l=o([{x:0,y:0},{x:n.pageWidth,y:0},{x:n.pageWidth,y:n.height},{x:0,y:n.height}],c);this.shadows.outer.style.cssText=`display: block; z-index: ${V.shadow}; width: ${e.width}px; height: ${n.height*2}px; background: linear-gradient(${r?`to right`:`to left`}, rgba(0, 0, 0, ${e.opacity}), rgba(0, 0, 0, 0)); transform-origin: ${c}px 100px; transform: translate3d(${i.x-c}px, ${i.y-100}px, 0) rotate(${a}rad); clip-path: polygon(${l});`;let u=e.width*3/4,d=r?u:0,f=o([t.topLeft,t.topRight,t.bottomRight,t.bottomLeft],d);this.shadows.inner.style.cssText=`display: block; z-index: ${V.shadow}; width: ${u}px; height: ${n.height*2}px; background: linear-gradient(${r?`to left`:`to right`}, rgba(0, 0, 0, ${e.opacity}) 5%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, ${e.opacity}) 35%, rgba(0, 0, 0, 0) 100%); transform-origin: ${d}px 100px; transform: translate3d(${i.x-d}px, ${i.y-100}px, 0) rotate(${a}rad); clip-path: polygon(${f});`}drawHardShadows(e,t){let n=e.progress>100?200-e.progress:e.progress,r=Math.min(t.pageWidth,(100-n)*(2.5*t.pageWidth)/100+20),i=t.left+t.width/2,a=e.direction===s.forward&&e.progress>100||e.direction===s.back&&e.progress<=100,o=`display: block; width: ${r}px; height: ${t.height}px; left: ${i}px; top: ${t.top}px; transform-origin: 0 0;`;this.shadows.hardInner.style.cssText=`${o} z-index: ${V.hardInnerShadow}; background: linear-gradient(to right, rgba(0, 0, 0, ${e.opacity*n/100}) 5%, rgba(0, 0, 0, 0) 100%); transform: translate3d(0, 0, 0)${a?``:` rotateY(180deg)`};`,this.shadows.hardOuter.style.cssText=`${o} z-index: ${V.hardShadow}; background: linear-gradient(to left, rgba(0, 0, 0, ${e.opacity}) 5%, rgba(0, 0, 0, 0) 100%); transform: translate3d(0, 0, 0)${a?` rotateY(180deg)`:``};`}hideSoftShadows(){this.shadows.outer.style.cssText=`display: none`,this.shadows.inner.style.cssText=`display: none`}hideHardShadows(){this.shadows.hardOuter.style.cssText=`display: none`,this.shadows.hardInner.style.cssText=`display: none`}hideShadows(){this.hideSoftShadows(),this.hideHardShadows()}restore(e){let t=this.saved.get(e);t!==void 0&&(e.style.cssText=t.cssText,e.className=t.className,this.saved.delete(e))}destroy(){this.dropClone();for(let e of this.pages)this.restore(e.element);this.pages=[];for(let e of Object.values(this.shadows))e.remove();this.container.classList.remove(H.book);let e=this.container.style;e.width=``,e.minWidth=``,e.maxWidth=``,e.aspectRatio=``}};function K(e,n){let{clock:r=t,...i}=n,o=m(i),s=Array.from(i.pages??e.children).filter(e=>e instanceof HTMLElement);if(s.length===0)throw TypeError(`@openpageflip/core: createBook needs at least one page element`);if(o.startPage>=s.length)throw TypeError(`@openpageflip/core: "startPage" ${o.startPage} is out of range for ${s.length} pages`);let c=L(),l=new G(e,o),u=matchMedia(`(prefers-reduced-motion: reduce)`),d=()=>{let t=e.clientWidth,{orientation:n}=z(t,e.clientHeight,o);return l.applyContainerSizing(n),z(t,e.clientHeight,o)},f=e=>{let{hardByPosition:t}=M(e.length,`landscape`,o.cover);return B(e,t)},p=f(s);l.setPages(p);let h=new I({...o,get flipDuration(){return u.matches?0:o.flipDuration}},r,{onFrame:e=>l.render(e),onPage:e=>c.emit(`flip`,{page:e}),onState:e=>c.emit(`changeState`,{state:e})},p,d()),g=()=>{let e=d();h.setLayout(e)&&c.emit(`changeOrientation`,{orientation:e.orientation})},_={width:e.clientWidth,height:e.clientHeight},v=null,y=new ResizeObserver(()=>{v===null&&(v=requestAnimationFrame(()=>{v=null;let t={width:e.clientWidth,height:e.clientHeight};(t.width!==_.width||t.height!==_.height)&&(_=t,g())}))});y.observe(e);let b=R(e,h,o);return h.showPage(o.startPage),queueMicrotask(()=>c.emit(`init`,{page:h.page,orientation:h.currentOrientation})),{get page(){return h.page},get pageCount(){return h.pageCount},get orientation(){return h.currentOrientation},get state(){return h.currentState},get rect(){return h.bookRect},on:c.on,off:c.off,flipNext:(e=a.top)=>h.flipNext(e),flipPrev:(e=a.top)=>h.flipPrev(e),flipTo:(e,t=a.top)=>h.flipTo(e,t),turnTo:e=>h.showPage(e),turnNext:()=>h.showNext(),turnPrev:()=>h.showPrev(),setPages(e){let t=Array.from(e);if(t.length===0)throw TypeError(`@openpageflip/core: setPages needs at least one page element`);p=f(t),l.setPages(p),h.setPages(p),c.emit(`update`,{page:h.page,orientation:h.currentOrientation})},update:g,destroy(){y.disconnect(),v!==null&&cancelAnimationFrame(v),b(),h.destroy(),l.destroy(),c.clear()}}}return e.ClickMode=d,e.Direction=i,e.FlipCorner=a,e.FlipDirection=s,e.FlipState=l,e.Layout=r,e.Orientation=c,e.PageDensity=o,e.SizeMode=u,e.computeFold=E,e.computeLayout=z,e.createBook=K,e})({});
 //# sourceMappingURL=index.iife.js.map