PlantUML SVG Live

by fuhrmanator

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://rawgit.com/kbwood/svg/master/jquery.svg.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kbwood/svg/master/jquery.svg.css">
<script src="https://rawgit.com/kbwood/svg/master/jquery.svgdom.js"></script>
<script src="https://cdn.rawgit.com/dankogai/js-deflate/master/rawdeflate.js"></script>
<body>
    <table>
        <thead>
            <tr>
                <td>
                    PlantUML source (<a href="http://plantuml.com/PlantUML_Language_Reference_Guide.pdf" target="_blank">help</a>)</td>
                <td>
                    PlantUML diagram (SVG)
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="scriptplantu">
                    <pre><textarea id="inflated" cols="40" rows="10" onkeyup="compress($('#inflated').val())">Bob-&gt;Alice : hello</textarea></pre>
                    <img id="err" src="http://www.plantuml.com/plantuml/chk/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000" style="display: none;">
                </td>
                <td valign="top">
                    <div id="svgload">

                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- -->
<img id="im2" src="http://www.plantuml.com/plantuml/check/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000" style="display: none;">

</body>

JavaScript

// var PlantUMLLocalServerRoot = 'http://localhost:8801/plantuml'; // jetty version: mvn jetty:run -Djetty.port=8801
// var PlantUMLServerRoot = 'https://localhost:8443'; // 
var PlantUMLLocalServerRoot = 'http://www.plantuml.com/plantuml';
var PlantUMLCloudServerRoot = 'http://www.plantuml.com/plantuml';
var svg;
$(document).ready(function() {
    svg = $('#svgload').svg({
        // add '.svg' to make sure jQuery SVG does an http GET 
        loadURL: PlantUMLLocalServerRoot + '/svg/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000.svg',
        onLoad: drawInitial
    });
    // console.log("top: svg = " + svg);
});

function drawInitial(svg) {
    // console.log("drawInitial");
}

function compress(a) {
    a = unescape(encodeURIComponent(a));
    // updates hidden image, with call-back to changed() once it's loaded
    $("#im2").one("load", function() {
        console.log("im2 loaded");
        changed();
    }).attr("src", PlantUMLCloudServerRoot + "/check/" + encode64(zip_deflate(a, 9)));
//    $("#im2").attr("src", PlantUMLCloudServerRoot + "/check/" + encode64(zip_deflate(a, 9)));
    // console.log("compress -- updated image to " + $("#im2").attr("src"));
}

function changed() {
    // console.log("Changed...");
    var testImage = $("#im2");
    var svgPath = testImage.attr("src").replace("/check/", "/svg/");

    // console.log(svgPath);
    // console.log(testImage);

    if (testImage.width() == 1) {
        // console.log("Check passed");
        $("#err").hide();
        $("#err").attr("src", PlantUMLCloudServerRoot + "/chk/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000");


        var svg = $('#svgload').svg('get');
        // add '.svg' to make sure jQuery SVG does an http GET 
        svg.load(svgPath + ".svg", {
            addTo: false,
            changeSize: false,
            onLoad: loadDone
        })

    } else {
        $("#err").attr("src", svgPath);
        $("#err").show();
    }
}

/* Callback after loading external document */
function loadDone(svg, error)...