wangziqi/yudao-ui-admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Merge pull request !353 from 芋道源码/dev
This commit is contained in:
芋道源码
2026-05-31 13:50:10 +00:00
committed by Gitee
parent e943f4fcfd d646a23f7d
commit 72aac700ff
3 changed files with 129 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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();
}
}
}
};

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

@@ -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();
}
}
}
};

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

@@ -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();
}
}
}
};