workflow-bpmn-modeler-andtv-vue3 10.1.2 → 10.2.0

package/package/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }">
+  <a-spin :spinning="isView">
+  <div class="flow-containers" :class="{ 'view-mode': isView }">
     <a-layout class="main-layout">
       <!-- 顶部工具栏 -->
       <a-layout-header class="toolbar-header">
@@ -80,7 +81,7 @@
       <!-- 主内容区域 -->
       <a-layout class="content-layout">
         <a-layout-content class="canvas-container">
-          <div ref="canvas" class="canvas" :id="canvasId" />
+          <div ref="canvas" class="canvas" />
         </a-layout-content>
         <a-layout-sider class="property-panel">
           <PropertyPanel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" />
@@ -88,6 +89,7 @@
       </a-layout>
     </a-layout>
   </div>
+  </a-spin>
 </template>
 
 <script setup lang="ts">
@@ -157,141 +159,10 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   save: [data: SaveData]
 }>()
-
-// 暴露手动初始化方法
-const manualInit = () => {
-  if (!modeler.value && canvas.value) {
-    console.log('Manual initialization triggered')
-    onMounted()
-  }
-}
-
-// 简化的初始化方法，专门用于XML加载失败的情况
-const simpleInit = async () => {
-  try {
-    if (!canvas.value) {
-      console.error('Canvas container not found for simple init')
-      return false
-    }
-
-    console.log('Starting simple initialization...')
-    
-    // 强制设置容器样式
-    canvas.value.style.width = '100%'
-    canvas.value.style.height = '100%'
-    canvas.value.style.minHeight = '400px'
-    canvas.value.style.display = 'block'
-    
-    // 等待DOM更新
-    await nextTick()
-    await new Promise(resolve => setTimeout(resolve, 50))
-    
-    // 创建简单的BPMN模型器实例
-    modeler.value = new Modeler({
-      container: canvas.value,
-      additionalModules: [
-        {
-          translate: ['value', customTranslate]
-        }
-      ],
-      moddleExtensions: {
-        flowable: flowableModdle
-      }
-    })
-
-    // 等待下一个tick
-    await nextTick()
-    
-    // 创建基本流程图
-    await modeler.value.importXML(getInitStr())
-    
-    isInitialized.value = true
-    console.log('Simple initialization completed successfully')
-    return true
-  } catch (error) {
-    console.error('Simple initialization failed:', error)
-    return false
-  }
-}
-
-// 强制重新初始化方法
-const forceReinit = async () => {
-  try {
-    console.log('Force reinitializing BPMN Modeler...')
-    
-    // 清理现有实例
-    if (modeler.value) {
-      modeler.value.destroy()
-      modeler.value = null
-    }
-    
-    isInitialized.value = false
-    
-    // 等待一段时间
-    await new Promise(resolve => setTimeout(resolve, 100))
-    
-    // 重新初始化
-    const success = await simpleInit()
-    
-    if (success) {
-      console.log('Force reinitialization successful')
-    } else {
-      console.error('Force reinitialization failed')
-    }
-    
-    return success
-  } catch (error) {
-    console.error('Force reinitialization error:', error)
-    return false
-  }
-}
-
-// 强制刷新BPMN显示
-const forceRefresh = async () => {
-  try {
-    if (!modeler.value) {
-      console.error('Modeler not available for refresh')
-      return false
-    }
-    
-    console.log('Force refreshing BPMN display...')
-    
-    // 强制重新渲染
-    modeler.value.get('canvas').zoom('fit-viewport')
-    
-    // 等待一段时间后调整palette
-    setTimeout(() => {
-      adjustPalette()
-    }, 100)
-    
-    console.log('BPMN display refreshed')
-    return true
-  } catch (error) {
-    console.error('Failed to refresh BPMN display:', error)
-    return false
-  }
-}
-
-// 暴露给父组件
-defineExpose({
-  manualInit,
-  simpleInit,
-  forceReinit,
-  forceRefresh,
-  isInitialized,
-  getProcess,
-  saveXML,
-  saveImg,
-  save
-})
-// 生成唯一的canvas ID
-const canvasId = `bpmn-canvas-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-
 const canvas = ref<HTMLElement | null>(null)
 const modeler = ref<Modeler | null>(null)
 const taskList = ref<any[]>([])
 const zoom = ref<number>(1)
-const isInitialized = ref<boolean>(false)
 
 watch(() => props.xml, (val: string) => {
   if (val) {
@@ -299,149 +170,50 @@ watch(() => props.xml, (val: string) => {
   }
 })
 
-onMounted(async () => {
-  console.log('Component mounted, starting initialization...')
-  
-  // 等待DOM完全渲染
-  await nextTick()
-  
-  // 强制等待一段时间确保容器就绪
-  await new Promise(resolve => setTimeout(resolve, 100))
-  
-  const initializeModeler = async () => {
-    try {
-      // 确保canvas容器存在
-      if (!canvas.value) {
-        console.error('Canvas ref not found')
-        return false
+onMounted(() => {
+  // 生成实例
+  modeler.value = new Modeler({
+    container: canvas.value,
+    additionalModules: [
+      {
+        translate: ['value', customTranslate]
       }
-
-      // 强制设置容器尺寸
-      canvas.value.style.width = '100%'
-      canvas.value.style.height = '100%'
-      canvas.value.style.minHeight = '400px'
-      canvas.value.style.display = 'block'
-      
-      console.log('Canvas container prepared, initializing modeler...')
-
-      // 生成实例
-      modeler.value = new Modeler({
-        container: canvas.value,
-        additionalModules: [
-          {
-            translate: ['value', customTranslate]
-          }
-        ],
-        moddleExtensions: {
-          flowable: flowableModdle
-        },
-        // 确保画布正确初始化
-        canvas: {
-          deferUpdate: false
-        }
-      })
-
-      // 等待下一个tick确保DOM更新
-      await nextTick()
-      
-      // 强制触发BPMN渲染
-      setTimeout(async () => {
-        try {
-          // 标记为已初始化
-          isInitialized.value = true
-          
-          // 新增流程定义
-          if (!props.xml) {
-            await newDiagram()
-          } else {
-            await createNewDiagram(props.xml)
-          }
-          
-          // 强制刷新画布
-          if (modeler.value) {
-            modeler.value.get('canvas').zoom('fit-viewport')
-          }
-          
-          console.log('BPMN Modeler initialized successfully')
-        } catch (error) {
-          console.error('Error in post-initialization:', error)
-        }
-      }, 200)
-      
-      return true
-    } catch (error) {
-      console.error('BPMN Modeler initialization failed:', error)
-      return false
+    ],
+    moddleExtensions: {
+      flowable: flowableModdle
     }
-  }
-  
-  // 尝试初始化
-  let initialized = await initializeModeler()
-  
-  // 如果失败，使用更激进的重试策略
-  if (!initialized) {
-    console.log('Initial initialization failed, trying alternative approach...')
-    
-    // 使用requestAnimationFrame确保在下一帧尝试
-    const tryWithRAF = () => {
-      requestAnimationFrame(async () => {
-        initialized = await initializeModeler()
-        if (!initialized) {
-          // 如果还是失败，再等一帧
-          requestAnimationFrame(async () => {
-            initialized = await initializeModeler()
-            if (!initialized) {
-              console.error('All initialization attempts failed')
-            }
-          })
-        }
-      })
-    }
-    
-    tryWithRAF()
+  })
+  // 新增流程定义
+  if (!props.xml) {
+    newDiagram()
+  } else {
+    createNewDiagram(props.xml)
   }
 })
 
-const newDiagram = async (): Promise<void> => {
-  await createNewDiagram(getInitStr())
+const newDiagram = (): void => {
+  createNewDiagram(getInitStr())
 }
 
 // 让图能自适应屏幕
 const fitViewport = (): void => {
-  try {
-    if (!modeler.value) {
-      console.warn('Modeler not available for viewport fitting')
-      return
-    }
-    
-    zoom.value = modeler.value.get('canvas').zoom('fit-viewport')
-    const viewport = document.querySelector('.flow-containers .viewport') as SVGSVGElement
-    if (!viewport) {
-      console.warn('Viewport element not found')
-      return
-    }
-    
-    const bbox = viewport.getBBox()
-    if (!bbox) {
-      console.warn('Viewport bbox not available')
-      return
-    }
-    
-    const currentViewbox = modeler.value.get('canvas').viewbox()
-    const elementMid = {
-      x: bbox.x + bbox.width / 2 - 65,
-      y: bbox.y + bbox.height / 2
-    }
-    modeler.value.get('canvas').viewbox({
-      x: elementMid.x - currentViewbox.width / 2,
-      y: elementMid.y - currentViewbox.height / 2,
-      width: currentViewbox.width,
-      height: currentViewbox.height
-    })
-    zoom.value = bbox.width / currentViewbox.width * 1.8
-  } catch (e) {
-    console.warn('Failed to fit viewport:', e)
+  if (!modeler.value) return
+  zoom.value = modeler.value.get('canvas').zoom('fit-viewport')
+  const viewport = document.querySelector('.flow-containers .viewport') as SVGSVGElement
+  const bbox = viewport?.getBBox()
+  if (!bbox) return
+  const currentViewbox = modeler.value.get('canvas').viewbox()
+  const elementMid = {
+    x: bbox.x + bbox.width / 2 - 65,
+    y: bbox.y + bbox.height / 2
   }
+  modeler.value.get('canvas').viewbox({
+    x: elementMid.x - currentViewbox.width / 2,
+    y: elementMid.y - currentViewbox.height / 2,
+    width: currentViewbox.width,
+    height: currentViewbox.height
+  })
+  zoom.value = bbox.width / currentViewbox.width * 1.8
 }
 
 // 放大缩小
@@ -459,100 +231,67 @@ const createNewDiagram = async (data: string): Promise<void> => {
     return str.replace(/</g, '&lt;')
   })
   try {
-    if (!modeler.value) {
-      console.error('Modeler not initialized')
-      return
-    }
-    
-    console.log('Importing XML data...', data.substring(0, 200) + '...')
+    if (!modeler.value) return
     await modeler.value.importXML(data)
-    console.log('XML imported successfully')
-    
-    // 等待DOM更新
-    await nextTick()
-    
-    // 延迟执行调整方法，确保DOM完全渲染
-    setTimeout(() => {
-      try {
-        adjustPalette()
-        fitViewport()
-        console.log('Diagram created successfully')
-      } catch (adjustError) {
-        console.warn('Failed to adjust palette or viewport:', adjustError)
-        // 即使调整失败，也不影响基本功能
-      }
-    }, 100)
-    
+    adjustPalette()
+    fitViewport()
     // fillColor()
   } catch (err: any) {
-    console.error('Failed to create diagram:', err.message, err.warnings)
-    throw err // 重新抛出错误，让调用者知道失败
+    console.error(err.message, err.warnings)
   }
 }
 
 // 调整左侧工具栏排版
 const adjustPalette = (): void => {
   try {
-    // 等待DOM完全渲染
-    setTimeout(() => {
-      try {
-        // 获取 bpmn 设计器实例
-        const canvasElement = canvas.value
-        if (!canvasElement) {
-          console.warn('Canvas element not found for palette adjustment')
-          return
+    // 获取 bpmn 设计器实例
+    const canvasElement = canvas.value
+    if (!canvasElement) return
+    const djsPalette = canvasElement.children[0].children[1].children[4] as HTMLElement
+    const djsPalStyle: Record<string, string> = {
+      width: '130px',
+      padding: '5px',
+      background: 'white',
+      left: '20px',
+      borderRadius: '0'
+    }
+    for (const key in djsPalStyle) {
+      (djsPalette.style as any)[key] = djsPalStyle[key]
+    }
+    const palette = djsPalette.children[0] as HTMLElement
+    const allGroups = palette.children
+    ;(allGroups[0] as HTMLElement).style.display = 'none'
+    // 修改控件样式
+    for (let gKey = 0; gKey < allGroups.length; gKey++) {
+      const group = allGroups[gKey] as HTMLElement
+      for (let cKey = 0; cKey < group.children.length; cKey++) {
+        const control = group.children[cKey] as HTMLElement
+        const controlStyle: Record<string, string> = {
+          display: 'flex',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          width: '100%',
+          padding: '5px'
         }
-        
-        // 查找BPMN palette元素
-        const djsPalette = document.querySelector('.djs-palette') as HTMLElement
-        if (!djsPalette) {
-          console.warn('BPMN palette element not found')
-          return
-        }
-        
-        console.log('Found palette element, adjusting styles...')
-        
-        // 设置palette样式
-        djsPalette.style.width = '160px'
-        djsPalette.style.padding = '8px'
-        djsPalette.style.background = 'white'
-        djsPalette.style.left = '20px'
-        djsPalette.style.top = '20px'
-        djsPalette.style.borderRadius = '8px'
-        djsPalette.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)'
-        djsPalette.style.zIndex = '1000'
-        
-        // 查找palette entries
-        const paletteEntries = djsPalette.querySelector('.djs-palette-entries') as HTMLElement
-        if (paletteEntries) {
-          paletteEntries.style.padding = '8px'
-          
-          // 调整每个entry的样式
-          const entries = paletteEntries.querySelectorAll('.djs-palette-entry')
-          entries.forEach((entry: HTMLElement) => {
-            entry.style.margin = '4px 0'
-            entry.style.padding = '8px'
-            entry.style.borderRadius = '4px'
-            entry.style.cursor = 'pointer'
-            entry.style.transition = 'background-color 0.2s'
-            
-            // 添加hover效果
-            entry.addEventListener('mouseenter', () => {
-              entry.style.backgroundColor = '#f0f0f0'
-            })
-            entry.addEventListener('mouseleave', () => {
-              entry.style.backgroundColor = 'transparent'
-            })
-          })
+        if (
+          control.className &&
+          control.dataset &&
+          control.className.indexOf('entry') !== -1
+        ) {
+          const controlProps = new BpmData().getControl(
+            control.dataset.action
+          )
+          control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${
+            controlProps['title']
+          }</div>`
+          for (const csKey in controlStyle) {
+            (control.style as any)[csKey] = controlStyle[csKey]
+          }
         }
