Skip to content

Commit

Permalink
Feature(402675):context menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@GowthamKumarMVS
GowthamKumarMVS committed Dec 31, 2024
1 parent 82a8108 commit 8c5978e
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 26 deletions.
2 changes: 1 addition & 1 deletion src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ import { WorkflowDiagramComponent } from './components/workflow-diagram/workflow
})

export class AppComponent {
public workflowID: number = 7;
public workflowID: number = 8;
}
16 changes: 10 additions & 6 deletions src/app/components/workflow-diagram/workflow-diagram.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
<input #fileInput type="file" accept=".json" style="display: none" (change)="onFileSelected($event)"/>
</div>
</div>
<ejs-contextmenu #contextmenu id='contextmenu' [items]= 'menuItems'></ejs-contextmenu>

<div>
<ejs-diagram class="diagram-container" #diagram
id="diagram" [width]="'100%'" [height]="649" [nodes]="nodes"
Expand All @@ -24,9 +26,10 @@
<ng-template #userHandleTemplate let-data>
<div class="dropDown-container">
@if (data.name === 'addBlock') {
<button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton target="#listview"
(open)="onOpenDropDownButton($event)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
(beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
<!-- <button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton target="#listview"
(open)="onOpenDropDownButton($event, null, null)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
(beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button> -->
<button #addbtn ejs-button id="addbtn" iconCss='e-icons e-plus' cssClass='e-caret-hide'></button>
}
@else if (data.name === 'editBlock'){
<button #editbtn ejs-button id="editbtn" iconCss='e-icons e-edit' cssClass='e-caret-hide'></button>
Expand All @@ -38,6 +41,7 @@
</ng-template>

<ng-template #nodeTemplate let-data>
<div class="workflowNode">
@if(data.data.chatWorkflowBlockId !== chatWorkflowBlockTypeEnum.SendTextMessage && data.data.chatWorkflowBlockId !== chatWorkflowBlockTypeEnum.GetCustomerDetails) {
<div><label style="padding: 5px;">{{ data.data.fieldDetails.description }}</label></div>
}
Expand Down Expand Up @@ -145,7 +149,6 @@
<button ejs-button cssClass="e-primary" style="width: 75%;">{{$index+1}}.{{option.label}}</button>
@if(checkBranchAdd(data.data.branchDetails, option.value)){
<div class="dropDown-container{{$index}}">
<button (click)="onClick">Click</button>
<button #dropdownbutton id="dropdownbutton-{{$index}}" ejs-dropdownbutton target="#listview"
(open)="onOpenDropDownButton($event, option, $index)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
(beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
Expand All @@ -171,11 +174,12 @@
}
}
}
</div>
</ng-template>
</ejs-diagram>

<ejs-listview #listview id='listview' [dataSource]='listdata' cssClass='bc-block-option' [fields]='fields' [showHeader]='true'
[headerTitle]='headertitle' [animation]='animation' (select)="onSelectListView($event)"></ejs-listview>
<!-- <ejs-listview #listview id='listview' [dataSource]='listdata' cssClass='bc-block-option' [fields]='fields' [showHeader]='true'
[headerTitle]='headertitle' [animation]='animation' (select)="onSelectListView($event)"></ejs-listview> -->
</div>

</div>
Expand Down
56 changes: 43 additions & 13 deletions src/app/components/workflow-diagram/workflow-diagram.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, view
import { ComplexHierarchicalTree, ConnectionPointOrigin, ConnectorConstraints, ConnectorModel, DecoratorModel, Diagram, DiagramComponent, DiagramModule,
HierarchicalTree, HierarchicalTreeService, HtmlModel, IClickEventArgs, IExportOptions, LayoutModel, LineDistribution, Node, NodeModel, PrintAndExport,
SelectorConstraints, SelectorModel, SnapSettingsModel, TextModel, UserHandleEventsArgs, UserHandleModel, DataSourceModel,
DataBindingService} from '@syncfusion/ej2-angular-diagrams';
import { ChatWorkflowRulesData, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails } from '../../models/appModel';
DataBindingService, SnapConstraints} from '@syncfusion/ej2-angular-diagrams';
import { BranchDetail, ChatWorkflowRulesData, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails } from '../../models/appModel';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { BeforeOpenCloseMenuEventArgs, DropDownButtonComponent, DropDownButtonModule, ItemModel, OpenCloseMenuEventArgs } from '@syncfusion/ej2-angular-splitbuttons';
import { CommonModule } from '@angular/common';
import { ListViewComponent, ListViewModule, SelectEventArgs } from '@syncfusion/ej2-angular-lists';
import { LIST_DATA } from '../../data/list-data';
import { ClickEventArgs, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { ClickEventArgs, ContextMenuComponent, ContextMenuModule, MenuComponent, MenuItemModel, MenuModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
import { NumericTextBoxModule, TextAreaModule, TextBoxModule, UploaderModule } from '@syncfusion/ej2-angular-inputs';
import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';
Expand All @@ -28,7 +28,7 @@ Diagram.Inject(HierarchicalTree, LineDistribution, PrintAndExport);
selector: 'app-workflow-diagram',
standalone: true,
providers: [HierarchicalTreeService, DataBindingService, WorkflowService],
imports: [DiagramModule, DialogModule, DropDownButtonModule, ButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, SwitchModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent],
imports: [DiagramModule,ContextMenuModule , MenuModule, DialogModule, DropDownButtonModule, ButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, SwitchModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent],
templateUrl: './workflow-diagram.component.html',
styleUrl: './workflow-diagram.component.scss'
})
Expand All @@ -38,6 +38,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
@ViewChild('listview') listView!: ListViewComponent;
@ViewChild('workflowSidebar') sidebarComponent!: WorkflowSidebarComponent;
@ViewChild('fileInput', { static: false }) fileInput!: ElementRef;
@ViewChild('contextmenu') contextmenu!: ContextMenuComponent;

@Input() workflowID!: number | null;

Expand Down Expand Up @@ -76,6 +77,30 @@ export class WorkflowDiagramComponent implements AfterViewInit {
},
];

