Integrated latest changes at 09-26-2024 10:31:10 PM

Author: SyncfusionBuild

ej2-angular/code-snippet/diagram/connectors/connectorsbezierthumbsize-cs1/src/app.component.ts

@@ -26,7 +26,7 @@ standalone: true,
         <e-connectors>
             <e-connector id='connector1' type='Bezier' sourceID='node1'  targetID='node2' [segments]='segments1' [constraints]='Constraints1'>
             </e-connector>
-            <e-connector id='connector2' type='Bezier' sourceID='node3'  targetID='node4' [segments]='segments2' [constraints]='Constraints2' [ segmentThumbSize] = 20 >
+            <e-connector id='connector2' type='Bezier' sourceID='node3'  targetID='node4' [segments]='segments2' [constraints]='Constraints2' [segmentThumbSize] = 20 >
             </e-connector>
         </e-connectors>
     </ejs-diagram>`,

ej2-angular/code-snippet/diagram/connectors/connectorsorthothumbsize-cs1/src/app.component.ts

@@ -26,7 +26,7 @@ standalone: true,
         <e-connectors>
             <e-connector id='connector1' type='Orthogonal' sourceID='node1'  targetID='node2' [segments]='segments1' [constraints]='Constraints1'>
             </e-connector>
-            <e-connector id='connector2' type='Orthogonal' sourceID='node3'  targetID='node4' [segments]='segments2' [constraints]='Constraints2' [ segmentThumbSize] = 20 >
+            <e-connector id='connector2' type='Orthogonal' sourceID='node3'  targetID='node4' [segments]='segments2' [constraints]='Constraints2' [segmentThumbSize] = 20 >
             </e-connector>
         </e-connectors>
     </ejs-diagram>`,

ej2-angular/code-snippet/diagram/interaction/fixeduserhandletemplate-cs1/src/app.component.ts

@@ -1,25 +1,37 @@
-import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
-import { DiagramModule } from '@syncfusion/ej2-angular-diagrams'
-
-
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import {
+  DiagramModule,
+  ShapeStyleModel,
+} from '@syncfusion/ej2-angular-diagrams';
 
 import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
