DevLog 20250728: Multi-graph Navigation GUI
Charles Zhang

Charles Zhang @methodoxdivooka

About: Visual programming for everyone.

Location:
Toronto
Joined:
May 7, 2025

DevLog 20250728: Multi-graph Navigation GUI

Publish Date: Jul 29
0 0

Overview

From the beginning, we've expected Divooka documents to support multiple graphs for efficient daily use. I consider this essential for scripting purposes, as dealing with file system entry references should be the last thing on our minds when trying to get something done quickly.

However, implementing this isn't straightforward. Several interesting and foundational features are required first: serialization, file format support, editor refactoring - and graph referencing, which we may discuss in a future entry.

In traditional programming languages, especially object-oriented ones, similar functionality is often achieved by allowing multiple classes per file. In C#, for example, it's even possible to define partial classes across separate files, which can become confusing if not managed carefully.

Objective

When working with multiple graphs in a single document, the experience should feel similar to working with separate documents that each contain a single graph. At the most basic level, the editor should allow quick and seamless switching between graphs. More advanced features will come later. For example, storing multiple graphs within a single document should eventually enable referencing those graphs or documents from other documents.

Implementation Progress

Graphs Selection

Today's goal was to support navigation and switching between different graphs in Neo.

Preliminary work on refactoring the graph editor into a reusable component was already completed earlier. This refactor is also crucial for enabling the subgraph editing window.

To maintain context when switching graphs, the current viewport remains unchanged. We've also implemented a mini-map to help users quickly identify their location within the graph.

Minimap Behavior

Minimap

The math behind the minimap is a bit tricky, so it's worth documenting:

  1. When switching between graphs, the editor should either preserve the current viewport (location and zoom) or reset the view to the center of the new graph.
  2. A "world boundary" must be calculated that encompasses all nodes in the graph.
  3. A "viewport boundary" should also be calculated to represent the currently visible area of the canvas.
  4. The minimap scale (typically less than 1 to represent downscaling) should be the minimum of:
    • minimap size / world size, or
    • minimap size / viewport size, if the viewport is larger than the world (e.g., when zoomed out).

Other Matters

The Neo graph editor is taking noticeably longer to load lately. We may need to investigate and address performance issues soon.

Comments 0 total

    Add comment