bpmn及配套插件版本降低,样式调整

ruoyi-ui/package.json

@@ -41,12 +41,16 @@
     "@riophae/vue-treeselect": "0.4.0",
     "ant-design-vue": "^1.7.8",
     "axios": "0.24.0",
-    "bpmn-js": "^14.0.0",
-    "bpmn-js-properties-panel": "^1.26.0",
-    "camunda-bpmn-moddle": "^7.0.1",
+    "bpmn-js": "^7.3.1",
+    "bpmn-js-properties-panel": "^0.37.2",
+    "bpmn-moddle": "^6.0.0",
+    "camunda-bpmn-moddle": "^4.5.0",
     "circular-json": "^0.5.9",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
+    "diagram-js-context-pad": "^1.0.2",
+    "diagram-js-grid-bg": "^1.0.4",
+    "diagram-js-minimap": "^2.0.4",
     "echarts": "5.4.0",
     "element-ui": "2.15.12",
     "file-saver": "2.0.5",

ruoyi-ui/src/main.js

@@ -12,8 +12,9 @@ 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'
+import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
 // 左边工具栏以及编辑节点的样式
-import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'
+// import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'
 // bpmn样式结束
 
 import '@/assets/styles/index.scss' // global css

ruoyi-ui/src/views/system/bpmn/components/properties-panel-extension/descriptors/authority.json

@@ -0,0 +1,22 @@
+{
+  "name": "Authority",
+  "prefix": "authority",
+  "uri": "http://authority",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "LinDaiDaiStartEvent",
+      "extends": ["bpmn:BaseElement"],
+      "properties": [
+        {
+          "name": "title",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ]
+}

ruoyi-ui/src/views/system/bpmn/components/properties-panel-extension/provider/authority/AuthorityPropertiesProvider.js

@@ -0,0 +1,92 @@
+import inherits from 'inherits';
+
+import PropertiesActivator from 'bpmn-js-properties-panel/lib/PropertiesActivator';
+
+
+import idProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps';
+import nameProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps';
+import processProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps';
+import linkProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps';
+import eventProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps';
+import documentationProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps';
+
+import TitleProps from './parts/TitleProps';
+
+function createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate) {
+
+  var generalGroup = {
+    id: 'general',
+    label: 'General',
+    entries: []
+  };
+  idProps(generalGroup, element, translate);
+  nameProps(generalGroup, element, bpmnFactory, canvas, translate);
+  processProps(generalGroup, element, translate);
+
+  var detailsGroup = {
+    id: 'details',
+    label: 'Details',
+    entries: []
+  };
+  linkProps(detailsGroup, element, translate);
+  eventProps(detailsGroup, element, bpmnFactory, elementRegistry, translate);
+
+  var documentationGroup = {
+    id: 'documentation',
+    label: 'Documentation',
+    entries: []
+  };
+
+  documentationProps(documentationGroup, element, bpmnFactory, translate);
+
+  return [
+    generalGroup,
+    detailsGroup,
+    documentationGroup
+  ];
+}
+
+function createAuthorityTabGroups(element) {
+  var editAuthorityGroup = {
+    id: 'edit-authority',
+    label: '编辑权限',
+    entries: []
+  }
+
+  // 每个属性都有自己的props方法
+  TitleProps(editAuthorityGroup, element);
+  // OtherProps1(editAuthorityGroup, element);
+  // OtherProps2(editAuthorityGroup, element);
+
+  return [
+    editAuthorityGroup
+  ];
+}
+
+export default function AuthorityPropertiesProvider(
+  eventBus, bpmnFactory, canvas,
+  elementRegistry, translate
+) {
+  PropertiesActivator.call(this, eventBus);
+
+  this.getTabs = function (element) {
+    var generalTab = {
+      id: 'general',
+      label: 'General',
+      groups: createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate)
+    };
+
+    var authorityTab = {
+      id: 'authority',
+      label: '权限',
+      groups: createAuthorityTabGroups(element)
+    };
+    return [
+      generalTab,
+      authorityTab
+    ];
+  }
+}
+
+inherits(AuthorityPropertiesProvider, PropertiesActivator);
+

