Skip to content
This repository was archived by the owner on Apr 13, 2026. It is now read-only.

Add multi-tab graph pages with per-tab nodes/connections, context menu, and inline rename - #28

Merged
lunarcloud merged 4 commits into
mainfrom
copilot/add-tabs-to-graph
Mar 19, 2026
Merged

lunarcloud merged 4 commits into
mainfrom
copilot/add-tabs-to-graph

Conversation

Copilot AI commented Mar 19, 2026

Copy link
Copy Markdown

Adds a tab bar below the ribbon so nodes can be organized across named pages. Each tab owns independent node and connection collections. Tabs support right-click context menu (new tab to the right, rename, delete), inline rename that auto-activates on tab creation (commits on Enter/Escape/focus-loss), and a "+" button that sits immediately to the right of the last tab.

Architecture

  • TabViewModel — new VM holding Name, IsEditing, Nodes, Connections per tab
  • MainWindowViewModel.Nodes / .Connections — now computed properties delegating to ActiveTab; OnActiveTabChanged clears selection and notifies bindings
  • Tab commandsAddTabCommand, AddTabAfterCommand, DeleteTabCommand (last tab protected); NewGraph resets to a single "Main" tab
  • Auto-renameAddTab and AddTabAfter set IsEditing = true immediately; a FocusActiveTabRenameBox() helper defers focus and select-all to the rename TextBox after Avalonia renders the new item

Serialization

New multi-tab JSON format via TabData DTO (title, nodes, layout, connections) nested under a tabs array. Legacy single-tab files (no tabs key) deserialize into a single tab automatically.

{
  "tabs": [
    { "title": "Main", "nodes": [...], "layout": {...}, "connections": [...] },
    { "title": "Tab 1", "nodes": [...], "layout": {}, "connections": [] }
  ]
}

UI

Tab bar is a ScrollViewer wrapping a horizontal StackPanel containing the tab ListBox followed directly by the "+" button, so the button always appears immediately after the last tab and scrolls with them. Each tab item's DataTemplate contains a read-mode TextBlock and an edit-mode TextBox toggled by IsEditing. Context menu actions dispatch to MainWindowViewModel commands via code-behind handlers.

Original prompt

This section details on the original issue you should resolve

<issue_title>Tabs</issue_title>
<issue_description>I want the graph to have tabs, such that nodes can be places on pages that represent the contents of the tab.
I want a tab bar at the top, below the ribbon and above the graph, and a "+" button on the right side of the tabs area to create new tabs with.
You should be able to right click and get options to create a new tab (to the right of the selected tab), rename the selected tab, or delete the selected tab. Selected doesn't mean current, it means the one right-clicked.</issue_description>

Comments on the Issue (you are @copilot in this section)


💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

…ization, and context menu

Co-authored-by: lunarcloud <1565970+lunarcloud@users.noreply.github.com>
@lunarcloud

Copy link
Copy Markdown
Owner

@copilot three notes:

  • I want the new tab button to be just to the right of the last tab.
  • when a new tab is created, automatically go into renaming mode
  • the first tab should be named "Main" not "Tab 1"

Copilot AI changed the title [WIP] Add tabs to graph for organizing nodes Add multi-tab graph pages with per-tab nodes/connections, context menu, and inline rename Mar 19, 2026
Copilot AI requested a review from lunarcloud March 19, 2026 00:52
lunarcloud and others added 2 commits March 18, 2026 20:53
…t tab to Main

Co-authored-by: lunarcloud <1565970+lunarcloud@users.noreply.github.com>

Copilot AI commented Mar 19, 2026

Copy link
Copy Markdown
Author

@copilot three notes:

  • I want the new tab button to be just to the right of the last tab.
  • when a new tab is created, automatically go into renaming mode
    ...

Done in commit 1a6af74:

  • "+" button position — Restructured the tab bar to use a ScrollViewer + StackPanel so the button sits immediately after the last tab (and scrolls with them). Sam's NotoSymbolsFont styling is preserved.
  • Auto-rename on new tabAddTab and AddTabAfter now set IsEditing = true on the new tab and call a deferred FocusActiveTabRenameBox() helper that focuses and selects the rename TextBox once Avalonia has rendered it. The context-menu Rename action also auto-focuses.
  • First tab named "Main" — Default tab in the constructor and NewGraph reset are now "Main" instead of "Tab 1".

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • av-build-tel-api-v1.avaloniaui.net
    • Triggering command: /usr/share/dotnet/dotnet dotnet exec --runtimeconfig /home/REDACTED/.nuget/packages/avalonia.buildservices/11.3.2/tools/netstandard2.0/runtimeconfig.json /home/REDACTED/.nuget/packages/avalonia.buildservices/11.3.2/tools/netstandard2.0/Avalonia.BuildServices.Collector.dll (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

@lunarcloud
lunarcloud marked this pull request as ready for review March 19, 2026 01:02
@lunarcloud
lunarcloud merged commit 94dac9e into main Mar 19, 2026
4 of 5 checks passed
@lunarcloud
lunarcloud deleted the copilot/add-tabs-to-graph branch March 19, 2026 01:02
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tabs

2 participants