From f8e2067b3ca5bd686e254008df455bf94373a6f0 Mon Sep 17 00:00:00 2001 From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com> Date: Sun, 20 Apr 2025 20:43:46 +0800 Subject: [PATCH] Update LayoutConfigurator.vue --- .../src/components/LayoutConfigurator.vue | 251 ++++-------------- 1 file changed, 46 insertions(+), 205 deletions(-) diff --git a/packages/frontend/src/components/LayoutConfigurator.vue b/packages/frontend/src/components/LayoutConfigurator.vue index 358e91e..44977f4 100644 --- a/packages/frontend/src/components/LayoutConfigurator.vue +++ b/packages/frontend/src/components/LayoutConfigurator.vue @@ -26,22 +26,22 @@ const localLayoutTree: Ref = ref(null); // 标记是否有更改未保存 const hasChanges = ref(false); -// --- Resizing State --- +// --- Dialog State --- const dialogRef = ref(null); // 对话框元素的引用 -const initialDialogState = { width: 800, height: 600 }; // 初始/默认尺寸 (px) -const dialogStyle = reactive({ - width: `${initialDialogState.width}px`, - height: `${initialDialogState.height}px`, - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', // 初始居中 - position: 'absolute' as 'absolute', // 显式设置定位 -}); -const isResizing = ref(false); -const resizeHandle = ref(null); // 记录当前拖拽的手柄 ('t', 'b', 'l', 'r', 'tl', 'tr', 'bl', 'br') -const startDragPos = { x: 0, y: 0 }; -const startDialogRect = { width: 0, height: 0, top: 0, left: 0 }; -const minDialogSize = { width: 400, height: 300 }; // 最小尺寸限制 +// 移除 initialDialogState, width, height 从 dialogStyle +// dialogStyle 现在不再需要，因为定位由 overlay flex 处理，尺寸由 CSS 处理 +// const dialogStyle = reactive({ +// top: '50%', +// left: '50%', +// transform: 'translate(-50%, -50%)', // 初始居中 +// position: 'absolute' as 'absolute', // 显式设置定位 +// }); +// 移除 Resizing 相关的状态 +// const isResizing = ref(false); +// const resizeHandle = ref(null); +// const startDragPos = { x: 0, y: 0 }; +// const startDialogRect = { width: 0, height: 0, top: 0, left: 0 }; +// const minDialogSize = { width: 400, height: 300 }; // 移至 CSS // --- Watchers --- // 当弹窗可见时，从 store 加载当前布局并计算初始位置 @@ -54,37 +54,16 @@ watch(() => props.isVisible, (newValue) => { hasChanges.value = false; console.log('[LayoutConfigurator] 弹窗打开，已加载当前布局到本地副本。'); - // 重置/计算初始位置和大小 (确保在 DOM 更新后执行，或给个延迟) - requestAnimationFrame(() => { - if (dialogRef.value) { - // 尝试读取当前计算出的尺寸，如果失败则使用默认值 - const currentRect = dialogRef.value.getBoundingClientRect(); - const initialWidth = currentRect.width > minDialogSize.width ? currentRect.width : initialDialogState.width; - const initialHeight = currentRect.height > minDialogSize.height ? currentRect.height : initialDialogState.height; - - dialogStyle.width = `${initialWidth}px`; - dialogStyle.height = `${initialHeight}px`; - dialogStyle.left = `${(window.innerWidth - initialWidth) / 2}px`; - dialogStyle.top = `${(window.innerHeight - initialHeight) / 2}px`; - dialogStyle.transform = 'none'; // 移除 transform 居中 - dialogStyle.position = 'absolute'; - console.log('[LayoutConfigurator] Dialog initial position calculated:', dialogStyle); - } else { - // Fallback if ref not ready (less accurate centering) - dialogStyle.width = `${initialDialogState.width}px`; - dialogStyle.height = `${initialDialogState.height}px`; - dialogStyle.left = '50%'; - dialogStyle.top = '50%'; - dialogStyle.transform = 'translate(-50%, -50%)'; - dialogStyle.position = 'absolute'; - } - }); + // 弹窗打开时的逻辑 (不再需要设置样式) + console.log('[LayoutConfigurator] Dialog opened.'); + // 移除 requestAnimationFrame 和尺寸/位置计算逻辑 } else { localLayoutTree.value = null; // 关闭时清空本地副本 - isResizing.value = false; // 确保关闭时重置拖拽状态 - window.removeEventListener('mousemove', handleMouseMove); - window.removeEventListener('mouseup', handleMouseUp); + // 移除 isResizing 和事件监听器移除 (因为 resizing 功能已移除) + // isResizing.value = false; + // window.removeEventListener('mousemove', handleMouseMove); + // window.removeEventListener('mouseup', handleMouseUp); } }, /*{ immediate: true }*/); // 移除 immediate: true 解决初始化顺序问题 @@ -175,103 +154,8 @@ const resetToDefault = () => { } }; -// --- Resizing Methods --- -// 将 handleMouseMove 和 handleMouseUp 定义移到 watch 之前 - -const handleMouseMove = (event: MouseEvent) => { - if (!isResizing.value || !resizeHandle.value) return; - - const deltaX = event.clientX - startDragPos.x; - const deltaY = event.clientY - startDragPos.y; - - let newWidth = startDialogRect.width; - let newHeight = startDialogRect.height; - let newTop = startDialogRect.top; - let newLeft = startDialogRect.left; - - // 根据拖拽的手柄计算新的尺寸和位置 (中心缩放) - if (resizeHandle.value.includes('r')) { - newWidth = startDialogRect.width + deltaX * 2; - newLeft = startDialogRect.left - deltaX; - } - if (resizeHandle.value.includes('l')) { - newWidth = startDialogRect.width - deltaX * 2; - newLeft = startDialogRect.left + deltaX; - } - if (resizeHandle.value.includes('b')) { - newHeight = startDialogRect.height + deltaY * 2; - newTop = startDialogRect.top - deltaY; - } - if (resizeHandle.value.includes('t')) { - newHeight = startDialogRect.height - deltaY * 2; - newTop = startDialogRect.top + deltaY; - } - - // 应用最小尺寸限制 - if (newWidth < minDialogSize.width) { - const diff = minDialogSize.width - newWidth; - newWidth = minDialogSize.width; - // 根据拖拽方向调整 left 以保持中心 - if (resizeHandle.value.includes('r')) newLeft += diff / 2; - if (resizeHandle.value.includes('l')) newLeft -= diff / 2; - } - if (newHeight < minDialogSize.height) { - const diff = minDialogSize.height - newHeight; - newHeight = minDialogSize.height; - // 根据拖拽方向调整 top 以保持中心 - if (resizeHandle.value.includes('b')) newTop += diff / 2; - if (resizeHandle.value.includes('t')) newTop -= diff / 2; - } - - - // 更新样式 - dialogStyle.width = `${newWidth}px`; - dialogStyle.height = `${newHeight}px`; - dialogStyle.top = `${newTop}px`; - dialogStyle.left = `${newLeft}px`; -}; - -const handleMouseUp = () => { - if (isResizing.value) { - console.log(`[LayoutConfigurator] MouseUp. Final rect:`, { width: dialogStyle.width, height: dialogStyle.height, top: dialogStyle.top, left: dialogStyle.left }); - isResizing.value = false; - resizeHandle.value = null; - // 确保移除监听器 - window.removeEventListener('mousemove', handleMouseMove); - window.removeEventListener('mouseup', handleMouseUp); - } -}; - - -const handleMouseDown = (event: MouseEvent, handle: string) => { - if (!dialogRef.value) return; - event.preventDefault(); // 阻止默认行为，如文本选择 - event.stopPropagation(); - - isResizing.value = true; - resizeHandle.value = handle; - startDragPos.x = event.clientX; - startDragPos.y = event.clientY; - - // 解析当前的 px 值 - const currentWidth = parseFloat(dialogStyle.width); - const currentHeight = parseFloat(dialogStyle.height); - const currentTop = parseFloat(dialogStyle.top); - const currentLeft = parseFloat(dialogStyle.left); - - startDialogRect.width = isNaN(currentWidth) ? initialDialogState.width : currentWidth; - startDialogRect.height = isNaN(currentHeight) ? initialDialogState.height : currentHeight; - startDialogRect.top = isNaN(currentTop) ? (window.innerHeight - startDialogRect.height) / 2 : currentTop; - startDialogRect.left = isNaN(currentLeft) ? (window.innerWidth - startDialogRect.width) / 2 : currentLeft; - - console.log(`[LayoutConfigurator] MouseDown on handle ${handle}. Start rect:`, { ...startDialogRect }); - - - // 添加监听器 - window.addEventListener('mousemove', handleMouseMove); - window.addEventListener('mouseup', handleMouseUp); -}; - +// --- Resizing Methods (Removed) --- +// Resizing functionality is removed to allow content-based sizing. // --- Drag & Drop Methods (for panes, unchanged) --- // 克隆函数：当从可用列表拖拽时，创建新的 LayoutNode 对象 @@ -352,17 +236,9 @@ const handleNodeRemove = (payload: { parentNodeId: string | undefined; nodeIndex