@foxycape/core 1.1.3

package/dist/mediaTypes/html/renderer/html/HtmlContentProcessor.mjs

@@ -0,0 +1,183 @@
+import { convertArrayBufferToString as w, convertStringToUint8Array as A } from "../../../../kernal/common/encoding.mjs";
+import { getExtension as S } from "../../../../kernal/common/path.mjs";
+import { isNullOrWhiteSpace as m, startsWithAny as k } from "../../../../kernal/common/text.mjs";
+import { checkIsAbsoluteUrl as c, getFullUrl as b } from "../../../../kernal/common/url.mjs";
+import { toBlob as H } from "../../../../kernal/common/buffer.mjs";
+import { compareTagName as y, getDocumentHead as R } from "../../../../kernal/html/finder.mjs";
+import { injectCssContent as x, createElement as E } from "../../../../kernal/html/injector.mjs";
+import { replaceFontSize as d, removeTextIndent as L, appendZeroTextIndentForCenterRightAlign as N } from "../../../../kernal/html/style.mjs";
+import { HtmlSettings as C } from "../../HtmlSettings.mjs";
+import { getRandomId as O } from "../../../../kernal/common/uuid.mjs";
+import { LastElementAttributeName as T } from "../../../../kernal/Constants.mjs";
+class K {
+  /**
+   * Constructor
+   * @param fileParser 
+   */
+  constructor(e) {
+    this.fileParser = e, this.childrenUrls = /* @__PURE__ */ new Map(), this.errorLinks = [], this.docBlobUrls = /* @__PURE__ */ new Map(), this.opaqueDocumentBaseUrls = [];
+  }
+  /**
+   * Prepare the content to be loaded
+   * @param doc
+   * @returns 
+   */
+  async preprocess(e) {
+    const o = (await e.getVirtualContentContainer())?.ownerDocument;
+    o && (this.format(o), this.injectBaseUrl(o, e.url), await this.resetCssHref(o, e), await this.resetScriptSrc(o, e));
+  }
+  format(e) {
+    const o = e.getElementsByTagName("*");
+    let n = !1;
+    for (let r = o.length - 1; r >= 0; r--) {
+      const t = o[r];
+      if (t.textContent.trim() || t.classList.add("lhx-text-empty"), t.style && (t.style.fontSize || t.style.textIndent)) {
+        let i = t.getAttribute("style");
+        t.style.fontSize && (i = d(i)), t.style.textIndent && (i = L(i)), t.setAttribute("style", i);
+      }
+      y(t.tagName, "TABLE") && (t.style.width = "100%", t.style.height = "auto"), n || (y(t.tagName, "SVG") || t.children.length == 0 && !y(t.parentElement.tagName, "SVG")) && (n = !0, t.setAttribute(T, "true")), t.getAttribute("epub:type") == "footnote" && t.style.setProperty("display", "none");
+    }
+  }
+  /**
+  * Reset CSS path
+  */
+  async resetCssHref(e, o) {
+    const n = e.getElementsByTagName("link");
+    for (let r = n.length - 1; r >= 0; r--) {
+      const t = n[r].getAttribute("href");
+      if (!n[r].rel || n[r].rel.toLowerCase() != "stylesheet" || m(t)) continue;
+      const {
+        href: s,
+        cssContent: i,
+        isHref: a
+      } = await this.getActualCssLink(t, o);
+      if (a && t)
+        n[r].href = s, n[r].setAttribute(C.LinkOriginHrefPropertyName, t);
+      else if (i) {
+        const f = O(!0);
+        x(e, i, !1, f), n[r].parentElement?.removeChild(n[r]);
+      }
+    }
+  }
+  async getActualCssLink(e, o) {
+    if (m(e))
+      return {
+        href: e,
+        cssContent: "",
+        isHref: !0
+      };
+    if (c(e))
+      return {
+        href: e,
+        cssContent: "",
+        isHref: !0
+      };
+    try {
+      const n = await this.fileParser.getFile(e, o.url, "blob"), r = w(await n.arrayBuffer()), t = r.matchAll(/url\(["']?(.*?)["']?\)/gi);
+      for (const u of t) {
+        const l = u[1];
+        if (this.childrenUrls.get(l))
+          continue;
+        const U = S(l);
+        if (U && U.toLowerCase() == ".css") {
+          if (m(l) || c(l))
+            continue;
+          const {
+            href: h
+          } = await this.getActualCssLink(l, o);
+          this.childrenUrls.set(l, h);
+        } else {
+          const h = b(l, e);
+          if (!k(h.toString(), !0, "http://", "https://"))
+            continue;
+          const g = (h.pathname + h.search).substring(1);
+          if (this.errorLinks.indexOf(g) >= 0)
+            continue;
+          try {
+            const p = await this.fileParser.getFile(g, "", "blob"), B = URL.createObjectURL(p);
+            this.childrenUrls.set(l, B);
+          } catch (p) {
+            this.errorLinks.indexOf(g) < 0 && this.errorLinks.push(g), this.logger.error(p), this.childrenUrls.set(l, h.toString());
+          }
+        }
+      }
+      let s = r.replace(/url\(["']?(.*?)["']?\)/gi, (u, l) => c(l) ? u : "");
+      s = d(s), s = L(s), s = N(s);
+      const i = A(s), a = H(i, {
+        type: "text/css"
+      }), f = URL.createObjectURL(a);
+      return this.childrenUrls.set(e, f), {
+        href: f,
+        cssContent: s,
+        isHref: !1
+      };
+    } catch (n) {
+      return this.logger.error(n), {
+        href: e,
+        cssContent: "",
+        isHref: !0
+      };
+    }
+  }
+  async dispose() {
+    this.childrenUrls.clear(), this.errorLinks && this.errorLinks.splice(0), this.docBlobUrls.clear();
+    for (const e of this.opaqueDocumentBaseUrls)
+      try {
+        URL.revokeObjectURL(e);
+      } catch {
+      }
+    this.opaqueDocumentBaseUrls = [];
+  }
+  /**
+   * Reset script path
+   * @param virtualDocument 
+   * @returns 
+   */
+  async resetScriptSrc(e, o) {
+    let n = o.getRoot();
+    n || (n = "");
+    const r = e.getElementsByTagName("script");
+    for (let t = 0; t < r.length; t++) {
+      let s = r[t].getAttribute("src");
+      if (!(!s || s.startsWith("/"))) {
+        if (!c(s)) {
+          const i = b(s, n);
+          c(n) ? s = i.toString() : (s = i.pathname + i.search, s = s.substring(1));
+        }
+        if (!c(s)) {
+          const i = b(s, n);
+          let a = i.pathname + i.search;
+          a = a.substring(1);
+          const f = await this.fileParser.getFile(s, o.url, "blob"), u = URL.createObjectURL(f);
+          r[t].src = u, r[t].setAttribute(C.LinkOriginHrefPropertyName, s);
+        }
+      }
+    }
+  }
+  /**
+   * Add baseUrl, for relative address parsing within the page.
+   * about:blank / srcdoc inherit the host page baseURI; an explicit <base>
+   * must not point at the host origin or relative assets will load the test page.
+   */
+  injectBaseUrl(e, o) {
+    const n = e.getElementsByTagName("base");
+    for (let a = 0; a < n.length; a++)
+      if (!m(n[a].href))
+        return;
+    let r = o;
+    !m(r) && c(r) || (r = this.createOpaqueDocumentBaseUrl());
+    const s = E(e, "base", null, {
+      href: r
+    }), i = R(e);
+    i.insertBefore(s, i.firstChild);
+  }
+  createOpaqueDocumentBaseUrl() {
+    const e = URL.createObjectURL(new Blob(["<!doctype html><title></title>"], {
+      type: "text/html"
+    }));
+    return this.opaqueDocumentBaseUrls.push(e), e;
+  }
+}
+export {
+  K as HtmlContentProcessor
+};

package/dist/mediaTypes/html/renderer/html/IHtmlContentProcessor.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/mediaTypes/html/renderer/html/IHtmlContentProcessor.d.ts

@@ -0,0 +1,6 @@
+import { IHtmlDocument } from '../IHtmlDocument';
+
+export interface IHtmlContentProcessor {
+    preprocess(doc: IHtmlDocument): Promise<void>;
+    dispose(): Promise<void>;
+}

package/dist/mediaTypes/html/renderer/html/IHtmlContentProcessor.mjs

@@ -0,0 +1 @@
+

package/dist/mediaTypes/html/renderer/html/template.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../../../../kernal/html/injector.cjs"),l=require("../../../../kernal/common/data.cjs"),n=require("../../../../kernal/web/BrowserCapabilities.cjs"),s=require("../layout/ViewportCssVariableNames.cjs"),i='<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>{custom-htmls}</body></html>',m=e=>i.replace("{custom-htmls}",e),c=e=>{const r='<div style="min-height:50px;display:flex;justify-content:center;align-items:center;">The document is too big('+l.formatFileSize(e)+"), can't be loaded.</div>";return i.replace("{custom-htmls}",r)},h=(e,r,o)=>{const t=a.createElement(e,"iframe",r);return n.BrowserCapabilities.isFirefox()?t.setAttribute("src","javascript:"):t.setAttribute("src","about:blank"),t.setAttribute("data-role","content"),t.setAttribute("frameborder","0"),t.setAttribute("border","0"),t.setAttribute("width","100%"),t.setAttribute("height","100%"),t.setAttribute("style","display:block"),o?t.style.setProperty("width","100%"):t.style.setProperty("width","var("+s.ViewportCssVariableNames.ContentContainerWidth+")"),t.style.setProperty("height","var("+s.ViewportCssVariableNames.ContentContainerHeight+")"),t};exports.createIframe=h;exports.getHtmlTemplate=m;exports.getTooBigHtmlTemplate=c;exports.htmlTemplate=i;

package/dist/mediaTypes/html/renderer/html/template.d.ts

@@ -0,0 +1,4 @@
+export declare const htmlTemplate = "<?xml version=\"1.0\" encoding=\"utf-8\"?><!DOCTYPE html><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title></head><body>{custom-htmls}</body></html>";
+export declare const getHtmlTemplate: (customHtmls: string) => string;
+export declare const getTooBigHtmlTemplate: (contentLength: number) => string;
+export declare const createIframe: (ownerDocument: Document, iframeId: string, forceScroll: boolean) => HTMLIFrameElement;

package/dist/mediaTypes/html/renderer/html/template.mjs

@@ -0,0 +1,17 @@
+import { createElement as l } from "../../../../kernal/html/injector.mjs";
+import { formatFileSize as m } from "../../../../kernal/common/data.mjs";
+import { BrowserCapabilities as a } from "../../../../kernal/web/BrowserCapabilities.mjs";
+import { ViewportCssVariableNames as i } from "../layout/ViewportCssVariableNames.mjs";
+const o = '<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>{custom-htmls}</body></html>', b = (e) => o.replace("{custom-htmls}", e), d = (e) => {
+  const r = '<div style="min-height:50px;display:flex;justify-content:center;align-items:center;">The document is too big(' + m(e) + "), can't be loaded.</div>";
+  return o.replace("{custom-htmls}", r);
+}, u = (e, r, s) => {
+  const t = l(e, "iframe", r);
+  return a.isFirefox() ? t.setAttribute("src", "javascript:") : t.setAttribute("src", "about:blank"), t.setAttribute("data-role", "content"), t.setAttribute("frameborder", "0"), t.setAttribute("border", "0"), t.setAttribute("width", "100%"), t.setAttribute("height", "100%"), t.setAttribute("style", "display:block"), s ? t.style.setProperty("width", "100%") : t.style.setProperty("width", "var(" + i.ContentContainerWidth + ")"), t.style.setProperty("height", "var(" + i.ContentContainerHeight + ")"), t;
+};
+export {
+  u as createIframe,
+  b as getHtmlTemplate,
+  d as getTooBigHtmlTemplate,
+  o as htmlTemplate
+};

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

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

package/dist/mediaTypes/html/renderer/image/HtmlImageLoader.d.ts

@@ -0,0 +1,62 @@
+import { IDocument, IDocumentsProvider } from '../../../../kernal';
+import { HtmlOptions } from '../../HtmlOptions';
+import { IHtmlDocument } from '../IHtmlDocument';
+import { HtmlLayoutMetrics } from '../layout/HtmlLayoutMetrics';
+import { IRendererViewport } from '../../../../kernal/IRendererViewport';
+import { IHtmlImageLoader } from './IHtmlImageLoader';
+
+export declare class HtmlImageLoader implements IHtmlImageLoader {
+    private readonly documentsProvider;
+    private readonly rendererViewport;
+    private readonly htmlOptions;
+    private readonly documentImageSizesSummaries;
+    private readonly blobUrls;
+    private readonly events;
+    private readonly logger;
+    private isDisposed;
+    private resetImageSizeTasks;
+    constructor(documentsProvider: IDocumentsProvider<IHtmlDocument>, rendererViewport: IRendererViewport<HtmlLayoutMetrics>, htmlOptions: HtmlOptions);
+    private bindEvents;
+    private unbindEvents;
+    private onDocumentDisposing;
+    private addBlobUrl;
+    private revokeDocumentBlobUrls;
+    private onImageElementsVisible;
+    private delayLoadOnImageElementsVisible;
+    private onLayoutChange;
+    private resetAllImageSize;
+    private delayResetAllImageSize;
+    preprocessImages(doc: IDocument): Promise<void>;
+    private setImagePreviewUrl;
+    private applyPreviewUrl;
+    private setImageStyle;
+    private prepareImageSize;
+    private persistImageSizes;
+    private getResourceId;
+    private getStorage;
+    private getImageSizesSummary;
+    private getImageUrl;
+    private prefetchImageSize;
+    private revokeObjectURL;
+    private addImageDescriptor;
+    private setWidthAndHeight;
+    private getColumnMetrics;
+    private resetImageStyles;
+    private resetImageWidthHeight;
+    private flushResetImageSizeTasks;
+    resetImageSize: (doc: IDocument) => Promise<void>;
+    private resetInlineImageSize;
+    private handleOnlyOneImageInDocument;
+    private resetImageHeight;
+    private forceSetImageHeight;
+    private calcImageHeight;
+    private checkIsOnlyOneImageInDocument;
+    private checkIsInlineTag;
+    private checkIsInlineImage;
+    private findSiblingNodes;
+    private getInlineImageProperties;
+    private checkElementIsFootnote;
+    loadImages(doc: IDocument, visibleElements: Element[]): Promise<void>;
+    private loadSingleImage;
+    dispose(): Promise<void>;
+}