diff --git a/svg/default.js b/svg/default.js index 27da2a695..897980356 100644 --- a/svg/default.js +++ b/svg/default.js @@ -17,31 +17,33 @@ function main() { let links = Array.from(document.getElementsByClassName('link')); let elemsMap = {}; - let linkedElems = {}; - let linkedLinks = {}; + let linkedFromElems = {}; + let linkedToElems = {}; + let linkedFromLinks = {}; + let linkedToLinks = {}; elems.forEach(elem => { let name = elem.classList[1]; elemsMap[name] = elem; - linkedElems[name] = []; - linkedLinks[name] = []; + linkedFromElems[name] = []; + linkedToElems[name] = []; + linkedFromLinks[name] = []; + linkedToLinks[name] = []; }); links.forEach(link => { - let name1 = link.classList[1]; - let name2 = link.classList[2]; + let fromName = link.classList[1]; + let toName = link.classList[2]; - if (elemsMap[name1]) { - if (elemsMap[name2]) { - let elem1 = elemsMap[name1]; - let elem2 = elemsMap[name2]; + if (elemsMap[fromName] && elemsMap[toName]) { + let fromElem = elemsMap[fromName]; + let toElem = elemsMap[toName]; - addItemToMapOfLists(linkedElems, name1, elem2); - addItemToMapOfLists(linkedElems, name2, elem1); + addItemToMapOfLists(linkedFromElems, toName, fromElem); + addItemToMapOfLists(linkedToElems, fromName, toElem); - addItemToMapOfLists(linkedLinks, name1, link); - addItemToMapOfLists(linkedLinks, name2, link); - } + addItemToMapOfLists(linkedFromLinks, toName, link); + addItemToMapOfLists(linkedToLinks, fromName, link); } }); @@ -63,6 +65,7 @@ function main() { function selectAll() { selectedElemName = null; + clearSelected(); selectedElems = Array.from(elems); selectedElems.forEach(item => { @@ -78,7 +81,6 @@ function main() { function selectElem(elemName) { if (elemName === selectedElemName) { selectAll(); - } else { clearSelected(); selectedElemName = elemName; @@ -86,23 +88,129 @@ function main() { elemsMap[elemName].classList.add('selected'); selectedElems.push(elemsMap[elemName]); - linkedElems[elemName].forEach(linkedElem => { + linkedFromElems[elemName].forEach(linkedElem => { + // Avoid repetitive processing + if (selectedElems.includes(linkedElem)) { + return; + } + selectedElems.push(linkedElem); + linkedElem.classList.add('selected'); + }); + linkedToElems[elemName].forEach(linkedElem => { + // Avoid repetitive processing + if (selectedElems.includes(linkedElem)) { + return; + } selectedElems.push(linkedElem); linkedElem.classList.add('selected'); }); - linkedLinks[elemName].forEach(linkedLink => { + linkedFromLinks[elemName].forEach(linkedLink => { + // Avoid repetitive processing + if (selectedLinks.includes(linkedLink)) { + return; + } + selectedLinks.push(linkedLink); + linkedLink.classList.add('selected'); + }); + linkedToLinks[elemName].forEach(linkedLink => { + // Avoid repetitive processing + if (selectedLinks.includes(linkedLink)) { + return; + } selectedLinks.push(linkedLink); linkedLink.classList.add('selected'); }); } } + function selectElemOfLine(elemName) { + clearSelected(); + selectedElemName = elemName; + + elemsMap[elemName].classList.add('selected'); + selectedElems.push(elemsMap[elemName]); + + selectFromElem(elemName); + selectToElem(elemName); + } + + function selectFromElem(elemName) { + console.log(elemName, "linkedFromLinks", linkedFromLinks[elemName]) + linkedFromLinks[elemName].forEach(linkedLink => { + // Avoid repetitive processing + if (selectedLinks.includes(linkedLink)) { + return; + } + selectedLinks.push(linkedLink); + linkedLink.classList.add('selected'); + console.log(elemName, "from link", linkedLink); + }); + + console.log(elemName, "linkedFromElems", linkedFromElems[elemName]) + linkedFromElems[elemName].forEach(linkedElem => { + // break loop reference + if (selectedElems.includes(linkedElem)) { + return; + } + selectedElems.push(linkedElem); + linkedElem.classList.add('selected'); + console.log(elemName, "from elem", linkedElem); + + let nextName = linkedElem.classList[1]; + selectFromElem(nextName); + }); + } + + function selectToElem(elemName) { + console.log(elemName, "linkedToLinks", linkedToLinks[elemName]); + linkedToLinks[elemName].forEach(linkedLink => { + // Avoid repetitive processing + if (selectedLinks.includes(linkedLink)) { + return; + } + selectedLinks.push(linkedLink); + linkedLink.classList.add('selected'); + console.log(elemName, "to link", linkedLink); + }); + + console.log(elemName, "linkedToElems", linkedToElems[elemName]) + linkedToElems[elemName].forEach(linkedElem => { + // break loop reference + if (selectedElems.includes(linkedElem)) { + return; + } + selectedElems.push(linkedElem); + linkedElem.classList.add('selected'); + console.log(elemName, "to elem", linkedElem); + + let nextName = linkedElem.classList[1]; + selectToElem(nextName); + }); + } + Object.keys(elemsMap).forEach(name => { - elemsMap[name].onclick = () => { selectElem(name); }; + elemsMap[name].onclick = (event) => { + console.log("onclick: ", event); + selectElem(name); + }; + // double click, and then selectElemOfLine + elemsMap[name].ondblclick = (event) => { + console.log("ondblclick", event); + selectElemOfLine(name); + }; }); selectAll(); + + document.querySelector('svg').addEventListener('keydown', event => { + console.log('svg keydown: ', event.key); + // Press Escape, and then selectAll + // https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ + if (event.code === "Escape") { + selectAll(); + } + }); } document.addEventListener('DOMContentLoaded', (event) => {