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

Node with handlers, creates ghosting effect when trying to drop


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

1 Reply

RT Ramya Thirugnanam Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon