1
0
mirror of https://github.com/octoleo/plantuml.git synced 2024-11-22 13:05:09 +00:00

Add check for elem existance to interactive SVG; reindent JS-code

This commit is contained in:
Kir Ax 2021-03-02 21:25:00 +07:00
parent f3e7e97fe8
commit 0cb778b063

View File

@ -184,111 +184,115 @@ public class SvgGraphics {
final Element script = document.createElement("script"); final Element script = document.createElement("script");
script.setTextContent( script.setTextContent(
"function addItemToMapOfLists(mapOfLists, name, item) {" + "\n" + "function addItemToMapOfLists(mapOfLists, name, item) {" + "\n" +
" // mapOfLists = {" + "\n" + " // mapOfLists = {" + "\n" +
" // 'key1': [item1, item2, ...]," + "\n" + " // 'key1': [item1, item2, ...]," + "\n" +
" // 'key2': [item3, item4, ...]," + "\n" + " // 'key2': [item3, item4, ...]," + "\n" +
" // }" + "\n" + " // }" + "\n" +
" if (mapOfLists[name].length > 0) {" + "\n" + " if (mapOfLists[name].length > 0) {" + "\n" +
" if (!mapOfLists[name].includes(item)) {" + "\n" + " if (!mapOfLists[name].includes(item)) {" + "\n" +
" mapOfLists[name].push(item);" + "\n" + " mapOfLists[name].push(item);" + "\n" +
" }" + "\n" + " }" + "\n" +
" } else {" + "\n" + " } else {" + "\n" +
" mapOfLists[name] = [item];" + "\n" + " mapOfLists[name] = [item];" + "\n" +
" }" + "\n" + " }" + "\n" +
"}" + "\n" + "}" + "\n" +
"" + "\n" + "" + "\n" +
"function main() {" + "\n" + "function main() {" + "\n" +
" let elems = Array.from(document.getElementsByClassName('elem'));" + "\n" + " let elems = Array.from(document.getElementsByClassName('elem'));" + "\n" +
" let links = Array.from(document.getElementsByClassName('link'));" + "\n" + " let links = Array.from(document.getElementsByClassName('link'));" + "\n" +
"" + "\n" + "" + "\n" +
" let elemsMap = {};" + "\n" + " let elemsMap = {};" + "\n" +
" let linkedElems = {};" + "\n" + " let linkedElems = {};" + "\n" +
" let linkedLinks = {};" + "\n" + " let linkedLinks = {};" + "\n" +
"" + "\n" + "" + "\n" +
" elems.forEach(elem => {" + "\n" + " elems.forEach(elem => {" + "\n" +
" let name = elem.classList[1];" + "\n" + " let name = elem.classList[1];" + "\n" +
" elemsMap[name] = elem;" + "\n" + " elemsMap[name] = elem;" + "\n" +
" linkedElems[name] = [];" + "\n" + " linkedElems[name] = [];" + "\n" +
" linkedLinks[name] = [];" + "\n" + " linkedLinks[name] = [];" + "\n" +
" });" + "\n" + " });" + "\n" +
"" + "\n" + "" + "\n" +
" links.forEach(link => {" + "\n" + " links.forEach(link => {" + "\n" +
" let name1 = link.classList[1];" + "\n" + " let name1 = link.classList[1];" + "\n" +
" let name2 = link.classList[2];" + "\n" + " let name2 = link.classList[2];" + "\n" +
"" + "\n" + "" + "\n" +
" let elem1 = elemsMap[name1];" + "\n" + " if (elemsMap[name1]) {" + "\n" +
" let elem2 = elemsMap[name2];" + "\n" + " if (elemsMap[name2]) {" + "\n" +
" let elem1 = elemsMap[name1];" + "\n" +
" let elem2 = elemsMap[name2];" + "\n" +
"" + "\n" + "" + "\n" +
" addItemToMapOfLists(linkedElems, name1, elem2);" + "\n" + " addItemToMapOfLists(linkedElems, name1, elem2);" + "\n" +
" addItemToMapOfLists(linkedElems, name2, elem1);" + "\n" + " addItemToMapOfLists(linkedElems, name2, elem1);" + "\n" +
"" + "\n" + "" + "\n" +
" addItemToMapOfLists(linkedLinks, name1, link);" + "\n" + " addItemToMapOfLists(linkedLinks, name1, link);" + "\n" +
" addItemToMapOfLists(linkedLinks, name2, link);" + "\n" + " addItemToMapOfLists(linkedLinks, name2, link);" + "\n" +
" });" + "\n" + " }" + "\n" +
" }" + "\n" +
" });" + "\n" +
"" + "\n" + "" + "\n" +
" let selectedElems = [];" + "\n" + " let selectedElems = [];" + "\n" +
" let selectedLinks = [];" + "\n" + " let selectedLinks = [];" + "\n" +
" let selectedElemName = null;" + "\n" + " let selectedElemName = null;" + "\n" +
"" + "\n" + "" + "\n" +
" function clearSelected() {" + "\n" + " function clearSelected() {" + "\n" +
" selectedElems.forEach(item => {" + "\n" + " selectedElems.forEach(item => {" + "\n" +
" item.classList.remove('selected');" + "\n" + " item.classList.remove('selected');" + "\n" +
" });" + "\n" + " });" + "\n" +
" selectedElems = [];" + "\n" + " selectedElems = [];" + "\n" +
"" + "\n" + "" + "\n" +
" selectedLinks.forEach(item => {" + "\n" + " selectedLinks.forEach(item => {" + "\n" +
" item.classList.remove('selected');" + "\n" + " item.classList.remove('selected');" + "\n" +
" });" + "\n" + " });" + "\n" +
" selectedLinks = [];" + "\n" + " selectedLinks = [];" + "\n" +
" }" + "\n" + " }" + "\n" +
"" + "\n" + "" + "\n" +
" function selectAll() {" + "\n" + " function selectAll() {" + "\n" +
" selectedElemName = null;" + "\n" + " selectedElemName = null;" + "\n" +
"" + "\n" + "" + "\n" +
" selectedElems = Array.from(elems);" + "\n" + " selectedElems = Array.from(elems);" + "\n" +
" selectedElems.forEach(item => {" + "\n" + " selectedElems.forEach(item => {" + "\n" +
" item.classList.add('selected');" + "\n" + " item.classList.add('selected');" + "\n" +
" });" + "\n" + " });" + "\n" +
"" + "\n" + "" + "\n" +
" selectedLinks = Array.from(links);" + "\n" + " selectedLinks = Array.from(links);" + "\n" +
" selectedLinks.forEach(item => {" + "\n" + " selectedLinks.forEach(item => {" + "\n" +
" item.classList.add('selected');" + "\n" + " item.classList.add('selected');" + "\n" +
" });" + "\n" + " });" + "\n" +
" }" + "\n" + " }" + "\n" +
"" + "\n" + "" + "\n" +
" function selectElem(elemName) {" + "\n" + " function selectElem(elemName) {" + "\n" +
" if (elemName === selectedElemName) {" + "\n" + " if (elemName === selectedElemName) {" + "\n" +
" selectAll();" + "\n" + " selectAll();" + "\n" +
"" + "\n" + "" + "\n" +
" } else {" + "\n" + " } else {" + "\n" +
" clearSelected();" + "\n" + " clearSelected();" + "\n" +
" selectedElemName = elemName;" + "\n" + " selectedElemName = elemName;" + "\n" +
"" + "\n" + "" + "\n" +
" elemsMap[elemName].classList.add('selected');" + "\n" + " elemsMap[elemName].classList.add('selected');" + "\n" +
" selectedElems.push(elemsMap[elemName]);" + "\n" + " selectedElems.push(elemsMap[elemName]);" + "\n" +
"" + "\n" + "" + "\n" +
" linkedElems[elemName].forEach(linkedElem => {" + "\n" + " linkedElems[elemName].forEach(linkedElem => {" + "\n" +
" selectedElems.push(linkedElem);" + "\n" + " selectedElems.push(linkedElem);" + "\n" +
" linkedElem.classList.add('selected');" + "\n" + " linkedElem.classList.add('selected');" + "\n" +
" });" + "\n" + " });" + "\n" +
"" + "\n" + "" + "\n" +
" linkedLinks[elemName].forEach(linkedLink => {" + "\n" + " linkedLinks[elemName].forEach(linkedLink => {" + "\n" +
" selectedLinks.push(linkedLink);" + "\n" + " selectedLinks.push(linkedLink);" + "\n" +
" linkedLink.classList.add('selected');" + "\n" + " linkedLink.classList.add('selected');" + "\n" +
" });" + "\n" + " });" + "\n" +
" }" + "\n" + " }" + "\n" +
" }" + "\n" + " }" + "\n" +
"" + "\n" + "" + "\n" +
" Object.keys(elemsMap).forEach(name => {" + "\n" + " Object.keys(elemsMap).forEach(name => {" + "\n" +
" elemsMap[name].onclick = () => { selectElem(name); };" + "\n" + " elemsMap[name].onclick = () => { selectElem(name); };" + "\n" +
" });" + "\n" + " });" + "\n" +
"" + "\n" + "" + "\n" +
" selectAll();" + "\n" + " selectAll();" + "\n" +
"}" + "\n" + "}" + "\n" +
"" + "\n" + "" + "\n" +
"document.addEventListener('DOMContentLoaded', (event) => {" + "\n" + "document.addEventListener('DOMContentLoaded', (event) => {" + "\n" +
" main();" + "\n" + " main();" + "\n" +
"});" "});"
); );
return script; return script;
} }