mathjax 3 + xyJax + fabric.js (SCG only) _ migration to mathax 4

[jox joe]

Hello Davide,

001: ************

As a result of your support, I can use the following packages together:

1/ mathjax 3

2/ xyJax (mathjax 3 extension)

3/ fabric.js

The mathjax3 SVG output is used which is further processed by fabric.js.

I can modify and recompile the source code of  mathjax 3 and  xyJax 3.  

002: ************ 

I'd like to do the same but with MathJax 4.1.0.

I can compile  xyJax 3 and mathjax 4.1.0 without an error message. 

If I include both in the HTML based on the instruction of  xyJax 3 

I get the following error message:

Unknow environment "xy" 

003: *************

My request:

Please give me a hint how to modify the  xyJax 3 source to meet

the requirement of MathJax 4.

I am studying the  xyJax 3 source and the MathJax 4 document now.

Thank you.

[dp...@mathjax.org]

I can compile  xyJax 3 and mathjax 4.1.0 without an error message. 

If I include both in the HTML based on the instruction of  xyJax 3 

I get the following error message:

Unknow environment "xy" 

If you look in the developer's console, you will probably see additional errors where xypic.js is failing.

Please give me a hint how to modify the  xyJax 3 source to meet

the requirement of MathJax 4.

I am studying the  xyJax 3 source and the MathJax 4 document now.

I suspect the main issue is the change from SymbolMap to TokenMap and Symbol to Token.

But it looks like someone has already done the work recently:

https://github.com/matssson/XyJax-v4

Perhaps that will work for you.

Davide

[jox joe]

Hi Davide,

thank you for your feedback.

001******************

**********************

Mathjax3+img+xyJax works properly

002******************

**********************

Mathjax4+img+xyJax works properly if I use a browser (Firefox, Chrome) 

But the following code is not working: 

////BEGIN code

global.MathJax = {
  options: {}
  ,
  tex: {
    packages: {
      '[+]': ['xypic', 'img']
    }
    ,
    processEnvironments: true
    ,
    maxBuffer: 200 * 1024
    ,
    maxMacros: 40000
    ,
    noundefined: {
      color: 'red',
      background: '',
      size: ''
    }//END , noundefined:
    ,

    formatError(_, error) {
      throw error;
    }
    ,
    macros: {
      //
      RR: ['{\\bf{R}}']
      ,
      bold: ['\\boldsymbol{#1}', 1]  
      ,
      ddx: ['\\frac{d#2}{d#1}', 2, 'x']
      ,
      abc: ['(#1)', 1, [null, '\\cba']]
      ,
      ud: ['{#1^ \\dagger}', 1]
      ,
      Tr: ['{\\mathrm{Tr}}']
      ,
      bold2: ['{\\bf #1}', 1]
      ,
      c1y: ['{\\color{yellow}{#1}}']
      ,
      cy: ['{\\color{yellow}#1}']
      ,
      ktc: ['{\\color{yellow}{\\boldsymbol{\\mathsf{#1}}}}', 1]
      ,
      b: ['{\\boldsymbol{\\mathsf{#1}}}', 1]
     
    } //END , macros:

  } //END , tex:
  ,
  svg: {
    fontCache: 'local'
  }

}; //END MathJax =


var init_js_1 = require("/mathjax/components/cjs/startup/init.js");
var loader_js_1 = require("/mathjax/components/cjs/loader/loader.js");
require("/mathjax/components/cjs/core/core.js");
require("/mathjax/components/cjs/input/tex/tex.js");
var svg_js_1 = require("/mathjax/components/cjs/output/svg/svg.js");
require('/mathjax/cjs/adaptors/browserAdaptor.js');
require('/mathjax/cjs/ui/menu/Menu.js');
require('/mathjax4/build/xypic.js');
require('/mathjax4/mathjax-img-main/browser/img.js');
loader_js_1.Loader.preLoaded('init', 'loader', 'startup', 'core', 'input/tex', 'output/svg', 'img', 'xypic');
loader_js_1.Loader.saveVersion('tex-svg');
(0, svg_js_1.loadFont)(init_js_1.startup, true);

//this creates the svg
function _tex2svg(tex, callback, _errCallback) {
  MathJax.tex2svgPromise(tex, {
    display: false,
    em: 16 // em-size in pixels
    ,
    ex: 8 // ex-size in pixels
    ,
    containerWidth: 80 * 16
  }).then(function (node) {
    callback(node); //  ORIGINAL callback(node.firstElementChild);
    //callback(node.firstElementChild);  
  }).catch(function (err) {
    _errCallback(err.message);
  });
}
////END code

