Skip to content

EdgeRule

Creates a style rule for nodes and edges. It has more options than NodeRule and EdgeRule.

Props

nodeAttributes

edgeAttributes

edgeSelector

  • type: (edge: Edge) => Boolean

  • default: () => true

    The selector function to apply to the edges.

nodeSelector

  • type: (node: Node) => Boolean

  • default: () => true

    The selector function to apply to the nodes.

edgeDependencies

  • type: EdgeDependency

  • default: {}

    The dependencies to on which the rule is update (datachange, extremities change etc). See tutorial

nodeDependencies

  • type: NodeDependency

  • default: {}

    The dependencies to on which the rule is update (datachange, extremities change etc). See tutorial

edgeOutput

  • type: EdgeOutput

  • default: {}

    Edge attributes assigned by the rule. If unspecified, they are inferred from the edgeAttributes field. See tutorial

nodeOutput

  • type: NodeOutput

  • default: {}

    Node attributes assigned by the rule. If unspecified, they are inferred from the nodeAttributes field. See tutorial

Example

vue
<template>
  ...
  <StyleRule
    :nodeSelector="rule.nodeSelector"
    :nodeAttributes="rule.nodeAttributes"
    :edgeSelector="rule.edgeSelector"
    :edgeAttributes="rule.edgeAttributes"
  />
  ...
</template>
<script setup lang="ts">
import { StyleRule, StyleRuleProps } from "@linkurious/ogma-vue";
const rule = ref<StyleRuleProps>({
  nodeAttributes: {
    color: "blue",
  },
  nodeSelector: () => true,
  edgeAttributes: {
    color: "blue",
  },
  edgeSelector: () => true,
});
</script>