Make Edges easier to be selected

[rsoika]

Normally it is very hard to select an Edge in GLSP as you need to exactly click on the edge:

Now I found a solution to make it easier to select an edge.
In my Edge View method renderLine I render two path elements embedded in one <g> element.

 protected override renderLine(edge: GEdge, segments: Point[], context: RenderingContext, args?: IViewArgs): VNode {
        let path = '';
       ....
       ............
        const vnode: any = <g><path class-sprotty-edge={true} class-line={true} d={path} /><path class-edge-border={true} d={path} /></g>
        return vnode;
    }

The second path element is an invisible border with the following style making it transparent but with 15 px width :

.edge-border {
    stroke: transparent;
    stroke-width: 15px;
}

now you can select the edge much easier:

(To be honest, the idea with a second transparent but wider path element came from ChatGPT)

What do you think about this solution? Has anyone else the problem that edges are hard to be selected?

[martin-fleck-at]

Hi Ralph,

Good news! The feature you mentioned has already been implemented as part of the GEdge. We're grateful for your input — it's suggestions like yours that help us grow and improve. Could you please take a moment to double-check whether the existing implementation covers your use case as well? You can see how it is used in the Java Server when the edge is created. Any insight or feedback you might have is greatly appreciated.

[rsoika]

Ok - I was not aware of this new feature. Of course your solution works much more precisely (by adding the class mouse-handle).
I adapted the feature into our own custom Renderer now. The Result is brilliant! Thanks a lot.