rapier-math 0.0.0-stage → 1.0.2

package/src/math/api.js

@@ -0,0 +1,87 @@
+// SPDX-License-Identifier: MIT
+function mathSvg(box,source,error,utf16,options={}) {
+  if(box.svg.length>8*1024*1024)throw Object.assign(new Error('This formula produces too much SVG to render safely.'),{code:'resource-limit'});
+  const pad=0.025,left=Math.min(0,box.left)-pad,right=Math.max(box.w,box.right)+pad;
+  const width=Math.max(0.05,right-left),height=Math.max(0.025,box.h+pad,-box.inkTop+pad),depth=Math.max(0.025,box.d+pad,box.inkBottom+pad);
+  const viewBox=[left*1000,-height*1000,width*1000,(height+depth)*1000];
+  const opacity=options.screen?.dark ? .94 : 1;
+  if (![width,height,depth,left,...viewBox].every(Number.isFinite)) throw new Error('Mathematical dimensions are not finite');
+  const escapedSource=mathEscape(source);
+  const svg='<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-label="'+escapedSource+'"'+
+    ' data-rapier-math="'+(options.displayMode?'display':'inline')+'" data-math-lines="'+(box.lines || 1)+'"'+
+    ' data-math-natural-width="'+mathNumber(options.naturalWidth ?? width)+'"'+
+    (options.screen?' data-math-screen="'+mathNumber(options.screen.fontSize)+'|'+mathNumber(options.screen.pixelRatio)+'|'+options.screen.dark+'"':'')+
+    (options.maxWidth?' data-math-max-width="'+mathNumber(options.maxWidth)+'"':'')+
+    (utf16?' data-tex-utf16="'+utf16+'"':'')+
+    (error?' data-math-error="'+mathEscape(error.code)+'"':'')+' width="'+mathNumber(width)+'em" height="'+mathNumber(height+depth)+'em"'+
+    ' viewBox="'+viewBox.map(mathNumber).join(' ')+'"'+
+    ' style="font-size:'+mathNumber(mathFontRatio)+'em;max-width:100%;height:auto;vertical-align:-'+mathNumber(depth)+'em;'+
+    'fill-opacity:'+opacity+';stroke-opacity:'+opacity+'" fill="currentColor">'+
+    '<title>'+escapedSource+'</title>'+(error?'<desc>'+mathEscape(error.message)+'</desc>':'')+
+    '<g transform="scale(1000)">'+box.svg+'</g></svg>';
+  return {svg,width,height,depth,lines:box.lines || 1,fitted:!!box.fitted,errors:error?[error]:[]};
+}
+
+function mathSourceAlternative(source) {
+  let alternative='',first=-1,kept=0;
+  for(let i=0;i<source.length;i++) {
+    const code=source.charCodeAt(i);
+    if(code>=0xd800 && code<=0xdbff && i+1<source.length) {
+      const next=source.charCodeAt(i+1);
+      if(next>=0xdc00 && next<=0xdfff) {i++;continue;}
+    }
+    if((code>=0x20 && code<=0xd7ff) || (code>=0xe000 && code<=0xfffd) || code===9 || code===10 || code===13)continue;
+    if(first<0)first=i;
+    alternative+=source.slice(kept,i)+'\\u'+code.toString(16).toUpperCase().padStart(4,'0');kept=i+1;
+  }
+  if(first<0)return {alternative:source};
+  alternative+=source.slice(kept);
+  // Only malformed XML text needs a separate carrier; each four hex digits keep one original code unit.
+  let utf16='';
+  for(let i=0;i<source.length;i++)utf16+=source.charCodeAt(i).toString(16).padStart(4,'0');
+  return {alternative,utf16,error:{code:'invalid-source-character',offset:first,
+    message:'A source character cannot be embedded in SVG. The text alternative shows Unicode escapes; data-tex-utf16 keeps the original source.'}};
+}
+
+function renderMath(source,options={}) {
+  const text=String(source ?? ''),safe=mathSourceAlternative(text),context={size:1,level:0,variant:'normal',cramped:false,display:!!options?.displayMode,cache:new WeakMap(),budget:{nodes:0,outlineBytes:0}};
+  try {
+    if(safe.error)throw safe.error;
+    if(options?.screen!==undefined) {
+      const {fontSize,pixelRatio,dark}=options.screen || {},scaled=Number.isFinite(fontSize)?fontSize*mathFontRatio:NaN;
+      if(!Number.isFinite(fontSize) || fontSize<=0 || !Number.isFinite(pixelRatio) || pixelRatio<=0 ||
+        typeof dark!=='boolean' || !Number.isFinite(scaled) || scaled<=0 || !Number.isFinite(scaled*pixelRatio) || scaled*pixelRatio<=0 ||
+        !Number.isFinite(1/scaled) || !Number.isFinite(1/pixelRatio) || !Number.isFinite(1/(scaled*pixelRatio)))
+        throw Object.assign(new Error('Screen font size, pixel ratio and device scale must be positive and finite; dark must be a boolean.'),{code:'invalid-screen'});
+      context.screen={fontSize:scaled,pixelRatio,dark};
+    }
+    const tree=parseMathTex(text),natural=mathLayout(tree,context),limit=Number(options?.maxWidth);
+    const maxWidth=Number.isFinite(limit) && limit>.1?limit:undefined;
+    const box=maxWidth && mathInkWidth(natural)>maxWidth-.05?mathResponsiveLayout(tree,context,maxWidth-.05,natural):natural;
+    return mathSvg(box,safe.alternative,undefined,undefined,{displayMode:context.display,maxWidth,naturalWidth:mathInkWidth(natural)+.05,screen:context.screen});
+  }
+  catch (cause) {
+    const error={code:cause.code || 'invalid-tex',message:String(cause.message || cause),offset:Number.isFinite(cause.offset)?cause.offset:0};
+    if(cause.command)error.command=cause.command;
+    // A diagnostic is visible, but remains distinct from a successfully typeset formula.
+    // A hostile command can have a very long name. Keep its full diagnostic in desc/errors,
+    // while the visible notice stays finite and can render after the formula exhausted its budget.
+    const label=error.message.length>240?'This formula could not be rendered. The complete diagnostic is in its text description.':error.message.replace(/[^\x20-\x7e]/g,'?');
+    const diagnostic={...context,variant:'roman',size:0.8,budget:{nodes:0,outlineBytes:0}};
+    try {
+      return mathSvg(mathText(label,diagnostic),safe.alternative,error,safe.utf16,{displayMode:context.display,screen:context.screen});
+    } catch {
+      diagnostic.screen=undefined;
+      return mathSvg(mathText(label,diagnostic),safe.alternative,error,safe.utf16,{displayMode:context.display});
+    }
+  }
+}
+
+globalThis.RapierMath=Object.freeze({
+  version:'1.0.2',
+  parse:parseMathTex,
+  render:renderMath,
+  fit:mathFit,
+  observe:mathObserve,
+  renderToString(source,options) {return renderMath(source,options).svg;},
+});