-import { DiagramComponent, Diagram,MarginModel, NodeModel, ConnectorModel,ConnectorConstraints, OrthogonalSegmentModel, PointModel } from '@syncfusion/ej2-angular-diagrams';
+import {
+  DiagramComponent,
+  Diagram,
+  MarginModel,
+  NodeModel,
+  ConnectorModel,
+  ConnectorConstraints,
+  OrthogonalSegmentModel,
+  PointModel,
+} from '@syncfusion/ej2-angular-diagrams';
+
+import { NgIf, CurrencyPipe } from '@angular/common';
 
 @Component({
-    imports: [
-             DiagramModule
-        ],
-    
-    providers: [ ],
-    standalone: true,
-        selector: "app-container",
-        template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' [fixedUserHandleTemplate]='fixeduserhandleTemplate'>
+  imports: [DiagramModule,NgIf],
+
+  providers: [],
+  standalone: true,
+  selector: 'app-container',
+  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' [fixedUserHandleTemplate]='fixeduserhandleTemplate' >
+         
             <e-nodes>
                 <e-node id='node1' [offsetX]=250 [offsetY]=250>
                            <e-node-fixeduserhandles>
-                                    <e-node-fixeduserhandle  id='usercon1' [margin]='margin1' [width]=50 [height]=20 [offset]="fixedUserHandleOffset1">
+                                    <e-node-fixeduserhandle  id='usercon1' [margin]='margin1' [width]=50 [height]=20 [offset]="fixedUserHandleOffset1" >
                                     </e-node-fixeduserhandle>
                             </e-node-fixeduserhandles>
             </e-node>
@@ -28,65 +40,67 @@ import { DiagramComponent, Diagram,MarginModel, NodeModel, ConnectorModel,Connec
                 <e-connector id='connector1'  type= 'Orthogonal' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint'>
                 <e-connector-fixeduserhandles>
                         <e-connector-fixeduserhandle
-                        id =  'usercon2'  [width]=120 [height]=20 [offset]="fixedUserHandleOffset2" >
+                        id='usercon2'  [width]=120 [height]=20 [offset]="fixedUserHandleOffset2" >
                         </e-connector-fixeduserhandle>
                     </e-connector-fixeduserhandles>
                 </e-connector>
             </e-connectors>
-            <ng-template #fixedUserHandleTemplate let-id="id" let-width="width">
-      <div *ngIf="id === 'usercon1'" style="width:100%;height:100%">
-        <input id="colorPicker" (change)="onchange()" type="color" value="#008000" style="width:{{width}}"/>
-      </div>
-      <div *ngIf="id === 'usercon2'" style="width:100%;height:100%">
-        <input type="button" value="FixedUserHandleTemplate" style="width:{{width}};color:red;"/>
-      </div>
-    </ng-template>
+            <ng-template #fixeduserhandleTemplate let-data>
+                    <ng-container *ngIf="data.id == 'usercon1'" style="width: 100%; height: 100%">
+                    <input id="colorPicker" type="color" (change)="onchange($event)" value="#008000"/>
+                    </ng-container>
+                      <ng-container *ngIf="data.id == 'usercon2'" style="width:100%;height:100%">
+        <input type="button" value="FixedUserHandleTemplate" 
+    style="color:red; "/>
+    </ng-container>
+
+                </ng-template>
     
         </ejs-diagram>`,
-        encapsulation: ViewEncapsulation.None
-    })
+  encapsulation: ViewEncapsulation.None,
+})
 export class AppComponent {
-    @ViewChild("diagram")
-    public margin1?: MarginModel;
-    ngOnInit(): void {
-        this.margin1 = { right: 20 };
-    }
-    public diagram!: DiagramComponent;
-    public currentColor: any;
-    public getNodeDefaults(node: NodeModel): NodeModel {
-        node.height = 100;
-        node.width = 100;
-        ((node as NodeModel).style as ShapeStyleModel).fill = "#6BA5D7";
-        ((node as NodeModel).style as ShapeStyleModel).strokeColor = "White";
-        return node;
-    }
-    public fixedUserHandleOffset1 = {x : 0, y : 0 };
-    public sourcePoint = { x: 400, y: 200 };
-    public targetPoint = { x: 500, y: 300 };
-    public margin2 = { right : 20};
-    public fixedUserHandleOffset2 = 0.5;
-    public getConnectorDefaults(obj: ConnectorModel): void {
-        obj.style = {
-            strokeColor: '#6BA5D7',
-            fill: '#6BA5D7',
-            strokeWidth: 2
-        }
-        obj.targetDecorator = {
-            style: {
-                fill: '#6BA5D7',
-                strokeColor: '#6BA5D7'
-            }
-        }
-    }
+  @ViewChild('diagram')
+  public diagram?: DiagramComponent;
+  public margin1?: MarginModel;
+  ngOnInit(): void {
+    this.margin1 = { right: 20 };
+  }
+ 
 
-    public onchange():void {
-        this.currentColor =  (document.getElementById('colorPicker') as HTMLSelectElement).value;
-        if (this.diagram.nodes && this.diagram.nodes.length > 0) {
-            ((this.diagram.nodes[0]) as any).style.fill = this.currentColor;
-            this.diagram.dataBind(); // Ensure the diagram is updated
-        }
-    }
+  public getNodeDefaults(node: NodeModel): NodeModel {
+    node.height = 100;
+    node.width = 100;
+    ((node as NodeModel).style as ShapeStyleModel).fill = '#6BA5D7';
+    ((node as NodeModel).style as ShapeStyleModel).strokeColor = 'White';
+    return node;
+  }
+  public fixedUserHandleOffset1 = { x: 0, y: 0 };
+  public sourcePoint = { x: 400, y: 200 };
+  public targetPoint = { x: 500, y: 300 };
+  public margin2 = { right: 20 };
+  public fixedUserHandleOffset2 = 0.5;
+  public getConnectorDefaults(obj: ConnectorModel): void {
+    obj.style = {
+      strokeColor: '#6BA5D7',
+      fill: '#6BA5D7',
+      strokeWidth: 2,
+    };
+    obj.targetDecorator = {
+      style: {
+        fill: '#6BA5D7',
+        strokeColor: '#6BA5D7',
+      },
+    };
+  }
 
+  public onchange(args:any) {
+    let currentColor = (
+      document.getElementById('colorPicker') as HTMLSelectElement
+    ).value;
+  
+      (((this.diagram as Diagram).nodes[0] as any).style.fill) = currentColor;
+      (this.diagram as Diagram).dataBind(); // Ensure the diagram is updated
+    
+  }
 }
-
-

ej2-angular/code-snippet/diagram/tooltip/annotationtooltip-cs1/src/app.component.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-import { DiagramModule } from '@syncfusion/ej2-angular-diagrams'
+import { AnnotationConstraints, DiagramModule, OrthogonalSegmentModel, PointModel } from '@syncfusion/ej2-angular-diagrams'
 
 
 
@@ -17,12 +17,12 @@ standalone: true,
     selector: "app-container",
     template: `<ejs-diagram #diagram id="diagram" width="900px" height="500px" [getNodeDefaults]  ='getNodeDefaults' >
           <e-nodes>
-            <e-node id='node1' [offsetX]=250 [offsetY]=250 >
+            <e-node id='node1' [offsetX]=250 [offsetY]=150 >
             <e-node-annotations>
                     <e-node-annotation
-                    id= 'label1' content="Annotation"
-                    tooltip = "tooltip1"
-                    constraints = "constraints1"
+                    id= 'label1' content="Rectangle"
+                    [tooltip] = "tooltip1"
+                    [constraints] = "constraints1"
                     >
                     </e-node-annotation>
             </e-node-annotations>

ej2-angular/code-snippet/image-editor/default-cs3/src/app.component.ts

@@ -45,24 +45,24 @@ export class AppComponent {
     }
     rectangleClick(): void {
         let dimension: any = this.imageEditorObj?.getImageDimension();
-        this.imageEditorObj?.drawRectangle(dimension.x, dimension.y, 200, 100);
-        this.imageEditorObj?.drawRectangle(dimension.x + 300, dimension.y, 200, 100, null, '', '', null, null, 8);
+        this.imageEditorObj?.drawRectangle(dimension.x + 10, dimension.y + 60, 150, 70);
+        this.imageEditorObj?.drawRectangle(dimension.x + 250, dimension.y + 60, 150, 700, null, '', '', null, null, 8);
     }
     ellipseClick(): void {
         let dimension: any = this.imageEditorObj?.getImageDimension();
-        this.imageEditorObj?.drawEllipse(dimension.x, dimension.y);
+        this.imageEditorObj?.drawEllipse(dimension.x, dimension.y + 200);
     }
     lineClick(): void {
       let dimension: any = this.imageEditorObj?.getImageDimension();
-      this.imageEditorObj?.drawLine(dimension.x, dimension.y);
+      this.imageEditorObj?.drawLine(dimension.x+300, dimension.y+300);
     }
     pathClick(): void {
       let dimension: any = this.imageEditorObj?.getImageDimension();
       this.imageEditorObj?.drawPath([{x: dimension.x, y: dimension.y}, {x: dimension.x+50, y: dimension.y+50}, {x: dimension.x+20, y: dimension.y+50}], 8);
     }
     arrowClick(): void {
       let dimension: any = this.imageEditorObj?.getImageDimension();
-      this.imageEditorObj?.drawArrow(dimension.x, dimension.y+10, dimension.x+50, dimension.y+10, 10);
+      this.imageEditorObj?.drawArrow(dimension.x + 100, dimension.y + 30, dimension.x + 100, dimension.y+10, 10);
     }
 }
 

ej2-angular/code-snippet/image-editor/default-cs41/src/app.component.ts

@@ -28,7 +28,7 @@ export class AppComponent {
       const reader = new FileReader();
       reader.onload = () => {
         // Load the image into the Image Editor
-        this.imageEditorObj?.open(reader.result);
+        this.imageEditorObj?.open(reader.result  as any);
       };
       reader.readAsDataURL(args.filesData[0].rawFile);
     }

ej2-angular/code-snippet/image-editor/default-cs44/src/app.component.ts

@@ -45,7 +45,7 @@ import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';
           canvas.height = imageData.height;
           ctx.putImageData(imageData, 0, 0);
           canvas.toBlob((blob) =>{
-              this.blobUrl = URL.createObjectURL(blob);// For getting blob.
+              this.blobUrl = URL.createObjectURL(blob as any);// For getting blob.
           });
       }
       setImage(): void {

ej2-angular/code-snippet/image-editor/default-cs55/src/styles.css

@@ -10,6 +10,7 @@
 @import 'node_modules/@syncfusion/ej2-image-editor/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-image-editor/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css";
 
 .e-section-control {
 	margin-top: 150px;

ej2-angular/code-snippet/image-editor/default-cs56/src/app.component.ts

@@ -43,20 +43,20 @@ export class AppComponent {
         this.imageEditorObj?.drawRedact(RedactType.Blur, dimension?.x, dimension.y, 200, 300);
     }
     updateRedact(): void {
-      let redacts: RedactSettings[] = this.imageEditorObj?.getRedacts();
+      let redacts: RedactSettings[] | any = this.imageEditorObj?.getRedacts();
       if (redacts.length > 0) {
         redacts[redacts.length - 1].blurIntensity = 100;
         this.imageEditorObj?.updateRedact(redacts[redacts.length - 1]);
       }
     }
     selectRedact(): void {
-      let redacts: RedactSettings[] = this.imageEditorObj?.getRedacts();
+      let redacts: RedactSettings[] | any = this.imageEditorObj?.getRedacts();
       if (redacts.length > 0) {
           this.imageEditorObj?.selectRedact(redacts[redacts.length - 1].id);
       }
     }
     deleteRedact(): void {
-      let redacts: RedactSettings[] = this.imageEditorObj?.getRedacts();
+      let redacts: RedactSettings[] | any = this.imageEditorObj?.getRedacts();
       if (redacts.length > 0) {
         this.imageEditorObj?.deleteRedact(redacts[redacts.length - 1].id);
       }