diff --git a/AutoRobot/Windows/Robot/Web/src/components/LayoutCoordinator.js b/AutoRobot/Windows/Robot/Web/src/components/LayoutCoordinator.js index 203d638..646a506 100644 --- a/AutoRobot/Windows/Robot/Web/src/components/LayoutCoordinator.js +++ b/AutoRobot/Windows/Robot/Web/src/components/LayoutCoordinator.js @@ -321,7 +321,10 @@ export class LayoutCoordinator { center: { x: 0, y: 0, width: 0, height: 0 } }; - // 计算顶部面板边界 + // 获取面板影响关系数据 + const influenceData = this.initializePanelSizeInfluence(); + + // 计算顶部面板边界 - 顶部面板通常不受其他面板影响,位于最上方 if (panelAreas.top && panelAreas.top.panels && panelAreas.top.panels.length > 0) { this.panelBounds.top = { x: 0, @@ -331,7 +334,7 @@ export class LayoutCoordinator { }; } - // 计算底部面板边界 + // 计算底部面板边界 - 底部面板通常位于最下方,只受容器高度限制 if (panelAreas.bottom && panelAreas.bottom.panels && panelAreas.bottom.panels.length > 0) { this.panelBounds.bottom = { x: 0, @@ -341,32 +344,91 @@ export class LayoutCoordinator { }; } - // 计算左侧面板边界 + // 计算左侧面板边界 - 考虑被影响列表(influencedBy) if (panelAreas.left && panelAreas.left.panels && panelAreas.left.panels.length > 0) { + // 计算y坐标 - 根据被影响列表,如果包含top区,则y值应该在top区的下边缘 + let leftY = 0; + const leftInfluencedBy = influenceData.influencedBy.left || []; + + // 检查是否被top区域影响 + if (leftInfluencedBy.some(item => item.position === 'top' && item.influence)) { + leftY = this.panelBounds.top.height; + } + + // 计算宽度和高度 + const leftWidth = panelAreas.left.width || 300; + let leftHeight = containerHeight; + + // 考虑顶部和底部面板对高度的影响 + leftHeight -= this.panelBounds.top.height; + leftHeight -= this.panelBounds.bottom.height; + this.panelBounds.left = { x: 0, - y: this.panelBounds.top.height, - width: panelAreas.left.width || 300, - height: containerHeight - this.panelBounds.top.height - this.panelBounds.bottom.height + y: leftY, + width: leftWidth, + height: leftHeight }; } - // 计算右侧面板边界 + // 计算右侧面板边界 - 考虑被影响列表 if (panelAreas.right && panelAreas.right.panels && panelAreas.right.panels.length > 0) { + // 计算y坐标 - 根据被影响列表,如果包含top区,则y值应该在top区的下边缘 + let rightY = 0; + const rightInfluencedBy = influenceData.influencedBy.right || []; + + // 检查是否被top区域影响 + if (rightInfluencedBy.some(item => item.position === 'top' && item.influence)) { + rightY = this.panelBounds.top.height; + } + + // 计算宽度和高度 + const rightWidth = panelAreas.right.width || 250; + let rightHeight = containerHeight; + + // 考虑顶部和底部面板对高度的影响 + rightHeight -= this.panelBounds.top.height; + rightHeight -= this.panelBounds.bottom.height; + this.panelBounds.right = { - x: containerWidth - (panelAreas.right.width || 250), - y: this.panelBounds.top.height, - width: panelAreas.right.width || 250, - height: containerHeight - this.panelBounds.top.height - this.panelBounds.bottom.height + x: containerWidth - rightWidth, + y: rightY, + width: rightWidth, + height: rightHeight }; } - // 计算中心面板边界 + // 计算中心面板边界 - 中心面板通常被所有其他面板影响 + const centerInfluencedBy = influenceData.influencedBy.center || []; + let centerX = 0; + let centerY = 0; + let centerWidth = containerWidth; + let centerHeight = containerHeight; + + // 根据被影响列表设置中心面板的位置和尺寸 + if (centerInfluencedBy.some(item => item.position === 'left' && item.influence)) { + centerX = this.panelBounds.left.width; + centerWidth -= this.panelBounds.left.width; + } + + if (centerInfluencedBy.some(item => item.position === 'right' && item.influence)) { + centerWidth -= this.panelBounds.right.width; + } + + if (centerInfluencedBy.some(item => item.position === 'top' && item.influence)) { + centerY = this.panelBounds.top.height; + centerHeight -= this.panelBounds.top.height; + } + + if (centerInfluencedBy.some(item => item.position === 'bottom' && item.influence)) { + centerHeight -= this.panelBounds.bottom.height; + } + this.panelBounds.center = { - x: this.panelBounds.left.width, - y: this.panelBounds.top.height, - width: containerWidth - this.panelBounds.left.width - this.panelBounds.right.width, - height: containerHeight - this.panelBounds.top.height - this.panelBounds.bottom.height + x: centerX, + y: centerY, + width: centerWidth, + height: centerHeight }; // 确保面板边界不会出现负值