wip: support for TeX registers

timedgqb · May 19, 2021 · b95ee70 · b95ee70
1 parent fe9e6da
commit b95ee70
Show file tree

Hide file tree

Showing 27 changed files with 1,021 additions and 503 deletions.
diff --git a/examples/test-cases/index.html b/examples/test-cases/index.html
@@ -53,7 +53,80 @@
       .math {
         display: none;
       }
-    </style>
+      /* .buttonbar button { */
+      button {
+          background: none;
+          border: 1px solid rgba(0, 0, 0, 0.12);
+          border-radius: 4px;
+          color: #0066ce;
+          fill: currentColor;
+          position: relative;
+          height: 36px;
+          line-height: 36px;
+          margin: 0 18px 0 0;
+          min-width: 64px;
+          padding: 0 16px;
+          display: inline-block;
+          overflow: hidden;
+          will-change: box-shadow;
+          transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),
+              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+              color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+          outline: none;
+          cursor: pointer;
+          text-decoration: none;
+          text-align: center;
+          vertical-align: middle;
+          -webkit-user-select: none;
+          user-select: none;
+
+          font-size: 16px;
+          letter-spacing: 0.08929em;
+          text-transform: uppercase;
+          box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2),
+              0 2px 2px 0 rgba(0, 0, 0, 0.14),
+              0 3px 1px -2px rgba(0, 0, 0, 0.12);
+      }
+
+      button:first-child {
+          margin-left: 0;
+      }
+
+      button:hover {
+          background-color: rgba(0, 0, 0, 0.08);
+      }
+
+      button:active {
+          background-color: white;
+      }
+
+      button.primary,
+      button.active {
+          color: white;
+          fill: currentColor;
+          background: #0066ce;
+      }
+
+      button.primary:hover {
+          background-color: rgba(0, 102, 206, 0.58);
+      }
+
+      button.primary:active {
+          color: #0066ce;
+          fill: currentColor;
+          background-color: white;
+      }
+
+      button.round {
+          width: 64px;
+          height: 64px;
+          border-radius: 50%;
+      }
+
+      .buttonbar {
+          margin-top: 1em;
+      }    
+  </style>
 </head>
 
 <body>
@@ -63,6 +136,8 @@ <h1>MathLive Testing Playground</h1>
     <main class='centered' tabindex="0">
 
       <span class='math'>$$\dfrac{\unicode{"2B1A}}{\unicode{"2B1A}}$$</span>
+$$        \frac1c + \bbox[2em, yellow,border:solid 5px red]{\sqrt[3]{x}} = \binom{C}{k}$$
+
 
       <!-- <math-field 
         class="mathfield" style="max-width: 640px; width:100%" 
@@ -75,7 +150,8 @@ <h1>MathLive Testing Playground</h1>
         smart-fence="true"
         horizontal-spacing-scale="1.2"
         virtual-keyboard-mode="manual">
-        123\,456
+        \frac1c + \bbox[2em,yellow,border:solid 5px red]{\sqrt[3]{x}} = \binom{C}{k}
+        <!-- -0-0=-0(0) -->
 
         <!-- \htmlData{partid=14}{\left(} 3 + 5 \htmlData{partid=15}{\right)} = \htmlData{partid=16}{\left(} 2x + 5 \htmlData{partid=17}{\right)}     -->
 
@@ -217,6 +293,14 @@ <h2>MathML</h2>
         <h2>MASTON</h2>
         <div class="output" id="maston"></div>
 
+        <div id='insertion-point'></div>
+        <div class='buttonbar'>
+          <button class='button' id='mf-button-hide'>Hide</button>
+          <button id='mf-button-show'>Show</button>
+        </div>
+
+
+
       </main>
 
     <script type="module">
@@ -233,6 +317,21 @@ <h2>MASTON</h2>
       //  console.log( convertLatexToMarkup('\\int _{x}^{\\infty }'));
 
 
