Open John-Boik opened 2 years ago
Thank you for your suggestion!
The ability to select multiple nodes by dragging is a feature that I have been thinking about since the beginning of development, but haven't gotten around to it yet. I hope to implement it in the not-too-distant future.
The ability to group nodes was also an idea, but it was not the target yet, because I was focusing on simplicity and extendibility first.
What you have suggested is interesting. I might break it down into several small features and implement them little by little. By combining them, your requirements may be realized someday. However, it is difficult to promise when all the implementations will be ready...
If you are in a hurry, please refer to the following:
If you do not foresee adding this as a feature, could you provide a short description as to how this might be best accomplished in the existing v-network-graph framework?
ForceLayout
.
Great @dash14, thanks. I look forward to the changes. I'm sure you are familiar with vis.js, which writes to a HTML canvas rather than SVG. (In my case, an SVG is preferred.) As you add features, vis.js might offer some inspiration. In particular, it has:
Hi @John-Boik, Thanks for your reply and sharing the vis.js precedent. I would like to refer to it. I think it will take some time, I will report here when the development progresses.
Hi @dash14, I am willing to add a selection by rectangle feature but have a few questions regarding which functions to add/modify.
getOrCreateViewPort
, getViewBox
and getViewArea
?mouseAndTouchNormalize
should allow me to add a click-drag event for creating the rectangle; handleNodeClickEvent
is used to select nodes by click events, so I might be able to group the multiple nodes selected by the rectangle also under this function?There're too many functions in the source code so I could have omitted some important functions. I would really appreciate it if you could kindly correct me if I should look for other functions to accomplish the above steps!
Hi @happylilem, Thank you for your consideration of the feature of node selection by rectangle! In order to answer your question in detail, I myself need to think about how to implement this feature. And as a result, I implemented this feature. I had originally planned to implement it and decided to expedite its timing. Thank you for the impetus.
Release: v0.6.0 Example: https://dash14.github.io/v-network-graph/examples/operation.html#select-nodes-at-once-with-a-rectangle
The implementation is briefly described below.
<rect>
on <svg>
outside the viewport, the coordinates is not affected by zooming.Thank you very much for the detailed look inside! Please keep up your supports!
Hi @dash14 , I was playing around with this new feature, such an awesome addition to this library! Thank you!
And just a little suggestion: I noticed some other network libraries have selection by rectangle function by holding the ctrl/cmd key; while releasing the key allows normal pan. This might be more convenient than using one or more buttons when there are already bunch of buttons on the page. But the current feature is good enough for me.
The using experience of your network library so far is great, love the appearance of the graphs and the smoothness of the operations. Please keep up the good work!
Hi @happylilem, Thank you for your reply and suggestions!
I have added the feature you suggested in v0.6.1. If enabled in the configs, it is possible to select nodes by rectangle with the ctrl/cmd key. The example has also been extended to include the new feature. https://dash14.github.io/v-network-graph/examples/operation.html#select-nodes-at-once-with-a-rectangle
Thank you for your positive feedback! Please continue to support this library!
Hi @dash14 , Thanks for adding this function!
I just tried this new feature on the example, and discovered a little issue there -- it works perfectly fine when I release the mouse before releasing the cmd key after the selection; but if the cmd key is released before the mouse, the selection box would remain on the graph, and clicking on the background would not eliminate the rectangle. Meanwhile I can pan the graph, so the network can be moved freely around regardless of the rectangle. To eliminate the rectangle I'll have to press the key again and start a new selection.
This might be beyond the aims of v-network-graph, but I am attempting to use v-network-graph to create a graph editor for Neo4j. It would allow a user to create/edit graphs in the browser, and these would be saved in Neo4j on the backend. Likewise, a graph stored in Neo4j could be converted to v-network-graph on the frontend for viewing and additional editing.
This project suggests some potential new features for v-network-graph. One would be the ability to select multiple nodes by dragging a rectangle or lasso around existing nodes. Once selected, the nodes could be removed from the graph, if that is the intent. Or, more interesting, the selected nodes could be included into a group by writing a node property on each.
In the latter case, there could be an option to keep the rectangle or other boundary visible, to denote the group. It could even have an optional visible text label somewhere in the boundary, (e.g., "Group 1"). Finally, the nodes within the boundary could be arranged by some force method, and the group could be treated as a whole when using a force method to arrange all other nodes. I imagine all this would involve creating a subgroup within the SVG that includes the rectangle as a border.
Is the ability to select multiple nodes in this way of interest to the developers? If you do not foresee adding this as a feature, could you provide a short description as to how this might be best accomplished in the existing v-network-graph framework?