Skip to main content

XyJax

The @liqvid/xyjax package provides a few helpers for animating XyJax diagrams in Liqvid videos. It depends on @liqvid/mathjax.

At this time, you need to use a mildly modified version of XyJax in order for us to be able to hook into it: you should load https://cdn.jsdelivr.net/gh/ysulyma/mathjax-extensions/xypic.js instead of https://cdn.jsdelivr.net/gh/sonoisa/XyJax-v3@3.0.1/build/ (see the examples below).

Examples​

Animating arrows​

  • Refresh

Colored arrows​

XyJax does not allow arbitrary colors for arrows. We provide a very hacky way to do that. (This is not really Liqvid-related, it's just been useful in my videos.)

  • Refresh

Exports​

useAnimateArrows()​

Animate XyJax arrows.

Parameters​

Accepts the following parameters:

  • opts
    Options object with the following keys:

    • opts.head?: string
      CSS selector for arrow head.

    • opts.tail?: string
      CSS selector for arrow tail.

    • opts.label?: string
      CSS selector for arrow label.

    • opts.ref
      Reference to container <MJX>

    • opts.tailFn: (t: number) => number
      Animation function for arrow tail.

    • opts.headFade?: KeyframeEffectOptions
      Fade options for arrow head.

    • opts.labelFade?: KeyframeEffectOptions
      Fade options for arrow label.

  • deps?: React.DependencyList
    List of dependencies.

xyEncodeColor()​

Encode a hex color for XyJax.

Parameters​

  • color: string
    Hex color to encode.

xyDecodeColor()​

Decode a hex color for XyJax.

Parameters​

  • color: string
    Encoded hex color to decode.

tob52()​

Encode an object for XyJax.

Parameters​

  • str: string
    Dataset string to encode.

fromb52()​

Decode an object for XyJax.

Parameters​

  • str: string
    String to decode.