svg_highlighter.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.SvgHighlighter = void 0;
  4. const DomUtil = require("../common/dom_util.js");
  5. const abstract_highlighter_js_1 = require("./abstract_highlighter.js");
  6. class SvgHighlighter extends abstract_highlighter_js_1.AbstractHighlighter {
  7. constructor() {
  8. super();
  9. this.mactionName = 'mjx-svg-maction';
  10. }
  11. highlightNode(node) {
  12. let info;
  13. if (this.isHighlighted(node)) {
  14. info = {
  15. node: node.previousSibling || node,
  16. background: node.style.backgroundColor,
  17. foreground: node.style.color
  18. };
  19. return info;
  20. }
  21. if (node.tagName === 'svg') {
  22. const info = {
  23. node: node,
  24. background: node.style.backgroundColor,
  25. foreground: node.style.color
  26. };
  27. node.style.backgroundColor = this.colorString().background;
  28. node.style.color = this.colorString().foreground;
  29. return info;
  30. }
  31. const rect = DomUtil.createElementNS('http://www.w3.org/2000/svg', 'rect');
  32. const padding = 40;
  33. let bbox;
  34. if (node.nodeName === 'use') {
  35. const g = DomUtil.createElementNS('http://www.w3.org/2000/svg', 'g');
  36. node.parentNode.insertBefore(g, node);
  37. g.appendChild(node);
  38. bbox = g.getBBox();
  39. g.parentNode.replaceChild(node, g);
  40. }
  41. else {
  42. bbox = node.getBBox();
  43. }
  44. rect.setAttribute('x', (bbox.x - padding).toString());
  45. rect.setAttribute('y', (bbox.y - padding).toString());
  46. rect.setAttribute('width', (bbox.width + 2 * padding).toString());
  47. rect.setAttribute('height', (bbox.height + 2 * padding).toString());
  48. const transform = node.getAttribute('transform');
  49. if (transform) {
  50. rect.setAttribute('transform', transform);
  51. }
  52. rect.setAttribute('fill', this.colorString().background);
  53. rect.setAttribute(this.ATTR, 'true');
  54. node.parentNode.insertBefore(rect, node);
  55. info = { node: rect, foreground: node.getAttribute('fill') };
  56. node.setAttribute('fill', this.colorString().foreground);
  57. return info;
  58. }
  59. setHighlighted(node) {
  60. if (node.tagName === 'svg') {
  61. super.setHighlighted(node);
  62. }
  63. }
  64. unhighlightNode(info) {
  65. if ('background' in info) {
  66. info.node.style.backgroundColor = info.background;
  67. info.node.style.color = info.foreground;
  68. return;
  69. }
  70. info.foreground
  71. ? info.node.nextSibling.setAttribute('fill', info.foreground)
  72. : info.node.nextSibling.removeAttribute('fill');
  73. info.node.parentNode.removeChild(info.node);
  74. }
  75. isMactionNode(node) {
  76. let className = node.className || node.getAttribute('class');
  77. if (!className) {
  78. return false;
  79. }
  80. className =
  81. className.baseVal !== undefined
  82. ? className.baseVal
  83. : className;
  84. return className ? !!className.match(new RegExp(this.mactionName)) : false;
  85. }
  86. }
  87. exports.SvgHighlighter = SvgHighlighter;