Using Vue.js Templates in Node Styles

Besides the template styles that are shipped with yFiles for HTML, you can also use the VuejsNodeStyle that uses the Vue.js framework to interpret the given SVG template. This INodeStyle is provided as ready-to-use demo code as part of the Vue Template Node Style demo.

Thus, you can utilize the whole binding functionality of Vue.js for arbitrary expressions as well as conditional rendering. This makes the VuejsNodeStyle more versatile and easily customizable compared with the template styles that are part of the yFiles for HTML library.

Using Data Binding

The node style provides the following graph properties to which the SVG template can be bound:

The SVG template for each node is rendered relative to its top-left location. Thus setting x/y attributes of an SVG element results in it being rendered x/y from the node’s top-left bounds.

Usage

First you need to add Vue.js to your project which is best explained in the Vue.js installation guide. For example, you could reference it via <script> tag:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

Then, simply import the VuejsNodeStyle from the <yfiles-package>/utils/VuejsNodeStyle.js (or copy it into your project) and use it like any other INodeStyle, e.g.

import VuejsNodeStyle from '../../utils/VuejsNodeStyle.js'

const template = `<g>...</g>`

// maybe use it as default node style
graphComponent.graph.nodeDefaults.style = new VuejsNodeStyle(template)

Example

The Vue Template Node Style demo interactively shows this node style in action and illustrates data binding features and Vue.js conditional rendering to create a rich and zoom dependent node style.

A simple SVG template that utilizes data binding features as well as features from the Vue.js framework could look like this (assuming the node’s user data provides the status and name property):

<g>
  <rect fill="#FAFAFA" :width="layout.width" :height="layout.height" x="0" y="0"></rect>
  <rect v-if="tag.status === 'present'" :width="layout.width" height="5" :y="layout.height - 5" fill="green"></rect>
  <rect v-else-if="tag.status === 'busy'" :width="layout.width" height="5" :y="layout.height - 5" fill="red"></rect>
  <g style="font-family: Roboto,sans-serif; fill: #444" width="185">
    <text :transform="`translate(90 ${layout.height * 0.5})`" style="font-size: 16px; fill: #336699">{{tag.name}}</text>
  </g>
</g>

The VuejsNodeStyle is provided as source code for you to easily tailor it towards your use case if the default implementation is not sufficient.