extend to xml variable

[ofthewood]

hi

A nice feature would be to pass directly the xml as input instead of a file.
As a newbie , I ve try to do this by creating a component inspired from your code in my vue app

<template>
  <div ref="container" class="vue-bpmn-diagram-container"></div>
</template>

<script>
  import BpmnJS from 'bpmn-js';

  export default {
    name: 'bpmn-display',
    props: {
      xml: {
        type: String
      }
    },
    data: function () {
      return {
        diagramXML: null
      };
    },
    mounted: function () {
      var container = this.$refs.container;

      var self = this;

      this.bpmnViewer = new BpmnJS({
        container: container
      });

      this.bpmnViewer.on('import.done', function (event) {
        var error = event.error;
        var warnings = event.warnings;

        if (error) {
          self.$emit('error', error);
        } else {
          self.$emit('shown', warnings);
        }

         self.bpmnViewer.get('canvas').zoom('fit-viewport');

      });

      if (this.xml) {
        this.diagramXML = this.xml;
      }
    },
    beforeDestroy: function () {
      this.bpmnViewer.destroy();
    },
    watch: {
      xml: function (val) {
        this.$emit('loading');
        this.diagramXML = this.xml;
      },
      diagramXML: function (val) {
        this.bpmnViewer.importXML(val);
      }
    },
    methods: {
    }
  };
</script>

<style scoped>
  .vue-bpmn-diagram-container {
    height: 100%;
    width: 100%;
  }
</style>

I used like this

<div   class="diagram-container">
  <h5 class="h3 mb-0">Etapes du diagnostic</h5>
  <bpmn-display
    v-bind:xml="bpmn20Xml"
    v-on:error="handleError"
    v-on:shown="handleShown"
  ></bpmn-display>
</div>_

The diagramm i well displayed but I can’t get the movable and zoomable feature . Do you have any idea why ?

[nikku]

Happy to take a PR that allows passing url or xml:

<template>
  <vue-bpmn
    xml="preLoadedDiagramXML"
    v-on:error="handleError"
    v-on:shown="handleShown"
    v-on:loading="handleLoading"
  ></vue-bpmn>
</template>

[lshz0088]

Will XML-enabled functionality be updated to this official repository?

[nikku]

Yes, if you contribute it.