/************************************************************* * * Copyright (c) 2017 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 {CommonMfrac, CommonMfracMixin} from '../../common/Wrappers/mfrac.js'; import {MmlMfrac} from '../../../core/MmlTree/MmlNodes/mfrac.js'; import {CHTMLmo} from './mo.js'; import {StyleList} from '../../common/CssStyles.js'; import {OptionList} from '../../../util/Options.js'; import {DIRECTION} from '../FontData.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 extends CommonMfracMixin>(CHTMLWrapper) { public static kind = MmlMfrac.prototype.kind; 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 } }; public bevel: CHTMLmo; /************************************************/ /** * @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)); 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); } }