bpmnjs监听参数自动消失bug修复

src/main/resources/resources/bpmnjs/dist/vendor/diagram-js.css

+/**
+ * color definitions
+ */
+.djs-container {
+  --blue-base-65: #4d90ff;
+  --blue-base-65-opacity-30: rgba(77, 144, 255, 0.3);
+  --blue-darken-48: #005df7;
+  --blue-darken-55: #1a70ff;
+  --blue-lighten-82: #a2c5ff;
+
+  --orange-base-60: #ffa533;
+  --orange-base-60-opacity-30: rgba(255, 165, 51, 0.3);
+  --orange-base-60-opacity-50: rgba(255, 165, 51, 0.5);
+  --orange-lighten-85: #ffddb3;
+
+  --red-base-62: #ff3d3d;
+  --red-base-62-opacity-10: rgba(255, 61, 61, 0.1);
+
+  --silver-darken-94: #efefef;
+
+  --color-000000: #000000;
+  --color-000000-opacity-05: rgba(0, 0, 0, 0.05);
+  --color-000000-opacity-10: rgba(0, 0, 0, 0.1);
+  --color-333333: #333333;
+  --color-666666: #666666;
+  --color-aaaaaa: #aaaaaa;
+  --color-cccccc: #cccccc;
+  --color-cdcdcd: #cdcdcd;
+  --color-dddddd: #dddddd;
+  --color-f6f6f6: #f6f6f6;
+  --color-fafafa: #fafafa;
+  --color-fefefe: #fefefe;
+  --color-ffffff: #ffffff;
+
+  --bendpoint-fill-color: var(--blue-base-65-opacity-30);
+  --bendpoint-stroke-color: var(--blue-base-65);
+
+  --context-pad-entry-background-color: var(--color-fefefe);
+  --context-pad-entry-hover-background-color: var(--silver-darken-94);
+ 
+  --element-dragger-color: var(--blue-base-65);
+  --element-hover-outline-fill-color: var(--blue-darken-48);
+  --element-selected-outline-stroke-color: var(--blue-base-65);
+
+  --lasso-fill-color: var(--color-000000-opacity-05);
+  --lasso-stroke-color: var(--color-000000);
+
+  --palette-entry-color: var(--color-333333);
+  --palette-entry-hover-color: var(--blue-darken-48);
+  --palette-entry-selected-color: var(--blue-base-65);
+  --palette-separator-color: var(--color-aaaaaa);
+  --palette-toggle-hover-background-color: var(--color-666666);
+  --palette-background-color: var(--color-fafafa);
+  --palette-border-color: var(--color-cccccc);
+
+  --popup-body-background-color: var(--color-fefefe);
+  --popup-header-entry-selected-color: var(--blue-base-65);
+  --popup-header-entry-selected-background-color: var(--color-000000-opacity-10);
+  --popup-header-separator-color: var(--color-dddddd);
+  --popup-background-color: var(--color-fafafa);
+  --popup-border-color: var(--color-cccccc);
+ 
+  --resizer-fill-color: var(--blue-base-65-opacity-30);
+  --resizer-stroke-color: var(--blue-base-65);
+
+  --search-container-background-color: var(--color-fafafa);
+  --search-container-border-color: var(--blue-darken-55);
+  --search-container-box-shadow-color: var(--blue-lighten-82);
+  --search-container-box-shadow-inset-color: var(--color-cdcdcd);
+  --search-input-border-color: var(--color-cccccc);
+  --search-result-border-color: var(--color-aaaaaa);
+  --search-result-highlight-color: var(--color-000000);
+  --search-result-selected-color: var(--blue-base-65-opacity-30);
+
+  --shape-attach-allowed-stroke-color: var(--blue-base-65);
+  --shape-connect-allowed-fill-color: var(--color-000000-opacity-05);
+  --shape-drop-allowed-fill-color: var(--color-000000-opacity-05);
+  --shape-drop-not-allowed-fill-color: var(--red-base-62-opacity-10);
+  --shape-resize-preview-stroke-color: var(--blue-base-65);
+
+  --snap-line-stroke-color: var(--blue-base-65-opacity-30);
+
+  --space-tool-crosshair-stroke-color: var(--color-000000);
+ 
+  --tooltip-error-background-color: var(--red-base-62-opacity-10);
+  --tooltip-error-border-color: var(--red-base-62);
+  --tooltip-error-color: var(--red-base-62);
+}
+
 /**
  * outline styles
  */
