|
| 1 | +/************************************************************* |
| 2 | + * |
| 3 | + * Copyright (c) 2017 The MathJax Consortium |
| 4 | + * |
| 5 | + * Licensed under the Apache License, Version 2.0 (the "License"); |
| 6 | + * you may not use this file except in compliance with the License. |
| 7 | + * You may obtain a copy of the License at |
| 8 | + * |
| 9 | + * http://www.apache.org/licenses/LICENSE-2.0 |
| 10 | + * |
| 11 | + * Unless required by applicable law or agreed to in writing, software |
| 12 | + * distributed under the License is distributed on an "AS IS" BASIS, |
| 13 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 14 | + * See the License for the specific language governing permissions and |
| 15 | + * limitations under the License. |
| 16 | + */ |
| 17 | + |
| 18 | +/** |
| 19 | + * @fileoverview Implements the CHTMLmpadded wrapper for the MmlMpadded object |
| 20 | + * |
| 21 | + * @author [email protected] (Davide Cervone) |
| 22 | + */ |
| 23 | + |
| 24 | +import {CHTMLWrapper, StringMap} from '../Wrapper.js'; |
| 25 | +import {BBox} from '../BBox.js'; |
| 26 | +import {MmlMpadded} from '../../../core/MmlTree/MmlNodes/mpadded.js'; |
| 27 | +import {MmlNode} from '../../../core/MmlTree/MmlNode.js'; |
| 28 | +import {Property} from '../../../core/Tree/Node.js'; |
| 29 | + |
| 30 | +/*****************************************************************/ |
| 31 | +/* |
| 32 | + * The CHTMLmpadded wrapper for the MmlMpadded object |
| 33 | + */ |
| 34 | + |
| 35 | +export class CHTMLmpadded extends CHTMLWrapper { |
| 36 | + public static kind = MmlMpadded.prototype.kind; |
| 37 | + |
| 38 | + /* |
| 39 | + * @override |
| 40 | + */ |
| 41 | + public toCHTML(parent: HTMLElement) { |
| 42 | + let chtml = this.standardCHTMLnode(parent); |
| 43 | + const content: HTMLElement[] = []; |
| 44 | + const style: StringMap = {}; |
| 45 | + const [H, D, W, dh, dd, dw, x, y] = this.getDimens(); |
| 46 | + // |
| 47 | + // If the width changed, set the width explicitly |
| 48 | + // |
| 49 | + if (dw) { |
| 50 | + style.width = this.em(W + dw); |
| 51 | + } |
| 52 | + // |
| 53 | + // If the height or depth changed, use margin to make the change |
| 54 | + // |
| 55 | + if (dh || dd) { |
| 56 | + style.margin = this.em(dh) + ' 0 ' + this.em(dd); |
| 57 | + } |
| 58 | + // |
| 59 | + // If there is a horizontal or vertical shift, |
| 60 | + // use relative positioning to move the contents |
| 61 | + // |
| 62 | + if (x || y) { |
| 63 | + style.position = 'relative'; |
| 64 | + content.push(this.html('mjx-rbox', {style: {left: this.em(x), top: this.em(-y)}})); |
| 65 | + } |
| 66 | + // |
| 67 | + // Create the HTML with the proper styles and content |
| 68 | + // |
| 69 | + chtml = chtml.appendChild(this.html('mjx-block', {style: style}, content)); |
| 70 | + for (const child of this.childNodes) { |
| 71 | + child.toCHTML(chtml.firstChild as HTMLElement || chtml); |
| 72 | + } |
| 73 | + } |
| 74 | + |
| 75 | + /* |
| 76 | + * Get the content bounding box, and the change in size and offsets |
| 77 | + * as specified by the parameters |
| 78 | + * |
| 79 | + * @return{number[]} The original height, depth, width, the changes in height, depth, |
| 80 | + * and width, and the horizontal and vertical offsets of the content |
| 81 | + */ |
| 82 | + protected getDimens() { |
| 83 | + const values = this.node.attributes.getList('width', 'height', 'depth', 'lspace', 'voffset'); |
| 84 | + const bbox = super.computeBBox(); // get unmodified bbox of children |
| 85 | + let {w, h, d} = bbox; |
| 86 | + let W = w, H = h, D = d, x = 0, y = 0; |
| 87 | + if (values.width !== '') w = this.dimen(values.width, bbox, 'w', 0); |
| 88 | + if (values.height !== '') h = this.dimen(values.height, bbox, 'h', 0); |
| 89 | + if (values.depth !== '') d = this.dimen(values.depth, bbox, 'd', 0); |
| 90 | + if (values.voffset !== '') y = this.dimen(values.voffset, bbox); |
| 91 | + if (values.lspace !== '') x = this.dimen(values.lspace, bbox); |
| 92 | + return [H, D, W, h - H, d - D, w - W, x, y]; |
| 93 | + } |
| 94 | + |
| 95 | + /* |
| 96 | + * Get a particular dimension, which can be relative to any of the BBox dimensions, |
| 97 | + * and can be an offset from the default size of the given dimension. |
| 98 | + * |
| 99 | + * @param{Property} length The value to be converted to a length in ems |
| 100 | + * @param{BBox} bbox The bbox of the mpadded content |
| 101 | + * @param{string} d The default dimension to use for relative sizes ('w', 'h', or 'd') |
| 102 | + * @param{number} m The minimum value allowed for the dimension |
| 103 | + * @return{number} The final dimension in ems |
| 104 | + */ |
| 105 | + protected dimen(length: Property, bbox: BBox, d: string = '', m: number = null) { |
| 106 | + length = String(length); |
| 107 | + const match = length.match(/width|height|depth/); |
| 108 | + const size = (match ? bbox[match[0].charAt(0) as (keyof BBox)] : (d ? bbox[d as (keyof BBox)] : 0)) as number; |
| 109 | + let dimen = (this.length2em(length, size) || 0); |
| 110 | + if (length.match(/^[-+]/) && d) { |
| 111 | + dimen += size; |
| 112 | + } |
| 113 | + if (m != null) { |
| 114 | + dimen = Math.max(m, dimen); |
| 115 | + } |
| 116 | + return dimen; |
| 117 | + } |
| 118 | + |
| 119 | + /* |
| 120 | + * @override |
| 121 | + */ |
| 122 | + public computeBBox() { |
| 123 | + const [H, D, W, dh, dd, dw, x, y] = this.getDimens(); |
| 124 | + const bbox = this.bbox; |
| 125 | + bbox.w = W + dw; |
| 126 | + bbox.h = H + dh; |
| 127 | + bbox.d = D + dd; |
| 128 | + return bbox; |
| 129 | + } |
| 130 | + |
| 131 | +} |
0 commit comments