perf 流程设计器适配Vue3

package.json

@@ -43,7 +43,7 @@
     "@zxcvbn-ts/core": "^2.0.1",
     "ant-design-vue": "^3.2.15",
     "axios": "^0.26.1",
-    "bpmn-js": "^11.5.0",
+    "bpmn-js": "^7.5.0",
     "codemirror": "^5.65.3",
     "cron-parser": "^4.6.0",
     "cropperjs": "^1.5.12",

src/components/Bpmn/ProcessViewer.vue

@@ -31,7 +31,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
   // 汉化
   import customTranslate from './common/customTranslate'
   import Modeler from 'bpmn-js/lib/Modeler'
@@ -40,271 +40,265 @@
 
   import { addArrow } from './processViewerUtils'
   import { useDict } from '/@/hooks/bootx/useDict'
+  import { $ref } from 'vue/macros'
+  import { onMounted, watch } from 'vue'
 
   const { dictConvert } = useDict()
-
-  export default {
-    name: 'WorkflowBpmnModeler',
-    props: {
+  const props = withDefaults(
+    defineProps<{
       // bpmn流程图
-      xml: { type: String, default: '' },
+      xml: string
       // 实例
-      instance: { type: Object, default: () => {} },
+      instance: any
       // 执行流程节点
-      flowNodeList: { type: Array, default: () => [] },
+      flowNodeList: any
       // 节点流程任务组
-      nodeTaskList: { type: Object, default: () => {} },
+      nodeTaskList: any
       // 画布高度
-      height: { type: Number, default: 650 },
+      height: number
+    }>(),
+    {
+      xml: '',
+      instance: {},
+      flowNodeList: [],
+      nodeTaskList: {},
+      height: 650,
     },
-    data() {
-      return {
-        modeler: null,
-        zoom: 1,
-        element: null,
-        drawerVisible: false,
-        currentTaskList: [],
-        cs: 1,
-      }
+  )
+
+  let canvas = $ref()
+
+  let modeler = $ref<any>()
+  let zoom = $ref(1)
+  let element = $ref(null)
+  let drawerVisible = $ref(false)
+  let currentTaskList = $ref([])
+
+  let elementOverlayIds = $ref<any>()
+  let overlays = $ref<any>()
+
+  watch(
+    () => props.xml,
+    (newVal, oldVal) => {
+      console.log(newVal)
+      createDiagram()
     },
-    watch: {
-      cs(val) {
-        if (val) {
-        }
-      },
-      xml: {
-        handler(newQuestion) {
-          // 在组件实例创建时会立即调用
-          console.log(newQuestion)
-          this.createDiagram()
+  )
+  watch(
+    () => props.flowNodeList,
+    (newVal, oldVal) => {
+      console.log(props.xml)
+      createDiagram()
+    }
+  )
+  watch(
+    () => props.nodeTaskList,
+    (newVal, oldVal) => createDiagram(),
+  )
+
+  onMounted(() => {
+    initModeler()
+    initEventBind()
+  })
+
+  /**
+   * 生成实例
+   */
+  function initModeler() {
+    modeler = new Modeler({
+      container: canvas,
+      additionalModules: [
+        {
+          translate: ['value', customTranslate],
+          paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
+          labelEditingProvider: ['value', ''], // 禁用节点编辑
+          contextPadProvider: ['value', ''], // 禁用图形菜单
+          bendpoints: ['value', {}], // 禁用连线拖动
+          // zoomScroll: ['value', ''], // 禁用滚动
+          // moveCanvas: ['value', ''], // 禁用拖动整个流程图
+          move: ['value', ''], // 禁用单个图形拖动
         },
+      ],
+      moddleExtensions: {
+        flowable: flowableModdle,
       },
-      // xml(val) {
-      //   console.log(1)
-      //   if (val) {
-      //     this.createDiagram()
-      //   }
-      // },
-      flowNodeList(val) {
-        console.log(2)
-        if (val) {
-          this.createDiagram()
-        }
-      },
-      nodeTaskList(val) {
-        console.log(3)
-        if (val) {
-          this.createDiagram()
-        }
-      },
-    },
-    mounted() {
-      this.initModeler()
-      this.initEventBind()
-      setInterval(() => {
-        this.cs++
-      }, 2000)
-    },
-    methods: {
-      /**
-       * 生成实例
-       */
-      initModeler() {
-        this.modeler = new Modeler({
-          container: this.$refs.canvas,
-          additionalModules: [
-            {
-              translate: ['value', customTranslate],
-              paletteProvider: ['value', ''], // 禁用/清空左侧工具栏
-              labelEditingProvider: ['value', ''], // 禁用节点编辑
-              contextPadProvider: ['value', ''], // 禁用图形菜单
-              bendpoints: ['value', {}], // 禁用连线拖动
-              zoomScroll: ['value', ''], // 禁用滚动
-              moveCanvas: ['value', ''], // 禁用拖动整个流程图
-              move: ['value', ''], // 禁用单个图形拖动
-            },
-          ],
-          moddleExtensions: {
-            flowable: flowableModdle,
-          },
-        })
-      },
-      /**
-       * 创建流程图
-       */
-      async createDiagram() {
-        if (!this.xml) {
-          return
-        }
-        // 将字符串转换成图显示出来
-        const data = this.xml.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
-          return str.replace(/</g, '&lt;')
-        })
-        await this.modeler.importXML(data)
-        this.initSvg()
-        this.fillColor()
-        this.fitViewport()
-      },
+    })
+  }
 
-      /**
-       * 给节点绑定事件 信息显示处理,
-       */
-      initEventBind() {
-        const eventBus = this.modeler.get('eventBus')
-        // 注册需要的监听事件
-        const types = ['bpmn:UserTask', 'bpmn:StartEvent', 'bpmn:EndEvent']
-        eventBus.on('element.hover', (eventObj) => {
-          const element = eventObj ? eventObj.element : null
-          if (types.includes(element.type)) {
-            this.elementHover(element)
-          }
-        })
-        eventBus.on('element.out', (eventObj) => {
-          const element = eventObj ? eventObj.element : null
-          if (types.includes(element.type)) {
-            this.elementOut(element)
-          }
-        })
-        eventBus.on('element.click', (eventObj) => {
-          const element = eventObj ? eventObj.element : null
-          if (element.type === 'bpmn:UserTask') {
-            this.elementClick(element)
-          }
-        })
-      },
-      /**
-       *  流程图的元素被 hover
-       */
-      elementHover(element) {
-        this.element = element
-        !this.elementOverlayIds && (this.elementOverlayIds = {})
-        !this.overlays && (this.overlays = this.modeler.get('overlays'))
+  /**
+   * 创建流程图
+   */
+  async function createDiagram() {
+    console.log(123)
+    if (!props.xml) {
+      return
+    }
+    // 将字符串转换成图显示出来
+    const data = props.xml.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
+      return str.replace(/</g, '&lt;')
+    })
+    await modeler?.importXML(data)
+    initSvg()
+    fillColor()
+    fitViewport()
+  }
+  /**
+   * 给节点绑定事件 信息显示处理,
+   */
+  function initEventBind() {
+    const eventBus = modeler.get('eventBus')
+    // 注册需要的监听事件
+    const types = ['bpmn:UserTask', 'bpmn:StartEvent', 'bpmn:EndEvent']
+    eventBus.on('element.hover', (eventObj) => {
+      const element = eventObj ? eventObj.element : null
+      if (types.includes(element.type)) {
+        elementHover(element)
+      }
+    })
+    eventBus.on('element.out', (eventObj) => {
+      const element = eventObj ? eventObj.element : null
+      if (types.includes(element.type)) {
+        elementOut(element)
+      }
+    })
+    eventBus.on('element.click', (eventObj) => {
+      const element = eventObj ? eventObj.element : null
+      if (element.type === 'bpmn:UserTask') {
+        elementClick(element)
+      }
+    })
+  }
+  /**
+   *  流程图的元素被 hover
+   */
+  function elementHover(e) {
+    element = e
+    !elementOverlayIds && (elementOverlayIds = {})
+    !overlays && (overlays = modeler.get('overlays'))
 
-        let html = ''
-        if (element.type === 'bpmn:StartEvent') {
-          html = `<span>发起人：${this.instance.startUserName}</span>
-                  <span>发起时间：${this.instance.startTime}</span>`
-        }
-        if (element.type === 'bpmn:UserTask') {
-          const tasks = this.nodeTaskList[element.id]
-          if (tasks) {
-            const task = tasks[0]
-            if (task) {
-              html += `<span>执行人：${task.userName}</span>
-                  <span>状态：${this.stateNameConvert(task.state)}</span>
+    let html = ''
+    if (e.type === 'bpmn:StartEvent') {
+      html = `<span>发起人：${props.instance.startUserName}</span>
+                  <span>发起时间：${props.instance.startTime}</span>`
+    }
+    if (e.type === 'bpmn:UserTask') {
+      const tasks = props.nodeTaskList[e.id]
+      if (tasks) {
+        const task = tasks[0]
+        if (task) {
+          html += `<span>执行人：${task.userName}</span>
+                  <span>状态：${stateNameConvert(task.state)}</span>
                   <span>处理结果：${dictConvert('BpmTaskResult', task.result)}</span>
                   <span>结束时间：${task.endTime ? task.endTime : ''}</span>
                   <span>审批意见：${task.reason ? task.reason : ''}</span>`
-            }
-            if (tasks[1]) {
-              html += `</br>
+        }
+        if (tasks[1]) {
+          html += `</br>
             <span>点击查看更多...</span>`
-            }
-          } else {
-            return
-          }
         }
-        if (element.type === 'bpmn:EndEvent') {
-          // 判断节点是否结束
-          if (!this.instance.endTime) {
-            return
-          }
-          html = `<span>结束时间：${this.instance.endTime}</span>`
-        }
-        this.elementOverlayIds[element.id] = this.overlays.add(element, {
-          position: { left: -50, bottom: 10 },
-          html: `<div class="element-overlays">${html}</div>`,
-        })
-      },
-      /**
-       * 流程图的元素被 out
-       */
-      elementOut(element) {
-        this.overlays.remove({ element })
-        this.elementOverlayIds[element.id] = null
-      },
-      /**
-       * 点击事件
-       */
-      elementClick(element) {
-        this.currentTaskList = this.nodeTaskList[element.id]
-        if (this.currentTaskList) {
-          this.drawerVisible = true
-        }
-      },
-      /**
-       * 处理SVG元素
-       */
-      initSvg() {
-        // 添加完成箭头
-        addArrow()
-      },
-
-      /**
-       * 染色
-       */
-      fillColor() {
-        const canvas = this.modeler.get('canvas')
-        this.modeler._definitions.rootElements[0].flowElements.forEach((n) => {
-          const state = this.getNodeTaskState(n)
-          if (['pass', 'skip'].includes(state)) {
-            canvas.addMarker(n.id, 'highlight')
-          } else if (state === 'running') {
-            canvas.addMarker(n.id, 'highlight-todo')
-          } else if (state === 'reject') {
-            canvas.addMarker(n.id, 'highlight-reject')
-          } else if (['back', 'cancel', 'retrieve'].includes(state)) {
-            canvas.addMarker(n.id, 'highlight-cancel')
-          } else {
-            // 其他状态不进行处理
-          }
-        })
-      },
-      /**
-       * 让图能自适应屏幕
-       */
-      fitViewport() {
-        this.zoom = this.modeler.get('canvas').zoom('fit-viewport')
-        const bbox = document.querySelector('.flow-containers .viewport').getBBox()
-        const currentViewbox = this.modeler.get('canvas').viewbox()
-        const elementMid = {
-          x: bbox.x + bbox.width / 2 - 65,
-          y: bbox.y + bbox.height / 2,
-        }
-        this.modeler.get('canvas').viewbox({
-          x: elementMid.x - currentViewbox.width / 2,
-          y: elementMid.y - currentViewbox.height / 2,
-          width: currentViewbox.width,
-          height: currentViewbox.height,
-        })
-        this.zoom = (bbox.width / currentViewbox.width) * 1.8
-      },
-      /**
-       * 获取节点的任务状态
-       */
-      getNodeTaskState(node) {
-        if (this.nodeTaskList) {
-          const tasks = this.nodeTaskList[node.id]
-          if (!tasks) {
-            // 处理非用户任务节点
-            return this.flowNodeList.find((m) => m.activityId === node.id) ? 'pass' : ''
-          }
-          // 是否是多个
-          if (tasks?.length > 1) {
-            // 判断是否有执行中状态
-            return tasks.find((t) => t.state === 'running') ? 'running' : tasks[0].state
-          } else {
-            return tasks[0].state
-          }
-        }
-      },
-      /**
-       * 任务状态翻译
-       */
-      stateNameConvert(state) {
-        return dictConvert('BpmTaskState', state)
-      },
-    },
+      } else {
+        return
+      }
+    }
+    if (e.type === 'bpmn:EndEvent') {
+      // 判断节点是否结束
+      if (!props.instance.endTime) {
+        return
+      }
+      html = `<span>结束时间：${props.instance.endTime}</span>`
+    }
+    elementOverlayIds[e.id] = overlays.add(e, {
+      position: { left: -50, bottom: 10 },
+      html: `<div class="element-overlays">${html}</div>`,
+    })
+  }
+  /**
+   * 流程图的元素被 out
+   */
+  function elementOut(element) {
+    console.log(element)
+    overlays.remove({ element })
+    elementOverlayIds[element.id] = null
+  }
+  /**
+   * 点击事件
+   */
+  function elementClick(element) {
+    currentTaskList = props.nodeTaskList[element.id]
+    if (currentTaskList) {
+      drawerVisible = true
+    }
+  }
+  /**
+   * 处理SVG元素
+   */
+  function initSvg() {
+    // 添加完成箭头
+    addArrow()
+  }
+  /**
+   * 染色
+   */
+  function fillColor() {
+    const canvas = modeler.get('canvas')
+    modeler._definitions.rootElements[0].flowElements.forEach((n) => {
+      const state = getNodeTaskState(n)
+      if (['pass', 'skip'].includes(state)) {
+        canvas.addMarker(n.id, 'highlight')
+      } else if (state === 'running') {
+        canvas.addMarker(n.id, 'highlight-todo')
+      } else if (state === 'reject') {
+        canvas.addMarker(n.id, 'highlight-reject')
+      } else if (['back', 'cancel', 'retrieve'].includes(state)) {
+        canvas.addMarker(n.id, 'highlight-cancel')
+      } else {
+        // 其他状态不进行处理
+      }
+    })
+  }
+  /**
+   * 让图能自适应屏幕
+   */
+  function fitViewport() {
+    zoom = modeler.get('canvas').zoom('fit-viewport')
+    const bbox = document.querySelector('.flow-containers .viewport').getBBox()
+    const currentViewbox = modeler.get('canvas').viewbox()
+    const elementMid = {
+      x: bbox.x + bbox.width / 2 - 65,
+      y: bbox.y + bbox.height / 2,
+    }
+    modeler.get('canvas').viewbox({
+      x: elementMid.x - currentViewbox.width / 2,
+      y: elementMid.y - currentViewbox.height / 2,
+      width: currentViewbox.width,
+      height: currentViewbox.height,
+    })
+    zoom = (bbox.width / currentViewbox.width) * 1.8
+  }
+  /**
+   * 获取节点的任务状态
+   */
+  function getNodeTaskState(node) {
+    if (props.nodeTaskList) {
+      const tasks = props.nodeTaskList[node.id]
+      if (!tasks) {
+        // 处理非用户任务节点
+        return props.flowNodeList.find((m) => m.activityId === node.id) ? 'pass' : ''
+      }
+      // 是否是多个
+      if (tasks?.length > 1) {
+        // 判断是否有执行中状态
+        return tasks.find((t) => t.state === 'running') ? 'running' : tasks[0].state
+      } else {
+        return tasks[0].state
+      }
+    }
+  }
+  /**
+   * 任务状态翻译
+   */
+  function stateNameConvert(state) {
+    return dictConvert('BpmTaskState', state)
   }
 </script>
 

