How to update save-functions?

Developers Modeler
1

hello,
when I run the application, I get warnings according to that saveSVG and saveXML are deprecated and I should switch to promises. How can I update this functions? I already tried by using ‘async’ and ‘await’ but the warnings still appear. This is how it looks like:

async function saveSVG(done) {
  await bpmnModeler.saveSVG(done);
}

async function saveDiagram(done) {
  await bpmnModeler.saveXML({ format: true }, function(err, xml) {
    done(err, xml);
  });
}

$(function() {
  var downloadLink = $('#js-download-diagram');
  var downloadSvgLink = $('#js-download-svg');

  $('.buttons a').click(function(e) {
    if (!$(this).is('.active')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });

  function setEncoded(link, name, data) {
    var encodedData = encodeURIComponent(data);

    if (data) {
      link.addClass('active').attr({
        'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
        'download': name
      });
    } else {
      link.removeClass('active');
    }
  }

  var exportArtifacts = debounce(function() {

    saveSVG(function(err, svg) {
      setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
    });


    saveDiagram(function(err, xml) {
      setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml);
    });
  }, 500);

  bpmnModeler.on('commandStack.changed', exportArtifacts);
  bpmnModeler.on('comments.updated', exportArtifacts);

bpmnModeler.on('canvas.click', function() {
  bpmnModeler.get('comments').collapseAll();
});
});
2

You won’t use the new, Promise returning functions of these APIs if you continue to pass a done parameter. Do not pass that callback and you’re good.

3

thanks very much, I could solve the problem with your hint.
The correct code looks as follows now:

function setEncoded(link, name, data) {
  var encodedData = encodeURIComponent(data);

  if (data) {
    link.addClass('active').attr({
      'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
      'download': name
    });
  } else {
    link.removeClass('active');
  }
}

async function saveSVG() {
  try {
    const result = await bpmnModeler.saveSVG();
    const { svg } = result;
    const { err } = result;
    var downloadSvgLink = $('#js-download-svg');
    setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
  }
  catch(err) {
    console.log(err);
  }
}

async function saveDiagram() {
  try {
    const result = await bpmnModeler.saveXML({ format: true });
    const { xml } = result;
    const { err } = result;
    var downloadLink = $('#js-download-diagram');
    setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml);
  }
  catch(err) {
    console.log(err);
  }
}

$(function() {
  $('.buttons a').click(function(e) {
    if (!$(this).is('.active')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });

  var exportArtifacts = debounce(function() {

    saveSVG();
    saveDiagram();

  }, 500);

  bpmnModeler.on('commandStack.changed', exportArtifacts);
  bpmnModeler.on('comments.updated', exportArtifacts);

bpmnModeler.on('canvas.click', function() {
  bpmnModeler.get('comments').collapseAll();
});
});

function debounce(fn, timeout) {

  var timer;

  return function() {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(fn, timeout);
  };
}

and I also update the importXML-function which looks as this:

async function openDiagram(diagramXML) {
  
// import XML
try {
  const result = await bpmnModeler.importXML(diagramXML);
  const { warnings } = result;
	console.log(warnings);
} catch(err) {
  console.log(err);
}

just in case, if some more encounter this problem

1 Like