angular diagram clear didn't clear all layers

[Alison Niu]

Look like angular diagram clear didn't clear all layers

run the code, add nodes, clear, and add nodes again which cause error.

"ng:///AppModule/AppComponent.ngfactory.js:8 ERROR TypeError: Cannot read property 'parentNode'

https://angular-cpr7be.stackblitz.io

[Aravind Ravi]

Hi Alison 

 

We are unable to open the sample that you have provided in your last update. When we try to open the sample, the sample keeps loading. Please refer below screenshot  

  

    

  

  

Could you please recheck and send the running sample. This would help us to serve you better.  

  

Regards  

Aravind Ravi 

[Swetha Srikumar]

Sent: Monday, January 18, 2021 9:38 PM
To: Syncfusion Support <[email protected]>
Subject: Re: Syncfusion support community forum 161448, angular diagram clear didn't clear all layers, has been updated. 

  

please try again, I can load the link. 

[Alison Niu]

[Alison Niu]

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({});

  }

}

[Alison Niu]

this is page for edit:

https://stackblitz.com/edit/angular-cpr7be

[Gowtham Gunashekar]

 

Hi Alison, 

 

We have added sample link to demonstrate how to add the layer and how to update the objects in the layer at runtime. When we clear the diagram, the layer doesn’t clear, but the objects in the layers get cleared, if you want to remove layers mean you need to use removeLayer API. 

To add the objects in a specific layer you need to set that layer as active layer by using setactivelayer API and then add the nodes or connectors at runtime it will automatically be added to active layer’s objects collection. 

 

Sample Link: https://stackblitz.com/edit/angular-cpr7be-7xgfjy?file=app.component.ts  

 

Code snippet for layers 

// to set an active layer 

this.diagram.setActiveLayer("layer2"); 

 

 

// to remove a layer 

this.diagram. removeLayer("layer2"); 

 

// to add a layer  

 

let layer1: LayerModel = { 

      id: "layer1", 

      visible: true, 

      objects: [] 

      //zIndex:2 

    }; 

    this.diagram.addLayer(layer1); 

 

 

 

Regards 

Gowtham 

 

[Alison Niu]

thank you so much, that is working.

and use this code to clear diagram is working.

  public clearDiagram(): void {

    this.diagram.clear();

    for (var i=this.diagram.layers.length-1;i>0; i--){

           that.diagram.removeLayer(this.diagram.layers[i].id);

    };    

    

}

[Gowtham Gunashekar]

Hi Alison, 

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

Regards, 

 

Gowtham