!353 fix(bpm): clean up BPMN viewer resize observer

Merge pull request !353 from 芋道源码/dev

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { h, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
 import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
@@ -45,6 +45,41 @@ const processReZoom = () => {
   bpmnViewer.value?.get('canvas').zoom('fit-viewport', 'auto');
 };
 
+let resizeObserver: null | ResizeObserver = null;
+
+/** 停止 ResizeObserver */
+const stopResizeObserver = () => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+};
+
+/** 启动 ResizeObserver 监听容器尺寸变化 */
+const startResizeObserver = () => {
+  stopResizeObserver();
+  if (!processCanvas.value || !bpmnViewer.value) {
+    return;
+  }
+
+  const { clientHeight, clientWidth } = processCanvas.value;
+  if (clientWidth > 0 && clientHeight > 0) {
+    processReZoom();
+    return;
+  }
+
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const { height, width } = entry.contentRect;
+      if (width > 0 && height > 0 && bpmnViewer.value) {
+        processReZoom();
+        stopResizeObserver();
+      }
+    }
+  });
+  resizeObserver.observe(processCanvas.value);
+};
+
 /** Zoom：放大 */
 const processZoomIn = (zoomStep = 0.1) => {
   const newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
@@ -71,6 +106,7 @@ const processZoomOut = (zoomStep = 0.1) => {
 
 /** 流程图预览清空 */
 const clearViewer = () => {
+  stopResizeObserver();
   if (processCanvas.value) {
     processCanvas.value.innerHTML = '';
   }
@@ -157,6 +193,12 @@ const importXML = async (xml: string) => {
       isLoading.value = false;
       // 高亮流程
       setProcessStatus(props.view);
+      // 启动 ResizeObserver，等待容器可见且有尺寸时自动居中
+      // 对应 https://github.com/yudaocode/yudao-ui-admin-vue3/pull/221 场景
+      if (bpmnViewer.value) {
+        await nextTick();
+        startResizeObserver();
+      }
     }
   }
 };

apps/web-antdv-next/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { h, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
 import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
@@ -45,6 +45,41 @@ const processReZoom = () => {
   bpmnViewer.value?.get('canvas').zoom('fit-viewport', 'auto');
 };
 
+let resizeObserver: null | ResizeObserver = null;
+
+/** 停止 ResizeObserver */
+const stopResizeObserver = () => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+};
+
+/** 启动 ResizeObserver 监听容器尺寸变化 */
+const startResizeObserver = () => {
+  stopResizeObserver();
+  if (!processCanvas.value || !bpmnViewer.value) {
+    return;
+  }
+
+  const { clientHeight, clientWidth } = processCanvas.value;
+  if (clientWidth > 0 && clientHeight > 0) {
+    processReZoom();
+    return;
+  }
+
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const { height, width } = entry.contentRect;
+      if (width > 0 && height > 0 && bpmnViewer.value) {
+        processReZoom();
+        stopResizeObserver();
+      }
+    }
+  });
+  resizeObserver.observe(processCanvas.value);
+};
+
 /** Zoom：放大 */
 const processZoomIn = (zoomStep = 0.1) => {
   const newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
@@ -71,6 +106,7 @@ const processZoomOut = (zoomStep = 0.1) => {
 
 /** 流程图预览清空 */
 const clearViewer = () => {
+  stopResizeObserver();
   if (processCanvas.value) {
     processCanvas.value.innerHTML = '';
   }
@@ -157,6 +193,12 @@ const importXML = async (xml: string) => {
       isLoading.value = false;
       // 高亮流程
       setProcessStatus(props.view);
+      // 启动 ResizeObserver，等待容器可见且有尺寸时自动居中
+      // 对应 https://github.com/yudaocode/yudao-ui-admin-vue3/pull/221 场景
+      if (bpmnViewer.value) {
+        await nextTick();
+        startResizeObserver();
+      }
     }
   }
 };

apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
 import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
@@ -52,6 +52,41 @@ const processReZoom = () => {
   bpmnViewer.value?.get('canvas').zoom('fit-viewport', 'auto');
 };
 
+let resizeObserver: null | ResizeObserver = null;
+
+/** 停止 ResizeObserver */
+const stopResizeObserver = () => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+};
+
+/** 启动 ResizeObserver 监听容器尺寸变化 */
+const startResizeObserver = () => {
+  stopResizeObserver();
+  if (!processCanvas.value || !bpmnViewer.value) {
+    return;
+  }
+
+  const { clientHeight, clientWidth } = processCanvas.value;
+  if (clientWidth > 0 && clientHeight > 0) {
+    processReZoom();
+    return;
+  }
+
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const { height, width } = entry.contentRect;
+      if (width > 0 && height > 0 && bpmnViewer.value) {
+        processReZoom();
+        stopResizeObserver();
+      }
+    }
+  });
+  resizeObserver.observe(processCanvas.value);
+};
+
 /** Zoom：放大 */
 const processZoomIn = (zoomStep = 0.1) => {
   const newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
@@ -78,6 +113,7 @@ const processZoomOut = (zoomStep = 0.1) => {
 
 /** 流程图预览清空 */
 const clearViewer = () => {
+  stopResizeObserver();
   if (processCanvas.value) {
     processCanvas.value.innerHTML = '';
   }
@@ -164,6 +200,12 @@ const importXML = async (xml: string) => {
       isLoading.value = false;
       // 高亮流程
       setProcessStatus(props.view);
+      // 启动 ResizeObserver，等待容器可见且有尺寸时自动居中
+      // 对应 https://github.com/yudaocode/yudao-ui-admin-vue3/pull/221 场景
+      if (bpmnViewer.value) {
+        await nextTick();
+        startResizeObserver();
+      }
     }
   }
 };