Ogma-vue

Appearance

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>