app/node_modules/mathjax-full/ts/output/chtml/Wrappers/menclose.ts

/*************************************************************
 *
 *  Copyright (c) 2018-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 CHTMLmenclose wrapper for the MmlMenclose object
 *
 * @author dpvc@mathjax.org (Davide Cervone)
 */

import {CHTMLWrapper, CHTMLConstructor} from '../Wrapper.js';
import {CommonMencloseMixin} from '../../common/Wrappers/menclose.js';
import {CHTMLmsqrt} from './msqrt.js';
import * as Notation from '../Notation.js';
import {MmlMenclose} from '../../../core/MmlTree/MmlNodes/menclose.js';
import {OptionList} from '../../../util/Options.js';
import {StyleList} from '../../../util/StyleList.js';
import {em} from '../../../util/lengths.js';

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

/**
 *  The skew angle needed for the arrow head pieces
 */
function Angle(x: number, y: number) {
  return Math.atan2(x, y).toFixed(3).replace(/\.?0+$/, '');
}

const ANGLE = Angle(Notation.ARROWDX, Notation.ARROWY);

/*****************************************************************/
/**
 * The CHTMLmenclose wrapper for the MmlMenclose object
 *
 * @template N  The HTMLElement node class
 * @template T  The Text node class
 * @template D  The Document class
 */
// @ts-ignore
export class CHTMLmenclose<N, T, D> extends
CommonMencloseMixin<
  CHTMLWrapper<any, any, any>,
  CHTMLmsqrt<any, any, any>,
  any,
  CHTMLConstructor<any, any, any>
