myscript-math-exports.js

/* eslint-disable no-underscore-dangle,no-undef,class-methods-use-this */
import { html, PolymerElement } from '@polymer/polymer';
import './katex-component';

/**
`myscript-math-exports` is a component to display `myscript-math-web` exports.

    <myscript-math-exports
        exports="myscript-math-web.exports">
    </myscript-math-exports>

Custom property | Description | Default
----------------|-------------|----------
`--myscript-math-exports-color` | Math exports color | #000000
*/
class MyScriptMathExports extends PolymerElement {
  static get template() {
    return html`
        <style>
            :host {
                --myscript-math-exports-color: #000000;

                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                color: var(--myscript-math-exports-color);
                min-height: 60px;
                overflow: auto;
            }

            .export {
                flex-grow: 1;
            }
        </style>
        <template is="dom-if" if="[[ _displaymath(resulttypes, mimetypes) ]]">
            <katex-component value="[[ _getLatexCleaned(exports) ]]" class="export math">
                [[ _getLatexCleaned(exports) ]]
            </katex-component>
        </template>
        <template is="dom-if" if="[[ _displaylatex(resulttypes, mimetypes) ]]">
            <div class="export latex">[[ _getLatex(exports) ]]</div>
        </template>
        <template is="dom-if" if="[[ _displaymathml(resulttypes, mimetypes) ]]">
            <div class="export mathml">[[ _getMathml(exports) ]]</div>
        </template>
        <template is="dom-if" if="[[ _displayofficeopenxml(resulttypes, mimetypes) ]]">
            <div class="export mathofficexml">[[ _getOfficeopenxml(exports) ]]</div>
        </template>
        <template is="dom-if" if="[[ _displaysymboltree(resulttypes, mimetypes) ]]">
            <div class="export symboltree">[[ _getSymboltree(exports) ]]</div>
        </template>
`;
  }

  static get is() {
    return 'myscript-math-exports';
  }

  static get properties() {
    return {
      /**
           * Math export types (LATEX, MATHML or SYMBOLTREE).
           * <b>Warning</b>: v3 only, for v4, use mimetypes instead
           * @type {Array<String>}
           */
      resulttypes: {
        type: Array,
        value: [],
      },
      /**
           * Math export types (application/x-latex, application/mathml+xml).
           * @type {Array<String>}
           */
      mimetypes: {
        type: Array,
        value: [],
      },
      /**
           * Exports result.
           * @attribute exports
           * @type {Object<String, Object>}.
           */
      exports: {
        type: Object,
        notify: true,
      },
    };
  }

  _getLatex(exports) {
    let exp = exports ? exports['application/x-latex'] || exports.LATEX || exports.latex || '' : '';
    // In case we have only one number being recognize like 1
    if (typeof exp === 'number') {
      exp = exp.toString();
    }
    return exp;
  }

  _getLatexCleaned(exports) {
    if (this._getLatex(exports).includes('\\\\')) {
      const steps = '\\begin{align*}' + this._getLatex(exports) + '\\end{align*}';
      return steps.replace('\\overrightarrow', '\\vec')
        .replace('\\begin{aligned}', '')
        .replace('\\end{aligned}', '')
        .replace('\\llbracket', '\\lbracket')
        .replace('\\rrbracket', '\\rbracket')
        .replace('\\widehat', '\\hat')
        .replace(new RegExp('(align.{1})', 'g'), 'aligned');
    }
    return this._getLatex(exports)
      .replace('\\overrightarrow', '\\vec')
      .replace('\\llbracket', '\\lbracket')
      .replace('\\rrbracket', '\\rbracket')
      .replace('\\widehat', '\\hat')
      .replace(new RegExp('(align.{1})', 'g'), 'aligned');
  }

  _getMathml(exports) {
    return exports ? exports['application/mathml+xml'] || exports.MATHML || exports.mathml || '' : '';
  }

  _getOfficeopenxml(exports) {
    return exports ? exports['application/mathofficeXML'] || exports.OFFICEOPENXMLMATH || exports.mathofficeXML || '' : '';
  }

  _getSymboltree(exports) {
    return exports ? JSON.stringify(exports['application/vnd.myscript.jiix'] || exports.SYMBOLTREE || '') : '';
  }

  _displaymath(resulttypes, mimetypes) {
    return !((resulttypes.length > 0) || (mimetypes.length > 0));
  }

  _displaylatex(resulttypes, mimetypes) {
    return (resulttypes.indexOf('LATEX') > -1) || (mimetypes.indexOf('application/x-latex') > -1);
  }

  _displaymathml(resulttypes, mimetypes) {
    return (resulttypes.indexOf('MATHML') > -1) || (mimetypes.indexOf('application/mathml+xml') > -1);
  }

  _displayofficeopenxml(resulttypes, mimetypes) {
    return (resulttypes.indexOf('OFFICEOPENXMLMATH') > -1) || (mimetypes.indexOf('application/mathofficeXML') > -1);
  }

  _displaysymboltree(resulttypes, mimetypes) {
    return (resulttypes.indexOf('SYMBOLTREE') > -1) || (mimetypes.indexOf('application/vnd.myscript.jiix') > -1);
  }
}

customElements.define(MyScriptMathExports.is, MyScriptMathExports);