import { Component, ViewEncapsulation, OnInit, ViewChild } from "@angular/core";
import {
PrintAndExport,
BasicShapeModel,
DiagramComponent,
Diagram,
NodeModel,
ConnectorModel,
PointModel,
LayerModel,
IExportOptions,
Annotation,
Margin,
ShapeAnnotationModel,
DiagramConstraints
} from "@syncfusion/ej2-angular-diagrams";
// Diagram.Inject(PrintAndExport);
@Component({
selector: "app-root",
template: `
<button mat-flat-button type="button" color="primary" (click)="addnodes()">
addnodes
</button>
<button mat-flat-button type="button" color="primary" (click)="hideLayer()">
hide layer
</button>
<button mat-flat-button type="button" color="primary" (click)="fitToPage()">
fittopage
</button>
<button
mat-flat-button
type="button"
color="primary"
(click)="clearDiagram()"
>
clear
</button>
<div>
<div class="row" style="margin:4px">
<div class="jumbotron col-lg-4"></div>
<div class="jumbotron col-lg-8">
<div class="container">
<ejs-diagram
#diagram
id="diagram"
width="100%"
height="600px"
[constraints]="diagramConstraints"
[getNodeDefaults]="impositionNodeDefaults"
>
</ejs-diagram>
</div>
</div>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
diagram: DiagramComponent;
public sourcePoint: PointModel;
public targetPoint: PointModel;
// public layers: LayerModel[]=[];
ngOnInit(): void {}
public impositionNodeDefaults(node: NodeModel): NodeModel {
node.style.strokeWidth = 1;
node.pivot = { x: 0, y: 0 };
node.shape = { type: "Basic", shape: "Rectangle", cornerRadius: 0 };
return node;
}
public diagramConstraints: DiagramConstraints =
DiagramConstraints.Default & ~DiagramConstraints.PageEditable;
public nodes: NodeModel[] = [];
public impositionLayers: LayerModel[] = [];
public addnodes(): void {
this.diagram.clear();
// this.diagram.clearCanvas;
var node1: NodeModel = {
id: "node1",
offsetX: 300,
offsetY: 300,
width: 400,
height: 450,
shape: { type: "Basic", shape: "Rectangle", cornerRadius: 0 },
pivot: { x: 0, y: 0 },
style: {
fill: "Green",
strokeColor: "Red",
strokeWidth: 5,
strokeDashArray: "5,5"
}
};
var node3: NodeModel = {
id: "node3",
offsetX: 300,
offsetY: 300,
width: 400,
height: 450,
shape: { type: "Basic", shape: "Rectangle", cornerRadius: 0 },
pivot: { x: 0, y: 0 },
style: {
fill: "Green",
strokeColor: "Red",
strokeWidth: 5,
strokeDashArray: "5,5"
}
};
this.diagram.add(node1);
this.diagram.add(node3);
var node2: NodeModel = {
id: "node2",
offsetX: 350,
offsetY: 350,
width: 4000,
height: 4500,
shape: { type: "Basic", shape: "Rectangle", cornerRadius: 0 },
pivot: { x: 0, y: 0 },
style: {
fill: "#FF7F50",
strokeColor: "Red",
strokeWidth: 5,
strokeDashArray: "5,5"
}
};
var node4: NodeModel = {
id: "node4",
offsetX: 350,
offsetY: 350,
width: 400,
height: 450,
shape: { type: "Basic", shape: "Rectangle", cornerRadius: 0 },
pivot: { x: 0, y: 0 },
style: {
fill: "#FF7F50",
strokeColor: "Red",
strokeWidth: 5,
strokeDashArray: "5,5"
}
};
this.diagram.add(node2);
this.diagram.add(node4);
// this.diagram.rulerSettings.showRulers = true;
let layers: LayerModel[] = [];
let layer1: LayerModel = {
id: "layer1",
visible: true,
objects: []
//zIndex:2
};
layer1.objects.push(node3.id, node1.id);
var layer2: LayerModel = {
id: "layer2",
visible: true,
objects: []
// zIndex:1,
};
layer2.objects.push(node4.id, node2.id);
layers.push(layer1, layer2);
this.diagram.layers = layers;
}
public hideLayer(): void {
// this.diagram.layers[1].visible =!this.diagram.layers[1].visible;
this.diagram.layers.every(function(layer, index) {
console.log(layer.id);
if (layer.id == "layer2") {
layer.visible = !layer.visible;
return false;
}
return true;
});
}
public clearDiagram(): void {
this.diagram.clear();
}
public fitToPage(): void {
this.diagram.fitToPage({});
}
}
