diff --git a/editor.css b/editor.css index 49594a0..9c387ac 100644 --- a/editor.css +++ b/editor.css @@ -67,15 +67,15 @@ body { cursor: default; } -.selectedmenuitem .submenu { +/* .selectedmenuitem .submenu { display: block; -} +} */ .submenu div { position: relative; } -.submenu, #sidepanel { +.submenu, #sidepanel, #filepanel { 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); @@ -127,7 +127,7 @@ body { /* height: 80%; */ } -#sidebuttons { +#sidebuttons, #filebuttons { position: absolute; bottom: 20px; left: 20px; @@ -226,7 +226,7 @@ a:active { color: rgb(110, 212, 212); } -#sidebuttons button { +#sidebuttons button, #filebuttons button { font-family: 'Inter'; padding: 5 5 5 5; border-radius: 5px; @@ -238,7 +238,7 @@ a:active { cursor: pointer; } -#sidebuttons button:disabled { +#sidebuttons button:disabled, #filebuttons button:disabled { border-color: rgba(0, 0, 0, 0.267); background: rgba(120, 120, 120, 0.116); color: rgba(0, 0, 0, 0.267); @@ -246,7 +246,7 @@ a:active { cursor: not-allowed; } -#sidebuttons button:hover { +#sidebuttons button:hover, #filebuttons button:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.082), 0 2px 10px 0 rgba(0, 0, 0, 0.068); transform: scale(1.02); /* transition: all 100ms ease-in-out 0ms; */ @@ -254,7 +254,7 @@ a:active { /* transition: box-shadow ease-in-out 100ms; */ } -#sidebuttons button:active { +#sidebuttons button:active, #filebuttons button:active { background: rgba(105, 105, 105, 0.692); } @@ -267,6 +267,34 @@ label { font-family: 'Inter'; } +#filepanel { + top: 20%; + bottom:20%; + left: 20%; + right:20%; + z-index:100; + overflow: hidden; + display: none; +} + +#fileheading { + font-family: 'Inter'; + text-align: center; + font-style: normal; +} + +#curtain { + z-index: 50; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + background-color: black; + opacity: 0%; + display: none; +} + .force-graph-container .graph-tooltip { color: black; background-color: rgb(230, 230, 230); diff --git a/editor.html b/editor.html index 99d3eef..5a92f7f 100644 --- a/editor.html +++ b/editor.html @@ -9,6 +9,7 @@
+
@@ -17,7 +18,7 @@
Redo (Ctrl + Y)
Save
Export
-
Open
+
Open
@@ -62,6 +63,14 @@
+
+

Hello

+
+
+ + +
+
diff --git a/editor.js b/editor.js index 0219a78..1fdc19e 100644 --- a/editor.js +++ b/editor.js @@ -8,19 +8,36 @@ var selectedMenuItem = null; */ function openMenuItem(menuitem) { edgeTo = edgeFrom = rightSelection = null; - contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; + closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg); if (menuitem === selectedMenuItem) { closeMenuItem(); return; } - Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => other.classList.remove('selectedmenuitem')); + var fadeOuts = []; + Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => { + other.classList.remove('selectedmenuitem'); + Array.from(other.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0})); + }); + fadeOut(...fadeOuts); menuitem.classList.add('selectedmenuitem'); + var fadeIns = []; + Array.from(menuitem.getElementsByClassName('submenu')).forEach(subMenu => fadeIns.push({element: subMenu, max: 0.95})); + fadeIn(null, ...fadeIns); selectedMenuItem = menuitem; } +function closeContextMenus(...menus) { + var items = [] + menus.forEach(menu => items.push({element: menu, min: 0, step: 0.1})); + fadeOut(...items); +} + function closeMenuItem() { if (!selectedMenuItem) return; selectedMenuItem.classList.remove('selectedmenuitem'); + var fadeOuts = []; + Array.from(selectedMenuItem.getElementsByClassName('submenu')).forEach(subMenu => fadeOuts.push({element: subMenu, min: 0})); + fadeOut(...fadeOuts); selectedMenuItem = null; } @@ -44,6 +61,60 @@ function openSearchMenu(menuitem) { openMenuItem(menuitem); } +document.getElementById('filepanel').style.opacity = 0; + +function openFileDisplay() { + var panel = document.getElementById('filepanel'); + var curtain = document.getElementById('curtain'); + fadeIn(null, {element: panel, max: 1, step: 0.025}, {element: curtain, max: 0.5, step: 0.025}); + closeMenuItem(); +} + +function closeFileDisplay() { + var panel = document.getElementById('filepanel'); + var curtain = document.getElementById('curtain'); + fadeOut({element: panel, min: 0, step: 0.025}, {element: curtain, min: 0, step: 0.025}); +} + +function fadeIn(callback, ...items) { + requestAnimationFrame(() => { + items.forEach(i => i.element.style.display = 'block'); + if (callback) callback(); + }); + function fade() { + var proceed = false; + items.forEach(i => { + var newOpacity = (parseFloat(i.element.style.opacity) || 0) + (i.step || 0.05); + if (newOpacity <= i.max) { + i.element.style.opacity = newOpacity; + // console.log(i.max, i.element.style.opacity) + proceed = true; + } else if ((parseFloat(i.element.style.opacity) || 0) > i.max) i.element.style.opacity = i.max; + }); + if (proceed) requestAnimationFrame(fade); + } + requestAnimationFrame(fade); +} + +function fadeOut(...items) { + function fade() { + var proceed = false; + items.forEach(i => { + var newOpacity = (parseFloat(i.element.style.opacity) || 0) - (i.step || 0.05); + if (newOpacity >= i.min) { + i.element.style.opacity = newOpacity; + // console.log(i.max, i.element.style.opacity) + proceed = true; + } else { + if ((parseFloat(i.element.style.opacity) || 0) < i.min) i.element.style.opacity = i.min; + i.element.style.display = 'none'; + } + }); + if (proceed) requestAnimationFrame(fade); + } + requestAnimationFrame(fade); +} + // Workflow processing var workflow = {}; const wfGraph = ForceGraph(); @@ -77,7 +148,7 @@ var highlightedSources = []; var highlightedTargets = []; function selectActor() { - contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; + closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg); edgeFrom = edgeTo = rightSelection = null; highlightedSources = []; highlightedTargets = []; @@ -91,7 +162,7 @@ function selectActor() { } function selectViewer() { - contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; + closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg); edgeFrom = edgeTo = rightSelection = null; highlightedSources = []; highlightedTargets = []; @@ -126,32 +197,37 @@ var newStateCoords = {'x': 0, 'y': 0}; //Initial coordinates of the next new sta * @param {*} item The node or edge to select. */ function select(item) { - contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; + closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg); edgeFrom = edgeTo = rightSelection = null; selection = selection === item ? null : item; if (selection === item) { while (sideContent.firstChild) sideContent.removeChild(sideContent.lastChild); - sidePanel.style.display = 'block' - sideHeading.innerHTML = item.name; - var data = document.createElement('div'); - var content = generatePanelContent(selection); - content.forEach(c => data.appendChild(c)); - sideContent.appendChild(data); - var spStyle = window.getComputedStyle(sidePanel); - var shStyle = window.getComputedStyle(sideHeading); - sideContent.style.top = sideHeading.offsetHeight + parseFloat(spStyle.paddingTop) + parseFloat(shStyle.marginTop) + parseFloat(shStyle.marginBottom); - var sbStyle = window.getComputedStyle(sideButtons); - sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(spStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom); - // console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom); + function callback() { + sideHeading.innerHTML = item.name; + var data = document.createElement('div'); + var content = generatePanelContent(selection); + content.forEach(c => data.appendChild(c)); + sideContent.appendChild(data); + var spStyle = window.getComputedStyle(sidePanel); + var shStyle = window.getComputedStyle(sideHeading); + sideContent.style.top = sideHeading.offsetHeight + parseFloat(spStyle.paddingTop) + parseFloat(shStyle.marginTop) + parseFloat(shStyle.marginBottom); + var sbStyle = window.getComputedStyle(sideButtons); + sideContent.style.bottom = sideButtons.offsetHeight + parseFloat(spStyle.paddingBottom) + parseFloat(sbStyle.marginTop) + parseFloat(sbStyle.marginBottom); + // console.log(sideHeading.offsetHeight + shStyle.marginTop + shStyle.marginBottom); + } + fadeIn(callback, {element: sidePanel, max: 0.95}); + } else { - sidePanel.style.display = 'none'; + fadeOut({element: sidePanel, min: 0}); + // sidePanel.style.display = 'none'; } console.log(item); } function deselect() { - sidePanel.style.display = 'none'; + fadeOut({element: sidePanel, min: 0}); + // sidePanel.style.display = 'none'; selection = null; } @@ -190,12 +266,14 @@ function connect(source, target) { function markEdgeTo() { edgeTo = rightSelection; - contextMenuSt.style.display = 'none'; + closeContextMenus(contextMenuSt); + // contextMenuSt.style.display = 'none'; } function markEdgeFrom() { edgeFrom = rightSelection; - contextMenuSt.style.display = 'none'; + closeContextMenus(contextMenuSt); + // contextMenuSt.style.display = 'none'; } function removeSelection() { @@ -204,7 +282,7 @@ function removeSelection() { else removeState(selection); deselect(); edgeFrom = edgeTo = rightSelection = null; - contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; + closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg); } } @@ -214,7 +292,7 @@ function removeRightSelection() { else removeState(rightSelection); if (selection === rightSelection) deselect(); edgeFrom = edgeTo = rightSelection = null; - contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; + closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg); } } @@ -557,7 +635,8 @@ workflow.states.forEach(state => { function openContextMenu(x, y, menu) { menu.style.top = y - 25; menu.style.left = x + 20; - menu.style.display = 'block'; + fadeIn(null, {element: menu, max: 1, step: 0.1}) + // menu.style.display = 'block'; edgeFrom = edgeTo = null; } @@ -690,7 +769,8 @@ function openContextMenu(x, y, menu) { }) .onNodeRightClick((node, event) => { openContextMenu(event.layerX, event.layerY, contextMenuSt); - contextMenuBg.style.display = contextMenuEd.style.display = 'none'; + closeContextMenus(contextMenuBg, contextMenuEd); + // contextMenuBg.style.display = contextMenuEd.style.display = 'none'; rightSelection = node; closeMenuItem(); }) @@ -700,12 +780,13 @@ function openContextMenu(x, y, menu) { }) .onLinkRightClick((edge, event) => { openContextMenu(event.layerX, event.layerY, contextMenuEd); - contextMenuBg.style.display = contextMenuSt.style.display = 'none'; + closeContextMenus(contextMenuBg, contextMenuSt); + // contextMenuBg.style.display = contextMenuSt.style.display = 'none'; rightSelection = edge; closeMenuItem() }) .onBackgroundClick(_ => { - contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none'; + closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg); deselect(); edgeFrom = edgeTo = rightSelection = null; closeMenuItem(); @@ -713,9 +794,10 @@ function openContextMenu(x, y, menu) { .onBackgroundRightClick(event => { newStateCoords = wfGraph.screen2GraphCoords(event.layerX, event.layerY); openContextMenu(event.layerX, event.layerY, contextMenuBg); - contextMenuEd.style.display = contextMenuSt.style.display = 'none'; + closeContextMenus(contextMenuEd, contextMenuSt); + // contextMenuEd.style.display = contextMenuSt.style.display = 'none'; edgeFrom = edgeTo = rightSelection = null; - closeMenuItem() + closeMenuItem(); }) .autoPauseRedraw(false);