How to define fixedUserhandles the way we define userHandles in angular ts file for edit or delete ?

[jayesh Mali]

I am able to create edit and delete user handles but the same i just wants to appear  without need to click.

I am  unable to find the example for this use case. 

[Gowtham Gunashekar]

Hi Jayesh, 

 

We have options to render the fixed user handle and we have added a sample link to demonstrate how to render the fixed user handle for specific nodes and when click on the handle copy and paste functionality also added. 

 

Code snippet: 

                                 <e-nodes> 

          <e-node 

            id="NewIdea" 

            [width]="150" 

            [height]="60" 

            [offsetX]="300" 

            [offsetY]="60" 

            [shape]="terminator" 

            [fixedUserHandles]="handles" 

          > 

            <e-node-annotations> 

              <e-node-annotation content="New idea identified"> 

              </e-node-annotation> 

            </e-node-annotations> 

          </e-node> 

  </e-nodes> 

 

  public handles: UserHandleModel[] = [ 

    { 

      id: "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", 

      offset: { x: 0, y: 1.5 }, 

      visibility: true, 

      iconStrokeColor: "black", 

      margin: { right: 20 }, 

      width: 20, 

      handleStrokeColor: "orange", 

      height: 20 

    } 

  ]; 

 

 

Sample link: https://stackblitz.com/edit/angular-youhuv-2pacao?file=app.component.html 

Documentation link: https://ej2.syncfusion.com/angular/documentation/diagram/user-handle/#fixed-user-handles 

 

Regards 

Gowtham