@mathzetta/inlinemath 0.0.0-stage → 0.2.0

package/src/edit.js

@@ -0,0 +1,96 @@
+/**
+ * Editing a part of a drawn expression in place: a text box opens over the part, holding the
+ * part as text; Enter puts what was typed back into the expression, Escape (or leaving it with
+ * something that doesn't read) changes nothing. Used by View.editable() and by the Markdown
+ * pages' textbox variables.
+ *
+ * The part is written as text by MathZetta's toText, which the caller passes in (import it
+ * from 'mathzetta/text'): Inline Math's core imports only 'mathzetta', 'mathzetta/speech' and
+ * 'mathzetta/calculate', so a buildless page's import map stays the same.
+ */
+
+import { bare } from './variables.js';
+
+/** A copy of `tree` (ids dropped) with the node at `path` replaced by `part`. */
+export function replaceAt(tree, path, part) {
+    const visit = (n, k) => (k === path.length
+        ? part
+        : { ...n, args: n.args.map((a, j) => (j === path[k] ? visit(a, k + 1) : a)) });
+    return bare(visit(tree, 0));
+}
+
+/**
+ * Open a text box over `element` holding `text`.
+ * @param {Element} element the drawn part
+ * @param {string} text what the box starts with
+ * @param {object} how
+ * @param {(text: string) => object} how.parse the typed text → a tree (throws if it doesn't read)
+ * @param {(tree: object, text: string) => void} how.commit called with the new part
+ * @param {() => void} [how.cancel] called when nothing changed
+ * @param {string} [how.label] the box's accessible name
+ * @returns {HTMLInputElement|null}
+ */
+export function openEditor(element, text, { parse, commit, cancel, label = 'Edit' }) {
+    const doc = element.ownerDocument;
+    if (!doc || !doc.body) return null;
+    const view = doc.defaultView;
+    const r = element.getBoundingClientRect();
+    const input = doc.createElement('input');
+    input.type = 'text';
+    input.className = 'mv-edit';
+    input.value = text;
+    input.spellcheck = false;
+    input.autocomplete = 'off';
+    input.setAttribute('aria-label', label);
+    const fit = () => { input.style.width = `${Math.max(4, input.value.length + 2)}ch`; };
+    const font = view.getComputedStyle(element);
+    Object.assign(input.style, {
+        position: 'absolute',
+        left: `${r.left + view.scrollX}px`,
+        top: `${r.top + view.scrollY + r.height / 2}px`,
+        minWidth: `${Math.max(r.width, 32)}px`,
+        fontSize: font.fontSize,
+    });
+    fit();
+    doc.body.appendChild(input);
+    view.getSelection?.()?.removeAllRanges();   // the double-click selected a word of the page
+    input.focus();
+    input.select();
+
+    let done = false;
+    const close = () => {
+        done = true;
+        input.remove();
+    };
+    const finish = (keep) => {
+        if (done) return true;
+        if (!keep || input.value === text) {
+            close();
+            if (cancel) cancel();
+            return true;
+        }
+        let tree;
+        try {
+            tree = parse(input.value);
+        } catch (error) {
+            input.setAttribute('aria-invalid', 'true');
+            input.title = error.message;
+            return false;
+        }
+        close();
+        commit(tree, input.value);
+        return true;
+    };
+    input.addEventListener('keydown', (event) => {
+        event.stopPropagation();   // the view's arrow keys are not for the box
+        if (event.key === 'Enter') { event.preventDefault(); finish(true); }
+        if (event.key === 'Escape') { event.preventDefault(); finish(false); }
+    });
+    input.addEventListener('input', () => {
+        fit();
+        input.removeAttribute('aria-invalid');
+        input.removeAttribute('title');
+    });
+    input.addEventListener('blur', () => { if (!finish(true)) finish(false); });
+    return input;
+}

package/src/glyphs.js

