menclose.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
  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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
  18. if (k2 === undefined) k2 = k;
  19. var desc = Object.getOwnPropertyDescriptor(m, k);
  20. if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
  21. desc = { enumerable: true, get: function() { return m[k]; } };
  22. }
  23. Object.defineProperty(o, k2, desc);
  24. }) : (function(o, m, k, k2) {
  25. if (k2 === undefined) k2 = k;
  26. o[k2] = m[k];
  27. }));
  28. var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
  29. Object.defineProperty(o, "default", { enumerable: true, value: v });
  30. }) : function(o, v) {
  31. o["default"] = v;
  32. });
  33. var __importStar = (this && this.__importStar) || function (mod) {
  34. if (mod && mod.__esModule) return mod;
  35. var result = {};
  36. if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
  37. __setModuleDefault(result, mod);
  38. return result;
  39. };
  40. var __values = (this && this.__values) || function(o) {
  41. var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
  42. if (m) return m.call(o);
  43. if (o && typeof o.length === "number") return {
  44. next: function () {
  45. if (o && i >= o.length) o = void 0;
  46. return { value: o && o[i++], done: !o };
  47. }
  48. };
  49. throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
  50. };
  51. var __read = (this && this.__read) || function (o, n) {
  52. var m = typeof Symbol === "function" && o[Symbol.iterator];
  53. if (!m) return o;
  54. var i = m.call(o), r, ar = [], e;
  55. try {
  56. while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  57. }
  58. catch (error) { e = { error: error }; }
  59. finally {
  60. try {
  61. if (r && !r.done && (m = i["return"])) m.call(i);
  62. }
  63. finally { if (e) throw e.error; }
  64. }
  65. return ar;
  66. };
  67. Object.defineProperty(exports, "__esModule", { value: true });
  68. exports.CHTMLmenclose = void 0;
  69. var Wrapper_js_1 = require("../Wrapper.js");
  70. var menclose_js_1 = require("../../common/Wrappers/menclose.js");
  71. var Notation = __importStar(require("../Notation.js"));
  72. var menclose_js_2 = require("../../../core/MmlTree/MmlNodes/menclose.js");
  73. var lengths_js_1 = require("../../../util/lengths.js");
  74. function Angle(x, y) {
  75. return Math.atan2(x, y).toFixed(3).replace(/\.?0+$/, '');
  76. }
  77. var ANGLE = Angle(Notation.ARROWDX, Notation.ARROWY);
  78. var CHTMLmenclose = (function (_super) {
  79. __extends(CHTMLmenclose, _super);
  80. function CHTMLmenclose() {
  81. return _super !== null && _super.apply(this, arguments) || this;
  82. }
  83. CHTMLmenclose.prototype.toCHTML = function (parent) {
  84. var e_1, _a, e_2, _b;
  85. var adaptor = this.adaptor;
  86. var chtml = this.standardCHTMLnode(parent);
  87. var block = adaptor.append(chtml, this.html('mjx-box'));
  88. if (this.renderChild) {
  89. this.renderChild(this, block);
  90. }
  91. else {
  92. this.childNodes[0].toCHTML(block);
  93. }
  94. try {
  95. for (var _c = __values(Object.keys(this.notations)), _d = _c.next(); !_d.done; _d = _c.next()) {
  96. var name_1 = _d.value;
  97. var notation = this.notations[name_1];
  98. !notation.renderChild && notation.renderer(this, block);
  99. }
  100. }
  101. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  102. finally {
  103. try {
  104. if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
  105. }
  106. finally { if (e_1) throw e_1.error; }
  107. }
  108. var pbox = this.getPadding();
  109. try {
  110. for (var _e = __values(Notation.sideNames), _f = _e.next(); !_f.done; _f = _e.next()) {
  111. var name_2 = _f.value;
  112. var i = Notation.sideIndex[name_2];
  113. pbox[i] > 0 && adaptor.setStyle(block, 'padding-' + name_2, this.em(pbox[i]));
  114. }
  115. }
  116. catch (e_2_1) { e_2 = { error: e_2_1 }; }
  117. finally {
  118. try {
  119. if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
  120. }
  121. finally { if (e_2) throw e_2.error; }
  122. }
  123. };
  124. CHTMLmenclose.prototype.arrow = function (w, a, double, offset, dist) {
  125. if (offset === void 0) { offset = ''; }
  126. if (dist === void 0) { dist = 0; }
  127. var W = this.getBBox().w;
  128. var style = { width: this.em(w) };
  129. if (W !== w) {
  130. style.left = this.em((W - w) / 2);
  131. }
  132. if (a) {
  133. style.transform = 'rotate(' + this.fixed(a) + 'rad)';
  134. }
  135. var arrow = this.html('mjx-arrow', { style: style }, [
  136. this.html('mjx-aline'), this.html('mjx-rthead'), this.html('mjx-rbhead')
  137. ]);
  138. if (double) {
  139. this.adaptor.append(arrow, this.html('mjx-lthead'));
  140. this.adaptor.append(arrow, this.html('mjx-lbhead'));
  141. this.adaptor.setAttribute(arrow, 'double', 'true');
  142. }
  143. this.adjustArrow(arrow, double);
  144. this.moveArrow(arrow, offset, dist);
  145. return arrow;
  146. };
  147. CHTMLmenclose.prototype.adjustArrow = function (arrow, double) {
  148. var _this = this;
  149. var t = this.thickness;
  150. var head = this.arrowhead;
  151. if (head.x === Notation.ARROWX && head.y === Notation.ARROWY &&
  152. head.dx === Notation.ARROWDX && t === Notation.THICKNESS)
  153. return;
  154. var _a = __read([t * head.x, t * head.y].map(function (x) { return _this.em(x); }), 2), x = _a[0], y = _a[1];
  155. var a = Angle(head.dx, head.y);
  156. var _b = __read(this.adaptor.childNodes(arrow), 5), line = _b[0], rthead = _b[1], rbhead = _b[2], lthead = _b[3], lbhead = _b[4];
  157. this.adjustHead(rthead, [y, '0', '1px', x], a);
  158. this.adjustHead(rbhead, ['1px', '0', y, x], '-' + a);
  159. this.adjustHead(lthead, [y, x, '1px', '0'], '-' + a);
  160. this.adjustHead(lbhead, ['1px', x, y, '0'], a);
  161. this.adjustLine(line, t, head.x, double);
  162. };
  163. CHTMLmenclose.prototype.adjustHead = function (head, border, a) {
  164. if (head) {
  165. this.adaptor.setStyle(head, 'border-width', border.join(' '));
  166. this.adaptor.setStyle(head, 'transform', 'skewX(' + a + 'rad)');
  167. }
  168. };
  169. CHTMLmenclose.prototype.adjustLine = function (line, t, x, double) {
  170. this.adaptor.setStyle(line, 'borderTop', this.em(t) + ' solid');
  171. this.adaptor.setStyle(line, 'top', this.em(-t / 2));
  172. this.adaptor.setStyle(line, 'right', this.em(t * (x - 1)));
  173. if (double) {
  174. this.adaptor.setStyle(line, 'left', this.em(t * (x - 1)));
  175. }
  176. };
  177. CHTMLmenclose.prototype.moveArrow = function (arrow, offset, d) {
  178. if (!d)
  179. return;
  180. var transform = this.adaptor.getStyle(arrow, 'transform');
  181. this.adaptor.setStyle(arrow, 'transform', "translate".concat(offset, "(").concat(this.em(-d), ")").concat((transform ? ' ' + transform : '')));
  182. };
  183. CHTMLmenclose.prototype.adjustBorder = function (node) {
  184. if (this.thickness !== Notation.THICKNESS) {
  185. this.adaptor.setStyle(node, 'borderWidth', this.em(this.thickness));
  186. }
  187. return node;
  188. };
  189. CHTMLmenclose.prototype.adjustThickness = function (shape) {
  190. if (this.thickness !== Notation.THICKNESS) {
  191. this.adaptor.setStyle(shape, 'strokeWidth', this.fixed(this.thickness));
  192. }
  193. return shape;
  194. };
  195. CHTMLmenclose.prototype.fixed = function (m, n) {
  196. if (n === void 0) { n = 3; }
  197. if (Math.abs(m) < .0006) {
  198. return '0';
  199. }
  200. return m.toFixed(n).replace(/\.?0+$/, '');
  201. };
  202. CHTMLmenclose.prototype.em = function (m) {
  203. return _super.prototype.em.call(this, m);
  204. };
  205. CHTMLmenclose.kind = menclose_js_2.MmlMenclose.prototype.kind;
  206. CHTMLmenclose.styles = {
  207. 'mjx-menclose': {
  208. position: 'relative'
  209. },
  210. 'mjx-menclose > mjx-dstrike': {
  211. display: 'inline-block',
  212. left: 0, top: 0,
  213. position: 'absolute',
  214. 'border-top': Notation.SOLID,
  215. 'transform-origin': 'top left'
  216. },
  217. 'mjx-menclose > mjx-ustrike': {
  218. display: 'inline-block',
  219. left: 0, bottom: 0,
  220. position: 'absolute',
  221. 'border-top': Notation.SOLID,
  222. 'transform-origin': 'bottom left'
  223. },
  224. 'mjx-menclose > mjx-hstrike': {
  225. 'border-top': Notation.SOLID,
  226. position: 'absolute',
  227. left: 0, right: 0, bottom: '50%',
  228. transform: 'translateY(' + (0, lengths_js_1.em)(Notation.THICKNESS / 2) + ')'
  229. },
  230. 'mjx-menclose > mjx-vstrike': {
  231. 'border-left': Notation.SOLID,
  232. position: 'absolute',
  233. top: 0, bottom: 0, right: '50%',
  234. transform: 'translateX(' + (0, lengths_js_1.em)(Notation.THICKNESS / 2) + ')'
  235. },
  236. 'mjx-menclose > mjx-rbox': {
  237. position: 'absolute',
  238. top: 0, bottom: 0, right: 0, left: 0,
  239. 'border': Notation.SOLID,
  240. 'border-radius': (0, lengths_js_1.em)(Notation.THICKNESS + Notation.PADDING)
  241. },
  242. 'mjx-menclose > mjx-cbox': {
  243. position: 'absolute',
  244. top: 0, bottom: 0, right: 0, left: 0,
  245. 'border': Notation.SOLID,
  246. 'border-radius': '50%'
  247. },
  248. 'mjx-menclose > mjx-arrow': {
  249. position: 'absolute',
  250. left: 0, bottom: '50%', height: 0, width: 0
  251. },
  252. 'mjx-menclose > mjx-arrow > *': {
  253. display: 'block',
  254. position: 'absolute',
  255. 'transform-origin': 'bottom',
  256. 'border-left': (0, lengths_js_1.em)(Notation.THICKNESS * Notation.ARROWX) + ' solid',
  257. 'border-right': 0,
  258. 'box-sizing': 'border-box'
  259. },
  260. 'mjx-menclose > mjx-arrow > mjx-aline': {
  261. left: 0, top: (0, lengths_js_1.em)(-Notation.THICKNESS / 2),
  262. right: (0, lengths_js_1.em)(Notation.THICKNESS * (Notation.ARROWX - 1)), height: 0,
  263. 'border-top': (0, lengths_js_1.em)(Notation.THICKNESS) + ' solid',
  264. 'border-left': 0
  265. },
  266. 'mjx-menclose > mjx-arrow[double] > mjx-aline': {
  267. left: (0, lengths_js_1.em)(Notation.THICKNESS * (Notation.ARROWX - 1)), height: 0,
  268. },
  269. 'mjx-menclose > mjx-arrow > mjx-rthead': {
  270. transform: 'skewX(' + ANGLE + 'rad)',
  271. right: 0, bottom: '-1px',
  272. 'border-bottom': '1px solid transparent',
  273. 'border-top': (0, lengths_js_1.em)(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent'
  274. },
  275. 'mjx-menclose > mjx-arrow > mjx-rbhead': {
  276. transform: 'skewX(-' + ANGLE + 'rad)',
  277. 'transform-origin': 'top',
  278. right: 0, top: '-1px',
  279. 'border-top': '1px solid transparent',
  280. 'border-bottom': (0, lengths_js_1.em)(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent'
  281. },
  282. 'mjx-menclose > mjx-arrow > mjx-lthead': {
  283. transform: 'skewX(-' + ANGLE + 'rad)',
  284. left: 0, bottom: '-1px',
  285. 'border-left': 0,
  286. 'border-right': (0, lengths_js_1.em)(Notation.THICKNESS * Notation.ARROWX) + ' solid',
  287. 'border-bottom': '1px solid transparent',
  288. 'border-top': (0, lengths_js_1.em)(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent'
  289. },
  290. 'mjx-menclose > mjx-arrow > mjx-lbhead': {
  291. transform: 'skewX(' + ANGLE + 'rad)',
  292. 'transform-origin': 'top',
  293. left: 0, top: '-1px',
  294. 'border-left': 0,
  295. 'border-right': (0, lengths_js_1.em)(Notation.THICKNESS * Notation.ARROWX) + ' solid',
  296. 'border-top': '1px solid transparent',
  297. 'border-bottom': (0, lengths_js_1.em)(Notation.THICKNESS * Notation.ARROWY) + ' solid transparent'
  298. },
  299. 'mjx-menclose > dbox': {
  300. position: 'absolute',
  301. top: 0, bottom: 0, left: (0, lengths_js_1.em)(-1.5 * Notation.PADDING),
  302. width: (0, lengths_js_1.em)(3 * Notation.PADDING),
  303. border: (0, lengths_js_1.em)(Notation.THICKNESS) + ' solid',
  304. 'border-radius': '50%',
  305. 'clip-path': 'inset(0 0 0 ' + (0, lengths_js_1.em)(1.5 * Notation.PADDING) + ')',
  306. 'box-sizing': 'border-box'
  307. }
  308. };
  309. CHTMLmenclose.notations = new Map([
  310. Notation.Border('top'),
  311. Notation.Border('right'),
  312. Notation.Border('bottom'),
  313. Notation.Border('left'),
  314. Notation.Border2('actuarial', 'top', 'right'),
  315. Notation.Border2('madruwb', 'bottom', 'right'),
  316. Notation.DiagonalStrike('up', 1),
  317. Notation.DiagonalStrike('down', -1),
  318. ['horizontalstrike', {
  319. renderer: Notation.RenderElement('hstrike', 'Y'),
  320. bbox: function (node) { return [0, node.padding, 0, node.padding]; }
  321. }],
  322. ['verticalstrike', {
  323. renderer: Notation.RenderElement('vstrike', 'X'),
  324. bbox: function (node) { return [node.padding, 0, node.padding, 0]; }
  325. }],
  326. ['box', {
  327. renderer: function (node, child) {
  328. node.adaptor.setStyle(child, 'border', node.em(node.thickness) + ' solid');
  329. },
  330. bbox: Notation.fullBBox,
  331. border: Notation.fullBorder,
  332. remove: 'left right top bottom'
  333. }],
  334. ['roundedbox', {
  335. renderer: Notation.RenderElement('rbox'),
  336. bbox: Notation.fullBBox
  337. }],
  338. ['circle', {
  339. renderer: Notation.RenderElement('cbox'),
  340. bbox: Notation.fullBBox
  341. }],
  342. ['phasorangle', {
  343. renderer: function (node, child) {
  344. var _a = node.getBBox(), h = _a.h, d = _a.d;
  345. var _b = __read(node.getArgMod(1.75 * node.padding, h + d), 2), a = _b[0], W = _b[1];
  346. var t = node.thickness * Math.sin(a) * .9;
  347. node.adaptor.setStyle(child, 'border-bottom', node.em(node.thickness) + ' solid');
  348. var strike = node.adjustBorder(node.html('mjx-ustrike', { style: {
  349. width: node.em(W),
  350. transform: 'translateX(' + node.em(t) + ') rotate(' + node.fixed(-a) + 'rad)',
  351. } }));
  352. node.adaptor.append(node.chtml, strike);
  353. },
  354. bbox: function (node) {
  355. var p = node.padding / 2;
  356. var t = node.thickness;
  357. return [2 * p, p, p + t, 3 * p + t];
  358. },
  359. border: function (node) { return [0, 0, node.thickness, 0]; },
  360. remove: 'bottom'
  361. }],
  362. Notation.Arrow('up'),
  363. Notation.Arrow('down'),
  364. Notation.Arrow('left'),
  365. Notation.Arrow('right'),
  366. Notation.Arrow('updown'),
  367. Notation.Arrow('leftright'),
  368. Notation.DiagonalArrow('updiagonal'),
  369. Notation.DiagonalArrow('northeast'),
  370. Notation.DiagonalArrow('southeast'),
  371. Notation.DiagonalArrow('northwest'),
  372. Notation.DiagonalArrow('southwest'),
  373. Notation.DiagonalArrow('northeastsouthwest'),
  374. Notation.DiagonalArrow('northwestsoutheast'),
  375. ['longdiv', {
  376. renderer: function (node, child) {
  377. var adaptor = node.adaptor;
  378. adaptor.setStyle(child, 'border-top', node.em(node.thickness) + ' solid');
  379. var arc = adaptor.append(node.chtml, node.html('dbox'));
  380. var t = node.thickness;
  381. var p = node.padding;
  382. if (t !== Notation.THICKNESS) {
  383. adaptor.setStyle(arc, 'border-width', node.em(t));
  384. }
  385. if (p !== Notation.PADDING) {
  386. adaptor.setStyle(arc, 'left', node.em(-1.5 * p));
  387. adaptor.setStyle(arc, 'width', node.em(3 * p));
  388. adaptor.setStyle(arc, 'clip-path', 'inset(0 0 0 ' + node.em(1.5 * p) + ')');
  389. }
  390. },
  391. bbox: function (node) {
  392. var p = node.padding;
  393. var t = node.thickness;
  394. return [p + t, p, p, 2 * p + t / 2];
  395. }
  396. }],
  397. ['radical', {
  398. renderer: function (node, child) {
  399. node.msqrt.toCHTML(child);
  400. var TRBL = node.sqrtTRBL();
  401. node.adaptor.setStyle(node.msqrt.chtml, 'margin', TRBL.map(function (x) { return node.em(-x); }).join(' '));
  402. },
  403. init: function (node) {
  404. node.msqrt = node.createMsqrt(node.childNodes[0]);
  405. },
  406. bbox: function (node) { return node.sqrtTRBL(); },
  407. renderChild: true
  408. }]
  409. ]);
  410. return CHTMLmenclose;
  411. }((0, menclose_js_1.CommonMencloseMixin)(Wrapper_js_1.CHTMLWrapper)));
  412. exports.CHTMLmenclose = CHTMLmenclose;
  413. //# sourceMappingURL=menclose.js.map