yarn.lock

@@ -974,14 +974,6 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@bpmn-io/diagram-js-ui@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.npmmirror.com/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.2.tgz#f182476e820641901c10d0079dcfe7b5b022b9f6"
-  integrity sha512-IgOIxOwoqsFB2mMPdXtcbPVPjdYkZ3huW7ipowYLhg5jdRGHlBronQ+LER+lfWro6sPtzEsw7qX8D8Yq9M2S5g==
-  dependencies:
-    htm "^3.1.1"
-    preact "^10.11.2"
-
 "@commitlint/cli@^16.2.3":
   version "16.3.0"
   resolved "https://registry.npmmirror.com/@commitlint/cli/-/cli-16.3.0.tgz#5689f5c2abbb7880d5ff13329251e5648a784b16"
@@ -2800,29 +2792,30 @@ boolbase@^1.0.0:
   resolved "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bpmn-js@^11.5.0:
-  version "11.5.0"
-  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-11.5.0.tgz#0f8a896637a3335173c1734e52d40ed8b5abf651"
-  integrity sha512-Bdj53UvfiDtGE1wmiBmpgjl5RMLhCGV/C841dyC+t4kBHj7vApAeeHs2Qiycj390HO4B2U8UDROLT7yjdXEEUA==
+bpmn-js@^7.5.0:
+  version "7.5.0"
+  resolved "https://registry.npmmirror.com/bpmn-js/-/bpmn-js-7.5.0.tgz#0e4675acdbdff676db859f8cb7ec395d20e7bbd8"
+  integrity sha512-0ANaE6Bikg1GmkcvO7RK0MQPX+EKYKBc+q7OWk39/16NcCdNZ/4UiRcCr9n0u1VUCIDsSU/jJ79TIZFnV5CNjw==
   dependencies:
