dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Draw.io prototype with unmodified draw.io code

This commit is contained in:
Wolfgang Ginolas 2023-02-10 10:25:21 +01:00
parent f29406315e
commit 8801418030
10 changed files with 317 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig Normal file
View File

@ -0,0 +1,12 @@
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
charset = utf-8

3
bower.json
View File

@ -48,7 +48,8 @@
"jszip": "3.7.1",
"requirejs-plugins": "^1.0.3",
"dragula.js": "3.7.2",
"MathJax": "3.0.5"
"MathJax": "3.0.5",
"drawio": "jgraph/drawio#v20.8.18"
},
"resolutions": {
"bootstrap": "^v4.0.0",

1
server.js
View File

@ -39,6 +39,7 @@ var EXEMPT = [
/^\/common\/onlyoffice\/.*\.html.*/,
/^\/(sheet|presentation|doc)\/inner\.html.*/,
/^\/unsafeiframe\/inner\.html.*$/,
/^\/bower_components\/drawio\/src\/main\/webapp\/index.html.*$/,
];
var cacheHeaders = function (Env, key, headers) {

2
www/common/application_config_internal.js
View File

@ -12,7 +12,7 @@ define(function() {
* You should never remove the drive from this list.
*/
AppConfig.availablePadTypes = ['drive', 'teams', 'sheet', 'doc', 'presentation', 'pad', 'kanban', 'code', 'form', 'poll', 'whiteboard',
'file', 'contacts', 'slide', 'convert'];
'file', 'contacts', 'slide', 'convert', 'drawio'];
/* The registered only types are apps restricted to registered users.
* You should never remove apps from this list unless you know what you're doing. The apps
* listed here by default can't work without a user account.

42
www/drawio/app.less Normal file
View File

@ -0,0 +1,42 @@
body.cp-app-generic {
@import (once) "../../customize.dist/src/less2/include/browser.less";
@import (once) "../../customize.dist/src/less2/include/framework.less";
.framework_main(
@bg-color: @colortheme_apps[code],
);
// body
&.cp-app-generic {
display: flex;
flex-flow: column;
max-height: 100%;
min-height: auto;
.cp-app-generic-container {
display: inline-flex;
flex-flow: column;
height: 100%;
min-height: 100%;
width: 100%;
resize: horizontal;
overflow: hidden;
}
.cp-app-generic-editor {
flex: 1;
display: flex;
flex-flow: row;
height: 100%;
overflow: hidden;
}
@media (max-width: @browser_media-medium-screen) {
.cp-app-code-container {
flex: 1;
max-width: 100%;
resize: none;
}
}
}
}

92
www/drawio/drawio.css Normal file
View File

@ -0,0 +1,92 @@
/* The diagram editor styles should be loaded after the skin and before our overwrites. */
/*
@import url("mxgraph-editor/3.7.2/styles/grapheditor.css");
*/
body {
background-color: #ebebeb;
}
.diagram-editor {
height: 110%;
min-height: 20px;
background-color: #ebebeb;
}
.diagram-editor .geFooterContainer {
display: none;
}
.diagram-editor input[type="checkbox"], .diagram-editor input[type="radio"],
.mxPopupMenu input[type="checkbox"], .mxPopupMenu input[type="radio"],
.mxWindow input[type="checkbox"], .mxWindow input[type="radio"],
.geDialog input[type="checkbox"], .geDialog input[type="radio"] {
vertical-align: text-bottom;
}
/**
* Overwrite XWiki skin styles
*/
.diagram-editor *,
.mxPopupMenu *,
.mxWindow *,
.geDialog,
.geDialog * {
box-sizing: content-box;
}
.mxPopupMenu,
.mxWindow,
.geDialog {
/* We need the same font size as on draw.io because the dialog height is hard-coded. */
font-size: 10pt;
}
.diagram-editor button, .diagram-editor select,
.mxPopupMenu button, .mxPopupMenu select,
.mxWindow button, .mxWindow select,
.geDialog button, .geDialog select {
box-sizing: border-box;
}
.diagram-editor input[type="text"],
.mxPopupMenu input[type="text"],
.mxWindow input[type="text"],
.geDialog input[type="text"] {
font-size: inherit;
height: auto;
padding: 1px;
}
.diagram-editor img,
.mxPopupMenu img,
.mxWindow img,
.geDialog img {
vertical-align: baseline;
}
.diagram-editor hr,
.mxPopupMenu hr,
.mxWindow hr,
.geDialog hr {
margin: 0;
}
.mxPopupMenu table,
.mxWindow table,
.geDialog table {
margin-bottom: 0;
width: auto;
}
.diagram-editor table > tbody > tr > td,
.mxPopupMenu table > tbody > tr > td,
.mxWindow table > tbody > tr > td,
.geDialog table > tbody > tr > td {
border-top: 0 none;
}
.geDialog table > tbody > tr > td {
padding: 0;
vertical-align: baseline;
}

1
www/drawio/empty.drawio Normal file
View File

@ -0,0 +1 @@
<mxfile host="app.diagrams.net" modified="2023-02-09T14:31:26.715Z" agent="5.0 (X11)" version="20.8.3" etag="vZrRUdoCIbYwi7awANB8" type="device"><diagram id="B2HR0nVHLojD-jhrMkZj" name="Seite-1">dZFNE4IgEIZ/DXeFvjyb1aWTh86MbMIMug7SaP36dICMsU4sz77vLrsQljfj2fBOXlGAJjQRI2FHQmmaZMl0zOTpyGGzdaA2SnjRAkr1guD09KEE9JHQImqruhhW2LZQ2YhxY3CIZXfUcdeO17ACZcX1mt6UsNJPQfcLv4CqZeic7jKXaXgQ+0l6yQUOX4gVhOUG0bqoGXPQ8/LCXpzv9Cf7eZiB1v4wTMFSe7pEP8SKNw==</diagram></mxfile>

38
www/drawio/index.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>CryptPad</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script src="/customize/pre-loading.js?ver=1.1"></script>
<link href="/customize/src/pre-loading.css?ver=1.0" rel="stylesheet" type="text/css">
<script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?
ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
<style>
html,
body {
margin: 0px;
padding: 0px;
}
#sbox-iframe {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<noscript></noscript>
<iframe-placeholder />

32
www/drawio/inner.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html class="cp-app-noscroll">
<head>
<meta content="text/html; charset=utf-8" http-equiv=
"content-type">
<script async data-bootload="/drawio/inner.js"
data-main="/common/sframe-boot.js?ver=1.6"
src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<style>
.loading-hidden {
display: none;
}
</style>
<title></title>
</head>
<body class="cp-app-generic cp-app-drawio">
<div id="cme_toolbox" class="cp-toolbar-container"></div>
<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">
<iframe id="cp-app-drawio-content"
src=""
border="0"
frameborder="0"
width="100%"
height="100%"
name="cp-app-drawio-content"></iframe>
</div>
</div>
</div>
</body>
</html>

96
www/drawio/inner.js Normal file
View File

@ -0,0 +1,96 @@
// This is the initialization loading the CryptPad libraries
define([
'/common/sframe-app-framework.js',
'/customize/messages.js', // translation keys
'text!/drawio/empty.drawio',
'less!/drawio/app.less',
'css!/drawio/drawio.css',
], function (
Framework,
Messages,
emptyDrawioXml) {
// This is the main initialization loop
var onFrameworkReady = function (framework) {
const drawioFrame = document.querySelector('#cp-app-drawio-content');
let lastContent = emptyDrawioXml;
const postMessageToDrawio = function(msg) {
console.log('XXX postMessageToDrawio', msg);
drawioFrame.contentWindow.postMessage(JSON.stringify(msg), '*');
};
const onDrawioInit = function(data) {
postMessageToDrawio({
action: 'load',
xml: lastContent,
autosave: 1
});
};
const onDrawioChange = function(newXml) {
if (lastContent != newXml) {
lastContent = newXml;
framework.localChange();
}
}
const onDrawioAutodave = function(data) {
onDrawioChange(data.xml);
}
const drawioHandlers = {
init: onDrawioInit,
autosave: onDrawioAutodave,
};
// This is the function from which you will receive updates from CryptPad
framework.onContentUpdate(function (newContent) {
console.log("Content should be updated to " + newContent);
lastContent = newContent.content;
postMessageToDrawio({
action: 'merge',
xml: newContent.content,
});
});
// This is the function called to get the current state of the data in your app
framework.setContentGetter(function () {
console.log("Content current value is " + lastContent);
return {
content: 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) {
// Here you can focus any editable part, check the integrity of the current data or intialize some values
});
// starting the CryptPad framework
framework.start();
drawioFrame.src = '/bower_components/drawio/src/main/webapp/index.html?pages=0&dev=1&stealth=1&embed=1&drafts=0&noSaveBtn=1&modified=unsavedChanges&proto=json';
window.addEventListener("message", (event) => {
if (event.source == drawioFrame.contentWindow) {
const data = JSON.parse(event.data);
console.log('XXX', data);
const eventType = data.event;
const handler = drawioHandlers[eventType];
if (handler) {
handler(data);
}
}
}, false);
};
// Framework initialization
Framework.create({
toolbarContainer: '#cme_toolbox',
contentContainer: '#cp-app-drawio-editor'
}, function (framework) {
onFrameworkReady(framework);
});
});