|
|
<!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>
|
|
|
|
|
|
let tasksCode = sessionStorage.getItem('taskCode');
|
|
|
let tasksData = sessionStorage.getItem('tasksData');
|
|
|
try {
|
|
|
tasksData = JSON.parse(tasksData);
|
|
|
} catch (error) {
|
|
|
|
|
|
}
|
|
|
try {
|
|
|
if (tasksCode) {
|
|
|
tasksCode = JSON.parse(tasksCode);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
|
|
|
}
|
|
|
|
|
|
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) {
|
|
|
|
|
|
// ___xa___
|
|
|
// /api/myshixuns/identifier}/update_file.json
|
|
|
|
|
|
if (saveLocked || window.editorUx.isDiagramEmpty()) {
|
|
|
callback && callback(null);
|
|
|
return;
|
|
|
};
|
|
|
|
|
|
fetch('/api/putData', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json'
|
|
|
},
|
|
|
body: JSON.stringify({
|
|
|
content: window.editorUx.getFileData(),
|
|
|
level:parames.level
|
|
|
})
|
|
|
})
|
|
|
.then(res => res.json())
|
|
|
.then(data => {
|
|
|
console.log('更新结果:', data);
|
|
|
})
|
|
|
.catch(err => {
|
|
|
console.error('请求出错:', err);
|
|
|
});
|
|
|
|
|
|
|
|
|
// {
|
|
|
// "path": "src/step2/lookout.py",
|
|
|
// "evaluate": 1,
|
|
|
// "content": "#coding=utf-8\n\n#请在此处补充代码，按要求完成输出\n###### Begin ######\nname=input(\"1请输入一个人的名字：\")\n\n\n###### End ######\n\n",
|
|
|
// "game_id": 80252699,
|
|
|
// "tab_type": 1,
|
|
|
// "exercise_id": null
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
window.top.saveDrawData = function (cb) {
|
|
|
if (window.editorUx.selectionState.cells.length > 0) {
|
|
|
window.editorUx.selectPage()
|
|
|
}
|
|
|
uploadImage(cb)
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
let emptyData = `<mxfile>
|
|
|
<diagram name="Page-1">
|
|
|
<mxGraphModel>
|
|
|
<root>
|
|
|
<mxCell id="0"/>
|
|
|
<mxCell id="1" parent="0"/>
|
|
|
</root>
|
|
|
</mxGraphModel>
|
|
|
</diagram>
|
|
|
</mxfile>
|
|
|
`
|
|
|
window.getInitData = function () {
|
|
|
// window.editorUx.setFileData(tasksCode.content || '');
|
|
|
var xhr = new window.XMLHttpRequest();
|
|
|
xhr.withCredentials = true;
|
|
|
|
|
|
xhr.addEventListener('load', function (event) {
|
|
|
try {
|
|
|
const data = JSON.parse(event.target.response);
|
|
|
setTimeout(() => {
|
|
|
window.editorUx.setFileData(data.content || emptyData);
|
|
|
},400)
|
|
|
} catch (e) {
|
|
|
console.error('JSON 解析失败:', e);
|
|
|
}
|
|
|
}, false);
|
|
|
|
|
|
xhr.addEventListener('error', function (error) {
|
|
|
console.error('XHR 请求失败:', error);
|
|
|
}, false);
|
|
|
|
|
|
xhr.open('GET', "/api/getData?level=" + parames.level, true);
|
|
|
xhr.setRequestHeader('Content-Type', 'application/json'); // 可选");
|
|
|
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> |
