Skip to content

Ogma

Main Ogma component, it automatically creates an Ogma instance and provides it to its children. If you want to pass it your own instance, or if you want to type nodes and edges data types, see useOgma.

Props

width

  • type: number | undeifined
  • default: undefined

Width of Ogma canvas. If not set, width of the container will be used.

height

  • type: number | undefined
  • default: undefined

Height of Ogma canvas. If not set, height of the container will be used.

graph

  • type: RawGraph | undefined
  • default: () => ({ nodes: [], edges: [] })

Graph to render. If not set, an empty graph will be rendered.

options

Options to pass to Ogma instance. If not set, default options will be used.

layoutOnMounted

  • type: boolean
  • default: true

Whether to layout the graph when the component is mounted.

events

  • type: string[] | "all"
  • default: "all"

Events to listen to. If set to "all", all events will be listened to. See events for a list of available events.

Events

addEdges

Triggered when edges are added to the graph.

addGraph

Triggered when a graph is added to the graph.

addNodes

Triggered when nodes are added to the graph.

beforeRemoveEdges

Triggered before edges are removed from the graph.

beforeRemoveNodes

Triggered before nodes are removed from the graph.

clearGraph

Triggered when the graph is cleared.

click

Triggered when the user clicks on the graph.

connectNodes

Triggered when nodes are connected.

destroy

Triggered when the Ogma instance is destroyed.

doubleclick

Triggered when the user double clicks on the graph.

dragEnd

Triggered when the user stops dragging the graph.

dragProgress

Triggered when the user drags the graph.

dragStart

Triggered when the user starts dragging the graph.

drop

Triggered when the user drops something on the graph.

edgesSelected

Triggered when edges are selected.

geoDisabled

Triggered when the geo mode is disabled.

geoEnabled

Triggered when the geo mode is enabled.

geoLoaded

Triggered when the geo mode is loaded.

gestureEnd

Triggered when the user stops a gesture.

gestureProgress

Triggered when the user performs a gesture.

gestureStart

Triggered when the user starts a gesture.

keydown

Triggered when the user presses a key.

keyup

Triggered when the user releases a key.

layoutComputed

Triggered when the layout is computed.

layoutEnd

Triggered when the layout ends.

layoutStart

Triggered when the layout starts.

mousedown

Triggered when the user presses the mouse button.

mousemove

Triggered when the user moves the mouse.

mouseout

Triggered when the user moves the mouse out of the graph.

mouseover

Triggered when the user moves the mouse over the graph.

mouseup

Triggered when the user releases the mouse button.

mousewheel

Triggered when the user scrolls the mouse wheel.

nodesDragEnd

Triggered when the user stops dragging nodes.

nodesDragProgress

Triggered when the user drags nodes.

nodesDragStart

Triggered when the user starts dragging nodes.

nodesSelected

Triggered when nodes are selected.

nodesUnselected

Triggered when nodes are unselected.

removeEdges

Triggered when edges are removed from the graph.

removeNodes

Triggered when nodes are removed from the graph.

rendererStateChange

Triggered when the renderer state changes.

resize

Triggered when the graph is resized.

rotate

Triggered when the graph is rotated.

tooltipHide

Triggered when the tooltip is hidden.

tooltipShow

Triggered when the tooltip is shown.

transformationDestroyed

Triggered when a transformation is destroyed.

transformationDisabled

Triggered when a transformation is disabled.

transformationEnabled

Triggered when a transformation is enabled.

transformationRefresh

Triggered when a transformation is refreshed.

transformationSetIndex

Triggered when a transformation index is set.

updateEdgeData

Triggered when edge data is updated.

updateNodeData

Triggered when node data is updated.

viewChanged

Triggered when the view changes.

Slots

default

  • type: VNode[]

Put your Ogma components here. They will be provided with the Ogma instance.

Provide

ogma

The Ogma instance created by the component (or passed to if using useOgma).

Example

vue
<template>
  <Ogma :graph="graph" :options="options" @addNodes="onAddNodes">
    <NodeFilter :options="nodeFilterOptions" :enabled="true" />
    <NodeRule :attributes="nodeAttributes" />
  </Ogma>
</template>
<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";
import {
  Ogma,
  NodeFilter,
  NodeRule,
  OgmaProps,
  NodeFilterProps,
  NodeRuleProps,
} from "@linkurious/ogma-vue";

const graph = ref<OgmaProps["graph"]>({
  nodes: [],
  edges: [],
});
const nodeAttributes = ref<NodeRuleProps["attributes"]>({
  color: "#33dd66",
});
const nodeFilterOptions = ref<NodeFilterProps["options"]>({
  nodeFilter: (node) => node.data("type") === "person",
});

onMounted(() => {
  axios.fetch("/some/api").then(({ data }) => {
    graph.value = data;
  });
});

function onAddNodes(nodes: NodeList) {
  console.log("new nodes: ", nodes.getId());
}
</script>