site/node_modules/mathjax-full/ts/output/chtml/Wrappers/mfrac.ts

/*************************************************************
 *
 *  Copyright (c) 2017-2022 The MathJax Consortium
 *
 *  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.
 */

/**
 * @fileoverview  Implements the CHTMLmfrac wrapper for the MmlMfrac object
 *
 * @author dpvc@mathjax.org (Davide Cervone)
 */

import {CHTMLWrapper, CHTMLConstructor} from '../Wrapper.js';
import {CommonMfracMixin} from '../../common/Wrappers/mfrac.js';
import {MmlMfrac} from '../../../core/MmlTree/MmlNodes/mfrac.js';
import {CHTMLmo} from './mo.js';
import {StyleList} from '../../../util/StyleList.js';
import {OptionList} from '../../../util/Options.js';

/*****************************************************************/
/**
 * The CHTMLmfrac wrapper for the MmlMfrac object
 *
 * @template N  The HTMLElement node class
 * @template T  The Text node class
 * @template D  The Document class
 */
export class CHTMLmfrac<N, T, D> extends CommonMfracMixin<CHTMLConstructor<any, any, any>>(CHTMLWrapper) {

  /**
   * The mfrac wrapper
   */
  public static kind = MmlMfrac.prototype.kind;

  /**
   * @override
   */
  public static styles: StyleList = {
    'mjx-frac': {
      display: 'inline-block',
      'vertical-align': '0.17em',  // axis_height - 1.5 * rule_thickness
      padding: '0 .22em'           // nulldelimiterspace + .1 (for line's -.1em margin)
    },
    'mjx-frac[type="d"]': {
      'vertical-align': '.04em'    // axis_height - 3.5 * rule_thickness
    },
    'mjx-frac[delims]': {
      padding: '0 .1em'            // .1 (for line's -.1em margin)
    },
    'mjx-frac[atop]': {
      padding: '0 .12em'           // nulldelimiterspace
    },
    'mjx-frac[atop][delims]': {
      padding: '0'
    },
    'mjx-dtable': {
      display: 'inline-table',
      width: '100%'
    },
    'mjx-dtable > *': {
      'font-size': '2000%'
    },
    'mjx-dbox': {
      display: 'block',
      'font-size': '5%'
    },
    'mjx-num': {
      display: 'block',
      'text-align': 'center'
    },
    'mjx-den': {
      display: 'block',
      'text-align': 'center'
    },
    'mjx-mfrac[bevelled] > mjx-num': {
      display: 'inline-block'
    },
    'mjx-mfrac[bevelled] > mjx-den': {
      display: 'inline-block'
    },

    'mjx-den[align="right"], mjx-num[align="right"]': {
      'text-align': 'right'
    },
    'mjx-den[align="left"], mjx-num[align="left"]': {
      'text-align': 'left'
    },

    'mjx-nstrut': {
      display: 'inline-block',
      height: '.054em',              // num2 - a - 1.5t
      width: 0,
      'vertical-align': '-.054em'    // ditto
    },
    'mjx-nstrut[type="d"]': {
      height: '.217em',              // num1 - a - 3.5t
      'vertical-align': '-.217em',   // ditto
    },
    'mjx-dstrut': {
      display: 'inline-block',
      height: '.505em',              // denom2 + a - 1.5t
      width: 0
    },
    'mjx-dstrut[type="d"]': {
      height: '.726em',              // denom1 + a - 3.5t
    },

    'mjx-line': {
      display: 'block',
      'box-sizing': 'border-box',
      'min-height': '1px',
      height: '.06em',               // t = rule_thickness
      'border-top': '.06em solid',   // t
      margin: '.06em -.1em',         // t
      overflow: 'hidden'
    },
    'mjx-line[type="d"]': {
      margin: '.18em -.1em'          // 3t
    }

  };

  /**
   * An mop element to use for bevelled fractions
   */
  public bevel: CHTMLmo<N, T, D>;

  /************************************************/

  /**
   * @override
   */
  public toCHTML(parent: N) {
    this.standardCHTMLnode(parent);
    const {linethickness, bevelled} = this.node.attributes.getList('linethickness', 'bevelled');
    const display = this.isDisplay();
    if (bevelled) {
      this.makeBevelled(display);
    } else {
      const thickness = this.length2em(String(linethickness), .06);
      if (thickness === 0) {
        this.makeAtop(display);
      } else {
        this.makeFraction(display, thickness);
      }
    }
  }

  /************************************************/

