边框调节
This commit is contained in:
zqm
@@ -427,40 +427,114 @@ const onDragEnd = (eventData) => {
|
||||
// 处理事件总线的area.resize.move事件
|
||||
const onAreaResizeMove = (eventData) => {
|
||||
console.log(`[Area:${props.id}] 收到AREA_RESIZE_MOVE事件:`, eventData) // 添加调试日志
|
||||
const { areaId, size, position, direction } = eventData
|
||||
const { areaId, size, position, direction, timestamp } = eventData
|
||||
|
||||
if (areaId !== props.id) {
|
||||
console.log(`[Area:${props.id}] areaId不匹配，期望: ${props.id}, 实际: ${areaId}`) // 添加调试日志
|
||||
return
|
||||
}
|
||||
|
||||
// 防御性检查，确保事件数据完整
|
||||
if (!size || !position) {
|
||||
console.error(`[Area:${props.id}] 无效的事件数据，缺少size或position`)
|
||||
return
|
||||
}
|
||||
|
||||
console.log(`[Area:${props.id}] 更新前originalPosition:`, originalPosition.value) // 添加调试日志
|
||||
|
||||
// 应用最小尺寸限制，与CSS保持一致
|
||||
const minWidth = 200
|
||||
const minHeight = 30
|
||||
|
||||
let newWidth = size.width
|
||||
let newHeight = size.height
|
||||
let newLeft = position.left
|
||||
let newTop = position.top
|
||||
// 对输入值进行验证和过滤，确保数值有效
|
||||
const inputWidth = Number(size.width)
|
||||
const inputHeight = Number(size.height)
|
||||
const inputLeft = Number(position.left)
|
||||
const inputTop = Number(position.top)
|
||||
|
||||
// 宽度限制
|
||||
if (direction.includes('right') || direction.includes('left')) {
|
||||
newWidth = Math.max(minWidth, newWidth)
|
||||
originalPosition.value.width = newWidth
|
||||
if (direction.includes('left')) {
|
||||
originalPosition.value.left = newLeft
|
||||
}
|
||||
if (isNaN(inputWidth) || isNaN(inputHeight) || isNaN(inputLeft) || isNaN(inputTop)) {
|
||||
console.error(`[Area:${props.id}] 收到无效的数值，跳过更新`)
|
||||
return
|
||||
}
|
||||
|
||||
// 高度限制
|
||||
if (direction.includes('bottom') || direction.includes('top')) {
|
||||
newHeight = Math.max(minHeight, newHeight)
|
||||
originalPosition.value.height = newHeight
|
||||
if (direction.includes('top')) {
|
||||
originalPosition.value.top = newTop
|
||||
}
|
||||
// 直接使用Panel计算好的尺寸和位置，不再重新计算
|
||||
// Panel已经处理了对角线方向的特殊逻辑，Area只需要验证和应用即可
|
||||
let newWidth = Math.max(minWidth, inputWidth)
|
||||
let newHeight = Math.max(minHeight, inputHeight)
|
||||
let newLeft = inputLeft
|
||||
let newTop = inputTop
|
||||
|
||||
// 计算边界位置，用于调试
|
||||
const oldBottom = originalPosition.value.top + originalPosition.value.height
|
||||
const newBottom = newTop + newHeight
|
||||
const oldRight = originalPosition.value.left + originalPosition.value.width
|
||||
const newRight = newLeft + newWidth
|
||||
|
||||
// 对对角线方向进行特殊处理和日志记录
|
||||
switch (direction) {
|
||||
case 'top-right':
|
||||
console.log(`[Area:${props.id}] top-right方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
|
||||
// 验证top-right方向下边框位置是否保持不变
|
||||
if (Math.abs(newBottom - oldBottom) > 1) {
|
||||
console.warn(`[Area:${props.id}] top-right方向下边框位置变化较大，可能存在计算误差`)
|
||||
}
|
||||
break
|
||||
|
||||
case 'top-left':
|
||||
console.log(`[Area:${props.id}] top-left方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
|
||||
console.log(`[Area:${props.id}] top-left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
|
||||
break
|
||||
|
||||
case 'bottom-left':
|
||||
console.log(`[Area:${props.id}] bottom-left方向处理: 原上边框: ${originalPosition.value.top}, 新上边框: ${newTop}, 差值: ${newTop - originalPosition.value.top}`)
|
||||
console.log(`[Area:${props.id}] bottom-left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
|
||||
break
|
||||
|
||||
case 'top':
|
||||
console.log(`[Area:${props.id}] top方向处理: 原下边框: ${oldBottom}, 新下边框: ${newBottom}, 差值: ${newBottom - oldBottom}`)
|
||||
break
|
||||
|
||||
case 'left':
|
||||
console.log(`[Area:${props.id}] left方向处理: 原右边框: ${oldRight}, 新右边框: ${newRight}, 差值: ${newRight - oldRight}`)
|
||||
break
|
||||
}
|
||||
|
||||
// 使用已有的边界位置计算结果，无需重新声明
|
||||
// 确保新的位置和尺寸在合理范围内
|
||||
// 注意：不直接限制newTop和newLeft，而是通过调整尺寸来保持在可视区域内
|
||||
// 这样可以避免拖拽时的突然跳动
|
||||
|
||||
// 获取父容器尺寸，用于边界检查
|
||||
let parentWidth = window.innerWidth
|
||||
let parentHeight = window.innerHeight
|
||||
|
||||
if (parentContainer.value && parentContainer.value !== window) {
|
||||
const parentRect = parentContainer.value.getBoundingClientRect()
|
||||
parentWidth = parentRect.width
|
||||
parentHeight = parentRect.height
|
||||
}
|
||||
|
||||
// 确保整个Area在父容器可视范围内
|
||||
// 如果右侧超出，调整宽度
|
||||
if (newRight > parentWidth) {
|
||||
newWidth = parentWidth - newLeft
|
||||
}
|
||||
|
||||
// 如果底部超出，调整高度
|
||||
if (newBottom > parentHeight) {
|
||||
newHeight = parentHeight - newTop
|
||||
}
|
||||
|
||||
// 确保不小于最小尺寸
|
||||
newWidth = Math.max(minWidth, newWidth)
|
||||
newHeight = Math.max(minHeight, newHeight)
|
||||
|
||||
// 原子性更新originalPosition，避免中间状态被访问
|
||||
originalPosition.value = {
|
||||
width: newWidth,
|
||||
height: newHeight,
|
||||
left: newLeft,
|
||||
top: newTop
|
||||
}
|
||||
|
||||
console.log(`[Area:${props.id}] 更新后originalPosition:`, originalPosition.value) // 添加调试日志
|
||||
@@ -471,7 +545,8 @@ const onAreaResizeMove = (eventData) => {
|
||||
left: originalPosition.value.left,
|
||||
top: originalPosition.value.top,
|
||||
width: originalPosition.value.width,
|
||||
height: originalPosition.value.height
|
||||
height: originalPosition.value.height,
|
||||
timestamp: timestamp || Date.now()
|
||||
}, {
|
||||
source: { component: 'Area', areaId: props.id }
|
||||
})
|
||||
|
||||
@@ -430,6 +430,10 @@ const onResizeStart = (e, direction) => {
|
||||
return;
|
||||
}
|
||||
|
||||
// 重置之前的resize状态，避免状态污染
|
||||
isResizing = false;
|
||||
currentResizeDirection = null;
|
||||
|
||||
isResizing = true;
|
||||
currentResizeDirection = direction;
|
||||
currentAreaId = getCurrentAreaId();
|
||||
@@ -439,20 +443,72 @@ const onResizeStart = (e, direction) => {
|
||||
const startPosition = { x: e.clientX, y: e.clientY };
|
||||
|
||||
const areaHandler = getAreaHandler();
|
||||
if (!areaHandler) {
|
||||
console.error(`[Panel:${props.id}] 无法获取AreaHandler`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取最新的Area状态，添加防御性检查
|
||||
const areaState = areaHandler.getAreaState(currentAreaId);
|
||||
if (!areaState) {
|
||||
console.error(`[Panel:${props.id}] 无法获取Area状态，areaId: ${currentAreaId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用当前DOM元素的实际尺寸作为基准，确保获取最新状态
|
||||
let actualWidth = areaState.width || 0;
|
||||
let actualHeight = areaState.height || 0;
|
||||
let actualLeft = areaState.left || 0;
|
||||
let actualTop = areaState.top || 0;
|
||||
|
||||
// 优先使用Area元素的实际尺寸和位置，而不是Panel元素
|
||||
const areaElement = document.querySelector(`[data-area-id="${currentAreaId}"]`);
|
||||
if (areaElement) {
|
||||
const rect = areaElement.getBoundingClientRect();
|
||||
// 只有当获取到的尺寸有效时才使用DOM尺寸
|
||||
if (rect.width > 0 && rect.height > 0) {
|
||||
// 注意：rect.left和rect.top是相对于视口的位置，需要转换为相对于父容器的位置
|
||||
const parentElement = areaElement.parentElement;
|
||||
if (parentElement) {
|
||||
const parentRect = parentElement.getBoundingClientRect();
|
||||
actualLeft = rect.left - parentRect.left;
|
||||
actualTop = rect.top - parentRect.top;
|
||||
}
|
||||
actualWidth = rect.width;
|
||||
actualHeight = rect.height;
|
||||
console.log(`[Panel:${props.id}] 使用Area DOM实际尺寸和位置作为参考: {width: ${actualWidth}, height: ${actualHeight}, left: ${actualLeft}, top: ${actualTop}}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果Area元素获取失败，尝试使用Panel元素作为备选
|
||||
else {
|
||||
const currentElement = document.querySelector(`[data-panel-id="${props.id}"]`);
|
||||
if (currentElement) {
|
||||
const rect = currentElement.getBoundingClientRect();
|
||||
if (rect.width > 0 && rect.height > 0) {
|
||||
actualWidth = rect.width;
|
||||
actualHeight = rect.height;
|
||||
console.log(`[Panel:${props.id}] 使用Panel DOM实际尺寸作为参考: {width: ${actualWidth}, height: ${actualHeight}}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const areaStartState = {
|
||||
width: areaState.width || 0,
|
||||
height: areaState.height || 0,
|
||||
left: areaState.left || 0,
|
||||
top: areaState.top || 0
|
||||
width: Math.max(200, actualWidth),
|
||||
height: Math.max(30, actualHeight),
|
||||
left: actualLeft,
|
||||
top: actualTop
|
||||
};
|
||||
|
||||
// 发送resize开始事件
|
||||
console.log(`[Panel:${props.id}] 确定的areaStartState:`, areaStartState);
|
||||
|
||||
// 发送resize开始事件，包含初始状态便于调试
|
||||
emitEvent(EVENT_TYPES.PANEL_RESIZE_START, {
|
||||
panelId: props.id,
|
||||
areaId: currentAreaId,
|
||||
direction,
|
||||
position: startPosition,
|
||||
initialState: { width: actualWidth, height: actualHeight, left: actualLeft, top: actualTop }, // 添加初始状态
|
||||
timestamp: Date.now()
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id }
|
||||
@@ -465,40 +521,107 @@ const onResizeStart = (e, direction) => {
|
||||
if (isResizing && currentAreaId) {
|
||||
const currentPosition = { x: e.clientX, y: e.clientY };
|
||||
|
||||
const totalDelta = {
|
||||
width: currentPosition.x - startPosition.x,
|
||||
height: currentPosition.y - startPosition.y
|
||||
};
|
||||
// 直接计算拖动距离，使用更简洁的变量名
|
||||
const deltaX = currentPosition.x - startPosition.x;
|
||||
const deltaY = currentPosition.y - startPosition.y;
|
||||
|
||||
// 定义最小尺寸常量
|
||||
const minWidth = 200;
|
||||
const minHeight = 30;
|
||||
|
||||
// 根据方向正确计算新尺寸
|
||||
let newWidth = areaStartState.width;
|
||||
let newHeight = areaStartState.height;
|
||||
// 使用初始状态作为基准，确保对角线方向拖拽时保持相对位置不变
|
||||
const initialWidth = areaStartState.width;
|
||||
const initialHeight = areaStartState.height;
|
||||
const initialLeft = areaStartState.left;
|
||||
const initialTop = areaStartState.top;
|
||||
|
||||
// 宽度计算
|
||||
if (currentResizeDirection.includes('left')) {
|
||||
// 左方向：宽度增加 = 原始宽度 - deltaX（因为deltaX为负）
|
||||
newWidth = areaStartState.width - totalDelta.width;
|
||||
} else if (currentResizeDirection.includes('right')) {
|
||||
// 右方向：宽度增加 = 原始宽度 + deltaX
|
||||
newWidth = areaStartState.width + totalDelta.width;
|
||||
// 计算初始边界位置
|
||||
const initialRight = initialLeft + initialWidth;
|
||||
const initialBottom = initialTop + initialHeight;
|
||||
|
||||
let newWidth = initialWidth;
|
||||
let newHeight = initialHeight;
|
||||
let newLeft = initialLeft;
|
||||
let newTop = initialTop;
|
||||
|
||||
// 处理不同方向的拖拽逻辑
|
||||
switch (currentResizeDirection) {
|
||||
case 'top-right':
|
||||
// 向右上方拖拽：保持下边框位置不变
|
||||
newTop = Math.max(0, initialTop + deltaY);
|
||||
newHeight = initialBottom - newTop;
|
||||
newWidth = initialWidth + deltaX;
|
||||
break;
|
||||
|
||||
case 'top-left':
|
||||
// 向左上方拖拽：保持下边框和右边框位置不变
|
||||
newLeft = Math.max(0, initialLeft + deltaX);
|
||||
newWidth = initialRight - newLeft;
|
||||
newTop = Math.max(0, initialTop + deltaY);
|
||||
newHeight = initialBottom - newTop;
|
||||
break;
|
||||
|
||||
case 'bottom-right':
|
||||
// 向右下方拖拽：保持上边框位置不变
|
||||
newWidth = initialWidth + deltaX;
|
||||
newHeight = initialHeight + deltaY;
|
||||
break;
|
||||
|
||||
case 'bottom-left':
|
||||
// 向左下方拖拽：保持上边框和右边框位置不变
|
||||
newLeft = Math.max(0, initialLeft + deltaX);
|
||||
newWidth = initialRight - newLeft;
|
||||
newHeight = initialHeight + deltaY;
|
||||
break;
|
||||
|
||||
case 'top':
|
||||
// 向上拖拽：保持下边框位置不变
|
||||
// 注意：向上拖拽时deltaY为负，所以newTop会减小，newHeight会增加
|
||||
newTop = Math.max(0, initialTop + deltaY);
|
||||
newHeight = initialBottom - newTop;
|
||||
break;
|
||||
|
||||
case 'right':
|
||||
// 向右拖拽：保持高度不变
|
||||
newWidth = initialWidth + deltaX;
|
||||
break;
|
||||
|
||||
case 'bottom':
|
||||
// 向下拖拽：保持高度增加
|
||||
newHeight = initialHeight + deltaY;
|
||||
break;
|
||||
|
||||
case 'left':
|
||||
// 向左拖拽：保持右边框位置不变
|
||||
newLeft = Math.max(0, initialLeft + deltaX);
|
||||
newWidth = initialRight - newLeft;
|
||||
break;
|
||||
|
||||
default:
|
||||
// 其他方向，使用默认逻辑
|
||||
if (currentResizeDirection.includes('left')) {
|
||||
newWidth = initialWidth - deltaX;
|
||||
newLeft = initialLeft + deltaX;
|
||||
} else if (currentResizeDirection.includes('right')) {
|
||||
newWidth = initialWidth + deltaX;
|
||||
}
|
||||
|
||||
if (currentResizeDirection.includes('top')) {
|
||||
// 向上拖拽时，deltaY为负，所以newHeight应该增加
|
||||
newTop = Math.max(0, initialTop + deltaY);
|
||||
newHeight = initialBottom - newTop;
|
||||
} else if (currentResizeDirection.includes('bottom')) {
|
||||
newHeight = initialHeight + deltaY;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// 高度计算
|
||||
if (currentResizeDirection.includes('top')) {
|
||||
// 上方向：高度增加 = 原始高度 - deltaY（因为deltaY为负）
|
||||
newHeight = areaStartState.height - totalDelta.height;
|
||||
} else if (currentResizeDirection.includes('bottom')) {
|
||||
// 下方向：高度增加 = 原始高度 + deltaY
|
||||
newHeight = areaStartState.height + totalDelta.height;
|
||||
}
|
||||
// 确保尺寸在合理范围内
|
||||
newWidth = Math.max(minWidth, Math.min(newWidth, window.innerWidth - 50));
|
||||
newHeight = Math.max(minHeight, Math.min(newHeight, window.innerHeight - 100));
|
||||
|
||||
// 检查尺寸是否小于最小值，如果小于则不发送事件
|
||||
if (newWidth < minWidth || newHeight < minHeight) {
|
||||
// 尺寸小于最小值，不发送事件，停止拖拽
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -508,18 +631,19 @@ const onResizeStart = (e, direction) => {
|
||||
};
|
||||
|
||||
const newPosition = {
|
||||
left: areaStartState.left,
|
||||
top: areaStartState.top
|
||||
left: newLeft,
|
||||
top: newTop
|
||||
};
|
||||
|
||||
if (currentResizeDirection.includes('left')) {
|
||||
newPosition.left = areaStartState.left + totalDelta.width;
|
||||
}
|
||||
if (currentResizeDirection.includes('top')) {
|
||||
newPosition.top = areaStartState.top + totalDelta.height;
|
||||
}
|
||||
// 计算实际的下边框位置，用于调试
|
||||
const actualBottom = newTop + newHeight;
|
||||
console.log(`[Panel:${props.id}] resize移动，方向: ${currentResizeDirection}，初始边界: {top: ${initialTop}, bottom: ${initialBottom}, left: ${initialLeft}, right: ${initialRight}}，拖动距离: {deltaX: ${deltaX}, deltaY: ${deltaY}}，新位置: {left: ${newLeft}, top: ${newTop}}，新尺寸: ${JSON.stringify(newSize)}，实际下边框: ${actualBottom}，高度差: ${actualBottom - initialBottom}`);
|
||||
|
||||
console.log(`[Panel:${props.id}] resize移动，方向: ${currentResizeDirection}，总量: ${JSON.stringify(newSize)}，位置: ${JSON.stringify(newPosition)}`);
|
||||
// 发送事件前，确保所有值都是合理的数字
|
||||
if (isNaN(newWidth) || isNaN(newHeight) || isNaN(newPosition.left) || isNaN(newPosition.top)) {
|
||||
console.error(`[Panel:${props.id}] 计算出无效的resize值，跳过事件发送`);
|
||||
return;
|
||||
}
|
||||
|
||||
emitEvent(EVENT_TYPES.PANEL_RESIZE_MOVE, {
|
||||
panelId: props.id,
|
||||
@@ -527,6 +651,7 @@ const onResizeStart = (e, direction) => {
|
||||
direction: currentResizeDirection,
|
||||
size: newSize,
|
||||
position: newPosition,
|
||||
delta: { x: deltaX, y: deltaY }, // 添加拖动距离，便于调试
|
||||
timestamp: Date.now()
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id }
|
||||
@@ -560,8 +685,9 @@ const onResizeStart = (e, direction) => {
|
||||
document.removeEventListener('mouseup', onResizeEnd);
|
||||
document.removeEventListener('mouseleave', onResizeEnd);
|
||||
|
||||
// 重置resize状态
|
||||
// 完全重置resize状态，避免状态污染
|
||||
currentResizeDirection = null;
|
||||
currentAreaId = null;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user