-        
-        console.log('Palette adjustment completed')
-      } catch (e) {
-        console.warn('Failed to adjust palette:', e)
       }
-    }, 300)
+    }
   } catch (e) {
-    console.warn('Failed to adjust palette:', e)
+    console.log(e)
   }
 }
 const fillColor = (): void => {
@@ -686,101 +425,11 @@ const downloadFile = (filename: string, data: string, type: string): void => {
 </script>
 
 <style lang="scss">
-/* BPMN.js 核心样式 - 完全内联版本 */
-
-/* 强制BPMN样式 */
-.djs-container {
-  width: 100% !important;
-  height: 100% !important;
-  position: relative !important;
-  background: white !important;
-}
-
-.djs-canvas {
-  width: 100% !important;
-  height: 100% !important;
-  background: white !important;
-  position: relative !important;
-}
-
-.djs-palette {
-  position: absolute !important;
-  left: 20px !important;
-  top: 20px !important;
-  z-index: 10 !important;
-  background: white !important;
-  border: 1px solid #ccc !important;
-  border-radius: 4px !important;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
-}
-
-.djs-palette-entries {
-  padding: 8px !important;
-}
-
-.djs-palette-entry {
-  margin: 4px 0 !important;
-  padding: 8px !important;
-  border-radius: 4px !important;
-  cursor: pointer !important;
-  transition: background-color 0.2s !important;
-}
-
-.djs-palette-entry:hover {
-  background-color: #f0f0f0 !important;
-}
-
-/* 确保viewport正确显示 */
-.viewport {
-  width: 100% !important;
-  height: 100% !important;
-}
-
-/* 强制BPMN样式 */
-.djs-container {
-  width: 100% !important;
-  height: 100% !important;
-  position: relative !important;
-}
-
-.djs-canvas {
-  width: 100% !important;
-  height: 100% !important;
-  background: white !important;
-}
-
-.djs-palette {
-  position: absolute !important;
-  left: 20px !important;
-  top: 20px !important;
-  z-index: 10 !important;
-  background: white !important;
-  border: 1px solid #ccc !important;
-  border-radius: 4px !important;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
-}
-
-.djs-palette-entries {
-  padding: 8px !important;
-}
-
-.djs-palette-entry {
-  margin: 4px 0 !important;
-  padding: 8px !important;
-  border-radius: 4px !important;
-  cursor: pointer !important;
-  transition: background-color 0.2s !important;
-}
-
-.djs-palette-entry:hover {
-  background-color: #f0f0f0 !important;
-}
-
-/* 确保viewport正确显示 */
-.viewport {
-  width: 100% !important;
-  height: 100% !important;
-}
+/* BPMN.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";
 
 /* 视图模式样式 */
 .view-mode {
@@ -960,35 +609,6 @@ const downloadFile = (filename: string, data: string, type: string): void => {
     height: 100%;
     position: relative;
     z-index: 1;
-    min-height: 400px;
-    display: block;
-    
-    /* 确保BPMN容器正确显示 */
-    :deep(.djs-container) {
-      width: 100% !important;
-      height: 100% !important;
-      min-height: 400px !important;
-      display: block !important;
-    }
-    
-    :deep(.djs-container svg) {
-      width: 100% !important;
-      height: 100% !important;
-      background: white !important;
-      display: block !important;
-    }
-    
-    :deep(.djs-canvas) {
-      background: white !important;
-      width: 100% !important;
-      height: 100% !important;
-    }
-    
-    /* 确保在jeecgboot环境中正确显示 */
-    :deep(.viewport) {
-      width: 100% !important;
-      height: 100% !important;
-    }
   }
   
   /* 属性面板 */

package/package/package/BpmData.js

@@ -0,0 +1,68 @@
+/**
+ * 存储流程设计相关参数
+ */
+export default class BpmData {
+  constructor() {
+    this.controls = [] // 设计器控件
+    this.init()
+  }
+
+  init() {
+    this.controls = [
+      {
+        action: 'create.start-event',
+        title: '开始'
+      },
+      {
+        action: 'create.intermediate-event',
+        title: '中间'
+      },
+      {
+        action: 'create.end-event',
+        title: '结束'
+      },
+      {
+        action: 'create.exclusive-gateway',
+        title: '网关'
+      },
+      {
+        action: 'create.task',
+        title: '任务'
+      },
+      {
+        action: 'create.user-task',
+        title: '用户任务'
+      },
+      {
+        action: 'create.user-sign-task',
+        title: '会签任务'
+      },
+      {
+        action: 'create.subprocess-expanded',
+        title: '子流程'
+      },
+      {
+        action: 'create.data-object',
+        title: '数据对象'
+      },
+      {
+        action: 'create.data-store',
+        title: '数据存储'
+      },
+      {
+        action: 'create.participant-expanded',
+        title: '扩展流程'
+      },
+      {
+        action: 'create.group',
+        title: '分组'
+      }
+    ]
+  }
+
+  //  获取控件配置信息
+  getControl(action) {
+    const result = this.controls.filter(item => item.action === action)
+    return result[0] || {}
+  }
+}