You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
6.7 KiB
215 lines
6.7 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Flowchart Maker & Online Diagram Software</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta name="Description"
|
|
content="draw.io is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams">
|
|
<meta name="Keywords" content="drawio, diagram, online, flow chart, flowchart maker, uml, erd">
|
|
<meta itemprop="name" content="draw.io - free flowchart maker and diagrams online">
|
|
<meta itemprop="description" content="draw.io is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship,
|
|
org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
|
|
circuit and social network diagrams.">
|
|
<meta itemprop="image"
|
|
content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="msapplication-config" content="images/browserconfig.xml">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="theme-color" content="#d89000">
|
|
<link rel="canonical" href="https://app.diagrams.net">
|
|
<link rel="manifest" href="images/manifest.json">
|
|
<link rel="icon" href="favicon.ico" sizes="any">
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
|
<link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
|
<link rel="stylesheet" media="(forced-colors: active)" href="styles/high-contrast.css" id="high-contrast-stylesheet">
|
|
<script src="js/bootstrap.js"></script>
|
|
<style type="text/css">
|
|
.geBlock {
|
|
z-index: -3;
|
|
margin: 100px;
|
|
margin-top: 40px;
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
min-width: 50%;
|
|
}
|
|
|
|
.geBlock h1,
|
|
.geBlock h2 {
|
|
margin-top: 0px;
|
|
padding-top: 0px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="geEditor geClassic">
|
|
<div id="geInfo">
|
|
<h2 id="geStatus">加载中... <img src="images/spin.gif" /></h2>
|
|
<!-- <div class="geBlock">
|
|
<h1>Flowchart Maker and Online Diagram Software</h1>
|
|
<p>
|
|
draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool,
|
|
to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy™ and Lucidchart™ files .
|
|
</p>
|
|
<h2 id="geStatus">Loading... <img src="images/spin.gif"/></h2>
|
|
<p>
|
|
Please ensure JavaScript is enabled.
|
|
</p>
|
|
</div> -->
|
|
</div>
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
|
|
const pattern = /(\w+)=([^\#&]*)/gi;
|
|
const parames = {};
|
|
location.href.replace(pattern, function (attr, key, value) {
|
|
parames[key] = decodeURI(value);
|
|
});
|
|
|
|
|
|
|
|
const u = new URL(location.href);
|
|
const host = u.hostname;
|
|
|
|
|
|
let apiHost = 'data.educoder.net';
|
|
|
|
if (host === 'test2.educoder.net') {
|
|
apiHost = 'test2-data.educoder.net';
|
|
} else if (host === 'test.educoder.net') {
|
|
apiHost = 'test-data.educoder.net';
|
|
}else if (host === 'pre.educoder.net') {
|
|
apiHost = 'pre-data.educoder.net';
|
|
}else if(host === 'localhost'){
|
|
apiHost = 'localhost:8000'
|
|
}
|
|
|
|
const apiPref = `${location.protocol}//${apiHost}`;
|
|
|
|
|
|
|
|
window.saveLocked = true
|
|
|
|
window.uploadImage = function (callback) {
|
|
let _url = `${apiPref}/api/attachments.json`;
|
|
if (sessionStorage.getItem('file_id') || parames.id) {
|
|
_url = `${apiPref}/api/attachments/${ parames.id || sessionStorage.getItem('file_id')}/update_file_data.json`;
|
|
}
|
|
|
|
if (saveLocked || window.editorUx.isDiagramEmpty()) {
|
|
callback && callback(null);
|
|
return;
|
|
};
|
|
|
|
var svgData = window.editorUx.exportSvgHtml()
|
|
var blob = new Blob([svgData.outerHTML], { type: 'svg+xml' });
|
|
console.log("blob::::", blob)
|
|
|
|
let formData = new FormData()
|
|
formData.append('file', blob)
|
|
formData.append('real_file_name', Date.now() + ".svg")
|
|
formData.append('file_data', window.editorUx.getFileData())
|
|
formData.append('byxhr', 'true')
|
|
var xhr = new window.XMLHttpRequest()
|
|
xhr.withCredentials = true
|
|
xhr.addEventListener(
|
|
'load',
|
|
function (response) {
|
|
const data = JSON.parse(response.target.response)
|
|
if (data.id)
|
|
sessionStorage.setItem('file_id', data.id)
|
|
callback && callback(parames.id || sessionStorage.getItem('file_id'))
|
|
},
|
|
false,
|
|
)
|
|
xhr.addEventListener(
|
|
'error',
|
|
function (error) {
|
|
console.error(error)
|
|
},
|
|
false,
|
|
)
|
|
xhr.open('POST', _url)
|
|
xhr.send(formData)
|
|
}
|
|
|
|
window.top.saveDrawData = function(cb){
|
|
if(window.editorUx.selectionState.cells.length > 0){
|
|
window.editorUx.selectPage()
|
|
}
|
|
uploadImage(cb)
|
|
}
|
|
|
|
</script>
|
|
|
|
<script>
|
|
let _url = `${apiPref}/api/attachments.json`;
|
|
if (parames.id) {
|
|
_url = `${apiPref}/api/attachments/${parames.id}/xml_data.json`;
|
|
}
|
|
|
|
window.getInitData = function() {
|
|
if(!parames.id) return;
|
|
var xhr = new window.XMLHttpRequest();
|
|
xhr.withCredentials = true;
|
|
|
|
xhr.addEventListener('load', function (event) {
|
|
try {
|
|
const data = JSON.parse(event.target.response);
|
|
console.log('XHR 响应数据:', data.file_data);
|
|
window.editorUx.setFileData(data.file_data)
|
|
} catch (e) {
|
|
console.error('JSON 解析失败:', e);
|
|
}
|
|
}, false);
|
|
|
|
xhr.addEventListener('error', function (error) {
|
|
console.error('XHR 请求失败:', error);
|
|
}, false);
|
|
|
|
xhr.open('GET', _url);
|
|
xhr.setRequestHeader('Accept', 'application/json'); // 可选
|
|
xhr.send(); // ←← 关键：必须发送请求
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
window.addEventListener('beforeunload', function (event) {
|
|
if (typeof editorUx !== 'undefined' && editorUx && typeof editorUx.destroy === 'function') {
|
|
editorUx.destroy();
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.geFilenameContainer,
|
|
.geButtonContainer,
|
|
.geAppIcon ,
|
|
.geStatusAlert,
|
|
.geStatusAlert{
|
|
display: none !important;
|
|
}
|
|
|
|
.geSimpleMainMenu,
|
|
.geEditor>.geMenubarContainer {
|
|
height: 30px;
|
|
}
|
|
|
|
.geMenubar {
|
|
top: 0 !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
#geStatus{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html> |