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 in the diagram's renderOptions.edges.lineStyle:

<script>

import { DiagramComponent } from "@visuallyjs/browser-ui-svelte"
    
const data = {
  nodes:[
    {id:"1",x:50,y:50,type:"rectangle"},
     {id:"2",x:350,y:150,type:"rectangle"}
  ],
  edges:[
    {source:"1",target:"2"}
  ]
}
    
const options = {
  edges: {
    lineStyle: {
      color: "#456",
      lineWidth: 2,
      outlineWidth: 3,
      outlineColor: "#f9c74f"
    }
  }
}
    
</script>    

<div class="my-container">
    <DiagramComponent data={data} options={options}/>
</div>

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.

<script>

import { DiagramComponent } from "@visuallyjs/browser-ui-svelte"
    
const data = {
  nodes:[
    {id:"1",x:50,y:50,type:"rectangle"},
     {id:"2",x:350,y:150,type:"rectangle"}
  ],
  edges:[
    {source:"1",target:"2"}
  ]
}
    
const options = {
  edges: {
    lineStyle: {
      color: "#456",
      lineWidth: 2,
      outlines: [
        {
          width: 3,
          color: "#43a5e8"
        },
        {
          width: 3,
          color: "#f9c74f"
        }
      ]
    }
  }
}
    
</script>    

<div class="my-container">
    <DiagramComponent data={data} options={options}/>
</div>

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

DiagramOptions.defaults accepts a UICoreDefaults object, including a paintStyle for edges. Set this through renderOptions.defaults.paintStyle. The simpler renderOptions.edges.lineStyle configuration is shown above.

Single outline

When using paintStyle, the equivalent single outline properties are outlineWidth and outlineStroke:

<script>

import { DiagramComponent } from "@visuallyjs/browser-ui-svelte"
    
const data = {
  nodes:[
    {id:"1",x:50,y:50,type:"rectangle"},
     {id:"2",x:350,y:150,type:"rectangle"}
  ],
  edges:[
    {source:"1",target:"2"}
  ]
}
    
const options = {
  defaults: {
    paintStyle: {
      stroke: "#456",
      strokeWidth: 2,
      outlineWidth: 3,
      outlineStroke: "#f9c74f"
    }
  }
}
    
</script>    

<div class="my-container">
    <DiagramComponent data={data} options={options}/>
</div>

Multiple outlines

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

<script>

import { DiagramComponent } from "@visuallyjs/browser-ui-svelte"
    
const data = {
  nodes:[
    {id:"1",x:50,y:50,type:"rectangle"},
     {id:"2",x:350,y:150,type:"rectangle"}
  ],
  edges:[
    {source:"1",target:"2"}
  ]
}
    
const options = {
  defaults: {
    paintStyle: {
      stroke: "#456",
      strokeWidth: 2,
      outlines: [
        {
          outlineWidth: 3,
          stroke: "#43a5e8"
        },
        {
          outlineWidth: 3,
          stroke: "#f9c74f"
        }
      ]
    }
  }
}
    
</script>    

<div class="my-container">
    <DiagramComponent data={data} options={options}/>
</div>