public menuItems: MenuItemModel[] = [
{
text: 'View',
items: [
{
text: 'Toolbars',
items: [
{ text: 'Menu Bar' },
{ text: 'Bookmarks Toolbar' },
{ text: 'Customize' },
]
},
{
text: 'Zoom',
items: [
{ text: 'Zoom In' },
{ text: 'Zoom Out' },
{ text: 'Reset' },
]
},
{ text: 'Full Screen' }
]
}
];
public listdata: { [key: string]: any }[] = LIST_DATA;
public fields: {[key: string]: string} ={ tooltip: 'text'};
public headertitle = 'Block';
Expand Down Expand Up @@ -186,7 +211,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
this.clickedNodeRuleId = (clickedBlock.data as ChatWorkflowRulesData).id;
this.selectedWorkFlowId = this.workflowID;
const index = this.diagram.nodes.findIndex(node => node.id === this.selectedBlockId);
let isBranchNode = (this.diagram.nodes[index].data as RuleData2).chatWorkflowBlockId == 10;
let isBranchNode = (this.diagram.nodes[index].data as ChatWorkflowRulesData).chatWorkflowBlockId == 10;
if(isLastNode && this.diagram.selectedItems.userHandles) {
if(!isBranchNode){
this.diagram.selectedItems.userHandles[0].visible = true;
Expand Down Expand Up @@ -250,7 +275,9 @@ export class WorkflowDiagramComponent implements AfterViewInit {
this.diagram.selectedItems.userHandles[1].visible = false;
this.diagram.selectedItems.userHandles[2].visible = false;
}
this.dropdownbutton.toggle();
var addbtn=document.getElementById('addbtn');
var addPos = addbtn.getBoundingClientRect();
this.contextmenu.open(addPos.top + window.scrollY, addPos.left+window.scrollX);
}
else if(event.element.name === 'editBlock'){
if(this.diagram.selectedItems.userHandles){
Expand All @@ -271,19 +298,22 @@ export class WorkflowDiagramComponent implements AfterViewInit {
}
}

public onOpenDropDownButton(args: OpenCloseMenuEventArgs, option: any | null, index: number | null) : void {
if(index!=null){
public onOpenDropDownButton(args: OpenCloseMenuEventArgs, option: any | null, index: number | null) {
console.log("Drop :" + args.element);
if (index != null) {
this.dropdownbutton.toggle();
if(this.diagram.selectedItems.userHandles){
if (this.diagram.selectedItems.userHandles) {
this.diagram.selectedItems.userHandles[1].visible = false;
this.diagram.selectedItems.userHandles[2].visible = false;
}
}
let dropDownContainer = document.querySelector('.dropDown-container') as HTMLElement;
args.element.parentElement!.style.top = dropDownContainer.getBoundingClientRect().top + dropDownContainer.offsetHeight +'px';
else {
let dropDownContainer = document.querySelector('.dropDown-container') as HTMLElement;
args.element.parentElement!.style.top = dropDownContainer.getBoundingClientRect().top + dropDownContainer.offsetHeight + 'px';

let ulElement = document.querySelector('ul') as HTMLElement;
args.element.parentElement!.style.left = dropDownContainer.getBoundingClientRect().left - (ulElement.getBoundingClientRect().width / 2)+ (dropDownContainer.getBoundingClientRect().width / 2)+'px' ;
let ulElement = document.querySelector('ul') as HTMLElement;
args.element.parentElement!.style.left = dropDownContainer.getBoundingClientRect().left - (ulElement.getBoundingClientRect().width / 2) + (dropDownContainer.getBoundingClientRect().width / 2) + 'px';
}
}

public onBeforeCloseDropDownButton(args: BeforeOpenCloseMenuEventArgs) {
Expand Down
15 changes: 9 additions & 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 @@ -116,9 +116,11 @@
</div>
}
@case(chatWorkflowEditorTypeEnum.DateTime){
<div>
<div *ngTemplateOutlet="sideBarPlaceholderTemplate"></div>
<label> From: <ejs-datetimepicker [(ngModel)]="fromDate" name="fromdatetimepicker"></ejs-datetimepicker></label>
<label> To: <ejs-datetimepicker [(ngModel)]="toDate" name="todatetimepicker"></ejs-datetimepicker></label>
</div>
}
@case(chatWorkflowEditorTypeEnum.Number){
<div>
Expand Down Expand Up @@ -166,6 +168,13 @@
</div>
</div>
}
@case(chatWorkflowBlockTypeEnum.GetCustomerDetails){
<div>
<ejs-checkbox label="Get Customer Email" [(ngModel)]="getEmailInfo" name="getEmailInfo" [checked]="true" [disabled] = "true"></ejs-checkbox>
<ejs-checkbox label="Get Customer Name" [(ngModel)]="getNameInfo" name="getNameInfo"></ejs-checkbox>
<ejs-checkbox label="Get Customer Phone Number" [(ngModel)]="getPhoneNumberInfo" name="getPhoneNumberInfo"></ejs-checkbox>
</div>
}
@case(chatWorkflowBlockTypeEnum.BranchOnPickerInput){
@switch(nodeEditType){
@case(chatWorkflowEditorTypeEnum.ButtonsBranch){
Expand All @@ -191,12 +200,6 @@
</div>
}
}
@case(chatWorkflowBlockTypeEnum.GetCustomerDetails){
<div>
<ejs-checkbox label="Get Customer Email" [(ngModel)]="getEmailInfo" name="getEmailInfo" [checked]="true" [disabled] = "true"></ejs-checkbox>
<ejs-checkbox label="Get Customer Name" [(ngModel)]="getNameInfo" name="getNameInfo"></ejs-checkbox>
<ejs-checkbox label="Get Customer Phone Number" [(ngModel)]="getPhoneNumberInfo" name="getPhoneNumberInfo"></ejs-checkbox>
</div>
}
}
</form>
Expand Down

0 comments on commit 8c5978e

Please sign in to comment.