kisonecat/tikzjax

TikZJax is TikZ running under WebAssembly in the browser

tikzjax's Issues

Some symbols are not correctly rendered, for example, - is rendered as x

                \begin{tikzpicture}
                \draw[->] (-5,0) -- (5,0) node[right] {$x$};
                \draw[->] (0,-5) -- (0,5) node[above] {$y$};
                \foreach \x in {-4,-3,-2,-1,1,2,3,4} 
                    \draw (\x cm,1pt) -- (\x cm,-1pt) node[anchor=north] {$\x$};
                \foreach \y in {-4,-3,-2,-1,1,2,3,4} 
                    \draw (1pt,\y cm) -- (-1pt,\y cm) node[anchor=east] {$\y$};
                \draw[domain=-2:3,smooth,variable=\x,blue] plot ({\x},{2*\x - 4});
                \end{tikzpicture}

Django project, not been able to load usepackage with tikzjax

Hello, I am developing a website with Django loading the js code for tikzjax to display maths and lines, etc.
However, I have not been able to use the package for plots etc.

I can successfully load

\begin{document}
  \begin{tikzpicture}[domain=0:4]
    \draw[very thin,color=gray] (-0.1,-1.1) grid (3.9,3.9);
    \draw[->] (-0.2,0) -- (4.2,0) node[right] {$x$};
    \draw[->] (0,-1.2) -- (0,4.2) node[above] {$f(x)$};
    \draw[color=red]    plot (\x,\x)             node[right] {$f(x) =x$};
    \draw[color=blue]   plot (\x,{sin(\x r)})    node[right] {$f(x) = \sin x$};
    \draw[color=orange] plot (\x,{0.05*exp(\x)}) node[right] {$f(x) = \frac{1}{20} \mathrm e^x$};
  \end{tikzpicture}
\end{document}

but I cannot load

\usepackage{pgfplots}
\pgfplotsset{compat=1.16}

\begin{document}

\begin{tikzpicture}
\begin{axis}[colormap/viridis]
\addplot3[
	surf,
	samples=18,
	domain=-3:3
]
{exp(-x^2-y^2)*x};
\end{axis}
\end{tikzpicture}

\end{document}

I was wondering if there is a separate js file that needs to be called on html files for pgfplots?

tikzpicture not centered

Apparently, the generated SVG comes inside a div element, which is a flexbox. I am not being able to center it. Is there a way?

Call from another script

It seems that tikzjax only processes the page on load.
Is there a way to call tikzjax from another script at any moment ?

Thanks !

Loading Indication

Generating visuals client side is awesome, but can be rather slow. Ideally there'd be some kind of indication that the contents of a \begin{tikzpicture} is being rendered.

For example, I've copied the code for a somewhat large complete graph provided here. Note that the code in the example proper doesn't work with this library yet (something about mycount), but the simplified example in the comments does.

lack of HTTPS depolyment

in case of a page using this library via an https request, tikzjax will not work because it only exposes http links. any chance put this library in some https cdn?

Use another tikz libraries

Hi. I want to add all the packages included in [texlive-pictures] (https://packages.debian.org/en/buster/texlive-pictures) to make use of this library. Then I couldn't solve the error with node-kpathsea of web2js, so I tried to create a coredump using the one in the binaryen branch, but \usepakcage described in plain.tex became "Undefined control sequence".

How can I use \usepacakge on web2js? Or is it possible to upgrade tikzjax officially?

[Question] Load external data files into TikZJax

Thank you very much for creating this great software.

I recently ran into some problems when trying to draw an image using external data files.

1. When I use relative paths, I don't know which folder I should put my data files in.

When I use absolute paths the images don't display properly either.

I use the data on this page as an example. This example can also be viewed in this overleaf page.

Wrong greek matters

Really interesting library ! I use it with remark.js, seems to work great. But for some reasons, I get the wrong greek letters, I type \Gamma and I get

By the way, is it possible to use tikz packages ? like tikz layers ?

text color not rendering in nodes

Hi,

I think I might have found another issue. It seems to me that it is not possible to have colored text in nodes.
The following MWE alwaysproduces black text in TikZJax

\node[red] at (0,-2) {a};
\node[red] at (0,0) {$b$};
\node[text=red] at (-1,0) {$c$};
\node at (1,1) {$\color{red} d$};
\node at (-1,1) {$\textcolor{red} e$};
\node[red] at (-1,-2) {f};

The same code produces some colored text at https://tex.rossprogram.org/.
Specifically, a, b, c produce red text, while d, e, f produce black text, even if package xcolor is loaded.
Curiously enough, outside the tikzpicture environment, "{\color{red} whatever}" produces red text even when xcolor is not loaded.

I hope this helps
Francesco

Upgrade project to be built locally and with latest dependencies

Hi! Thx for creating tikzjax, it works well. I'm facing some issues when the tex script node has errors, wasm will throw a runtime exception.

A nice thing, would be to be able to run this repository locally, so that's what I'm suggesting now. If you need help with upgrading dependencies to the latest node version along with a better source code, I'm willing to help.

Let me know what you think! :)

Uppercase Math Symbols Incorrect

There seems to be an issue with uppercase math symbols. Where different symbols are rendered than are expected.

This doesn't seem to happen with the lower case variants. What could causing this and how could I fix it?

Thanks in advance

Node Label Centering

Currently it seems that node labels aren't being centered correctly.

\begin{tikzpicture}
  \node[draw,circle] {A};
\end{tikzpicture}

Produces the following figure:

Math expressions are not rendered properly

For instance, the line of \frac is not rendered:

Can't update graphs on react

Hi,

I'm trying to update the script based on React state management and it doesn't re-render the component. Is there any way I could do this?

Thanks

problem with clip when two figures are in the same page

It seems to me that the \clip command, as in
'\begin{scope}'
\clip (0,0) circle (1);
... some stuff possibly bleeding outside the circle ...
\end{scope}
works well only when there is just one figure in the page.
If a second figure containing a \clip command is added in the same page, the "shape" of the new clipping area is ignored, and the one for the previous figure is used.
Here is a MWE.

CORS

Following the instructions including the js and css file into the head of the HTML and using a script tag for the tikz picture I get a CORS error in the console.

Access to fetch at 'http://tikzjax.com/ef253ef29e2f057334f77ead7f06ed8f22607d38.wasm' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This happens to both localhost and a domain.

Any help is appreciated.

Add math into node

Hello,

First, thanks a lot for this great software, it looks awesome! I just would like to report some bugs making me unable to display proper math in a node:

<script type="text/tikz">
  \begin{tikzpicture}
  \node at (0,0) {Coucou $\sqrt{2}$};
  \end{tikzpicture}
</script>

Gives:

usetikzlibrary

Does it possible to use the \usetikzlibrary{} line? I tried to put along the \begin{tikzpicture} line but no success.

Duplicate, please delete this issue post

It's probably https problem. Sorry for duplicate issue, I commented at proper issue post. Please delete this duplicate.

Mike
Thanks.

diagrams including \mathbb are not rendered

I found \mathbb command is not working in this module, which seems to be natural since mathbb requires extra packages like amsfonts. Is there any possible solution to tackle this problem?