app/node_modules/mathjax-full/ts/output/svg/Wrappers/mtable.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 SVGmtable wrapper for the MmlMtable object
 *
 * @author dpvc@mathjax.org (Davide Cervone)
 */

import {SVGWrapper, SVGConstructor} from '../Wrapper.js';
import {SVGWrapperFactory} from '../WrapperFactory.js';
import {CommonMtableMixin} from '../../common/Wrappers/mtable.js';
import {SVGmtr} from './mtr.js';
import {SVGmtd} from './mtd.js';
import {MmlMtable} from '../../../core/MmlTree/MmlNodes/mtable.js';
import {MmlNode} from '../../../core/MmlTree/MmlNode.js';
import {OptionList} from '../../../util/Options.js';
import {StyleList} from '../../../util/StyleList.js';

const CLASSPREFIX = 'mjx-';

/*****************************************************************/
/**
 * The SVGmtable wrapper for the MmlMtable object
 *
 * @template N  The HTMLElement node class
 * @template T  The Text node class
 * @template D  The Document class
 */
export class SVGmtable<N, T, D> extends
CommonMtableMixin<SVGmtd<any, any, any>, SVGmtr<any, any, any>, SVGConstructor<any, any, any>>(SVGWrapper) {

  /**
   * The mtable wrapper
   */
  public static kind = MmlMtable.prototype.kind;

  /**
   * @override
   */
  public static styles: StyleList = {
    'g[data-mml-node="mtable"] > line[data-line], svg[data-table] > g > line[data-line]': {
      'stroke-width': '70px',
      fill: 'none'
    },
    'g[data-mml-node="mtable"] > rect[data-frame], svg[data-table] > g > rect[data-frame]': {
      'stroke-width': '70px',
      fill: 'none'
    },
    'g[data-mml-node="mtable"] > .mjx-dashed, svg[data-table] > g > .mjx-dashed': {
      'stroke-dasharray': '140'
    },
    'g[data-mml-node="mtable"] > .mjx-dotted, svg[data-table] > g > .mjx-dotted': {
      'stroke-linecap': 'round',
      'stroke-dasharray': '0,140'
    },
    'g[data-mml-node="mtable"] > g > svg': {
      overflow: 'visible'
    }
  };

  /**
   * The column for labels
   */
  public labels: N;

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

  /**
   * @override
   */
  constructor(factory: SVGWrapperFactory<N, T, D>, node: MmlNode, parent: SVGWrapper<N, T, D> = null) {
    super(factory, node, parent);
    const def: OptionList = {'data-labels': true};
    if (this.isTop) {
      def.transform = 'matrix(1 0 0 -1 0 0)';
    }
    this.labels = this.svg('g', def);
  }

  /**
   * @override
   */
  public toSVG(parent: N) {
    const svg = this.standardSVGnode(parent);
    this.placeRows(svg);
    this.handleColumnLines(svg);
    this.handleRowLines(svg);
    this.handleFrame(svg);
    const dx = this.handlePWidth(svg);
    this.handleLabels(svg, parent, dx);
  }

  /**
   * @param {N} svg  The container in which to place the rows
   */
  protected placeRows(svg: N) {
    const equal = this.node.attributes.get('equalrows') as boolean;
    const {H, D} = this.getTableData();
    const HD = this.getEqualRowHeight();
    const rSpace = this.getRowHalfSpacing();
    const rLines = [this.fLine, ...this.rLines, this.fLine];
    let y = this.getBBox().h - rLines[0];
    for (let i = 0; i < this.numRows; i++) {
      const row = this.childNodes[i];
      [row.H, row.D] = this.getRowHD(equal, HD, H[i], D[i]);
      [row.tSpace, row.bSpace] = [rSpace[i], rSpace[i + 1]];
      [row.tLine, row.bLine] = [rLines[i], rLines[i + 1]];
      row.toSVG(svg);
      row.place(0, y - rSpace[i] - row.H);
      y -= rSpace[i] + row.H + row.D + rSpace[i + 1] + rLines[i + 1];
    }
  }

  /**
   * @param {boolean} equal   True for equal-height rows
   * @param {number} HD       The height of equal-height rows
   * @param {number} H        The natural height of the row
   * @param {number} D        The natural depth of the row
   * @returns {number[]}      The (possibly scaled) height and depth to use
   */
  protected getRowHD(equal: boolean, HD: number, H: number, D: number): [number, number] {
    return (equal ? [(HD + H - D) / 2, (HD - H + D) / 2] : [H, D]);
  }

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

  /**
   * @override
   */
  public handleColor() {
    super.handleColor();
    const rect = this.firstChild();
    if (rect) {
      this.adaptor.setAttribute(rect, 'width', this.fixed(this.getWidth()));
    }
  }

  /**
   * Add vertical lines between columns
   *
   * @param {N} svg   The container for the table
   */
  protected handleColumnLines(svg: N) {
    if (this.node.attributes.get('columnlines') === 'none') return;
    const lines = this.getColumnAttributes('columnlines');
    if (!lines) return;
    const cSpace = this.getColumnHalfSpacing();
    const cLines = this.cLines;
    const cWidth = this.getComputedWidths();
    let x = this.fLine;
    for (let i = 0; i < lines.length; i++) {
      x += cSpace[i] + cWidth[i] + cSpace[i + 1];
      if (lines[i] !== 'none') {
        this.adaptor.append(svg, this.makeVLine(x, lines[i], cLines[i]));
      }
      x += cLines[i];
    }
  }

  /**
   * Add horizontal lines between rows
   *
   * @param {N} svg   The container for the table
   */
  protected handleRowLines(svg: N) {
    if (this.node.attributes.get('rowlines') === 'none') return;
    const lines = this.getRowAttributes('rowlines');
    if (!lines) return;
    const equal = this.node.attributes.get('equalrows') as boolean;
    const {H, D} = this.getTableData();
    const HD = this.getEqualRowHeight();
    const rSpace = this.getRowHalfSpacing();
    const rLines = this.rLines;
    let y = this.getBBox().h - this.fLine;
    for (let i = 0; i < lines.length; i++) {
      const [rH, rD] = this.getRowHD(equal, HD, H[i], D[i]);
      y -= rSpace[i] + rH + rD + rSpace[i + 1];
      if (lines[i] !== 'none') {
        this.adaptor.append(svg, this.makeHLine(y, lines[i], rLines[i]));
      }
      y -= rLines[i];
    }

  }

  /**
   * Add a frame to the mtable, if needed
   *
   * @param {N} svg   The container for the table
   */
  protected handleFrame(svg: N) {
    if (this.frame && this.fLine) {
      const {h, d, w} = this.getBBox();
      const style = this.node.attributes.get('frame') as string;
      this.adaptor.append(svg, this.makeFrame(w, h, d, style));
    }
  }

  /**
   * @returns {number}   The x-adjustement needed to handle the true size of percentage-width tables
   */
  protected handlePWidth(svg: N): number {
    if (!this.pWidth) {
      return 0;
    }
    const {w, L, R} = this.getBBox();
    const W = L + this.pWidth + R;
    const align = this.getAlignShift()[0];
    const CW = Math.max(this.isTop ? W : 0, this.container.getWrapWidth(this.containerI)) - L - R;
    const dw = w - (this.pWidth > CW ? CW : this.pWidth);
    const dx = (align === 'left' ? 0 : align === 'right' ? dw : dw / 2);
    if (dx) {
      const table = this.svg('g', {}, this.adaptor.childNodes(svg));
      this.place(dx, 0, table);
      this.adaptor.append(svg, table);
    }
    return dx;
  }

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

  /**
   * @param {string} style   The line style whose class is to be obtained
   * @returns {string}       The class name for the style
   */
  protected lineClass(style: string): string {
    return CLASSPREFIX + style;
  }

  /**
   * @param {number} w       The width of the frame
   * @param {number} h       The height of the frame
   * @param {number} d       The depth of the frame
   * @param {string} style   The border style for the frame
   * @returns {N}            The SVG element for the frame
   */
  protected makeFrame(w: number, h: number, d: number, style: string): N {
    const t = this.fLine;
    return this.svg('rect', this.setLineThickness(t, style, {
      'data-frame': true, 'class': this.lineClass(style),
      width: this.fixed(w - t), height: this.fixed(h + d - t),
      x: this.fixed(t / 2), y: this.fixed(t / 2 - d)
    }));
  }

  /**
   * @param {number} x       The x location of the line
   * @param {string} style   The border style for the line
   * @param {number} t       The line thickness
   * @returns {N}            The SVG element for the line
   */
  protected makeVLine(x: number, style: string, t: number): N {
    const {h, d} = this.getBBox();
    const dt = (style === 'dotted' ? t / 2 : 0);
    const X = this.fixed(x + t / 2);
    return this.svg('line', this.setLineThickness(t, style, {
      'data-line': 'v', 'class': this.lineClass(style),
      x1: X, y1: this.fixed(dt - d), x2: X, y2: this.fixed(h - dt)
    }));
  }

  /**
   * @param {number} y       The y location of the line
   * @param {string} style   The border style for the line
   * @param {number} t       The line thickness
   * @returns {N}            The SVG element for the line
   */
  protected makeHLine(y: number, style: string, t: number): N {
    const w = this.getBBox().w;
    const dt = (style === 'dotted' ? t / 2 : 0);
    const Y = this.fixed(y - t / 2);
    return this.svg('line', this.setLineThickness(t, style, {
      'data-line': 'h', 'class': this.lineClass(style),
      x1: this.fixed(dt), y1: Y, x2: this.fixed(w - dt), y2: Y
    }));
  }

  /**
   * @param {number} t                The thickness of the line
   * @param {string} style            The border style for the line
   * @param {OptionList} properties   The list of properties to modify
   * @param {OptionList}              The modified properties
   */
  protected setLineThickness(t: number, style: string, properties: OptionList) {
    if (t !== .07) {
      properties['stroke-thickness'] = this.fixed(t);
      if (style !== 'solid') {
        properties['stroke-dasharray'] = (style === 'dotted' ? '0,' : '') + this.fixed(2 * t);
      }
    }
    return properties;
  }

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

  /**
   * Handle addition of labels to the table
   *
   * @param {N} svg       The container for the table contents
   * @param {N} parent    The parent containing the the table
   * @param {number} dx   The adjustement for percentage width tables
   */
  protected handleLabels(svg: N, _parent: N, dx: number) {
    if (!this.hasLabels) return;
    const labels = this.labels;
    const attributes = this.node.attributes;
    //
    //  Set the side for the labels
    //
    const side = attributes.get('side') as string;
    //
    // Add the labels to the table
    //
    this.spaceLabels();
    //
    // Handle top-level table to make it adapt to container size
    //   but place subtables explicitly
    //
    this.isTop ? this.topTable(svg, labels, side) : this.subTable(svg, labels, side, dx);
  }

  /**
   * Add spacing elements between the label rows to align them with the rest of the table
   */
  protected spaceLabels() {
    const adaptor = this.adaptor;
    const h = this.getBBox().h;
    const L = this.getTableData().L;
    const space = this.getRowHalfSpacing();
    //
    //  Start with frame size and add in spacing, height and depth,
    //    and line thickness for each non-labeled row.
    //
    let y = h - this.fLine;
    let current = adaptor.firstChild(this.labels) as N;
    for (let i = 0; i < this.numRows; i++) {
      const row = this.childNodes[i] as SVGmtr<N, T, D>;
      if (row.node.isKind('mlabeledtr')) {
        const cell = row.childNodes[0];
        y -= space[i] + row.H;
        row.placeCell(cell, {x: 0, y: y, w: L, lSpace: 0, rSpace: 0, lLine: 0, rLine: 0});
        y -= row.D + space[i + 1] + this.rLines[i];
        current = adaptor.next(current) as N;
      } else {
        y -= space[i] + row.H + row.D + space[i + 1] + this.rLines[i];
      }
    }
  }

  /**
   * Handles tables with labels so that the label will move with the size of the container
   *
   * @param {N} svg         The SVG container for the table
   * @param {N} labels      The group of labels
   * @param {string} side   The side alignment (left or right)
   */
  protected topTable(svg: N, labels: N, side: string) {
    const adaptor = this.adaptor;
    const {h, d, w, L, R} = this.getBBox();
    const W = L + (this.pWidth || w) + R;
    const LW = this.getTableData().L;
    const [ , align, shift] = this.getPadAlignShift(side);
    const dx = shift + (align === 'right' ? -W : align === 'center' ? -W / 2 : 0) + L;
    const matrix = 'matrix(1 0 0 -1 0 0)';
    const scale = `scale(${this.jax.fixed((this.font.params.x_height * 1000) / this.metrics.ex, 2)})`;
    const transform = `translate(0 ${this.fixed(h)}) ${matrix} ${scale}`;
    let table = this.svg('svg', {
      'data-table': true,
      preserveAspectRatio: (align === 'left' ? 'xMinYMid' : align === 'right' ? 'xMaxYMid' : 'xMidYMid'),
      viewBox: [this.fixed(-dx), this.fixed(-h), 1, this.fixed(h + d)].join(' ')
    }, [
      this.svg('g', {transform: matrix}, adaptor.childNodes(svg))
    ]);
    labels = this.svg('svg', {
      'data-labels': true,
      preserveAspectRatio: (side === 'left' ? 'xMinYMid' : 'xMaxYMid'),
      viewBox: [side === 'left' ? 0 : this.fixed(LW), this.fixed(-h), 1, this.fixed(h + d)].join(' ')
    }, [labels]);
    adaptor.append(svg, this.svg('g', {transform: transform}, [table, labels]));
    this.place(-L, 0, svg);  // remove spacing for L, which is added by the parent during appending
  }

  /**
   * @param {N} svg         The SVG container for the table
   * @param {N} labels      The group of labels
   * @param {string} side   The side alignment (left or right)
   * @param {number} dx     The adjustement for percentage width tables
   */
  protected subTable(svg: N, labels: N, side: string, dx: number) {
    const adaptor = this.adaptor;
    const {w, L, R} = this.getBBox();
    const W = L + (this.pWidth || w) + R;
    const labelW = this.getTableData().L;
    const align = this.getAlignShift()[0];
    const CW = Math.max(W, this.container.getWrapWidth(this.containerI));
    this.place(side === 'left' ?
               (align === 'left' ? 0 : align === 'right' ? W - CW + dx : (W - CW) / 2 + dx) - L :
               (align === 'left' ? CW : align === 'right' ? W + dx : (CW + W) / 2 + dx) - L - labelW,
               0, labels);
    adaptor.append(svg, labels);
  }

}