EdgeRule

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

Props

nodeAttributes

• type: nodeAttributes

• default: {}

  The attributes to apply to the nodes.

edgeAttributes

• type: edgeAttributes

• default: {}

  The attributes to apply to the edges.

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

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