base/FontHandler.mjs

  1. import { isNodeJs, httpRequest, btoa_func, source_dir, settings, isObject } from '../core.mjs';
  4. const kArial = 'Arial', kTimes = 'Times New Roman', kCourier = 'Courier New', kVerdana = 'Verdana', kSymbol = 'RootSymbol', kWingdings = 'Wingdings',
  5.     // average width taken from symbols.html, counted only for letters and digits
  6.     root_fonts = [null,  // index 0 not exists
  7.       { n: kTimes, s: 'italic', aw: 0.5314 },
  8.       { n: kTimes, w: 'bold', aw: 0.5809 },
  9.       { n: kTimes, s: 'italic', w: 'bold', aw: 0.5540 },
  10.       { n: kArial, aw: 0.5778 },
  11.       { n: kArial, s: 'oblique', aw: 0.5783 },
  12.       { n: kArial, w: 'bold', aw: 0.6034 },
  13.       { n: kArial, s: 'oblique', w: 'bold', aw: 0.6030 },
  14.       { n: kCourier, aw: 0.6003 },
  15.       { n: kCourier, s: 'oblique', aw: 0.6004 },
  16.       { n: kCourier, w: 'bold', aw: 0.6003 },
  17.       { n: kCourier, s: 'oblique', w: 'bold', aw: 0.6005 },
  18.       { n: kSymbol, aw: 0.5521, file: 'symbol.ttf' },
  19.       { n: kTimes, aw: 0.5521 },
  20.       { n: kWingdings, aw: 0.5664, file: 'wingding.ttf' },
  21.       { n: kSymbol, s: 'oblique', aw: 0.5314, file: 'symbol.ttf' },
  22.       { n: kVerdana, aw: 0.5664 },
  23.       { n: kVerdana, s: 'italic', aw: 0.5495 },
  24.       { n: kVerdana, w: 'bold', aw: 0.5748 },
  25.       { n: kVerdana, s: 'italic', w: 'bold', aw: 0.5578 }],
  26.    // list of loaded fonts including handling of multiple simultaneous requests
  27.    gFontFiles = {};
  29. /** @summary Read font file from some pre-configured locations
  30.   * @return {Promise} with base64 code of the font
  31.   * @private */
  32. async function loadFontFile(fname) {
  33.    let entry = gFontFiles[fname];
  34.    if (entry?.base64)
  35.       return entry?.base64;
  37.    if (entry?.promises !== undefined) {
  38.       return new Promise(resolveFunc => {
  39.          entry.promises.push(resolveFunc);
  40.       });
  41.    }
  43.    entry = gFontFiles[fname] = { promises: [] };
  45.    const locations = [];
  46.    if (fname.indexOf('/') >= 0)
  47.       locations.push(''); // just use file name as is
  48.    else {
  49.       locations.push(source_dir + 'fonts/');
  50.       if (isNodeJs())
  51.          locations.push('../../fonts/');
  52.       else if (source_dir.indexOf('jsrootsys/') >= 0) {
  53.          locations.unshift(source_dir.replace(/jsrootsys/g, 'rootsys_fonts'));
  54.          locations.unshift(source_dir.replace(/jsrootsys/g, 'rootsys/fonts'));
  55.       }
  56.    }
  58.    function completeReading(base64) {
  59.       entry.base64 = base64;
  60.       const arr = entry.promises;
  61.       delete entry.promises;
  62.       arr.forEach(func => func(base64));
  63.       return base64;
  64.    }
  66.    async function tryNext() {
  67.       if (!locations.length) {
  68.          completeReading(null);
  69.          throw new Error(`Fail to load ${fname} font`);
  70.       }
  71.       let path = locations.shift() + fname;
  72.       console.log('loading font', path);
  73.       const pr = isNodeJs() ? import('fs').then(fs => {
  74.          const prefix = 'file://' + (process?.platform === 'win32' ? '/' : '');
  75.          if (path.indexOf(prefix) === 0)
  76.             path = path.slice(prefix.length);
  77.          return fs.readFileSync(path).toString('base64');
  78.       }) : httpRequest(path, 'bin').then(buf => btoa_func(buf));
  80.       return pr.then(res => res ? completeReading(res) : tryNext()).catch(() => tryNext());
  81.    }
  83.    return tryNext();
  84. }
  87. /**
  88.  * @summary Helper class for font handling
  89.  * @private
  90.  */
  92. class FontHandler {
  94.    /** @summary constructor */
  95.    constructor(fontIndex, size, scale) {
  96.       if (scale && (size < 1)) {
  97.          size *= scale;
  98.          this.scaled = true;
  99.       }
  101.       this.size = Math.round(size);
  102.       this.scale = scale;
  103.       this.index = 0;
  105.       this.func = this.setFont.bind(this);
  107.       let cfg;
  109.       if (fontIndex && isObject(fontIndex))
  110.          cfg = fontIndex;
  111.       else {
  112.          if (fontIndex && Number.isInteger(fontIndex))
  113.             this.index = Math.floor(fontIndex / 10);
  114.          cfg = root_fonts[this.index];
  115.       }
  117.       if (cfg) {
  118.          this.cfg = cfg;
  119.          this.setNameStyleWeight(cfg.n, cfg.s, cfg.w, cfg.aw, cfg.format, cfg.base64);
  120.       } else
  121.          this.setNameStyleWeight(kArial);
  122.    }
  124.    /** @summary Should returns true if font has to be loaded before
  125.     * @private */
  126.    needLoad() { return this.cfg?.file && !this.isSymbol && !this.base64; }
  128.    /** @summary Async function to load font
  129.     * @private */
  130.    async load() {
  131.       if (!this.needLoad())
  132.          return true;
  133.       return loadFontFile(this.cfg.file).then(base64 => {
  134.          this.cfg.base64 = this.base64 = base64;
  135.          this.format = 'ttf';
  136.          return Boolean(base64);
  137.       });
  138.    }
  140.    /** @summary Directly set name, style and weight for the font
  141.     * @private */
  142.    setNameStyleWeight(name, style, weight, aver_width, format, base64) {
  143.       this.name = name;
  144.       this.style = style || null;
  145.       this.weight = weight || null;
  146.       this.aver_width = aver_width || (weight ? 0.58 : 0.55);
  147.       this.format = format; // format of custom font, ttf by default
  148.       this.base64 = base64; // indication of custom font
  149.       if (!settings.LoadSymbolTtf && ((this.name === kSymbol) || (this.name === kWingdings))) {
  150.          this.isSymbol = this.name;
  151.          this.name = kTimes;
  152.       } else
  153.          this.isSymbol = '';
  154.    }
  156.    /** @summary Set painter for which font will be applied */
  157.    setPainter(painter) {
  158.       this.painter = painter;
  159.    }
  161.    /** @summary Force setting of style and weight, used in latex */
  162.    setUseFullStyle(flag) {
  163.       this.full_style = flag;
  164.    }
  166.    /** @summary Assigns font-related attributes */
  167.    addCustomFontToSvg(svg) {
  168.       if (!this.base64 || !this.name)
  169.          return;
  170.       const clname = 'custom_font_' + this.name, fmt = 'ttf';
  171.       let defs = svg.selectChild('.canvas_defs');
  172.       if (defs.empty())
  173.          defs = svg.insert('svg:defs', ':first-child').attr('class', 'canvas_defs');
  174.       const entry = defs.selectChild('.' + clname);
  175.       if (entry.empty()) {
  176.          defs.append('style')
  177.                .attr('class', clname)
  178.                .property('$fontcfg', this.cfg || null)
  179.                .text(`@font-face { font-family: "${this.name}"; font-weight: normal; font-style: normal; src: url(data:application/font-${fmt};charset=utf-8;base64,${this.base64}); }`);
  180.       }
  181.    }
  183.    /** @summary Assigns font-related attributes */
  184.    setFont(selection) {
  185.       if (this.base64 && this.painter)
  186.          this.addCustomFontToSvg(this.painter.getCanvSvg());
  188.       selection.attr('font-family', this.name)
  189.                .attr('font-size', this.size)
  190.                .attr(':xml:space', 'preserve');
  191.       this.setFontStyle(selection);
  192.    }
  194.    /** @summary Assigns only font style attributes */
  195.    setFontStyle(selection) {
  196.       selection.attr('font-weight', this.weight || (this.full_style ? 'normal' : null))
  197.                .attr('font-style', this.style || (this.full_style ? 'normal' : null));
  198.    }
  200.    /** @summary Set font size (optional) */
  201.    setSize(size) { this.size = Math.round(size); }
  203.    /** @summary Set text color (optional) */
  204.    setColor(color) { this.color = color; }
  206.    /** @summary Set text align (optional) */
  207.    setAlign(align) { this.align = align; }
  209.    /** @summary Set text angle (optional) */
  210.    setAngle(angle) { this.angle = angle; }
  212.    /** @summary Align angle to step raster, add optional offset */
  213.    roundAngle(step, offset) {
  214.       this.angle = parseInt(this.angle || 0);
  215.       if (!Number.isInteger(this.angle)) this.angle = 0;
  216.       this.angle = Math.round(this.angle/step) * step + (offset || 0);
  217.       if (this.angle < 0)
  218.          this.angle += 360;
  219.       else if (this.angle >= 360)
  220.          this.angle -= 360;
  221.    }
  223.    /** @summary Clears all font-related attributes */
  224.    clearFont(selection) {
  225.       selection.attr('font-family', null)
  226.                .attr('font-size', null)
  227.                .attr(':xml:space', null)
  228.                .attr('font-weight', null)
  229.                .attr('font-style', null);
  230.    }
  232.    /** @summary Returns true in case of monospace font
  233.      * @private */
  234.    isMonospace() {
  235.       const n = this.name.toLowerCase();
  236.       return (n.indexOf('courier') === 0) || (n === 'monospace') || (n === 'monaco');
  237.    }
  239.    /** @summary Return full font declaration which can be set as font property like '12pt Arial bold'
  240.      * @private */
  241.    getFontHtml() {
  242.       let res = Math.round(this.size) + 'pt ' + this.name;
  243.       if (this.weight) res += ' ' + this.weight;
  244.       if (this.style) res += ' ' + this.style;
  245.       return res;
  246.    }
  248.    /** @summary Returns font name */
  249.    getFontName() {
  250.       return this.isSymbol || this.name || 'none';
  251.    }
  253. } // class FontHandler
  255. /** @summary Register custom font
  256.   * @private */
  257. function addCustomFont(index, name, format, base64) {
  258.    if (!Number.isInteger(index))
  259.       console.error(`Wrong index ${index} for custom font`);
  260.    else
  261.       root_fonts[index] = { n: name, format, base64 };
  262. }
  264. /** @summary Return handle with custom font
  265.   * @private */
  266. function getCustomFont(name) {
  267.    return root_fonts.find(h => (h?.n === name) && h?.base64);
  268. }
  270. /** @summary Try to detect and create font handler for SVG text node
  271.   * @private */
  272. function detectPdfFont(node) {
  273.    const sz = node.getAttribute('font-size'),
  274.          p = sz.indexOf('px'),
  275.          sz_pixels = p > 0 ? Number.parseInt(sz.slice(0, p)) : 12;
  277.    let family = node.getAttribute('font-family'),
  278.        style = node.getAttribute('font-style'),
  279.        weight = node.getAttribute('font-weight');
  281.    if (family === 'times')
  282.       family = kTimes;
  283.    else if (family === 'symbol')
  284.       family = kSymbol;
  285.    else if (family === 'arial')
  286.       family = kArial;
  287.    else if (family === 'verdana')
  288.       family = kVerdana;
  289.    if (weight === 'normal')
  290.       weight = '';
  291.    if (style === 'normal')
  292.       style = '';
  294.    const fcfg = root_fonts.find(elem => {
  295.       return (elem?.n === family) &&
  296.              ((!weight && !elem.w) || (elem.w === weight)) &&
  297.              ((!style && !elem.s) || (elem.s === style));
  298.    });
  300.    return new FontHandler(fcfg || root_fonts[13], sz_pixels);
  301. }
  304. export { kArial, kCourier, kSymbol, kWingdings, kTimes,
  305.          FontHandler, addCustomFont, getCustomFont, detectPdfFont };