updated bpmnjsdiffer

testgenerator-web/testgenerator-web/src/app/components/update-project/update-project.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 
@@ -6,8 +6,11 @@ import { FileService } from 'src/app/services/file.service';
 import { ProjectService } from 'src/app/services/project.service';
 import { SingleProjectConfig } from 'src/app/models/single-project-config';
 
-import * as BpmnModdle from 'bpmn-moddle';
+//import * as BpmnModdle from 'bpmn-moddle';
+let BpmnModdle = require('bpmn-moddle').default;
+//import BpmnModdle from 'bpmn-moddle';
 import { diff } from 'bpmn-js-differ';
+import { BpmnDiagramComponent } from '../bpmn-diagram/bpmn-diagram.component';
 
 @Component({
   selector: 'app-update-project',
@@ -23,28 +26,57 @@ export class UpdateProjectComponent implements OnInit {
   diagramNew: string; // updated BPMN-Model
   diagramsLoaded: boolean = false;
 
+  @ViewChild('backupDiagram') backupDiagram;
+  @ViewChild('newDiagram') newDiagram;
+
   constructor(private fileService: FileService, private projectService: ProjectService, private route: ActivatedRoute) {
     this.route.params.subscribe(params =>
       this.actualProject = params['projectId']
     )
+
+    
   }
 
   async ngOnInit() {
     await this.loadProject();
     await this.loadDiagram();
     await this.loadDiagramUpdated();
+    
   }
 
-  compareProjects() {
+  async compareProjects() {
+    var currentDiagram, newDiagram;
 
-    var diagram1 = new BpmnModdle().fromXML(this.diagram);
-    var diagram2 = new BpmnModdle().fromXML(this.diagramNew);
+    try {
+      var result = await new BpmnModdle().fromXML(this.diagram);
+      currentDiagram = result.rootElement;
+    } catch(err){
+        console.log('something went wrong!');
+    }
 
-    var changes = diff(diagram1, diagram2);
-    console.log(changes._removed);
-  }
+    try {
+      var result = await new BpmnModdle().fromXML(this.diagramNew);
+      newDiagram = result.rootElement;
+    } catch(err){
+        console.log('something went wrong!');
+    }
 
+    var changes = diff(currentDiagram, newDiagram);
 
+    var container = this.backupDiagram.getBpmnContainer();
+    var canvas = container.get('canvas');
+
+    for(let element of Object.keys(changes._removed)) {
+      canvas.addMarker(element, 'marker-removed');
+    }
+    
+    var newContainer = this.newDiagram.getBpmnContainer();
+    var newCanvas = newContainer.get('canvas');
+
+    for(let element of Object.keys(changes._added)) {
+      newCanvas.addMarker(element, 'marker-added');
+    }
+  }
 
   async loadProject() {
     try {
@@ -58,7 +90,7 @@ export class UpdateProjectComponent implements OnInit {
 
   async loadDiagram() {
     try {
-      let result = await this.fileService.getBPMNDiagram(this.actualProject);
+      let result = await this.fileService.getBackupBPMNDiagram(this.actualProject);
       this.diagram = result;
     }
     finally {
@@ -68,7 +100,7 @@ export class UpdateProjectComponent implements OnInit {
 
   async loadDiagramUpdated() {
     try {
-      let result = await this.fileService.getUpdatedBPMNDiagram(this.actualProject);
+      let result = await this.fileService.getBPMNDiagram(this.actualProject);
       this.diagramNew = result;
     }
     finally {