Add support for stretchy cells in tables

dpvc · dpvc · commit 0ec2894f6e2e · 2017-10-15T22:35:33.000-04:00
diff --git a/mathjax3-ts/output/chtml/Wrappers/mo.ts b/mathjax3-ts/output/chtml/Wrappers/mo.ts
@@ -347,16 +347,16 @@ export class CHTMLmo extends CHTMLWrapper {
      * @return{number[]}        The height and depth for the vertically stretched delimiter
      */
     protected getBaseline(WHD: number[], HD: number, C: DelimiterData) {
-        const hasWHD = (WHD.length === 2);
-        const symmetric = (hasWHD && this.node.attributes.get('symmetric'));
+        const hasWHD = (WHD.length === 2 && WHD[0] + WHD[1] === HD);
+        const symmetric = this.node.attributes.get('symmetric');
         const [H, D] = (hasWHD ? WHD : [HD, 0]);
         let [h, d] = [H + D, 0];
         if (symmetric) {
             //
             //  Center on the math axis
             //
             const a = this.font.params.axis_height;
-            h = 2 * Math.max(H - a, D + a);
+            if (hasWHD) h = 2 * Math.max(H - a, D + a);
             d = h / 2 - a;
         } else if (hasWHD) {
             //
diff --git a/mathjax3-ts/output/chtml/Wrappers/mtable.ts b/mathjax3-ts/output/chtml/Wrappers/mtable.ts
@@ -28,6 +28,7 @@ import {BBox} from '../BBox.js';
 import {MmlNode} from '../../../core/MmlTree/MmlNode.js';
 import {MmlMtable} from '../../../core/MmlTree/MmlNodes/mtable.js';
 import {StyleList} from '../CssStyles.js';
+import {DIRECTION} from '../FontData.js';
 
 /*****************************************************************/
 /*
@@ -71,6 +72,58 @@ export class CHTMLmtable extends CHTMLWrapper {
         //
         this.numCols = this.childNodes.map(row => (row as CHTMLmtr).numCells).reduce((a, b) => Math.max(a, b));
         this.numRows = this.childNodes.length;
+        //
+        // Stretch the columns (rows are already taken care of in the CHTMLmtr wrapper)
+        //
+        for (let i = 0; i < this.numCols; i++) {
+            this.stretchColumn(i);
+        }
+    }
+
+    /*
+     * Handle horizontal stretching within the ith column
+     */
+    protected stretchColumn(i: number) {
+        let stretchy: CHTMLWrapper[] = [];
+        //
+        //  Locate and count the stretchy children
+        //
+        for (const row of (this.childNodes as CHTMLmtr[])) {
+            const cell = row.childNodes[i + row.firstCell];
+            if (cell) {
+                const child = cell.childNodes[0];
+                if (child.stretch.dir === DIRECTION.None && child.canStretch(DIRECTION.Horizontal)) {
+                    stretchy.push(child);
+                }
+            }
+        }
+        let count = stretchy.length;
+        let nodeCount = this.childNodes.length;
+        if (count && nodeCount > 1) {
+            let W = 0;
+            //
+            //  If all the children are stretchy, find the largest one,
+            //  otherwise, find the width of the non-stretchy children.
+            //
+            let all = (count > 1 && count === nodeCount);
+            for (const row of (this.childNodes as CHTMLmtr[])) {
+                const cell = row.childNodes[i + row.firstCell];
+                if (cell) {
+                    const child = cell.childNodes[0];
+                    const noStretch = (child.stretch.dir === DIRECTION.None);
+                    if (all || noStretch) {
+                        const {w} = child.getBBox(noStretch);
+                        if (w > W) W = w;
+                    }
+                }
+            }
+            //
+            //  Stretch the stretchable children
+            //
+            for (const child of stretchy) {
+                child.coreMO().getStretchedVariant([W]);
+            }
+        }
     }
 
     /******************************************************************/
diff --git a/mathjax3-ts/output/chtml/Wrappers/mtr.ts b/mathjax3-ts/output/chtml/Wrappers/mtr.ts
@@ -26,7 +26,9 @@ import {CHTMLWrapper} from '../Wrapper.js';
 import {CHTMLWrapperFactory} from '../WrapperFactory.js';
 import {BBox} from '../BBox.js';
 import {MmlMtr, MmlMlabeledtr} from '../../../core/MmlTree/MmlNodes/mtr.js';
+import {MmlNode} from '../../../core/MmlTree/MmlNode.js';
 import {StyleList} from '../CssStyles.js';
+import {DIRECTION} from '../FontData.js';
 
 /*****************************************************************/
 /*
@@ -49,13 +51,73 @@ export class CHTMLmtr extends CHTMLWrapper {
         return this.childNodes.length;
     }
 
+    /*
+     * @return{number}   The index of the first table cell (overridden in mlabeledtr)
+     */
+    get firstCell() {
+        return 0;
+    }
+
     /*
      * @return{BBox[]}  An array of the bounding boxes for the mtd's in the row
      */
     public getChildBBoxes() {
         return this.childNodes.map(cell => cell.getBBox());
     }
 
+    /*
+     * @override
+     * @constructor
+     */
+    constructor(factory: CHTMLWrapperFactory, node: MmlNode, parent: CHTMLWrapper = null) {
+        super(factory, node, parent);
+        this.stretchChildren();
+    }
+
+    /*
+     * Handle vertical stretching of cells to match height of
+     *  other cells in the row.
+     */
+    protected stretchChildren() {
+        let stretchy: CHTMLWrapper[] = [];
+        let children = (this.firstCell ? this.childNodes.slice(this.firstCell) : this.childNodes);
+        //
+        //  Locate and count the stretchy children
+        //
+        for (const mtd of children) {
+            const child = mtd.childNodes[0];
+            if (child.canStretch(DIRECTION.Vertical)) {
+                stretchy.push(child);
+            }
+        }
+        let count = stretchy.length;
+        let nodeCount = this.childNodes.length;
+        if (count && nodeCount > 1) {
+            let H = 0, D = 0;
+            //
+            //  If all the children are stretchy, find the largest one,
+            //  otherwise, find the height and depth of the non-stretchy
+            //  children.
+            //
+            let all = (count > 1 && count === nodeCount);
+            for (const mtd of children) {
+                const child = mtd.childNodes[0];
+                const noStretch = (child.stretch.dir === DIRECTION.None);
+                if (all || noStretch) {
+                    const {h, d} = child.getBBox(noStretch);
+                    if (h > H) H = h;
+                    if (d > D) D = d;
+                }
+            }
+            //
+            //  Stretch the stretchable children
+            //
+            for (const child of stretchy) {
+                child.coreMO().getStretchedVariant([H, D]);
+            }
+        }
+    }
+
 }
 
 /*****************************************************************/
@@ -96,6 +158,13 @@ export class CHTMLmlabeledtr extends CHTMLWrapper {
         return Math.max(0, this.childNodes.length - 1);
     }
 
+    /*
+     * @override
+     */
+    get firstCell() {
+        return 1;
+    }
+
     /*
      * @override
      */
diff --git a/mathjax3-ts/output/chtml/Wrappers/scriptbase.ts b/mathjax3-ts/output/chtml/Wrappers/scriptbase.ts
@@ -284,7 +284,7 @@ export class CHTMLscriptbase extends CHTMLWrapper {
             let W = 0;
             //
             //  If all the children are stretchy, find the largest one,
-            //  otherwise, find the width of the non-stretchy  children.
+            //  otherwise, find the width of the non-stretchy children.
             //
             let all = (count > 1 && count === nodeCount);
             for (const child of this.childNodes) {
