maction.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  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. Object.defineProperty(exports, "__esModule", { value: true });
  18. exports.SVGmaction = void 0;
  19. var Wrapper_js_1 = require("../Wrapper.js");
  20. var maction_js_1 = require("../../common/Wrappers/maction.js");
  21. var maction_js_2 = require("../../common/Wrappers/maction.js");
  22. var maction_js_3 = require("../../../core/MmlTree/MmlNodes/maction.js");
  23. var SVGmaction = (function (_super) {
  24. __extends(SVGmaction, _super);
  25. function SVGmaction() {
  26. return _super !== null && _super.apply(this, arguments) || this;
  27. }
  28. SVGmaction.prototype.toSVG = function (parent) {
  29. var svg = this.standardSVGnode(parent);
  30. var child = this.selected;
  31. var _a = child.getOuterBBox(), h = _a.h, d = _a.d, w = _a.w;
  32. this.adaptor.append(this.element, this.svg('rect', {
  33. width: this.fixed(w), height: this.fixed(h + d), y: this.fixed(-d),
  34. fill: 'none', 'pointer-events': 'all'
  35. }));
  36. child.toSVG(svg);
  37. var bbox = child.getOuterBBox();
  38. if (child.element) {
  39. child.place(bbox.L * bbox.rscale, 0);
  40. }
  41. this.action(this, this.data);
  42. };
  43. SVGmaction.prototype.setEventHandler = function (type, handler) {
  44. this.element.addEventListener(type, handler);
  45. };
  46. SVGmaction.kind = maction_js_3.MmlMaction.prototype.kind;
  47. SVGmaction.styles = {
  48. '[jax="SVG"] mjx-tool': {
  49. display: 'inline-block',
  50. position: 'relative',
  51. width: 0, height: 0
  52. },
  53. '[jax="SVG"] mjx-tool > mjx-tip': {
  54. position: 'absolute',
  55. top: 0, left: 0
  56. },
  57. 'mjx-tool > mjx-tip': {
  58. display: 'inline-block',
  59. padding: '.2em',
  60. border: '1px solid #888',
  61. 'font-size': '70%',
  62. 'background-color': '#F8F8F8',
  63. color: 'black',
  64. 'box-shadow': '2px 2px 5px #AAAAAA'
  65. },
  66. 'g[data-mml-node="maction"][data-toggle]': {
  67. cursor: 'pointer'
  68. },
  69. 'mjx-status': {
  70. display: 'block',
  71. position: 'fixed',
  72. left: '1em',
  73. bottom: '1em',
  74. 'min-width': '25%',
  75. padding: '.2em .4em',
  76. border: '1px solid #888',
  77. 'font-size': '90%',
  78. 'background-color': '#F8F8F8',
  79. color: 'black'
  80. }
  81. };
  82. SVGmaction.actions = new Map([
  83. ['toggle', [function (node, _data) {
  84. node.adaptor.setAttribute(node.element, 'data-toggle', node.node.attributes.get('selection'));
  85. var math = node.factory.jax.math;
  86. var document = node.factory.jax.document;
  87. var mml = node.node;
  88. node.setEventHandler('click', function (event) {
  89. if (!math.end.node) {
  90. math.start.node = math.end.node = math.typesetRoot;
  91. math.start.n = math.end.n = 0;
  92. }
  93. mml.nextToggleSelection();
  94. math.rerender(document);
  95. event.stopPropagation();
  96. });
  97. }, {}]],
  98. ['tooltip', [function (node, data) {
  99. var tip = node.childNodes[1];
  100. if (!tip)
  101. return;
  102. var rect = node.firstChild();
  103. if (tip.node.isKind('mtext')) {
  104. var text = tip.node.getText();
  105. node.adaptor.insert(node.svg('title', {}, [node.text(text)]), rect);
  106. }
  107. else {
  108. var adaptor_1 = node.adaptor;
  109. var container_1 = node.jax.container;
  110. var math = node.node.factory.create('math', {}, [node.childNodes[1].node]);
  111. var tool_1 = node.html('mjx-tool', {}, [node.html('mjx-tip')]);
  112. var hidden_1 = adaptor_1.append(rect, node.svg('foreignObject', { style: { display: 'none' } }, [tool_1]));
  113. node.jax.processMath(math, adaptor_1.firstChild(tool_1));
  114. node.childNodes[1].node.parent = node.node;
  115. node.setEventHandler('mouseover', function (event) {
  116. data.stopTimers(node, data);
  117. data.hoverTimer.set(node, setTimeout(function () {
  118. adaptor_1.setStyle(tool_1, 'left', '0');
  119. adaptor_1.setStyle(tool_1, 'top', '0');
  120. adaptor_1.append(container_1, tool_1);
  121. var tbox = adaptor_1.nodeBBox(tool_1);
  122. var nbox = adaptor_1.nodeBBox(node.element);
  123. var dx = (nbox.right - tbox.left) / node.metrics.em + node.dx;
  124. var dy = (nbox.bottom - tbox.bottom) / node.metrics.em + node.dy;
  125. adaptor_1.setStyle(tool_1, 'left', node.px(dx));
  126. adaptor_1.setStyle(tool_1, 'top', node.px(dy));
  127. }, data.postDelay));
  128. event.stopPropagation();
  129. });
  130. node.setEventHandler('mouseout', function (event) {
  131. data.stopTimers(node, data);
  132. var timer = setTimeout(function () { return adaptor_1.append(hidden_1, tool_1); }, data.clearDelay);
  133. data.clearTimer.set(node, timer);
  134. event.stopPropagation();
  135. });
  136. }
  137. }, maction_js_2.TooltipData]],
  138. ['statusline', [function (node, data) {
  139. var tip = node.childNodes[1];
  140. if (!tip)
  141. return;
  142. if (tip.node.isKind('mtext')) {
  143. var adaptor_2 = node.adaptor;
  144. var text_1 = tip.node.getText();
  145. adaptor_2.setAttribute(node.element, 'data-statusline', text_1);
  146. node.setEventHandler('mouseover', function (event) {
  147. if (data.status === null) {
  148. var body = adaptor_2.body(adaptor_2.document);
  149. data.status = adaptor_2.append(body, node.html('mjx-status', {}, [node.text(text_1)]));
  150. }
  151. event.stopPropagation();
  152. });
  153. node.setEventHandler('mouseout', function (event) {
  154. if (data.status) {
  155. adaptor_2.remove(data.status);
  156. data.status = null;
  157. }
  158. event.stopPropagation();
  159. });
  160. }
  161. }, {
  162. status: null
  163. }]]
  164. ]);
  165. return SVGmaction;
  166. }((0, maction_js_1.CommonMactionMixin)(Wrapper_js_1.SVGWrapper)));
  167. exports.SVGmaction = SVGmaction;
  168. //# sourceMappingURL=maction.js.map