npm - @simonklee/opentui-tex-native-source - Versions diffs - 0.2.0 - Mend

@simonklee/opentui-tex-native-source 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (529) hide show

package/native/vendor/microtex/platform/wasm/web/example/hello.js ADDED Viewed

@@ -0,0 +1,31 @@
+const helloDemo = `
+Hello from $\\MicroTeX$, welcome 🥰! $\\MicroTeX$ is a fast, cross-platform and embeddable
+$\\LaTeX$ (part of) rendering library.
+It supports complex math formula layout and rendering, for example, the Fourier transform:
+$F(\\omega)=\\int_{-\\infty}^{+\\infty}f(t)e^{-i\\omega_nt}dt$
+And inline formula, for example, for quadratic equation: $ax^2+bx+c=0$, as we know:
+$x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$.
+And inter-line formula, for example, the Maxwell equation:
+$$\\text{Maxwell equations:}\\left\\{
+\\begin{array}{ll}
+  \\Nabla\\cdot\\mathbf{E}=0 & \\Nabla\\times\\mathbf{E}=-\\frac{\\partial\\mathbf{B}}{\\partial t},\\\\
+  \\Nabla\\cdot\\mathbf{B}=0 & \\Nabla\\times\\mathbf{B}=\\mu_0\\varepsilon_0\\frac{\\partial\\mathbf{E}}{\\partial t}.
+\\end{array}
+\\right.$$
+And fancy emojis:
+$$F(x) = \\displaystyle\\int_🙂^😀f(x)dx\\\\
+\\log_😄️😅️=💧️\\\\
+\\displaystyle\\sum_{i=0}^\\infty💰️=🤣️\\\\
+\\prod_{i=0}^\\infty i\\times💰️=😭️\\\\
+%ZWJ
+\\char"1f468+\\char"1f469+\\char"1f466=👨‍👩‍👦
+$$
+Finally: $$\\shadowbox{\\text{Have fun 🥰!}}$$
+`
+export {helloDemo};

package/native/vendor/microtex/platform/wasm/web/example/index.html ADDED Viewed

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="zh">
+<head>
+  <title>MicroTeX</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+<div class="container">
+  <!-- the top part -->
+  <div id="action-bar">
+    <label>Rendering Mode:</label>
+    <select id="rendering-mode" class="fonts">
+      <option value="SVG">SVG</option>
+      <option value="Canvas">Canvas</option>
+    </select>
+    <label>Mode:</label>
+    <select id="mode" class="fonts">
+      <option value="text">text</option>
+      <option value="LaTeX">LaTeX</option>
+    </select>
+    <label>Main font:</label>
+    <select id="main-font" class="fonts"></select>
+    <label>Math font:</label>
+    <select id="fonts" class="fonts"></select>
+    <label>Text size:</label>
+    <input
+        class="text-size" id="textsize"
+        type="number" min="5" max="100" step="2" value="23"/>
+    <button id="next">Next example</button>
+  </div>
+  <!-- the sections -->
+  <div id="section">
+    <div id="left">
+      <div id="wrapper"></div>
+    </div>
+    <div id="pan-resize"></div>
+    <div id="right">
+      <div id="editor"></div>
+    </div>
+  </div>
+  <script src="./index.js" type="module"></script>
+</div>
+</body>
+</html>

package/native/vendor/microtex/platform/wasm/web/example/index.js ADDED Viewed