ruoyi-ui/src/views/system/bpmn/components/properties-panel-extension/provider/authority/index.js

@@ -0,0 +1,6 @@
+import AuthorityPropertiesProvider from './AuthorityPropertiesProvider';
+
+export default {
+  __init__: ['propertiesProvider'],
+  propertiesProvider: ['type', AuthorityPropertiesProvider]
+};

ruoyi-ui/src/views/system/bpmn/components/properties-panel-extension/provider/authority/parts/TitleProps.js

@@ -0,0 +1,16 @@
+// /parts/TitleProps.js
+import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
+
+import { is } from 'bpmn-js/lib/util/ModelUtil';
+
+export default function (group, element) {
+  if (is(element, 'bpmn:StartEvent')) { // 可以在这里做类型判断
+    group.entries.push(entryFactory.textField(element, {
+      id: 'title',
+      description: '权限的标题',
+      label: '标题',
+      modelProperty: 'title'
+    }));
+  }
+
+}

ruoyi-ui/src/views/system/bpmn/index.vue

@@ -34,15 +34,22 @@
 import BpmnModeler from "bpmn-js/lib/Modeler";
 import xmlStr from "./mock/xmlStr"; // 这里是直接引用了xml字符串
 // 工具栏相关
-import {
-  BpmnPropertiesPanelModule,
-  BpmnPropertiesProviderModule,
-} from "bpmn-js-properties-panel";
-
+import propertiesPanelModule from "bpmn-js-properties-panel";
+import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
 import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";
+
+// 自定义panel
+// import propertiesProviderModule from "@/views/system/bpmn/components/properties-panel-extension/provider/authority/index";
+// import authorityModdleDescriptor from "@/views/system/bpmn/components/properties-panel-extension/descriptors/authority.json";
+// 网格插件
+import GridLineModule from "diagram-js-grid-bg";
+import ContextPadModule from "diagram-js-context-pad"; //上下文优化
 // 汉化
 import customTranslate from "./mock/customTranslate";
 
+import minimapModule from "diagram-js-minimap"; //导入小地图
+import "./mock/minimap.css"; //自定义小地图样式
+
 export default {
   name: "",
   components: {},
@@ -76,18 +83,24 @@ export default {
         },
         additionalModules: [
           // 工具栏模块
-          BpmnPropertiesPanelModule,
-          BpmnPropertiesProviderModule,
+          propertiesPanelModule,
+          propertiesProviderModule,
           // 汉化模块
           customTranslateModule,
+          GridLineModule, //网格
+          minimapModule, //小地图
         ],
         moddleExtensions: {
           camunda: camundaModdleDescriptor,
+          // authority: authorityModdleDescriptor,
+        },
+        contextPad: {
+          beauty: true,
         },
       });
-      this.createNewDiagram();
+      this.createNewDiagram(xmlStr);
     },
