Skip to content

Commit

Permalink
Feature(402675):sidebar show
Browse files Browse the repository at this point in the history
  • Loading branch information
@GowthamKumarMVS
GowthamKumarMVS committed Jan 2, 2025
1 parent 8c5978e commit 4af0ef1
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 59 deletions.
9 changes: 6 additions & 3 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,7 +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>
<ejs-contextmenu #contextmenu id='contextmenu' [items]= 'listdata' showItemOnClick="true"
(beforeClose)="onCloseContextMenu($event)" (select)="itemSelect($event)"></ejs-contextmenu>

<div>
<ejs-diagram class="diagram-container" #diagram
Expand Down Expand Up @@ -148,11 +149,13 @@
<div class="button-item">
<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}}">
<!-- <div class="dropDown-container{{$index}}">
<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>
</div>
</div>-->
<button #addbtn ejs-button id="addbtn{{$index}}" iconCss='e-icons e-plus' cssClass='e-caret-hide'
(click)="onClickAddBtn(option, $index)"></button>
}
</div>
}
Expand Down
71 changes: 22 additions & 49 deletions src/app/components/workflow-diagram/workflow-diagram.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { BeforeOpenCloseMenuEventArgs, DropDownButtonComponent, DropDownButtonMo
import { CommonModule } from '@angular/common';
import { ListViewComponent, ListViewModule, SelectEventArgs } from '@syncfusion/ej2-angular-lists';
import { LIST_DATA } from '../../data/list-data';
import { ClickEventArgs, ContextMenuComponent, ContextMenuModule, MenuComponent, MenuItemModel, MenuModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { ClickEventArgs, ContextMenuComponent, ContextMenuModule, MenuComponent, MenuEventArgs, 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 Down Expand Up @@ -243,14 +243,9 @@ export class WorkflowDiagramComponent implements AfterViewInit {
}

// Method to add a new node and connect it
// public onDiagramRefresh(): void {
// this.diagram.setProperties({ nodes: [], connectors: [] }, true);
// this.diagram.refresh();
// }

public onDiagramRefresh(): void {
this.diagram.setProperties({ nodes: [], connectors: [] }, true);
this.diagram.refresh();
this.diagram.refresh();
}

// on node delete
Expand All @@ -268,6 +263,15 @@ export class WorkflowDiagramComponent implements AfterViewInit {
});
}

public onClickAddBtn(option : any, index : string){
console.log(option + " \n" + index)
var addbtn=document.getElementById('addbtn');
var addPos = addbtn.getBoundingClientRect();
this.contextmenu.open(addPos.top + window.scrollY, addPos.left+window.scrollX);
this.diagram.selectedItems.userHandles[1].visible = false;
this.diagram.selectedItems.userHandles[2].visible = false;
}

public onUserHandleMouseDown(event: UserHandleEventsArgs) {
if(event.element.name === 'addBlock') {
if(this.diagram.selectedItems.userHandles){
Expand Down Expand Up @@ -298,55 +302,24 @@ export class WorkflowDiagramComponent implements AfterViewInit {
}
}

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) {
this.diagram.selectedItems.userHandles[1].visible = false;
this.diagram.selectedItems.userHandles[2].visible = false;
}
}
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';
public onCloseContextMenu(args: BeforeOpenCloseMenuEventArgs) {
if(!this.isParentListItem && !((args.event.target as HTMLElement).closest(".e-menu-item")==null)) {
this.sidebarComponent?.sidebar?.show();
}
}

public onBeforeCloseDropDownButton(args: BeforeOpenCloseMenuEventArgs) {
args.cancel = this.isParentListItem;
if (!(this.isParentListItem || ((args.event.target as HTMLElement).closest(".bc-block-option.e-listview")==null))) {
this.sidebarComponent?.sidebar?.show();
}
}

public onSelectListView(args: SelectEventArgs) {
this.isParentListItem = args.item.classList.contains("e-has-child");
const selectedItem = args.item;
const selectedItemId = selectedItem.getAttribute('data-uid');
const selectedItemText = args.item ? args.item.textContent : null;
if (selectedItemId && /^0[1-3]$/.test(selectedItemId)) { // Check if the ID is '01', '02', or '03'
public itemSelect(args: MenuEventArgs): void {
this.isParentListItem = args.item.items.length != 0;
if (args.item.id && /^0[1-3]$/.test(args.item.id)) { // Check if the ID is '01', '02', or '03'
const selectedItemText = args.item ? args.item.text : null;
this.sidebarHeader = selectedItemText ? selectedItemText.trim() + ' Block' : '';
}
if(!this.isParentListItem && typeof args?.data === 'object' && 'editerTypeId' in args.data) {
this.nodeBlockType = (args.data as { blockid: number })['blockid'];
this.nodeEditType = (args.data as { editerTypeId: number })['editerTypeId'];
if(args.item.items.length == 0){
this.nodeBlockType = (args.item as { blockid: number })['blockid'];
this.nodeEditType = (args.item as { editerTypeId: number })['editerTypeId'];
}
}

public onBeforeOpenDropDownButton() {
this.isParentListItem = false; // The value is reset here, to handle document click case of dropdown
// Reset ListView to its initial state before opening
if (this.listView) {
while ((this.listView as any).curDSLevel.length > 0) {
this.listView.back();
}
}
}


public onClicked(args: ClickEventArgs) {
if (args.item.id === 'save') {
this.download(this.diagram.saveDiagram());
Expand Down
14 changes: 7 additions & 7 deletions src/app/data/list-data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
'text': 'Action',
'id': '01',
'category': 'Block Type',
'child': [
'items': [
{
'text': 'Customer Block',
'id': '1',
Expand All @@ -22,7 +22,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
'text': 'Button Input',
'id': '3',
'category': 'Action',
'child': [{
'items': [{
'text': 'Buttons',
'id': '3001',
'blockid': 4,
Expand All @@ -41,7 +41,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
'text': 'Input',
'id': '4',
'category': 'Action',
'child': [{
'items': [{
'text': 'Date',
'id': '4001',
'blockid': 5,
Expand Down Expand Up @@ -95,7 +95,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
'text': 'DropDowns',
'id': '5',
'category': 'Action',
'child': [{
'items': [{
'text': 'DropDown',
'id': '5001',
'blockid': 4,
Expand Down Expand Up @@ -143,7 +143,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
'text': 'Branching',
'id': '02',
'category': 'Block Type',
'child': [{
'items': [{
'text': 'QB',
'id': '10',
'category': 'Branching',
Expand All @@ -152,7 +152,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
'text': 'Selection',
'id': '11',
'category': 'Branching',
'child': [{
'items': [{
'text': 'ButtonsBranch',
'id': '11001',
'blockid': 10,
Expand Down Expand Up @@ -187,7 +187,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
'text': 'Exit',
'id': '03',
'category': 'Block Type',
'child': [{
'items': [{
'text': 'Call Workflow',
'id': '3001',
'category': 'Exit',
Expand Down

0 comments on commit 4af0ef1

Please sign in to comment.