Skip to content

Instantly share code, notes, and snippets.

Avatar

Priyesha Yadav Priyesha

  • Indore
View GitHub Profile
@Priyesha
Priyesha / app.component.html
Created Apr 15, 2020
Basic view of application
View app.component.html
<div class="container">
<div class="panel-one">
<app-node [nodes]="nodes"></app-node>
</div>
<div class="vl"></div>
<div class="panel-two"></div>
</div>
View node.service.ts
public addDynamicNode(node: any) {
const factory = this.factoryResolver.resolveComponentFactory(DynamicNodeComponent);
const component = factory.create(this.rootViewContainer.parentInjector);
(<any>component.instance).node = node;
(<any>component.instance).jsPlumbInstance = this.jsPlumbInstance;
this.rootViewContainer.insert(component.hostView);
}
View dynamic-node.component.ts
ngAfterViewInit() {
this.sourceEndPoint = this.jsPlumbInstance.addEndpoint(this.node.id,
{ anchor: 'Right', uuid: this.node.id + 'right' }, this.source);
if (this.node.type !== 'start') {
this.destinationEndPoint = this.jsPlumbInstance.addEndpoint(this.node.id,
{ anchor: 'Left', uuid: this.node.id + 'left' }, this.destination);
}
this.jsPlumbInstance.draggable(this.node.id);
}
View dynamic-node.component.html
<div (dblclick)="editNode(node)" class="node" id="{{node.id}}" style="top: 0; left: 50%;">
{{node.name}}
<i (click)="removeNode(node)" class="material-icons close">clear</i>
</div>
View dynamic-node.component.ts
removeNode(node) {
this.jsPlumbInstance.removeAllEndpoints(node.id);
this.jsPlumbInstance.remove(node.id);
}
View node.component.ts
ngAfterViewInit() {
this.nodeService.jsPlumbInstance.bind('connection', info => {
this.simpleModalService.addModal(DialogComponent, {
title: 'Dialog',
questions: { name: '', type: ''}})
.subscribe((result) => {
const targetNode = this.nodes.find(node => node.id === info.targetId);
if (targetNode) {
targetNode.name = result.name;
targetNode.type = result.type;