zhui-plus 1.0.0 → 1.0.10

package/packages/components/fileViewer/src/liteofd/font/font_loader.js

@@ -0,0 +1,455 @@
+/* Copyright 2012 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  assert,
+  bytesToString,
+  FeatureTest,
+  isNodeJS,
+  shadow,
+  string32,
+  unreachable,
+  warn,
+} from "./util.js";
+
+class FontLoader {
+  #systemFonts = new Set();
+
+  constructor({
+    ownerDocument = globalThis.document,
+    styleElement = null, // For testing only.
+    loadedName = ""
+  }) {
+    this._document = ownerDocument;
+
+    this.nativeFontFaces = new Set();
+    this.styleElement = null;
+
+    this.loadingRequests = [];
+    this.loadTestFontId = 0;
+    this.loadedName = loadedName
+  }
+
+  addNativeFontFace(nativeFontFace) {
+    this.nativeFontFaces.add(nativeFontFace);
+    this._document.fonts.add(nativeFontFace);
+  }
+
+  removeNativeFontFace(nativeFontFace) {
+    this.nativeFontFaces.delete(nativeFontFace);
+    this._document.fonts.delete(nativeFontFace);
+  }
+
+  insertRule(rule) {
+    if (!this.styleElement) {
+      this.styleElement = this._document.createElement("style");
+      this._document.documentElement
+        .getElementsByTagName("head")[0]
+        .append(this.styleElement);
+    }
+    const styleSheet = this.styleElement.sheet;
+    styleSheet.insertRule(rule, styleSheet.cssRules.length);
+  }
+
+  clear() {
+    for (const nativeFontFace of this.nativeFontFaces) {
+      this._document.fonts.delete(nativeFontFace);
+    }
+    this.nativeFontFaces.clear();
+    this.#systemFonts.clear();
+
+    if (this.styleElement) {
+      // Note: ChildNode.remove doesn't throw if the parentNode is undefined.
+      this.styleElement.remove();
+      this.styleElement = null;
+    }
+  }
+
+  async loadSystemFont({ systemFontInfo: info, _inspectFont }) {
+    if (!info || this.#systemFonts.has(info.loadedName)) {
+      return;
+    }
+    assert(
+      !this.disableFontFace,
+      "loadSystemFont shouldn't be called when `disableFontFace` is set."
+    );
+
+    if (this.isFontLoadingAPISupported) {
+      const { loadedName, src, style } = info;
+      const fontFace = new FontFace(loadedName, src, style);
+      this.addNativeFontFace(fontFace);
+      try {
+        await fontFace.load();
+        this.#systemFonts.add(loadedName);
+        _inspectFont?.(info);
+      } catch {
+        warn(
+          `Cannot load system font: ${info.baseFontName}, installing it could help to improve PDF rendering.`
+        );
+
+        this.removeNativeFontFace(fontFace);
+      }
+      return;
+    }
+
+    unreachable(
+      "Not implemented: loadSystemFont without the Font Loading API."
+    );
+  }
+  // 将字体数据绑定到DOM中取，使用FontFace，这里是已经经过解析的OTF字体数据
+  async bind(font) {
+    // Add the font to the DOM only once; skip if the font is already loaded.
+    if (font.attached || (font.missingFile && !font.systemFontInfo)) {
+      return;
+    }
+    font.attached = true;
+
+    if (font.systemFontInfo) {
+      await this.loadSystemFont(font);
+      return;
+    }
+
+    // debugger
+    if (this.isFontLoadingAPISupported) {
+      const nativeFontFace = font.createNativeFontFace();
+      if (nativeFontFace) {
+        this.addNativeFontFace(nativeFontFace);
+        try {
+          // 将文件中的字体加载到DOM里面，也就是FontFace对象，这个是js的加载字体的方法，如果当前document支持加载字体的话，就使用fontface的load加载
+          let loadedRes = await nativeFontFace.loaded;
+          document.fonts.add(loadedRes)
+        } catch (ex) {
+          console.log("load font face err", ex)
+          warn(`Failed to load font '${nativeFontFace.family}': '${ex}'.`);
+
+          // When font loading failed, fall back to the built-in font renderer.
+          font.disableFontFace = true;
+          throw ex;
+        }
+      }
+      return; // The font was, asynchronously, loaded.
+    }
+
+    // !this.isFontLoadingAPISupported
+    const rule = font.createFontFaceRule();
+    if (rule) {
+      this.insertRule(rule);
+
+      if (this.isSyncFontLoadingSupported) {
+        return; // The font was, synchronously, loaded.
+      }
+      await new Promise(resolve => {
+        const request = this._queueLoadingCallback(resolve);
+        this._prepareFontLoadEvent(font, request);
+      });
+      // The font was, asynchronously, loaded.
+    }
+  }
+  // 判断字体是否在系统中支持
+  get isFontLoadingAPISupported() {
+    const hasFonts = !!this._document?.fonts;
+
+    return shadow(this, "isFontLoadingAPISupported", hasFonts);
+  }
+
+  get isSyncFontLoadingSupported() {
+
+    let supported = false;
+    if (isNodeJS) {
+      // Node.js - we can pretend that sync font loading is supported.
+      supported = true;
+    } else if (
+      typeof navigator !== "undefined" &&
+      typeof navigator?.userAgent === "string" &&
+      // User agent string sniffing is bad, but there is no reliable way to
+      // tell if the font is fully loaded and ready to be used with canvas.
+      /Mozilla\/5.0.*?rv:\d+.*? Gecko/.test(navigator.userAgent)
+    ) {
+      // Firefox, from version 14, supports synchronous font loading.
+      supported = true;
+    }
+    return shadow(this, "isSyncFontLoadingSupported", supported);
+  }
+
+  _queueLoadingCallback(callback) {
+
+    function completeRequest() {
+      assert(!request.done, "completeRequest() cannot be called twice.");
+      request.done = true;
+
+      // Sending all completed requests in order of how they were queued.
+      while (loadingRequests.length > 0 && loadingRequests[0].done) {
+        const otherRequest = loadingRequests.shift();
+        setTimeout(otherRequest.callback, 0);
+      }
+    }
+
+    const { loadingRequests } = this;
+    const request = {
+      done: false,
+      complete: completeRequest,
+      callback,
+    };
+    loadingRequests.push(request);
+    return request;
+  }
+
+  get _loadTestFont() {
+
+    // This is a CFF font with 1 glyph for '.' that fills its entire width
+    // and height.
+    const testFont = atob(
+      "T1RUTwALAIAAAwAwQ0ZGIDHtZg4AAAOYAAAAgUZGVE1lkzZwAAAEHAAAABxHREVGABQA" +
+        "FQAABDgAAAAeT1MvMlYNYwkAAAEgAAAAYGNtYXABDQLUAAACNAAAAUJoZWFk/xVFDQAA" +
+        "ALwAAAA2aGhlYQdkA+oAAAD0AAAAJGhtdHgD6AAAAAAEWAAAAAZtYXhwAAJQAAAAARgA" +
+        "AAAGbmFtZVjmdH4AAAGAAAAAsXBvc3T/hgAzAAADeAAAACAAAQAAAAEAALZRFsRfDzz1" +
+        "AAsD6AAAAADOBOTLAAAAAM4KHDwAAAAAA+gDIQAAAAgAAgAAAAAAAAABAAADIQAAAFoD" +
+        "6AAAAAAD6AABAAAAAAAAAAAAAAAAAAAAAQAAUAAAAgAAAAQD6AH0AAUAAAKKArwAAACM" +
+        "AooCvAAAAeAAMQECAAACAAYJAAAAAAAAAAAAAQAAAAAAAAAAAAAAAFBmRWQAwAAuAC4D" +
+        "IP84AFoDIQAAAAAAAQAAAAAAAAAAACAAIAABAAAADgCuAAEAAAAAAAAAAQAAAAEAAAAA" +
+        "AAEAAQAAAAEAAAAAAAIAAQAAAAEAAAAAAAMAAQAAAAEAAAAAAAQAAQAAAAEAAAAAAAUA" +
+        "AQAAAAEAAAAAAAYAAQAAAAMAAQQJAAAAAgABAAMAAQQJAAEAAgABAAMAAQQJAAIAAgAB" +
+        "AAMAAQQJAAMAAgABAAMAAQQJAAQAAgABAAMAAQQJAAUAAgABAAMAAQQJAAYAAgABWABY" +
+        "AAAAAAAAAwAAAAMAAAAcAAEAAAAAADwAAwABAAAAHAAEACAAAAAEAAQAAQAAAC7//wAA" +
+        "AC7////TAAEAAAAAAAABBgAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
+        "AAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
+        "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
+        "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
+        "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
+        "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAD/gwAyAAAAAQAAAAAAAAAAAAAAAAAA" +
+        "AAABAAQEAAEBAQJYAAEBASH4DwD4GwHEAvgcA/gXBIwMAYuL+nz5tQXkD5j3CBLnEQAC" +
+        "AQEBIVhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYAAABAQAADwACAQEEE/t3" +
+        "Dov6fAH6fAT+fPp8+nwHDosMCvm1Cvm1DAz6fBQAAAAAAAABAAAAAMmJbzEAAAAAzgTj" +
+        "FQAAAADOBOQpAAEAAAAAAAAADAAUAAQAAAABAAAAAgABAAAAAAAAAAAD6AAAAAAAAA=="
+    );
+    return shadow(this, "_loadTestFont", testFont);
+  }
+
+  _prepareFontLoadEvent(font, request) {
+    /** Hack begin */
+    // There's currently no event when a font has finished downloading so the
+    // following code is a dirty hack to 'guess' when a font is ready.
+    // It's assumed fonts are loaded in order, so add a known test font after
+    // the desired fonts and then test for the loading of that test font.
+
+    function int32(data, offset) {
+      return (
+        (data.charCodeAt(offset) << 24) |
+        (data.charCodeAt(offset + 1) << 16) |
+        (data.charCodeAt(offset + 2) << 8) |
+        (data.charCodeAt(offset + 3) & 0xff)
+      );
+    }
+    function spliceString(s, offset, remove, insert) {
+      const chunk1 = s.substring(0, offset);
+      const chunk2 = s.substring(offset + remove);
+      return chunk1 + insert + chunk2;
+    }
+    let i, ii;
+
+    // The temporary canvas is used to determine if fonts are loaded.
+    const canvas = this._document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    const ctx = canvas.getContext("2d");
+
+    let called = 0;
+    function isFontReady(name, callback) {
+      // With setTimeout clamping this gives the font ~100ms to load.
+      if (++called > 30) {
+        warn("Load test font never loaded.");
+        callback();
+        return;
+      }
+      ctx.font = "30px " + name;
+      ctx.fillText(".", 0, 20);
+      const imageData = ctx.getImageData(0, 0, 1, 1);
+      if (imageData.data[3] > 0) {
+        callback();
+        return;
+      }
+      setTimeout(isFontReady.bind(null, name, callback));
+    }
+
+    const loadTestFontId = `lt${Date.now()}${this.loadTestFontId++}`;
+    // Chromium seems to cache fonts based on a hash of the actual font data,
+    // so the font must be modified for each load test else it will appear to
+    // be loaded already.
+    // TODO: This could maybe be made faster by avoiding the btoa of the full
+    // font by splitting it in chunks before hand and padding the font id.
+    let data = this._loadTestFont;
+    const COMMENT_OFFSET = 976; // has to be on 4 byte boundary (for checksum)
+    data = spliceString(
+      data,
+      COMMENT_OFFSET,
+      loadTestFontId.length,
+      loadTestFontId
+    );
+    // CFF checksum is important for IE, adjusting it
+    const CFF_CHECKSUM_OFFSET = 16;
+    const XXXX_VALUE = 0x58585858; // the "comment" filled with 'X'
+    let checksum = int32(data, CFF_CHECKSUM_OFFSET);
+    for (i = 0, ii = loadTestFontId.length - 3; i < ii; i += 4) {
+      checksum = (checksum - XXXX_VALUE + int32(loadTestFontId, i)) | 0;
+    }
+    if (i < loadTestFontId.length) {
+      // align to 4 bytes boundary
+      checksum = (checksum - XXXX_VALUE + int32(loadTestFontId + "XXX", i)) | 0;
+    }
+    data = spliceString(data, CFF_CHECKSUM_OFFSET, 4, string32(checksum));
+
+    const url = `url(data:font/opentype;base64,${btoa(data)});`;
+    const rule = `@font-face {font-family:"${loadTestFontId}";src:${url}}`;
+    this.insertRule(rule);
+
+    const div = this._document.createElement("div");
+    div.style.visibility = "hidden";
+    div.style.width = div.style.height = "10px";
+    div.style.position = "absolute";
+    div.style.top = div.style.left = "0px";
+
+    for (const name of [font.loadedName, loadTestFontId]) {
+      const span = this._document.createElement("span");
+      span.textContent = "Hi";
+      span.style.fontFamily = name;
+      div.append(span);
+    }
+    this._document.body.append(div);
+
+    isFontReady(loadTestFontId, () => {
+      div.remove();
+      request.complete();
+    });
+    /** Hack end */
+  }
+}
+
+class FontFaceObject {
+  constructor(
+    translatedData,
+    {
+      isEvalSupported = true,
+      disableFontFace = false,
+      ignoreErrors = false,
+      inspectFont = null,
+    }
+  ) {
+    this.compiledGlyphs = Object.create(null);
+    // importing translated data
+    for (const i in translatedData) {
+      this[i] = translatedData[i];
+    }
+    this.isEvalSupported = isEvalSupported !== false;
+    this.disableFontFace = disableFontFace === true;
+    this.ignoreErrors = ignoreErrors === true;
+    this._inspectFont = inspectFont;
+  }
+  // 创建本地的FontFace对象，用来进行DOM加载使用
+  createNativeFontFace() {
+    if (!this.data || this.disableFontFace) {
+      return null;
+    }
+    let nativeFontFace;
+    if (!this.cssFontInfo) {
+      // console.log("font loader load font name ", this.loadedName)
+      nativeFontFace = new FontFace(this.loadedName, this.data, {});
+    } else {
+      const css = {
+        weight: this.cssFontInfo.fontWeight,
+      };
+      if (this.cssFontInfo.italicAngle) {
+        css.style = `oblique ${this.cssFontInfo.italicAngle}deg`;
+      }
+      nativeFontFace = new FontFace(
+        this.cssFontInfo.fontFamily,
+        this.data,
+        css
+      );
+    }
+
+    this._inspectFont?.(this);
+    return nativeFontFace;
+  }
+
+  createFontFaceRule() {
+    if (!this.data || this.disableFontFace) {
+      return null;
+    }
+    const data = bytesToString(this.data);
+    // Add the @font-face rule to the document.
+    const url = `url(data:${this.mimetype};base64,${btoa(data)});`;
+    let rule;
+    if (!this.cssFontInfo) {
+      rule = `@font-face {font-family:"${this.loadedName}";src:${url}}`;
+    } else {
+      let css = `font-weight: ${this.cssFontInfo.fontWeight};`;
+      if (this.cssFontInfo.italicAngle) {
+        css += `font-style: oblique ${this.cssFontInfo.italicAngle}deg;`;
+      }
+      rule = `@font-face {font-family:"${this.cssFontInfo.fontFamily}";${css}src:${url}}`;
+    }
+
+    this._inspectFont?.(this, url);
+    return rule;
+  }
+
+  getPathGenerator(objs, character) {
+    if (this.compiledGlyphs[character] !== undefined) {
+      return this.compiledGlyphs[character];
+    }
+
+    let cmds;
+    try {
+      cmds = objs.get(this.loadedName + "_path_" + character);
+    } catch (ex) {
+      if (!this.ignoreErrors) {
+        throw ex;
+      }
+      warn(`getPathGenerator - ignoring character: "${ex}".`);
+
+      return (this.compiledGlyphs[character] = function (c, size) {
+        // No-op function, to allow rendering to continue.
+      });
+    }
+
+    // If we can, compile cmds into JS for MAXIMUM SPEED...
+    if (this.isEvalSupported && FeatureTest.isEvalSupported) {
+      const jsBuf = [];
+      for (const current of cmds) {
+        const args = current.args !== undefined ? current.args.join(",") : "";
+        jsBuf.push("c.", current.cmd, "(", args, ");\n");
+      }
+      // eslint-disable-next-line no-new-func
+      return (this.compiledGlyphs[character] = new Function(
+        "c",
+        "size",
+        jsBuf.join("")
+      ));
+    }
+    // ... but fall back on using Function.prototype.apply() if we're
+    // blocked from using eval() for whatever reason (like CSP policies).
+    return (this.compiledGlyphs[character] = function (c, size) {
+      for (const current of cmds) {
+        if (current.cmd === "scale") {
+          current.args = [size, -size];
+        }
+        // eslint-disable-next-line prefer-spread
+        c[current.cmd].apply(c, current.args);
+      }
+    });
+  }
+}
+
+export { FontFaceObject, FontLoader };