diff --git a/frontend/src/pages/Workflow/Definition/Designer/index.module.less b/frontend/src/pages/Workflow/Definition/Designer/index.module.less index 8629f62b..9023f524 100644 --- a/frontend/src/pages/Workflow/Definition/Designer/index.module.less +++ b/frontend/src/pages/Workflow/Definition/Designer/index.module.less @@ -44,15 +44,25 @@ &-minimap { position: absolute; - right: 24px; - bottom: 24px; - width: 200px; - height: 150px; - background-color: #fff; - border: 1px solid #f0f0f0; + right: 20px; + bottom: 20px; + border: 1px solid #e5e5e5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); - z-index: 1; + background-color: #fff; + overflow: hidden; + z-index: 999; + + :global { + .x6-widget-minimap-viewport { + border: 2px solid #1890ff; + border-radius: 2px; + } + + .x6-widget-minimap-viewport-zoom { + border-color: #52c41a; + } + } } } diff --git a/frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts b/frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts index 62e3358d..c5562ba4 100644 --- a/frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts +++ b/frontend/src/pages/Workflow/Definition/Designer/utils/graphUtils.ts @@ -238,20 +238,79 @@ export const initGraph = ({ container: miniMapContainer, width: 200, height: 150, - padding: 10, - scalable: false, - minScale: 0.5, - maxScale: 2, + padding: 20, + scalable: true, + minScale: 0.1, + maxScale: 3, + // 自动适应内容 + fitToContent: true, + // 视口配置 + viewport: { + padding: 10, + // 视口变化时自动适应 + fitOnViewportChanged: true, + }, graphOptions: { async: true, grid: false, background: { color: '#f5f5f5', }, + interacting: { + nodeMovable: false, + }, + connecting: { + enabled: false, + }, }, }) ); + // 监听画布变化,更新小地图视图 + const updateMinimap = () => { + if (graph.minimap) { + // 获取所有内容的边界 + const contentArea = graph.getContentArea(); + if (contentArea) { + const { width, height } = contentArea; + // 计算合适的缩放比例 + const scale = Math.min( + 180 / width, // 留出20px边距 + 130 / height // 留出20px边距 + ); + + // 更新视口 + graph.minimap.updateViewport(); + + // 调整缩放以显示完整内容 + if (scale < 1) { + graph.minimap.scaleTo(scale); + } + + // 确保视图居中 + graph.minimap.centerContent(); + } + } + }; + + // 监听节点变化 + graph.on('node:added node:removed node:moved edge:added edge:removed', () => { + // 先让画布适应内容 + graph.fitToContent({ + padding: 20, + minScale: 0.1, + maxScale: 2, + }); + + // 更新小地图 + updateMinimap(); + }); + + // 监听画布缩放和平移 + graph.on('scale translate', () => { + updateMinimap(); + }); + // 绑定事件 graph.on('cell:contextmenu', ({ cell, e }) => { e.preventDefault();