Selection Rectangle

I have 2 somewhat related issues. I have a diagram node with a fixeduserhandle. When a user clicks on the userhandle (the plus icon) it is meant to show more nodes (which are currently hidden).

It would seem the first click selects the node. The second click will fire the event.

Is it possible that we can make the first click on the userhandle fire the fixedUserHandleClick event? It is somewhat confusing to click on the handle and have nothing happen.

 

My related question is, is it possible to not show the selection rectangle at all (or make it transparent)? In my case the rectangle extends down around my hidden nodes....I'd rather not show the selection rectangle at all.

Many thanks!


3 Replies

SJ Sivaranjith Jeyabalan Syncfusion Team August 19, 2022 01:38 PM UTC

Hi Kabe,


We suspect that you are using group node. In that case, when you click the user handle of child node, the group will get selected on first click and in the second click, the fixedUserHandleClick event will be triggered. it is the default behavior. If you want to hide the selection of group node, remove the select constraints  from default NodeConstraints. Please find the code example below.


Code example:

constraints:NodeConstraints.Default &~ NodeConstraints.Select

 


Regards,

Sivaranjith



KA Kabe August 29, 2022 03:23 PM UTC

Thanks for this info and you are right about the group/click event part.

Regarding the selection rectangle, I would like to still allow the nodes to be moved (by dragging for example), I was just hoping to hide the select rectangle. Is this possible?


Thanks!



SJ Sivaranjith Jeyabalan Syncfusion Team August 30, 2022 02:54 PM UTC

Hi Kabe,

During initial rendering you can set node constraints like below. When we remove select from node constraints, the select and drag of node is restricted.

Constraints = NodeConstraints.Default &~ NodeConstraints.Select


When we click fixedUserHandle, you should set node constraints as default to perform interaction in the group node such as select and drag.

function fixedUserHandleClick(args:any){

    diagram.nodes[1].visible = true;

    diagram.nodes[2].constraints = NodeConstraints.Default;

    diagram.dataBind();

}


Regards,

Sivaranjith



Loader.
Up arrow icon