123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289 |
- "use strict";
- var __extends = (this && this.__extends) || (function () {
- var extendStatics = function (d, b) {
- extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
- return extendStatics(d, b);
- };
- return function (d, b) {
- if (typeof b !== "function" && b !== null)
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- })();
- var __read = (this && this.__read) || function (o, n) {
- var m = typeof Symbol === "function" && o[Symbol.iterator];
- if (!m) return o;
- var i = m.call(o), r, ar = [], e;
- try {
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
- }
- catch (error) { e = { error: error }; }
- finally {
- try {
- if (r && !r.done && (m = i["return"])) m.call(i);
- }
- finally { if (e) throw e.error; }
- }
- return ar;
- };
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
- if (ar || !(i in from)) {
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
- ar[i] = from[i];
- }
- }
- return to.concat(ar || Array.prototype.slice.call(from));
- };
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.SVGmtable = void 0;
- var Wrapper_js_1 = require("../Wrapper.js");
- var mtable_js_1 = require("../../common/Wrappers/mtable.js");
- var mtable_js_2 = require("../../../core/MmlTree/MmlNodes/mtable.js");
- var CLASSPREFIX = 'mjx-';
- var SVGmtable = (function (_super) {
- __extends(SVGmtable, _super);
- function SVGmtable(factory, node, parent) {
- if (parent === void 0) { parent = null; }
- var _this = _super.call(this, factory, node, parent) || this;
- var def = { 'data-labels': true };
- if (_this.isTop) {
- def.transform = 'matrix(1 0 0 -1 0 0)';
- }
- _this.labels = _this.svg('g', def);
- return _this;
- }
- SVGmtable.prototype.toSVG = function (parent) {
- var svg = this.standardSVGnode(parent);
- this.placeRows(svg);
- this.handleColumnLines(svg);
- this.handleRowLines(svg);
- this.handleFrame(svg);
- var dx = this.handlePWidth(svg);
- this.handleLabels(svg, parent, dx);
- };
- SVGmtable.prototype.placeRows = function (svg) {
- var _a, _b, _c;
- var equal = this.node.attributes.get('equalrows');
- var _d = this.getTableData(), H = _d.H, D = _d.D;
- var HD = this.getEqualRowHeight();
- var rSpace = this.getRowHalfSpacing();
- var rLines = __spreadArray(__spreadArray([this.fLine], __read(this.rLines), false), [this.fLine], false);
- var y = this.getBBox().h - rLines[0];
- for (var i = 0; i < this.numRows; i++) {
- var row = this.childNodes[i];
- _a = __read(this.getRowHD(equal, HD, H[i], D[i]), 2), row.H = _a[0], row.D = _a[1];
- _b = __read([rSpace[i], rSpace[i + 1]], 2), row.tSpace = _b[0], row.bSpace = _b[1];
- _c = __read([rLines[i], rLines[i + 1]], 2), row.tLine = _c[0], row.bLine = _c[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];
- }
- };
- SVGmtable.prototype.getRowHD = function (equal, HD, H, D) {
- return (equal ? [(HD + H - D) / 2, (HD - H + D) / 2] : [H, D]);
- };
- SVGmtable.prototype.handleColor = function () {
- _super.prototype.handleColor.call(this);
- var rect = this.firstChild();
- if (rect) {
- this.adaptor.setAttribute(rect, 'width', this.fixed(this.getWidth()));
- }
- };
- SVGmtable.prototype.handleColumnLines = function (svg) {
- if (this.node.attributes.get('columnlines') === 'none')
- return;
- var lines = this.getColumnAttributes('columnlines');
- if (!lines)
- return;
- var cSpace = this.getColumnHalfSpacing();
- var cLines = this.cLines;
- var cWidth = this.getComputedWidths();
- var x = this.fLine;
- for (var 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];
- }
- };
- SVGmtable.prototype.handleRowLines = function (svg) {
- if (this.node.attributes.get('rowlines') === 'none')
- return;
- var lines = this.getRowAttributes('rowlines');
- if (!lines)
- return;
- var equal = this.node.attributes.get('equalrows');
- var _a = this.getTableData(), H = _a.H, D = _a.D;
- var HD = this.getEqualRowHeight();
- var rSpace = this.getRowHalfSpacing();
- var rLines = this.rLines;
- var y = this.getBBox().h - this.fLine;
- for (var i = 0; i < lines.length; i++) {
- var _b = __read(this.getRowHD(equal, HD, H[i], D[i]), 2), rH = _b[0], rD = _b[1];
- 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];
- }
- };
- SVGmtable.prototype.handleFrame = function (svg) {
- if (this.frame && this.fLine) {
- var _a = this.getBBox(), h = _a.h, d = _a.d, w = _a.w;
- var style = this.node.attributes.get('frame');
- this.adaptor.append(svg, this.makeFrame(w, h, d, style));
- }
- };
- SVGmtable.prototype.handlePWidth = function (svg) {
- if (!this.pWidth) {
- return 0;
- }
- var _a = this.getBBox(), w = _a.w, L = _a.L, R = _a.R;
- var W = L + this.pWidth + R;
- var align = this.getAlignShift()[0];
- var CW = Math.max(this.isTop ? W : 0, this.container.getWrapWidth(this.containerI)) - L - R;
- var dw = w - (this.pWidth > CW ? CW : this.pWidth);
- var dx = (align === 'left' ? 0 : align === 'right' ? dw : dw / 2);
- if (dx) {
- var table = this.svg('g', {}, this.adaptor.childNodes(svg));
- this.place(dx, 0, table);
- this.adaptor.append(svg, table);
- }
- return dx;
- };
- SVGmtable.prototype.lineClass = function (style) {
- return CLASSPREFIX + style;
- };
- SVGmtable.prototype.makeFrame = function (w, h, d, style) {
- var 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)
- }));
- };
- SVGmtable.prototype.makeVLine = function (x, style, t) {
- var _a = this.getBBox(), h = _a.h, d = _a.d;
- var dt = (style === 'dotted' ? t / 2 : 0);
- var 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)
- }));
- };
- SVGmtable.prototype.makeHLine = function (y, style, t) {
- var w = this.getBBox().w;
- var dt = (style === 'dotted' ? t / 2 : 0);
- var 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
- }));
- };
- SVGmtable.prototype.setLineThickness = function (t, style, properties) {
- if (t !== .07) {
- properties['stroke-thickness'] = this.fixed(t);
- if (style !== 'solid') {
- properties['stroke-dasharray'] = (style === 'dotted' ? '0,' : '') + this.fixed(2 * t);
- }
- }
- return properties;
- };
- SVGmtable.prototype.handleLabels = function (svg, _parent, dx) {
- if (!this.hasLabels)
- return;
- var labels = this.labels;
- var attributes = this.node.attributes;
- var side = attributes.get('side');
- this.spaceLabels();
- this.isTop ? this.topTable(svg, labels, side) : this.subTable(svg, labels, side, dx);
- };
- SVGmtable.prototype.spaceLabels = function () {
- var adaptor = this.adaptor;
- var h = this.getBBox().h;
- var L = this.getTableData().L;
- var space = this.getRowHalfSpacing();
- var y = h - this.fLine;
- var current = adaptor.firstChild(this.labels);
- for (var i = 0; i < this.numRows; i++) {
- var row = this.childNodes[i];
- if (row.node.isKind('mlabeledtr')) {
- var 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);
- }
- else {
- y -= space[i] + row.H + row.D + space[i + 1] + this.rLines[i];
- }
- }
- };
- SVGmtable.prototype.topTable = function (svg, labels, side) {
- var adaptor = this.adaptor;
- var _a = this.getBBox(), h = _a.h, d = _a.d, w = _a.w, L = _a.L, R = _a.R;
- var W = L + (this.pWidth || w) + R;
- var LW = this.getTableData().L;
- var _b = __read(this.getPadAlignShift(side), 3), align = _b[1], shift = _b[2];
- var dx = shift + (align === 'right' ? -W : align === 'center' ? -W / 2 : 0) + L;
- var matrix = 'matrix(1 0 0 -1 0 0)';
- var scale = "scale(".concat(this.jax.fixed((this.font.params.x_height * 1000) / this.metrics.ex, 2), ")");
- var transform = "translate(0 ".concat(this.fixed(h), ") ").concat(matrix, " ").concat(scale);
- var 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);
- };
- SVGmtable.prototype.subTable = function (svg, labels, side, dx) {
- var adaptor = this.adaptor;
- var _a = this.getBBox(), w = _a.w, L = _a.L, R = _a.R;
- var W = L + (this.pWidth || w) + R;
- var labelW = this.getTableData().L;
- var align = this.getAlignShift()[0];
- var 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);
- };
- SVGmtable.kind = mtable_js_2.MmlMtable.prototype.kind;
- SVGmtable.styles = {
- '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'
- }
- };
- return SVGmtable;
- }((0, mtable_js_1.CommonMtableMixin)(Wrapper_js_1.SVGWrapper)));
- exports.SVGmtable = SVGmtable;
- //# sourceMappingURL=mtable.js.map
|