-    bpmn-moddle "^8.0.0"
-    diagram-js "^11.9.1"
-    diagram-js-direct-editing "^2.0.0"
+    bpmn-moddle "^7.0.4"
+    css.escape "^1.5.1"
+    diagram-js "^6.8.2"
+    diagram-js-direct-editing "^1.6.1"
     ids "^1.0.0"
-    inherits-browser "^0.1.0"
-    min-dash "^4.0.0"
-    min-dom "^4.0.3"
+    inherits "^2.0.4"
+    min-dash "^3.5.2"
+    min-dom "^3.1.3"
     object-refs "^0.3.0"
-    tiny-svg "^3.0.0"
+    tiny-svg "^2.2.2"
 
-bpmn-moddle@^8.0.0:
-  version "8.0.1"
-  resolved "https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-8.0.1.tgz#ba8a009fbd354fb521a11a1dd1417655a9d2ec02"
-  integrity sha512-mwZcrWhi52+JH5Oq58WwKYcUxQ1ZMiDQuzt1bpqiqEEFFnQLqCgtLwEXQuDXFmAuQPdMAghyPzqdOZQqIQVesw==
+bpmn-moddle@^7.0.4:
+  version "7.1.3"
+  resolved "https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz#5b4592001e8f23dbdb18c557531e06489462bf42"
+  integrity sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==
   dependencies:
