/************************************************************* * * Copyright (c) 2018 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, StringMap} from '../Wrapper.js'; import {CommonMenclose, 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 {MmlNode, AbstractMmlNode, AttributeList} from '../../../core/MmlTree/MmlNode.js'; import {OptionList} from '../../../util/Options.js'; import {StyleList, StyleData} from '../../common/CssStyles.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 */ export class CHTMLmenclose extends CommonMencloseMixin, CHTMLmsqrt, any, CHTMLConstructor>(CHTMLWrapper) { 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, 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 {w, 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, 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 * @return {N} The newly created arrow */ public arrow(w: number, a: number, double: boolean = false) { 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); 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, dx] = [t * head.x, t * head.y, t * head.dx].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} 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) { 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) { 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 */ fixed(m: number, n: number = 3) { 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); } }