Outlines

An outline follows an edge's path and is painted behind it. Use an outline to make an edge stand out against the canvas, or combine several outlines to create bands of colour.

Single outline

Set outlineWidth and outlineColor on an edge mapping in your view:

import { Component, ViewChild } from '@angular/core';
import { SurfaceComponent } from '@visuallyjs/browser-ui-angular';

@Component({
  selector: 'app-root',
  template: ` <vjs-surface [viewOptions]="viewOptions"></vjs-surface> `
})
export class AppComponent {
  viewOptions = {
  edges: {
    default: {
      color: "#456",
      lineWidth: 2,
      outlineWidth: 3,
      outlineColor: "#f9c74f"
    }
  }
};
}

outlineWidth is the width added to each side of the edge path, in pixels. The total width is lineWidth + (2 * outlineWidth), so this example has a 2 pixel edge path with a 3 pixel outline on either side, for a total width of 8 pixels.

You can also set these properties in an edge's backing data, alongside other simple style properties such as color and lineWidth:

{
    "source": "1",
    "target": "2",
    "data": {
        "color": "#456",
        "lineWidth": 2,
        "outlineWidth": 3,
        "outlineColor": "#f9c74f"
    }
}

Multiple outlines

From 1.2.12, use outlines to provide an array of outline layers. Each entry has a width and a color. The layers are ordered innermost first: the first surrounds the edge path, the second surrounds the first, and so on.

import { Component, ViewChild } from '@angular/core';
import { SurfaceComponent } from '@visuallyjs/browser-ui-angular';

@Component({
  selector: 'app-root',
  template: ` <vjs-surface [viewOptions]="viewOptions"></vjs-surface> `
})
export class AppComponent {
  viewOptions = {
  edges: {
    default: {
      color: "#456",
      lineWidth: 2,
      outlines: [
        {
          width: 3,
          color: "#43a5e8"
        },
        {
          width: 3,
          color: "#f9c74f"
        }
      ]
    }
  }
};
}

Each layer's width is added to each side of the preceding stroke. In this example, the blue layer has a total stroke width of 8 pixels, and the yellow layer has a total stroke width of 14 pixels. The visible bands are 3 pixels of blue and 3 pixels of yellow on each side of the edge path.

You can also provide outlines in an edge's backing data:

{
    "source": "1",
    "target": "2",
    "data": {
        "color": "#456",
        "lineWidth": 2,
        "outlines": [
            {
                "width": 3,
                "color": "#43a5e8"
            },
            {
                "width": 3,
                "color": "#f9c74f"
            }
        ]
    }
}

When supplied, outlines replaces the single outline configured with outlineWidth and outlineColor. An empty array, outlines: [], disables decorative outlines. Outline layers do not change on hover.

Using paint styles

If you configure edges with paintStyle, the equivalent single outline properties are outlineWidth and outlineStroke:

{
    "edges": {
        "default": {
            "paintStyle": {
                "stroke": "#456",
                "strokeWidth": 2,
                "outlineWidth": 3,
                "outlineStroke": "#f9c74f"
            }
        }
    }
}

For multiple outlines inside a paintStyle, use outlineWidth and stroke for each layer, rather than the width and color names used on an edge mapping or in edge data:

{
    "edges": {
        "default": {
            "paintStyle": {
                "stroke": "#456",
                "strokeWidth": 2,
                "outlines": [
                    {
                        "outlineWidth": 3,
                        "stroke": "#43a5e8"
                    },
                    {
                        "outlineWidth": 3,
                        "stroke": "#f9c74f"
                    }
                ]
            }
        }
    }
}