-    min-dash "^4.0.0"
-    moddle "^6.0.0"
-    moddle-xml "^10.0.0"
+    min-dash "^3.5.2"
+    moddle "^5.0.2"
+    moddle-xml "^9.0.6"
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -3203,11 +3196,6 @@ clone@^2.1.1:
   resolved "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
-clsx@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 codemirror@^5.65.3:
   version "5.65.6"
   resolved "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.6.tgz#fc313797331cbeb3bcab0652d1ec9d0f40c23ab5"
@@ -3298,10 +3286,10 @@ component-emitter@^1.2.1:
   resolved "https://registry.npmmirror.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
-component-event@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmmirror.com/component-event/-/component-event-0.2.1.tgz#8262d2be886c999ad4b85ed3e0dfb3b3e98ca9d3"
-  integrity sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==
+component-event@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmmirror.com/component-event/-/component-event-0.1.4.tgz#3de78fc28782381787e24bf2a7c536bf0142c9b4"
+  integrity sha512-GMwOG8MnUHP1l8DZx1ztFO0SJTFnIzZnBDkXAj8RM2ntV2A6ALlDxgbMY1Fvxlg6WPQ+5IM/a6vg4PEYbjg/Rw==
 
 compute-scroll-into-view@^1.0.17:
   version "1.0.17"
