Skip to content

Commit

Permalink
Merge pull request #16 from SyncfusionExamples/402686-DeleteBlock
Browse files Browse the repository at this point in the history 
Feature(402686):Support to delete the existing node an rearrange the flow
  • Loading branch information
@NavinVinayagam
NavinVinayagam authored Dec 19, 2024
2 parents 1a64084 + abd2d9a commit 151a4ee
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 22 deletions.
5 changes: 4 additions & 1 deletion src/app/components/workflow-diagram/workflow-diagram.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,12 @@
(open)="onOpenDropDownButton($event)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
(beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
}
@else{
@else if (data.name === 'editBlock'){
<button #editbtn ejs-button id="editbtn" iconCss='e-icons e-edit' cssClass='e-caret-hide'></button>
}
@else{
<button #deletebtn ejs-button id="deletebtn" iconCss='e-icons e-trash' cssClass='e-caret-hide'></button>
}
</div>
</ng-template>

Expand Down
36 changes: 30 additions & 6 deletions src/app/components/workflow-diagram/workflow-diagram.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,15 @@ export class WorkflowDiagramComponent implements AfterViewInit{
side: 'Right',
margin: { top: 0, bottom: 0, left: 0, right: 0 },
backgroundColor: 'skyblue',
}
},
{
name: 'deleteBlock',
visible: false,
offset: 0.4,
side: 'Right',
margin: { top: 0, bottom: 0, left: 45, right: 0 },
backgroundColor: 'skyblue',
},
];

