Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix issue where separator shows in dragging tab until a swap happens

Browse Source
This commit is contained in:
Red Adaya 2024-12-10 12:13:03 +08:00
parent d9a4725fe3
commit 477fc03f9a
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/tab/tab.tsx
View File

@ -229,7 +229,6 @@ const Tab = memo(
const separator = currentTabElement.querySelector(".separator") as HTMLElement; const separator = currentTabElement.querySelector(".separator") as HTMLElement;
if (!leftAdjacentElement.classList.contains("active")) { if (!leftAdjacentElement.classList.contains("active")) {
console.log("here!!!!!", currentTabElement, draggingId);
separator.style.opacity = "1"; // Reset opacity for the current tab only if not active separator.style.opacity = "1"; // Reset opacity for the current tab only if not active
} }
@ -269,6 +268,7 @@ const Tab = memo(
const separator = currentTabElement.querySelector(".separator") as HTMLElement; const separator = currentTabElement.querySelector(".separator") as HTMLElement;
if (isActive || draggingId === id) { if (isActive || draggingId === id) {
console.log("here!!!!!", currentTabElement, draggingId);
separator.style.opacity = "0"; separator.style.opacity = "0";
} }

16
frontend/app/tab/tabbar.tsx
View File

@ -103,7 +103,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const [tabIds, setTabIds] = useState([]); const [tabIds, setTabIds] = useState([]);
const [pinnedTabIds, setPinnedTabIds] = useState<Set<string>>(new Set()); const [pinnedTabIds, setPinnedTabIds] = useState<Set<string>>(new Set());
const [dragStartPositions, setDragStartPositions] = useState<number[]>([]); const [dragStartPositions, setDragStartPositions] = useState<number[]>([]);
const [draggingTab, setDraggingTab] = useState<string>(); const [draggingTabId, setDraggingTabId] = useState<string>();
const [tabsLoaded, setTabsLoaded] = useState({}); const [tabsLoaded, setTabsLoaded] = useState({});
const [newTabId, setNewTabId] = useState<string | null>(null); const [newTabId, setNewTabId] = useState<string | null>(null);
@ -376,7 +376,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
totalScrollOffset = draggingTabDataRef.current.totalScrollOffset; totalScrollOffset = draggingTabDataRef.current.totalScrollOffset;
currentX = event.clientX - initialOffsetX - totalScrollOffset; currentX = event.clientX - initialOffsetX - totalScrollOffset;
setDraggingTab((prev) => (prev !== tabId ? tabId : prev)); setDraggingTabId((prev) => (prev !== tabId ? tabId : prev));
// Check if the tab has moved 5 pixels // Check if the tab has moved 5 pixels
if (Math.abs(currentX - tabStartX) >= 50) { if (Math.abs(currentX - tabStartX) >= 50) {
@ -482,7 +482,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
pinnedTabCount = pinnedTabIds.size; pinnedTabCount = pinnedTabIds.size;
} }
// Reset dragging state // Reset dragging state
setDraggingTab(null); setDraggingTabId(null);
// Update workspace tab ids // Update workspace tab ids
fireAndForget( fireAndForget(
async () => async () =>
@ -500,10 +500,10 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const { tabIndex, dragged } = draggingTabDataRef.current; const { tabIndex, dragged } = draggingTabDataRef.current;
// Update the final position of the dragged tab // Update the final position of the dragged tab
const draggingTab = tabIds[tabIndex]; const draggingTabId = tabIds[tabIndex];
const tabWidth = tabWidthRef.current; const tabWidth = tabWidthRef.current;
const finalLeftPosition = tabIndex * tabWidth; const finalLeftPosition = tabIndex * tabWidth;
const ref = tabRefs.current.find((ref) => ref.current.dataset.tabId === draggingTab); const ref = tabRefs.current.find((ref) => ref.current.dataset.tabId === draggingTabId);
if (ref.current) { if (ref.current) {
ref.current.classList.add("animate"); ref.current.classList.add("animate");
ref.current.style.transform = `translate3d(${finalLeftPosition}px,0,0)`; ref.current.style.transform = `translate3d(${finalLeftPosition}px,0,0)`;
@ -518,7 +518,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
ref.current.classList.remove("animate"); ref.current.classList.remove("animate");
}); });
// Reset dragging state // Reset dragging state
setDraggingTab(null); setDraggingTabId(null);
} }
// setTabIndicesMoved([]); // setTabIndicesMoved([]);
@ -535,6 +535,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const tabIndex = tabIds.indexOf(tabId); const tabIndex = tabIds.indexOf(tabId);
const tabStartX = dragStartPositions[tabIndex]; // Starting X position of the tab const tabStartX = dragStartPositions[tabIndex]; // Starting X position of the tab
setTabsSwapped(tabIndex + 1);
// console.log("handleDragStart", tabId, tabIndex, tabStartX); // console.log("handleDragStart", tabId, tabIndex, tabStartX);
if (ref.current) { if (ref.current) {
draggingTabDataRef.current = { draggingTabDataRef.current = {
@ -660,7 +662,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
onLoaded={() => handleTabLoaded(tabId)} onLoaded={() => handleTabLoaded(tabId)}
onPinChange={() => handlePinChange(tabId, !isPinned)} onPinChange={() => handlePinChange(tabId, !isPinned)}
isBeforeActive={isBeforeActive(tabId)} isBeforeActive={isBeforeActive(tabId)}
draggingId={draggingTab} draggingId={draggingTabId}
tabWidth={tabWidthRef.current} tabWidth={tabWidthRef.current}
isNew={tabId === newTabId} isNew={tabId === newTabId}
tabIds={tabIds} tabIds={tabIds}