02 Crop the Polyline
Step 3/12 — 03 Create Parallel Polylines
01 Create a Polyline 02 Crop the Polyline 03 Create Parallel Polylines 04 Render Performance 05 Making the Style Configurable 06 Data from Tag 07 Hit-Testing 08 Item Visibility 09 Render Boundaries 10 Bridge Support 11 Adding Arrows 12 Custom Arrow
04 Render Performance

# A more interesting line visualization

Currently, the custom edge style renders a simple polyline. This is something yFiles for HTML already offers out-of-the box with PolylineEdgeStyle. So let’s use something more interesting, for example two polylines running parallel.

Since calculating the offset path of the parallel lines is complex, we imitate this look by rendering a white line on top of a wider black line. We start by rendering a black path of wide width along the edge.

    const widePath = croppedGeneralPath.createSvgPath()
    widePath.setAttribute('fill', 'none')
    widePath.setAttribute('stroke', 'black')
    widePath.setAttribute('stroke-width', '4')

Then, we render a path of narrower width on top of the black one. The path gets the same color as the canvas’s background, which is currently set to white.

    const thinPath = croppedGeneralPath.createSvgPath()
    thinPath.setAttribute('fill', 'none')
    thinPath.setAttribute('stroke', 'white')
    thinPath.setAttribute('stroke-width', '2')

Finally, we combine both paths into an SVG group and return it as a SVG visual. It is important that we add the wide path first and then the thin path, resulting in the white path rendering above the black path.

    const group = document.createElementNS('http://www.w3.org/2000/svg', 'g')
    group.append(widePath, thinPath)
    return new SvgVisual(group)

04 Render Performance