How to implement Diagram Diffing in react js

Developers Modeler
1

Hi Team,

I have implemented some BPMN.js functionality in my react js application. And i also want to implement Diagram Diffing to Compare two diagram. How to implement diagram diffing in react application?

Thanks in advance

2

Did you already check out these projects?

3

Thanks Niklas,

Could you please provide codesandbox for this https://demo.bpmn.io/diff . it will be easy for me to check how it was implemented.

4

You can find it here.

5

Thanks Niklas,

i have gone through the codesanbox and i have one doubt.

loadDiagram(“left”, { url: “samples/old.bpmn” });
loadDiagram(“right”, { url: “samples/new.bpmn” });

In above method the bpmn is imported in URL format. I want to send my bpmn in xml format as a variable like mentioned below.

let oldXML = myXML;
let newXML = myXML;

loadDiagram(“left”, {oldXML });

loadDiagram(“right”, { newXML });

But this is not working

6

Hi,

See the implementation of the loadDiagram function in the example:

function loadDiagram(side, diagram) {
  var viewer = getViewer(side);

  function done(err) {
    diagramLoaded(err, side, viewer);
  }

  diagramLoading(side, viewer);

  if (diagram.xml) {
    return viewer.importXML(diagram.xml, done);
  }

  $.get(diagram.url, function (xml) {
    viewer.importXML(xml, done);
  });
}

As you can see, it checks for the xml in a property xml: diagram.xml. Therefore, if you change your snippet to

let oldXML = myXML;
let newXML = myXML;

loadDiagram(“left”, { xml: oldXML });

loadDiagram(“right”, { xml: newXML });

it should work.

Best
Max