Brunobkr/llama.cpp_AlgMor24_github

1/**2 * This file provides support to buildMathML.js and buildHTML.js3 * for stretchy wide elements rendered from SVG files4 * and other CSS trickery.5 */6 7import {LineNode, PathNode, SvgNode} from "./domTree";8import {makeSpan, makeSvgSpan} from "./buildCommon";9import {MathNode, TextNode} from "./mathMLTree";10import {makeEm} from "./units";11 12import type Options from "./Options";13import type {ParseNode} from "./parseNode";14import type {DomSpan, HtmlDomNode, SvgSpan} from "./domTree";15 16const stretchyCodePoint: Record<string, string> = {17    widehat: "^",18    widecheck: "ˇ",19    widetilde: "~",20    utilde: "~",21    overleftarrow: "\u2190",22    underleftarrow: "\u2190",23    xleftarrow: "\u2190",24    overrightarrow: "\u2192",25    underrightarrow: "\u2192",26    xrightarrow: "\u2192",27    underbrace: "\u23df",28    overbrace: "\u23de",29    underbracket: "\u23b5",30    overbracket: "\u23b4",31    overgroup: "\u23e0",32    undergroup: "\u23e1",33    overleftrightarrow: "\u2194",34    underleftrightarrow: "\u2194",35    xleftrightarrow: "\u2194",36    Overrightarrow: "\u21d2",37    xRightarrow: "\u21d2",38    overleftharpoon: "\u21bc",39    xleftharpoonup: "\u21bc",40    overrightharpoon: "\u21c0",41    xrightharpoonup: "\u21c0",42    xLeftarrow: "\u21d0",43    xLeftrightarrow: "\u21d4",44    xhookleftarrow: "\u21a9",45    xhookrightarrow: "\u21aa",46    xmapsto: "\u21a6",47    xrightharpoondown: "\u21c1",48    xleftharpoondown: "\u21bd",49    xrightleftharpoons: "\u21cc",50    xleftrightharpoons: "\u21cb",51    xtwoheadleftarrow: "\u219e",52    xtwoheadrightarrow: "\u21a0",53    xlongequal: "=",54    xtofrom: "\u21c4",55    xrightleftarrows: "\u21c4",56    xrightequilibrium: "\u21cc",  // Not a perfect match.57    xleftequilibrium: "\u21cb",   // None better available.58    "\\cdrightarrow": "\u2192",59    "\\cdleftarrow": "\u2190",60    "\\cdlongequal": "=",61};62 63export const stretchyMathML = function(label: string): MathNode {64    const node = new MathNode(65        "mo",66        [new TextNode(stretchyCodePoint[label.replace(/^\\/, '')])],67    );68    node.setAttribute("stretchy", "true");69    return node;70};71 72// Many of the KaTeX SVG images have been adapted from glyphs in KaTeX fonts.73// Copyright (c) 2009-2010, Design Science, Inc. (<www.mathjax.org>)74// Copyright (c) 2014-2017 Khan Academy (<www.khanacademy.org>)75// Licensed under the SIL Open Font License, Version 1.1.76// See \nhttp://scripts.sil.org/OFL77 78// Very Long SVGs79//    Many of the KaTeX stretchy wide elements use a long SVG image and an80//    overflow: hidden tactic to achieve a stretchy image while avoiding81//    distortion of arrowheads or brace corners.82 83//    The SVG typically contains a very long (400 em) arrow.84 85//    The SVG is in a container span that has overflow: hidden, so the span86//    acts like a window that exposes only part of the  SVG.87 88//    The SVG always has a longer, thinner aspect ratio than the container span.89//    After the SVG fills 100% of the height of the container span,90//    there is a long arrow shaft left over. That left-over shaft is not shown.91//    Instead, it is sliced off because the span's CSS has overflow: hidden.92 93//    Thus, the reader sees an arrow that matches the subject matter width94//    without distortion.95 96//    Some functions, such as \cancel, need to vary their aspect ratio. These97//    functions do not get the overflow SVG treatment.98 99// In the katexImagesData object just below, the dimensions all100// correspond to path geometry inside the relevant SVG.101// For example, \overrightarrow uses the same arrowhead as glyph U+2192102// from the KaTeX Main font. The scaling factor is 1000.103// That is, inside the font, that arrowhead is 522 units tall, which104// corresponds to 0.522 em inside the document.105 106type SvgData = [string[], number, number, string?];107 108const katexImagesData: {[key: string]: SvgData} = {109                   //   path(s), minWidth, height, align110    overrightarrow: [["rightarrow"], 0.888, 522, "xMaxYMin"],111    overleftarrow: [["leftarrow"], 0.888, 522, "xMinYMin"],112    underrightarrow: [["rightarrow"], 0.888, 522, "xMaxYMin"],113    underleftarrow: [["leftarrow"], 0.888, 522, "xMinYMin"],114    xrightarrow: [["rightarrow"], 1.469, 522, "xMaxYMin"],115    "\\cdrightarrow": [["rightarrow"], 3.0, 522, "xMaxYMin"], // CD minwwidth2.5pc116    xleftarrow: [["leftarrow"], 1.469, 522, "xMinYMin"],117    "\\cdleftarrow": [["leftarrow"], 3.0, 522, "xMinYMin"],118    Overrightarrow: [["doublerightarrow"], 0.888, 560, "xMaxYMin"],119    xRightarrow: [["doublerightarrow"], 1.526, 560, "xMaxYMin"],120    xLeftarrow: [["doubleleftarrow"], 1.526, 560, "xMinYMin"],121    overleftharpoon: [["leftharpoon"], 0.888, 522, "xMinYMin"],122    xleftharpoonup: [["leftharpoon"], 0.888, 522, "xMinYMin"],123    xleftharpoondown: [["leftharpoondown"], 0.888, 522, "xMinYMin"],124    overrightharpoon: [["rightharpoon"], 0.888, 522, "xMaxYMin"],125    xrightharpoonup: [["rightharpoon"], 0.888, 522, "xMaxYMin"],126    xrightharpoondown: [["rightharpoondown"], 0.888, 522, "xMaxYMin"],127    xlongequal: [["longequal"], 0.888, 334, "xMinYMin"],128    "\\cdlongequal": [["longequal"], 3.0, 334, "xMinYMin"],129    xtwoheadleftarrow: [["twoheadleftarrow"], 0.888, 334, "xMinYMin"],130    xtwoheadrightarrow: [["twoheadrightarrow"], 0.888, 334, "xMaxYMin"],131 132    overleftrightarrow: [["leftarrow", "rightarrow"], 0.888, 522],133    overbrace: [["leftbrace", "midbrace", "rightbrace"], 1.6, 548],134    underbrace: [["leftbraceunder", "midbraceunder", "rightbraceunder"],135        1.6, 548],136    underleftrightarrow: [["leftarrow", "rightarrow"], 0.888, 522],137    xleftrightarrow: [["leftarrow", "rightarrow"], 1.75, 522],138    xLeftrightarrow: [["doubleleftarrow", "doublerightarrow"], 1.75, 560],139    xrightleftharpoons: [["leftharpoondownplus", "rightharpoonplus"], 1.75, 716],140    xleftrightharpoons: [["leftharpoonplus", "rightharpoondownplus"],141        1.75, 716],142    xhookleftarrow: [["leftarrow", "righthook"], 1.08, 522],143    xhookrightarrow: [["lefthook", "rightarrow"], 1.08, 522],144    overlinesegment: [["leftlinesegment", "rightlinesegment"], 0.888, 522],145    underlinesegment: [["leftlinesegment", "rightlinesegment"], 0.888, 522],146    overbracket: [["leftbracketover", "rightbracketover"], 1.6, 440],147    underbracket: [["leftbracketunder", "rightbracketunder"], 1.6, 410],148    overgroup: [["leftgroup", "rightgroup"], 0.888, 342],149    undergroup: [["leftgroupunder", "rightgroupunder"], 0.888, 342],150    xmapsto: [["leftmapsto", "rightarrow"], 1.5, 522],151    xtofrom: [["leftToFrom", "rightToFrom"], 1.75, 528],152 153    // The next three arrows are from the mhchem package.154    // In mhchem.sty, min-length is 2.0em. But these arrows might appear in the155    // document as \xrightarrow or \xrightleftharpoons. Those have156    // min-length = 1.75em, so we set min-length on these next three to match.157    xrightleftarrows: [["baraboveleftarrow", "rightarrowabovebar"], 1.75, 901],158    xrightequilibrium: [["baraboveshortleftharpoon",159        "rightharpoonaboveshortbar"], 1.75, 716],160    xleftequilibrium: [["shortbaraboveleftharpoon",161        "shortrightharpoonabovebar"], 1.75, 716],162};163 164const wideAccentLabels =165    new Set(["widehat", "widecheck", "widetilde", "utilde"]);166 167export const stretchySvg = function(168    group: ParseNode<"accent"> | ParseNode<"accentUnder"> | ParseNode<"xArrow">169         | ParseNode<"horizBrace">,170    options: Options,171): DomSpan | SvgSpan {172    // Create a span with inline SVG for the element.173    function buildSvgSpan_(): {174        span: DomSpan | SvgSpan,175        minWidth: number,176        height: number,177    } {178        let viewBoxWidth = 400000;  // default179        const label = group.label.slice(1);180        if (wideAccentLabels.has(label) && 'base' in group) {181            // There are four SVG images available for each function.182            // Choose a taller image when there are more characters.183            const numChars = group.base.type === "ordgroup" ?184                group.base.body.length : 1;185            let viewBoxHeight;186            let pathName;187            let height;188 189            if (numChars > 5) {190                if (label === "widehat" || label === "widecheck") {191                    viewBoxHeight = 420;192                    viewBoxWidth = 2364;193                    height = 0.42;194                    pathName = label + "4";195                } else {196                    viewBoxHeight = 312;197                    viewBoxWidth = 2340;198                    height = 0.34;199                    pathName = "tilde4";200                }201            } else {202                const imgIndex = [1, 1, 2, 2, 3, 3][numChars];203                if (label === "widehat" || label === "widecheck") {204                    viewBoxWidth = [0, 1062, 2364, 2364, 2364][imgIndex];205                    viewBoxHeight = [0, 239, 300, 360, 420][imgIndex];206                    height = [0, 0.24, 0.3, 0.3, 0.36, 0.42][imgIndex];207                    pathName = label + imgIndex;208                } else {209                    viewBoxWidth = [0, 600, 1033, 2339, 2340][imgIndex];210                    viewBoxHeight = [0, 260, 286, 306, 312][imgIndex];211                    height = [0, 0.26, 0.286, 0.3, 0.306, 0.34][imgIndex];212                    pathName = "tilde" + imgIndex;213                }214            }215            const path = new PathNode(pathName);216            const svgNode = new SvgNode([path], {217                "width": "100%",218                "height": makeEm(height),219                "viewBox": `0 0 ${viewBoxWidth} ${viewBoxHeight}`,220                "preserveAspectRatio": "none",221            });222            return {223                span: makeSvgSpan([], [svgNode], options),224                minWidth: 0,225                height,226            };227        } else {228            const spans = [];229 230            const data = katexImagesData[label];231            if (!data) {232                throw new Error(`No SVG data for "${label}".`);233            }234            const [paths, minWidth, viewBoxHeight] = data;235            const height = viewBoxHeight / 1000;236 237            const numSvgChildren = paths.length;238            let widthClasses;239            let aligns;240            if (numSvgChildren === 1) {241                if (data.length !== 4) {242                    throw new Error(243                        `Expected 4-tuple for single-path SVG data "${label}".`);244                }245                widthClasses = ["hide-tail"];246                aligns = [data[3]];247            } else if (numSvgChildren === 2) {248                widthClasses = ["halfarrow-left", "halfarrow-right"];249                aligns = ["xMinYMin", "xMaxYMin"];250            } else if (numSvgChildren === 3) {251                widthClasses = ["brace-left", "brace-center", "brace-right"];252                aligns = ["xMinYMin", "xMidYMin", "xMaxYMin"];253            } else {254                throw new Error(255                    `Correct katexImagesData or update code here to support256                    ${numSvgChildren} children.`);257            }258 259            for (let i = 0; i < numSvgChildren; i++) {260                const path = new PathNode(paths[i]);261 262                const svgNode = new SvgNode([path], {263                    "width": "400em",264                    "height": makeEm(height),265                    "viewBox": `0 0 ${viewBoxWidth} ${viewBoxHeight}`,266                    "preserveAspectRatio": aligns[i] + " slice",267                });268 269                const span = makeSvgSpan(270                    [widthClasses[i]], [svgNode], options);271                if (numSvgChildren === 1) {272                    return {span, minWidth, height};273                } else {274                    span.style.height = makeEm(height);275                    spans.push(span);276                }277            }278 279            return {280                span: makeSpan(["stretchy"], spans, options),281                minWidth,282                height,283            };284        }285    } // buildSvgSpan_()286    const {span, minWidth, height} = buildSvgSpan_();287 288    // Note that we are returning span.depth = 0.289    // Any adjustments relative to the baseline must be done in buildHTML.290    span.height = height;291    span.style.height = makeEm(height);292    if (minWidth > 0) {293        span.style.minWidth = makeEm(minWidth);294    }295 296    return span;297};298 299export const stretchyEnclose = function(300    inner: HtmlDomNode,301    label: string,302    topPad: number,303    bottomPad: number,304    options: Options,305): DomSpan | SvgSpan {306    // Return an image span for \cancel, \bcancel, \xcancel, \fbox, or \angl307    let img;308    const totalHeight = inner.height + inner.depth + topPad + bottomPad;309 310    if (/fbox|color|angl/.test(label)) {311        img = makeSpan(["stretchy", label], [], options);312 313        if (label === "fbox") {314            const color = options.color && options.getColor();315            if (color) {316                img.style.borderColor = color;317            }318        }319 320    } else {321        // \cancel, \bcancel, or \xcancel322        // Since \cancel's SVG is inline and it omits the viewBox attribute,323        // its stroke-width will not vary with span area.324 325        const lines = [];326        if (/^[bx]cancel$/.test(label)) {327            lines.push(new LineNode({328                "x1": "0",329                "y1": "0",330                "x2": "100%",331                "y2": "100%",332                "stroke-width": "0.046em",333            }));334        }335 336        if (/^x?cancel$/.test(label)) {337            lines.push(new LineNode({338                "x1": "0",339                "y1": "100%",340                "x2": "100%",341                "y2": "0",342                "stroke-width": "0.046em",343            }));344        }345 346        const svgNode = new SvgNode(lines, {347            "width": "100%",348            "height": makeEm(totalHeight),349        });350 351        img = makeSvgSpan([], [svgNode], options);352    }353 354    img.height = totalHeight;355    img.style.height = makeEm(totalHeight);356 357    return img;358};359