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);
|
|
}
|