lmu/uni2work.workflows.visualiser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update index when adding/deleting nodes/states

Browse Source
This commit is contained in:
David Mosbach 2023-06-04 01:47:23 +02:00
parent 209d9a2763
commit 4524661fee
3 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
editor.css
View File

@ -116,10 +116,14 @@ body {
/* background-color: rgb(120, 120, 120); */
}
#search-container .search-button svg {
#search-container .search-button .search-icon-lightmode {
stroke: rgb(117, 117, 117);
}
#search-container .search-button .search-icon-darkmode {
stroke: rgb(138, 138, 138);
}
#search-results {
width: 400px;
overflow: hidden;
@ -133,6 +137,7 @@ body {
#search-result-list {
overflow-y: auto;
overflow-x: hidden;
padding: 15px;
}
#search-result-list div {

4
editor.html
View File

@ -129,9 +129,9 @@
<div id="search-container">
<input id="search-input" type="text" placeholder="Search" onclick="showSearchResults()" oninput="search(this.value)">
<span class="search-button">
<svg height="18" width="18" xmlns="http://www.w3.org/2000/svg">
<svg id="search-icon" class="search-icon-lightmode" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="7" r="6" stroke-width="2" fill="none" />
<polyline points="8,10 2,16" style="fill:none;stroke-width:2" stroke-linecap="round" />
<polyline points="6,12 2,16" style="fill:none;stroke-width:2" stroke-linecap="round" />
</svg>
</span>
</div>

15
editor.js
View File

@ -3,7 +3,6 @@ var darkMode = false;
function toggleTheme() {
darkMode = !darkMode;
console.log('dark mode', darkMode);
var menus = [mainMenu, sidePanel, filePanel];
Array.from(document.getElementsByClassName('menuitem')).forEach(item =>
@ -23,6 +22,8 @@ function toggleTheme() {
document.getElementById('sidecontentnode')
];
var searchIcon = document.getElementById('search-icon');
if (darkMode) {
menus.forEach(target => {
target.classList.add('menu-darkmode');
@ -32,6 +33,8 @@ function toggleTheme() {
hint.classList.add('contenttype-darkmode');
hint.classList.remove('contenttype-lightmode');
});
searchIcon.classList.add('search-icon-darkmode');
searchIcon.classList.remove('search-icon-lightmode');
wfGraph.backgroundColor('black');
} else {
menus.forEach(target => {
@ -42,6 +45,8 @@ function toggleTheme() {
hint.classList.add('contenttype-lightmode');
hint.classList.remove('contenttype-darkmode');
});
searchIcon.classList.add('search-icon-lightmode');
searchIcon.classList.remove('search-icon-darkmode');
wfGraph.backgroundColor('white');
}
}
@ -189,7 +194,8 @@ function search(text) {
defineFocus(r, target);
})
}
searchResultList.style.maxHeight = parseFloat(searchResults.style.maxHeight) - searchOptions.offsetHeight - 60;
// console.log('maxh', searchResults.style.maxHeight - searchOptions.offsetHeight)
stateResults && format(workflow.states, stateResults, 'States');
actionResults && format(workflow.actions, actionResults, 'Edges');
positionSubmenuBackdrop();
@ -384,6 +390,7 @@ const contextMenuEd = document.getElementById('ctmenued'); //Click on edge
const searchContainer = document.getElementById('search-container');
const searchResults = document.getElementById('search-results');
const searchResultList = document.getElementById('search-result-list');
const searchOptions = document.getElementById('search-options')
// Counters for placeholder IDs of states/actions added via GUI
var stateIdCounter = 0;
var actionIdCounter = 0;
@ -458,6 +465,7 @@ function addState() {
workflow.states.push(state);
updateGraph();
select(state);
nodeIndex.add(state.id, state.name);
}
/**
@ -473,6 +481,7 @@ function connect(source, target) {
workflow.actions.push(action);
updateGraph();
select(action);
actionIndex.add(action.id, action.name);
}
function markEdgeTo() {
@ -546,6 +555,7 @@ function generatePanelContent(selection) {
*/
function removeAction(action) {
workflow.actions.splice(workflow.actions.indexOf(action), 1);
actionIndex.remove(action.id);
}
@ -560,6 +570,7 @@ function removeState(state) {
workflow.states.splice(workflow.states.indexOf(state), 1);
var abbreviation = state.stateData && state.stateData.abbreviation;
abbreviation && stateAbbreviations.splice(stateAbbreviations.indexOf(abbreviation), 1);
nodeIndex.remove(state.id);
}
var selfLoops = {}; // All edges whose targets equal their sources.