My workflow:

- the MathJax generates the SVG 

- this will be processed by fabric.js

   and passed to the browser

Please let me how to set up Mathjax 4 properly

for this use case.

I use the CJS version because the browserify bundler is used.

Later I can try and convert es6 to es5 (babel+ browserify ).

Thank you.

[Davide Cervone]

"the following code is not working" is not very specific about what is happening for you.  Are there error messages?  Is SVG output produced, but doesn't get displayed properly?  Is it a problem with specific expressions, or all expressions?

If I understand properly, this will be run int he browser, right?  (Not in node on a server.)

I haven't tried to run this code without knowing the details I ask about above, but I do see one important configuration issue.  Because you are packaging your own copy of MathJax, you will need to tell MathJax where to find its other files (like font data, tex extensions, etc), so you will need to add something like

loader: {

  paths: {

    mathjax: '/mathjax',

  }

},

to your configuration (you may need to give the full path with https://... for this).

Because MathJax v4 has a choice of multiple fonts, it is not packaged with one itself.  So if you are hosting your own copy of MathJax, you will likely want to have your own copy of the font you are using (the default is `mathjax-newcm`);  If you used npm or pnpm to install your copy of MathJax v4, it should have loaded @mathjax/mathjax-newcm-font, which will be in your node_modules/mathjax folder.  Make that available and add a path 

loader: {

  paths: {

    mathjax: '/mathjax',

    'mathjax-newcm': '/mathjax-newcm-font'

  }

},

or wherever you put the font.

An unimportant detail is the you don't need to list `init` in the Loader.preLoaded() call, as it is not a component on its own (this just says which components you have loaded).

Those are the things I see immediately without actually running the code.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-dev...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/mathjax-dev/f9162c12-fd89-4ece-905f-d344da811263n%40googlegroups.com.

[jox joe]

001: ************* I added this:

    loader: {
      paths: {
        mathjax: '/mathjax',
      }
    },

002: *************** I added this:

    loader: {
      paths: {
        mathjax: '/mathjax',
        'mathjax-newcm': '/mathjax-newcm-font'
      }
    },

003: *************** I removed this:
`init`

004: ***********************
/mathjax/components/cjs/loader/loader.js";
//Uncaught TypeError: Cannot read properties of undefined (reading 'preLoaded')
Reason: this "loader.js" doesn't contain preload function

This is working:
mathjax/cjs/components/loader.js





*******************************************************************
Now if I use mathjax4+img+ xyJax  I get the following error messages:

(These worked in mathJax 3+img+xyJax properly. )

001: *************
//BEGIN code

function _tex2svg(tex, callback, _errCallback) {
MathJax.tex2svgPromise(tex, {
display: false

, em: 16 // em-size in pixels

, ex: 8 // ex-size in pixels
, containerWidth: 80 * 16
}).then(function (node) {
callback(node);  //  ORIGINAL callback(node.firstElementChild);
          //callback(node.firstElementChild);  
}).catch(function (err) {
_errCallback(err.message);
});
}

//END code

This generates the following error message:
wb-ver-1768133149000.js:15468 Uncaught (in promise) TypeError: _errCallback is not a function


002: *************
/mathjax/input/tex/extensions/bbox.js net::ERR_ABORTED 404 (Not Found)

003: *************
/mathjax/input/tex/extensions/bbox.js net::ERR_ABORTED 404 (Not Found)


004: *************
/mathjax/input/tex/extensions/boldsymbol.js net::ERR_ABORTED 404 (Not Found)


005: **************
wb-ver-1768133149000.js:91444 Can't load '[mathjax-newcm]/svg/dynamic/sans-serif.js':
No mathjax.asyncLoad method specified

****************************

****************************

****************************

>If I understand properly, this will be run int he browser, right?  (Not in node on a server.)

Yes, in the browser.

The Javascript code of the framework including Mathjax4, img extension and xyJax

will be bundled with browserify. The codes above are from your CJS version.

I use the SVG output of Mathjax 4 but not directly because it will be converted by fabric.js

to SVG again which will be displayed by the browser.

Further testing is in progress.

My plan is to focus on Mathjax 4 (and not on Mathjax 3).

Joe