Not logged in. · Lost password · Register
Forum: General Help and Support Plugins RSS
draw.io plugin
Avatar
berndporr #1
Member since May 2013 · 3 posts
Group memberships: Members
Show profile · Link to this post
Subject: draw.io plugin
Hi all.

I'm creating a page where I'd like to integrate drawio into DW. It works well on a standard page by using this script:

var url = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json';

var iframe = document.getElementById('drawioiframe');
iframe.src = url;

window.addEventListener('message',function(evt) {

    var source = document.getElementById('drawioimg');

    if (evt.data.length > 0)
    {
    var msg = JSON.parse(evt.data);
   
    // Received if the editor is ready
    if (msg.event == 'init')
    {
        // Sends the data URI with embedded XML to editor
        iframe.contentWindow.postMessage(JSON.stringify({action: 'load', xmlpng: source.getAttribute('src')}), '*');
    }
    // Received if the user clicks save
    else if (msg.event == 'save')
    {
        // Sends a request to export the diagram as XML with embedded PNG
        iframe.contentWindow.postMessage(JSON.stringify({action: 'export', format: 'xmlpng', spinKey: 'saving'}), '*');
    }
    // Received if the export request was processed
    else if (msg.event == 'export')
    {
        // Updates the data URI of the image
        source.setAttribute('src', msg.data);
        obj = { "image": encodeURIComponent(source.getAttribute('src')) };
        dbParam = JSON.stringify(obj);
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("POST", "json_post.php");
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("x=" + dbParam);
    }
    }
},false);

and this callback "json_post.php":
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);

$myfile = fopen("diagrams/limbic02.drawio", "w") or die("Unable to open file!");

fwrite($myfile, $obj->image);

fclose($myfile);
?>

in the main page I just embed the drawio in a frame (index.php):

<html>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Limbic</title>
<link rel="stylesheet" type="text/css" href="limbic.css">
</head>
<body>

<?php
$filename = "diagrams/limbic02.drawio";
$drawiofile = fopen($filename, "r") or die("Unable to open file!");
$src = fread($drawiofile,filesize($filename));
echo '<img align="right" width="10%" id="drawioimg" style="cursor:default;" src="';
echo $src;
echo '">';
fclose($drawiofile);
?>

<h1>The Limbic system circuit diagram project</h1>

<p>The page aims to document the circuit diagram of the limbic system.</p>

  <iframe id='drawioiframe'></iframe>
  <script src="drawio.js"></script>

<p>



</p>
</body>

can somebody point me to a plugin which does JSON calls which I could hack? I had a look at the drag/drop plugins which are probably closest.

Best,
/Bernd
Avatar
andi (Administrator) #2
User title: splitbrain
Member since May 2006 · 3497 posts · Location: Berlin Germany
Group memberships: Administrators, Members
Show profile · Link to this post
I think you would want put that into a syntax plugin (https://www.dokuwiki.org/devel:syntax_plugins). Maybe with a syntax like {{drawio>something}} where something is the name of the diagram.

Your javascript code should be converted to jQuery. See https://www.dokuwiki.org/devel:javascript

For communicating with the backend you could use the ajax unknown event. https://www.dokuwiki.org/devel:event:ajax_call_unknown

From your description this seems all pretty straight forward.
Read this if you don't get any useful answers.
Lies dies wenn du keine hilfreichen Antworten bekommst.
Avatar
FosseWay #3
Member since May 2016 · 118 posts · Location: Canada
Group memberships: Members
Show profile · Link to this post
Wow. I'd never heard of draw.io, but it looks really useful. Maybe I need to get out more  :rolleyes:

I too would be interested in a plugin which brought this functionality inside DokuWiki.
Avatar
clh #4
Member since May 2016 · 94 posts
Group memberships: Members
Show profile · Link to this post
We are already using draw.io, albeit as a standalone program currently. What's great about draw.io is that although a draw.io file is XML, it can export it as SVG with the XML tucked inside where draw.io can later find it. So a single file can both be displayed in DW, and edited in draw.io. It sure beats having to manage both a Visio file for editing and a PNG file for displaying.

The main objection our users have is that the work flow of downloading the SVG file, editing it in draw.io, and uploading it through the Media Manager is somewhat clunky. If you'd be willing to share a more complete version of your solution, I'd be extremely grateful.
Avatar
lejmr #5
Member for a month · 1 post
Group memberships: Members
Show profile · Link to this post
I have just done a very basic implementation of Draw.io plugin. The code is published on github at the moment, but I am planning to make it listed among other plugins. I tried to follow Andi's recommendations. This is my first plugin for dokuwiki, and I must say it was not that bad at all!

Initially, I tried to hire some people, but everybody declined or indicated the implementation would cost horific amount of money. In the MVP took me only about 5h.. Agree, at this moment it is not probably wise to use in production because I think anybody can modify the drawings, but the restriction will come.. Hopefully, through pull-requests :-)

https://github.com/lejmr/dokuwiki-plugin-drawio
Avatar
andi (Administrator) #6
User title: splitbrain
Member since May 2006 · 3497 posts · Location: Berlin Germany
Group memberships: Administrators, Members
Show profile · Link to this post
Quote by lejmr on 2019-10-13, 11:11:
I have just done a very basic implementation of Draw.io plugin.

Cool, however there are a couple of things that need improvements.

  • the javascript pollutes the global namespace, you should wrap everything in a anonymous function
  • you should use jQuery to attach events
  • the toolbar button always inserts the same name
  • no ACLs are checked for saving and loading these images
  • media should be referenced by the ml() function (also no need to use data URIs to display it)
  • media file paths should be created with the mediaFN() function
  • don't use inline JavaScript and CSS

I'm not sure I understand how the data is stored. I see references to something called xmlpng in the javascript code, but later the images are used as PNG images... So I guess this is a PNG with some XML data embedded? I would prefer to use SVG instead of PNG (if possible).

It would probably also be cool if one could use drawio images just like other images. Eg. by overriding the image syntax and have a convention that draw.io images end in .drawio.png - that way users could simply insert existing draw.io drawings from the media popup.
Read this if you don't get any useful answers.
Lies dies wenn du keine hilfreichen Antworten bekommst.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-11-12, 05:51:48 (UTC +01:00)