@@ -10,65 +99,65 @@
 .djs-element.hover .djs-outline,
 .djs-element.selected .djs-outline {
   visibility: visible;
-  shape-rendering: crispEdges;
+  shape-rendering: geometricPrecision;
   stroke-dasharray: 3,3;
 }
 
 .djs-element.selected .djs-outline {
-  stroke: #8888FF;
+  stroke: var(--element-selected-outline-stroke-color);
   stroke-width: 1px;
 }
 
 .djs-element.hover .djs-outline {
-  stroke: #FF8888;
+  stroke: var(--element-hover-outline-fill-color);
   stroke-width: 1px;
 }
 
 .djs-shape.connect-ok .djs-visual > :nth-child(1) {
-  fill: #DCFECC /* light-green */ !important;
+  fill: var(--shape-connect-allowed-fill-color) !important;
 }
 
 .djs-shape.connect-not-ok .djs-visual > :nth-child(1),
 .djs-shape.drop-not-ok .djs-visual > :nth-child(1) {
-  fill: #f9dee5 /* light-red */ !important;
+  fill: var(--shape-drop-not-allowed-fill-color) !important;
 }
 
 .djs-shape.new-parent .djs-visual > :nth-child(1) {
-  fill: #F7F9FF !important;
+  fill: var(--shape-drop-allowed-fill-color) !important;
 }
 
 svg.drop-not-ok {
-  background: #f9dee5 /* light-red */ !important;
+  background: var(--shape-drop-not-allowed-fill-color) !important;
 }
 
 svg.new-parent {
-  background: #F7F9FF /* light-blue */ !important;
+  background: var(--shape-drop-allowed-fill-color) !important;
 }
 
 .djs-connection.connect-ok .djs-visual > :nth-child(1),
 .djs-connection.drop-ok .djs-visual > :nth-child(1) {
-  stroke: #90DD5F /* light-green */ !important;
+  stroke: var(--shape-drop-allowed-fill-color) !important;
 }
 
 .djs-connection.connect-not-ok .djs-visual > :nth-child(1),
 .djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
-  stroke: #E56283 /* light-red */ !important;
+  stroke: var(--shape-drop-not-allowed-fill-color) !important;
 }
 
 .drop-not-ok,
 .connect-not-ok {
+  stroke: var(--shape-attach-allowed-stroke-color) !important;
   cursor: not-allowed;
 }
 
 .djs-element.attach-ok .djs-visual > :nth-child(1) {
   stroke-width: 5px !important;
-  stroke: rgba(255, 116, 0, 0.7) !important;
 }
 
 .djs-frame.connect-not-ok .djs-visual > :nth-child(1),
 .djs-frame.drop-not-ok .djs-visual > :nth-child(1) {
   stroke-width: 3px !important;
-  stroke: #E56283 /* light-red */ !important;
+  stroke: var(--shape-drop-not-allowed-fill-color) !important;
   fill: none !important;
 }
 
