Appearance

  2. API
  3. Ogma

Ogma.layers ​

Layers API: functions to add custom annotation layers to your graph visualization.

ogma.layers.addCanvasLayer(draw[, index][, options]) ​

Add a canvas layer. Useful to perform drawings in sync with the view. In the drawing function you are given the CanvasRenderingContext2D, that is automatically scaled and translated to be in sync with the graph. So you can simply use graph coordinates to draw shapes and text in it. See our "Layers" examples for the code snippets.

Arguments

  • draw DrawingFunction The function drawing on the canvas in the graph space.
  • index(optional) number The optional index of the layer.
  • options(optional) CanvasLayerOptions The optional layer options

Returns

ogma.layers.addLayer(element[, index]) ​

Add an HTML element as an overlay to Ogma at the specifided index (if provided). This is the most basic way of adding your custom HTML elements to the Ogma canvas, they will be positioned at a coordinate (in graph space) and kept in sync with the camera movement, but not scaled.

Arguments

  • element HTMLElement | string The HTML element attached to the layer. Can be an HTML string.
  • index(optional) number The optional index of the layer.

Returns

  • Layer Returns the layer object.

ogma.layers.addOverlay(options[, index]) ​

Adds an overlay layer to Ogma, that will update its position and scale in sync with the graph. Ideal for images or complex annotations of the nodes.

Arguments

  • options OverlayOptions HTML element provided with its affine transformation in the graph space.
  • index(optional) number The optional index of the layer.

Returns

ogma.layers.addSVGLayer([options][, index]) ​

Add a SVG layer. Useful to perform drawings in sync with the view. In the drawing function, the svg is automatically scaled and translated to be in sync with the graph. So you can simply use graph coordinates to draw shapes and text in it. See our "Layers" examples for the code snippets.

Arguments

  • options(optional) SVGLayerOptions The optional layer options
  • index(optional) number The optional index of the layer.

Returns

  • SVGLayer Returns the canvas layer object.