@@ -0,0 +1,40 @@
+/**
+ * Shapes drawn as inline SVG: parentheses, braces, the radical sign and the
+ * big operators. Each is drawn in a 0..1 box with preserveAspectRatio="none"
+ * and sized by CSS, so the same path serves every height.
+ *
+ * Filled shapes (parens, braces) keep their thickness because their width
+ * stays fixed while their height stretches. Stroked shapes (√, ∫) use
+ * non-scaling strokes so the line weight never changes with size.
+ *
+ * To restyle a shape, change its path here; nothing else depends on it.
+ */
+
+export const PATHS = {
+    // Crescents: outer curve down, inner curve back up.
+    '(': { fill: 'M0.92,0 C0.1,0.2 0.1,0.8 0.92,1 L1,0.975 C0.48,0.75 0.48,0.25 1,0.025 Z' },
+    ')': { fill: 'M0.08,0 C0.9,0.2 0.9,0.8 0.08,1 L0,0.975 C0.52,0.75 0.52,0.25 0,0.025 Z' },
+    '{': { fill: 'M1,0 C0.45,0 0.5,0.05 0.5,0.2 L0.5,0.38 C0.5,0.46 0.35,0.49 0.05,0.5 C0.35,0.51 0.5,0.54 0.5,0.62 L0.5,0.8 C0.5,0.95 0.45,1 1,1 L1,0.985 C0.68,0.985 0.64,0.95 0.64,0.8 L0.64,0.62 C0.64,0.53 0.55,0.505 0.3,0.5 C0.55,0.495 0.64,0.47 0.64,0.38 L0.64,0.2 C0.64,0.05 0.68,0.015 1,0.015 Z' },
+    '}': { fill: 'M0,0 C0.55,0 0.5,0.05 0.5,0.2 L0.5,0.38 C0.5,0.46 0.65,0.49 0.95,0.5 C0.65,0.51 0.5,0.54 0.5,0.62 L0.5,0.8 C0.5,0.95 0.55,1 0,1 L0,0.985 C0.32,0.985 0.36,0.95 0.36,0.8 L0.36,0.62 C0.36,0.53 0.45,0.505 0.7,0.5 C0.45,0.495 0.36,0.47 0.36,0.38 L0.36,0.2 C0.36,0.05 0.32,0.015 0,0.015 Z' },
+    // Radical: short tick, long down-stroke, long up-stroke to the top right.
+    'sqrt': { stroke: 'M0,0.62 L0.18,0.55 L0.45,0.97 L0.98,0.015' },
+    // \cancel: one stroke, bottom left to top right, stretched over what it crosses out.
+    'cancel': { stroke: 'M0,1 L1,0' },
+    // Integral: an S slanted to the right with small hooks at each end.
+    'int': { stroke: 'M0.95,0.09 C0.9,0.01 0.72,0 0.66,0.12 C0.6,0.25 0.42,0.75 0.34,0.88 C0.28,0.99 0.1,0.99 0.05,0.91' },
+    'sum': { fill: 'M0.04,0 L0.94,0 L0.98,0.24 L0.94,0.24 C0.9,0.1 0.8,0.07 0.62,0.07 L0.24,0.07 L0.58,0.5 L0.2,0.93 L0.64,0.93 C0.82,0.93 0.92,0.9 0.95,0.76 L0.99,0.76 L0.94,1 L0.02,1 L0.47,0.47 Z' },
+    'prod': { fill: 'M0,0 L1,0 L1,0.04 L0.88,0.05 L0.88,0.95 L1,0.96 L1,1 L0.62,1 L0.62,0.96 L0.74,0.95 L0.74,0.06 L0.26,0.06 L0.26,0.95 L0.38,0.96 L0.38,1 L0,1 L0,0.96 L0.12,0.95 L0.12,0.05 L0,0.04 Z' },
+};
+
+/**
+ * An SVG element for a shape. `style` sizes and places it (width, height,
+ * vertical-align or absolute position).
+ */
+export function svg(name, cls, style = '') {
+    const shape = PATHS[name];
+    const path = shape.fill
+        ? `<path d="${shape.fill}" fill="currentColor"/>`
+        : `<path d="${shape.stroke}" fill="none" stroke="currentColor" vector-effect="non-scaling-stroke"/>`;
+    const attr = style ? ` style="${style}"` : '';
+    return `<svg class="${cls}" viewBox="0 0 1 1" preserveAspectRatio="none" aria-hidden="true"${attr}>${path}</svg>`;
+}

package/src/html.js

@@ -0,0 +1,32 @@
+/**
+ * Input → tree → HTML string. No DOM needed, so this runs in Node too. The full build: `{{...}}`
+ * blocks are calculated (draw.js is the same without the calculator).
+ */
+
+import { calculateBlock } from './calculator.js';
+import * as draw from './draw.js';
+
+export { layoutOptions } from './draw.js';
+
+/**
+ * Anything MathZetta reads → a tree with node ids. `{{...}}` blocks in text
+ * are calculated first: '3+4={{3+4}}' draws 3 + 4 = 7.
+ * @param {string|string[]|object} input expression text, standard postfix, or a tree
+ * @param {object} [options] { scope } variable values for `{{...}}` blocks;
+ *   { blocks } another handler for them (casBlocks() from '@mathzetta/inlinemath/cas' simplifies, solves …)
+ */
+export function treeOf(input, options = {}) {
+    return draw.treeOf(input, { ...options, blocks: options.blocks ?? calculateBlock });
+}
+
+/**
+ * @param {string|string[]|object} input
+ * @param {object} [options] layout options (see DEFAULTS in layout.js) plus:
+ * @param {object|Array} [options.colors]    { 'x^2': 'red', 3: '#06c' } or [[target, colour], …]
+ * @param {*} [options.highlight]            target(s) to mark with the mv-hl class
+ * @param {object} [options.scope]           variable values for `{{...}}` blocks
+ * @returns {string}
+ */
+export function toHTML(input, options = {}) {
+    return draw.toHTML(input, { ...options, blocks: options.blocks ?? calculateBlock });
+}

package/src/index.d.ts

@@ -0,0 +1,3 @@
+// '@mathzetta/inlinemath' — drawing, the live view, selection. See types.d.ts.
+export type { Input, Node, Target, LayoutOptions, DrawOptions, ViewOptions, ClickInfo } from './types.js';
+export { toHTML, treeOf, layout, DEFAULTS, View, render, shouldAnimate, select, signature, nodeAt, pathOf, numberTree, PATHS } from './types.js';

package/src/index.js

@@ -0,0 +1,17 @@
+/**
+ * Inline Math — draws calculus-level maths as HTML and CSS, from anything
+ * MathZetta can read, with every part addressable.
+ *
+ *   import { toHTML, render } from '@mathzetta/inlinemath';
+ *
+ *   toHTML('\\int_0^1 x^2 dx')                 // a string, works in Node
+ *   const view = render(div, 'd/dx sin(x^2)')   // live: highlight, click, animate
+ *
+ * Needs inlinemath.css on the page (and optionally fonts/fonts.css).
+ */
+
+export { toHTML, treeOf } from './html.js';
+export { layout, DEFAULTS } from './layout.js';
+export { View, render, shouldAnimate } from './view.js';
+export { select, signature, nodeAt, pathOf, numberTree } from './select.js';
+export { PATHS } from './glyphs.js';