Merge pull request #621 from mathjax/fix-smallmatrix

Handle scaled table rows (for smallmatrix) properly in CHTML and SVG

Author: dpvc

ts/output/chtml/Wrappers/mtable.ts

@@ -209,7 +209,8 @@ CommonMtableMixin<CHTMLmtd<any, any, any>, CHTMLmtr<any, any, any>, CHTMLConstru
    *   of the column space.)
    */
   protected handleColumnSpacing() {
-    const spacing = this.getEmHalfSpacing(this.fSpace[0], this.cSpace);
+    const scale = (this.childNodes[0] ? 1 / this.childNodes[0].getBBox().rscale : 1);
+    const spacing = this.getEmHalfSpacing(this.fSpace[0], this.cSpace, scale);
     const frame = this.frame;
     //
     //  For each row...
@@ -281,7 +282,8 @@ CommonMtableMixin<CHTMLmtd<any, any, any>, CHTMLmtr<any, any, any>, CHTMLConstru
    *   of the row space.)
    */
   protected handleRowSpacing() {
-    const spacing = this.getEmHalfSpacing(this.fSpace[1], this.rSpace);
+    const scale = (this.childNodes[0] ? 1 / this.childNodes[0].getBBox().rscale : 1);
+    const spacing = this.getEmHalfSpacing(this.fSpace[1], this.rSpace, scale);
     const frame = this.frame;
     //
     //  For each row...

ts/output/common/Wrappers/mtable.ts

@@ -257,10 +257,11 @@ export interface CommonMtable<C extends AnyWrapper, R extends CommonMtr<C>> exte
   /**
    * @param {number} fspace   The frame spacing to use
    * @param {number[]} space  The array of spacing values to convert to strings
+   * @param {number} scale    A scaling factor to use for the sizes
    * @return {string[]}       The half-spacing as stings with units of "em"
    *                           with frame spacing at the beginning and end
    */
-  getEmHalfSpacing(fspace: number, space: number[]): string[];
+  getEmHalfSpacing(fspace: number, space: number[], scale?: number): string[];
 
   /**
    * @return {number[]}   The half-spacing for rows with frame spacing at the ends
@@ -1007,15 +1008,16 @@ export function CommonMtableMixin<
     /**
      * @param {number} fspace   The frame spacing to use
      * @param {number[]} space  The array of spacing values to convert to strings
+     * @param {number} scale    A scaling factor to use for the sizes
      * @return {string[]}       The half-spacing as stings with units of "em"
      *                           with frame spacing at the beginning and end
      */
-    public getEmHalfSpacing(fspace: number, space: number[]): string[] {
+    public getEmHalfSpacing(fspace: number, space: number[], scale: number = 1): string[] {
       //
       //  Get the column spacing values, and add the frame spacing values at the left and right
       //
-      const fspaceEm = this.em(fspace);
-      const spaceEm = this.addEm(space, 2);
+      const fspaceEm = this.em(fspace * scale);
+      const spaceEm = this.addEm(space, 2 / scale);
       spaceEm.unshift(fspaceEm);
       spaceEm.push(fspaceEm);
       return spaceEm;

ts/output/svg/Wrappers/mtr.ts

@@ -107,13 +107,14 @@ CommonMtrMixin<SVGmtd<any, any, any>, SVGConstructor<any, any, any>>(SVGWrapper)
     const cSpace = this.parent.getColumnHalfSpacing();
     const cLines = [this.parent.fLine, ...this.parent.cLines, this.parent.fLine];
     const cWidth = this.parent.getComputedWidths();
+    const scale = 1 / this.getBBox().rscale;
     let x = cLines[0];
     for (let i = 0; i < this.numCells; i++) {
       const child = this.getChild(i);
       child.toSVG(svg);
       x += this.placeCell(child, {
-        x: x, y: 0, lSpace: cSpace[i], rSpace: cSpace[i + 1], w: cWidth[i],
-        lLine: cLines[i], rLine: cLines[i + 1]
+        x: x, y: 0, lSpace: cSpace[i] * scale, rSpace: cSpace[i + 1] * scale, w: cWidth[i] * scale,
+        lLine: cLines[i] * scale, rLine: cLines[i + 1] * scale
       });
     }
   }
@@ -125,26 +126,28 @@ CommonMtrMixin<SVGmtd<any, any, any>, SVGConstructor<any, any, any>>(SVGWrapper)
    */
   public placeCell(cell: SVGmtd<N, T, D>, sizes: SizeData): number {
     const {x, y, lSpace, w, rSpace, lLine, rLine} = sizes;
-    const [dx, dy] = cell.placeCell(x + lSpace, y, w, this.H, this.D);
+    const scale = 1 / this.getBBox().rscale;
+    const [h, d] = [this.H * scale, this.D * scale];
+    const [t, b] = [this.tSpace * scale, this.bSpace * scale];
+    const [dx, dy] = cell.placeCell(x + lSpace, y, w, h, d);
     const W = lSpace + w + rSpace;
-    const [H, D] = [this.H + this.tSpace, this.D + this.bSpace];
-    cell.placeColor(-(dx + lSpace + lLine / 2), -(D + this.bLine / 2 + dy),
-                    W + (lLine + rLine) / 2, H + D + (this.tLine + this.bLine) / 2);
+    cell.placeColor(-(dx + lSpace + lLine / 2), -(d + b + dy), W + (lLine + rLine) / 2, h + d + t + b);
     return W + rLine;
   }
 
   /**
    * Expand the backgound color to fill the entire row
    */
   protected placeColor() {
+    const scale = 1 / this.getBBox().rscale;
     const adaptor = this.adaptor;
     const child = adaptor.firstChild(this.element);
     if (child && adaptor.kind(child) === 'rect' && adaptor.getAttribute(child, 'data-bgcolor')) {
-      const [TL, BL] = [this.tLine / 2, this.bLine / 2];
-      const [TS, BS] = [this.tSpace, this.bSpace];
-      const [H, D] = [this.H, this.D];
+      const [TL, BL] = [(this.tLine / 2) * scale, (this.bLine / 2) * scale];
+      const [TS, BS] = [this.tSpace * scale, this.bSpace * scale];
+      const [H, D] = [this.H * scale, this.D * scale];
       adaptor.setAttribute(child, 'y', this.fixed(-(D + BS + BL)));
-      adaptor.setAttribute(child, 'width', this.fixed(this.parent.getWidth()));
+      adaptor.setAttribute(child, 'width', this.fixed(this.parent.getWidth() * scale));
       adaptor.setAttribute(child, 'height', this.fixed(TL + TS + H + D + BS + BL));
     }
   }