Connection Perpendicular

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.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.6.5/joint.js"></script>
    
    </body>
</html>

React

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

const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 3000,
  height: 3000,
  model: graph,
  gridSize: 5,
	drawGrid: true,
	restrictTranslate: true,
	cellViewNamespace: joint.shapes,
	autoResizePaper: false,
	defaultConnectionPoint: { name: 'boundary' },
  cellViewNamespace:joint.shapes,
  defaultLink: new joint.shapes.standard.Link({
		attrs: {
			line: {
				stroke: 'grey',
				targetMarker: {
					type: 'path',
					d: 'M 0 0 0 0',
				},
			},
		},
	}),
	interactive: { linkMove: true },
	async: true,
	snapLabels: true,
	sorting: joint.dia.Paper.sorting.APPROX,
	defaultLinkAnchor: { name: 'connectionPerpendicular' },
	validateConnection:()=>{return true}


});

const json=JSON.parse("{\"cells\":[{\"type\":\"standard.Link\",\"source\":{\"x\":125,\"y\":330},\"target\":{\"x\":485,\"y\":330},\"router\":{\"name\":\"normal\"},\"id\":\"15252b79-cb75-4582-8228-97102240079c\",\"z\":1,\"hoverPostion\":{\"x\":142,\"y\":1},\"attrs\":{\"line\":{\"stroke\":\"#808080\",\"targetMarker\":{\"d\":\"M 0 0 0 0\",\"stroke\":\"none\"},\"sourceMarker\":{\"stroke\":\"none\"}}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":170,\"y\":50},\"size\":{\"width\":80,\"height\":50},\"angle\":0,\"id\":\"e2a223ba-d057-4a9f-a910-599f8e2e3ac1\",\"z\":2,\"attrs\":{\"body\":{\"stroke\":\"#00A3FF\",\"fill\":\"#b5def5\",\"rx\":2,\"ry\":2,\"strokeDasharray\":\"0\"},\"text\":{\"text\":\"Text\",\"fill\":\"grey\",\"fontFamily\":\"Roboto...