  /**
   * @param {boolean} display  True when fraction is in display mode
   * @param {number} t         The rule line thickness
   */
  protected makeFraction(display: boolean, t: number) {
    const {numalign, denomalign} = this.node.attributes.getList('numalign', 'denomalign');
    const withDelims = this.node.getProperty('withDelims');
    //
    // Attributes to set for the different elements making up the fraction
    //
    const attr = (display ? {type: 'd'} : {}) as OptionList;
    const fattr = (withDelims ? {...attr, delims: 'true'} : {...attr}) as OptionList;
    const nattr = (numalign !== 'center' ? {align: numalign} : {}) as OptionList;
    const dattr = (denomalign !== 'center' ? {align: denomalign} : {}) as OptionList;
    const dsattr = {...attr}, nsattr = {...attr};
    //
    // Set the styles to handle the linethickness, if needed
    //
    const tex = this.font.params;
    if (t !== .06) {
      const a = tex.axis_height;
      const tEm = this.em(t);
      const {T, u, v} = this.getTUV(display, t);
      const m = (display ? this.em(3 * t) : tEm) + ' -.1em';
      attr.style = {height: tEm, 'border-top': tEm + ' solid', margin: m};
      const nh = this.em(Math.max(0, u));
      nsattr.style = {height: nh, 'vertical-align': '-' + nh};
      dsattr.style = {height: this.em(Math.max(0, v))};
      fattr.style  = {'vertical-align': this.em(a - T)};
    }
    //
    // Create the DOM tree
    //
    let num, den;
    this.adaptor.append(this.chtml, this.html('mjx-frac', fattr, [
      num = this.html('mjx-num', nattr, [this.html('mjx-nstrut', nsattr)]),
      this.html('mjx-dbox', {}, [
        this.html('mjx-dtable', {}, [
          this.html('mjx-line', attr),
          this.html('mjx-row', {}, [
            den = this.html('mjx-den', dattr, [this.html('mjx-dstrut', dsattr)])
          ])
        ])
      ])
    ]));
    this.childNodes[0].toCHTML(num);
    this.childNodes[1].toCHTML(den);
  }

  /************************************************/

  /**
   * @param {boolean} display  True when fraction is in display mode
   */
  protected makeAtop(display: boolean) {
    const {numalign, denomalign} = this.node.attributes.getList('numalign', 'denomalign');
    const withDelims = this.node.getProperty('withDelims');
    //
    // Attributes to set for the different elements making up the fraction
    //
    const attr = (display ? {type: 'd', atop: true} : {atop: true}) as OptionList;
    const fattr = (withDelims ? {...attr, delims: true} : {...attr}) as OptionList;
    const nattr = (numalign !== 'center' ? {align: numalign} : {}) as OptionList;
    const dattr = (denomalign !== 'center' ? {align: denomalign} : {}) as OptionList;
    //
    // Determine sparation and positioning
    //
    const {v, q} = this.getUVQ(display);
    nattr.style = {'padding-bottom': this.em(q)};
    fattr.style = {'vertical-align': this.em(-v)};
    //
    // Create the DOM tree
    //
    let num, den;
    this.adaptor.append(this.chtml, this.html('mjx-frac', fattr, [
      num = this.html('mjx-num', nattr),
      den = this.html('mjx-den', dattr)
    ]));
    this.childNodes[0].toCHTML(num);
    this.childNodes[1].toCHTML(den);
  }

  /************************************************/

  /**
   * @param {boolean} display  True when fraction is in display mode
   */
  protected makeBevelled(display: boolean) {
    const adaptor = this.adaptor;
    //
    //  Create HTML tree
    //
    adaptor.setAttribute(this.chtml, 'bevelled', 'ture');
    const num = adaptor.append(this.chtml, this.html('mjx-num'));
    this.childNodes[0].toCHTML(num);
    this.bevel.toCHTML(this.chtml);
    const den = adaptor.append(this.chtml, this.html('mjx-den'));
    this.childNodes[1].toCHTML(den);
    //
    //  Place the parts
    //
    const {u, v, delta, nbox, dbox} = this.getBevelData(display);
    if (u) {
      adaptor.setStyle(num, 'verticalAlign', this.em(u / nbox.scale));
    }
    if (v) {
      adaptor.setStyle(den, 'verticalAlign', this.em(v / dbox.scale));
    }
    const dx = this.em(-delta / 2);
    adaptor.setStyle(this.bevel.chtml, 'marginLeft', dx);
    adaptor.setStyle(this.bevel.chtml, 'marginRight', dx);
  }

}