GitHub Discussion #1861

https://github.com/clientIO/joint/discussions/1861

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

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

const paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    width: 800,
    height: 900,
    model: graph,
    defaultConnectionPoint: {
        name: 'boundary'
    },
    cellViewNamespace: joint.shapes,
    gridSize: 10,
    async: true,
    sorting: joint.dia.Paper.sorting.APPROX,
    linkPinning: false,
    defaultLink: () => new joint.shapes.standard.DoubleLink()
});

// Example

var el1 = new joint.shapes.standard.Rectangle({
    position: {
        x: 10,
        y: 170
    },
    size: {
        width: 100,
        height: 90
    },
    attrs: {
        label: {
            text: 'A'
        }
    }
});
var el2 = new joint.shapes.standard.Rectangle({
    position: {
        x: 400,
        y: 150
    },
    size: {
        width: 100,
        height: 90
    },
    attrs: {
        label: {
            text: 'B'
        }
    }
});

const l1 = new joint.shapes.standard.Link({
    source: {
        id: el1.id
    },
    target: {
        id: el2.id
    }
});

graph.resetCells([el1, el2, l1]);

paper.unfreeze();

graph.getElements().forEach(el => {
  const toolsView = new joint.dia.ToolsView({
    tools: [
      new joint.elementTools.Remove({
        x: "calc(w+10)",
        y: -10,
        action: () => {
          removeElement(el, paper);
        }
      })
    ]
  });
  el.findView(paper).addTools(toolsView);
});


function removeElement(element, paper, opt) {
    paper.model.getConnectedLinks(element).forEach(function(link) {
        var isConnectedBySource = element.id === link.prop('source/id');
        var linkView = link.findView(paper);
        var connectionPoint;
        if (linkView) {
            connectionPoint = linkView[isConnectedBySource ? 'sourcePoint' : 'targetPoint'];
        }
        link.set(isConnectedBySource ? 'source' : 'target', connectionPoint || { x: 0, y: 0 }, opt);
    });
    element.remove(opt);
}