边框调节
This commit is contained in:
zqm
@@ -286,13 +286,13 @@ const onToggleToolbar = () => {
|
||||
};
|
||||
|
||||
// 拖拽相关状态
|
||||
let isDragging = false
|
||||
let currentDragId = null
|
||||
let currentAreaId = null
|
||||
const isDragging = ref(false)
|
||||
const currentDragId = ref(null)
|
||||
const currentAreaId = ref(null)
|
||||
|
||||
// Resize相关状态
|
||||
let isResizing = false
|
||||
let currentResizeDirection = null
|
||||
const isResizing = ref(false)
|
||||
const currentResizeDirection = ref(null)
|
||||
|
||||
// 拖拽开始
|
||||
const onDragStart = (e) => {
|
||||
@@ -304,22 +304,22 @@ const onDragStart = (e) => {
|
||||
// 只有当点击的是标题栏区域（不是按钮）时才触发拖拽
|
||||
if (!e.target.closest('.title-bar-buttons') && !e.target.closest('button')) {
|
||||
// 1. 立即重置之前的拖拽状态
|
||||
isDragging = false
|
||||
currentDragId = null
|
||||
currentAreaId = null
|
||||
isDragging.value = false
|
||||
currentDragId.value = null
|
||||
currentAreaId.value = null
|
||||
|
||||
isDragging = true
|
||||
isDragging.value = true
|
||||
|
||||
// 生成统一的 dragId
|
||||
currentDragId = `panel_${props.id}_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
|
||||
currentDragId.value = `panel_${props.id}_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
|
||||
|
||||
console.log(`[Panel:${props.id}] 开始拖拽, dragId: ${currentDragId}`)
|
||||
console.log(`[Panel:${props.id}] 开始拖拽, dragId: ${currentDragId.value}`)
|
||||
|
||||
// 保存当前Area的ID，避免在拖拽移动过程中重复调用getCurrentAreaId()
|
||||
currentAreaId = getCurrentAreaId();
|
||||
currentAreaId.value = getCurrentAreaId();
|
||||
|
||||
// 获取当前区域的起始位置
|
||||
const areaState = areaHandler.getAreaState(currentAreaId);
|
||||
const areaState = areaHandler.getAreaState(currentAreaId.value);
|
||||
const areaStartPosition = {
|
||||
left: areaState.left || 0,
|
||||
top: areaState.top || 0
|
||||
@@ -335,9 +335,9 @@ const onDragStart = (e) => {
|
||||
const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
|
||||
|
||||
emitEvent(EVENT_TYPES.PANEL_DRAG_START, {
|
||||
dragId: currentDragId,
|
||||
dragId: currentDragId.value,
|
||||
panelId: props.id,
|
||||
areaId: currentAreaId,
|
||||
areaId: currentAreaId.value,
|
||||
position: { x: e.clientX, y: e.clientY },
|
||||
left: areaStartPosition.left,
|
||||
top: areaStartPosition.top,
|
||||
@@ -346,12 +346,12 @@ const onDragStart = (e) => {
|
||||
areas: floatingAreas
|
||||
}
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId.value }
|
||||
})
|
||||
|
||||
// 添加全局的拖拽移动和结束事件监听
|
||||
const onDragMove = (e) => {
|
||||
if (isDragging) {
|
||||
if (isDragging.value) {
|
||||
// 计算偏移量
|
||||
const deltaX = e.clientX - dragStartPosition.x;
|
||||
const deltaY = e.clientY - dragStartPosition.y;
|
||||
@@ -364,9 +364,9 @@ const onDragStart = (e) => {
|
||||
const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
|
||||
|
||||
emitEvent(EVENT_TYPES.PANEL_DRAG_MOVE, {
|
||||
dragId: currentDragId,
|
||||
dragId: currentDragId.value,
|
||||
panelId: props.id,
|
||||
areaId: currentAreaId,
|
||||
areaId: currentAreaId.value,
|
||||
position: { x: e.clientX, y: e.clientY },
|
||||
left: newLeft,
|
||||
top: newTop,
|
||||
@@ -375,21 +375,21 @@ const onDragStart = (e) => {
|
||||
areas: floatingAreas
|
||||
}
|
||||
}, {
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId }
|
||||
source: { component: 'Panel', panelId: props.id, dragId: currentDragId.value }
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
const onDragEnd = (e) => {
|
||||
if (isDragging) {
|
||||
isDragging = false
|
||||
if (isDragging.value) {
|
||||
isDragging.value = false
|
||||
// 获取所有浮动区域信息，用于单面板检测
|
||||
const floatingAreas = areaHandler.areaStateManager.getFloatingAreas();
|
||||
|
||||
emitEvent(EVENT_TYPES.PANEL_DRAG_END, {
|
||||
dragId: currentDragId,
|
||||
dragId: currentDragId.value,
|
||||
panelId: props.id,
|
||||
areaId: currentAreaId,
|
||||
areaId: currentAreaId.value,
|
||||
position: { x: e.clientX, y: e.clientY },
|
||||
timestamp: Date.now(),
|
||||
layout: {
|
||||
@@ -431,14 +431,15 @@ const onResizeStart = (e, direction) => {
|
||||
}
|
||||
|
||||
// 重置之前的resize状态，避免状态污染
|
||||
isResizing = false;
|
||||
currentResizeDirection = null;
|
||||
isResizing.value = false;
|
||||
currentResizeDirection.value = null;
|
||||
currentAreaId.value = null;
|
||||
|
||||
isResizing = true;
|
||||
currentResizeDirection = direction;
|
||||
currentAreaId = getCurrentAreaId();
|
||||
isResizing.value = true;
|
||||
currentResizeDirection.value = direction;
|
||||
currentAreaId.value = getCurrentAreaId();
|
||||
|
||||
console.log(`[Panel:${props.id}] 当前AreaID: ${currentAreaId}`);
|
||||
console.log(`[Panel:${props.id}] 当前AreaID: ${currentAreaId.value}`);
|
||||
|
||||
const startPosition = { x: e.clientX, y: e.clientY };
|
||||
|
||||
@@ -449,9 +450,9 @@ const onResizeStart = (e, direction) => {
|
||||
}
|
||||
|
||||
// 获取最新的Area状态，添加防御性检查
|
||||
const areaState = areaHandler.getAreaState(currentAreaId);
|
||||
const areaState = areaHandler.getAreaState(currentAreaId.value);
|
||||
if (!areaState) {
|
||||
console.error(`[Panel:${props.id}] 无法获取Area状态，areaId: ${currentAreaId}`);
|
||||
console.error(`[Panel:${props.id}] 无法获取Area状态，areaId: ${currentAreaId.value}`);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -462,7 +463,7 @@ const onResizeStart = (e, direction) => {
|
||||
let actualTop = areaState.top || 0;
|
||||
|
||||
// 优先使用Area元素的实际尺寸和位置，而不是Panel元素
|
||||
const areaElement = document.querySelector(`[data-area-id="${currentAreaId}"]`);
|
||||
const areaElement = document.querySelector(`[data-area-id="${currentAreaId.value}"]`);
|
||||
if (areaElement) {
|
||||
const rect = areaElement.getBoundingClientRect();
|
||||
// 只有当获取到的尺寸有效时才使用DOM尺寸
|
||||
@@ -505,7 +506,7 @@ const onResizeStart = (e, direction) => {
|
||||
// 发送resize开始事件，包含初始状态便于调试
|
||||
emitEvent(EVENT_TYPES.PANEL_RESIZE_START, {
|
||||
panelId: props.id,
|
||||
areaId: currentAreaId,
|
||||
areaId: currentAreaId.value,
|
||||
direction,
|
||||
position: startPosition,
|
||||
initialState: { width: actualWidth, height: actualHeight, left: actualLeft, top: actualTop }, // 添加初始状态
|
||||
@@ -518,7 +519,7 @@ const onResizeStart = (e, direction) => {
|
||||
|
||||
// 添加全局的resize移动和结束事件监听
|
||||
const onResizeMove = (e) => {
|
||||
if (isResizing && currentAreaId) {
|
||||
if (isResizing.value && currentAreaId.value) {
|
||||
const currentPosition = { x: e.clientX, y: e.clientY };
|
||||
|
||||
// 直接计算拖动距离，使用更简洁的变量名
|
||||
@@ -545,7 +546,7 @@ const onResizeStart = (e, direction) => {
|
||||
let newTop = initialTop;
|
||||
|
||||
// 处理不同方向的拖拽逻辑
|
||||
switch (currentResizeDirection) {
|
||||
switch (currentResizeDirection.value) {
|
||||
case 'top-right':
|
||||
// 向右上方拖拽：保持下边框位置不变
|
||||
newTop = Math.max(0, initialTop + deltaY);
|
||||
@@ -599,18 +600,18 @@ const onResizeStart = (e, direction) => {
|
||||
|
||||
default:
|
||||
// 其他方向，使用默认逻辑
|
||||
if (currentResizeDirection.includes('left')) {
|
||||
if (currentResizeDirection.value.includes('left')) {
|
||||
newWidth = initialWidth - deltaX;
|
||||
newLeft = initialLeft + deltaX;
|
||||
} else if (currentResizeDirection.includes('right')) {
|
||||
} else if (currentResizeDirection.value.includes('right')) {
|
||||
newWidth = initialWidth + deltaX;
|
||||
}
|
||||
|
||||
if (currentResizeDirection.includes('top')) {
|
||||
if (currentResizeDirection.value.includes('top')) {
|
||||
// 向上拖拽时，deltaY为负，所以newHeight应该增加
|
||||
newTop = Math.max(0, initialTop + deltaY);
|
||||
newHeight = initialBottom - newTop;
|
||||
} else if (currentResizeDirection.includes('bottom')) {
|
||||
} else if (currentResizeDirection.value.includes('bottom')) {
|
||||
newHeight = initialHeight + deltaY;
|
||||
}
|
||||
break;
|
||||
@@ -637,7 +638,7 @@ const onResizeStart = (e, direction) => {
|
||||
|
||||
// 计算实际的下边框位置，用于调试
|
||||
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.value}，初始边界: {top: ${initialTop}, bottom: ${initialBottom}, left: ${initialLeft}, right: ${initialRight}}，拖动距离: {deltaX: ${deltaX}, deltaY: ${deltaY}}，新位置: {left: ${newLeft}, top: ${newTop}}，新尺寸: ${JSON.stringify(newSize)}，实际下边框: ${actualBottom}，高度差: ${actualBottom - initialBottom}`);
|
||||
|
||||
// 发送事件前，确保所有值都是合理的数字
|
||||
if (isNaN(newWidth) || isNaN(newHeight) || isNaN(newPosition.left) || isNaN(newPosition.top)) {
|
||||
@@ -647,8 +648,8 @@ const onResizeStart = (e, direction) => {
|
||||
|
||||
emitEvent(EVENT_TYPES.PANEL_RESIZE_MOVE, {
|
||||
panelId: props.id,
|
||||
areaId: currentAreaId,
|
||||
direction: currentResizeDirection,
|
||||
areaId: currentAreaId.value,
|
||||
direction: currentResizeDirection.value,
|
||||
size: newSize,
|
||||
position: newPosition,
|
||||
delta: { x: deltaX, y: deltaY }, // 添加拖动距离，便于调试
|
||||
@@ -662,16 +663,16 @@ const onResizeStart = (e, direction) => {
|
||||
};
|
||||
|
||||
const onResizeEnd = (e) => {
|
||||
if (isResizing && currentAreaId) {
|
||||
isResizing = false;
|
||||
if (isResizing.value && currentAreaId.value) {
|
||||
isResizing.value = false;
|
||||
|
||||
console.log(`[Panel:${props.id}] resize结束，方向: ${currentResizeDirection}，最终位置: {x: ${e.clientX}, y: ${e.clientY}}`);
|
||||
console.log(`[Panel:${props.id}] resize结束，方向: ${currentResizeDirection.value}，最终位置: {x: ${e.clientX}, y: ${e.clientY}}`);
|
||||
|
||||
// 发送resize结束事件
|
||||
emitEvent(EVENT_TYPES.PANEL_RESIZE_END, {
|
||||
panelId: props.id,
|
||||
areaId: currentAreaId,
|
||||
direction: currentResizeDirection,
|
||||
areaId: currentAreaId.value,
|
||||
direction: currentResizeDirection.value,
|
||||
finalPosition: { x: e.clientX, y: e.clientY },
|
||||
timestamp: Date.now()
|
||||
}, {
|
||||
@@ -686,8 +687,8 @@ const onResizeStart = (e, direction) => {
|
||||
document.removeEventListener('mouseleave', onResizeEnd);
|
||||
|
||||
// 完全重置resize状态，避免状态污染
|
||||
currentResizeDirection = null;
|
||||
currentAreaId = null;
|
||||
currentResizeDirection.value = null;
|
||||
currentAreaId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user