math.ts 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /*************************************************************
  2. *
  3. * Copyright (c) 2018-2022 The MathJax Consortium
  4. *
  5. * Licensed under the Apache License, Version 2.0 (the "License");
  6. * you may not use this file except in compliance with the License.
  7. * You may obtain a copy of the License at
  8. *
  9. * http://www.apache.org/licenses/LICENSE-2.0
  10. *
  11. * Unless required by applicable law or agreed to in writing, software
  12. * distributed under the License is distributed on an "AS IS" BASIS,
  13. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. * See the License for the specific language governing permissions and
  15. * limitations under the License.
  16. */
  17. /**
  18. * @fileoverview Implements the SVGmath wrapper for the MmlMath object
  19. *
  20. * @author dpvc@mathjax.org (Davide Cervone)
  21. */
  22. import {SVGWrapper, SVGConstructor} from '../Wrapper.js';
  23. import {CommonMathMixin} from '../../common/Wrappers/math.js';
  24. import {MmlMath} from '../../../core/MmlTree/MmlNodes/math.js';
  25. import {StyleList} from '../../../util/StyleList.js';
  26. import {BBox} from '../../../util/BBox.js';
  27. /*****************************************************************/
  28. /**
  29. * The SVGmath wrapper for the MmlMath object
  30. *
  31. * @template N The HTMLElement node class
  32. * @template T The Text node class
  33. * @template D The Document class
  34. */
  35. // @ts-ignore
  36. export class SVGmath<N, T, D> extends
  37. CommonMathMixin<SVGConstructor<any, any, any>>(SVGWrapper) {
  38. /**
  39. * The math wrapper
  40. */
  41. public static kind = MmlMath.prototype.kind;
  42. /**
  43. * @overreide
  44. */
  45. public static styles: StyleList = {
  46. 'mjx-container[jax="SVG"][display="true"]': {
  47. display: 'block',
  48. 'text-align': 'center',
  49. margin: '1em 0'
  50. },
  51. 'mjx-container[jax="SVG"][display="true"][width="full"]': {
  52. display: 'flex'
  53. },
  54. 'mjx-container[jax="SVG"][justify="left"]': {
  55. 'text-align': 'left'
  56. },
  57. 'mjx-container[jax="SVG"][justify="right"]': {
  58. 'text-align': 'right'
  59. }
  60. };
  61. /**
  62. * @override
  63. */
  64. public toSVG(parent: N) {
  65. super.toSVG(parent);
  66. const adaptor = this.adaptor;
  67. const display = (this.node.attributes.get('display') === 'block');
  68. if (display) {
  69. adaptor.setAttribute(this.jax.container, 'display', 'true');
  70. this.handleDisplay();
  71. }
  72. if (this.jax.document.options.internalSpeechTitles) {
  73. this.handleSpeech();
  74. }
  75. }
  76. /**
  77. * Set the justification, and get the minwidth and shift needed
  78. * for the displayed equation.
  79. */
  80. protected handleDisplay() {
  81. const [align, shift] = this.getAlignShift();
  82. if (align !== 'center') {
  83. this.adaptor.setAttribute(this.jax.container, 'justify', align);
  84. }
  85. if (this.bbox.pwidth === BBox.fullWidth) {
  86. this.adaptor.setAttribute(this.jax.container, 'width', 'full');
  87. if (this.jax.table) {
  88. let {L, w, R} = this.jax.table.getOuterBBox();
  89. if (align === 'right') {
  90. R = Math.max(R || -shift, -shift);
  91. } else if (align === 'left') {
  92. L = Math.max(L || shift, shift);
  93. } else if (align === 'center') {
  94. w += 2 * Math.abs(shift);
  95. }
  96. this.jax.minwidth = Math.max(0, L + w + R);
  97. }
  98. } else {
  99. this.jax.shift = shift;
  100. }
  101. }
  102. /**
  103. * Handle adding speech to the top-level node, if any.
  104. */
  105. protected handleSpeech() {
  106. const adaptor = this.adaptor;
  107. const attributes = this.node.attributes;
  108. const speech = (attributes.get('aria-label') || attributes.get('data-semantic-speech')) as string;
  109. if (speech) {
  110. const id = this.getTitleID();
  111. const label = this.svg('title', {id}, [this.text(speech)]);
  112. adaptor.insert(label, adaptor.firstChild(this.element));
  113. adaptor.setAttribute(this.element, 'aria-labeledby', id);
  114. adaptor.removeAttribute(this.element, 'aria-label');
  115. for (const child of this.childNodes[0].childNodes) {
  116. adaptor.setAttribute(child.element, 'aria-hidden', 'true');
  117. }
  118. }
  119. }
  120. /**
  121. * @return {string} A unique ID to use for aria-labeledby title elements
  122. */
  123. protected getTitleID(): string {
  124. return 'mjx-svg-title-' + String(this.jax.options.titleID++);
  125. }
  126. /**
  127. * @override
  128. */
  129. public setChildPWidths(recompute: boolean, w: number = null, _clear: boolean = true) {
  130. return super.setChildPWidths(recompute,
  131. this.parent ? w : this.metrics.containerWidth / this.jax.pxPerEm,
  132. false);
  133. }
  134. }