mtable.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. "use strict";
  2. var __extends = (this && this.__extends) || (function () {
  3. var extendStatics = function (d, b) {
  4. extendStatics = Object.setPrototypeOf ||
  5. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  6. function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
  7. return extendStatics(d, b);
  8. };
  9. return function (d, b) {
  10. if (typeof b !== "function" && b !== null)
  11. throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
  12. extendStatics(d, b);
  13. function __() { this.constructor = d; }
  14. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  15. };
  16. })();
  17. var __read = (this && this.__read) || function (o, n) {
  18. var m = typeof Symbol === "function" && o[Symbol.iterator];
  19. if (!m) return o;
  20. var i = m.call(o), r, ar = [], e;
  21. try {
  22. while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  23. }
  24. catch (error) { e = { error: error }; }
  25. finally {
  26. try {
  27. if (r && !r.done && (m = i["return"])) m.call(i);
  28. }
  29. finally { if (e) throw e.error; }
  30. }
  31. return ar;
  32. };
  33. var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
  34. if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
  35. if (ar || !(i in from)) {
  36. if (!ar) ar = Array.prototype.slice.call(from, 0, i);
  37. ar[i] = from[i];
  38. }
  39. }
  40. return to.concat(ar || Array.prototype.slice.call(from));
  41. };
  42. Object.defineProperty(exports, "__esModule", { value: true });
  43. exports.SVGmtable = void 0;
  44. var Wrapper_js_1 = require("../Wrapper.js");
  45. var mtable_js_1 = require("../../common/Wrappers/mtable.js");
  46. var mtable_js_2 = require("../../../core/MmlTree/MmlNodes/mtable.js");
  47. var CLASSPREFIX = 'mjx-';
  48. var SVGmtable = (function (_super) {
  49. __extends(SVGmtable, _super);
  50. function SVGmtable(factory, node, parent) {
  51. if (parent === void 0) { parent = null; }
  52. var _this = _super.call(this, factory, node, parent) || this;
  53. var def = { 'data-labels': true };
  54. if (_this.isTop) {
  55. def.transform = 'matrix(1 0 0 -1 0 0)';
  56. }
  57. _this.labels = _this.svg('g', def);
  58. return _this;
  59. }
  60. SVGmtable.prototype.toSVG = function (parent) {
  61. var svg = this.standardSVGnode(parent);
  62. this.placeRows(svg);
  63. this.handleColumnLines(svg);
  64. this.handleRowLines(svg);
  65. this.handleFrame(svg);
  66. var dx = this.handlePWidth(svg);
  67. this.handleLabels(svg, parent, dx);
  68. };
  69. SVGmtable.prototype.placeRows = function (svg) {
  70. var _a, _b, _c;
  71. var equal = this.node.attributes.get('equalrows');
  72. var _d = this.getTableData(), H = _d.H, D = _d.D;
  73. var HD = this.getEqualRowHeight();
  74. var rSpace = this.getRowHalfSpacing();
  75. var rLines = __spreadArray(__spreadArray([this.fLine], __read(this.rLines), false), [this.fLine], false);
  76. var y = this.getBBox().h - rLines[0];
  77. for (var i = 0; i < this.numRows; i++) {
  78. var row = this.childNodes[i];
  79. _a = __read(this.getRowHD(equal, HD, H[i], D[i]), 2), row.H = _a[0], row.D = _a[1];
  80. _b = __read([rSpace[i], rSpace[i + 1]], 2), row.tSpace = _b[0], row.bSpace = _b[1];
  81. _c = __read([rLines[i], rLines[i + 1]], 2), row.tLine = _c[0], row.bLine = _c[1];
  82. row.toSVG(svg);
  83. row.place(0, y - rSpace[i] - row.H);
  84. y -= rSpace[i] + row.H + row.D + rSpace[i + 1] + rLines[i + 1];
  85. }
  86. };
  87. SVGmtable.prototype.getRowHD = function (equal, HD, H, D) {
  88. return (equal ? [(HD + H - D) / 2, (HD - H + D) / 2] : [H, D]);
  89. };
  90. SVGmtable.prototype.handleColor = function () {
  91. _super.prototype.handleColor.call(this);
  92. var rect = this.firstChild();
  93. if (rect) {
  94. this.adaptor.setAttribute(rect, 'width', this.fixed(this.getWidth()));
  95. }
  96. };
  97. SVGmtable.prototype.handleColumnLines = function (svg) {
  98. if (this.node.attributes.get('columnlines') === 'none')
  99. return;
  100. var lines = this.getColumnAttributes('columnlines');
  101. if (!lines)
  102. return;
  103. var cSpace = this.getColumnHalfSpacing();
  104. var cLines = this.cLines;
  105. var cWidth = this.getComputedWidths();
  106. var x = this.fLine;
  107. for (var i = 0; i < lines.length; i++) {
  108. x += cSpace[i] + cWidth[i] + cSpace[i + 1];
  109. if (lines[i] !== 'none') {
  110. this.adaptor.append(svg, this.makeVLine(x, lines[i], cLines[i]));
  111. }
  112. x += cLines[i];
  113. }
  114. };
  115. SVGmtable.prototype.handleRowLines = function (svg) {
  116. if (this.node.attributes.get('rowlines') === 'none')
  117. return;
  118. var lines = this.getRowAttributes('rowlines');
  119. if (!lines)
  120. return;
  121. var equal = this.node.attributes.get('equalrows');
  122. var _a = this.getTableData(), H = _a.H, D = _a.D;
  123. var HD = this.getEqualRowHeight();
  124. var rSpace = this.getRowHalfSpacing();
  125. var rLines = this.rLines;
  126. var y = this.getBBox().h - this.fLine;
  127. for (var i = 0; i < lines.length; i++) {
  128. var _b = __read(this.getRowHD(equal, HD, H[i], D[i]), 2), rH = _b[0], rD = _b[1];
  129. y -= rSpace[i] + rH + rD + rSpace[i + 1];
  130. if (lines[i] !== 'none') {
  131. this.adaptor.append(svg, this.makeHLine(y, lines[i], rLines[i]));
  132. }
  133. y -= rLines[i];
  134. }
  135. };
  136. SVGmtable.prototype.handleFrame = function (svg) {
  137. if (this.frame && this.fLine) {
  138. var _a = this.getBBox(), h = _a.h, d = _a.d, w = _a.w;
  139. var style = this.node.attributes.get('frame');
  140. this.adaptor.append(svg, this.makeFrame(w, h, d, style));
  141. }
  142. };
  143. SVGmtable.prototype.handlePWidth = function (svg) {
  144. if (!this.pWidth) {
  145. return 0;
  146. }
  147. var _a = this.getBBox(), w = _a.w, L = _a.L, R = _a.R;
  148. var W = L + this.pWidth + R;
  149. var align = this.getAlignShift()[0];
  150. var CW = Math.max(this.isTop ? W : 0, this.container.getWrapWidth(this.containerI)) - L - R;
  151. var dw = w - (this.pWidth > CW ? CW : this.pWidth);
  152. var dx = (align === 'left' ? 0 : align === 'right' ? dw : dw / 2);
  153. if (dx) {
  154. var table = this.svg('g', {}, this.adaptor.childNodes(svg));
  155. this.place(dx, 0, table);
  156. this.adaptor.append(svg, table);
  157. }
  158. return dx;
  159. };
  160. SVGmtable.prototype.lineClass = function (style) {
  161. return CLASSPREFIX + style;
  162. };
  163. SVGmtable.prototype.makeFrame = function (w, h, d, style) {
  164. var t = this.fLine;
  165. return this.svg('rect', this.setLineThickness(t, style, {
  166. 'data-frame': true, 'class': this.lineClass(style),
  167. width: this.fixed(w - t), height: this.fixed(h + d - t),
  168. x: this.fixed(t / 2), y: this.fixed(t / 2 - d)
  169. }));
  170. };
  171. SVGmtable.prototype.makeVLine = function (x, style, t) {
  172. var _a = this.getBBox(), h = _a.h, d = _a.d;
  173. var dt = (style === 'dotted' ? t / 2 : 0);
  174. var X = this.fixed(x + t / 2);
  175. return this.svg('line', this.setLineThickness(t, style, {
  176. 'data-line': 'v', 'class': this.lineClass(style),
  177. x1: X, y1: this.fixed(dt - d), x2: X, y2: this.fixed(h - dt)
  178. }));
  179. };
  180. SVGmtable.prototype.makeHLine = function (y, style, t) {
  181. var w = this.getBBox().w;
  182. var dt = (style === 'dotted' ? t / 2 : 0);
  183. var Y = this.fixed(y - t / 2);
  184. return this.svg('line', this.setLineThickness(t, style, {
  185. 'data-line': 'h', 'class': this.lineClass(style),
  186. x1: this.fixed(dt), y1: Y, x2: this.fixed(w - dt), y2: Y
  187. }));
  188. };
  189. SVGmtable.prototype.setLineThickness = function (t, style, properties) {
  190. if (t !== .07) {
  191. properties['stroke-thickness'] = this.fixed(t);
  192. if (style !== 'solid') {
  193. properties['stroke-dasharray'] = (style === 'dotted' ? '0,' : '') + this.fixed(2 * t);
  194. }
  195. }
  196. return properties;
  197. };
  198. SVGmtable.prototype.handleLabels = function (svg, _parent, dx) {
  199. if (!this.hasLabels)
  200. return;
  201. var labels = this.labels;
  202. var attributes = this.node.attributes;
  203. var side = attributes.get('side');
  204. this.spaceLabels();
  205. this.isTop ? this.topTable(svg, labels, side) : this.subTable(svg, labels, side, dx);
  206. };
  207. SVGmtable.prototype.spaceLabels = function () {
  208. var adaptor = this.adaptor;
  209. var h = this.getBBox().h;
  210. var L = this.getTableData().L;
  211. var space = this.getRowHalfSpacing();
  212. var y = h - this.fLine;
  213. var current = adaptor.firstChild(this.labels);
  214. for (var i = 0; i < this.numRows; i++) {
  215. var row = this.childNodes[i];
  216. if (row.node.isKind('mlabeledtr')) {
  217. var cell = row.childNodes[0];
  218. y -= space[i] + row.H;
  219. row.placeCell(cell, { x: 0, y: y, w: L, lSpace: 0, rSpace: 0, lLine: 0, rLine: 0 });
  220. y -= row.D + space[i + 1] + this.rLines[i];
  221. current = adaptor.next(current);
  222. }
  223. else {
  224. y -= space[i] + row.H + row.D + space[i + 1] + this.rLines[i];
  225. }
  226. }
  227. };
  228. SVGmtable.prototype.topTable = function (svg, labels, side) {
  229. var adaptor = this.adaptor;
  230. var _a = this.getBBox(), h = _a.h, d = _a.d, w = _a.w, L = _a.L, R = _a.R;
  231. var W = L + (this.pWidth || w) + R;
  232. var LW = this.getTableData().L;
  233. var _b = __read(this.getPadAlignShift(side), 3), align = _b[1], shift = _b[2];
  234. var dx = shift + (align === 'right' ? -W : align === 'center' ? -W / 2 : 0) + L;
  235. var matrix = 'matrix(1 0 0 -1 0 0)';
  236. var scale = "scale(".concat(this.jax.fixed((this.font.params.x_height * 1000) / this.metrics.ex, 2), ")");
  237. var transform = "translate(0 ".concat(this.fixed(h), ") ").concat(matrix, " ").concat(scale);
  238. var table = this.svg('svg', {
  239. 'data-table': true,
  240. preserveAspectRatio: (align === 'left' ? 'xMinYMid' : align === 'right' ? 'xMaxYMid' : 'xMidYMid'),
  241. viewBox: [this.fixed(-dx), this.fixed(-h), 1, this.fixed(h + d)].join(' ')
  242. }, [
  243. this.svg('g', { transform: matrix }, adaptor.childNodes(svg))
  244. ]);
  245. labels = this.svg('svg', {
  246. 'data-labels': true,
  247. preserveAspectRatio: (side === 'left' ? 'xMinYMid' : 'xMaxYMid'),
  248. viewBox: [side === 'left' ? 0 : this.fixed(LW), this.fixed(-h), 1, this.fixed(h + d)].join(' ')
  249. }, [labels]);
  250. adaptor.append(svg, this.svg('g', { transform: transform }, [table, labels]));
  251. this.place(-L, 0, svg);
  252. };
  253. SVGmtable.prototype.subTable = function (svg, labels, side, dx) {
  254. var adaptor = this.adaptor;
  255. var _a = this.getBBox(), w = _a.w, L = _a.L, R = _a.R;
  256. var W = L + (this.pWidth || w) + R;
  257. var labelW = this.getTableData().L;
  258. var align = this.getAlignShift()[0];
  259. var CW = Math.max(W, this.container.getWrapWidth(this.containerI));
  260. this.place(side === 'left' ?
  261. (align === 'left' ? 0 : align === 'right' ? W - CW + dx : (W - CW) / 2 + dx) - L :
  262. (align === 'left' ? CW : align === 'right' ? W + dx : (CW + W) / 2 + dx) - L - labelW, 0, labels);
  263. adaptor.append(svg, labels);
  264. };
  265. SVGmtable.kind = mtable_js_2.MmlMtable.prototype.kind;
  266. SVGmtable.styles = {
  267. 'g[data-mml-node="mtable"] > line[data-line], svg[data-table] > g > line[data-line]': {
  268. 'stroke-width': '70px',
  269. fill: 'none'
  270. },
  271. 'g[data-mml-node="mtable"] > rect[data-frame], svg[data-table] > g > rect[data-frame]': {
  272. 'stroke-width': '70px',
  273. fill: 'none'
  274. },
  275. 'g[data-mml-node="mtable"] > .mjx-dashed, svg[data-table] > g > .mjx-dashed': {
  276. 'stroke-dasharray': '140'
  277. },
  278. 'g[data-mml-node="mtable"] > .mjx-dotted, svg[data-table] > g > .mjx-dotted': {
  279. 'stroke-linecap': 'round',
  280. 'stroke-dasharray': '0,140'
  281. },
  282. 'g[data-mml-node="mtable"] > g > svg': {
  283. overflow: 'visible'
  284. }
  285. };
  286. return SVGmtable;
  287. }((0, mtable_js_1.CommonMtableMixin)(Wrapper_js_1.SVGWrapper)));
  288. exports.SVGmtable = SVGmtable;
  289. //# sourceMappingURL=mtable.js.map