@@ -3700,6 +3688,11 @@ css-what@^6.0.1:
   resolved "https://registry.npmmirror.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -3922,34 +3915,33 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.npmmirror.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
-diagram-js-direct-editing@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmmirror.com/diagram-js-direct-editing/-/diagram-js-direct-editing-2.0.0.tgz#0c7ec8ba2e3bad79bb97384e6acc522a225c07b1"
-  integrity sha512-/12OWL0B0RMCfaT1w3723c729MD42r5fay4wtm2DvxNFNBMdPaEvOHCTA/khLKjFzOzMVKxSzbAp7IEwBGonVw==
+diagram-js-direct-editing@^1.6.1:
+  version "1.8.0"
+  resolved "https://registry.npmmirror.com/diagram-js-direct-editing/-/diagram-js-direct-editing-1.8.0.tgz#7a178cd9203f262842a3e0023f9644e04a157858"
+  integrity sha512-B4Xj+PJfgBjbPEzT3uZQEkZI5xHFB0Izc+7BhDFuHidzrEMzQKZrFGdA3PqfWhReHf3dp+iB6Tt11G9eGNjKMw==
   dependencies:
-    min-dash "^4.0.0"
-    min-dom "^4.0.2"
+    min-dash "^3.5.2"
+    min-dom "^3.1.3"
 
