2 changed files with 136 additions and 2 deletions
--- a/packages/design-core/mock/xmlStr.js
+++ b/packages/design-core/mock/xmlStr.js
@ -0,0 +1,13 @@
+export var xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
+<bpmn2:process id="Process_1" isExecutable="false">
+  <bpmn2:startEvent id="StartEvent_1" />
+</bpmn2:process>
+<bpmndi:BPMNDiagram id="BPMNDiagram_1">
+  <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+    <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+      <dc:Bounds x="192" y="82" width="36" height="36" />
+    </bpmndi:BPMNShape>
+  </bpmndi:BPMNPlane>
+</bpmndi:BPMNDiagram>
+</bpmn2:definitions>`
--- a/packages/design-core/src/DesignChart.vue
+++ b/packages/design-core/src/DesignChart.vue
@ -1,11 +1,132 @@
 <template>
  <div class="containers">
-    <div>Hello Vue!</div>
+    <div class="canvas" ref="canvas"></div>
+    <ul class="tools">
+      <li class="button">
+        <a href="javascript:" @click="$refs.refFile.click()">加载本地BPMN文件</a>
+        <input type="file" id="files" ref="refFile" style="display: none" @change="loadXML" />
+      </li>
+      <li>
+        <a href="javascript:" ref="saveXML" title="保存为bpmn">保存为BPMN文件</a>
+      </li>
+      <li>
+        <a href="javascript:" ref="saveSvg" title="保存为svg">保存为SVG图片</a>
+      </li>
+    </ul>
  </div>
 </template>

 <script>
+import BpmnModeler from 'bpmn-js/lib/Modeler'
+import { xmlStr } from '../mock/xmlStr.js'
+import 'bpmn-js/dist/assets/diagram-js.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+
 export default {
-  name: 'HelloComponent'
+  name: 'ops-coffee',
+  mounted() {
+    this.init()
+  },
+  data() {
+    return {
+      bpmnModeler: null,
+      container: null,
+      canvas: null,
+      xmlStr: xmlStr
+    }
+  },
+  methods: {
+    init() {
+      const canvas = this.$refs.canvas
+      this.bpmnModeler = new BpmnModeler({
+        container: canvas
+      })
+
+      this.createNewDiagram()
+    },
+    async createNewDiagram() {
+      await this.bpmnModeler.importXML(this.xmlStr)
+      this.success()
+    },
+    success() {
+      this.addBpmnListener()
+    },
+    async loadXML() {
+      const that = this
+      const file = this.$refs.refFile.files[0]
+
+      var reader = new FileReader()
+      reader.readAsText(file)
+      reader.onload = function () {
+        that.xmlStr = this.result
+        that.createNewDiagram()
+      }
+    },
+    async addBpmnListener() {
+      const that = this
+      const downloadLink = this.$refs.saveXML
+      const downloadSvgLink = this.$refs.saveSvg
+
+      async function opscoffee() {
+        let result = await that.saveSVG()
+        const { svg } = result
+
+        that.setEncoded(downloadSvgLink, 'ops-coffee.svg', svg)
+
+        result = await that.saveXML()
+        const { xml } = result
+
+        that.setEncoded(downloadLink, 'ops-coffee.bpmn', xml)
+      }
+
+      opscoffee()
+      this.bpmnModeler.on('commandStack.changed', opscoffee)
+    },
+    async saveSVG(done) {
+      return await this.bpmnModeler.saveSVG(done)
+    },
+    async saveXML(done) {
+      return await this.bpmnModeler.saveXML({ format: true }, done)
+    },
+    setEncoded(link, name, data) {
+      const encodedData = encodeURIComponent(data)
+
+      if (data) {
+        link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
+        link.download = name
+      }
+    }
+  }
 }
 </script>
+
+<style scoped>
+.containers {
+  width: 100%;
+  height: calc(100vh - 82px);
+}
+
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.tools {
+  position: absolute;
+  left: 20px;
+  bottom: 20px;
+}
+
+.button {
+  display: inline-block;
+  margin: 5px;
+}
+
+:deep(.djs-container) {
+  background-image: linear-gradient(90deg, hsla(0, 0%, 78.4%, 0.15) 10%, transparent 0),
+    linear-gradient(hsla(0, 0%, 78.4%, 0.15) 10%, transparent 0);
+  background-size: 10px 10px;
+}
+</style>