>(CHTMLWrapper) {

  /**
   * The menclose wrapper
   */
  public static kind = MmlMenclose.prototype.kind;

  /**
   * Styles needed for the various notations
   */
  public static styles: StyleList = {
    'mjx-menclose': {
      position: 'relative'
    },
    'mjx-menclose > mjx-dstrike': {
      display: 'inline-block',
      left: 0, top: 0,
      position: 'absolute',
      'border-top': Notation.SOLID,
      'transform-origin': 'top left'
    },
    'mjx-menclose > mjx-ustrike': {
      display: 'inline-block',
      left: 0, bottom: 0,
      position: 'absolute',
      'border-top': Notation.SOLID,
      'transform-origin': 'bottom left'
    },
    'mjx-menclose > mjx-hstrike': {
      'border-top': Notation.SOLID,
      position: 'absolute',
      left: 0, right: 0, bottom: '50%',
      transform: 'translateY(' + em(Notation.THICKNESS / 2) + ')'
    },
    'mjx-menclose > mjx-vstrike': {
      'border-left': Notation.SOLID,
      position: 'absolute',
      top: 0, bottom: 0, right: '50%',
      transform: 'translateX(' + em(Notation.THICKNESS / 2) + ')'
    },
    'mjx-menclose > mjx-rbox': {
      position: 'absolute',
      top: 0, bottom: 0, right: 0, left: 0,
      'border': Notation.SOLID,
      'border-radius': em(Notation.THICKNESS + Notation.PADDING)
    },
    'mjx-menclose > mjx-cbox': {
      position: 'absolute',
      top: 0, bottom: 0, right: 0, left: 0,
      'border': Notation.SOLID,
      'border-radius': '50%'
    },
    'mjx-menclose > mjx-arrow': {
      position: 'absolute',
      left: 0, bottom: '50%', height: 0, width: 0
    },
    'mjx-menclose > mjx-arrow > *': {
      display: 'block',
      position: 'absolute',
      'transform-origin': 'bottom',
      'border-left': em(Notation.THICKNESS * Notation.ARROWX) + ' solid',
      'border-right': 0,
      'box-sizing': 'border-box'
    },
    'mjx-menclose > mjx-arrow > mjx-aline': {
      left: 0, top: em(-Notation.THICKNESS / 2),
      right: em(Notation.THICKNESS * (Notation.ARROWX - 1)), height: 0,
      'border-top': em(Notation.THICKNESS) + ' solid',
      'border-left': 0
    },
    'mjx-menclose > mjx-arrow[double] > mjx-aline': {
      left: em(Notation.THICKNESS * (Notation.ARROWX - 1)), height: 0,
    },
    'mjx-menclose > mjx-arrow > mjx-rthead': {
      transform: 'skewX(' + ANGLE + 'rad)',
      right: 0, bottom: '-1px',
      'border-bottom': '1px solid transparent',
      'border-top': em(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent'
    },
    'mjx-menclose > mjx-arrow > mjx-rbhead': {
      transform: 'skewX(-' + ANGLE + 'rad)',
      'transform-origin': 'top',
      right: 0, top: '-1px',
      'border-top': '1px solid transparent',
      'border-bottom': em(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent'
    },
    'mjx-menclose > mjx-arrow > mjx-lthead': {
      transform: 'skewX(-' + ANGLE + 'rad)',
      left: 0, bottom: '-1px',
      'border-left': 0,
      'border-right': em(Notation.THICKNESS * Notation.ARROWX) + ' solid',
      'border-bottom': '1px solid transparent',
      'border-top': em(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent'
    },
    'mjx-menclose > mjx-arrow > mjx-lbhead': {
      transform: 'skewX(' + ANGLE + 'rad)',
      'transform-origin': 'top',
      left: 0, top: '-1px',
      'border-left': 0,
      'border-right': em(Notation.THICKNESS * Notation.ARROWX) + ' solid',
      'border-top': '1px solid transparent',
      'border-bottom': em(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent'
    },
    'mjx-menclose > dbox': {
      position: 'absolute',
      top: 0, bottom: 0, left: em(-1.5 * Notation.PADDING),
      width: em(3 * Notation.PADDING),
      border: em(Notation.THICKNESS) + ' solid',
      'border-radius': '50%',
      'clip-path': 'inset(0 0 0 ' + em(1.5 * Notation.PADDING) + ')',
      'box-sizing': 'border-box'
    }
  };

  /**
   *  The definitions of the various notations
   */
  public static notations: Notation.DefList<CHTMLmenclose<any, any, any>, any> = new Map([

    Notation.Border('top'),
    Notation.Border('right'),
    Notation.Border('bottom'),
    Notation.Border('left'),

    Notation.Border2('actuarial', 'top', 'right'),
    Notation.Border2('madruwb', 'bottom', 'right'),

    Notation.DiagonalStrike('up', 1),
    Notation.DiagonalStrike('down', -1),

    ['horizontalstrike', {
      renderer: Notation.RenderElement('hstrike', 'Y'),
      bbox: (node) => [0, node.padding, 0, node.padding]
    }],

    ['verticalstrike', {
      renderer: Notation.RenderElement('vstrike', 'X'),
      bbox: (node) => [node.padding, 0, node.padding, 0]
    }],

    ['box', {
      renderer: (node, child) => {
        node.adaptor.setStyle(child, 'border', node.em(node.thickness) + ' solid');
      },
      bbox: Notation.fullBBox,
      border: Notation.fullBorder,
      remove: 'left right top bottom'
    }],

    ['roundedbox', {
      renderer: Notation.RenderElement('rbox'),
      bbox: Notation.fullBBox
    }],

    ['circle', {
      renderer: Notation.RenderElement('cbox'),
      bbox: Notation.fullBBox
    }],

    ['phasorangle', {
      //
      // Use a bottom border and an upward strike properly angled
      //
      renderer: (node, child) => {
        const {h, d} = node.getBBox();
        const [a, W] = node.getArgMod(1.75 * node.padding, h + d);
        const t = node.thickness * Math.sin(a) * .9;
        node.adaptor.setStyle(child, 'border-bottom', node.em(node.thickness) + ' solid');
        const strike = node.adjustBorder(node.html('mjx-ustrike', {style: {
          width: node.em(W),
          transform: 'translateX(' + node.em(t) + ') rotate(' + node.fixed(-a) + 'rad)',
        }}));
        node.adaptor.append(node.chtml, strike);
      },
      bbox: (node) => {
        const p = node.padding / 2;
        const t = node.thickness;
        return [2 * p, p, p + t, 3 * p + t];
      },
      border: (node) => [0, 0, node.thickness, 0],
      remove: 'bottom'
    }],

    Notation.Arrow('up'),
    Notation.Arrow('down'),
    Notation.Arrow('left'),
    Notation.Arrow('right'),

    Notation.Arrow('updown'),
    Notation.Arrow('leftright'),

    Notation.DiagonalArrow('updiagonal'),  // backward compatibility
    Notation.DiagonalArrow('northeast'),
    Notation.DiagonalArrow('southeast'),
    Notation.DiagonalArrow('northwest'),
    Notation.DiagonalArrow('southwest'),

    Notation.DiagonalArrow('northeastsouthwest'),
    Notation.DiagonalArrow('northwestsoutheast'),

    ['longdiv', {
      //
      // Use a line along the top followed by a half ellipse at the left
      //
      renderer: (node, child) => {
        const adaptor = node.adaptor;
        adaptor.setStyle(child, 'border-top', node.em(node.thickness) + ' solid');
        const arc = adaptor.append(node.chtml, node.html('dbox'));
        const t = node.thickness;
        const p = node.padding;
        if (t !== Notation.THICKNESS) {
          adaptor.setStyle(arc, 'border-width', node.em(t));
        }
        if (p !== Notation.PADDING) {
          adaptor.setStyle(arc, 'left', node.em(-1.5 * p));
          adaptor.setStyle(arc, 'width', node.em(3 * p));
          adaptor.setStyle(arc, 'clip-path', 'inset(0 0 0 ' + node.em(1.5 * p) + ')');
        }
      },
      bbox: (node) => {
        const p = node.padding;
        const t = node.thickness;
        return [p + t, p, p, 2 * p + t / 2];
      }
    }],

    ['radical', {
      //
      //  Use the msqrt rendering, but remove the extra space due to the radical
      //    (it is added in at the end, so other notations overlap the root)
      //
      renderer: (node, child) => {
        node.msqrt.toCHTML(child);
        const TRBL = node.sqrtTRBL();
        node.adaptor.setStyle(node.msqrt.chtml, 'margin', TRBL.map(x => node.em(-x)).join(' '));
      },
      //
      //  Create the needed msqrt wrapper
      //
      init: (node) => {
        node.msqrt = node.createMsqrt(node.childNodes[0]);
      },
      //
      //  Add back in the padding for the square root
      //
      bbox: (node) => node.sqrtTRBL(),
      //
      //  This notation replaces the child
      //
      renderChild: true
    }]

  ] as Notation.DefPair<CHTMLmenclose<any, any, any>, any>[]);

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

  /**
   * @override
   */
  public toCHTML(parent: N) {
    const adaptor = this.adaptor;
    const chtml = this.standardCHTMLnode(parent);
    //
    //  Create a box for the child (that can have padding and borders added by the notations)
    //    and add the child HTML into it
    //
    const block = adaptor.append(chtml, this.html('mjx-box')) as N;
    if (this.renderChild) {
      this.renderChild(this, block);
    } else {
      this.childNodes[0].toCHTML(block);
    }
    //
    //  Render all the notations for this menclose element
    //
    for (const name of Object.keys(this.notations)) {
      const notation = this.notations[name];
      !notation.renderChild && notation.renderer(this, block);
    }
    //
    //  Add the needed padding, if any
    //
    const pbox = this.getPadding();
    for (const name of Notation.sideNames) {
      const i = Notation.sideIndex[name];
      pbox[i] > 0 && adaptor.setStyle(block, 'padding-' + name, this.em(pbox[i]));
    }
  }

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

  /**
   * Create an arrow using HTML elements
   *
   * @param {number} w        The length of the arrow
   * @param {number} a        The angle for the arrow
   * @param {boolean} double  True if this is a double-headed arrow
   * @param {string} offset   'X' for vertical arrow, 'Y' for horizontal
   * @param {number} dist     Distance to translate in the offset direction
   * @return {N}              The newly created arrow
   */
  public arrow(w: number, a: number, double: boolean, offset: string = '', dist: number = 0): N {
    const W = this.getBBox().w;
    const style = {width: this.em(w)} as OptionList;
    if (W !== w) {
      style.left = this.em((W - w) / 2);
    }
    if (a) {
      style.transform = 'rotate(' + this.fixed(a) + 'rad)';
    }
    const arrow = this.html('mjx-arrow', {style: style}, [
      this.html('mjx-aline'), this.html('mjx-rthead'), this.html('mjx-rbhead')
    ]);
    if (double) {
      this.adaptor.append(arrow, this.html('mjx-lthead'));
      this.adaptor.append(arrow, this.html('mjx-lbhead'));
      this.adaptor.setAttribute(arrow, 'double', 'true');
    }
    this.adjustArrow(arrow, double);
    this.moveArrow(arrow, offset, dist);
    return arrow;
  }

  /**
   * @param {N} arrow          The arrow whose thickness and arrow head is to be adjusted
   * @param {boolean} double   True if the arrow is double-headed
   */
  protected adjustArrow(arrow: N, double: boolean) {
    const t = this.thickness;
    const head = this.arrowhead;
    if (head.x === Notation.ARROWX && head.y === Notation.ARROWY &&
        head.dx === Notation.ARROWDX && t === Notation.THICKNESS) return;
    const [x, y] = [t * head.x, t * head.y].map(x => this.em(x));
    const a = Angle(head.dx, head.y);
    const [line, rthead, rbhead, lthead, lbhead] = this.adaptor.childNodes(arrow);
    this.adjustHead(rthead, [y, '0', '1px', x], a);
    this.adjustHead(rbhead, ['1px', '0', y, x], '-' + a);
    this.adjustHead(lthead, [y, x, '1px', '0'], '-' + a);
    this.adjustHead(lbhead, ['1px', x, y, '0'], a);
    this.adjustLine(line, t, head.x, double);
  }

  /**
   * @param {N} head            The piece of arrow head to be adjusted
   * @param {string[]} border   The border sizes [T, R, B, L]
   * @param {string} a          The skew angle for the piece
   */
  protected adjustHead(head: N, border: string[], a: string) {
    if (head) {
      this.adaptor.setStyle(head, 'border-width', border.join(' '));
      this.adaptor.setStyle(head, 'transform', 'skewX(' + a + 'rad)');
    }
  }

  /**
   * @param {N} line           The arrow shaft to be adjusted
   * @param {number} t         The arrow shaft thickness
   * @param {number} x         The arrow head x size
   * @param {boolean} double   True if the arrow is double-headed
   */
  protected adjustLine(line: N, t: number, x: number, double: boolean) {
    this.adaptor.setStyle(line, 'borderTop', this.em(t) + ' solid');
    this.adaptor.setStyle(line, 'top', this.em(-t / 2));
    this.adaptor.setStyle(line, 'right', this.em(t * (x - 1)));
    if (double) {
      this.adaptor.setStyle(line, 'left', this.em(t * (x - 1)));
    }
  }

  /**
   * @param {N} arrow        The arrow whose position is to be adjusted
   * @param {string} offset  The direction to move the arrow
   * @param {number} d       The distance to translate in that direction
   */
  protected moveArrow(arrow: N, offset: string, d: number) {
    if (!d) return;
    const transform = this.adaptor.getStyle(arrow, 'transform');
    this.adaptor.setStyle(
      arrow, 'transform', `translate${offset}(${this.em(-d)})${(transform ? ' ' + transform : '')}`
    );
  }

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

  /**
   * @param {N} node   The HTML element whose border width must be
   *                   adjusted if the thickness isn't the default
   * @return {N}       The adjusted element
   */
  public adjustBorder(node: N): N {
    if (this.thickness !== Notation.THICKNESS) {
      this.adaptor.setStyle(node, 'borderWidth', this.em(this.thickness));
    }
    return node;
  }

  /**
   * @param {N} shape   The svg element whose stroke-thickness must be
   *                    adjusted if the thickness isn't the default
   * @return {N}        The adjusted element
   */
  public adjustThickness(shape: N): N {
    if (this.thickness !== Notation.THICKNESS) {
      this.adaptor.setStyle(shape, 'strokeWidth', this.fixed(this.thickness));
    }
    return shape;
  }

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

  /**
   * @param {number} m    A number to be shown with a fixed number of digits
   * @param {number=} n   The number of digits to use
   * @return {string}     The formatted number
   */
  public fixed(m: number, n: number = 3): string {
    if (Math.abs(m) < .0006) {
      return '0';
    }
    return m.toFixed(n).replace(/\.?0+$/, '');
  }

  /**
   * @override
   * (make it public so it can be called by the notation functions)
   */
  public em(m: number) {
    return super.em(m);
  }

}