We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Node with handlers, creates ghosting effect when trying to drop

Thread ID:





144538 May 10,2019 11:55 AM UTC May 13,2019 08:44 AM UTC Angular - EJ 2 1
Tags: Diagram
Laurens Albers
Asked On May 10, 2019 11:55 AM UTC


There is this weird bug, which appears when i'm dragging a node from the pallette to the diagram with handlers. This creates a ghosting effect of the handlers until it is dropped. After that it's fine. Any idea what might be causing this? I have added a gif in the zip to give you guys a visual of what i mean.



Below are some pieces of the component.

 getTool(action: string): ToolBase {
    let tool: ToolBase;
    let last: NodeModel;
    if (action === "linkHandle") {
      const linkTool = new MyLinkTool(this.diagram.commandHandler, null, null);
      linkTool.diagram = this.diagram;
      return linkTool;
    if (action === "clone") {
      let cloneTool = new CloneTool(this.diagram.commandHandler);
      cloneTool.diagram = this.diagram;
      return cloneTool;

class MyLinkTool extends ConnectorDrawingTool {
  diagram: DiagramComponent = null;
  mouseDown(args: MouseEventArgs): void {
    var connector: ConnectorModel = {
      type: "Straight",
      sourceID: this.diagram.selectedItems.nodes[0].id
    this.diagram.drawingObject = connector;
    this.inAction = true;

class CloneTool extends MoveTool {
  diagram: Diagram = null;
  mouseDown(args: MouseEventArgs): void {
    let newObject: NodeModel;
    for (let node of this.diagram.selectedItems.nodes) {
      newObject = cloneObject(node) as NodeModel;
      newObject.id = newObject.id.slice(0, -5);
      args.source = this.diagram.nodes[this.diagram.nodes.length - 1] as IElement;
      args.sourceWrapper = args.source.wrapper;
      this.inAction = true;

  <div id="palette-space" style="width:20%; height: 100%; float:left">
      <ejs-symbolpalette #symbolpalette id="symbolpalette" [enableAnimation]='enableAnimation' [palettes]="palettes" [symbolMargin]="symbolMargin" [expandMode]="expandMode"
                         [getSymbolInfo]="getSymbolInfo" (created)="create($event)">
    <div id="diagram-space" style="width:80%;height:100%; border-top-width: 0.5px;border-top-color: #e0e0e0;border-top-style: solid; float:left">
      <div class="content-wrapper">
        <ejs-diagram #diagram id="diagram" width="100%"

    "@syncfusion/ej2-angular-diagrams": "~17.1.38",

Angular 7+, TypeScript 3+

Attachment: issue_ghosting_8a31723e.zip

Ramya Thirugnanam [Syncfusion]
Replied On May 13, 2019 08:44 AM UTC

Hi Laurens,  
Thanks for contacting Syncfusion support. 
We have logged “Userhandles drawn multiple times while dragging a node from palette and drop it onto the diagram” as a defect. The fix for this issue is estimated to be available in our upcoming patch release on May 29th  2019.  
You can now track the status of your request by using the below feedback link. 
As a workaround, we have created a sample in which we have hidden user handles on dragEvent and show on selectionChange event.  
Ramya T 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon