JSFiddle - React, Tailwind, and code Playground

by Roman Bruckner

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta name=description content="JointJS Chatbot Design">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <title>JointJS Chatbot Design</title>
</head>
<body>
    <noscript>
        <strong>This application doesn't work without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    
    <div class="column middle" id="diagram" onLoad = "svgLoaded();"></div>

    <!-- dependencies -->

    <script src="https://unpkg.com/@joint/[email protected]/dist/joint.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/svg-pan-zoom.min.js"></script>

    <!-- code -->
    <script src="diagram_fiddle.js"></script>

</body>
</html>

JavaScript

var namespace = joint.shapes;

var defaults = {
    router: 'normal',
    connector: 'straight',
    corner: { cornerType: 'cubic', precision: 0, cornerRadius: 20 },
    body: { fill: 'white', stroke: 'black', highlight: 'orange' },
    line: { fill: 'black', stroke: 'black', highlight: 'orange' },
    label: { fill: 'black' }
};

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

var paper = new joint.dia.Paper({
    el: document.getElementById('diagram'),
    model: graph,
    width: screen.width/4,
    height: screen.height/2,
    cellViewNamespace: namespace,
		gridSize: 10,
   // drawGrid: false,
    background: { color: 'rgba(250, 0, 0, 0.07)' },
    defaultLink: () => {
        let new_link = new joint.shapes.standard.Link({ attrs: { wrapper: { cursor: 'default' } } });
        new_link.router(defaults.router);
        new_link.connector(defaults.connector, defaults.corner);
        return new_link;
    },
    linkPinning: false,
    defaultConnectionPoint: { name: 'boundary' },
    validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
        // Prevent linking to anything that isn't a box
        if (cellViewT.model.attributes.type !== 'standard.Rectangle')
            return false;

        // Prevent linking to output ports
        if (magnetT && magnetT.getAttribute('port-group') === 'out')
            return false;

        return true;
    }
});

function bindInteractionEvents(graph, paper)
{
    paper.on('blank:pointerdown', function() {
        panZoom.enablePan();
    });

    paper.on('blank:pointerup', function() {
        panZoom.disablePan();
    });
}

function constructElements(graph)
{
     var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
            text: 'Hello',
                fill: 'white'
            }
        });
      ...