@@ -0,0 +1,243 @@
+'use strict'
+import ace from 'ace-builds';
+import 'ace-builds/src-min-noconflict/mode-latex';
+import * as microtex from "../dist/microtex"
+import {examples} from "./examples";
+import * as utils from "./utils"
+import {helloDemo} from "./hello";
+let editor = null
+const fonts = [
+  "./res/xits/XITSMath-Regular.clm2",
+  "./res/lm-math/latinmodern-math.clm2",
+  "./res/tex-gyre/texgyredejavu-math.clm2",
+  "./res/firamath/FiraMath-Regular.clm2",
+  "./res/xits/XITS-Regular.clm2",
+  "./res/xits/XITS-Italic.clm2",
+  "./res/xits/XITS-Bold.clm2",
+  "./res/xits/XITS-BoldItalic.clm2"
+];
+microtex
+  .context
+  .init(fonts[0])
+  .then(_ => {
+    console.log("init finished...");
+    const str = hello();
+    initEditor(str);
+    listenResize();
+    listenEvents();
+  })
+  .then(_ => {
+    const p = fonts.slice(1).map(path => microtex.context.addFont(path));
+    return Promise.all(p);
+  })
+  .then(_ => {
+    initFontOptions();
+  });
+function hello() {
+  let hello = helloDemo;
+  const arg = utils.getQueryParam("tex");
+  if (arg != null) {
+    hello = arg;
+    if (arg.startsWith('"')) hello = hello.substring(1);
+    if (arg.endsWith('"')) hello = hello.substring(0, hello.length - 1);
+    const mode = document.getElementById("mode");
+    mode.selectedIndex = 1;
+  }
+  parse(hello);
+  return hello;
+}
+function initFontOptions() {
+  let selectMain = document.getElementById('main-font');
+  microtex.context.getMainFontFamilyNames().forEach(f => {
+    selectMain.add(new Option(f, f));
+  })
+  // special case: none fallback to math font
+  selectMain.add(new Option("none", "none"));
+  let selectMath = document.getElementById('fonts')
+  microtex.context.getMathFontNames().forEach(f => {
+    selectMath.add(new Option(f, f));
+  });
+}
+function initEditor(str) {
+  editor = ace.edit("editor");
+  editor.session.setMode("ace/mode/latex");
+  editor.getSession().setTabSize(2);
+  editor.setValue(str);
+  editor.getSession().on('change', () => parse(editor.getValue()));
+}
+function listenEvents() {
+  document.getElementById('main-font').onchange = () => {
+    const option = document.getElementById("main-font").value;
+    const name = option === "none" ? "" : option;
+    microtex.context.setMainFont(name);
+    parse(editor.getValue());
+  };
+  document.getElementById('fonts').onchange = () => {
+    const option = document.getElementById("fonts").value;
+    microtex.context.setMathFont(option);
+    parse(editor.getValue());
+  };
+  document.getElementById('textsize').onchange = () => {
+    parse(editor.getValue());
+  };
+  document.getElementById('next').onclick = () => {
+    if (!examples.isInited()) return;
+    let str = examples.next();
+    parse(str);
+    editor.setValue(str);
+  };
+  document.getElementById('mode').onchange = () => {
+    parse(editor.getValue());
+  };
+  document.getElementById('rendering-mode').onchange = () => {
+    parse(editor.getValue());
+  };
+}
+function listenResize() {
+  const left = document.getElementById('left');
+  const right = document.getElementById('right');
+  const section = document.getElementById('section');
+  const resize = document.getElementById('pan-resize');
+  let isDown = 0;
+  resize.addEventListener('mousedown', () => {
+    isDown = 1;
+    const move = e => {
+      if (isDown === 1) {
+        const w = section.getBoundingClientRect().width;
+        let x = e.clientX - section.getBoundingClientRect().left;
+        x = Math.min(Math.max(x, 100), w - 100);
+        left.style.flexBasis = x + "px";
+        right.style.flexBasis = (w - x) + "px";
+      } else {
+        end();
+      }
+    };
+    const end = () => {
+      isDown = 0;
+      document.body.removeEventListener('mousemove', move);
+      document.body.removeEventListener('mouseup', end);
+    };
+    document.body.addEventListener('mousemove', move);
+    document.body.addEventListener('mouseup', end);
+  });
+}
+function parse(str) {
+  const wrapper = document.getElementById("wrapper");
+  wrapper.removeAllChildren();
+  const mode = document.getElementById("mode").value;
+  if (mode === "text") {
+    parseText(wrapper, str);
+  } else {
+    parseRender(str, wrapper);
+  }
+}
+function parseText(container, str) {
+  const size = +document.getElementById("textsize").value;
+  let k = 0;
+  let p = createParagraph();
+  function createParagraph() {
+    let p = document.createElement("p");
+    p.style.fontSize = size + "px";
+    return p;
+  }
+  function appendText(end) {
+    const t = document.createTextNode(str.substring(k, end));
+    p.append(t);
+    k = end;
+  }
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    if (c === '\n' && i + 1 < str.length && str[i + 1] === '\n') {
+      i += 2;
+      appendText(i);
+      container.append(p);
+      p = createParagraph();
+    } else if (c === '$') {
+      let tex = "";
+      let inline = true;
+      if (i + 1 < str.length && str[i + 1] === '$') {
+        inline = false;
+        tex = str.takeUntil((j, x) => j > i + 1 && x === '$' && str[j - 1] === '$', i, true);
+      } else {
+        inline = true;
+        tex = str.takeUntil((j, x) => j > i && x === '$', i, true);
+      }
+      if (tex.length <= 0) continue;
+      appendText(i);
+      parseRender(tex, p, 2, inline);
+      i += tex.length - 1;
+      k += tex.length;
+    }
+  }
+  appendText(str.length);
+  container.append(p);
+}
+function parseRender(str, parent, padding = 8, inline = true) {
+  // get text size
+  const size = +document.getElementById("textsize").value * 1.2;
+  // get content width
+  let width = document.getElementById("wrapper").offsetWidth - padding * 2;
+  let r = null;
+  try {
+    r = microtex.context.parse(str, width, size, size / 3, 0xff3b3b3b, false);
+  } catch (e) {
+    console.log(e);
+    return;
+  }
+  const drawCanvas = () => {
+    const canvas = parent.attachCanvas(r, padding, inline);
+    adjustStyle(canvas, inline);
+    const ctx = canvas.getContext('2d');
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    r.draw(ctx, padding, padding);
+  };
+  const drawSvg = () => {
+    const svg = new microtex.SvgCanvas(r.getWidth() + padding * 2, r.getHeight() + padding * 2);
+    r.draw(svg, padding, padding);
+    const e = svg.getSvg();
+    e.style.verticalAlign = (-r.getDepth() - padding) + "px";
+    adjustStyle(e, inline);
+    parent.appendChild(e);
+  };
+  // rendering mode
+  const mode = document.getElementById('rendering-mode').value;
+  console.log(`rendering mode: ${mode}`)
+  if (mode === 'Canvas') {
+    drawCanvas();
+  } else {
+    drawSvg();
+  }
+  r.release();
+}
+function adjustStyle(e, inline) {
+  if (inline) return;
+  e.style.display = "block";
+  e.style.marginLeft = "auto";
+  e.style.marginRight = "auto";
+  e.style.marginTop = "8px";
+  e.style.marginBottom = "8px";
+}

