Link Stroke Width

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.5/joint.css" />
</head>
<body>
      <!-- content -->
      <div id="paper"></div>

      <!-- dependencies -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.5/joint.js"></script>
    
    </body>
</html>

JavaScript

const { dia, shapes } = joint;

// Paper

const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
    el: document.getElementById('paper'),
    model: graph,
    cellViewNamespace: shapes,
    width: '1000',
    height: '1000',
    gridSize: 20,
    async: true,
    sorting: dia.Paper.sorting.APPROX,
});

function updateLinkStroke(link) {
    const strokeWidth = link.get('strokeWidth');
    link.attr(['line', 'strokeWidth'], strokeWidth);
    link.prop(['labels', 0, 'attrs', 'labelText', 'text'], String(strokeWidth));
}

graph.on('change:strokeWidth', (link, strokeWidth) => updateLinkStroke(link));

graph.on('reset', () => {
    graph.getLinks().forEach(link => updateLinkStroke(link));
});

graph.on('add', (link) => {
    if (!link.isLink()) return;
    updateLinkStroke(link);
});

const r1 = new shapes.standard.Rectangle({
    size: { width: 100, height: 100 },
    position: { x: 50, y: 50 }
});

const r2 = new shapes.standard.Rectangle({
    size: { width: 100, height: 100 },
    position: { x: 300, y: 70 }
});

const link = new shapes.standard.Link({
    source: { id: r1.id },
    target: { id: r2.id },
    strokeWidth: 5, // Default Stroke Width
    attrs: {
      line: {
        stroke: 'red',
        targetMarker: {
          'stroke-width': 1,
          'markerUnits': 'strokeWidth', 
          'd': 'M 1,-1 0,0 1,1 Z'        
        }      
      }
    },
    defaultLabel: {
        position: { distance: .5, offset: 0 },
        markup: [
            {
                tagName: 'rect',
                selector: 'labelBody'
            }, {
                tagName: 'text',
                selector: 'labelText'
            }
        ],
        attrs: {
            labelText: {
                fill: '#000000',
                fontSize: 14,
                textAnchor: 'middle',
                textVerticalAnchor: 'middle',
                pointerEvents: 'none'
            },
            labelBody: {
                event:...