Interface EQN_Annotate

Equation annotation

An annotation is an equation phrase ('annotation') which is laid out relative to another equation phrase ('content'). For example:

                 AAAA
                 AAAA
         CCCCCCCC
         CCCCCCCC
         CCCCCCCC
         CCCCCCCC

The options for defining how to annotate one equation phrase with another is EQN_Annotation

Content can also be annotated with a glyph (that itself may also be annotated). The glyph can either encompass the content, or can be to the top, bottom, left or right of the content

                        Top Glyph
                 GGGGGGGGGGGGGGGGGGGGGGG
                 GGGGGGGGGGGGGGGGGGGGGGG     Encompassing Glyph
                                           /
                                         /
       GGG       GGGGGGGGGGGGGGGGGGGGGGG        GGG
       GGG       GGG                 GGG        GGG
       GGG       GGG     CCCCCCC     GGG        GGG
Left   GGG       GGG     CCCCCCC     GGG        GGG   Right
Glyph  GGG       GGG     CCCCCCC     GGG        GGG   Glyph
       GGG       GGG                 GGG        GGG
       GGG       GGGGGGGGGGGGGGGGGGGGGGG        GGG


                 GGGGGGGGGGGGGGGGGGGGGGG
                 GGGGGGGGGGGGGGGGGGGGGGG
                      Bottom Glyph

This function is used internally by almost all equation functions (except for fraction) for their layout. As such, it is very generic and powerful. It should also almost never neeed to be used as most layouts can be achieved with a different functions that will have more succinct code that is more readable.

This is provided so all layout corner cases not covered by the functions above are possible - including with custom glyphs.

Options can only be an object.

content TypeEquationPhrase
annotation EQN_Annotation — use for just one annotation
annotations EQN_Annotation[] — use for multiple annotations
fullContentBounds boolean — use full bounds of content, overriding any inSize=false properties in the content (false)
useFullBounds boolean — make the bounds of this phrase equal to the full bounds of the content even if fullContentBounds=false and the brackets only surround a portion of the content (false)
glyphs EQN_Glyphs — glyphs to annotate content with
inSize boolean — true means resulting size includes annotations (true)
space number — extend resulting equation phrase size by space on top, right, bottom and left sides (0)
topSpace number — extend resulting equation phrase size by space on top
bottomSpace number — extend resulting equation phrase size by space on bottom
leftSpace number — extend resulting equation phrase size by space on left
rightSpace number — extend resulting equation phrase size by space on right
contentScale number — scale content (1)

See

To test examples, append them to the boilerplate

Example

// Some different annotation examples
figure.add({
  name: 'eqn',
  make: 'equation',
  elements: {
    bar: { symbol: 'bar', side: 'right' },
  },
  forms: {
    // Single annotation
    1: {
      annotate: {
        content: 'a',
        annotation: {
          content: 'bbb',
          yPosition: 'top',
          yAlign: 'bottom',
          xPosition: 'left',
          xAlign: 'right',
          scale: 0.5,
        },
      },
    },
    // Multiple annotations
    2: {
      annotate: {
        content: 'a',
        annotations: [
          {
            content: 'bbb',
            yPosition: 'top',
            yAlign: 'bottom',
            xPosition: 'left',
            xAlign: 'right',
            scale: 0.5,
          },
          {
            content: 'ccc',
            xPosition: 'right',
            yPosition: 'middle',
            xAlign: 'left',
            yAlign: 'middle',
            scale: 0.5,
            offset: [0.05, 0],
          },
        ],
      },
    },
    // With glyph
    3: {
      annotate: {
        content: 'a',
        glyphs: {
          left:{
            symbol: 'bar',
            overhang: 0.1,
            annotation: {
              content: 'bbb',
              xPosition: 'right',
              yPosition: 'bottom',
              xAlign: 'left',
              yAlign: 'middle',
              scale: 0.5,
            },
          },
        },
      },
    },
  },
  formSeries: ['1', '2', '3'],
});
const eqn = figure.elements._eqn;
eqn.onClick = () => eqn.nextForm();
eqn.setTouchable();
eqn.showForm('1');
@interface

Interface EQN_Annotate

See

Example

Settings