workflow-bpmn-modeler-andtv-vue3 10.0.9 → 10.1.1

package/package/index.vue

@@ -80,7 +80,7 @@
       <!-- 主内容区域 -->
       <a-layout class="content-layout">
         <a-layout-content class="canvas-container">
-          <div ref="canvas" class="canvas" />
+          <div ref="canvas" class="canvas" :id="canvasId" />
         </a-layout-content>
         <a-layout-sider class="property-panel">
           <PropertyPanel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" />
@@ -176,6 +176,16 @@ const simpleInit = async () => {
 
     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,
@@ -195,6 +205,7 @@ const simpleInit = async () => {
     // 创建基本流程图
     await modeler.value.importXML(getInitStr())
     
+    isInitialized.value = true
     console.log('Simple initialization completed successfully')
     return true
   } catch (error) {
@@ -203,19 +214,84 @@ const simpleInit = async () => {
   }
 }
 
+// 强制重新初始化方法
+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) {
@@ -224,18 +300,29 @@ watch(() => props.xml, (val: string) => {
 })
 
 onMounted(async () => {
-  // 延迟初始化，确保DOM完全渲染
+  console.log('Component mounted, starting initialization...')
+  
+  // 等待DOM完全渲染
   await nextTick()
   
+  // 强制等待一段时间确保容器就绪
+  await new Promise(resolve => setTimeout(resolve, 100))
+  
   const initializeModeler = async () => {
     try {
-      // 确保容器存在且有尺寸
-      if (!canvas.value || canvas.value.offsetWidth === 0 || canvas.value.offsetHeight === 0) {
-        console.log('Canvas container not ready, waiting...')
+      // 确保canvas容器存在
+      if (!canvas.value) {
+        console.error('Canvas ref not found')
         return false
       }
 
-      console.log('Canvas container found, initializing modeler...')
+      // 强制设置容器尺寸
+      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({
@@ -247,20 +334,40 @@ onMounted(async () => {
         ],
         moddleExtensions: {
           flowable: flowableModdle
+        },
+        // 确保画布正确初始化
+        canvas: {
+          deferUpdate: false
         }
       })
 
       // 等待下一个tick确保DOM更新
       await nextTick()
       
-      // 新增流程定义
-      if (!props.xml) {
-        newDiagram()
-      } else {
-        createNewDiagram(props.xml)
-      }
+      // 强制触发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)
       
-      console.log('BPMN Modeler initialized successfully')
       return true
     } catch (error) {
       console.error('BPMN Modeler initialization failed:', error)
@@ -268,50 +375,35 @@ onMounted(async () => {
     }
   }
   
-  // 立即尝试初始化
+  // 尝试初始化
   let initialized = await initializeModeler()
   
-  // 如果初始化失败，使用多种策略重试
+  // 如果失败，使用更激进的重试策略
   if (!initialized) {
-    // 策略1: 使用MutationObserver监听DOM变化
-    const observer = new MutationObserver(async () => {
-      if (canvas.value && canvas.value.offsetWidth > 0 && canvas.value.offsetHeight > 0) {
-        observer.disconnect()
-        await initializeModeler()
-      }
-    })
+    console.log('Initial initialization failed, trying alternative approach...')
     
-    // 监听父容器变化
-    if (canvas.value?.parentElement) {
-      observer.observe(canvas.value.parentElement, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['style', 'class']
+    // 使用requestAnimationFrame确保在下一帧尝试
+    const tryWithRAF = () => {
+      requestAnimationFrame(async () => {
+        initialized = await initializeModeler()
+        if (!initialized) {
+          // 如果还是失败，再等一帧
+          requestAnimationFrame(async () => {
+            initialized = await initializeModeler()
+            if (!initialized) {
+              console.error('All initialization attempts failed')
+            }
+          })
+        }
       })
     }
     
-    // 策略2: 定时重试（最多10秒）
-    let retryCount = 0
-    const maxRetries = 50 // 10秒，每200ms重试一次
-    
-    const retryTimer = setInterval(async () => {
-      retryCount++
-      initialized = await initializeModeler()
-      
-      if (initialized || retryCount >= maxRetries) {
-        clearInterval(retryTimer)
-        observer.disconnect()
-        if (!initialized) {
-          console.error('Failed to initialize BPMN Modeler after maximum retries')
-        }
-      }
-    }, 200)
+    tryWithRAF()
   }
 })
 
-const newDiagram = (): void => {
-  createNewDiagram(getInitStr())
+const newDiagram = async (): Promise<void> => {
+  await createNewDiagram(getInitStr())
 }
 
 // 让图能自适应屏幕
@@ -401,77 +493,64 @@ const createNewDiagram = async (data: string): Promise<void> => {
 // 调整左侧工具栏排版
 const adjustPalette = (): void => {
   try {
-    // 获取 bpmn 设计器实例
-    const canvasElement = canvas.value
-    if (!canvasElement) {
-      console.warn('Canvas element not found for palette adjustment')
-      return
-    }
-    
-    // 检查DOM结构是否存在
-    if (!canvasElement.children || canvasElement.children.length === 0) {
-      console.warn('Canvas children not found for palette adjustment')
-      return
-    }
-    
-    const djsPalette = canvasElement.children[0]?.children[1]?.children[4] as HTMLElement
-    if (!djsPalette) {
-      console.warn('BPMN palette element not found')
-      return
-    }
-    
-    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
-    if (!palette) {
-      console.warn('Palette children not found')
-      return
-    }
-    
-    const allGroups = palette.children
-    if (allGroups.length === 0) {
-      console.warn('No palette groups found')
-      return
-    }
-    
-    ;(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'
+    // 等待DOM完全渲染
+    setTimeout(() => {
+      try {
+        // 获取 bpmn 设计器实例
+        const canvasElement = canvas.value
+        if (!canvasElement) {
+          console.warn('Canvas element not found for palette adjustment')
+          return
         }
-        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]
-          }
+        
+        // 查找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'
+            })
+          })
+        }
+        
+        console.log('Palette adjustment completed')
+      } catch (e) {
+        console.warn('Failed to adjust palette:', e)
       }
-    }
+    }, 300)
   } catch (e) {
     console.warn('Failed to adjust palette:', e)
   }
@@ -613,6 +692,52 @@ const downloadFile = (filename: string, data: string, type: string): void => {
 @import url('https://cdn.jsdelivr.net/npm/bpmn-js@8.10.0/dist/assets/bpmn-font/css/bpmn-codes.css');
 @import url('https://cdn.jsdelivr.net/npm/bpmn-js@8.10.0/dist/assets/bpmn-font/css/bpmn-embedded.css');
 
+/* 强制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;
+}
+
 /* 视图模式样式 */
 .view-mode {
   .ant-layout-header, 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "workflow-bpmn-modeler-andtv-vue3",
-  "version": "10.0.9",
+  "version": "10.1.1",
   "description": "基于 `Vue3` + `TypeScript` + `Ant Design Vue` 和 `bpmn.io@8.10` ，实现 flowable 的 modeler 模型设计器",
   "main": "dist/workflow-bpmn-modeler-andtv-vue3.common.js",
   "module": "dist/workflow-bpmn-modeler-andtv-vue3.common.js",