@foxycape/core 1.1.5 → 1.1.7

package/dist/mediaTypes/html/renderer/document/HtmlDocument.mjs

@@ -1,121 +1,270 @@
-import { BrowserCapabilities as e } from "../../../../kernal/web/BrowserCapabilities.mjs";
+import { EventNames as e } from "../../../../kernal/EventNames.mjs";
 import { getUuid as t } from "../../../../kernal/common/uuid.mjs";
-import { EventNames as n } from "../../../../kernal/EventNames.mjs";
-import { readerPrefixName as r } from "../../../../kernal/Constants.mjs";
-import { getDocumentBody as i } from "../../../../kernal/html/finder.mjs";
-import { emptyElement as a, setElementHtml as o } from "../../../../kernal/html/dom.mjs";
-import { getOrderedElementsIntersectingRect as s, resolveVisibleViewportInContentWindow as c } from "../../../../kernal/html/geometry.mjs";
-import { HtmlSettings as l } from "../../HtmlSettings.mjs";
-import { BaseDocument as u } from "../../../base/renderer/BaseDocument.mjs";
-import { getEventKeyMap as d } from "../../../base/renderer/eventKeys.mjs";
-import { collectContentUnitElements as f } from "../visibilityCandidates.mjs";
-import { createIframe as p, getTooBigHtmlTemplate as m } from "../html/template.mjs";
-import { HtmlPageCalculator as h } from "./HtmlPageCalculator.mjs";
-import { HtmlDocumentResizeObserver as g } from "./HtmlDocumentResizeObserver.mjs";
+import { BrowserCapabilities as n } from "../../../../kernal/web/BrowserCapabilities.mjs";
+import { LastElementAttributeName as r, readerPrefixName as i } from "../../../../kernal/Constants.mjs";
+import { getDocumentBody as a } from "../../../../kernal/html/finder.mjs";
+import { emptyElement as o, setElementHtml as s } from "../../../../kernal/html/dom.mjs";
+import { yieldToMain as c } from "../../../../kernal/web/scheduler.mjs";
+import { getOrderedElementsIntersectingRect as l, resolveVisibleViewportInContentWindow as u } from "../../../../kernal/html/geometry.mjs";
+import { BaseDocument as d } from "../../../base/renderer/BaseDocument.mjs";
+import { HtmlSettings as f } from "../../HtmlSettings.mjs";
+import { getEventKeyMap as p } from "../../../base/renderer/eventKeys.mjs";
+import { collectContentUnitElements as m } from "../visibilityCandidates.mjs";
+import { getLayoutGeometry as h } from "../layout/resolveLayoutRoute.mjs";
+import { asHtmlFileParser as g } from "../../fileParser/IHtmlFileParser.mjs";
+import { ViewportCssVariableNames as _ } from "../layout/ViewportCssVariableNames.mjs";
+import { createIframe as v, getTooBigHtmlTemplate as y } from "../html/template.mjs";
+import { HtmlPageCalculator as b } from "./HtmlPageCalculator.mjs";
+import { HtmlSymbolCalclator as x } from "./HtmlSymbolCalclator.mjs";
+import { HtmlDocumentResizeObserver as S } from "./HtmlDocumentResizeObserver.mjs";
+import { HtmlLayoutStatePreserver as C } from "../location/HtmlLayoutStatePreserver.mjs";
+import { shouldKeepPageEndOnContentGrow as w } from "../location/remapStoredPageNumber.mjs";
 //#region mediaTypes/html/renderer/document/HtmlDocument.ts
-var _ = class extends u {
-	constructor(t, r, i, a, o, s) {
-		super(t, i, a, o), this.options = s, this.eventKeyMap = d(), this.visibilityCandidates = null, this.callbacks = [], this.buildLoadingContent = async () => {
+var T = class extends d {
+	constructor(t, n, r, i, a, o) {
+		super(t, r, i, a), this.options = o, this.eventKeyMap = p(), this.visibilityCandidates = null, this.callbacks = [], this.retainLoadingLayer = !1, this.waitForRevealPaint = async () => {
+			await c(), await new Promise((e) => {
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => e());
+				});
+			}), await new Promise((e) => {
+				window.setTimeout(e, 120);
+			}), await this.waitForVisibleImagesReady();
+		}, this.waitForVisibleImagesReady = async () => {
+			let e = this.getContentContainer(), t = e?.ownerDocument?.defaultView;
+			if (!e || !t) return;
+			let n = [...e.querySelectorAll("img"), ...e.getElementsByTagName("image")];
+			if (n.length == 0) return;
+			let r = t.innerHeight || e.clientHeight, i = n.filter((e) => {
+				let t = e.getBoundingClientRect();
+				return t.bottom > -200 && t.top < r + 200;
+			});
+			i.length != 0 && await Promise.race([Promise.all(i.map((e) => this.waitForImageReady(e))), new Promise((e) => {
+				window.setTimeout(e, 800);
+			})]);
+		}, this.waitForImageReady = (e) => this.isImageReady(e) ? Promise.resolve() : new Promise((t) => {
+			let n = !1, r = () => {
+				n || (n = !0, e.removeEventListener("load", r), e.removeEventListener("error", r), i.disconnect(), t());
+			}, i = new MutationObserver(() => {
+				this.isImageReady(e) && r();
+			});
+			i.observe(e, {
+				attributes: !0,
+				attributeFilter: [
+					"src",
+					"href",
+					"data-load-state"
+				]
+			}), e.addEventListener("load", r), e.addEventListener("error", r), window.setTimeout(r, 800);
+		}), this.isImageReady = (e) => {
+			let t = e.getAttribute("data-load-state");
+			if (t == "loaded" || t == "fail") return !0;
+			let n = e.ownerDocument.defaultView?.window.HTMLImageElement;
+			if (!n || !(e instanceof n)) return !1;
+			let r = e.currentSrc || e.src;
+			return !r || r.startsWith("data:image/svg+xml") ? !1 : e.complete && e.naturalWidth > 0;
+		}, this.bringLoadingLayerToFront = () => {
+			let e = this.wrapperContainer.querySelector("div[data-type='loading-layer']");
+			e && this.wrapperContainer.appendChild(e);
+		}, this.fadeOutCover = async (e = 200) => {
+			let t = this.wrapperContainer.querySelector("div[data-type='loading-layer']");
+			if (!t) return;
+			let n = Math.max(0, e);
+			t.style.pointerEvents = "none", t.style.transition = `opacity ${n}ms ease`, t.style.opacity = "0", await new Promise((e) => {
+				let r = !1, i = () => {
+					r || (r = !0, t.removeEventListener("transitionend", i), e());
+				};
+				t.addEventListener("transitionend", i), window.setTimeout(i, n + 50);
+			});
+		}, this.releaseLoadingLayer = async () => {
+			this.loadingLayer?.removeLoadingLayer(), await this.loadingLayer?.dispose(), this.loadingLayer = void 0;
+		}, this.buildLoadingContent = async () => {
 			let e = await this.getFormattedVirtualDocument(), t = this.owner.getRenderer()?.documentPreprocesses ?? [];
 			for (let e of t) try {
 				await e(this);
 			} catch (t) {
 				this.logger.error("preprocess", "function", e?.name, t);
 			}
-			let n = e.documentElement.outerHTML;
-			return this.owner.onRenderingFileInject && (n = await this.owner.onRenderingFileInject(this.extension, n, this.url)), n = n.replace(/<([^<]*)\?xml([^>]*)\?.*?>/i, ""), n.match(/<!DOCTYPE[^>]*>/i) || (n = "<!DOCTYPE html>" + n), n;
+			let n = e.documentElement.outerHTML.replace(/<([^<]*)\?xml([^>]*)\?.*?>/i, "");
+			return n.match(/<!DOCTYPE[^>]*>/i) || (n = "<!DOCTYPE html>" + n), n;
 		}, this.processAfterLoaded = async () => {
 			let t = this.getContentContainer();
 			if (!t) return;
-			t.setAttribute("data-url", this.url), this.wrapperContainer.classList.remove(l.FileContentContainerHeightClassName);
-			let r = this.owner.getRenderer()?.documentPostprocesses ?? [];
-			for (let t of r) try {
-				await t(this), await e.yieldToMain();
-			} catch (e) {
-				this.logger.error("postprocess", "function", t?.name, e);
+			t.setAttribute("data-url", this.url);
+			let n = this.captureLayoutState(), r = h(this.options).iframeGrow == "width";
+			r || this.wrapperContainer.classList.remove(f.FileContentContainerHeightClassName);
+			let i = this.owner.getRenderer()?.documentPostprocesses ?? [];
+			for (let e of i) try {
+				await e(this), await c();
+			} catch (t) {
+				this.logger.error("postprocess", "function", e?.name, t);
 			}
-			this.loadingLayer?.removeLoadingLayer(), this.loadStatus = "success", this.visibilityCandidates = null, this.bindDocumentEvents(), this.owner.events.emit(n.DocumentLoad, this), await this.internalResetSizes(), this.resizeObserver.observeIframeSize(async () => {
-				await this.internalResetSizes(), this.getFlipMode() == "page" && this.pageCalculator.calcNumberOfPages(!0);
+			await this.layoutStatePreserver.waitUntilPageTransformStable(), this.resetLayoutSizes(), r && this.wrapperContainer.classList.remove(f.FileContentContainerHeightClassName), await this.restoreLayoutState(n), this.retainLoadingLayer || await this.releaseLoadingLayer(), this.loadStatus = "success", this.visibilityCandidates = null, this.bindDocumentEvents(), this.owner.events.emit(e.DocumentLoad, this), this.resizeObserver.observeIframeSize(async () => {
+				let e = w(this.owner.context.currentLocation, this.url), t = e ? this.captureLayoutState() : null;
+				if (this.resetLayoutSizes(), this.getFlipMode() == "page" && this.pageCalculator.calcNumberOfPages(!0), e && t) {
+					await this.restoreLayoutState(t);
+					let e = this.internalGetNumberOfPages(), n = this.owner.context.currentLocation;
+					n?.url == this.url && (n.current = e, n.total = e);
+				}
 			}), this.loadCompleted(!0);
 		}, this.loadCompleted = (e) => {
 			for (let t = 0; t < this.callbacks.length; t++) try {
 				e ? this.callbacks[t].resolve() : this.callbacks[t].reject();
 			} catch {}
 			this.callbacks = [];
-		}, this.internalResetSizes = async () => {
-			let e = this.getContentRootElement();
-			if (!e) return;
-			let t = this.getWritingMode();
-			this.resetIframeMinWidthHeight(e, this.getFlipMode(), t);
 		}, this.capture = !0, this.eventListener = (e) => {
 			let t = this.eventKeyMap.get(e.type);
 			t && this.owner.events.emit(t, e, this);
-		}, this.pageCalculator = new h(this, r, s), this.logger = this.owner.loggerFactory.getLogger(this.constructor.name), this.resizeObserver = new g(this, this.owner.events);
+		}, this.pageCalculator = new b(this, n, o), this.symbolCalclator = new x(this, g(r).symbolMeasure), this.layoutStatePreserver = new C(this, n, o), this.logger = this.owner.loggerFactory.getLogger(this.constructor.name), this.resizeObserver = new S(this, this.owner.events);
 	}
 	get inIframe() {
 		return !0;
 	}
-	getWritingMode() {
-		return this.options.writingMode ?? "horizontal-tb";
-	}
 	async load() {
-		await new Promise(async (i, s) => {
+		await new Promise(async (r, a) => {
 			if (this.loadStatus == "success") {
-				i();
+				r();
 				return;
 			}
 			if (this.callbacks.push({
-				resolve: i,
-				reject: s
+				resolve: r,
+				reject: a
 			}), this.loadStatus != "loading") {
-				this.loadStatus = "loading", this.loadingLayer = await this.owner.services.get("loadLayer"), this.loadingLayer?.setDoc(this), a(this.wrapperContainer), this.loadingLayer.removeLoadingLayer(), this.loadingLayer.loadLoadingLayer();
+				this.loadStatus = "loading", this.loadingLayer = await this.owner.services.get("loadLayer"), this.loadingLayer?.setDoc(this), o(this.wrapperContainer), this.loadingLayer.removeLoadingLayer(), this.loadingLayer.loadLoadingLayer(), await c();
 				try {
 					if (this.inIframe) {
 						if (!this.iframe) {
-							let i = r + t(!0);
-							this.iframe = p(this.wrapperContainer.ownerDocument, i, this.options.forceScroll), this.options.forceScroll ? this.iframe.removeAttribute("scrolling") : this.iframe.setAttribute("scrolling", "no");
+							let r = i + t(!0);
+							this.iframe = v(this.wrapperContainer.ownerDocument, r, this.options.forceScroll, h(this.options)), this.options.forceScroll ? this.iframe.removeAttribute("scrolling") : this.iframe.setAttribute("scrolling", "no");
 							let a = await this.buildLoadingContent();
-							await e.yieldToMain(), this.wrapperContainer.appendChild(this.iframe), await e.yieldToMain(), this.iframe.addEventListener("load", async () => {
+							await c(), this.wrapperContainer.appendChild(this.iframe), this.bringLoadingLayerToFront(), await c(), this.iframe.addEventListener("load", async () => {
 								await this.processAfterLoaded();
-							}, !1), this.iframe.addEventListener("error", (e) => {
-								this.loadingLayer?.removeLoadingLayer(), this.loadStatus = "fail", this.iframe = void 0, this.loadingLayer?.setReloadButton(), this.logger.error(e), this.owner.events.emit(n.DocumentLoadFailed, this, e), this.loadCompleted(!0);
-							}, !1);
+							}, !1), this.iframe.addEventListener("error", (t) => {
+								this.retainLoadingLayer = !1, this.loadingLayer?.removeLoadingLayer(), this.loadStatus = "fail", this.iframe = void 0, this.loadingLayer?.setReloadButton(), this.logger.error(t), this.owner.events.emit(e.DocumentLoadFailed, this, t), this.loadCompleted(!0);
+							}, !1), n.isFirefox() && (this.iframe.srcdoc = "<!DOCTYPE html><html><head></head><body></body></html>");
 							let o = this.iframe.contentDocument;
-							this.options.preferSrcdoc && "srcdoc" in this.iframe || !("write" in o) ? this.iframe.srcdoc = a : (o.open(), o.write(a), o.close(), await e.yieldToMain());
+							this.options.preferSrcdoc && "srcdoc" in this.iframe || !("write" in o) ? this.iframe.srcdoc = a : (o.open(), o.write(a), o.close(), await c());
 						}
 					} else {
-						let t = await this.buildLoadingContent();
-						o(this.wrapperContainer, t), await this.processAfterLoaded(), await e.yieldToMain();
+						let e = await this.buildLoadingContent();
+						s(this.wrapperContainer, e), await this.processAfterLoaded(), await c();
 					}
-				} catch (e) {
-					this.logger.error(e), this.owner?.context ? (this.loadingLayer?.removeLoadingLayer(), this.loadStatus = "fail", this.iframe = void 0, this.loadingLayer?.setReloadButton(), this.owner.events.emit(n.DocumentLoadFailed, this, e?.toString()), this.loadCompleted(!0)) : this.loadCompleted(!0);
-				} finally {
-					await this.loadingLayer?.dispose(), this.loadingLayer = void 0;
+				} catch (t) {
+					this.logger.error(t), this.retainLoadingLayer = !1, this.owner?.context ? (this.loadingLayer?.removeLoadingLayer(), this.loadStatus = "fail", this.iframe = void 0, this.loadingLayer?.setReloadButton(), this.owner.events.emit(e.DocumentLoadFailed, this, t?.toString()), this.loadCompleted(!0)) : (await this.releaseLoadingLayer(), this.loadCompleted(!0));
 				}
 			}
 		});
 	}
-	resetIframeMinWidthHeight(e, t, n) {
-		if (e) {
-			if (t == "scroll") {
-				if (this.iframe) {
-					if (this.isVerticalWriting(n)) {
-						let t = e.scrollHeight;
-						this.iframe.style.willChange = "transform", this.iframe.style.removeProperty("min-width"), this.iframe.style.minHeight = t + "px", this.iframe.style.removeProperty("will-change"), this.iframe.style.removeProperty("transform");
-					} else {
-						let t = e.getBoundingClientRect().height;
-						this.iframe.style.willChange = "transform", this.iframe.style.removeProperty("min-width"), this.iframe.style.minHeight = Math.round(t) + "px", this.iframe.style.removeProperty("will-change"), this.iframe.style.removeProperty("transform");
-					}
-				}
-			} else if (this.iframe) {
-				this.iframe.style.removeProperty("min-height"), this.iframe.style.removeProperty("min-width");
-				let t = e.scrollWidth, n = i(e.ownerDocument).getBoundingClientRect().width, r = Math.min(t, n);
-				this.iframe.style.minWidth = r + "px";
+	prepareCoveredLoad() {
+		this.retainLoadingLayer = !0;
+	}
+	async revealCoveredLoad() {
+		this.retainLoadingLayer = !1;
+		try {
+			await this.waitForRevealPaint(), await this.fadeOutCover();
+		} finally {
+			await this.releaseLoadingLayer();
+		}
+	}
+	resetLayoutSizes() {
+		this.resetIframeMinSize();
+	}
+	captureLayoutState() {
+		return this.layoutStatePreserver.capture();
+	}
+	async restoreLayoutState(e) {
+		await this.layoutStatePreserver.restore(e);
+	}
+	resetIframeMinSize() {
+		let e = this.getContentRootElement();
+		if (!e || !this.iframe) return;
+		let t = h(this.options), n = a(e.ownerDocument);
+		if (this.iframe.style.removeProperty("transform"), this.iframe.style.removeProperty("will-change"), t.useColumnLayout) {
+			this.growIframeToColumnOverflow(e, n, t.pageAxis), this.pageCalculator.calcNumberOfPages(!0);
+			return;
+		}
+		if (t.iframeGrow == "width") {
+			this.iframe.style.removeProperty("min-height"), this.iframe.style.removeProperty("min-width");
+			let t = this.getParentContentHeight(this.iframe.parentElement) || this.iframe.clientHeight;
+			this.iframe.style.height = t ? t + "px" : `var(${_.ContentContainerHeight})`, this.iframe.style.width = "auto", t && (e.style.height = t + "px", e.style.maxHeight = t + "px", n && (n.style.height = t + "px", n.style.maxHeight = t + "px")), this.iframe.offsetWidth, this.iframe.style.minWidth = Math.max(1, e.scrollWidth) + "px";
+			return;
+		}
+		this.clearInlineContentBox(e, n), this.iframe.style.removeProperty("min-width"), this.iframe.style.removeProperty("min-height"), this.iframe.style.setProperty("width", this.options.forceScroll ? "100%" : `var(${_.ContentContainerWidth})`), this.iframe.style.height = "auto", this.iframe.offsetHeight;
+		let r = Math.max(1, e.scrollHeight, n?.scrollHeight ?? 0);
+		this.iframe.style.setProperty("height", `var(${_.ContentContainerHeight})`), this.iframe.style.minHeight = Math.round(r) + "px";
+	}
+	growIframeToColumnOverflow(e, t, n) {
+		this.clearInlineContentBox(e, t), this.iframe.style.removeProperty("min-width"), this.iframe.style.removeProperty("min-height");
+		let r = this.getPageBoxSize();
+		this.lockIframeToPageBox(r);
+		let i = this.iframe.parentElement, a = i?.style.width ?? "", o = i?.style.minWidth ?? "", s = r.width;
+		i && n == "x" && s > 0 && (i.style.width = `${s}px`, i.style.minWidth = `${s}px`);
+		let c = this.beginColumnOverflowMeasure(e, t, n);
+		try {
+			if (n == "y") {
+				this.iframe.offsetHeight, e.offsetHeight;
+				let n = this.measureOccupiedColumnLength(e, t, "y", r.height);
+				this.iframe.style.setProperty("height", `var(${_.ContentContainerHeight})`), this.iframe.style.minHeight = n + "px";
+				return;
 			}
+			this.iframe.offsetWidth, e.offsetWidth;
+			let i = this.measureOccupiedColumnLength(e, t, "x", r.width);
+			this.iframe.style.setProperty("width", `var(${_.ContentContainerWidth})`), this.iframe.style.minWidth = i + "px";
+		} finally {
+			c(), i && (a ? i.style.width = a : i.style.removeProperty("width"), o ? i.style.minWidth = o : i.style.removeProperty("min-width"));
+		}
+	}
+	measureOccupiedColumnLength(e, t, n, r) {
+		let i = r > 0 ? r : 1, a = this.getColumnGap(), o = i + a, s = this.measureContentExtent(e, t, n), c = Math.max(1, Math.floor(((s > 1 ? s : i) - 1) / o) + 1);
+		return Math.round(c * i + Math.max(0, c - 1) * a);
+	}
+	measureContentExtent(e, t, n) {
+		let r = e.getBoundingClientRect(), i = this.getLastContentElement(t);
+		if (i) {
+			let e = i.getBoundingClientRect(), t = n == "y" ? e.bottom - r.top : e.right - r.left;
+			if (t > 1) return t;
+		}
+		if (t) {
+			let e = t.getBoundingClientRect();
+			return n == "y" ? e.height : e.width;
 		}
+		return n == "y" ? e.scrollHeight : e.scrollWidth;
+	}
+	getLastContentElement(e) {
+		if (!e) return null;
+		let t = e.querySelector(`[${r}="true"]`);
+		return t instanceof HTMLElement ? t : e.lastElementChild instanceof HTMLElement ? e.lastElementChild : null;
+	}
+	getColumnGap() {
+		let e = this.owner.getRenderer()?.getRendererContainer(), t = parseFloat(e?.getAttribute("data-column-gap") ?? "");
+		return Number.isFinite(t) && t > 0 ? t : 0;
+	}
+	getPageBoxSize() {
+		let e = this.owner.getRenderer()?.getRendererContainer(), t = parseFloat(e?.getAttribute("data-column-width") ?? "") || Math.round(this.iframe.getBoundingClientRect().width), n = parseFloat(e?.getAttribute("data-page-height") ?? "") || Math.round(this.iframe.getBoundingClientRect().height);
+		return {
+			width: Number.isFinite(t) ? Math.round(t) : 0,
+			height: Number.isFinite(n) ? Math.round(n) : 0
+		};
+	}
+	lockIframeToPageBox(e = this.getPageBoxSize()) {
+		e.width > 0 ? this.iframe.style.width = `${e.width}px` : this.iframe.style.setProperty("width", `var(${_.ContentContainerWidth})`), e.height > 0 ? this.iframe.style.height = `${e.height}px` : this.iframe.style.setProperty("height", `var(${_.ContentContainerHeight})`), this.iframe.offsetWidth;
+	}
+	beginColumnOverflowMeasure(e, t, n) {
+		let r = e.style.minWidth, i = e.style.direction, a = t?.style.direction ?? "", o = e.classList.contains(f.RtlProgressionClassName), s = h(this.options).measureColumnsAsLtr;
+		return e.style.setProperty("min-width", "0", "important"), s && (e.style.setProperty("direction", "ltr", "important"), t?.style.setProperty("direction", "ltr", "important"), e.classList.remove(f.RtlProgressionClassName)), () => {
+			r ? e.style.minWidth = r : e.style.removeProperty("min-width"), s && (i ? e.style.direction = i : e.style.removeProperty("direction"), t && (a ? t.style.direction = a : t.style.removeProperty("direction")), o && e.classList.add(f.RtlProgressionClassName));
+		};
+	}
+	clearInlineContentBox(e, t) {
+		e.style.removeProperty("height"), e.style.removeProperty("max-height"), e.style.removeProperty("width"), t && (t.style.removeProperty("height"), t.style.removeProperty("max-height"), t.style.removeProperty("width"));
+	}
+	getParentContentHeight(e) {
+		if (!e) return 0;
+		let t = e.ownerDocument.defaultView?.getComputedStyle(e), n = parseFloat(t?.paddingTop ?? "0") || 0, r = parseFloat(t?.paddingBottom ?? "0") || 0;
+		return Math.max(0, Math.round(e.clientHeight - n - r));
 	}
 	async getContent() {
-		return this.docContent ? this.docContent : (this.docContent = await (await this.fileParser.getTextDocument(this.url)).getPlaintext(), this.docContent.length > this.options.singleDocMaxSize ? m(this.docContent.length) : this.docContent);
+		return this.docContent ? this.docContent : (this.docContent = await (await this.fileParser.getTextDocument(this.url)).getPlaintext(), this.docContent.length > this.options.singleDocMaxSize ? y(this.docContent.length) : this.docContent);
 	}
 	async getFormattedVirtualDocument() {
 		if (this.formattedVirtualDocument) return this.formattedVirtualDocument;
@@ -139,46 +288,44 @@ var _ = class extends u {
 		return this.inIframe ? this.iframe?.contentDocument?.documentElement : this.wrapperContainer;
 	}
 	getContentContainer() {
-		return this.inIframe ? i(this.iframe?.contentDocument) : this.wrapperContainer;
+		return this.inIframe ? a(this.iframe?.contentDocument) : this.wrapperContainer;
 	}
 	async getVirtualContentContainer(e) {
 		if (e) {
 			let e = await this.fileParser.getTextDocument(this.url);
-			return i(await e.getFormattedDocument());
+			return a(await e.getFormattedDocument());
 		}
 		let t = await this.getFormattedVirtualDocument();
-		return i(t);
+		return a(t);
 	}
 	getVisibleElements(e) {
 		if (this.loadStatus != "success") return [];
 		let t = this.getContentContainer(), n = t?.ownerDocument?.defaultView;
 		if (!t || !n) return [];
-		this.visibilityCandidates ||= f(t, { htmlBlockTags: this.options.htmlBlockTags });
-		let r = this.getFlipMode() == "scroll" ? this.owner.optionsProvider.getHeaderHeight() : 0, i = c(n, { topInset: r });
-		return i ? s(this.visibilityCandidates, i, {
-			writingMode: this.getWritingMode(),
+		this.visibilityCandidates ||= m(t, { htmlBlockTags: this.options.htmlBlockTags });
+		let r = this.owner.getRenderer()?.getRendererContainer().getBoundingClientRect().top, i = u(n, { topInset: r });
+		return i ? l(this.visibilityCandidates, i, {
+			writingMode: h(this.options).writingMode,
 			fullVisible: e
 		}) : [];
 	}
 	async dispose() {
-		this.owner.events.emit(n.DocumentDisposing, this), this.unbindDocumentEvents(), this.resizeObserver.unobserveIframeSize(), this.callbacks?.splice(0), this.visibilityCandidates = null;
-		let e = this.getWrapperContainer();
-		e.classList.add(l.FileContentContainerHeightClassName), e.removeChild(this.iframe), a(this.wrapperContainer), this.iframe = void 0, this.formattedVirtualDocument = null, await super.dispose();
+		let t = this.captureLayoutState();
+		this.owner.events.emit(e.DocumentDisposing, this), this.unbindDocumentEvents(), this.resizeObserver.unobserveIframeSize(), this.callbacks?.splice(0), this.visibilityCandidates = null, this.retainLoadingLayer = !1, await this.releaseLoadingLayer();
+		let n = this.getWrapperContainer();
+		n.classList.add(f.FileContentContainerHeightClassName), this.iframe && n.contains(this.iframe) && n.removeChild(this.iframe), o(this.wrapperContainer), this.iframe = void 0, this.formattedVirtualDocument = null, await this.symbolCalclator.dispose(), await this.restoreLayoutState(t), await super.dispose();
 	}
 	bindDocumentEvents() {
 		let e = this.inIframe ? this.getContentContainer().ownerDocument : this.getContentRootElement();
 		for (let t of this.eventKeyMap.keys()) e.addEventListener(t, this.eventListener, this.capture);
 	}
 	unbindDocumentEvents() {
-		let e = this.inIframe ? this.getContentContainer().ownerDocument : this.getContentRootElement();
-		for (let t of this.eventKeyMap.keys()) e.removeEventListener(t, this.eventListener, this.capture);
-	}
-	isVerticalWriting(e) {
-		return e == "vertical-lr" || e == "vertical-rl";
+		let e = this.inIframe ? this.getContentContainer()?.ownerDocument : this.getContentRootElement();
+		if (e) for (let t of this.eventKeyMap.keys()) e?.removeEventListener(t, this.eventListener, this.capture);
 	}
 	getFlipMode() {
 		return this.options.forceScroll ? "scroll" : this.options.flipMode;
 	}
 };
 //#endregion
-export { _ as HtmlDocument };
+export { T as HtmlDocument };

package/dist/mediaTypes/html/renderer/document/HtmlDocumentResizeObserver.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/EventNames.cjs");var t=class{constructor(e,t){this.doc=e,this.events=t,this.resizeObserver=null}observeIframeSize(t){this.resizeObserver=new ResizeObserver(async()=>{await t?.(),this.events.emit(e.EventNames.DocumentSizeChange,this.doc)});let n=this.getContentRootElement();n&&this.resizeObserver.observe(n);let r=this.doc.getContentContainer();r&&r!=n&&this.resizeObserver.observe(r)}unobserveIframeSize(){if(this.resizeObserver){let e=this.getContentRootElement();e&&this.resizeObserver.unobserve(e);let t=this.doc.getContentContainer();t&&t!=e&&this.resizeObserver.unobserve(t),this.resizeObserver.disconnect(),this.resizeObserver=null}}getContentRootElement(){return this.doc.inIframe?this.doc?.getContentContainer()?.ownerDocument?.documentElement:this.doc.getWrapperContainer()}};exports.HtmlDocumentResizeObserver=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/EventNames.cjs"),t=require("../documents/documentHiddenState.cjs");var n=class{constructor(e,t){this.doc=e,this.events=t,this.resizeObserver=null,this.lastContentWidth=NaN,this.lastContentHeight=NaN,this.isHidden=!1}observeIframeSize(t){this.resizeObserver=new ResizeObserver(async n=>{this.shouldIgnoreResize(n)||(await t?.(),this.events.emit(e.EventNames.DocumentSizeChange,this.doc))});let n=this.getContentRootElement();n&&this.resizeObserver.observe(n);let r=this.doc.getContentContainer();r&&r!=n&&this.resizeObserver.observe(r)}unobserveIframeSize(){if(this.resizeObserver){let e=this.getContentRootElement();e&&this.resizeObserver.unobserve(e);let t=this.doc.getContentContainer();t&&t!=e&&this.resizeObserver.unobserve(t),this.resizeObserver.disconnect(),this.resizeObserver=null}this.isHidden=!1,this.lastContentWidth=NaN,this.lastContentHeight=NaN}shouldIgnoreResize(e){if(this.isHostCollapsed())return this.isHidden=!0,!0;let t=this.getObservedSize(e);if(this.isHidden){if(t.width==0&&t.height==0)return!0;this.isHidden=!1;let e=this.isSameSize(t.width,t.height);return this.rememberSize(t.width,t.height),e}return this.rememberSize(t.width,t.height),!1}isHostCollapsed(){let e=this.doc.getWrapperContainer();if(e&&e.clientWidth==0&&e.clientHeight==0)return!0;let n=this.doc.owner.getRenderer()?.getRendererContainer(),r=this.doc.owner.getHostViewport().mode!=`window`;return t.isHostContainerCollapsed(n,r)}getObservedSize(e){let t=0,n=0;for(let r of e){let e=r.contentRect?.width??0,i=r.contentRect?.height??0;e>t&&(t=e),i>n&&(n=i)}return{width:t,height:n}}isSameSize(e,t){return Number.isFinite(this.lastContentWidth)&&Math.abs(e-this.lastContentWidth)<1&&Math.abs(t-this.lastContentHeight)<1}rememberSize(e,t){this.lastContentWidth=e,this.lastContentHeight=t}getContentRootElement(){return this.doc.inIframe?this.doc?.getContentContainer()?.ownerDocument?.documentElement:this.doc.getWrapperContainer()}};exports.HtmlDocumentResizeObserver=n;

package/dist/mediaTypes/html/renderer/document/HtmlDocumentResizeObserver.d.ts

@@ -5,8 +5,16 @@ export declare class HtmlDocumentResizeObserver {
     private readonly doc;
     private readonly events;
     private resizeObserver;
+    private lastContentWidth;
+    private lastContentHeight;
+    private isHidden;
     constructor(doc: IHtmlDocument, events: IEventEmitter);
     observeIframeSize(callback?: () => Promise<void>): void;
     unobserveIframeSize(): void;
+    private shouldIgnoreResize;
+    private isHostCollapsed;
+    private getObservedSize;
+    private isSameSize;
+    private rememberSize;
     private getContentRootElement;
 }

package/dist/mediaTypes/html/renderer/document/HtmlDocumentResizeObserver.mjs

@@ -1,12 +1,13 @@
 import { EventNames as e } from "../../../../kernal/EventNames.mjs";
+import { isHostContainerCollapsed as t } from "../documents/documentHiddenState.mjs";
 //#region mediaTypes/html/renderer/document/HtmlDocumentResizeObserver.ts
-var t = class {
+var n = class {
 	constructor(e, t) {
-		this.doc = e, this.events = t, this.resizeObserver = null;
+		this.doc = e, this.events = t, this.resizeObserver = null, this.lastContentWidth = NaN, this.lastContentHeight = NaN, this.isHidden = !1;
 	}
 	observeIframeSize(t) {
-		this.resizeObserver = new ResizeObserver(async () => {
-			await t?.(), this.events.emit(e.DocumentSizeChange, this.doc);
+		this.resizeObserver = new ResizeObserver(async (n) => {
+			this.shouldIgnoreResize(n) || (await t?.(), this.events.emit(e.DocumentSizeChange, this.doc));
 		});
 		let n = this.getContentRootElement();
 		n && this.resizeObserver.observe(n);
@@ -20,10 +21,45 @@ var t = class {
 			let t = this.doc.getContentContainer();
 			t && t != e && this.resizeObserver.unobserve(t), this.resizeObserver.disconnect(), this.resizeObserver = null;
 		}
+		this.isHidden = !1, this.lastContentWidth = NaN, this.lastContentHeight = NaN;
+	}
+	shouldIgnoreResize(e) {
+		if (this.isHostCollapsed()) return this.isHidden = !0, !0;
+		let t = this.getObservedSize(e);
+		if (this.isHidden) {
+			if (t.width == 0 && t.height == 0) return !0;
+			this.isHidden = !1;
+			let e = this.isSameSize(t.width, t.height);
+			return this.rememberSize(t.width, t.height), e;
+		}
+		return this.rememberSize(t.width, t.height), !1;
+	}
+	isHostCollapsed() {
+		let e = this.doc.getWrapperContainer();
+		if (e && e.clientWidth == 0 && e.clientHeight == 0) return !0;
+		let n = this.doc.owner.getRenderer()?.getRendererContainer(), r = this.doc.owner.getHostViewport().mode != "window";
+		return t(n, r);
+	}
+	getObservedSize(e) {
+		let t = 0, n = 0;
+		for (let r of e) {
+			let e = r.contentRect?.width ?? 0, i = r.contentRect?.height ?? 0;
+			e > t && (t = e), i > n && (n = i);
+		}
+		return {
+			width: t,
+			height: n
+		};
+	}
+	isSameSize(e, t) {
+		return Number.isFinite(this.lastContentWidth) && Math.abs(e - this.lastContentWidth) < 1 && Math.abs(t - this.lastContentHeight) < 1;
+	}
+	rememberSize(e, t) {
+		this.lastContentWidth = e, this.lastContentHeight = t;
 	}
 	getContentRootElement() {
 		return this.doc.inIframe ? this.doc?.getContentContainer()?.ownerDocument?.documentElement : this.doc.getWrapperContainer();
 	}
 };
 //#endregion
-export { t as HtmlDocumentResizeObserver };
+export { n as HtmlDocumentResizeObserver };

package/dist/mediaTypes/html/renderer/document/HtmlPageCalculator.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/common/number.cjs"),t=require("../../../../kernal/html/finder.cjs"),n=require("../../../../kernal/html/style.cjs"),r=require("../../HtmlSettings.cjs");var i=class{constructor(e,t,n){this.doc=e,this.layout=t,this.options=n}calcNumberOfPages(t){let i=1;if(this.options.flipMode==`scroll`)return i;let a=this.doc.getContentContainer()?.ownerDocument?.documentElement;if(!a||!a.firstElementChild)return 1;if(!t&&(i=e.parseNumber(a.getAttribute(r.HtmlSettings.HtmlDocumentNumperOfPagesPropertyName),0,`parseInt`),i>1))return i;let o=this.layout.getLayoutMetrics(),s=this.options.writingMode??`horizontal-tb`,c=this.getIframe();if(this.isVerticalWriting(s)){let e=0,t=a.scrollHeight;t<1&&(t=1);let r=n.getTransformLength(a,`y`);if(Math.abs(r)>0&&c){let e=c.scrollHeight;if(t==e){this.transformCurrentDocument(this.getContentRootElement(),r-2,`y`);let e=a.scrollHeight;t==e?(this.transformCurrentDocument(this.getContentRootElement(),0,`y`),r=0,t=a.scrollHeight):this.transformCurrentDocument(this.getContentRootElement(),r,`y`)}}e=t+r,i=Math.floor(e/o.pageMoveLength),e%o.pageMoveLength>o.columnGap&&(i+=1)}else{let e=0,t=a.scrollWidth;t<1&&(t=1);let r=n.getTransformLength(a,`x`);if(Math.abs(r)>0&&c){let e=c.scrollWidth;if(t==e){this.transformCurrentDocument(this.getContentRootElement(),r-2,`x`);let e=a.scrollWidth;t==e?(this.transformCurrentDocument(this.getContentRootElement(),0,`x`),r=0,t=a.scrollWidth):this.transformCurrentDocument(this.getContentRootElement(),r,`x`)}}e=r+t,i=Math.floor(e/o.pageMoveLength),e%o.pageMoveLength>o.columnGap&&(i+=1)}return a.setAttribute(r.HtmlSettings.HtmlDocumentNumperOfPagesPropertyName,i.toString()),i}getPageNumber(e){if(!e)return 1;let r=this.doc.getContentContainer()?.ownerDocument;if(!t.getDocumentBody(r)||t.compareTagName(`BODY`,e.tagName))return 1;let i=this.layout.getLayoutMetrics(),a=e.getBoundingClientRect(),o=1,s=this.options.writingMode??`horizontal-tb`,c=this.isVerticalWriting(s);if(c){let e=n.getTransformLength(r.documentElement,`y`),t=(a?.top??0)+e;o=Math.floor(t/i.pageMoveLength),t%i.pageMoveLength>=0&&(o+=1)}else{let e=n.getTransformLength(r.documentElement,`x`),t=(a?.left??0)+e;o=Math.floor(t/i.pageMoveLength),t>i.pageWidth&&t%i.pageMoveLength>=0&&(o+=1)}if(o==0&&(o=1),!c&&this.options.direction==`rtl`){let e=this.calcNumberOfPages();o=Math.max(1,e-o+1)}return o}getIframe(){return this.doc.getContentContainer()?.ownerDocument?.defaultView?.frameElement}getContentRootElement(){return this.doc.inIframe?this.doc.getContentContainer()?.ownerDocument?.documentElement:this.doc.getWrapperContainer()}transformCurrentDocument(e,t,n){!n||!e||(n==`x`?e.style.transform=`translateX(-`+parseFloat(t.toFixed(10))+`px)`:e.style.transform=`translateY(-`+parseFloat(t.toFixed(10))+`px)`)}isVerticalWriting(e){return e==`vertical-lr`||e==`vertical-rl`}};exports.HtmlPageCalculator=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/common/number.cjs"),t=require("../../../../kernal/html/finder.cjs"),n=require("../../../../kernal/html/style.cjs"),r=require("../../../../kernal/html/geometry.cjs"),i=require("../../HtmlSettings.cjs"),a=require("../layout/resolveLayoutRoute.cjs");var o=class{constructor(e,t,n){this.doc=e,this.layout=t,this.options=n}calcNumberOfPages(t){let r=1,o=a.getLayoutGeometry(this.options);if(o.flipMode==`scroll`)return r;let s=this.doc.getContentContainer()?.ownerDocument?.documentElement;if(!s||!s.firstElementChild)return 1;if(!t&&(r=e.parseNumber(s.getAttribute(i.HtmlSettings.HtmlDocumentNumperOfPagesPropertyName),0,`parseInt`),r>1))return r;let c=this.layout.getLayoutMetrics(),l=this.getIframe(),u=o.getOccupiedLength(l,s),d=Math.max(1,u),f=n.getTransformLength(s,o.pageAxis);return Math.abs(f)>0&&(d=f+d),r=Math.floor(d/c.pageMoveLength),d%c.pageMoveLength>c.columnGap&&(r+=1),s.setAttribute(i.HtmlSettings.HtmlDocumentNumperOfPagesPropertyName,r.toString()),r}getPageNumber(e){if(!e)return 1;let i=this.doc.getContentContainer()?.ownerDocument;if(!t.getDocumentBody(i)||!r.isDomRange(e)&&t.compareTagName(`BODY`,e.tagName))return 1;let o=this.layout.getLayoutMetrics(),s=a.getLayoutGeometry(this.options),c=r.getLocateClientRect(e),l=n.getTransformLength(i.documentElement,`x`),u=n.getTransformLength(i.documentElement,`y`),d=s.getLocateAxisOffset({left:c?.left??0,top:c?.top??0},l,u);return s.getPageNumberFromPoint({axisOffset:d,pageMoveLength:o.pageMoveLength,pageLength:s.getPageBoxLength(o),numberOfPages:this.calcNumberOfPages()})}getIframe(){return this.doc.getContentContainer()?.ownerDocument?.defaultView?.frameElement}};exports.HtmlPageCalculator=o;

package/dist/mediaTypes/html/renderer/document/HtmlPageCalculator.d.ts

@@ -1,3 +1,4 @@
+import { LocateTarget } from '../../../../kernal/html/geometry';
 import { IRendererViewport } from '../../../../kernal/IRendererViewport';
 import { IHtmlDocument } from '../IHtmlDocument';
 import { HtmlLayoutMetrics } from '../layout/HtmlLayoutMetrics';
@@ -9,9 +10,6 @@ export declare class HtmlPageCalculator {
     private readonly options;
     constructor(doc: IHtmlDocument, layout: IRendererViewport<HtmlLayoutMetrics>, options: HtmlOptions);
     calcNumberOfPages(update?: boolean): number;
-    getPageNumber(element: Element): number;
+    getPageNumber(target: LocateTarget): number;
     private getIframe;
-    private getContentRootElement;
-    private transformCurrentDocument;
-    private isVerticalWriting;
 }