78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
/*********************
|
|
* Preview Diagram JS *
|
|
**********************/
|
|
|
|
async function initializeDiagram() {
|
|
if (document.appConfig.diagramPreviewType !== "png") {
|
|
// NOTE: "png" is preloaded from the server
|
|
return setDiagram(
|
|
document.appConfig.diagramPreviewType,
|
|
document.appData.encodedDiagram,
|
|
document.appData.index
|
|
);
|
|
}
|
|
}
|
|
|
|
async function setDiagram(type, encodedDiagram, index) {
|
|
const container = document.getElementById("diagram");
|
|
const png = document.getElementById("diagram-png");
|
|
const txt = document.getElementById("diagram-txt");
|
|
const pdf = document.getElementById("diagram-pdf");
|
|
// NOTE: the map and svg elements will be overwitten, hence can not be cached
|
|
|
|
async function requestDiagram(type, encodedDiagram, index) {
|
|
return makeRequest("GET", buildUrl(type, encodedDiagram, index));
|
|
}
|
|
function setDiagramMap(mapString) {
|
|
const mapEl = document.getElementById("plantuml_map");
|
|
const mapBtn = document.getElementById("map-diagram-link");
|
|
if (mapString) {
|
|
const div = document.createElement("div");
|
|
div.innerHTML = mapString;
|
|
mapEl.parentNode.replaceChild(div.firstChild, mapEl);
|
|
setVisibility(mapBtn, true);
|
|
} else {
|
|
removeChildren(mapEl);
|
|
setVisibility(mapBtn, false);
|
|
}
|
|
}
|
|
function setSvgDiagram(svgString) {
|
|
const svgEl = document.getElementById("diagram-svg");
|
|
const div = document.createElement("div");
|
|
div.innerHTML = svgString;
|
|
const newSvg = div.querySelector("svg");
|
|
newSvg.id = "diagram-svg";
|
|
newSvg.classList = svgEl.classList;
|
|
newSvg.style.cssText = svgEl.style.cssText;
|
|
svgEl.parentNode.replaceChild(newSvg, svgEl);
|
|
}
|
|
function setDiagramVisibility(type) {
|
|
const map = document.getElementById("plantuml_map");
|
|
const svg = document.getElementById("diagram-svg");
|
|
container.setAttribute("data-diagram-type", type);
|
|
setVisibility(png, type === "png");
|
|
setVisibility(map, type === "png");
|
|
setVisibility(svg, type === "svg");
|
|
setVisibility(txt, type === "txt");
|
|
setVisibility(pdf, type === "pdf");
|
|
}
|
|
// update diagram
|
|
if (type === "png") {
|
|
png.src = buildUrl("png", encodedDiagram, index);
|
|
const map = await requestDiagram("map", encodedDiagram, index);
|
|
setDiagramMap(map);
|
|
} else if (type === "svg") {
|
|
const svg = await requestDiagram("svg", encodedDiagram, index);
|
|
setSvgDiagram(svg);
|
|
} else if (type === "txt") {
|
|
txt.innerHTML = await requestDiagram("txt", encodedDiagram, index);
|
|
} else if (type === "pdf") {
|
|
pdf.data = buildUrl("pdf", encodedDiagram, index);
|
|
} else {
|
|
const message = "unknown diagram type: " + type;
|
|
(console.error || console.log)(message);
|
|
return Promise.reject(message);
|
|
}
|
|
setDiagramVisibility(type);
|
|
}
|