toggle fixeduserhandle visibility

[Jean Caiza]

Hello Team,

is there a way to toggle visibility of fixedUserHandle of node/connector?

greetings

[Moulidharan Gopalakrishnan]

Hi,
We have prepared a sample to achieve toggling visibility of the fixedUserHandle upon button click. You can toggle between the fixedUserHandles visibility by adjusting the Boolean value of the visibility property.Refer Documentation to customise the fixedUserHandle style properties and kindly refer the code – snippet and sample for guidance.

Documentation: https://ej2.syncfusion.com/react/documentation/diagram/user-handle#style

Code - snippet

var visible=true;

function show() {

    if(visible)

    {

        diagramInstance.nodes[0].fixedUserHandles[0].visibility= false;

        visible=false;

    }else

    {

        diagramInstance.nodes[0].fixedUserHandles[0].visibility= true;

        visible=true;

    }

};

Sample

https://stackblitz.com/edit/react-stjpkp-3wzxgj?file=index.js
Regards,

[Jean Caiza]

Thanks!

Another question, is there a way to control the output of a connector from a node/shape?

For example, I have this diagram with the following nodes, the node on the left has other nodes. but I want to try to control the output of the connectors of the node on the left

resulting in the following image

Regards

[Moulidharan Gopalakrishnan]

Hi,

We have prepared a sample to meet your requirements. To control the outputs of the nodes (connectors) from a single point, utilize the Port feature in the diagram component. Please refer to the documentation and sample for instructions on how to use Ports in the diagram.

Documentation:

https://ej2.syncfusion.com/react/documentation/diagram/ports

Sample

Nqbvis (forked) - StackBlitz

Regards,
Moulidharan

[Jean Caiza]

doesn't work with umlDiagram or node.type="umlClassifier"

[Moulidharan Gopalakrishnan]

Hi,

Currently there is no support for port in UML shapes. This requirement is already logged as a feature request in our backlog but there are no immediate plans for implementation. Please refer to the feedback link to track the status of the feature.

FeedBack link:Provide port support for UML class diagram in React in React | Feedback Portal (syncfusion.com)

Regards,
Moulidharan