Proposal to Enhance Code Link Feature with Line Number Jump

[CookedMelon]

In the vscode-drawio project, the current Code Link Feature allows users to jump to source code by assigning a node a label like #MyClass. This method relies on symbol search, which provides a suboptimal experience, especially for complex projects where accurate positioning is difficult and flexibility is limited.

I have implemented a feature that enables line number-based jumps based on vscode-drawio, allowing navigation to any position in the code, rather than just the beginning of function or class definitions. Initially, I developed this feature to streamline my own workflow for code organization. After implementation, I wonder if this Code Link way can be added into this project for more people.

However, my implementation required nearly 3,000 lines of modifications to the project, and it may take a certain threshold to use this function very skillfully It is not as intuitive as the existing Code Link Feature but more powerful than it. Since many users use vscode-drawio to organize code structures and often browse code in conjunction with Drawio, I’d like to ask the developers to consider adding the line number-based jump feature I implemented to vscode-drawio.

To achieve this functionality, I created an additional .codeline file to store the jump locations for each node. The plugin interacts with this file to enable code navigation. I chose not to store the jump locations directly within the .drawio text to make it easier for users to manually modify jump information directly when needed.

In the project, I utilized Git to handle the issue of dynamically modified code locations during editing. Therefore, if users want to locate files that are continuously being modified, they may need to have some understanding of Git.

Below is a brief introduction to the functionality I have implemented:

Base Operate

Add Node

By selecting any text in the editor and right-clicking, users can quickly add a node with that text as a label to .drawio file.

At the same time, the corresponding code location will be recorded in the .codeline file with the same name.

If a node is added through the Draw.io UI, the newly added node will not have the jump function and will not leave any information in the .codeline file. If you need it to have the jump function later, you only need to add information directly in the .codeline file.

Jump Code

Nodes added using the above method have a jump function. In Draw.io UI, Ctrl + Click allows users to jump directly to the editor.

Edit Label

Edit the label of node, the information in .codeline will change at same time

Del Node

When delete a node, the corresponding information in the .codeline file will be commented out instead of being directly deleted. This is to safeguard against user undo operations.

Undo and Redo

I have taken undo and redo operations into account for all the above actions. Any node deletion, re-addition, or label modification resulting from undo or redo operations will be synchronized with the .codeline file.

Jump To CodeLine

Using Shift + Ctrl + Click, users can quickly jump to view the codeline information of the selected node.

For nodes that originally do not have a jump function, an information template will be added to the codeline file, making it easier for users to manually add jump location details.

Simplify CodeLine

Using File -> Simplify, users can simplify the current codeline information by removing all invalid data, such as comments, for existing nodes.

Backup Codeline

Using File -> Backup to generate a backup .codeline file.

Advanced Operate

The challenge of using line numbers for navigation is that modifications to the source code can cause the jump information to become inconsistent. I address this issue by utilizing Git to ensure the accuracy of location tracking. This means that if users need to modify the original code, the corresponding source files must be tracked in a Git repository.

Keep the source code in a git repository

Use File->Change CodeLine Commit and choose a commitID, you will see the first line of .codeline become [git:commitID]. This means that the line number information in the codeline file corresponds to the state of the code in that specific commit. In contrast, the previous local mode represents an absolute jump, where navigation is performed directly based on the line number recorded in the codeline file.

Code Jump in Git Mode

Using Ctrl + Click for navigation will calculate the correct line number based on Git diff, ensuring accurate jumps even if the source code has been modified.

Even the target line is modified(not fully modified), it also can be found.

Even if the target location is entirely cut and moved to another position within the file, it can still be tracked accurately.

Add Node in Git Mode

In Git mode, users can still select text in the editor to quickly add a node. For example, adding a node at line 287 of the current file might result in a new entry at line 290 in the codeline file. This happens because, under the specified commit ID, the content at line 287 in the current file was originally located at line 290.

Change CommitID

You can freely switch between different commit IDs. When set to local, the codeline position information will directly reflect the current line number in the file as stored on disk.

For users familiar with Git operations, mastering the above functionalities allows them to retain most of the jump information even when performing version rollbacks or other changes to the code.

Summary

This code navigation method is more flexible and effective than the original approach(Especially for structural sorting of large-scale projects), but it introduces some additional operations:

• If the code is not modified, no extra steps are needed—users can simply stay in local mode.
• If modifications only involve adding comments or similar changes, users just need to switch to Git mode before making edits, selecting the most recent commit ID. After that, no further actions are required.
• If the code is frequently mmodify or roll back git commits, users need to remember to change the commitID in the .codeline file at the right time. Having a good understanding of the nature of git diff can help users better retain jump information.

Additionally, this approach introduces a new codeline file that will appear on the disk.

Since I initially implemented this feature for personal use, many comments and logs are not written in English now. If the developers believe this navigation method is suitable for inclusion in vscode-drawio, I would be happy to organize my code and submit a PR in days. I will also provide more detailed instructions for users with varying degrees of Code Link needs.

Thank you for taking the time to read this!

[zymelaii]

this feature, including the original code link, does not seem to be the fundamental ones of drawio, and even as an optional feature, it appears somewhat strange. so why not considering make it into a extension pack?

[CookedMelon]

this feature, including the original code link, does not seem to be the fundamental ones of drawio, and even as an optional feature, it appears somewhat strange. so why not considering make it into a extension pack?

Thank you for your feedback!

I’d like to elaborate on my idea a bit more. Creating an extension pack for this feature might indeed be an option, but it could introduce additional challenges. Maintaining compatibility with future updates of vscode-drawio could become difficult, and the complexity of implementation as a separate extension might be too high.

If the developer thinks this jump method is interesting, it can be used as a default-off optional feature. Users who find it useful can simply enable it in the settings. Given that vscode-drawio runs within VS Code, I believe it would be beneficial if it interacted more with the editor's code, rather than just serving as an embedded version of draw.io. Otherwise, we would naturally opt for the web version of draw.io instead.

Furthermore, the fact that vscode-drawio has already implemented a code link feature suggests that the developers see value in some level of code navigation. However, the current implementation does not offer full compatibility across languages. My approach aims to provide a more flexible and effective solution in that regard.

I appreciate your time and consideration, and I’m happy to further refine this feature if needed!