-    async createNewDiagram() {
+    async createNewDiagram(xmlStr) {
       try {
         await this.bpmnModeler.importXML(xmlStr);
         this.success();
@@ -96,6 +109,7 @@ export default {
       }
     },
     success() {
+      console.log(this.bpmnModeler);
       console.log("创建成功!");
     },
     newDiagram() {
@@ -103,31 +117,35 @@ export default {
     },
 
     // 文件操作相关方法
-    async downloadBpmn() {
-      try {
-        let resXML = await this.bpmnModeler.saveXML();
-        const name = `${this.getFilename(xmlStr)}.bpmn`;
-        // 将文件名以及数据交给下载方法
-        this.download({ name: name, data: resXML });
-      } catch (error) {
-        console.log(error);
-        this.$modal.msgError("文件导出失败,请稍后再试");
-      }
-    },
-    async downloadSvg() {
-      try {
-        let resXML = await this.bpmnModeler.saveXML();
-        const name = `${this.getFilename(xmlStr)}.svg`;
-        // 从建模器画布中提取svg图形标签
-        let context = "";
-        const djsGroupAll = this.$refs.canvas.querySelectorAll(".djs-group");
-        for (let item of djsGroupAll) {
-          context += item.innerHTML;
+    downloadBpmn() {
+      this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
+        if (!err) {
+          // 获取文件名
+          const name = `${this.getFilename(xml)}.bpmn`;
+          // 将文件名以及数据交给下载方法
+          this.download({ name: name, data: xml });
         }
-        // 获取svg的基本数据，长宽高
-        const viewport = this.$refs.canvas.querySelector(".viewport").getBBox();
-        // 将标签和数据拼接成一个完整正常的svg图形
-        const svg = `
+      });
+    },
+    downloadSvg() {
+      this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
+        if (!err) {
+          // 获取文件名
+          const name = `${this.getFilename(xml)}.svg`;
+
+          // 从建模器画布中提取svg图形标签
+          let context = "";
+          const djsGroupAll = this.$refs.canvas.querySelectorAll(".djs-group");
+          for (let item of djsGroupAll) {
+            context += item.innerHTML;
+          }
+          // 获取svg的基本数据，长宽高
+          const viewport = this.$refs.canvas
+            .querySelector(".viewport")
+            .getBBox();
+
+          // 将标签和数据拼接成一个完整正常的svg图形
+          const svg = `
             <svg
               xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -139,13 +157,12 @@ export default {
               ${context}
             </svg>
           `;
-        // 将文件名以及数据交给下载方法
-        this.download({ name: name, data: svg });
-      } catch (error) {
-        console.log(error);
-        this.$modal.msgError("文件导出失败,请稍后再试");
-      }
+          // 将文件名以及数据交给下载方法
+          this.download({ name: name, data: svg });
+        }
+      });
     },
+
     openBpmn(file) {
       const reader = new FileReader();
       // 读取File对象中的文本信息，编码格式为UTF-8
@@ -156,6 +173,7 @@ export default {
       };
       return false;
     },
+
     getFilename(xml) {
       let start = xml.indexOf("process");
       let filename = xml.substr(start, xml.indexOf(">"));
@@ -186,7 +204,7 @@ export default {
 
 <style scoped lang="scss">
 .wrapper {
-  height: 100vh;
+  height: calc(100vh - 173px);
 }
 .container {
   position: relative;

ruoyi-ui/src/views/system/bpmn/mock/minimap.css

@@ -0,0 +1,90 @@
+.djs-minimap {
+  position: absolute;
+  top: 20px;
+  /*自定义样式*/
+  right: 10px;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: solid 1px #ccc;
+  border-radius: 2px;
+  box-sizing: border-box;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.djs-minimap:not(.open) {
+  overflow: hidden;
+}
+
+.djs-minimap .map {
+  display: none;
+}
+
+.djs-minimap.open .map {
+  display: block;
+}
+
+.djs-minimap .map {
+  width: 320px;
+  height: 180px;
+}
+
+.djs-minimap:not(.open) .toggle {
+  padding: 10px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.djs-minimap .toggle:before {
+  content: attr(title);
+}
+
+.djs-minimap.open .toggle {
+  position: absolute;
+  right: 0;
+  padding: 6px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.djs-minimap .map {
+  cursor: crosshair;
+}
+
+.djs-minimap .viewport {
+  /* fill: rgba(255, 116, 0, 0.25); */
+  fill: none;
+  stroke: none;
+}
+
+.djs-minimap .viewport-dom {
+  position: absolute;
+  border: solid 2px orange;
+  border-radius: 2px;
+  box-sizing: border-box;
+  cursor: move;
+}
+
+.djs-minimap:not(.open) .viewport-dom {
+  display: none;
+}
+
+.djs-minimap.open .overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.2);
+  pointer-events: none;
+}
+
+.djs-minimap .cursor-crosshair {
+  cursor: crosshair;
+}
+
+.djs-minimap .cursor-move {
+  cursor: move;
+}

ruoyi-ui/src/views/system/bpmn/mock/translationsGerman.js

@@ -235,5 +235,9 @@ export default {
   'Loop Cardinality': '实例数量',
   'Collection': '任务参与人列表',
   'Element Variable': '元素变量',
-  'Completion Condition': '完成条件'
+  'Completion Condition': '完成条件',
+  //小地图
+  'Open minimap': '打开小地图',
+  'Close minimap': '关闭小地图'
+
 };