+      const mfi = new MathfieldElement();
+      mfi.value = 'f(x) = \\frac{1}{x}';
+      mfi.virtualKeyboardMode = 'manual';
+      document.getElementById('insertion-point').appendChild(mfi);
+
+      document.getElementById('mf-button-hide').addEventListener('click', () => {
+        mfi.remove();
+        console.log(mfi.value);
+      });
+      document.getElementById('mf-button-show').addEventListener('click', () => {
+        console.log('before ', mfi.value);
+        document.getElementById('insertion-point').appendChild(mfi);
+        console.log('after ', mfi.value);
+      });
+
       let gSearchLatex;
 
       function applySearchTerm() {

diff --git a/src/core-atoms/array.ts b/src/core-atoms/array.ts
@@ -13,6 +13,8 @@ import { Context } from '../core/context';
 import { joinLatex } from '../core/tokenizer';
 import { PlaceholderAtom } from './placeholder';
 import { AXIS_HEIGHT, BASELINE_SKIP } from '../core/font-metrics';
+import { Dimension } from '../public/core';
+import { convertDimensionToEm } from '../core/registers-utils';
 
 export type ColumnFormat =
   | {
@@ -191,7 +193,7 @@ function normalizeArray(
 export class ArrayAtom extends Atom {
   array: Atom[][][];
   environmentName: string;
-  rowGaps: number[];
+  rowGaps: Dimension[];
   colFormat: ColumnFormat[];
   arraystretch?: number;
   arraycolsep?: number;
@@ -204,7 +206,7 @@ export class ArrayAtom extends Atom {
   constructor(
     envName: string,
     array: Atom[][][],
-    rowGaps: number[],
+    rowGaps: Dimension[],
     options: ArrayAtomConstructorOptions = {}
   ) {
     super('array');
@@ -318,12 +320,14 @@ export class ArrayAtom extends Atom {
 
     const innerContext = new Context(context, this.style, this.mathstyleName);
 
+    const arrayRuleWidth = innerContext.getRegisterAsEm('arrayrulewidth');
+    const arrayColSep = innerContext.getRegisterAsEm('arraycolsep');
+    const doubleRuleSep = innerContext.getRegisterAsEm('doublerulesep');
+
     // Row spacing
     const arraystretch = this.arraystretch;
     let arraycolsep =
-      typeof this.arraycolsep === 'number'
-        ? this.arraycolsep
-        : context.metrics.arrayColSep;
+      typeof this.arraycolsep === 'number' ? this.arraycolsep : arrayColSep;
     if (this.colSeparationType === 'small') {
       // We're in a {smallmatrix}. Default column space is \thickspace,
       // i.e. 5/18em = 0.2778em, per amsmath.dtx for {smallmatrix}.
@@ -364,7 +368,7 @@ export class ArrayAtom extends Atom {
         outrow.cells.push(elt);
       }
 
-      let gap = this.rowGaps[r] ?? 0;
+      let gap: number = convertDimensionToEm(this.rowGaps[r]) ?? 0;
       if (gap > 0) {
         // \@argarraycr
         gap += arstrutDepth;
@@ -466,7 +470,7 @@ export class ArrayAtom extends Atom {
         separator.setStyle('height', totalHeight, 'em');
         separator.setStyle(
           'border-right',
-          `${context.metrics.arrayRuleWidth}em ${colDesc.separator} currentColor`
+          `${arrayRuleWidth}em ${colDesc.separator} currentColor`
         );
         // We have box-sizing border-box, no need to correct the margin
         // separator.setStyle(
@@ -476,9 +480,9 @@ export class ArrayAtom extends Atom {
         separator.setStyle('vertical-align', -(totalHeight - offset), 'em');
         let gap = 0;
         if (previousColRule) {
-          gap = context.metrics.doubleRuleSep - context.metrics.arrayRuleWidth;
+          gap = doubleRuleSep - arrayRuleWidth;
         } else if (previousColContent) {
-          gap = arraycolsep - context.metrics.arrayRuleWidth;
+          gap = arraycolsep - arrayRuleWidth;
         }
         separator.left = gap;
         cols.push(separator);

diff --git a/src/core-atoms/box.ts b/src/core-atoms/box.ts
@@ -1,14 +1,15 @@
 import { Atom, ToLatexOptions } from '../core/atom-class';
 import { Box } from '../core/box';
 import { Context } from '../core/context';
+import { convertToDimension } from '../core/parser';
 import { Style } from '../public/core';
-
+import { convertDimensionToEm } from '../core/registers-utils';
 export class BoxAtom extends Atom {
   readonly framecolor?: string;
   readonly verbatimFramecolor?: string;
   readonly backgroundcolor?: string;
   readonly verbatimBackgroundcolor?: string;
-  readonly padding?: number;
+  readonly padding?: string;
   readonly border?: string;
 
   constructor(
@@ -19,7 +20,7 @@ export class BoxAtom extends Atom {
       verbatimFramecolor?: string;
       backgroundcolor?: string;
       verbatimBackgroundcolor?: string;
-      padding?: number;
+      padding?: string;
       border?: string;
       style: Style;
       serialize?: (atom: BoxAtom, options: ToLatexOptions) => string;
@@ -43,10 +44,16 @@ export class BoxAtom extends Atom {
   render(parentContext: Context): Box {
     const context = new Context(parentContext, this.style);
 
+    const fboxsep = convertDimensionToEm(
+      context.getRegisterAsDimension('fboxsep')
+    );
     // The padding extends outside of the base
     const padding =
-      typeof this.padding === 'number' ? this.padding : context.metrics.fboxSep;
-
+      this.padding === undefined
+        ? fboxsep
+        : convertDimensionToEm(
+            convertToDimension(this.padding, parentContext.registers)
+          );
     // Base is the main content "inside" the box
     const content = Atom.createBox(parentContext, this.body);
     content.setStyle('vertical-align', -content.height, 'em');
@@ -67,7 +74,7 @@ export class BoxAtom extends Atom {
       box.setStyle('width', '100%');
     } else {
       box.setStyle('width', `calc(100% + ${2 * padding}em)`);
-      box.setStyle('top', context.metrics.fboxSep, 'em'); // empirical
+      box.setStyle('top', fboxsep, 'em'); // empirical
       box.setStyle('left', -padding, 'em');
     }
 
@@ -80,7 +87,9 @@ export class BoxAtom extends Atom {
     if (this.framecolor) {
       box.setStyle(
         'border',
-        `${context.metrics.fboxRule}em solid ${this.framecolor}`
+        `${convertDimensionToEm(
+          context.getRegisterAsDimension('fboxrule')
+        )}em solid ${this.framecolor}`
       );
     }