Node 'Disable' and 'Preview' UX improvements (#918)

* Don't allow disabling input or output nodes

* Shortcuts to show and preview node

* Update preview tooltip and label

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2022-12-28 19:38:35 +00:00
committed by Keavon Chambers
parent d969a4d797
commit b660df84ba
6 changed files with 81 additions and 43 deletions

View File

@@ -534,8 +534,10 @@ export default defineComponent({
},
// TODO: Move the event listener from the graph to the window so dragging outside the graph area (or even the browser window) works
pointerDown(e: PointerEvent) {
// Exit the add node popup by clicking elsewhere in the graph
if (this.nodeListLocation && !(e.target as HTMLElement).closest("[data-node-list]")) this.nodeListLocation = undefined;
// Handle the add node popup on right click
if (e.button === 2) {
const graphDiv: HTMLDivElement | undefined = (this.$refs.graph as typeof LayoutCol | undefined)?.$el;
const graph = graphDiv?.getBoundingClientRect() || new DOMRect();
@@ -558,6 +560,10 @@ export default defineComponent({
// If the user is clicking on the add nodes list, exit here
if (nodeList) return;
if (e.altKey && nodeId) {
this.editor.instance.togglePreview(BigInt(nodeId));
}
// Clicked on a port dot
if (port && node) {
const isOutput = Boolean(port.getAttribute("data-port") === "output");