Fix issue #24: render \oiint and \oiint correctly (#25)

CurriculumAssociates · Jan 5, 2021 · 73a209a · 73a209a
1 parent f9a5472
commit 73a209a
Show file tree

Hide file tree

Showing 3 changed files with 184 additions and 0 deletions.
diff --git a/src/common/VirtualNodeBuilder.js b/src/common/VirtualNodeBuilder.js
@@ -155,6 +155,23 @@ export default class VirtualNodeBuilder {
       const virtualSvg = node
       const state = this._state
       const height = (+virtualSvg.attributes.height.replace('em', '')) * this._state.em
+      if (virtualSvg.attributes.style) {
+        // for `\oiint`, the width gets specified in a style="xx.xxem" attribute
+        // however this causes it to become rendered vert small as em isn't
+        // scaled properly; we can either remove the style attribute and let
+        // the externally-set height determine the bounds, or we can scale the
+        // em similar to what is done to the height earlier in this function.
+        // We do the former, while adding a console warning in case another
+        // (unexpected) condition is encountered - in which case the developer
+        // should handle this new case accordingly.
+        if (!/^width:[+-]?(?:[0-9]*[.])?[0-9]+em$/.test(virtualSvg.attributes.style)) {
+          console.warn('Unsupported SVG node explicit style attribute', virtualSvg.attributes.style);
+        }
+        else {
+          // width will be determined by height
+          delete virtualSvg.attributes.style;
+        }
+      }
       virtualSvg.attributes.height = height
       virtualSvg.attributes.fill = this._state.color
       const svgNode = new SvgNode(virtualSvg, state.minWidth, state.classes)

diff --git a/test/unit/tests/NodeBuilder.test.js b/test/unit/tests/NodeBuilder.test.js
@@ -37,6 +37,11 @@ describe('VirtualNodeBuilder', function () {
         const root = builder.build().rootNode
         expect(root.toJSON()).toMatchSnapshot()
       })
+      it('should build a circular svg path over double integral sign with correct style width', function() {
+        const builder = new VirtualNodeBuilder('\\oiint', getDefaultOptions())
+        const root = builder.build().rootNode
+        expect(root.toJSON()).toMatchSnapshot()
+      })
       it('should build a table with vertical and horizontal separators', function () {
         const latex = '\\begin{array}{|l|c|r|} \\hline left & center & right \\\\ \\hline a & b & c \\\\ \\hline \\end{array}'
         const builder = new VirtualNodeBuilder(latex, getDefaultOptions())

diff --git a/test/unit/tests/__snapshots__/NodeBuilder.test.js.snap b/test/unit/tests/__snapshots__/NodeBuilder.test.js.snap
@@ -1162,6 +1162,168 @@ Object {
 }
 `;
 
+exports[`VirtualNodeBuilder #build rootNode should build a circular svg path over double integral sign with correct style width 1`] = `
+Object {
+  "alignment": "center",
+  "bounds": Object {
+    "height": 32.515999999999984,
+    "width": 51.1116,
+    "x": 0,
+    "y": -0.04400000000001114,
+  },
+  "classes": Array [],
+  "margin": Object {
+    "left": 0,
+    "right": 0,
+  },
+  "nodes": Array [
+    Object {
+      "bounds": Object {
+        "height": 32.515999999999984,
+        "width": 51.1116,
+        "x": 0,
+        "y": -0.04400000000001114,
+      },
+      "classes": Array [],
+      "margin": Object {
+        "left": 0,
+        "right": 0,
+      },
+      "nodes": Array [
+        Object {
+          "bounds": Object {
+            "height": 0,
+            "width": 19.5558,
+            "x": 0,
+            "y": 0,
+          },
+          "classes": Array [],
+          "margin": Object {
+            "left": 0,
+            "right": 0,
+          },
+          "type": "HPaddingNode",
+        },
+        Object {
+          "alignment": null,
+          "bounds": Object {
+            "height": 32.515999999999984,
+            "width": 31.5558,
+            "x": 19.5558,
+            "y": -0.04400000000001114,
+          },
+          "classes": Array [],
+          "margin": Object {
+            "left": 0,
+            "right": 0,
+          },
+          "nodes": Array [
+            Object {
+              "bounds": Object {
+                "height": 0.04400000000001114,
+                "width": 31.5558,
+                "x": 19.5558,
+                "y": -0.04400000000001114,
+              },
+              "classes": Array [],
+              "margin": Object {
+                "left": 0,
+                "right": 0,
+              },
+              "nodes": Array [
+                Object {
+                  "bounds": Object {
+                    "height": 0,
+                    "width": 12,
+                    "x": 19.5558,
+                    "y": -0.04400000000001114,
+                  },
+                  "classes": Array [],
+                  "color": "black",
+                  "font": "normal normal 44px KaTeX_Size2",
+                  "margin": Object {
+                    "left": 0,
+                    "right": 0,
+                  },
+                  "text": "∬",
+                  "type": "TextNode",
+                },
+                Object {
+                  "bounds": Object {
+                    "height": 0,
+                    "width": 19.5558,
+                    "x": 31.5558,
+                    "y": 0,
+                  },
+                  "classes": Array [],
+                  "margin": Object {
+                    "left": 0,
+                    "right": 0,
+                  },
+                  "type": "HPaddingNode",
+                },
+              ],
+              "type": "VerticalListRow",
+            },
+            Object {
+              "bounds": Object {
+                "height": 28.996000000000002,
+                "width": 31.5558,
+                "x": 19.5558,
+                "y": 3.4759999999999707,
+              },
+              "classes": Array [],
+              "margin": Object {
+                "left": 0,
+                "right": 0,
+              },
+              "nodes": Array [
+                Object {
+                  "bounds": Object {
+                    "height": 28.996000000000002,
+                    "width": 31.5558,
+                    "x": 19.5558,
+                    "y": 3.4759999999999707,
+                  },
+                  "classes": Array [],
+                  "margin": Object {
+                    "left": 0,
+                    "right": 0,
+                  },
+                  "minWidth": 0,
+                  "type": "SvgNode",
+                  "virtualHtmlNode": e {
+                    "attributes": Object {
+                      "fill": "black",
+                      "height": 28.996000000000002,
+                      "preserveAspectRatio": "xMinYMin",
+                      "viewBox": "0 0 1472 659",
+                      "width": 31.5558,
+                    },
+                    "children": Array [
+                      e {
+                        "alternate": undefined,
+                        "pathName": "oiintSize2",
+                      },
+                    ],
+                  },
+                },
+              ],
+              "type": "VerticalListRow",
+            },
+          ],
+          "rowStart": 19.5558,
+          "type": "VerticalList",
+        },
+      ],
+      "type": "VerticalListRow",
+    },
+  ],
+  "rowStart": 0,
+  "type": "VerticalList",
+}
+`;
+
 exports[`VirtualNodeBuilder #build rootNode should build a fraction with nulldelim spacing 1`] = `
 Object {
   "alignment": "center",