package/native/vendor/microtex/platform/wasm/web/example/styles.css ADDED Viewed

@@ -0,0 +1,86 @@
+.container {
+  /* give the outermost container a predefined size */
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 8pt;
+  display: flex;
+  flex-direction: column;
+  border-radius: 6pt;
+  border: 2pt solid lightgray;
+}
+#section {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  /* for Firefox */
+  min-height: 0;
+}
+#left {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 50%;
+  overflow: auto;
+  min-height: 0;
+}
+#wrapper {
+  margin: 4px;
+}
+#right {
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: 50%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+#editor {
+  flex-basis: 100%;
+  font-family: monospace;
+  font-size: 16px;
+  line-height: 1.5;
+}
+#pan-resize {
+  flex-grow: 0;
+  flex-shrink: 0;
+  background-color: lightgray;
+  width: 2pt;
+  cursor: col-resize;
+}
+#action-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 8pt;
+  align-items: baseline;
+  border-radius: 4pt 4pt 0 0;
+  background-color: lightgray;
+}
+.fonts {
+  margin-left: 4px;
+  margin-right: 8px;
+}
+.text-size {
+  margin-left: 4px;
+  margin-right: 8px;
+}
+#next {
+  padding-left: 6pt;
+  padding-right: 6pt;
+}

package/native/vendor/microtex/platform/wasm/web/example/utils.js ADDED Viewed

@@ -0,0 +1,47 @@
+'use strict'
+HTMLElement.prototype.removeAllChildren = function () {
+  while (this.firstChild) {
+    this.removeChild(this.firstChild);
+  }
+}
+HTMLCanvasElement.prototype.fixDpi = function () {
+  const dpi = window.devicePixelRatio || 1;
+  if (dpi === 1) return;
+  const w = +this.style.width.slice(0, -2);
+  const h = +this.style.height.slice(0, -2);
+  this.width = Math.floor(w * dpi);
+  this.height = Math.floor(h * dpi);
+}
+HTMLElement.prototype.attachCanvas = function (render, padding, inline = true) {
+  const p = padding * 2;
+  const canvas = document.createElement("canvas");
+  canvas.style.width = (render.getWidth() + p) + "px";
+  canvas.style.height = (render.getHeight() + p) + "px";
+  canvas.width = render.getWidth() + p;
+  canvas.height = render.getHeight() + p;
+  canvas.style.verticalAlign = (-render.getDepth() - padding) + "px";
+  this.appendChild(canvas);
+  canvas.fixDpi();
+  return canvas;
+}
+String.prototype.takeUntil = function (stop, from = 0, inclusive = false) {
+  for (let i = from; i < this.length; i++) {
+    if (stop(i, this[i])) {
+      return this.substring(from, inclusive ? i + 1 : i);
+    }
+  }
+  return "";
+}
+function getQueryParam(name) {
+  const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+  const r = window.location.search.substr(1).match(reg);
+  if (r != null) return unescape(r[2]);
+  return null;
+}
+export {getQueryParam};