@openpageflip/core 0.1.0 → 0.2.1

package/dist/index.js

@@ -20,7 +20,7 @@ function startTween(clock, spec) {
 	const tick = (time) => {
 		handle = null;
 		if (done) return;
-		const t = spec.duration <= 0 ? 1 : Math.min(1, (time - startedAt) / spec.duration);
+		const t = spec.duration <= 0 ? 1 : Math.min(1, Math.max(0, (time - startedAt) / spec.duration));
 		if (t >= 1) {
 			end();
 			return;
@@ -51,11 +51,6 @@ const Layout = {
 	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",
@@ -120,7 +115,7 @@ const DEFAULTS = {
 	ignoreDragOn: "a, button, input, textarea, select, [data-opf-no-flip]"
 };
 function isOneOf(vocabulary, value) {
-	return Object.values(vocabulary).includes(value);
+	return Object.values(vocabulary).some((allowed) => allowed === value);
 }
 /** Fill in defaults and reject options that could only produce a broken book. */
 function resolveOptions(user) {
@@ -144,6 +139,11 @@ function resolveOptions(user) {
 	if (!isOneOf(ClickMode, options.click)) throw new TypeError(`@openpageflip/core: unknown "click" ${String(options.click)}`);
 	if (!(options.shadowOpacity >= 0 && options.shadowOpacity <= 1)) throw new TypeError(`@openpageflip/core: "shadowOpacity" must be within 0..1, got ${options.shadowOpacity}`);
 	if (!Number.isInteger(options.startPage) || options.startPage < 0) throw new TypeError(`@openpageflip/core: "startPage" must be a non-negative integer, got ${options.startPage}`);
+	if (options.ignoreDragOn !== false) try {
+		document.createElement("div").matches(options.ignoreDragOn);
+	} catch {
+		throw new TypeError(`@openpageflip/core: "ignoreDragOn" is not a valid selector: ${options.ignoreDragOn}`);
+	}
 	return options;
 }
 //#endregion
@@ -600,8 +600,10 @@ var FlipController = class {
 	}
 	/** Returns true when the orientation changed, which re-paginates the book. */
 	setLayout(layout) {
+		const resized = layout.rect.pageWidth !== this.rect.pageWidth || layout.rect.height !== this.rect.height;
 		this.rect = layout.rect;
 		const orientationChanged = layout.orientation !== this.orientation;
+		if (resized && !orientationChanged) this.endSession();
 		if (orientationChanged) {
 			this.endSession();
 			this.orientation = layout.orientation;
@@ -620,7 +622,7 @@ var FlipController = class {
 	}
 	showPage(page) {
 		const index = spreadIndexOfPage(this.spreads, page);
-		if (index === null) return;
+		if (index === null) throw new RangeError(`@openpageflip/core: page ${page} is out of range (0..${this.pages.length - 1})`);
 		this.spreadIndex = index;
 		this.showSpread();
 	}
@@ -664,6 +666,7 @@ var FlipController = class {
 	* The static pages keep showing the current spread until that turn lands.
 	*/
 	flipTo(page, corner) {
+		this.tween?.finish();
 		const target = spreadIndexOfPage(this.spreads, page);
 		if (target === null || target === this.spreadIndex) return Promise.resolve(false);
 		if (target > this.spreadIndex) {
@@ -790,14 +793,16 @@ var FlipController = class {
 		this.release();
 	}
 	pointerDown(containerPos) {
+		if (this.state === FlipState.flipping) this.tween?.finish();
 		this.pressStart = containerPos;
 		this.dragged = false;
 	}
 	/** A pressed pointer moved. Starts a drag once it travels past the click threshold. */
 	pointerDrag(containerPos) {
-		if (this.pressStart === null || !this.options.drag) return;
+		if (this.pressStart === null) return;
 		if (!this.dragged && distance(this.pressStart, containerPos) <= DRAG_THRESHOLD) return;
 		this.dragged = true;
+		if (!this.options.drag) return;
 		const session = this.session ?? this.start(this.pressStart);
 		if (session === null) return;
 		this.setState(FlipState.userFold);
@@ -937,6 +942,10 @@ var FlipController = class {
 			} : null
 		};
 	}
+	/** Hand the current frame to the renderer again, after something else touched the DOM. */
+	redraw() {
+		this.render();
+	}
 	render() {
 		this.hooks.onFrame(this.frame());
 	}
@@ -959,8 +968,9 @@ function createEmitter() {
 				set = /* @__PURE__ */ new Set();
 				listeners.set(name, set);
 			}
-			set.add(listener);
 			const unsubscribe = () => off(name, listener);
+			if (options?.signal?.aborted) return unsubscribe;
+			set.add(listener);
 			options?.signal?.addEventListener("abort", unsubscribe, { once: true });
 			return unsubscribe;
 		},
@@ -991,7 +1001,7 @@ function attachInput(container, controller, options) {
 	const onDown = (event) => {
 		if (press !== null) return;
 		if (event.pointerType === "mouse" && event.button !== 0) return;
-		if (event.target instanceof Element && event.target.closest(options.ignoreDragOn) !== null) return;
+		if (options.ignoreDragOn !== false && event.target instanceof Element && event.target.closest(options.ignoreDragOn) !== null) return;
 		const start = local(event);
 		press = {
 			id: event.pointerId,
@@ -1148,6 +1158,8 @@ var DomRenderer = class {
 	* over it. The copy is inert, has no ids, and lives only for the duration of the flip.
 	*/
 	clone = null;
+	/** Pages currently hidden inline. A page is hidden once when it leaves the stage, not every frame. */
+	hidden = /* @__PURE__ */ new Set();
 	container;
 	options;
 	constructor(container, options) {
@@ -1172,6 +1184,7 @@ var DomRenderer = class {
 	setPages(pages) {
 		for (const page of this.pages) if (!pages.some((next) => next.element === page.element)) this.restore(page.element);
 		this.pages = pages;
+		this.hidden.clear();
 		for (const page of pages) {
 			if (this.saved.has(page.element)) continue;
 			this.saved.set(page.element, {
@@ -1186,25 +1199,27 @@ var DomRenderer = class {
 	applyContainerSizing(orientation = Orientation.landscape) {
 		const { autoSize, size, width, height, minWidth, maxWidth, layout } = this.options;
 		if (!autoSize) return;
-		const pagesAcross = layout === "spread" ? 2 : 1;
+		const minAcross = layout === Layout.spread ? 2 : 1;
+		const maxAcross = layout === Layout.single ? 1 : 2;
 		const style = this.container.style;
 		style.width = "100%";
-		style.minWidth = `${(size === "fixed" ? width : minWidth) * pagesAcross}px`;
-		style.maxWidth = `${(size === "fixed" ? width : maxWidth) * 2}px`;
+		style.minWidth = `${(size === SizeMode.fixed ? width : minWidth) * minAcross}px`;
+		style.maxWidth = `${(size === SizeMode.fixed ? width : maxWidth) * maxAcross}px`;
 		style.aspectRatio = orientation === Orientation.portrait ? `${width} / ${height}` : `${width * 2} / ${height}`;
 	}
 	render(frame) {
 		const { rect, flip } = frame;
-		const active = /* @__PURE__ */ new Set([
+		const active = /* @__PURE__ */ new Set();
+		for (const index of [
 			frame.left,
 			frame.right,
 			flip?.flipping,
 			flip?.bottom
-		]);
-		for (const [index, page] of this.pages.entries()) {
-			if (!active.has(index)) applyPageStyle(page.element, { display: "none" });
-			page.element.classList.toggle(CLASS.hard, page.drawingDensity === PageDensity.hard);
-			page.element.classList.toggle(CLASS.soft, page.drawingDensity === PageDensity.soft);
+		]) if (index !== void 0 && index !== null) active.add(index);
+		for (const [index, page] of this.pages.entries()) if (active.has(index)) this.hidden.delete(index);
+		else if (!this.hidden.has(index)) {
+			applyPageStyle(page.element, { display: "none" });
+			this.hidden.add(index);
 		}
 		const flippingHard = flip !== null && this.pages[flip.flipping]?.drawingDensity === PageDensity.hard;
 		if (frame.orientation !== Orientation.portrait && frame.left !== null) {
@@ -1233,7 +1248,8 @@ var DomRenderer = class {
 		if (flip.shadow === null) this.hideShadows();
 		else if (flippingHard) {
 			this.hideSoftShadows();
-			this.drawHardShadows(flip.shadow, rect);
+			const landing = flip.direction === FlipDirection.forward ? frame.left : frame.right;
+			this.drawHardShadows(flip.shadow, rect, landing !== null);
 		} else {
 			this.hideHardShadows();
 			this.drawSoftShadows(flip.shadow, flip.fold.rect, rect);
@@ -1243,6 +1259,9 @@ var DomRenderer = class {
 		const page = this.pages[index];
 		if (page === void 0) return null;
 		const el = asClone ? this.cloneOf(page.element) : page.element;
+		el.classList.add(CLASS.page);
+		el.classList.toggle(CLASS.hard, page.drawingDensity === PageDensity.hard);
+		el.classList.toggle(CLASS.soft, page.drawingDensity === PageDensity.soft);
 		el.classList.toggle(CLASS.left, side === "left");
 		el.classList.toggle(CLASS.right, side === "right");
 		return el;
@@ -1251,6 +1270,7 @@ var DomRenderer = class {
 		if (this.clone?.source === source) return this.clone.element;
 		this.dropClone();
 		const element = source.cloneNode(true);
+		if (!(element instanceof HTMLElement)) throw new TypeError("@openpageflip/core: a page clone is not an element");
 		element.removeAttribute("id");
 		for (const el of element.querySelectorAll("[id]")) el.removeAttribute("id");
 		element.setAttribute("aria-hidden", "true");
@@ -1379,14 +1399,23 @@ var DomRenderer = class {
 		], innerTranslate);
 		this.shadows.inner.style.cssText = `display: block; z-index: ${Z.shadow}; width: ${innerWidth}px; height: ${rect.height * 2}px; background: linear-gradient(${forward ? "to left" : "to right"}, rgba(0, 0, 0, ${shadow.opacity}) 5%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, ${shadow.opacity}) 35%, rgba(0, 0, 0, 0) 100%); transform-origin: ${innerTranslate}px 100px; transform: translate3d(${at.x - innerTranslate}px, ${at.y - 100}px, 0) rotate(${angle}rad); clip-path: polygon(${innerClip});`;
 	}
-	drawHardShadows(shadow, rect) {
+	/**
+	* Two gradients at the spine. Until the page passes the spine, the inner one lies on the
+	* landing side and darkens as the page comes down, and the outer one lies under the lifting
+	* page; past the spine they trade places. `landingHasPage` is false when the landing side is
+	* empty, and the gradient that would sit there stays hidden.
+	*/
+	drawHardShadows(shadow, rect, landingHasPage) {
 		const progress = shadow.progress > 100 ? 200 - shadow.progress : shadow.progress;
 		const size = Math.min(rect.pageWidth, (100 - progress) * (2.5 * rect.pageWidth) / 100 + 20);
 		const spine = rect.left + rect.width / 2;
 		const flipped = shadow.direction === FlipDirection.forward && shadow.progress > 100 || shadow.direction === FlipDirection.back && shadow.progress <= 100;
+		const pastSpine = shadow.progress > 100;
+		const showInner = landingHasPage || pastSpine;
+		const showOuter = landingHasPage || !pastSpine;
 		const common = `display: block; width: ${size}px; height: ${rect.height}px; left: ${spine}px; top: ${rect.top}px; transform-origin: 0 0;`;
-		this.shadows.hardInner.style.cssText = `${common} z-index: ${Z.hardInnerShadow}; background: linear-gradient(to right, rgba(0, 0, 0, ${shadow.opacity * progress / 100}) 5%, rgba(0, 0, 0, 0) 100%); transform: translate3d(0, 0, 0)${flipped ? "" : " rotateY(180deg)"};`;
-		this.shadows.hardOuter.style.cssText = `${common} z-index: ${Z.hardShadow}; background: linear-gradient(to left, rgba(0, 0, 0, ${shadow.opacity}) 5%, rgba(0, 0, 0, 0) 100%); transform: translate3d(0, 0, 0)${flipped ? " rotateY(180deg)" : ""};`;
+		this.shadows.hardInner.style.cssText = showInner ? `${common} z-index: ${Z.hardInnerShadow}; background: linear-gradient(to right, rgba(0, 0, 0, ${shadow.opacity * progress / 100}) 5%, rgba(0, 0, 0, 0) 100%); transform: translate3d(0, 0, 0)${flipped ? "" : " rotateY(180deg)"};` : "display: none";
+		this.shadows.hardOuter.style.cssText = showOuter ? `${common} z-index: ${Z.hardShadow}; background: linear-gradient(to left, rgba(0, 0, 0, ${shadow.opacity}) 5%, rgba(0, 0, 0, 0) 100%); transform: translate3d(0, 0, 0)${flipped ? " rotateY(180deg)" : ""};` : "display: none";
 	}
 	hideSoftShadows() {
 		this.shadows.outer.style.cssText = "display: none";
@@ -1410,6 +1439,7 @@ var DomRenderer = class {
 	/** Put the container and every page back the way they were found. */
 	destroy() {
 		this.dropClone();
+		this.hidden.clear();
 		for (const page of this.pages) this.restore(page.element);
 		this.pages = [];
 		for (const el of Object.values(this.shadows)) el.remove();
@@ -1465,7 +1495,7 @@ function createBook(container, userOptions) {
 	let pendingRelayout = null;
 	const observer = new ResizeObserver(() => {
 		if (pendingRelayout !== null) return;
-		pendingRelayout = requestAnimationFrame(() => {
+		pendingRelayout = clock.requestFrame(() => {
 			pendingRelayout = null;
 			const size = {
 				width: container.clientWidth,
@@ -1519,9 +1549,10 @@ function createBook(container, userOptions) {
 			});
 		},
 		update: relayout,
+		redraw: () => controller.redraw(),
 		destroy() {
 			observer.disconnect();
-			if (pendingRelayout !== null) cancelAnimationFrame(pendingRelayout);
+			if (pendingRelayout !== null) clock.cancelFrame(pendingRelayout);
 			detachInput();
 			controller.destroy();
 			renderer.destroy();
@@ -1530,6 +1561,6 @@ function createBook(container, userOptions) {
 	};
 }
 //#endregion
-export { ClickMode, Direction, FlipCorner, FlipDirection, FlipState, Layout, Orientation, PageDensity, SizeMode, computeFold, computeLayout, createBook };
+export { ClickMode, FlipCorner, FlipDirection, FlipState, Layout, Orientation, PageDensity, SizeMode, computeFold, computeLayout, createBook };
 
 //# sourceMappingURL=index.js.map