octoleo/plantuml
1
0
Fork 0
mirror of https://github.com/octoleo/plantuml.git synced 2024-11-24 13:57:33 +00:00
Code Issues Releases Wiki Activity

Merge pull request #1720 from diguage/select-line

Browse Source 
Supports double-clicking to select all elements and links on a line. Fix #1719
This commit is contained in:
PlantUML 2024-03-24 23:39:08 +01:00 committed by GitHub
commit 7755ae5be4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 127 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
svg/default.js
View File

@ -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) => {