From d4008c812fe2ff9f95bf7304ae38e6ec21247ad3 Mon Sep 17 00:00:00 2001 From: David Mosbach Date: Mon, 29 May 2023 00:33:41 +0200 Subject: [PATCH] added full navigation menu --- editor.css | 94 +++++++++++++++++++++++++++++++++++++++-------------- editor.html | 39 +++++++++++++++++----- editor.js | 68 +++++++++++++++++++++++++++++++++++++- 3 files changed, 166 insertions(+), 35 deletions(-) diff --git a/editor.css b/editor.css index 8dd5acb..be9f805 100644 --- a/editor.css +++ b/editor.css @@ -1,11 +1,3 @@ -/* .body { - margin: 50px 50px 50px 50px; -} - -#editor { - border: 10px solid red; -} */ - body { margin: 0 0 0 0; } @@ -16,34 +8,71 @@ body { top: 0px; width: 100%; position: fixed; - padding: 8 8 8 8; + /* padding: 8 8 8 8; */ + padding-left: 10px; background-color: rgb(230, 230, 230); opacity: 0.95; z-index: 2; float: left; overflow: auto; - align-items: center; } -#settings div { - width: fit-content; - position: relative; - overflow: hidden; +.menuitem { float: left; - margin-right: 20; } -#sidepanel { +.menuitem button { + padding: 10 0 10 0; + margin: 0 10 0 10; + font-size: 1em; + background-color: transparent; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: none; + border-right: none; + transition: all 200ms ease-out 0ms; +} + +.menuitem:hover button { + border-bottom: 4px solid rgb(75, 151, 151); +} + +.menuitem:active button, .selectedmenuitem button { + border-bottom: 4px solid rgb(75, 151, 151); + color: rgb(75, 151, 151); +} + +.submenu { + width: fit-content; + position: fixed; + top: 60px; + overflow: hidden; + padding: 20 20 20 20; + display: none; +} + +.selectedmenuitem .submenu { + display: block; +} + +.submenu div { + position: relative; +} + +.submenu, #sidepanel { position:fixed; background-color: rgb(230, 230, 230); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - top: 80px; - bottom:30px; - right:20px; - width: 500px; opacity: 0.95; padding: 20px; - border-radius: 20px; + border-radius: 15px; +} + +#sidepanel { + top: 70px; + bottom:20px; + right:20px; + width: 500px; z-index:10; overflow: hidden; display: none; @@ -101,7 +130,7 @@ body { padding: 5px; background-color: rgb(230, 230, 230); opacity: 0.95; - transition: background-color 100ms ease-out 50ms; + transition: all 100ms ease-out 50ms; -webkit-user-select: none; -ms-user-select: none; user-select: none; @@ -157,22 +186,37 @@ a:active { color: rgb(110, 212, 212); } -button { +#sidebuttons button { padding: 5 5 5 5; border-radius: 5px; border-style: solid; border-color: transparent; background: rgba(120, 120, 120, 0.555); color: white; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.082), 0 2px 10px 0 rgba(0, 0, 0, 0.068); + transition: all 100ms ease-in-out 0ms; + cursor: pointer; } -button:disabled { +#sidebuttons button:disabled { border-color: rgba(0, 0, 0, 0.267); background: rgba(120, 120, 120, 0.116); color: rgba(0, 0, 0, 0.267); border-width: 1px; + cursor: not-allowed; } -select, option { +#sidebuttons button:hover { + transform: scale(1.02); + /* transition: all 100ms ease-in-out 0ms; */ + background: rgba(120, 120, 120, 0.651); + /* transition: box-shadow ease-in-out 100ms; */ +} + +#sidebuttons button:active { + background: rgba(105, 105, 105, 0.692); +} + +select { padding: 2 2 2 2; } \ No newline at end of file diff --git a/editor.html b/editor.html index cf3a658..2e491ab 100644 --- a/editor.html +++ b/editor.html @@ -11,13 +11,34 @@
-
- - +
+ +
FOO
-
- - +
+ +
+
+ + +
+
+ + +
+
+
+
+ +
FOO
+
+
+ +
FOO
+
+
+ +
FOO
@@ -31,9 +52,9 @@
- - - + + +
diff --git a/editor.js b/editor.js index 9f5af62..f0c5593 100644 --- a/editor.js +++ b/editor.js @@ -1,3 +1,51 @@ +// Menu bar + +var selectedMenuItem = null; + +/** + * + * @param {HTMLElement} menuitem + */ +function openMenuItem(menuitem) { + edgeTo = edgeFrom = rightSelection = null; + contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; + if (menuitem === selectedMenuItem) { + closeMenuItem(); + return; + } + Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => other.classList.remove('selectedmenuitem')); + menuitem.classList.add('selectedmenuitem'); + selectedMenuItem = menuitem; +} + +function closeMenuItem() { + if (!selectedMenuItem) return; + selectedMenuItem.classList.remove('selectedmenuitem'); + selectedMenuItem = null; +} + +function openFileMenu(menuitem) { + openMenuItem(menuitem); +} + +function openViewMenu(menuitem) { + openMenuItem(menuitem); +} + +function openSettingsMenu(menuitem) { + openMenuItem(menuitem); +} + +function openAboutMenu(menuitem) { + openMenuItem(menuitem); +} + +function openSearchMenu(menuitem) { + openMenuItem(menuitem); +} + +// Workflow processing + var workflow = {} // fetch('./test.json') @@ -394,6 +442,16 @@ function markEdgeFrom() { contextMenuSt.style.display = 'none'; } +function removeSelection() { + if (selection) { + if (selection.actionData) removeAction(selection); + else removeState(selection); + deselect(); + edgeFrom = edgeTo = rightSelection = null; + contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; + } +} + function removeRightSelection() { if (rightSelection) { if (rightSelection.actionData) removeAction(rightSelection); @@ -631,28 +689,36 @@ const Graph = ForceGraph() connect(node, edgeTo); edgeTo = null; } else select(node); + closeMenuItem(); }) .onNodeRightClick((node, event) => { openContextMenu(event.layerX, event.layerY, contextMenuSt); contextMenuBg.style.display = contextMenuEd.style.display = 'none'; rightSelection = node; + closeMenuItem(); + }) + .onLinkClick((edge, _) => { + select(edge); + closeMenuItem(); }) - .onLinkClick((edge, _) => select(edge)) .onLinkRightClick((edge, event) => { openContextMenu(event.layerX, event.layerY, contextMenuEd); contextMenuBg.style.display = contextMenuSt.style.display = 'none'; rightSelection = edge; + closeMenuItem() }) .onBackgroundClick(_ => { contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; deselect(); edgeFrom = edgeTo = rightSelection = null; + closeMenuItem(); }) .onBackgroundRightClick(event => { newStateCoords = Graph.screen2GraphCoords(event.layerX, event.layerY); openContextMenu(event.layerX, event.layerY, contextMenuBg); contextMenuEd.style.display = contextMenuSt.style.display = 'none'; edgeFrom = edgeTo = rightSelection = null; + closeMenuItem() }) .autoPauseRedraw(false);