-diagram-js@^11.9.1:
-  version "11.11.0"
-  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-11.11.0.tgz#2c44aebc5197eca43df8394598b2faabcdff1692"
-  integrity sha512-+GJ6NPCihQBOqLKAjrXE+bQNYIhFjrCQgYHfPb22OcrYJ9k6vkTfJfG5PsyJ9P/AEIrXwTnrJAff/iKU1RgfAA==
+diagram-js@^6.8.2:
+  version "6.8.2"
+  resolved "https://registry.npmmirror.com/diagram-js/-/diagram-js-6.8.2.tgz#d3c37915c62c0cc5d95bc533098c8a35b38e67be"
+  integrity sha512-5EKYHjW2mmGsn9/jSenSkm8cScK5sO9eETBRQNIIzgZjxBDJn6eX964L2d7/vrAW9SeuijGUsztL9+NUinSsNg==
   dependencies:
-    "@bpmn-io/diagram-js-ui" "^0.2.2"
-    clsx "^1.2.1"
-    didi "^9.0.2"
+    css.escape "^1.5.1"
+    didi "^4.0.0"
     hammerjs "^2.0.1"
-    inherits-browser "^0.1.0"
-    min-dash "^4.0.0"
-    min-dom "^4.0.2"
+    inherits "^2.0.1"
+    min-dash "^3.5.0"
+    min-dom "^3.1.2"
     object-refs "^0.3.0"
-    path-intersection "^2.2.1"
-    tiny-svg "^3.0.0"
+    path-intersection "^2.2.0"
+    tiny-svg "^2.2.1"
 
-didi@^9.0.2:
-  version "9.0.2"
-  resolved "https://registry.npmmirror.com/didi/-/didi-9.0.2.tgz#e49a80aa281b5672e45519ba1980d7fba2e32cfb"
-  integrity sha512-q2+aj+lnJcUweV7A9pdUrwFr4LHVmRPwTmQLtHPFz4aT7IBoryN6Iy+jmFku+oIzr5ebBkvtBCOb87+dJhb7bg==
+didi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/didi/-/didi-4.0.0.tgz#2b89d892a67fd3777f7642d3bf06697b69e9b622"
+  integrity sha512-AzMElh8mCHOPWPCWfGjoJRla31fMXUT6+287W5ef3IPmtuBcyG9+MkFS7uPP6v3t2Cl086KwWfRB9mESa0OsHQ==
 
 diff-match-patch@^1.0.5:
   version "1.0.5"
