Disable userhandles for connector only

[Khadeeja Basharat]

Is there a proper way just to disable user handles for connectors only? Like constraints?

[Balasubramanian Manikandan]

You can use selectionChange event and selectorConstraints to remove the userhandle from the specific element (Node/Connector). Refer to the below mentioned code snippet, documentation and sample.

Code Example:

 

  public selectionChange(args: ISelectionChangeEventArgs): void {

    if (args.newValue.length > 0 && args.newValue[0] instanceof Node) {

      this.diagram.selectedItems = {

        constraints: SelectorConstraints.All | SelectorConstraints.UserHandle,

        userHandles: this.handles,

      };

    } else if (args.newValue[0] instanceof Connector) {

      this.diagram.selectedItems = {

        constraints: SelectorConstraints.All & ~SelectorConstraints.UserHandle,

      };

    }

  }

Documentation:

https://ej2.syncfusion.com/angular/documentation/diagram/constraints#selector-constraints

Sample:

https://stackblitz.com/edit/angular-ruv7j2-f93xvk?file=app.component.ts,app.component.html

[Khadeeja Basharat]

Thank you. This is a good workaround for now. But When I click on node and switch to the connector, I can see a glitch. The glitch is that the user handles the show for a few milliseconds and disappears. 

Wouldn't it be better if it was managed in the constraints for connector and nodes separately? 

[Gobinath Dhamotharan]

We recreated the sample to achieve your requirement. We have the disableConnectors or disableNodes property to make the user Handle in the diagram visible or not. Please refer to the below sample for your reference.

Code Snippet

  public handles: UserHandleModel[] = [

    {

      name: 'clone',

      pathData:

        'M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5, 28.9h-30c-3, 0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z',

      visible: true,

      offset: 0,

      side: 'Bottom',

      margin: { top: 0, bottom: 0, left: 0, right: 0 },

      disableConnectors: true,

    },

  ];

Sample

https://stackblitz.com/edit/angular-ruv7j2-yffnze?file=app.component.ts

Regards,

Gobinath

[Khadeeja Basharat]

Thank you so much. This is the perfect solution.