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

• type: nodeAttributes

• default: {}

  The attributes to apply to the nodes.

edgeAttributes

• type: edgeAttributes

• default: {}

  The attributes to apply to the edges.

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

<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

<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>