Ogma-vue

Appearance

NodeGrouping ​

Creates a transformation that groups nodes.

Props ​

enabled ​

  • type: boolean

  • default: True

    Whether the transformation is enabled or not.

duration ​

  • type: number

  • default: 0

    Animation duration.

events ​

  • type: string | string[]

  • default: 'all'

  • values: 'all' | 'enabled' | 'disabled' | 'refreshed' | 'indexChanged' | 'destroyed'

    Which events to register on.

options ​

Events ​

enabled ​

  • payload: transformation: NodeGrouping

Emitted when the transformation is enabled.

disabled ​

  • payload: transformation: NodeGrouping

Emitted when the transformation is disabled.

refreshed ​

  • payload: transformation: NodeGrouping

Emitted when the transformation is refreshed.

indexChanged ​

  • payload: transformation: NodeGrouping

Emitted when the transformation index is changed. See transformation pipeline.

Example ​

vue
<template>
  ...
  <NodeGrouping
    :options="grouping.options"
    :enabled="grouping.enabled"
    :duration="grouping.duration"
    @enabled="onEnabled"
  />
  ...
</template>
<script setup lang="ts">
import { NodeGrouping, NodeGroupingProps } from "@linkurious/ogma-vue";
const grouping = ref<NodeGroupingProps>({
  enabled: true,
  duration: 1000,
  options: {
    selector: () => true,
    groupIdFunction: (node) => node.getId() % 2,
  },
});
function onEnabled(transformation) {
  console.log("Enabled: ", transformation);
}
</script>