Store draw.io as JSON in chainpad (instead XML)

This commit is contained in:
Wolfgang Ginolas 2023-02-15 12:43:28 +01:00
parent f870604f78
commit 7d42febef3
2 changed files with 52 additions and 19 deletions

View File

@ -51,7 +51,8 @@
"MathJax": "3.0.5",
"drawio": "jgraph/drawio#v20.8.18",
"js-base64": "^3.7.5",
"pako": "^2.1.0"
"pako": "^2.1.0",
"abdmob/x2js": "x2js#^1.2.0"
},
"resolutions": {
"bootstrap": "^v4.0.0",

View File

@ -4,18 +4,22 @@ define([
'/customize/messages.js', // translation keys
'/bower_components/pako/dist/pako.min.js',
'/bower_components/js-base64/base64.js',
'/bower_components/abdmob/x2js/xml2json.min.js',
'less!/drawio/app.less',
'css!/drawio/drawio.css',
], function (
Framework,
Messages,
pako,
base64) {
base64,
X2JS) {
// This is the main initialization loop
var onFrameworkReady = function (framework) {
var EMPTY_DRAWIO = "<mxfile type=\"embed\"><diagram id=\"bWoO5ACGZIaXrIiKNTKd\" name=\"Page-1\"><mxGraphModel dx=\"1259\" dy=\"718\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" connect=\"1\" arrows=\"1\" fold=\"1\" page=\"1\" pageScale=\"1\" pageWidth=\"827\" pageHeight=\"1169\" math=\"0\" shadow=\"0\"><root><mxCell id=\"0\"/><mxCell id=\"1\" parent=\"0\"/></root></mxGraphModel></diagram></mxfile>";
var drawioFrame = document.querySelector('#cp-app-drawio-content');
var lastContent = '';
var x2js = new X2JS();
var lastContent = x2js.xml_str2json(EMPTY_DRAWIO);
var drawIoInitalized = false;
var postMessageToDrawio = function(msg) {
@ -29,18 +33,19 @@ define([
var onDrawioInit = function(data) {
drawIoInitalized = true;
var xmlStr = x2js.json2xml_str(lastContent);
postMessageToDrawio({
action: 'load',
xml: lastContent,
xml: xmlStr,
autosave: 1
});
};
var onDrawioChange = function(newXml) {
newXml = decompressDrawioXml(newXml);
if (lastContent != newXml) {
lastContent = newXml;
var newXml = decompressDrawioXml(newXml);
var newJson = x2js.xml_str2json(newXml);
if (!deepEqual(lastContent, newJson)) {
lastContent = newJson;
framework.localChange();
}
}
@ -49,25 +54,34 @@ define([
onDrawioChange(data.xml);
}
var onDrawioMerge = function(data) {
}
var onDrawioExport = function(data) {
}
var drawioHandlers = {
init: onDrawioInit,
autosave: onDrawioAutodave,
merge: onDrawioMerge,
export: onDrawioExport,
};
// This is the function from which you will receive updates from CryptPad
framework.onContentUpdate(function (newContent) {
lastContent = newContent.content;
lastContent = newContent;
var xmlStr = x2js.json2xml_str(newContent);
postMessageToDrawio({
action: 'merge',
xml: newContent.content,
xml: xmlStr,
});
});
// This is the function called to get the current state of the data in your app
framework.setContentGetter(function () {
return {
content: lastContent
};
return lastContent;
});
// This is called when the history is synced. "onContentUpdate" has already been called with the full content and the loading screen is being removed.
@ -116,16 +130,16 @@ define([
var parser = new DOMParser();
var doc = parser.parseFromString(xmlDocStr, "application/xml");
doc.firstChild.removeAttribute('modified');
doc.firstChild.removeAttribute('agent');
doc.firstChild.removeAttribute('etag');
var errorNode = doc.querySelector("parsererror");
if (errorNode) {
console.error("error while parsing", errorNode);
return xmlStr;
}
doc.firstChild.removeAttribute('modified');
doc.firstChild.removeAttribute('agent');
doc.firstChild.removeAttribute('etag');
var diagrams = doc.querySelectorAll('diagram');
diagrams.forEach(function(diagram) {
@ -140,13 +154,31 @@ define([
});
return new XMLSerializer().serializeToString(doc);
var result = new XMLSerializer().serializeToString(doc);
return result;
}
var validateXml = function(xmlStr) {
var doc = parser.parseFromString(xmlStr, "application/xml");
var errorNode = doc.querySelector("parsererror");
if (errorNode) {
console.error("error while parsing, rejecting patch", errorNode);
return false;
}
return true;
};
var deepEqual = function(o1, o2) {
return JSON.stringify(o1) == JSON.stringify(o2);
}
// Framework initialization
Framework.create({
toolbarContainer: '#cme_toolbox',
contentContainer: '#cp-app-drawio-editor'
contentContainer: '#cp-app-drawio-editor',
// validateContent: validateXml,
}, function (framework) {
onFrameworkReady(framework);
});