478ef3bce7
Since the front-end received much more code (features) than first expected, the files became much too large. For this reason, the JS and CSS code has now been split by component and thus into several small files. However, since there are now many small files, a JS and CSS bundle tool had to come :D.
98 lines
3.0 KiB
JavaScript
98 lines
3.0 KiB
JavaScript
/********************
|
|
* Diagram Export JS *
|
|
*********************/
|
|
|
|
function initDiagramExport() {
|
|
const filenameInput = document.getElementById("download-name");
|
|
const fileTypeSelect = document.getElementById("download-type");
|
|
|
|
function openDiagramExportDialog() {
|
|
setVisibility(document.getElementById("diagram-export"), true, true);
|
|
const code = document.editor.getValue();
|
|
const name = Array.from(
|
|
code.matchAll(/^\s*@start[a-zA-Z]*\s+([a-zA-Z-_äöüÄÖÜß ]+)\s*$/gm),
|
|
m => m[1]
|
|
)[0] || "diagram";
|
|
filenameInput.value = name + ".puml";
|
|
fileTypeSelect.value = "code";
|
|
filenameInput.focus();
|
|
}
|
|
function splitFilename(filename) {
|
|
const idx = filename.lastIndexOf(".");
|
|
if (idx < 1) {
|
|
return { name: filename, ext: null };
|
|
}
|
|
if (idx === filename.length - 1) {
|
|
return { name: filename.slice(0, -1), ext: null };
|
|
}
|
|
return {
|
|
name: filename.substring(0, idx),
|
|
ext: filename.substring(idx + 1),
|
|
};
|
|
}
|
|
function getExtensionByType(type) {
|
|
switch (type) {
|
|
case "epstext": return "eps";
|
|
case "code": return "puml";
|
|
default: return type;
|
|
}
|
|
}
|
|
function getTypeByExtension(ext) {
|
|
if (!ext) return ext;
|
|
ext = ext.toLowerCase();
|
|
switch (ext) {
|
|
case "puml":
|
|
case "plantuml":
|
|
case "code":
|
|
return "code";
|
|
case "ascii": return "txt"
|
|
default: return ext;
|
|
}
|
|
}
|
|
function onTypeChanged(event) {
|
|
const type = event.target.value;
|
|
const ext = getExtensionByType(type);
|
|
const { name } = splitFilename(filenameInput.value);
|
|
filenameInput.value = name + "." + ext;
|
|
}
|
|
function onFilenameChanged(event) {
|
|
const { ext } = splitFilename(event.target.value);
|
|
const type = getTypeByExtension(ext);
|
|
if (!type) return;
|
|
fileTypeSelect.value = type;
|
|
}
|
|
function downloadFile() {
|
|
const filename = filenameInput.value;
|
|
const type = fileTypeSelect.value;
|
|
const link = document.createElement("a");
|
|
link.download = filename;
|
|
if (type === "code") {
|
|
const code = document.editor.getValue();
|
|
link.href = "data:," + encodeURIComponent(code);
|
|
} else {
|
|
if (document.appData.index !== undefined) {
|
|
link.href = type + "/" + document.appData.index + "/" + document.appData.encodedDiagram;
|
|
} else {
|
|
link.href = type + "/" + document.appData.encodedDiagram;
|
|
}
|
|
}
|
|
link.click();
|
|
}
|
|
|
|
// register modal
|
|
registerModalListener("diagram-export", openDiagramExportDialog);
|
|
// add listener
|
|
filenameInput.addEventListener("change", onFilenameChanged);
|
|
fileTypeSelect.addEventListener("change", onTypeChanged);
|
|
document.getElementById("diagram-export-ok-btn").addEventListener("click", downloadFile);
|
|
// add Ctrl+S or Meta+S (Mac) key shortcut to open export dialog
|
|
window.addEventListener("keydown", event => {
|
|
if (event.key === "s" && (isMac ? event.metaKey : event.ctrlKey)) {
|
|
event.preventDefault();
|
|
if (!isModalOpen("diagram-export")) {
|
|
openDiagramExportDialog();
|
|
}
|
|
}
|
|
}, false);
|
|
}
|