GitHub Discussion #2207

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

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>

JavaScript

const injectionWellST = joint.dia.Element.define(
  "injectionWellST", {
    attrs: {
      root: {
        magnet: false // Adding this prevents the ports from linking to the root
      },
      l1: {
        x1: "calc(w)",
        y1: "calc(h)",
        x2: "calc(1.25*w)",
        y2: "calc(1.25*h)",
        strokeWidth: 3,
        stroke: "black",
        fill: "rgba(0,255,0,0.3)",
      },
      l2: {
        x1: "0",
        y1: "0",
        x2: "calc(-0.25*w)",
        y2: "calc(-0.25*h)",
        strokeWidth: 3,
        stroke: "black",
        fill: "rgba(0,255,0,0.3)",
      },
      l3: {
        x1: "calc(w)",
        y1: "0",
        x2: "calc(1.25*w)",
        y2: "calc(-0.25*h)",
        strokeWidth: 3,
        stroke: "black",
        fill: "rgba(0,255,0,0.3)",
      },
      l4: {
        x1: "0",
        y1: "calc(h)",
        x2: "calc(-0.25*w)",
        y2: "calc(1.25*h)",
        strokeWidth: 3,
        stroke: "black",
        fill: "rgba(0,255,0,0.3)",
      },
      outline: {
        x: 0,
        y: 0,
        width: "calc(w)",
        height: "calc(h)",
        strokeWidth: 1,
        stroke: "#000000",
        fill: "#035afc",
      },
    },
    ports: {
      groups: {
        main: {
          position: 'absolute',
          attrs: {
            circle: { magnet: true }
          }
        },
      },
      items: [{
        id: 'p1',
        group: 'main',
        args: {
          x: 'calc(w / 2)',
          y: 0
        },
      }, {
        id: 'p2',
        group: 'main',
        args: {
          x: 'calc(w)',
          y: 'calc(h/ 2)'
        },
      }, {
        id: 'p3',
        group: 'main',
        args: {
          x: 'calc(w /2)',
          y: 'calc(h)'
        }
      }, {
        id: 'p4',
        group: 'main',
        args: {
          x: 0,
          y: 'calc(h / 2)'
        }
      }]
    }
  }, {
    markup: [{
        tagName: "line",
        selector: "l1",
      },
      {
        tagName: "line",
       ...