Link with shadow

Custom attribute

by Roman Bruckner

HTML

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

      <!-- dependencies -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.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.6.2/joint.js"></script>
    
    </body>
</html>

JavaScript

const { util, dia, shapes } = joint;

const graph = new dia.Graph({}, {
  cellNamespace: shapes
});

const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 800,
  height: 900,
  model: graph,
  cellViewNamespace: shapes,
  gridSize: 10,
  async: true,
  sorting: joint.dia.Paper.sorting.APPROX,
});

// Example


const filterShadowMarkupJSON = util.svg`${util.filter.dropShadow({
    dx: 2,
    dy: 2,
    blur: 3
})}`;

dia.attributes.shadow = {
    set: function(_, refBBox, node) {
        const { paper } = this;
        const filterId = `filter-${node.id}-${this.cid}`;
        let filterEl = paper.svg.getElementById(filterId);
        if (!filterEl) {
            const filterDoc = util.parseDOMJSON(filterShadowMarkupJSON);
            filterEl = filterDoc.fragment.firstChild;
            filterEl.setAttribute('filterUnits', 'userSpaceOnUse');
            filterEl.id = filterId;
            paper.defs.appendChild(filterEl);
        }
        return { filter: `url(#${filterId})` };
    }
};


const link = new joint.shapes.standard.Link({
    source: { x: 20, y: 20 },
    target: { x: 350, y: 20 },
    attrs: {
        line: {
            stroke: '#222138',
            shadow: true,
            sourceMarker: {
                'fill': '#31d0c6',
                'stroke': 'none',
                'd': 'M 5 -10 L -15 0 L 5 10 Z'
            },
            targetMarker: {
                'fill': '#fe854f',
                'stroke': 'none',
                'd': 'M 5 -10 L -15 0 L 5 10 Z'
            }
        }
    }
});

link.addTo(graph);