Merge pull request #12 from SyncfusionExamples/403006-Optimization

Feature(403006):Optimization of sidebar component
SyncfusionExamples · Dec 17, 2024 · 2a9fff2 · 2a9fff2
2 parents 026810f + edf57a2
commit 2a9fff2
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 440 deletions.
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -15,8 +15,8 @@
       <div> <input id="fileupload" type="file" /></div>
     </div>
   </div>
-
-  <ejs-diagram class="diagram-container" #diagram 
+  <div>
+    <ejs-diagram class="diagram-container" #diagram 
     id="diagram" [width]="'100%'" [height]="649" [nodes]="nodes"
     [connectors]="connectors" [layout]="layout" [getNodeDefaults]="getNodeDefaults"
     [getConnectorDefaults]="getConnectorDefaults" (created)="onDiagramCreated()" [selectedItems]="selectedItems"
@@ -133,9 +133,11 @@
 
   <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>
 
-<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [clickedNodeId]="clickedNodeId" (addNodeAndConnect)="onaddNodeAndConnect($event)"></app-workflow-sidebar>
+<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [selectedBlockId]="selectedBlockId" [selectedWorkFlowId]="selectedWorkFlowId" (addNodeAndConnect)="onaddNodeAndConnect($event)"></app-workflow-sidebar>
 
 <!-- <div style="display: none;">
   <ejs-uploader #defaultupload id='fileupload' (success)='onUploadSuccess($event)' [asyncSettings]='asyncSettings'></ejs-uploader>

diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, EventEmitter, Input, Output, viewChild, ViewChild } from '@angular/core';
-import { ComplexHierarchicalTree, ConnectionPointOrigin, ConnectorConstraints, ConnectorModel, DecoratorModel, Diagram,  DiagramComponent, DiagramModule, HtmlModel, IClickEventArgs, IExportOptions, LayoutModel, LineDistribution, Node, NodeModel, PrintAndExport, SelectorConstraints, SelectorModel, SnapSettingsModel, TextModel, UserHandleEventsArgs, UserHandleModel } from '@syncfusion/ej2-angular-diagrams';
+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 } from '@syncfusion/ej2-angular-diagrams';
 import { FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleData, RuleData2 } from '../../models/appModel';
 import { RULE_DATA, RULE_DATA2, RULE_DATA3 } from '../../data/rule-data';
 import { DialogModule } from '@syncfusion/ej2-angular-popups';
@@ -21,11 +21,12 @@ import { WorkflowSidebarComponent } from '../workflow-sidebar/workflow-sidebar.c
 
 
 
-Diagram.Inject(ComplexHierarchicalTree, LineDistribution, PrintAndExport);
+Diagram.Inject(HierarchicalTree, LineDistribution, PrintAndExport);
 
 @Component({
   selector: 'app-workflow-diagram',
   standalone: true,
+  providers: [HierarchicalTreeService],
   imports: [DiagramModule, DialogModule, DropDownButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, SwitchModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent],
   templateUrl: './workflow-diagram.component.html',
   styleUrl: './workflow-diagram.component.scss'
@@ -75,7 +76,8 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   public sidebarHeader!: string;
   public nodeBlockType!: number;
   public nodeEditType!: number;
-  public clickedNodeId!: string;
+  public selectedBlockId!: string;
+  public selectedWorkFlowId!: number;
 
   // // Async settings for file upload
   // public asyncSettings: AsyncSettingsModel = {
@@ -114,11 +116,18 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   }
 
   private initializeDiagramElements(): void {
+    this.selectedWorkFlowId = 1; // Get from DB
     sampleWorkflowData.forEach(item => {
+      let buttonCount = 0;
+      if(item.chatWorkflowEditorTypeId == 2){
+        buttonCount = item.fieldOptionDetails?.length || 0;
+      }
       // Create nodes based on the data
       this.nodes.push({
         id: `node${item.id}`,
-        // annotations: [{ content: `Node ${item['id']}` }],
+        // annotations: [{ content: `node${item['id']}` }],
+        width: 200,
+        height: 150 + (buttonCount * 25),
         addInfo: item
       });
 
@@ -163,7 +172,7 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   };
 
   public layout: LayoutModel = {
-    type: 'ComplexHierarchicalTree',
+    type: 'HierarchicalTree',
     connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
     horizontalSpacing: 40,
     verticalSpacing: 40,
@@ -179,8 +188,6 @@ export class WorkflowDiagramComponent implements AfterViewInit{
       strokeColor: '#0f2c60',
       strokeWidth: 5,
     };
-    obj.width = 200,
-    obj.height = 150,
     obj.borderWidth = 1,
     obj.borderColor = '#0f2c60',
     (obj.shape as HtmlModel).type = 'HTML'
@@ -201,15 +208,15 @@ export class WorkflowDiagramComponent implements AfterViewInit{
 
   public onNodeClick(args: IClickEventArgs): void {
     if (args.actualObject instanceof Node) {
-      const clickedNode = args.actualObject as Node;
-      let isLastNode = clickedNode.outEdges.length == 0;
+      const clickedBlock = args.actualObject as Node;
+      let isLastNode = clickedBlock.outEdges.length == 0;
       if(isLastNode && this.diagram.selectedItems.userHandles) {
         this.diagram.selectedItems.userHandles[0].visible = true;
       }
       else if(this.diagram.selectedItems.userHandles){
         this.diagram.selectedItems.userHandles[0].visible = false;
       }
-       this.clickedNodeId = clickedNode.id;
+       this.selectedBlockId = clickedBlock.id;
     }
   }
 
@@ -232,6 +239,7 @@ export class WorkflowDiagramComponent implements AfterViewInit{
     };
     // Add the connector to the diagram
     this.diagram.addConnector(newConnector);
+    this.diagram.doLayout();
   }
 
   public onUserHandleMouseDown(event: UserHandleEventsArgs) {
@@ -241,6 +249,9 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   }
 
   public onOpenDropDownButton(args: OpenCloseMenuEventArgs) {
+    if(this.diagram.selectedItems.userHandles){
+      this.diagram.selectedItems.userHandles[0].visible = false;
+    }
     let dropDownContainer = document.querySelector('.dropDown-container') as HTMLElement;
     args.element.parentElement!.style.top = dropDownContainer.getBoundingClientRect().top + dropDownContainer.offsetHeight +'px';