package/src/math/browser.js

@@ -0,0 +1,181 @@
+// SPDX-License-Identifier: MIT
+// The browser supplies the column and physical pixel grid; rendering remains synchronous and pure.
+const mathBrowserStates=new WeakMap(),mathBrowserDocuments=new WeakMap(),mathRuleOriginals=new WeakMap();
+const mathSvgSelector='svg[data-rapier-math]:not([data-math-error])';
+
+function mathElements(root) {
+  return [...(root?.matches?.(mathSvgSelector)?[root]:[]),...root?.querySelectorAll?.(mathSvgSelector) || []];
+}
+
+function mathColumn(svg) {
+  const view=svg.ownerDocument.defaultView;
+  for(let node=svg.parentElement;node;node=node.parentElement) {
+    const style=view.getComputedStyle(node);
+    if(style.display==='contents' || style.display==='inline' || node.matches('.math-rendered'))continue;
+    return node;
+  }
+  return svg.ownerDocument.documentElement;
+}
+
+function mathDarkPaper(svg) {
+  const view=svg.ownerDocument.defaultView;
+  if(view.matchMedia('(forced-colors: active)').matches || view.matchMedia('(prefers-contrast: more)').matches)return false;
+  for(let node=svg.parentElement;node;node=node.parentElement) {
+    const style=view.getComputedStyle(node),color=style.backgroundColor.match(/[\d.]+/g)?.map(Number);
+    if(style.backgroundImage!=='none')return false;
+    if(!color || color.length<3 || (color[3] ?? 1)<1)continue;
+    const rgb=color.slice(0,3).map(value=>value/255).map(value=>value<=.04045?value/12.92:((value+.055)/1.055)**2.4);
+    return rgb[0]*.2126+rgb[1]*.7152+rgb[2]*.0722<.18;
+  }
+  return false;
+}
+
+function mathSnapRule(original, matrix, ratio) {
+  if (!original.width || !original.height || !matrix || !matrix.a || !matrix.d ||
+      Math.abs(matrix.b) + Math.abs(matrix.c) > 1e-6 || !(ratio > 0)) return null;
+  const snap = value => Math.round(value * ratio) / ratio;
+  const x = (snap(original.x * matrix.a + matrix.e) - matrix.e) / matrix.a;
+  const y = (snap(original.y * matrix.d + matrix.f) - matrix.f) / matrix.d;
+  const width = Math.max(1 / ratio, snap(original.width * Math.abs(matrix.a))) / Math.abs(matrix.a);
+  const height = Math.max(1 / ratio, snap(original.height * Math.abs(matrix.d))) / Math.abs(matrix.d);
+  return {x, y, width, height, d: 'M' + mathNumber(x) + ' ' + mathNumber(y) + 'h' + mathNumber(width) +
+    'v' + mathNumber(height) + 'h' + mathNumber(-width) + 'Z'};
+}
+
+function mathSnapRules(svg) {
+  const ratio=svg.ownerDocument.defaultView.devicePixelRatio || 1;
+  for(const rule of svg.querySelectorAll('[data-math-rule],[data-math-line]')) {
+    let original=mathRuleOriginals.get(rule);
+    if(!original) {
+      const box=rule.getBBox(), axis=rule.getAttribute('data-math-line'), thickness=Number(rule.getAttribute('stroke-width'));
+      original={x:box.x,y:box.y,width:box.width,height:box.height,axis};
+      if(axis==='horizontal') {original.y-=thickness/2;original.height=thickness;}
+      if(axis==='vertical') {original.x-=thickness/2;original.width=thickness;}
+      mathRuleOriginals.set(rule,original);
+    }
+    const snapped=mathSnapRule(original,rule.getScreenCTM(),ratio);
+    if(!snapped)continue;
+    let path=snapped.d;
+    if(original.axis==='horizontal') {
+      path='M'+mathNumber(snapped.x)+' '+mathNumber(snapped.y+snapped.height/2)+'h'+mathNumber(snapped.width);
+      rule.setAttribute('stroke-width',mathNumber(snapped.height));
+    }
+    if(original.axis==='vertical') {
+      path='M'+mathNumber(snapped.x+snapped.width/2)+' '+mathNumber(snapped.y)+'v'+mathNumber(snapped.height);
+      rule.setAttribute('stroke-width',mathNumber(snapped.width));
+    }
+    rule.setAttribute('d',path);
+    rule.setAttribute('shape-rendering','crispEdges');
+  }
+}
+
+function mathFitElement(svg, printing = false) {
+  if(!svg.isConnected)return null;
+  const doc=svg.ownerDocument,view=doc.defaultView,column=mathColumn(svg),style=view.getComputedStyle(column),font=parseFloat(view.getComputedStyle(svg).fontSize);
+  const available=column.clientWidth-(parseFloat(style.paddingLeft) || 0)-(parseFloat(style.paddingRight) || 0);
+  if(!(available>0 && font>0))return column;
+  const width=Math.max(.1,(available-.25)/font),source=svg.getAttribute('aria-label'),display=svg.getAttribute('data-rapier-math')==='display';
+  const dark=!printing && mathDarkPaper(svg),ratio=view.devicePixelRatio || 1;
+  const screen=printing?undefined:{fontSize:font/mathFontRatio,pixelRatio:ratio,dark};
+  const screenKey=printing?'':mathNumber(font)+'|'+mathNumber(ratio)+'|'+dark;
+  let state=mathBrowserStates.get(svg);
+  if(!state || state.source!==source) {
+    state={source,natural:Number(svg.getAttribute('data-math-natural-width')) || Infinity,width:Number(svg.getAttribute('data-math-max-width')) || null,
+      screen:svg.getAttribute('data-math-screen') || ''};
+    mathBrowserStates.set(svg,state);
+  }
+  const target=state.natural>width?width:null;
+  if(screenKey!==state.screen || (target===null)!==(state.width===null) || target!==null && Math.abs(target-state.width)>.005) {
+    const rendered=renderMath(source,{displayMode:display,maxWidth:(screenKey!==state.screen?width:target) || undefined,screen});
+    if(!rendered.errors.length) {
+      const replacement=new view.DOMParser().parseFromString(rendered.svg,'image/svg+xml').documentElement;
+      for(const name of ['width','height','viewBox','data-math-natural-width','data-math-max-width','data-math-lines','data-math-screen']) {
+        if(replacement.hasAttribute(name))svg.setAttribute(name,replacement.getAttribute(name));else svg.removeAttribute(name);
+      }
+      svg.style.verticalAlign=replacement.style.verticalAlign;
+      svg.replaceChildren(...Array.from(replacement.childNodes,node=>doc.importNode(node,true)));
+      state.natural=Number(svg.getAttribute('data-math-natural-width'));state.screen=screenKey;
+      state.width=state.natural>width?width:null;
+      if(state.width===null)svg.removeAttribute('data-math-max-width');
+    }
+  }
+  const opacity=dark?'.94':'1';
+  svg.style.fillOpacity=opacity;svg.style.strokeOpacity=opacity;
+  for(const node of svg.querySelectorAll('[fill],[color],[stroke]')) {
+    if(['fill','color','stroke'].some(name=>node.hasAttribute(name) && !['none','currentColor','inherit'].includes(node.getAttribute(name)))) {
+      node.setAttribute('fill-opacity','1');node.setAttribute('stroke-opacity','1');
+    }
+  }
+  if(!printing)mathSnapRules(svg);
+  return column;
+}
+
+function mathFit(root) {
+  const nodes=mathElements(root);
+  for(const svg of nodes)mathFitElement(svg,svg.ownerDocument.defaultView.matchMedia('print').matches);
+  return nodes.length;
+}
+
+function mathObserveDocument(doc) {
+  const view=doc.defaultView,nodes=new Map(),columns=new Set();
+  let frame=null,active=true,printing=view.matchMedia('print').matches;
+  const refresh=()=> {
+    if(!active)return;
+    if(frame!==null)view.cancelAnimationFrame(frame);
+    frame=null;
+    const wanted=new Set();
+    for(const svg of nodes.keys()) {
+      if(!svg.isConnected || svg.ownerDocument!==doc || !svg.matches(mathSvgSelector))continue;
+      const column=mathFitElement(svg,printing);if(column)wanted.add(column);
+    }
+    for(const column of columns)if(!wanted.has(column)) {resize.unobserve(column);columns.delete(column);}
+    for(const column of wanted)if(!columns.has(column)) {resize.observe(column);columns.add(column);}
+  };
+  const schedule=()=>{if(active && frame===null)frame=view.requestAnimationFrame(refresh);};
+  const resize=new view.ResizeObserver(schedule),theme=new view.MutationObserver(records=>{
+    for(const {target} of records)for(const svg of nodes.keys())
+      if(target!==svg && target.contains(svg)) {schedule();return;}
+  });
+  const beforePrint=()=>{printing=true;refresh();},afterPrint=()=>{printing=false;schedule();};
+  const media=['(forced-colors: active)','(prefers-contrast: more)','(prefers-color-scheme: dark)'].map(query=>view.matchMedia(query));
+  const fonts=doc.fonts;
+  theme.observe(doc.documentElement,{subtree:true,attributes:true,attributeFilter:['class','style','data-rapier-theme','data-md-theme']});
+  view.addEventListener('resize',schedule,{passive:true});
+  view.addEventListener('beforeprint',beforePrint);view.addEventListener('afterprint',afterPrint);
+  for(const query of media)query.addEventListener('change',schedule);
+  fonts?.addEventListener('loadingdone',schedule);
+  const state={nodes,schedule,dispose:()=>{
+    active=false;
+    if(frame!==null)view.cancelAnimationFrame(frame);
+    frame=null;
+    resize.disconnect();theme.disconnect();columns.clear();nodes.clear();
+    view.removeEventListener('resize',schedule);
+    view.removeEventListener('beforeprint',beforePrint);view.removeEventListener('afterprint',afterPrint);
+    for(const query of media)query.removeEventListener('change',schedule);
+    fonts?.removeEventListener('loadingdone',schedule);
+    mathBrowserDocuments.delete(doc);
+  }};
+  mathBrowserDocuments.set(doc,state);
+  return state;
+}
+
+function mathObserve(root) {
+  const doc=root?.ownerDocument || root;
+  if(!doc?.defaultView)return ()=>{};
+  let owned=mathElements(root);
+  if(!owned.length)return ()=>{};
+  let state=mathBrowserDocuments.get(doc) || mathObserveDocument(doc);
+  // Each returned cleanup owns its subscription, including overlap and detached nodes.
+  for(const svg of owned)state.nodes.set(svg,(state.nodes.get(svg) || 0)+1);
+  state.schedule();
+  return ()=>{
+    if(!owned)return;
+    const current=state;state=null;
+    for(const svg of owned) {
+      const remaining=current.nodes.get(svg)-1;
+      if(remaining)current.nodes.set(svg,remaining);else current.nodes.delete(svg);
+    }
+    owned=null;
+    if(current.nodes.size)current.schedule();else current.dispose();
+  };
+}