public listdata: { [key: string]: any }[] = LIST_DATA;
Expand Down Expand Up @@ -204,10 +212,12 @@ export class WorkflowDiagramComponent implements AfterViewInit{
if(isLastNode && this.diagram.selectedItems.userHandles) {
this.diagram.selectedItems.userHandles[0].visible = true;
this.diagram.selectedItems.userHandles[1].visible = true;
this.diagram.selectedItems.userHandles[2].visible = true;
}
else if(this.diagram.selectedItems.userHandles){
this.diagram.selectedItems.userHandles[0].visible = false;
this.diagram.selectedItems.userHandles[1].visible = true;
this.diagram.selectedItems.userHandles[2].visible = false;
}
this.selectedBlockId = clickedBlock.id;
}
Expand All @@ -221,7 +231,8 @@ export class WorkflowDiagramComponent implements AfterViewInit{
public onaddNodeAndConnect([sourceNodeId, newNode]: [string, NodeModel]): void {
// Add the new node to the diagram
this.diagram.addNode(newNode);
// this.nodes.push(newNode);
const index = this.diagram.nodes.findIndex(node => node.id === sourceNodeId);
(this.diagram.nodes[index].addInfo as RuleData2).successRuleId = (newNode.addInfo as RuleData2).id;
// Create a new connector to link the new node to the source node
const newConnectorId = `connector${++this.connectorIdCounter}`;
const newConnector: ConnectorModel = {
Expand All @@ -237,8 +248,8 @@ export class WorkflowDiagramComponent implements AfterViewInit{
}

public onUpdateNode([sourceNodeId, newNode]: [string, RuleData2]) : void {
const index = this.nodes.findIndex(node => node.id === sourceNodeId);
newNode.id = (this.nodes[index].addInfo as RuleData2).id;
const index = this.diagram.nodes.findIndex(node => node.id === sourceNodeId);
newNode.id = (this.diagram.nodes[index].addInfo as RuleData2).id;
this.diagram.nodes[index].addInfo = newNode;
this.diagram.refresh();
this.diagram.fitToPage();
Expand All @@ -249,17 +260,30 @@ export class WorkflowDiagramComponent implements AfterViewInit{
if(this.diagram.selectedItems.userHandles){
this.diagram.selectedItems.userHandles[0].visible = false;
this.diagram.selectedItems.userHandles[1].visible = false;
this.diagram.selectedItems.userHandles[2].visible = false;
}
this.dropdownbutton.toggle();
}
else if(event.element.name === 'editBlock'){
if(this.diagram.selectedItems.userHandles){
this.diagram.selectedItems.userHandles[1].visible = false;
this.diagram.selectedItems.userHandles[2].visible = false;
}
let Obje = this.diagram.getNodeObject(this.selectedBlockId);
this.sidebarComponent?.setBlockValues(Obje);
let nodeObject = this.diagram.getNodeObject(this.selectedBlockId);
this.sidebarComponent?.setBlockValues(nodeObject);
this.sidebarComponent?.sidebar?.show();
}
else if(event.element.name === 'deleteBlock'){
if(this.diagram.selectedItems.userHandles){
this.diagram.selectedItems.userHandles[1].visible = false;
this.diagram.selectedItems.userHandles[2].visible = false;
}
let nodeObject = this.diagram.getNodeObject(this.selectedBlockId);
let id = (nodeObject.addInfo as RuleData2).id;
const index = this.diagram.nodes.findIndex(node => (node.addInfo as RuleData2).successRuleId === id);
(this.diagram.nodes[index].addInfo as RuleData2).successRuleId = null;
this.diagram.remove(nodeObject);
}
}

public onOpenDropDownButton(args: OpenCloseMenuEventArgs) {
Expand Down
7 changes: 1 addition & 6 deletions src/app/components/workflow-sidebar/workflow-sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,7 @@
<input #optionDescription type="text" placeholder="Option Description" class="button-input" [style.display]="isVisible ? 'block' : 'none'"/>
</div>
<div>
@if(editIndex==-1){
<button ejs-button type="button" iconCss='e-icons e-check' (click)="addAndSaveOption(optionLabel.value, optionValue.value, isVisible ? optionDescription.value : null, optionLabel, optionValue, isVisible ? optionDescription : null)"></button>
}
@else{
<button ejs-button type="button" iconCss='e-icons e-check' (click)="editAndSaveOption(optionLabel.value, optionValue.value, isVisible ? optionDescription.value : null, optionLabel, optionValue, isVisible ? optionDescription : null)"></button>
}
<button ejs-button type="button" iconCss='e-icons e-check' (click)="addOrUpdateSaveOption(optionLabel.value, optionValue.value, isVisible ? optionDescription.value : null, optionLabel, optionValue, isVisible ? optionDescription : null)"></button>
<button ejs-button type="button" iconCss='e-icons e-close' (click)="cancelOption(optionLabel, optionValue, isVisible ? optionDescription : null)"></button>
</div>
</ng-template>
Expand Down
16 changes: 7 additions & 9 deletions src/app/components/workflow-sidebar/workflow-sidebar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,19 +98,17 @@ export class WorkflowSidebarComponent {
}
}
// Add and Save option
addAndSaveOption(label: string, value: string, description: string | null, labelInput: HTMLInputElement, valueInput: HTMLInputElement, descriptionInput: HTMLInputElement | null): void {
if (label.trim() && value.trim()) {
addOrUpdateSaveOption(label: string, value: string, description: string | null, labelInput: HTMLInputElement, valueInput: HTMLInputElement, descriptionInput: HTMLInputElement | null): void {
const option = { label: label.trim(), value: value.trim(), description };
if(this.isEdit){
this.options[this.editIndex] = option;
}
else {
this.options.push({ label, value, description });
this.cancelOption(labelInput, valueInput, descriptionInput);
}
}
// Edit and Save option
editAndSaveOption(label: string, value: string, description: string | null, labelInput: HTMLInputElement, valueInput: HTMLInputElement, descriptionInput: HTMLInputElement | null) {
this.options[this.editIndex].label = label.trim();
this.options[this.editIndex].value = value.trim();
this.options[this.editIndex].description = description;
this.cancelOption(labelInput, valueInput, descriptionInput);
}

// edit option value loading
editOption(index: number): void {
this.isEditButton = true;
Expand Down

0 comments on commit 151a4ee

Please sign in to comment.