JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<script src="http://gojs.net/latest/release/go.js"></script>
<div class="flowchart-demo" id="flowchart-demo"></div>
<button onclick="save()">Save</button>

<div id="overview" style="width: 150px; min-height: 150px;display: inline-block;bottom: 100px;position:absolute"></div>

CSS

#flowchart-demo {
    width: 100%;
    height: 600px;
}

JavaScript

var $G = go.GraphObject.make;
        //#region Helper elements
        function getTextBlockUnderShape(width) {
            return $G(go.TextBlock, { margin: new go.Margin(5, 0, 0, 0), width: width, textAlign: 'center' }, new go.Binding("text", "text"));
        }

        function getRedRemoveIcon(x, y) {
            return $G(go.Panel, 'Auto',
                { alignment: new go.Spot(x, y) },
                new go.Binding('visible', 'isSelected').ofObject(),
                $G(go.Shape, 'Circle', { width: 15, height: 15, fill: '#CD2332', stroke: '#CD2332' }),
                $G(go.Shape, 'XLine', { width: 7, height: 7, stroke: 'white', strokeWidth: 2 }),
                {
                    click: function (e, obj) {
                        alert('Remove element ' + JSON.stringify(obj.part.data));
                    }
                }
            );
        }

        function getPort(x, y, settings) {
            var settings = $.extend(settings, { alignment: new go.Spot(x, y), opacity: 0, cursor: 'pointer' });
            return $G(go.Panel, 'Auto', settings,
                        $G(go.Shape, 'Circle', { width: 15, height: 15, fill: '#39B549', stroke: 'white', strokeWidth: 2 }));
        }

        function showPorts(node, show) {
            var diagram = node.diagram;
            if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
            var it = node.ports;
            while (it.next()) {
                var port = it.value;
                port.opacity = (show ? 1 : 0);
            }
        }

        function colorizeInnerShapes(node, show) {
            var diagram = node.diagram;
            if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
            var it = node.findObject('innerShape');
            if (it) {
                it.stroke = (show ? 'white' : '#009FE6');
            }
            //debugger
            //while (it.next()) {
            //    var port = it.value;
            //    port.stroke =...