workflow-bpmn-modeler-andtv-vue3 10.0.6 → 10.0.8

package/package/bpmn-styles.css

@@ -0,0 +1,40 @@
+/* BPMN.js 核心样式 */
+@import url('https://cdn.jsdelivr.net/npm/bpmn-js@8.10.0/dist/assets/diagram-js.css');
+@import url('https://cdn.jsdelivr.net/npm/bpmn-js@8.10.0/dist/assets/bpmn-font/css/bpmn.css');
+@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容器有正确的高度 */
+.bpmn-container {
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+}
+
+.bpmn-container .djs-container {
+  width: 100%;
+  height: 100%;
+}
+
+.bpmn-container .djs-container svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* 确保工具栏正确显示 */
+.djs-palette {
+  position: absolute !important;
+  left: 20px !important;
+  top: 20px !important;
+  z-index: 10 !important;
+}
+
+/* 确保画布区域可见 */
+.djs-canvas {
+  background: white !important;
+}
+
+/* 修复可能的显示问题 */
+.djs-element {
+  pointer-events: auto !important;
+}

package/package/index.vue

@@ -157,6 +157,23 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   save: [data: SaveData]
 }>()
+
+// 暴露手动初始化方法
+const manualInit = () => {
+  if (!modeler.value && canvas.value) {
+    console.log('Manual initialization triggered')
+    onMounted()
+  }
+}
+
+// 暴露给父组件
+defineExpose({
+  manualInit,
+  getProcess,
+  saveXML,
+  saveImg,
+  save
+})
 const canvas = ref<HTMLElement | null>(null)
 const modeler = ref<Modeler | null>(null)
 const taskList = ref<any[]>([])
@@ -168,24 +185,90 @@ watch(() => props.xml, (val: string) => {
   }
 })
 
-onMounted(() => {
-  // 生成实例
-  modeler.value = new Modeler({
-    container: canvas.value,
-    additionalModules: [
-      {
-        translate: ['value', customTranslate]
+onMounted(async () => {
+  // 延迟初始化，确保DOM完全渲染
+  await nextTick()
+  
+  const initializeModeler = async () => {
+    try {
+      // 确保容器存在且有尺寸
+      if (!canvas.value || canvas.value.offsetWidth === 0 || canvas.value.offsetHeight === 0) {
+        console.log('Canvas container not ready, waiting...')
+        return false
       }
-    ],
-    moddleExtensions: {
-      flowable: flowableModdle
+
+      console.log('Canvas container found, initializing modeler...')
+
+      // 生成实例
+      modeler.value = new Modeler({
+        container: canvas.value,
+        additionalModules: [
+          {
+            translate: ['value', customTranslate]
+          }
+        ],
+        moddleExtensions: {
+          flowable: flowableModdle
+        }
+      })
+
+      // 等待下一个tick确保DOM更新
+      await nextTick()
+      
+      // 新增流程定义
+      if (!props.xml) {
+        newDiagram()
+      } else {
+        createNewDiagram(props.xml)
+      }
+      
+      console.log('BPMN Modeler initialized successfully')
+      return true
+    } catch (error) {
+      console.error('BPMN Modeler initialization failed:', error)
+      return false
     }
-  })
-  // 新增流程定义
-  if (!props.xml) {
-    newDiagram()
-  } else {
-    createNewDiagram(props.xml)
+  }
+  
+  // 立即尝试初始化
+  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()
+      }
+    })
+    
+    // 监听父容器变化
+    if (canvas.value?.parentElement) {
+      observer.observe(canvas.value.parentElement, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style', 'class']
+      })
+    }
+    
+    // 策略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)
   }
 })
 
@@ -229,13 +312,25 @@ const createNewDiagram = async (data: string): Promise<void> => {
     return str.replace(/</g, '&lt;')
   })
   try {
-    if (!modeler.value) return
+    if (!modeler.value) {
+      console.error('Modeler not initialized')
+      return
+    }
+    
+    console.log('Importing XML data...', data.substring(0, 200) + '...')
     await modeler.value.importXML(data)
+    console.log('XML imported successfully')
+    
+    // 等待DOM更新
+    await nextTick()
+    
     adjustPalette()
     fitViewport()
+    
+    console.log('Diagram created successfully')
     // fillColor()
   } catch (err: any) {
-    console.error(err.message, err.warnings)
+    console.error('Failed to create diagram:', err.message, err.warnings)
   }
 }
 
@@ -423,11 +518,11 @@ const downloadFile = (filename: string, data: string, type: string): void => {
 </script>
 
 <style lang="scss">
-/* 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";
+/* BPMN.js 样式导入 - 使用CDN确保样式正确加载 */
+@import url('https://cdn.jsdelivr.net/npm/bpmn-js@8.10.0/dist/assets/diagram-js.css');
+@import url('https://cdn.jsdelivr.net/npm/bpmn-js@8.10.0/dist/assets/bpmn-font/css/bpmn.css');
+@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');
 
 /* 视图模式样式 */
 .view-mode {
@@ -607,6 +702,35 @@ 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.json

@@ -1,6 +1,6 @@
 {
   "name": "workflow-bpmn-modeler-andtv-vue3",
-  "version": "10.0.6",
+  "version": "10.0.8",
   "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",