add propertiesPanel, upgrade dependencies

Author: evanyangg

examples/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
-    <BpmnModeler ref='modeler' v-model="modeler" :diagramXML="propXmlData"></BpmnModeler>
+    <BpmnModeler ref='modeler' v-model="modeler" :diagramXML="propXmlData" propertiesPanel></BpmnModeler>
     <!-- <BpmnViewer :xmlData="viewData" :taskData="propTaskList"></BpmnViewer> -->
-    <button @click="addTask" v-if="$refs.modeler">add task</button>
+    <button @click="addTask" class="button" v-if="$refs.modeler">add task</button>
   </div>
 </template>
 <script>
@@ -81,7 +81,7 @@ export default {
 }
 </script>
 <style lang="less">
-button {
+.button {
   position: absolute;
   right:15px;
   bottom:100px;

examples/view.bpmn

@@ -100,7 +100,7 @@
         <bpmn:completionCondition xsi:type="bpmn:tFormalExpression" id="completionCondition_5afbd373-1e87-4f21-950e-58cc1a3edc28">${nrOfCompletedInstances/nrOfInstances &gt;= 1.0}</bpmn:completionCondition>
       </bpmn:multiInstanceLoopCharacteristics>
     </bpmn:userTask>
-    <bpmn:sequenceFlow id="SequenceFlow_0ss8ypj" sourceRef="UserTask_0hkfnx2" targetRef="UserTask_1pvvtgn" />
+    <bpmn:sequenceFlow id="SequenceFlow_0ss8ypj" sourceRef="UserTask_0hkfnx2" targetRef="UserTask_1pvvtgn"/>
     <bpmn:endEvent id="EndEvent_1xgys24" name="结束">
       <bpmn:incoming>SequenceFlow_0jm0ers</bpmn:incoming>
     </bpmn:endEvent>
@@ -175,7 +175,7 @@
       <bpmndi:BPMNShape id="UserTask_1pvvtgn_di" bpmnElement="UserTask_1pvvtgn">
         <dc:Bounds x="1000" y="80" width="100" height="80" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="SequenceFlow_0ss8ypj_di" bpmnElement="SequenceFlow_0ss8ypj">
+      <bpmndi:BPMNEdge id="SequenceFlow_0ss8ypj_di" bpmnElement="SequenceFlow_0ss8ypj" >
         <di:waypoint x="940" y="120" />
         <di:waypoint x="1000" y="120" />
       </bpmndi:BPMNEdge>

package.json

@@ -11,29 +11,30 @@
   },
   "main": "lib/vue-bpmn-modeler.umd.min.js",
   "dependencies": {
-    "bpmn-js": "^6.3.4",
-    "bpmn-js-cli": "^1.2.0",
+    "bpmn-js": "^7.3.1",
+    "bpmn-js-cli": "^2.0.0",
+    "bpmn-js-properties-panel": "^0.37.2",
     "camunda-bpmn-moddle": "^4.4.0",
-    "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "diagram-js-minimap": "^2.0.3",
     "inherits": "^2.0.4",
-    "vue": "^2.6.11"
+    "vue": "^2.6.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.2.3",
-    "@vue/cli-plugin-eslint": "~4.2.3",
-    "@vue/cli-service": "~4.2.3",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-service": "^4.5.8",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
     "execa": "^4.0.0",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
-    "prettier": "^1.18.2",
+    "prettier": "^1.19.1",
     "raw-loader": "^3.1.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   },
   "eslintConfig": {
     "root": true,

packages/BpmnModeler/src/BpmnModeler.vue

@@ -1,13 +1,16 @@
 <template>
-  <div ref="container" class="containers" @mousemove="focusOut">
+  <div ref="container" class="containers">
     <div ref="canvas" class="canvas"></div>
+    <div id="properties-panel-parent" class="properties-panel-parent"></div>
   </div>
 </template>
 
 <script>
 import BpmnModeler from "../../CustomModeler";
 import CustomTranslate from "../../CustomTranslate";
-import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";
+import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda.json";
+import propertiesPanelModule from 'bpmn-js-properties-panel';
+import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
 import minimapModule from "diagram-js-minimap";
 import CliModule from 'bpmn-js-cli';
 import { debounce } from "min-dash";
@@ -17,50 +20,65 @@ let customTranslateModule = {
 export default {
   name: "BpmnModeler",
   props: {
-    diagramXML: String
+    diagramXML: String,
+    propertiesPanel: null
   },
   data() {
     return {
       modeler: {},
       xmlData: "",
       svgImage: "",
-      isSvg: false
+      isSvg: false,
     };
   },
   watch: {
     diagramXML(val) {
       this.openDiagram(val)
     }
   },
-  mounted() {
+  async mounted() {
+    console.log(this.propertiesPanel === '')
     let canvas = this.$refs["canvas"];
+    let additionalModules = [
+      customTranslateModule,
+      minimapModule,
+      CliModule
+    ]
+    if (this.propertiesPanel === '' || this.propertiesPanel) {
+      additionalModules = additionalModules.concat([
+        propertiesPanelModule,
+        propertiesProviderModule
+      ])
+    }
     this.modeler = new BpmnModeler({
       container: canvas,
-      additionalModules: [
-        customTranslateModule,
-        minimapModule,
-        CliModule
-      ],
+      additionalModules: additionalModules,
       cli: {
         bindTo: 'cli'
       },
       moddleExtensions: {
         camunda: camundaModdleDescriptor
+      },
+      propertiesPanel: {
+        parent: '#properties-panel-parent'
       }
     });
-    this.$nextTick(() => {
-      this.openDiagram(this.diagramXML);
+    await this.openDiagram(this.diagramXML).then(() => {
       // 自动保存当前模型设计
       let _self = this;
-      let exportArtifacts = debounce(function() {
-
-        _self.saveSVG(function(err, svg) {
-          _self.svgImage = svg;
-        });
-
-        _self.saveDiagram(function(err, xml) {
-          _self.xmlData = xml;
-        });
+      let exportArtifacts = debounce(async () => {
+        try {
+          const { svg } = await _self.modeler.saveSVG();
+          _self.svgImage = svg;  
+        } catch (err) {
+          console.log(`saveSVG error ${err}`)
+        }
+        try {
+          const { xml } = await _self.modeler.saveXML({ format: true })
+          _self.xmlData = xml;  
+        } catch (error) {
+          console.log(`saveXML error ${err}`)
+        }
         let modelInfo = {
           xmlData: _self.xmlData,
           svgImage: _self.svgImage
@@ -69,7 +87,7 @@ export default {
       }, 10);
       this.modeler.on("commandStack.changed", exportArtifacts);
       exportArtifacts()
-    })
+    });
   },
   methods: {
     async replace(data) {
@@ -121,15 +139,15 @@ export default {
       })
     },
     openDiagram(xml) {
-       return new Promise((resolve, reject) => { 
+       return new Promise(async (resolve, reject) => { 
         if (xml) {
-          this.modeler.importXML(xml, function(err) {
-            if (err) {
-              reject(err);
-            } else {
-              resolve()
-            }
-          });
+          try {
+            const result = await this.modeler.importXML(xml);
+            console.log('rendered');
+            resolve()
+          } catch (err) {
+            reject(err);
+          }
           this.xmlData = xml;
         } else {
           this.modeler.createDiagram();
@@ -164,11 +182,7 @@ export default {
     saveSVG(done) {
       this.modeler.saveSVG(done);
     },
-    saveDiagram(done) {
-      this.modeler.saveXML({ format: true }, function(err, xml) {
-        done(err, xml);
-      });
-    },
+    // todo 
     focusOut(event) {
       let layerBase = document.querySelector('.layer-base')
       let zoom = layerBase.parentNode.getBoundingClientRect();
@@ -184,19 +198,70 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+// @import "../../styles/app.less";
 @import "~bpmn-js/dist/assets/diagram-js.css";
 @import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
 @import "~diagram-js-minimap/assets/diagram-js-minimap.css";
+@import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
 .containers {
   position: absolute;
   background-color: #ffffff;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
+  // position: relative;
+  // width: 100%;
+  // height: 100%;
 }
 .canvas {
+  // position: absolute;
+  // top: 0;
+  // left: 0;
+  // right: 0;
+  // bottom: 0;
   width: 100%;
   height: 100%;
 }
+.properties-panel-parent {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  // width: 20%;
+  width: 260px;
+  z-index: 10;
+  border-left: 1px solid #ccc;
+  overflow: auto;
+  &:empty {
+    display: none;
+  }
+  > .djs-properties-panel {
+    padding-bottom: 70px;
+    min-height:100%;
+  }
+  /deep/ .bpp-textfield input {
+    padding-right: 0;
+  }
+  /deep/ .bpp-properties-panel {
+    .bpp-properties {
+      .bpp-properties-header {
+        .label {
+            word-wrap: break-word;
+        }
+      }
+    }
+  }
+  /deep/ .bpp-properties-panel [type=text], /deep/ .bpp-properties-panel textarea {
+    width: calc(100% - 6px)
+  }
+  /deep/ .bpp-properties-panel [contenteditable] {
+    width: calc(100% - 12px)
+  }
+  /deep/ .bpp-table-row > label.bpp-table-row-columns-2.bpp-table-row-removable, /deep/ .bpp-table-row > input.bpp-table-row-columns-2.bpp-table-row-removable {
+    width: calc(50% - 12px);
+  }
+}
 </style>