@@ -4038,7 +4030,7 @@ domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-domify@^1.4.1:
+domify@^1.3.1:
   version "1.4.1"
   resolved "https://registry.npmmirror.com/domify/-/domify-1.4.1.tgz#2e1e813019646715deeb8d3c5de4d3ef7bddd07e"
   integrity sha512-x18nuiDHMCZGXr4KJSRMf/TWYtiaRo6RX8KN9fEbW54mvbQ6pieUuerC2ahBg+kEp1wycFj8MPUI0WkIOw5E9w==
@@ -5648,11 +5640,6 @@ hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
-htm@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmmirror.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78"
-  integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==
-
 html-minifier-terser@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmmirror.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
@@ -5888,6 +5875,11 @@ indent-string@^4.0.0:
   resolved "https://registry.npmmirror.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmmirror.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -5896,11 +5888,6 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits-browser@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.npmmirror.com/inherits-browser/-/inherits-browser-0.1.0.tgz#893a7c9cc78f2a1e18093aaa203bbb8cf5c30511"
-  integrity sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==
-
 inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -6891,6 +6878,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+matches-selector@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/matches-selector/-/matches-selector-1.2.0.tgz#d1814e7e8f43e69d22ac33c9af727dc884ecf12a"
+  integrity sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA==
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmmirror.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -7028,19 +7020,21 @@ mimic-response@^1.0.0:
   resolved "https://registry.npmmirror.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
-min-dash@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmmirror.com/min-dash/-/min-dash-4.0.0.tgz#4a1afec4c4d70f510b6e241d0550493d4ac0f161"
-  integrity sha512-piIvVJ/nxuA4+LpnYIzF6oCtRvdtDvQJteSC+H768H2UvPKFKIt5oiJnUVtr0ZdchneXTcvUZ91vIrvWVIN0AA==
+min-dash@^3.0.0, min-dash@^3.5.0, min-dash@^3.5.2, min-dash@^3.8.1:
+  version "3.8.1"
+  resolved "https://registry.npmmirror.com/min-dash/-/min-dash-3.8.1.tgz#09a8bd8a041d65eec4732042cde9cb24a6e84b0d"
+  integrity sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg==
 
-min-dom@^4.0.2, min-dom@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.npmmirror.com/min-dom/-/min-dom-4.1.0.tgz#ecbf9a2d0412ffe4ddc14253d65d15b47b6b4bf8"
-  integrity sha512-1lj1EyoSwY/UmTeT/hhPiZTsq+vK9D+8FAJ/53iK5jT1otkG9rJTixSKdjmTieEvdfES+sKbbTptzaQJhnacjA==
+min-dom@^3.1.2, min-dom@^3.1.3:
+  version "3.2.1"
+  resolved "https://registry.npmmirror.com/min-dom/-/min-dom-3.2.1.tgz#c272a814397d8bfe97edd12670e7ac34123c043f"
+  integrity sha512-v6YCmnDzxk4rRJntWTUiwggLupPw/8ZSRqUq0PDaBwVZEO/wYzCH4SKVBV+KkEvf3u0XaWHly5JEosPtqRATZA==
   dependencies:
-    component-event "^0.2.1"
-    domify "^1.4.1"
-    min-dash "^4.0.0"
+    component-event "^0.1.4"
+    domify "^1.3.1"
+    indexof "0.0.1"
+    matches-selector "^1.2.0"
+    min-dash "^3.8.1"
 
 min-indent@^1.0.0:
   version "1.0.1"
@@ -7090,21 +7084,21 @@ mockjs@^1.1.0:
   dependencies:
     commander "*"
 
