New: Add rectangle selection - #115
Conversation
tonilastre
left a comment
tonilastre
left a comment
There was a problem hiding this comment.
This is great! I've tested it and works fine.
Btw maybe I misconfigured but is it possible to:
- Do rectangle select -> selects N nodes
- Click SHIFT and select new (N+1) node
Currently, it unselects the rectangle ones.
| import { RectangleArea } from '@memgraph/orb'; | ||
|
|
||
| const area = new RectangleArea({ x, y, width, height }); | ||
| const nodes = orb.data.getNodesInArea(area); // nodes whose center is inside | ||
| orb.interaction.selectNodesByIds(nodes.map((n) => n.getId())); |
| @@ -1,2 +1,2 @@ | |||
| /*! For license information please see orb.min.js.LICENSE.txt */ | |||
There was a problem hiding this comment.
Btw do we need orb.min.js in here? Can we pull it from <script src="https://unpkg.com/@memgraph/orb/dist/browser/orb.min.js"></script>
It won't have the current version, but the latest deployed one (which also makes sense because docs are deployed on main)
There was a problem hiding this comment.
The issue is that locally you couldn' see how it works then :/
There was a problem hiding this comment.
I think it's fine to keep as-is, so the demos always match the source which makes the DX better. The only downside is having this binary in git, but since it does not go into build, I'd say it's fine. Let me know if we want to remove it
|
|
||
| export type IRectangleSelectionMode = 'replace' | 'add'; | ||
|
|
||
| export type IRectangleSelectionEdgeMode = 'none' | 'endpointsInside'; |
There was a problem hiding this comment.
Do we even need these? You as a user can simply filter out or add edges once you get a selection?
There was a problem hiding this comment.
Nice catch! Dropped the edge selection interfaces
| export const selectNodes = <N extends INodeBase, E extends IEdgeBase>( | ||
| nodes: INode<N, E>[], | ||
| options?: ISelectionOptions, | ||
| ): { changedCount: number } => { | ||
| for (let i = 0; i < nodes.length; i++) { | ||
| selectNode(nodes[i], options); | ||
| } | ||
| return { changedCount: nodes.length }; | ||
| }; | ||
|
|
||
| export const unselectNodes = <N extends INodeBase, E extends IEdgeBase>( | ||
| nodes: INode<N, E>[], | ||
| options?: ISelectionOptions, | ||
| ): { changedCount: number } => { | ||
| for (let i = 0; i < nodes.length; i++) { | ||
| unselectNode(nodes[i], options); | ||
| } | ||
| return { changedCount: nodes.length }; | ||
| }; | ||
|
|
||
| export const selectEdges = <N extends INodeBase, E extends IEdgeBase>( | ||
| edges: IEdge<N, E>[], | ||
| options?: ISelectionOptions, | ||
| ): { changedCount: number } => { | ||
| for (let i = 0; i < edges.length; i++) { | ||
| selectEdge(edges[i], options); | ||
| } | ||
| return { changedCount: edges.length }; | ||
| }; | ||
|
|
||
| export const unselectEdges = <N extends INodeBase, E extends IEdgeBase>( | ||
| edges: IEdge<N, E>[], | ||
| options?: ISelectionOptions, | ||
| ): { changedCount: number } => { | ||
| for (let i = 0; i < edges.length; i++) { | ||
| unselectEdge(edges[i], options); | ||
| } | ||
| return { changedCount: edges.length }; | ||
| }; |
There was a problem hiding this comment.
These changed counts might not give correct value for "changed" - they return the total number of edges and nodes, not necessarily if it was changed
|
🎉 This PR is included in version 1.1.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
2 participants
This PR introduces rectangle node selection.
The selection logic lives in core as neutral primitives, the visual ships as an opt-in
module (
@memgraph/orb/interactions), so core stays renderer-agnostic.Core got some new public methods for position transform and neutral
BACKGROUND_DRAG_*events viainteraction.backgroundDrag. Panning and node dragging are unchanged. A modifier-held drag on the empty background is intercepted to emit these events instead of panning.A new interaction module adds a
RectangleSelectionhelper that listens to the background-drag events, draws its own overlay, and applies the selection through those primitives.Verified on canvas + WebGL; some WebGL improvements, tests and a docs demo included. Map view, lasso select, touch and WebGL label dimming are left for later.