rob
/
CmdForge
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Improve flow visualization UX 

- Add navigation help bar at top of flow view with instructions:
  Pan, Zoom, Select, Edit step shortcuts
- Fix zoom to fit all nodes on initial load (was only centering last node)
- Use QTimer to ensure fit happens after widget is fully rendered
- Clear selection after fitting so nodes don't appear selected

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
rob 2026-01-15 21:52:36 -04:00
parent ad9a59283c
commit 3c39cc9cda
1 changed files with 51 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/cmdforge/gui/widgets/flow_graph.py
View File

@ -2,8 +2,8 @@
from typing import Optional, List
from PySide6.QtWidgets import QWidget, QVBoxLayout
from PySide6.QtCore import Signal
from PySide6.QtWidgets import QWidget, QVBoxLayout, QLabel, QHBoxLayout
from PySide6.QtCore import Signal, Qt, QTimer
from NodeGraphQt import NodeGraph, BaseNode
@ -135,6 +135,39 @@ class FlowGraphWidget(QWidget):
"""Set up the UI."""
layout = QVBoxLayout(self)
layout.setContentsMargins(0, 0, 0, 0)
layout.setSpacing(0)
# Navigation help bar
help_bar = QWidget()
help_bar.setStyleSheet("""
QWidget {
background-color: #edf2f7;
border-bottom: 1px solid #e2e8f0;
}
QLabel {
color: #718096;
font-size: 11px;
padding: 4px 8px;
}
""")
help_layout = QHBoxLayout(help_bar)
help_layout.setContentsMargins(8, 2, 8, 2)
help_text = QLabel(
"Pan: Middle-click drag | "
"Zoom: Scroll wheel | "
"Select: Click or drag box | "
"Edit step: Double-click node"
)
help_layout.addWidget(help_text)
help_layout.addStretch()
# Fit view button
fit_label = QLabel("Press F to fit all")
fit_label.setStyleSheet("color: #667eea; font-weight: 500;")
help_layout.addWidget(fit_label)
layout.addWidget(help_bar)
# Create node graph
self._graph = NodeGraph()
@ -149,7 +182,7 @@ class FlowGraphWidget(QWidget):
self._graph.node_double_clicked.connect(self._on_node_double_clicked)
# Add graph widget
layout.addWidget(self._graph.widget)
layout.addWidget(self._graph.widget, 1)
def set_tool(self, tool: Optional[Tool]):
"""Set the tool to visualize."""
@ -223,7 +256,21 @@ class FlowGraphWidget(QWidget):
# Auto-layout and fit view
self._graph.auto_layout_nodes()
self._graph.fit_to_selection()
# Select all nodes then fit to selection, then clear selection
all_nodes = self._graph.all_nodes()
for node in all_nodes:
node.set_selected(True)
# Use a timer to fit after the widget is fully rendered
QTimer.singleShot(50, self._fit_and_clear_selection)
def _fit_and_clear_selection(self):
"""Fit view to all nodes and clear selection."""
if self._graph:
self._graph.fit_to_selection()
# Clear selection
self._graph.clear_selection()
def _on_node_double_clicked(self, node):
"""Handle node double-click."""