Add overlay when draw.io is not editable
This commit is contained in:
Wolfgang Ginolas
parent
c2f0a27d9e
commit
17bef487f2
3 changed files with 79 additions and 60 deletions
|
|
@ -97,7 +97,7 @@ var setHeaders = function (req, res) {
|
|||
} else if (/^\/api\/(broadcast|config)/.test(req.url)) {
|
||||
type = 'api';
|
||||
} else if (/^\/bower_components\/drawio\/src\/main\/webapp\/index.html.*$/.test(req.url)) {
|
||||
type = 'drawio'
|
||||
type = 'drawio';
|
||||
} else {
|
||||
type = 'standard';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,23 @@
|
|||
.loading-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#overlay.show {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<title></title>
|
||||
</head>
|
||||
|
|
@ -18,6 +35,7 @@
|
|||
<div id="cp-app-drawio-editor" class="cp-app-generic-editor">
|
||||
<div id="cp-app-drawio-container" class="cp-app-generic-container">
|
||||
<div class="diagram-editor loading">
|
||||
<div id="overlay"></div>
|
||||
<iframe id="cp-app-drawio-content"
|
||||
src=""
|
||||
border="0"
|
||||
|
|
|
|||
|
|
@ -14,6 +14,45 @@ define([
|
|||
base64,
|
||||
X2JS) {
|
||||
|
||||
// As described here: https://drawio-app.com/extracting-the-xml-from-mxfiles/
|
||||
const decompressDrawioXml = function(xmlDocStr) {
|
||||
var TEXT_NODE = 3;
|
||||
|
||||
var parser = new DOMParser();
|
||||
var doc = parser.parseFromString(xmlDocStr, "application/xml");
|
||||
|
||||
var errorNode = doc.querySelector("parsererror");
|
||||
if (errorNode) {
|
||||
console.error("error while parsing", errorNode);
|
||||
return xmlDocStr;
|
||||
}
|
||||
|
||||
doc.firstChild.removeAttribute('modified');
|
||||
doc.firstChild.removeAttribute('agent');
|
||||
doc.firstChild.removeAttribute('etag');
|
||||
|
||||
var diagrams = doc.querySelectorAll('diagram');
|
||||
|
||||
diagrams.forEach(function(diagram) {
|
||||
if (diagram.firstChild && diagram.firstChild.nodeType === TEXT_NODE) {
|
||||
const innerText = diagram.firstChild.nodeValue;
|
||||
const bin = base64.toUint8Array(innerText);
|
||||
const xmlUrlStr = pako.inflateRaw(bin, {to: 'string'});
|
||||
const xmlStr = decodeURIComponent(xmlUrlStr);
|
||||
const diagramDoc = parser.parseFromString(xmlStr, "application/xml");
|
||||
diagram.replaceChild(diagramDoc.firstChild, diagram.firstChild);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var result = new XMLSerializer().serializeToString(doc);
|
||||
return result;
|
||||
};
|
||||
|
||||
const deepEqual = function(o1, o2) {
|
||||
return JSON.stringify(o1) === JSON.stringify(o2);
|
||||
};
|
||||
|
||||
// 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>";
|
||||
|
|
@ -24,6 +63,7 @@ define([
|
|||
|
||||
var postMessageToDrawio = function(msg) {
|
||||
if (!drawIoInitalized) {
|
||||
console.log('draw.io postMessageToDrawio blocked', msg);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +72,8 @@ define([
|
|||
};
|
||||
|
||||
const jsonContentAsXML = (content) => x2js.json2xml_str(content);
|
||||
var onDrawioInit = function(data) {
|
||||
|
||||
var onDrawioInit = function() {
|
||||
drawIoInitalized = true;
|
||||
var xmlStr = jsonContentAsXML(lastContent);
|
||||
postMessageToDrawio({
|
||||
|
|
@ -53,28 +94,18 @@ define([
|
|||
lastContent = newJson;
|
||||
framework.localChange();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var onDrawioAutodave = function(data) {
|
||||
var onDrawioAutosave = function(data) {
|
||||
onDrawioChange(data.xml);
|
||||
|
||||
// Tell draw.io to hide "Unsaved changes" message
|
||||
postMessageToDrawio({action: 'status', message: '', modified: false});
|
||||
}
|
||||
|
||||
var onDrawioMerge = function(data) {
|
||||
|
||||
}
|
||||
|
||||
var onDrawioExport = function(data) {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
var drawioHandlers = {
|
||||
init: onDrawioInit,
|
||||
autosave: onDrawioAutodave,
|
||||
merge: onDrawioMerge,
|
||||
export: onDrawioExport,
|
||||
autosave: onDrawioAutosave,
|
||||
};
|
||||
|
||||
// This is the function from which you will receive updates from CryptPad
|
||||
|
|
@ -94,10 +125,6 @@ define([
|
|||
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.
|
||||
framework.onReady(function (newPad) {
|
||||
});
|
||||
|
||||
framework.setFileImporter(
|
||||
{accept: ['.drawio', 'application/x-drawio']},
|
||||
(content) => {
|
||||
|
|
@ -112,6 +139,19 @@ define([
|
|||
}
|
||||
);
|
||||
|
||||
framework.onEditableChange(function () {
|
||||
const editable = !framework.isLocked() && !framework.isReadOnly();
|
||||
postMessageToDrawio({
|
||||
action: 'spinner',
|
||||
message: Messages.reconnecting,
|
||||
show: !editable
|
||||
});
|
||||
|
||||
document.getElementById('overlay').className = editable
|
||||
? ""
|
||||
: "show";
|
||||
});
|
||||
|
||||
// starting the CryptPad framework
|
||||
framework.start();
|
||||
|
||||
|
|
@ -137,7 +177,7 @@ define([
|
|||
});
|
||||
|
||||
window.addEventListener("message", (event) => {
|
||||
if (event.source == drawioFrame.contentWindow) {
|
||||
if (event.source === drawioFrame.contentWindow) {
|
||||
var data = JSON.parse(event.data);
|
||||
console.log('draw.io got message', data);
|
||||
var eventType = data.event;
|
||||
|
|
@ -149,45 +189,6 @@ define([
|
|||
}, false);
|
||||
};
|
||||
|
||||
// As described here: https://drawio-app.com/extracting-the-xml-from-mxfiles/
|
||||
var decompressDrawioXml = function(xmlDocStr) {
|
||||
var TEXT_NODE = 3;
|
||||
|
||||
var parser = new DOMParser();
|
||||
var doc = parser.parseFromString(xmlDocStr, "application/xml");
|
||||
|
||||
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) {
|
||||
if (diagram.firstChild && diagram.firstChild.nodeType == TEXT_NODE) {
|
||||
var innerText = diagram.firstChild.nodeValue;
|
||||
var bin = base64.toUint8Array(innerText);
|
||||
var xmlUrlStr = pako.inflateRaw(bin, {to: 'string'});
|
||||
var xmlStr = decodeURIComponent(xmlUrlStr);
|
||||
var diagramDoc = parser.parseFromString(xmlStr, "application/xml");
|
||||
diagram.replaceChild(diagramDoc.firstChild, diagram.firstChild);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var result = new XMLSerializer().serializeToString(doc);
|
||||
return result;
|
||||
}
|
||||
|
||||
var deepEqual = function(o1, o2) {
|
||||
return JSON.stringify(o1) == JSON.stringify(o2);
|
||||
}
|
||||
|
||||
// Framework initialization
|
||||
Framework.create({
|
||||
toolbarContainer: '#cme_toolbox',
|
||||
|
|
|
|||
Loading…
Reference in a new issue