Skip to content

EdgeRule

Creates a style class for nodes and edges. It is similar to NodeRule and EdgeRule but provides a nodes and edges prop to apply the rule to a subset of nodes and edges instead of using a selector function.

Props

nodeAttributes

edgeAttributes

edges

  • type: EdgeList

  • default: undefined

    The edges to apply the rule to.

nodes

  • type: NodeList

  • default: undefined

    The nodes to apply the rule to.

Example

vue
<template>
  ...
  <StyleClass
    :edgeAttributes="ruleProps.edgeAttributes"
    :nodeSelector="ruleProps.nodeSelector"
    :nodes="ruleProps.nodes"
    :edges="ruleProps.edges"
  />
  ...
</template>
<script setup lang="ts">
import { StyleClass } from "@linkurious/ogma-vue";
  const ruleProps = ref<StyleClassProps> ({
    edges: () => ogma.getEdges(),
    edgeAttributes: {
      color: "blue",
      text: (edge) => edge.getData("name"),
    },
    nodes: () => ogma.getNodes(),
    nodeAttributes: {
      color: "blue",
      text: (node) => node.getData("name"),
    },
  })
};
</script>

Example

vue
<template>
  ...
  <StyleClass
    :edges="styleClass.edges"
    :nodeAttributes="styleClass.nodeAttributes"
    :nodes="styleClass.nodes"
    :edgeAttributes="styleClass.edgeAttributes"
  />
  ...
</template>
<script setup lang="ts">
import { StyleClass, StyleClassProps } from "@linkurious/ogma-vue";
const ogma = inject<ogma>("ogma")!;
const filter = ref<StyleClassProps>({
  nodeAttributes: {
    color: "blue",
  },
  edgeAttributes: {
    color: "blue",
  },
  nodes: () => ogma.getNodes(),
  edges: () => ogma.getEdge(),
});
</script>