-moddle-xml@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-10.1.0.tgz#8c2a1b73c73cc8915182d5374857c43ba482c7a5"
-  integrity sha512-erWckwLt+dYskewKXJso9u+aAZ5172lOiYxSOqKCPTy7L/xmqH1PoeoA7eVC7oJTt3PqF5TkZzUmbjGH6soQBg==
+moddle-xml@^9.0.6:
+  version "9.0.6"
+  resolved "https://registry.npmmirror.com/moddle-xml/-/moddle-xml-9.0.6.tgz#282b2a2232065a82556ba3fbbe3010b374f95cbf"
+  integrity sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==
   dependencies:
-    min-dash "^4.0.0"
-    moddle "^6.0.0"
+    min-dash "^3.5.2"
+    moddle "^5.0.2"
     saxen "^8.1.2"
 
-moddle@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.npmmirror.com/moddle/-/moddle-6.2.1.tgz#822163908b96b81f5f086441a558198feec735aa"
-  integrity sha512-rBT4P19k9wKOerFHNJQugw25CK6DK5m4lVZGac7godbWNPsbJgr1K4GJ+pqM1ErbRYxljXCTDgPhJLoDWE4wwQ==
+moddle@^5.0.2:
+  version "5.0.4"
+  resolved "https://registry.npmmirror.com/moddle/-/moddle-5.0.4.tgz#1108c9ff210df552ef4589513e620d171e4468e6"
+  integrity sha512-Kjb+hjuzO+YlojNGxEUXvdhLYTHTtAABDlDcJTtTcn5MbJF9Zkv4I1Fyvp3Ypmfgg1EfHDZ3PsCQTuML9JD6wg==
   dependencies:
-    min-dash "^4.0.0"
+    min-dash "^3.0.0"
 
 modify-values@^1.0.0:
   version "1.0.1"
@@ -7665,7 +7659,7 @@ path-exists@^4.0.0:
   resolved "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-intersection@^2.2.1:
+path-intersection@^2.2.0:
   version "2.2.1"
   resolved "https://registry.npmmirror.com/path-intersection/-/path-intersection-2.2.1.tgz#8476b75fefb7ac402f810d304e0eb0c080c11fe7"
   integrity sha512-9u8xvMcSfuOiStv9bPdnRJQhGQXLKurew94n4GPQCdH1nj9QKC9ObbNoIpiRq8skiOBxKkt277PgOoFgAt3/rA==
@@ -7923,11 +7917,6 @@ posthtml@^0.9.2:
     posthtml-parser "^0.2.0"
     posthtml-render "^1.0.5"
 
-preact@^10.11.2:
-  version "10.13.1"
-  resolved "https://registry.npmmirror.com/preact/-/preact-10.13.1.tgz#d220bd8771b8fa197680d4917f3cefc5eed88720"
-  integrity sha512-KyoXVDU5OqTpG9LXlB3+y639JAGzl8JSBXLn1J9HTSB3gbKcuInga7bZnXLlxmK94ntTs1EFeZp0lrja2AuBYQ==
-
 preact@^10.5.13:
   version "10.11.3"
   resolved "https://registry.npmmirror.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
@@ -9351,10 +9340,10 @@ timed-out@^4.0.0, timed-out@^4.0.1:
   resolved "https://registry.npmmirror.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
   integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
 
-tiny-svg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmmirror.com/tiny-svg/-/tiny-svg-3.0.0.tgz#2a441d7f9cb27982e548e757f86a0a123a6f7e38"
-  integrity sha512-+u6VomQO7MbI7CQe5q1IwNePpbVKG/HVdUQBmaEpSCdP/QmeyjhrS6WKFsNetXlvf9LWu/f5woRqjMdxBMe/0w==
+tiny-svg@^2.2.1, tiny-svg@^2.2.2:
+  version "2.2.4"
+  resolved "https://registry.npmmirror.com/tiny-svg/-/tiny-svg-2.2.4.tgz#8d4a16bd2c4644c8444fd3c2ece91db7631cfb35"
+  integrity sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==
 
 tiny-warning@^1.0.3:
   version "1.0.3"