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

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

@@ -168,24 +168,38 @@ watch(() => props.xml, (val: string) => {
   }
 })
 
-onMounted(() => {
-  // 生成实例
-  modeler.value = new Modeler({
-    container: canvas.value,
-    additionalModules: [
-      {
-        translate: ['value', customTranslate]
+onMounted(async () => {
+  try {
+    // 确保容器存在
+    if (!canvas.value) {
+      console.error('Canvas container not found')
+      return
+    }
+
+    // 生成实例
+    modeler.value = new Modeler({
+      container: canvas.value,
+      additionalModules: [
+        {
+          translate: ['value', customTranslate]
+        }
+      ],
+      moddleExtensions: {
+        flowable: flowableModdle
       }
-    ],
-    moddleExtensions: {
-      flowable: flowableModdle
+    })
+
+    // 等待下一个tick确保DOM更新
+    await nextTick()
+    
+    // 新增流程定义
+    if (!props.xml) {
+      newDiagram()
+    } else {
+      createNewDiagram(props.xml)
     }
-  })
-  // 新增流程定义
-  if (!props.xml) {
-    newDiagram()
-  } else {
-    createNewDiagram(props.xml)
+  } catch (error) {
+    console.error('BPMN Modeler initialization failed:', error)
   }
 })
 
@@ -229,13 +243,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 +449,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 +633,24 @@ const downloadFile = (filename: string, data: string, type: string): void => {
     height: 100%;
     position: relative;
     z-index: 1;
+    min-height: 400px;
+    
+    /* 确保BPMN容器正确显示 */
+    :deep(.djs-container) {
+      width: 100% !important;
+      height: 100% !important;
+      min-height: 400px !important;
+    }
+    
+    :deep(.djs-container svg) {
+      width: 100% !important;
+      height: 100% !important;
+      background: white !important;
+    }
+    
+    :deep(.djs-canvas) {
+      background: white !important;
+    }
   }
   
   /* 属性面板 */

package/package.json

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