JSFiddle - React, Tailwind, and code Playground

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>

CSS

#paper {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: scroll;
}

JavaScript

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

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

const area = g.Rect(0, 0, 2000, 1000);
paper.drawBackground({
    image:'https://www.linkpicture.com/q/Trolly_height-upd-Hand-MD_1.svg',
    position: { x: area.x, y: area.y },
    size: { width: area.width, height: area.height },
});

var Rects=[
    {
        'x': 495,
        'y': 130,
        'width': 992,
        'height': 172.5,
        'type': 'long',
        'name': 1,
        'position': '',
        'row': 1
    },
    {
        'x': 495,
        'y': 130 + 1 * 172.5,
        'width': 992,
        'height': 172.5,
        'type': 'long',
        'name': 2,
        'position': '',
        'row': 2
    },
    {
        'x': 495,
        'y': 130 + 2 * 172.5,
        'width': 992,
        'height': 172.5,
        'type': 'long',
        'name': 3,
        'position': '',
        'row': 3
    },
    {
        'x': 495,
        'y': 130 + 3 * 172.5,
        'width': 992,
        'height': 172.5,
        'type': 'long',
        'name': 4,
        'position': '',
        'row': 4
    }
];
Rects.forEach((val, ind) => {

    var line = V('rect', {
        x: val.x,
        y: val.y,
        width: val.width,
        height: val.height,
        'stroke-width': 3,
        fill: 'transparent',
        stroke: '#142f5a',
    });

    V(paper.getLayerNode(joint.dia.Paper.Layers.BACK)).append(line);
});



function scaleToFit() {
    paper.scaleContentToFit({
        useModelGeometry: true,
        padding: { horizontal: 20,...