Hi,
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.
greetings,
Laurens
Below are some pieces of the component.
.ts:
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;
super.mouseDown(args);
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);
this.diagram.paste([newObject]);
args.source = this.diagram.nodes[this.diagram.nodes.length - 1] as IElement;
args.sourceWrapper = args.source.wrapper;
super.mouseDown(args);
this.inAction = true;
}
}
}
.html:
<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)">
</ejs-symbolpalette>
</div>
<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%"
[height]="height"
[constraints]='constraints'
[snapSettings]="snapSettings"
[getConnectorDefaults]="getConnectorDefaults"
[scrollSettings]="scrollSettings"
[getNodeDefaults]='getNodeDefaults'
[dataSourceSettings]='data'
[getCustomTool]="getCustomTool"
[selectedItems]="selectedItems"
[contextMenuSettings]="contextMenuSettings"
(contextMenuClick)="contextClicked($event)"
(selectionChange)='selectionChange($event)'
(targetPointChange)="targetPointChange($event)"
(sourcePointChange)="sourcePointChange($event)"
(connectionChange)="connectionChange($event)"
(doubleClick)="doubleClick($event)"
(drop)="dropEvent($event)"
(positionChange)="positionChange($event)"
(collectionChange)="collectionChange($event)">
</ejs-diagram>
</div>
</div>
package.json:
"@syncfusion/ej2-angular-diagrams": "~17.1.38",
Using:
Angular 7+, TypeScript 3+
Attachment:
issue_ghosting_8a31723e.zip