@foxycape/core 1.1.3 → 1.1.4

package/dist/mediaTypes/html/renderer/image/HtmlImageLoader.mjs

@@ -1,448 +1,372 @@
-import { convertArrayBufferToString as U } from "../../../../kernal/common/encoding.mjs";
-import { parseNumber as I } from "../../../../kernal/common/number.mjs";
-import { isNullOrWhiteSpace as d, startsWith as $ } from "../../../../kernal/common/text.mjs";
-import { checkIsBlobUrl as L, checkIsAbsoluteUrl as T } from "../../../../kernal/common/url.mjs";
-import { compareTagName as u, getDocumentBody as N } from "../../../../kernal/html/finder.mjs";
-import { getImageSize as x } from "../../../../kernal/html/image.mjs";
-import { injectCssContent as O } from "../../../../kernal/html/injector.mjs";
-import { getFormatDocument as H } from "../../../../kernal/html/parser.mjs";
-import { HtmlSettings as B } from "../../HtmlSettings.mjs";
-import { ContentLayoutCssVariableNames as p } from "../style/ContentLayoutCssVariableNames.mjs";
-import A from "./error-image.png.mjs";
-import { debounce as D } from "perfect-debounce";
-import { EventNames as b } from "../../../../kernal/EventNames.mjs";
-import { BrowserCapabilities as S } from "../../../../kernal/web/BrowserCapabilities.mjs";
-import { ElementInitialNumberName as v } from "../../../../kernal/Constants.mjs";
-const P = "lhx-svg", z = "imageSizes-", M = 5;
-class it {
-  constructor(t, i, a) {
-    this.documentsProvider = t, this.rendererViewport = i, this.htmlOptions = a, this.documentImageSizesSummaries = /* @__PURE__ */ new Map(), this.blobUrls = /* @__PURE__ */ new Map(), this.isDisposed = !1, this.resetImageSizeTasks = [], this.onDocumentDisposing = (e) => {
-      this.revokeDocumentBlobUrls(e);
-    }, this.onImageElementsVisible = async (e) => {
-      for (const [r, s] of e.entries())
-        await this.loadImages(r, s);
-    }, this.delayLoadOnImageElementsVisible = D(this.onImageElementsVisible, 100), this.onLayoutChange = async () => {
-      await this.delayResetAllImageSize();
-    }, this.resetAllImageSize = async () => {
-      for (const e of this.documentsProvider.getLoadedDocuments())
-        await this.resetImageSize(e);
-    }, this.delayResetAllImageSize = D(this.resetAllImageSize, 100), this.prepareImageSize = async (e, r) => {
-      const s = `.${P} {width: 100% !important; height: auto !important; }`;
-      O(r, s, !1, "lhx-svg-style");
-      const n = [...r.getElementsByTagName("img"), ...r.getElementsByTagName("image")], o = this.getImageSizesSummary(r);
-      o.total = n.length;
-      const l = this.documentsProvider.getDocuments().indexOf(e), m = this.getResourceId(), c = await this.getStorage();
-      let h = null;
-      l >= 0 && c && m && (h = await c.get(z + m, l.toString()));
-      const w = n.length > 100;
-      for (let y = 0; y < n.length; y++) {
-        if (this.isDisposed)
-          return;
-        try {
-          const f = n[y];
-          f.parentElement && u(f.parentElement.tagName, "SVG") && f.parentElement.classList.add(P);
-          const C = this.getImageUrl(f);
-          let E = h?.find((k) => k.url == C);
-          E || (E = await this.prefetchImageSize(e, f, !0)), E && (this.resetImageStyles(f, E.width, E.height), this.resetInlineImageSize(f)), w && y % 10 == 0 && (this.events.emit(b.ProcessedImageCount, {
-            doc: e,
-            totalImageCount: n.length,
-            processedImageCount: y
-          }), await S.yieldToMain());
-        } catch (f) {
-          this.logger.error(f);
-        }
-      }
-      l >= 0 && c && m && await this.persistImageSizes(c, m, l.toString(), h, o);
-    }, this.getImageUrl = (e) => {
-      const r = e.getAttribute("data-preset-preview-url") == "true";
-      return u(e.tagName, "IMAGE") ? r ? e.getAttribute("data-src") ?? e.getAttribute("xlink:href") ?? e.getAttribute("href") : e.getAttribute("xlink:href") ?? e.getAttribute("href") : r ? e.getAttribute("data-src") : e.getAttribute("src");
-    }, this.resetImageStyles = (e, r, s) => {
-      if (r <= 0 || s <= 0 || !S.supportCssAspectRatio())
-        return;
-      this.setWidthAndHeight(e, r, s);
-      let n = e;
-      if (u(e.tagName, "IMAGE") && (n = e.parentElement), !n)
-        return;
-      n.setAttribute("width", `${r}`), n.setAttribute("height", `${s}`);
-      const o = r / s, {
-        columnWidth: g,
-        columnHeight: l
-      } = this.getColumnMetrics();
-      let m = s;
-      g > 0 && r > g && (m = g / r * s);
-      const c = l > 0 ? `min(${m}px,${l}px)` : `${m}px`, h = `calc(100% * var(${p.MaxImageWidthRatio}))`;
-      n.getAttribute("style") ? (n.style.width = h, n.style.height = "auto", n.style.maxWidth = h, n.style.maxHeight = c, n.style.aspectRatio = `${o}`) : n.setAttribute("style", `max-width:${h};height:auto;max-height:${c};aspect-ratio:${o};width:${h}`);
-    }, this.resetImageWidthHeight = (e) => {
-      e.image.style ? (e.image.style.setProperty("width", "auto", "important"), e.image.style.setProperty("max-width", "100%", "important"), e.image.style.setProperty("max-height", "100%", "important")) : e.image.setAttribute("style", "width:auto !important;max-width:100% !important;max-height:100% !important"), this.resetImageHeight(e.image, e.columnWidth, e.columnHeight, this.htmlOptions.maxImageHeightRatio);
-    }, this.flushResetImageSizeTasks = async () => {
-      if (S.supportCssAspectRatio()) {
-        this.resetImageSizeTasks = [];
-        return;
-      }
-      for (; this.resetImageSizeTasks.length > 0; ) {
-        if (this.isDisposed) {
-          this.resetImageSizeTasks = [];
-          return;
-        }
-        const e = this.resetImageSizeTasks.shift();
-        if (!e)
-          break;
-        this.resetImageWidthHeight(e), await S.yieldToMain();
-      }
-    }, this.resetImageSize = async (e) => {
-      const r = e.getContentContainer()?.ownerDocument;
-      if (!r || !N(r))
-        return;
-      const {
-        columnWidth: s,
-        columnHeight: n
-      } = this.getColumnMetrics(), o = [...r.getElementsByTagName("img"), ...r.getElementsByTagName("image")];
-      if (this.checkIsOnlyOneImageInDocument(r)) {
-        const g = o[0];
-        this.handleOnlyOneImageInDocument(s, n, g), await this.loadSingleImage(e, g);
-        return;
-      }
-      for (const g of o)
-        this.resetImageSizeTasks.push({
-          image: g,
-          columnWidth: s,
-          columnHeight: n
-        });
-      await this.flushResetImageSizeTasks();
-      for (let g = 0; g < Math.min(M, o.length); g++)
-        await this.loadSingleImage(e, o[g]);
-    }, this.events = this.documentsProvider.owner.events, this.logger = this.documentsProvider.owner.loggerFactory.getLogger(this.constructor.name), this.bindEvents();
-  }
-  bindEvents() {
-    this.events.on(b.LayoutChange, this.onLayoutChange), this.events.on(b.DocumentDisposing, this.onDocumentDisposing), this.events.on(b.ImageElementsVisible, this.delayLoadOnImageElementsVisible);
-  }
-  unbindEvents() {
-    this.events.off(b.LayoutChange, this.onLayoutChange), this.events.off(b.DocumentDisposing, this.onDocumentDisposing), this.events.off(b.ImageElementsVisible, this.delayLoadOnImageElementsVisible);
-  }
-  addBlobUrl(t, i) {
-    if (!L(i))
-      return;
-    const a = this.blobUrls.get(t);
-    a ? a.push(i) : this.blobUrls.set(t, [i]);
-  }
-  revokeDocumentBlobUrls(t) {
-    const i = this.blobUrls.get(t);
-    if (i) {
-      for (const a of i)
-        this.revokeObjectURL(a);
-      this.blobUrls.delete(t);
-    }
-  }
-  /**
-   * Preprocess document images (placeholder, size probing, inline styles).
-   * Intended to be registered on documentPreprocesses.
-   */
-  async preprocessImages(t) {
-    const i = t, a = (await i.getVirtualContentContainer())?.ownerDocument;
-    a && (await this.prepareImageSize(i, a), await this.setImagePreviewUrl(a));
-  }
-  async setImagePreviewUrl(t) {
-    const {
-      default: i
-    } = await import("./placeholder.png.mjs"), a = t.getElementsByTagName("img"), e = t.getElementsByTagName("image");
-    for (let r = 0; r < a.length; r++)
-      this.applyPreviewUrl(a[r], a[r].getAttribute("src"), i, !1);
-    for (let r = 0; r < e.length; r++) {
-      const s = e[r], n = s.getAttribute("xlink:href") ?? s.getAttribute("href");
-      this.applyPreviewUrl(s, n, i, !0);
-    }
-  }
-  applyPreviewUrl(t, i, a, e) {
-    let r = t.getAttribute("data-preview-src");
-    d(r) && (r = a, t.setAttribute("data-preview-src", a)), i != a ? t.getAttribute("data-src") != a && t.setAttribute("data-src", i ?? "") : t.removeAttribute("data-loaded"), e ? t.setAttribute("xlink:href", r) : t.src = r, t.setAttribute("data-preset-preview-url", "true"), this.setImageStyle(t);
-  }
-  setImageStyle(t) {
-    const i = t.parentElement;
-    i && i.children.length == 1 && d(i.innerText) && (S.supportCssHas() || i.classList.add(B.BreakInsideAvoid), i.style.removeProperty("width"), i.style.removeProperty("height"));
-  }
-  async persistImageSizes(t, i, a, e, r) {
-    const s = Array.from(r.descriptors.values()).filter((o) => o.width > 0);
-    if (s.length == 0)
-      return;
-    const n = z + i;
-    if (e && e.length > 0) {
-      const o = new Set(e.map((l) => l.url)), g = s.filter((l) => !o.has(l.url));
-      g.length > 0 && (e.push(...g), await t.set(n, a, e));
-    } else
-      await t.set(n, a, s);
-  }
-  getResourceId() {
-    const t = this.documentsProvider.owner.context;
-    return d(t.simpleId) ? t.id : t.simpleId;
-  }
-  async getStorage() {
-    return await this.documentsProvider.owner.services.get("storage");
-  }
-  getImageSizesSummary(t) {
-    let i = this.documentImageSizesSummaries.get(t);
-    return i || (i = {
-      total: 0,
-      checkedCount: 0,
-      descriptors: /* @__PURE__ */ new Map()
-    }, this.documentImageSizesSummaries.set(t, i)), i;
-  }
-  async prefetchImageSize(t, i, a) {
-    const e = this.getImageUrl(i), r = i.getAttribute("data-width");
-    if (r != null) {
-      const l = I(i.getAttribute("data-height"), 0);
-      return this.addImageDescriptor(i, e, I(r, 0), l, !0);
-    }
-    if (!a)
-      return this.addImageDescriptor(i, e, 0, 0, !1);
-    const n = this.getImageSizesSummary(i.ownerDocument).descriptors.get(e);
-    if (n)
-      return n;
-    let o = 0, g = 0;
-    try {
-      if (T(e)) {
-        const l = await x(e);
-        o = l.width, g = l.height;
-      } else {
-        const l = await t.fileParser.getFile(e, t.url, "blob"), m = l && l.size > 0 ? l : A;
-        try {
-          const c = await x(m);
-          o = c.width, g = c.height;
-        } catch {
-        }
-      }
-    } catch (l) {
-      this.logger.error(l);
-    }
-    return this.addImageDescriptor(i, e, o, g, o <= 0);
-  }
-  revokeObjectURL(t) {
-    if (!(!t || !$(t, "blob:", !0)))
-      try {
-        URL.revokeObjectURL(t);
-      } catch {
-      }
-  }
-  addImageDescriptor(t, i, a, e, r) {
-    const s = this.getImageSizesSummary(t.ownerDocument);
-    let n = s.descriptors.get(i);
-    return n ? (!n.checked && r && (s.checkedCount += 1), n.width = a, n.height = e, n.url = i, n.checked = r, n) : (n = {
-      url: i,
-      width: a,
-      height: e,
-      checked: r
-    }, r && (s.checkedCount += 1), s.descriptors.set(i, n), n);
-  }
-  setWidthAndHeight(t, i, a) {
-    i > 0 && a > 0 && I(t.getAttribute("data-width"), 0, "parseInt") <= 0 && (t.setAttribute("data-width", `${i}`), t.setAttribute("data-height", `${a}`));
-  }
-  getColumnMetrics() {
-    const t = this.rendererViewport.getLayoutMetrics();
-    return {
-      columnWidth: t.columnWidth,
-      columnHeight: t.columnHeight
-    };
-  }
-  resetInlineImageSize(t) {
-    const i = I(t.getAttribute("data-width"), 0), a = I(t.getAttribute("data-height"), 0);
-    if (i <= 0 || a <= 0)
-      return;
-    let e = !1;
-    a <= 200 ? e = this.checkIsInlineImage(t, i, a).foundInlineImage : (t.previousSibling?.nodeType == Node.TEXT_NODE && t.previousSibling.textContent?.trim()?.length > 0 || t.nextSibling?.nodeType == Node.TEXT_NODE && t.nextSibling.textContent?.trim()?.length > 0) && (e = this.checkIsInlineImage(t, i, a).foundInlineImage);
-    const r = u(t.tagName, "IMG") ? t : t.parentElement;
-    if (!e || !r)
-      return;
-    const s = "1em";
-    t.getAttribute("style") ? (t.style.setProperty("width", "auto", "important"), t.style.setProperty("max-width", "100%", "important"), t.style.setProperty("height", s, "important"), t.style.setProperty("margin-block-start", "0", "important"), t.style.setProperty("margin-block-end", "0", "important")) : t.setAttribute("style", `width:auto !important;max-width:100% !important;height:${s} !important;margin-block-start:0 !important;margin-block-end:0 !important;`), r.style.setProperty("vertical-align", "-0.2em", "important"), r.setAttribute("data-inline-image", "true");
-  }
-  handleOnlyOneImageInDocument(t, i, a) {
-    const e = a.ownerDocument, r = N(e);
-    if (!d(r.getAttribute("data-handled-one-image")))
-      return;
-    r.setAttribute("data-handled-one-image", "true"), r.style.setProperty("display", "flex", "important"), r.style.setProperty("height", "100%", "important"), r.style.setProperty("justify-content", "center", "important"), r.style.setProperty("align-items", "center", "important");
-    let s = a;
-    u(a.parentElement?.tagName, "SVG") && (s = a.parentElement, a.style.setProperty("width", "auto", "important"), a.style.setProperty("max-width", "100%", "important"), a.style.setProperty("max-height", i + "px", "important"), a.style.setProperty("display", "block", "important")), s.style.setProperty("width", "auto", "important"), s.style.setProperty("max-width", "100%", "important"), s.style.setProperty("display", "block", "important"), s.parentElement && (s.parentElement.style.textAlign = "center"), this.resetImageHeight(a, t, i, 0.95, !0);
-  }
-  resetImageHeight(t, i, a, e, r) {
-    const s = u(t.tagName, "IMAGE") ? t.parentElement : t;
-    if (!s)
-      return;
-    const n = I(t.getAttribute("data-width"), 0), o = I(t.getAttribute("data-height"), 0);
-    n <= 0 || o <= 0 || this.forceSetImageHeight(s, i, a, n, o, e, r);
-  }
-  forceSetImageHeight(t, i, a, e, r, s, n) {
-    if (S.supportCssMinMaxFunction()) {
-      let o;
-      s && n ? o = `min(calc(${r}px * ${s}),calc(var(${p.ColumnHeight}) * ${s}),calc(var(${p.ColumnWidth}) / ${e} * ${r} * ${s}))` : o = `min(calc(${r}px * var(${p.MaxImageHeightRatio})),calc(var(${p.ColumnHeight}) * var(${p.MaxImageHeightRatio})),calc(var(${p.ColumnWidth}) / ${e} * ${r} * var(${p.MaxImageHeightRatio})))`, t.style.setProperty("height", o, "important");
-    } else {
-      const o = this.calcImageHeight(i, a, e, r) * s;
-      t.style.setProperty("height", o + "px", "important");
-    }
-  }
-  calcImageHeight(t, i, a, e) {
-    if (i >= e && t >= a)
-      return e;
-    const r = t / i, s = a / e;
-    return r <= s ? t / a * e : i;
-  }
-  checkIsOnlyOneImageInDocument(t) {
-    const i = N(t);
-    return !i || i.textContent.trim() ? !1 : i.getElementsByTagName("img").length == 1 || i.getElementsByTagName("image").length == 1;
-  }
-  checkIsInlineTag(t) {
-    const i = t.nodeName;
-    return d(i) ? !1 : this.htmlOptions.htmlInlineTags.indexOf(i.toLowerCase()) >= 0;
-  }
-  checkIsInlineImage(t, i, a) {
-    let {
-      foundInlineImage: e,
-      imageHeight: r
-    } = this.getInlineImageProperties(t, a);
-    if (e)
-      return {
-        foundInlineImage: e,
-        imageHeight: r
-      };
-    let s = t.parentElement, n = t;
-    for (; s && !u(s.tagName, "BODY"); ) {
-      if (s.children.length > 1 || s.children.length == 1 && s.textContent.trim().length > 0)
-        return this.getInlineImageProperties(n, a);
-      n = s, s = s.parentElement;
-    }
-    return {
-      foundInlineImage: e,
-      imageHeight: r
-    };
-  }
-  findSiblingNodes(t) {
-    let i = t.previousSibling, a = t.nextSibling;
-    for (; i != null && !(!d(i.textContent) || i.nodeType == Node.ELEMENT_NODE); )
-      i = i.previousSibling;
-    for (; a != null && !(!d(a.textContent) || a.nodeType == Node.ELEMENT_NODE); )
-      a = a.nextSibling;
-    return {
-      previousSiblingNode: i,
-      nextSiblingNode: a
-    };
-  }
-  getInlineImageProperties(t, i) {
-    const {
-      previousSiblingNode: a,
-      nextSiblingNode: e
-    } = this.findSiblingNodes(t);
-    let r = !1, s;
-    if (!a && !e)
-      return {
-        foundInlineImage: r,
-        imageHeight: s
-      };
-    const n = a?.ownerDocument?.defaultView ?? e?.ownerDocument?.defaultView;
-    let o;
-    if (a?.nodeType == Node.TEXT_NODE && !d(a.nodeValue) ? o = a.parentElement : e?.nodeType == Node.TEXT_NODE && !d(e.nodeValue) ? o = e.parentElement : a && this.checkIsInlineTag(a) ? o = a : e && this.checkIsInlineTag(e) && (o = e), !o)
-      return {
-        foundInlineImage: r,
-        imageHeight: s
-      };
-    const g = 1.25, l = n?.getComputedStyle(o);
-    let m, c, h;
-    l ? (m = parseFloat(l.fontSize), c = parseFloat(l.lineHeight), h = parseFloat(l.height)) : (m = 20, c = m * g, h = c);
-    const w = c > m * g ? m * g : c;
-    return this.checkElementIsFootnote(t) || u(t.parentElement?.tagName, "A") && (u(t.parentElement?.parentElement?.tagName, "SUB") || u(t.parentElement?.parentElement?.tagName, "SUP")) ? s = m : h && h <= w ? s = h : s = w, i && i < s && (s = i), r = !0, {
-      foundInlineImage: r,
-      imageHeight: s
-    };
-  }
-  checkElementIsFootnote(t) {
-    return t.getAttribute("class")?.indexOf("footnote") >= 0 || t.getAttribute("epub:type") == "noteref" || u(t.tagName, "SUB") || u(t.tagName, "SUP") ? !0 : t.children.length > 0 ? this.checkElementIsFootnote(t.children[0]) : !1;
-  }
-  async loadImages(t, i) {
-    const a = t;
-    if (!(!a || !i?.length))
-      for (const e of i) {
-        if (this.isDisposed || !e)
-          return;
-        const r = e.ownerDocument.defaultView;
-        if (r)
-          if (e instanceof r.HTMLImageElement || e instanceof r.SVGImageElement) {
-            const s = e.getAttribute(v), n = e.ownerDocument.querySelector(`[${v}='${s}']`);
-            n && await this.loadSingleImage(a, n);
-          } else {
-            const s = e.getElementsByTagName("img");
-            for (let l = 0; l < s.length; l++)
-              await this.loadSingleImage(a, s[l]);
-            const n = e.getAttribute(v), o = t.getContentContainer()?.querySelector(`[${v}='${n}']`), g = o && o != e ? o.getElementsByTagName("image") : e.getElementsByTagName("image");
-            for (let l = 0; l < g.length; l++)
-              await this.loadSingleImage(a, g[l]);
-          }
-      }
-  }
-  async loadSingleImage(t, i) {
-    if (!i || !t)
-      return;
-    const a = i.getAttribute("data-load-state");
-    if (a == "loaded" || a == "loading" || a == "fail")
-      return;
-    i.setAttribute("data-load-state", "loading"), i.onload = () => {
-      i.setAttribute("data-load-state", "loaded");
-    }, i.onerror = () => {
-      i.setAttribute("data-load-state", "fail");
-    };
-    let e = i.getAttribute("src") ?? "";
-    const r = i.getAttribute("data-src") ?? "";
-    d(r) || (e = r);
-    let s = e;
-    if (!T(s)) {
-      const n = await t.fileParser.getFile(s, t.url, "blob");
-      if (n && n.size > 0)
-        if (n.type?.toLowerCase() == "image/svg+xml") {
-          const o = U(await n.arrayBuffer()), l = H(o).querySelector("image");
-          if (l) {
-            s = l.getAttribute("xlink:href") ?? l.getAttribute("href");
-            try {
-              const m = await x(s), c = m.width, h = m.height;
-              i.setAttribute("data-width", c.toString()), i.setAttribute("data-height", h.toString());
-              const {
-                columnWidth: w,
-                columnHeight: y
-              } = this.getColumnMetrics();
-              this.forceSetImageHeight(i, w, y, c, h, this.htmlOptions.maxImageHeightRatio);
-            } catch (m) {
-              this.logger.error(m);
-            }
-          } else
-            s = "data:image/svg+xml," + encodeURIComponent(o);
-        } else
-          s = URL.createObjectURL(n), this.addBlobUrl(t, s);
-      else
-        s = A;
-    }
-    if (u(i.tagName, "IMG")) {
-      const n = i;
-      if (n.src = s, n.decode)
-        try {
-          await n.decode();
-        } catch (o) {
-          this.logger.error("image decode failed", "imageUrl", s, o), this.revokeObjectURL(s), setTimeout(async () => {
-            try {
-              const g = await t.fileParser.getFile(e, t.url, "blob");
-              if (g && g.size > 0) {
-                const l = URL.createObjectURL(g);
-                this.addBlobUrl(t, l), n.src = l;
-              } else
-                n.src = A;
-            } catch (g) {
-              this.logger.error(g), n.src = A;
-            }
-          }, 500);
-        }
-    } else S.isSafari() ? i.href.baseVal = s : i.setAttribute("xlink:href", s);
-  }
-  async dispose() {
-    this.isDisposed = !0, this.unbindEvents(), this.documentImageSizesSummaries.clear(), this.resetImageSizeTasks = [];
-    for (const t of [...this.blobUrls.keys()])
-      this.revokeDocumentBlobUrls(t);
-    this.blobUrls.clear();
-  }
-}
-export {
-  it as HtmlImageLoader
+import { BrowserCapabilities as e } from "../../../../kernal/web/BrowserCapabilities.mjs";
+import { EventNames as t } from "../../../../kernal/EventNames.mjs";
+import { isNullOrWhiteSpace as n, startsWith as r } from "../../../../kernal/common/text.mjs";
+import { checkIsAbsoluteUrl as i, checkIsBlobUrl as a } from "../../../../kernal/common/url.mjs";
+import { ElementInitialNumberName as o } from "../../../../kernal/Constants.mjs";
+import { parseNumber as s } from "../../../../kernal/common/number.mjs";
+import { compareTagName as c, getDocumentBody as l } from "../../../../kernal/html/finder.mjs";
+import { injectCssContent as u } from "../../../../kernal/html/injector.mjs";
+import { asyncDebounce as d } from "../../../../kernal/Debounce.mjs";
+import { getFormatDocument as f } from "../../../../kernal/html/parser.mjs";
+import { getImageSize as p } from "../../../../kernal/html/image.mjs";
+import { convertArrayBufferToString as m } from "../../../../kernal/common/encoding.mjs";
+import { HtmlSettings as h } from "../../HtmlSettings.mjs";
+import { ContentLayoutCssVariableNames as g } from "../style/ContentLayoutCssVariableNames.mjs";
+import _ from "./error-image.mjs";
+//#region mediaTypes/html/renderer/image/HtmlImageLoader.ts
+var v = "lhx-svg", y = "imageSizes-", b = 5, x = class {
+	constructor(n, r, i) {
+		this.documentsProvider = n, this.rendererViewport = r, this.htmlOptions = i, this.documentImageSizesSummaries = /* @__PURE__ */ new Map(), this.blobUrls = /* @__PURE__ */ new Map(), this.isDisposed = !1, this.resetImageSizeTasks = [], this.onDocumentDisposing = (e) => {
+			this.revokeDocumentBlobUrls(e);
+		}, this.onImageElementsVisible = async (e) => {
+			for (let [t, n] of e.entries()) await this.loadImages(t, n);
+		}, this.delayLoadOnImageElementsVisible = d(this.onImageElementsVisible, 100), this.onLayoutChange = async () => {
+			await this.delayResetAllImageSize();
+		}, this.resetAllImageSize = async () => {
+			for (let e of this.documentsProvider.getLoadedDocuments()) await this.resetImageSize(e);
+		}, this.delayResetAllImageSize = d(this.resetAllImageSize, 100), this.prepareImageSize = async (n, r) => {
+			u(r, `.${v} {width: 100% !important; height: auto !important; }`, !1, "lhx-svg-style");
+			let i = [...r.getElementsByTagName("img"), ...r.getElementsByTagName("image")], a = this.getImageSizesSummary(r);
+			a.total = i.length;
+			let o = this.documentsProvider.getDocuments().indexOf(n), s = this.getResourceId(), l = await this.getStorage(), d = null;
+			o >= 0 && l && s && (d = await l.get(y + s, o.toString()));
+			let f = i.length > 100;
+			for (let r = 0; r < i.length; r++) {
+				if (this.isDisposed) return;
+				try {
+					let a = i[r];
+					a.parentElement && c(a.parentElement.tagName, "SVG") && a.parentElement.classList.add(v);
+					let o = this.getImageUrl(a), s = d?.find((e) => e.url == o);
+					s ||= await this.prefetchImageSize(n, a, !0), s && (this.resetImageStyles(a, s.width, s.height), this.resetInlineImageSize(a)), f && r % 10 == 0 && (this.events.emit(t.ProcessedImageCount, {
+						doc: n,
+						totalImageCount: i.length,
+						processedImageCount: r
+					}), await e.yieldToMain());
+				} catch (e) {
+					this.logger.error(e);
+				}
+			}
+			o >= 0 && l && s && await this.persistImageSizes(l, s, o.toString(), d, a);
+		}, this.getImageUrl = (e) => {
+			let t = e.getAttribute("data-preset-preview-url") == "true";
+			return c(e.tagName, "IMAGE") ? t ? e.getAttribute("data-src") ?? e.getAttribute("xlink:href") ?? e.getAttribute("href") : e.getAttribute("xlink:href") ?? e.getAttribute("href") : t ? e.getAttribute("data-src") : e.getAttribute("src");
+		}, this.resetImageStyles = (t, n, r) => {
+			if (n <= 0 || r <= 0 || !e.supportCssAspectRatio()) return;
+			this.setWidthAndHeight(t, n, r);
+			let i = t;
+			if (c(t.tagName, "IMAGE") && (i = t.parentElement), !i) return;
+			i.setAttribute("width", `${n}`), i.setAttribute("height", `${r}`);
+			let a = n / r, { columnWidth: o, columnHeight: s } = this.getColumnMetrics(), l = r;
+			o > 0 && n > o && (l = o / n * r);
+			let u = s > 0 ? `min(${l}px,${s}px)` : `${l}px`, d = `calc(100% * var(${g.MaxImageWidthRatio}))`;
+			i.getAttribute("style") ? (i.style.width = d, i.style.height = "auto", i.style.maxWidth = d, i.style.maxHeight = u, i.style.aspectRatio = `${a}`) : i.setAttribute("style", `max-width:${d};height:auto;max-height:${u};aspect-ratio:${a};width:${d}`);
+		}, this.resetImageWidthHeight = (e) => {
+			e.image.style ? (e.image.style.setProperty("width", "auto", "important"), e.image.style.setProperty("max-width", "100%", "important"), e.image.style.setProperty("max-height", "100%", "important")) : e.image.setAttribute("style", "width:auto !important;max-width:100% !important;max-height:100% !important"), this.resetImageHeight(e.image, e.columnWidth, e.columnHeight, this.htmlOptions.maxImageHeightRatio);
+		}, this.flushResetImageSizeTasks = async () => {
+			if (e.supportCssAspectRatio()) {
+				this.resetImageSizeTasks = [];
+				return;
+			}
+			for (; this.resetImageSizeTasks.length > 0;) {
+				if (this.isDisposed) {
+					this.resetImageSizeTasks = [];
+					return;
+				}
+				let t = this.resetImageSizeTasks.shift();
+				if (!t) break;
+				this.resetImageWidthHeight(t), await e.yieldToMain();
+			}
+		}, this.resetImageSize = async (e) => {
+			let t = e.getContentContainer()?.ownerDocument;
+			if (!t || !l(t)) return;
+			let { columnWidth: n, columnHeight: r } = this.getColumnMetrics(), i = [...t.getElementsByTagName("img"), ...t.getElementsByTagName("image")];
+			if (this.checkIsOnlyOneImageInDocument(t)) {
+				let t = i[0];
+				this.handleOnlyOneImageInDocument(n, r, t), await this.loadSingleImage(e, t);
+				return;
+			}
+			for (let e of i) this.resetImageSizeTasks.push({
+				image: e,
+				columnWidth: n,
+				columnHeight: r
+			});
+			await this.flushResetImageSizeTasks();
+			for (let t = 0; t < Math.min(b, i.length); t++) await this.loadSingleImage(e, i[t]);
+		}, this.events = this.documentsProvider.owner.events, this.logger = this.documentsProvider.owner.loggerFactory.getLogger(this.constructor.name), this.bindEvents();
+	}
+	bindEvents() {
+		this.events.on(t.LayoutChange, this.onLayoutChange), this.events.on(t.DocumentDisposing, this.onDocumentDisposing), this.events.on(t.ImageElementsVisible, this.delayLoadOnImageElementsVisible);
+	}
+	unbindEvents() {
+		this.events.off(t.LayoutChange, this.onLayoutChange), this.events.off(t.DocumentDisposing, this.onDocumentDisposing), this.events.off(t.ImageElementsVisible, this.delayLoadOnImageElementsVisible);
+	}
+	addBlobUrl(e, t) {
+		if (!a(t)) return;
+		let n = this.blobUrls.get(e);
+		n ? n.push(t) : this.blobUrls.set(e, [t]);
+	}
+	revokeDocumentBlobUrls(e) {
+		let t = this.blobUrls.get(e);
+		if (t) {
+			for (let e of t) this.revokeObjectURL(e);
+			this.blobUrls.delete(e);
+		}
+	}
+	async preprocessImages(e) {
+		let t = e, n = (await t.getVirtualContentContainer())?.ownerDocument;
+		n && (await this.prepareImageSize(t, n), await this.setImagePreviewUrl(n));
+	}
+	async setImagePreviewUrl(e) {
+		let { default: t } = await import("./placeholder.mjs"), n = e.getElementsByTagName("img"), r = e.getElementsByTagName("image");
+		for (let e = 0; e < n.length; e++) this.applyPreviewUrl(n[e], n[e].getAttribute("src"), t, !1);
+		for (let e = 0; e < r.length; e++) {
+			let n = r[e], i = n.getAttribute("xlink:href") ?? n.getAttribute("href");
+			this.applyPreviewUrl(n, i, t, !0);
+		}
+	}
+	applyPreviewUrl(e, t, r, i) {
+		let a = e.getAttribute("data-preview-src");
+		n(a) && (a = r, e.setAttribute("data-preview-src", r)), t == r ? e.removeAttribute("data-loaded") : e.getAttribute("data-src") != r && e.setAttribute("data-src", t ?? ""), i ? e.setAttribute("xlink:href", a) : e.src = a, e.setAttribute("data-preset-preview-url", "true"), this.setImageStyle(e);
+	}
+	setImageStyle(t) {
+		let r = t.parentElement;
+		r && r.children.length == 1 && n(r.innerText) && (e.supportCssHas() || r.classList.add(h.BreakInsideAvoid), r.style.removeProperty("width"), r.style.removeProperty("height"));
+	}
+	async persistImageSizes(e, t, n, r, i) {
+		let a = Array.from(i.descriptors.values()).filter((e) => e.width > 0);
+		if (a.length == 0) return;
+		let o = y + t;
+		if (r && r.length > 0) {
+			let t = new Set(r.map((e) => e.url)), i = a.filter((e) => !t.has(e.url));
+			i.length > 0 && (r.push(...i), await e.set(o, n, r));
+		} else await e.set(o, n, a);
+	}
+	getResourceId() {
+		let e = this.documentsProvider.owner.context;
+		return n(e.simpleId) ? e.id : e.simpleId;
+	}
+	async getStorage() {
+		return await this.documentsProvider.owner.services.get("storage");
+	}
+	getImageSizesSummary(e) {
+		let t = this.documentImageSizesSummaries.get(e);
+		return t || (t = {
+			total: 0,
+			checkedCount: 0,
+			descriptors: /* @__PURE__ */ new Map()
+		}, this.documentImageSizesSummaries.set(e, t)), t;
+	}
+	async prefetchImageSize(e, t, n) {
+		let r = this.getImageUrl(t), a = t.getAttribute("data-width");
+		if (a != null) {
+			let e = s(t.getAttribute("data-height"), 0);
+			return this.addImageDescriptor(t, r, s(a, 0), e, !0);
+		}
+		if (!n) return this.addImageDescriptor(t, r, 0, 0, !1);
+		let o = this.getImageSizesSummary(t.ownerDocument).descriptors.get(r);
+		if (o) return o;
+		let c = 0, l = 0;
+		try {
+			if (i(r)) {
+				let e = await p(r);
+				c = e.width, l = e.height;
+			} else {
+				let t = await e.fileParser.getFile(r, e.url, "blob"), n = t && t.size > 0 ? t : _;
+				try {
+					let e = await p(n);
+					c = e.width, l = e.height;
+				} catch {}
+			}
+		} catch (e) {
+			this.logger.error(e);
+		}
+		return this.addImageDescriptor(t, r, c, l, c <= 0);
+	}
+	revokeObjectURL(e) {
+		if (!(!e || !r(e, "blob:", !0))) try {
+			URL.revokeObjectURL(e);
+		} catch {}
+	}
+	addImageDescriptor(e, t, n, r, i) {
+		let a = this.getImageSizesSummary(e.ownerDocument), o = a.descriptors.get(t);
+		return o ? (!o.checked && i && (a.checkedCount += 1), o.width = n, o.height = r, o.url = t, o.checked = i, o) : (o = {
+			url: t,
+			width: n,
+			height: r,
+			checked: i
+		}, i && (a.checkedCount += 1), a.descriptors.set(t, o), o);
+	}
+	setWidthAndHeight(e, t, n) {
+		t > 0 && n > 0 && s(e.getAttribute("data-width"), 0, "parseInt") <= 0 && (e.setAttribute("data-width", `${t}`), e.setAttribute("data-height", `${n}`));
+	}
+	getColumnMetrics() {
+		let e = this.rendererViewport.getLayoutMetrics();
+		return {
+			columnWidth: e.columnWidth,
+			columnHeight: e.columnHeight
+		};
+	}
+	resetInlineImageSize(e) {
+		let t = s(e.getAttribute("data-width"), 0), n = s(e.getAttribute("data-height"), 0);
+		if (t <= 0 || n <= 0) return;
+		let r = !1;
+		(n <= 200 || e.previousSibling?.nodeType == Node.TEXT_NODE && e.previousSibling.textContent?.trim()?.length > 0 || e.nextSibling?.nodeType == Node.TEXT_NODE && e.nextSibling.textContent?.trim()?.length > 0) && (r = this.checkIsInlineImage(e, t, n).foundInlineImage);
+		let i = c(e.tagName, "IMG") ? e : e.parentElement;
+		!r || !i || (e.getAttribute("style") ? (e.style.setProperty("width", "auto", "important"), e.style.setProperty("max-width", "100%", "important"), e.style.setProperty("height", "1em", "important"), e.style.setProperty("margin-block-start", "0", "important"), e.style.setProperty("margin-block-end", "0", "important")) : e.setAttribute("style", "width:auto !important;max-width:100% !important;height:1em !important;margin-block-start:0 !important;margin-block-end:0 !important;"), i.style.setProperty("vertical-align", "-0.2em", "important"), i.setAttribute("data-inline-image", "true"));
+	}
+	handleOnlyOneImageInDocument(e, t, r) {
+		let i = r.ownerDocument, a = l(i);
+		if (!n(a.getAttribute("data-handled-one-image"))) return;
+		a.setAttribute("data-handled-one-image", "true"), a.style.setProperty("display", "flex", "important"), a.style.setProperty("height", "100%", "important"), a.style.setProperty("justify-content", "center", "important"), a.style.setProperty("align-items", "center", "important");
+		let o = r;
+		c(r.parentElement?.tagName, "SVG") && (o = r.parentElement, r.style.setProperty("width", "auto", "important"), r.style.setProperty("max-width", "100%", "important"), r.style.setProperty("max-height", t + "px", "important"), r.style.setProperty("display", "block", "important")), o.style.setProperty("width", "auto", "important"), o.style.setProperty("max-width", "100%", "important"), o.style.setProperty("display", "block", "important"), o.parentElement && (o.parentElement.style.textAlign = "center"), this.resetImageHeight(r, e, t, .95, !0);
+	}
+	resetImageHeight(e, t, n, r, i) {
+		let a = c(e.tagName, "IMAGE") ? e.parentElement : e;
+		if (!a) return;
+		let o = s(e.getAttribute("data-width"), 0), l = s(e.getAttribute("data-height"), 0);
+		o <= 0 || l <= 0 || this.forceSetImageHeight(a, t, n, o, l, r, i);
+	}
+	forceSetImageHeight(t, n, r, i, a, o, s) {
+		if (e.supportCssMinMaxFunction()) {
+			let e;
+			e = o && s ? `min(calc(${a}px * ${o}),calc(var(${g.ColumnHeight}) * ${o}),calc(var(${g.ColumnWidth}) / ${i} * ${a} * ${o}))` : `min(calc(${a}px * var(${g.MaxImageHeightRatio})),calc(var(${g.ColumnHeight}) * var(${g.MaxImageHeightRatio})),calc(var(${g.ColumnWidth}) / ${i} * ${a} * var(${g.MaxImageHeightRatio})))`, t.style.setProperty("height", e, "important");
+		} else {
+			let e = this.calcImageHeight(n, r, i, a) * o;
+			t.style.setProperty("height", e + "px", "important");
+		}
+	}
+	calcImageHeight(e, t, n, r) {
+		return t >= r && e >= n ? r : e / t <= n / r ? e / n * r : t;
+	}
+	checkIsOnlyOneImageInDocument(e) {
+		let t = l(e);
+		return !t || t.textContent.trim() ? !1 : t.getElementsByTagName("img").length == 1 || t.getElementsByTagName("image").length == 1;
+	}
+	checkIsInlineTag(e) {
+		let t = e.nodeName;
+		return !n(t) && this.htmlOptions.htmlInlineTags.indexOf(t.toLowerCase()) >= 0;
+	}
+	checkIsInlineImage(e, t, n) {
+		let { foundInlineImage: r, imageHeight: i } = this.getInlineImageProperties(e, n);
+		if (r) return {
+			foundInlineImage: r,
+			imageHeight: i
+		};
+		let a = e.parentElement, o = e;
+		for (; a && !c(a.tagName, "BODY");) {
+			if (a.children.length > 1 || a.children.length == 1 && a.textContent.trim().length > 0) return this.getInlineImageProperties(o, n);
+			o = a, a = a.parentElement;
+		}
+		return {
+			foundInlineImage: r,
+			imageHeight: i
+		};
+	}
+	findSiblingNodes(e) {
+		let t = e.previousSibling, r = e.nextSibling;
+		for (; t != null && !(!n(t.textContent) || t.nodeType == Node.ELEMENT_NODE);) t = t.previousSibling;
+		for (; r != null && !(!n(r.textContent) || r.nodeType == Node.ELEMENT_NODE);) r = r.nextSibling;
+		return {
+			previousSiblingNode: t,
+			nextSiblingNode: r
+		};
+	}
+	getInlineImageProperties(e, t) {
+		let { previousSiblingNode: r, nextSiblingNode: i } = this.findSiblingNodes(e), a = !1, o;
+		if (!r && !i) return {
+			foundInlineImage: a,
+			imageHeight: o
+		};
+		let s = r?.ownerDocument?.defaultView ?? i?.ownerDocument?.defaultView, l;
+		if (r?.nodeType == Node.TEXT_NODE && !n(r.nodeValue) ? l = r.parentElement : i?.nodeType == Node.TEXT_NODE && !n(i.nodeValue) ? l = i.parentElement : r && this.checkIsInlineTag(r) ? l = r : i && this.checkIsInlineTag(i) && (l = i), !l) return {
+			foundInlineImage: a,
+			imageHeight: o
+		};
+		let u = 1.25, d = s?.getComputedStyle(l), f, p, m;
+		d ? (f = parseFloat(d.fontSize), p = parseFloat(d.lineHeight), m = parseFloat(d.height)) : (f = 20, p = f * u, m = p);
+		let h = p > f * u ? f * u : p;
+		return o = this.checkElementIsFootnote(e) || c(e.parentElement?.tagName, "A") && (c(e.parentElement?.parentElement?.tagName, "SUB") || c(e.parentElement?.parentElement?.tagName, "SUP")) ? f : m && m <= h ? m : h, t && t < o && (o = t), a = !0, {
+			foundInlineImage: a,
+			imageHeight: o
+		};
+	}
+	checkElementIsFootnote(e) {
+		return e.getAttribute("class")?.indexOf("footnote") >= 0 || e.getAttribute("epub:type") == "noteref" || c(e.tagName, "SUB") || c(e.tagName, "SUP") ? !0 : e.children.length > 0 && this.checkElementIsFootnote(e.children[0]);
+	}
+	async loadImages(e, t) {
+		let n = e;
+		if (!(!n || !t?.length)) for (let r of t) {
+			if (this.isDisposed || !r) return;
+			let t = r.ownerDocument.defaultView;
+			if (t) {
+				if (r instanceof t.HTMLImageElement || r instanceof t.SVGImageElement) {
+					let e = r.getAttribute(o), t = r.ownerDocument.querySelector(`[${o}='${e}']`);
+					t && await this.loadSingleImage(n, t);
+				} else {
+					let t = r.getElementsByTagName("img");
+					for (let e = 0; e < t.length; e++) await this.loadSingleImage(n, t[e]);
+					let i = r.getAttribute(o), a = e.getContentContainer()?.querySelector(`[${o}='${i}']`), s = a && a != r ? a.getElementsByTagName("image") : r.getElementsByTagName("image");
+					for (let e = 0; e < s.length; e++) await this.loadSingleImage(n, s[e]);
+				}
+			}
+		}
+	}
+	async loadSingleImage(t, r) {
+		if (!r || !t) return;
+		let a = r.getAttribute("data-load-state");
+		if (a == "loaded" || a == "loading" || a == "fail") return;
+		r.setAttribute("data-load-state", "loading"), r.onload = () => {
+			r.setAttribute("data-load-state", "loaded");
+		}, r.onerror = () => {
+			r.setAttribute("data-load-state", "fail");
+		};
+		let o = r.getAttribute("src") ?? "", s = r.getAttribute("data-src") ?? "";
+		n(s) || (o = s);
+		let l = o;
+		if (!i(l)) {
+			let e = await t.fileParser.getFile(l, t.url, "blob");
+			if (e && e.size > 0) {
+				if (e.type?.toLowerCase() == "image/svg+xml") {
+					let t = m(await e.arrayBuffer()), n = f(t).querySelector("image");
+					if (n) {
+						l = n.getAttribute("xlink:href") ?? n.getAttribute("href");
+						try {
+							let e = await p(l), t = e.width, n = e.height;
+							r.setAttribute("data-width", t.toString()), r.setAttribute("data-height", n.toString());
+							let { columnWidth: i, columnHeight: a } = this.getColumnMetrics();
+							this.forceSetImageHeight(r, i, a, t, n, this.htmlOptions.maxImageHeightRatio);
+						} catch (e) {
+							this.logger.error(e);
+						}
+					} else l = "data:image/svg+xml," + encodeURIComponent(t);
+				} else l = URL.createObjectURL(e), this.addBlobUrl(t, l);
+			} else l = _;
+		}
+		if (c(r.tagName, "IMG")) {
+			let e = r;
+			if (e.src = l, e.decode) try {
+				await e.decode();
+			} catch (n) {
+				this.logger.error("image decode failed", "imageUrl", l, n), this.revokeObjectURL(l), setTimeout(async () => {
+					try {
+						let n = await t.fileParser.getFile(o, t.url, "blob");
+						if (n && n.size > 0) {
+							let r = URL.createObjectURL(n);
+							this.addBlobUrl(t, r), e.src = r;
+						} else e.src = _;
+					} catch (t) {
+						this.logger.error(t), e.src = _;
+					}
+				}, 500);
+			}
+		} else e.isSafari() ? r.href.baseVal = l : r.setAttribute("xlink:href", l);
+	}
+	async dispose() {
+		this.isDisposed = !0, this.unbindEvents(), this.documentImageSizesSummaries.clear(), this.resetImageSizeTasks = [];
+		for (let e of [...this.blobUrls.keys()]) this.revokeDocumentBlobUrls(e);
+		this.blobUrls.clear();
+	}
 };
+//#endregion
+export { x as HtmlImageLoader };