@@ -77,13 +166,12 @@ svg.new-parent {
 *
 */
 .djs-lasso-overlay {
-  fill: rgb(255, 116, 0);
-  fill-opacity: 0.1;
+  fill: var(--lasso-fill-color);
 
   stroke-dasharray: 5 1 3 1;
-  stroke: rgb(255, 116, 0);
+  stroke: var(--lasso-stroke-color);
 
-  shape-rendering: crispEdges;
+  shape-rendering: geometricPrecision;
   pointer-events: none;
 }
 
@@ -94,7 +182,7 @@ svg.new-parent {
   fill: none;
 
   stroke-dasharray: 5 1 3 1;
-  stroke: rgb(255, 116, 0);
+  stroke: var(--shape-resize-preview-stroke-color);
 
   pointer-events: none;
 }
@@ -105,14 +193,16 @@ svg.new-parent {
 }
 
 .djs-resizer-visual {
-  fill: white;
+  fill: var(--resizer-fill-color);;
   stroke-width: 1px;
-  stroke: #BBB;
+  stroke-opacity: 0.5;
+  stroke: var(--resizer-stroke-color);
   shape-rendering: geometricprecision;
 }
 
 .djs-resizer:hover .djs-resizer-visual {
-  stroke: #555;
+  stroke: var(--resizer-stroke-color);
+  stroke-opacity: 1;
 }
 
 .djs-cursor-resize-ns,
@@ -156,12 +246,12 @@ svg.new-parent {
  */
 .djs-dragger * {
   fill: none !important;
-  stroke: rgb(255, 116, 0) !important;
+  stroke: var(--element-dragger-color) !important;
 }
 
 .djs-dragger tspan,
 .djs-dragger text {
-  fill: rgb(255, 116, 0) !important;
+  fill: var(--element-dragger-color) !important;
   stroke: none !important;
 }
 
@@ -170,14 +260,14 @@ marker.djs-dragger path,
 marker.djs-dragger polygon,
 marker.djs-dragger polyline,
 marker.djs-dragger rect {
-  fill: rgb(255, 116, 0) !important;
+  fill: var(--element-dragger-color) !important;
   stroke: none !important;
 }
 
 marker.djs-dragger text,
 marker.djs-dragger tspan {
   fill: none !important;
-  stroke: rgb(255, 116, 0) !important;
+  stroke: var(--element-dragger-color) !important;
 }
 
 .djs-dragging {
@@ -266,8 +356,7 @@ marker.djs-dragger tspan {
  * snapping
  */
 .djs-snap-line {
-  stroke: rgb(255, 195, 66);
-  stroke: rgba(255, 195, 66, 0.50);
+  stroke: var(--snap-line-stroke-color);
   stroke-linecap: round;
   stroke-width: 2px;
   pointer-events: none;
@@ -277,7 +366,7 @@ marker.djs-dragger tspan {
  * snapping
  */
 .djs-crosshair {
-  stroke: #555;
+  stroke: var(--space-tool-crosshair-stroke-color);
   stroke-linecap: round;
   stroke-width: 1px;
   pointer-events: none;
@@ -303,7 +392,7 @@ marker.djs-dragger tspan {
   padding-top: 5px;
 
   border: none;
-  border-bottom: solid 1px #DDD;
+  border-bottom: solid 1px var(--palette-separator-color);
 
   clear: both;
 }
@@ -318,7 +407,7 @@ marker.djs-dragger tspan {
 
 .djs-palette .entry,
 .djs-palette .djs-palette-toggle {
-  color: #333;
+  color: var(--palette-entry-color);
   font-size: 30px;
 
   text-align: center;
@@ -339,15 +428,15 @@ marker.djs-dragger tspan {
 }
 
 .djs-palette .djs-palette-toggle:hover {
-  background: #666;
+  background: var(--palette-toggle-hover-background-color);
 }
 
 .djs-palette .entry:hover {
-  color: rgb(255, 116, 0);
+  color: var(--palette-entry-hover-color);
 }
 
 .djs-palette .highlighted-entry {
-  color: rgb(255, 116, 0) !important;
+  color: var(--palette-entry-selected-color) !important;
 }
 
 .djs-palette .entry,
@@ -404,8 +493,8 @@ marker.djs-dragger tspan {
 
   cursor: default;
 
-  background-color: #FEFEFE;
-  box-shadow: 0 0 2px 1px #FEFEFE;
+  background-color: var(--context-pad-entry-background-color);
+  box-shadow: 0 0 2px 1px var(--context-pad-entry-background-color);
   pointer-events: all;
 }
 
@@ -414,7 +503,7 @@ marker.djs-dragger tspan {
 }
 
 .djs-context-pad .entry:hover {
-  background: rgb(255, 252, 176);
+  background: var(--context-pad-entry-hover-background-color);
 }
 
 .djs-context-pad.open {
@@ -443,7 +532,7 @@ marker.djs-dragger tspan {
 
 .djs-popup .entry:hover,
 .djs-popup .entry.active:hover {
-  background: rgb(255, 252, 176);
+  background: var(--popup-header-entry-selected-background-color);
 }
 
 .djs-popup .entry.disabled {
@@ -459,9 +548,9 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup .djs-popup-header .entry.active {
-  color: rgb(255, 116, 0);
-  border: solid 1px rgb(255, 116, 0);
-  background-color: #F6F6F6;
+  color: var(--popup-header-entry-selected-color);
+  border: solid 1px var(--popup-header-entry-selected-color);
+  background-color: var(--popup-header-entry-selected-background-color);
 }
 
 .djs-popup-body .entry {
@@ -473,11 +562,11 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup-body {
-  background-color: #FEFEFE;
+  background-color: var(--popup-body-background-color);
 }
 
 .djs-popup-header {
-  border-bottom: 1px solid #DDD;
+  border-bottom: 1px solid var(--popup-header-separator-color);
 }
 
 .djs-popup-header .entry {
@@ -492,9 +581,15 @@ marker.djs-dragger tspan {
 /**
  * popup / palette styles
  */
-.djs-popup, .djs-palette {
-  background: #FAFAFA;
-  border: solid 1px #CCC;
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color);
+  border-radius: 2px;
+}
+
+.djs-popup {
+  background: var(--popup-background-color);
+  border: solid 1px var(--popup-border-color);
   border-radius: 2px;
 }
 
@@ -516,17 +611,23 @@ marker.djs-dragger tspan {
  * bendpoints
  */
 .djs-segment-dragger .djs-visual {
-  fill: rgba(255, 255, 121, 0.2);
+  display: none;
+
+  fill: var(--bendpoint-fill-color);
+  stroke: var(--bendpoint-stroke-color);
   stroke-width: 1px;
   stroke-opacity: 1;
-  stroke: rgba(255, 255, 121, 0.3);
+}
+
+.djs-segment-dragger:hover .djs-visual {
+  display: block;
 }
 
 .djs-bendpoint .djs-visual {
-  fill: rgba(255, 255, 121, 0.8);
+  fill: var(--bendpoint-fill-color);
+  stroke: var(--bendpoint-stroke-color);
   stroke-width: 1px;
   stroke-opacity: 0.5;
-  stroke: black;
 }
 
 .djs-segment-dragger:hover,
@@ -550,9 +651,9 @@ marker.djs-dragger tspan {
 .djs-segment-dragger.djs-dragging .djs-visual,
 .djs-bendpoint:hover .djs-visual,
 .djs-bendpoint.floating .djs-visual {
-  fill: yellow;
-  stroke-opacity: 0.5;
-  stroke: black;
+  fill: var(--bendpoint-fill-color);
+  stroke: var(--bendpoint-stroke-color);
+  stroke-opacity: 1;
 }
 
 .djs-bendpoint.floating .djs-hit {
@@ -561,8 +662,8 @@ marker.djs-dragger tspan {
 
 .djs-segment-dragger .djs-hit,
 .djs-bendpoint .djs-hit {
-  pointer-events: all;
   fill: none;
+  pointer-events: all;
 }
 
 .djs-segment-dragger.horizontal .djs-hit {
@@ -598,34 +699,22 @@ marker.djs-dragger tspan {
   opacity: 1.0;
 }
 
-.djs-segment-dragger.djs-dragging .djs-visual,
-.djs-bendpoint.djs-dragging .djs-visual {
-  fill: yellow;
-  stroke-opacity: 0.5;
-}
-
 
 /**
  * tooltips
  */
 .djs-tooltip-error {
-  font-size: 11px;
-  line-height: 18px;
-  text-align: left;
-
-  padding: 5px;
-
-  opacity: 0.7;
-}
-
-.djs-tooltip-error > * {
   width: 160px;
+  padding: 6px;
 
-  background: rgb(252, 236, 240);
-  color: rgb(158, 76, 76);
-  padding: 3px 7px;
-  border-radius: 5px;
-  border-left: solid 5px rgb(174, 73, 73);
+  background: var(--tooltip-error-background-color);
+  border: solid 1px var(--tooltip-error-border-color);
+  border-radius: 2px;
+  color: var(--tooltip-error-color);
+  font-size: 12px;
+  line-height: 16px;
+  
+  opacity: 0.75;
 }
 
 .djs-tooltip-error:hover {
@@ -651,9 +740,10 @@ marker.djs-dragger tspan {
 
   font-size: 1.05em;
   opacity: 0.9;
-  background: #FAFAFA;
-  border: solid 1px #CCC;
+  background: var(--search-container-background-color);
+  border: solid 1px var(--search-container-border-color);
   border-radius: 2px;
+  box-shadow: 0 0 0 2px var(--search-container-box-shadow-color), 0 0 0 1px var(--search-container-box-shadow-inset-color) inset;
 }
 
 .djs-search-container:not(.open) {
@@ -664,12 +754,12 @@ marker.djs-dragger tspan {
   font-size: 1.05em;
   width: 100%;
   padding: 6px 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--search-input-border-color);
 }
 
 .djs-search-input input:focus {
   outline: none;
-  border-color: #52B415;
+  border-color: var(--search-input-border-color);
 }
 
 .djs-search-results {
@@ -679,7 +769,6 @@ marker.djs-dragger tspan {
 }
 
 .djs-search-results:hover {
-  /*background: #fffdd7;*/
   cursor: pointer;
 }
 
@@ -687,12 +776,12 @@ marker.djs-dragger tspan {
   width: 100%;
   padding: 6px 10px;
   background: white;
-  border-bottom: solid 1px #AAA;
+  border-bottom: solid 1px var(--search-result-border-color);
   border-radius: 1px;
 }
 
 .djs-search-highlight {
-  color: black;
+  color: var(--search-result-highlight-color);
 }
 
 .djs-search-result-primary {
@@ -705,20 +794,19 @@ marker.djs-dragger tspan {
 }
 
 .djs-search-result:hover {
-  background: #fdffd6;
+  background: var(--search-result-selected-color);
 }
 
 .djs-search-result-selected {
-  background: #fffcb0;
+  background: var(--search-result-selected-color);
 }
 
 .djs-search-result-selected:hover {
-  background: #f7f388;
+  background: var(--search-result-selected-color);
 }
 
 .djs-search-overlay {
-  background: yellow;
-  opacity: 0.3;
+  background: var(--search-result-selected-color);
 }
 
 /**

src/main/resources/resources/bpmnjs/resources/activiti.json

@@ -890,6 +890,16 @@
           "name": "fields",
           "type": "Field",
           "isMany": true
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "eventDefinitions",
+          "type": "bpmn:TimerEventDefinition",
+          "isMany": true
         }
       ]
     },
@@ -961,7 +971,29 @@
       ]
     },
     {
-      "name": "FormProperty",
+      "name": "FormData",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:StartEvent",
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
       "superClass": [ "Element" ],
       "properties": [
         {

src/main/resources/resources/bpmnjs/resources/properties-panel/provider/activiti/parts/implementation/FieldInjection.js

@@ -22,7 +22,7 @@ var DEFAULT_PROPS = {
   'expression': undefined
 };
 
-var ACTIVITI_FIELD_EXTENSION_ELEMENT = 'activiti:FormProperty';
+var ACTIVITI_FIELD_EXTENSION_ELEMENT = 'activiti:Field';
 
 module.exports = function(element, bpmnFactory, translate, options) {
 

src/main/resources/resources/bpmnjs/resources/tools.js

@@ -5,35 +5,15 @@
  */
 
 import $ from 'jquery';
-import x2js from 'x2js';
 const proHost = window.location.protocol + "//" + window.location.host;
 const href = window.location.href.split("bpmnjs")[0];
 const key = href.split(window.location.host)[1];
 const publicurl = proHost + key;
-//const publicurl='http://localhost:8080';
- const $x2j= new x2js()
 const tools = {
     registerFileDrop(container, callback) {
         container.get(0).addEventListener('dragover', tools.handleDragOver, false);
         container.get(0).addEventListener('drop', tools.handleFileSelect, false);
     },
-    handleFileSelect(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        var files = e.dataTransfer.files;
-        var file = files[0];
-        var reader = new FileReader();
-        reader.onload = function (e) {
-            var xml = e.target.result;
-            callback(xml);
-        };
-        reader.readAsText(file);
-    },
-    handleDragOver(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        e.dataTransfer.dropEffect = 'copy';
-    },
     /**
      * 获取地址栏参数
      * @param {string} value
@@ -85,14 +65,13 @@ const tools = {
      * 保存bpmn对象
      * @param {object} bpmnModeler bpmn对象
      */
-    saveBpmn(bpmnModeler,text) {
+    saveBpmn(bpmnModeler) {
         bpmnModeler.saveXML({ format: true }, function (err, xml) {
             if (err) {
                 return console.error('保存失败，请重试', err);
             }
             console.log(xml)
             var param={
-                    "deploymentName":text,
                     "stringBPMN":xml
                 }
             $.ajax({
@@ -120,7 +99,7 @@ const tools = {
      * @param {object} bpmnModeler bpmn对象
      */
     downLoad(bpmnModeler) {
-        var downloadLink = $("#saveBpmn")
+        var downloadLink = $("#downloadBpmn")
         bpmnModeler.saveXML({ format: true }, function (err, xml) {
             if (err) {
                 return console.error('could not save BPMN 2.0 diagram', err);
@@ -231,23 +210,6 @@ const tools = {
             "margin-top": "-" + mgtop + "px"
         })
     },
-    /**
-     * 修改camunda为activiti
-     * @param json
-     */
-    camundaChangeActiviti(xmlfile){
-        const objXML = xmlfile.replace(/camunda/gi,"activiti");
-        return objXML;
-    },
-    /**
-     * 修改activiti为camunda
-     * @param json
-     */
-    acitvitiChangeCamunda(xmlfile){
-        const objXML = xmlfile.replace(/activiti/gi,"camunda");
-        return objXML;
-    },
-
     /**
      * 判断是否是数组
      * @param value
@@ -266,51 +228,40 @@ const tools = {
      * @returns {Array}
      */
     getByColor(data){
+
         var ColorJson=[]
-        for(var i in data){
-            switch (i) {
-                case "waitingToDo":
-                    for(var k in data[i]){
-                        var par={
-                            "name": data[i][k],
-                            "stroke":"green",
-                            "fill":"yellow"
-                        }
-                        ColorJson.push(par)
-                    }
-                    break
-                case "highPoint":
-                    for(var k in data[i]){
-                        var par={
-                            "name": data[i][k],
-                            "stroke":"gray",
-                            "fill":"#eae9e9"
+        for(var k in data['highLine']){
+            var par={
+                "name": data['highLine'][k],
+                "stroke":"green",
+                "fill":"green"
+            }
+            ColorJson.push(par)
+        }
+        for(var k in data['highPoint']){
+            var par={
+                "name": data['highPoint'][k],
+                "stroke":"gray",
+                "fill":"#eae9e9"
 
-                        }
-                        ColorJson.push(par)
-                    }
-                    break
-                case "iDo":
-                    for(var k in data[i]){
-                        var par={
-                            "name": data[i][k],
-                            "stroke":"green",
-                            "fill":"#a3d68e"
-                        }
-                        ColorJson.push(par)
-                    }
-                    break
-                case "highLine":
-                    for(var k in data[i]){
-                        var par={
-                            "name": data[i][k],
-                            "stroke":"green",
-                            "fill":"green"
-                        }
-                        ColorJson.push(par)
-                    }
-                    break
             }
+            ColorJson.push(par)
+        }
+        for(var k in data['iDo']){
+            var par={
+                "name": data['iDo'][k],
+                "stroke":"green",
+                "fill":"#a3d68e"
+            }
+            ColorJson.push(par)
+        }
+        for(var k in data['waitingToDo']){
+            var par={
+                "name": data['waitingToDo'][k],
+                "stroke":"green",
+                "fill":"yellow"
+            }
+            ColorJson.push(par)
         }
         return ColorJson
     }