From 9c51bca2e6a561d62532a4739efaf596bda37a12 Mon Sep 17 00:00:00 2001 From: Red Adaya Date: Tue, 10 Dec 2024 10:52:38 +0800 Subject: [PATCH] save work --- frontend/app/store/global.ts | 2 + frontend/app/tab/tab.tsx | 233 +++++++++++++---------------------- frontend/app/tab/tabbar.tsx | 51 ++++---- frontend/types/custom.d.ts | 1 + 4 files changed, 116 insertions(+), 171 deletions(-) diff --git a/frontend/app/store/global.ts b/frontend/app/store/global.ts index 456cdff64..eb5c10cf7 100644 --- a/frontend/app/store/global.ts +++ b/frontend/app/store/global.ts @@ -146,6 +146,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) { const notificationPopoverModeAtom = atom(false); const reinitVersion = atom(0); const tabIndicesMovedAtom = atom([]); + const tabsSwappedAtom = atom(null); atoms = { // initialized in wave.ts (will not be null inside of application) clientId: clientIdAtom, @@ -169,6 +170,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) { notificationPopoverMode: notificationPopoverModeAtom, reinitVersion, tabIndicesMoved: tabIndicesMovedAtom, + tabsSwapped: tabsSwappedAtom, }; } diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx index 24cfc5487..a787c3f36 100644 --- a/frontend/app/tab/tab.tsx +++ b/frontend/app/tab/tab.tsx @@ -22,7 +22,7 @@ interface TabProps { isActive: boolean; isFirst: boolean; isBeforeActive: boolean; - isDragging: boolean; + draggingId: string; tabWidth: number; isNew: boolean; isPinned: boolean; @@ -46,7 +46,7 @@ const Tab = memo( isFirst, isPinned, isBeforeActive, - isDragging, + draggingId, tabWidth, isNew, tabIds, @@ -71,7 +71,7 @@ const Tab = memo( const tabRef = useRef(null); const adjacentTabsRef = useRef>(new Set()); - const tabIndicesMoved = useAtomValue(atoms.tabIndicesMoved); + const tabsSwapped = useAtomValue(atoms.tabsSwapped); const tabs = document.querySelectorAll(".tab"); const [adjacentTabs, setAdjacentTabs] = useAtom(adjacentTabsAtom); @@ -208,64 +208,81 @@ const Tab = memo( [onPinChange, handleRenameTab, id, onClose, isPinned] ); - if (isDragging) { - console.log("isDragging", isDragging); - console.log("dragging tab idx>>>>>>", id); - const draggingTabIdx = tabIds.indexOf(id); + // if (isDragging) { + // console.log("isDragging", isDragging); + // console.log("dragging tab idx>>>>>>", id); + // const draggingTabIdx = tabIds.indexOf(id); - // Add the dragging tab and its right adjacent tab to the Set - adjacentTabsRef.current.add(id); - if (draggingTabIdx + 1 < tabIds.length) { - adjacentTabsRef.current.add(tabIds[draggingTabIdx + 1]); - } - } + // // Add the dragging tab and its right adjacent tab to the Set + // adjacentTabsRef.current.add(id); + // if (draggingTabIdx + 1 < tabIds.length) { + // adjacentTabsRef.current.add(tabIds[draggingTabIdx + 1]); + // } + // } - if (isActive) { - const activeTabIdx = tabIds.indexOf(id); + // if (isActive) { + // const activeTabIdx = tabIds.indexOf(id); - // Add the active tab and its right adjacent tab to the Set - adjacentTabsRef.current.add(id); - if (activeTabIdx + 1 < tabIds.length) { - adjacentTabsRef.current.add(tabIds[activeTabIdx + 1]); - } - } + // // Add the active tab and its right adjacent tab to the Set + // adjacentTabsRef.current.add(id); + // if (activeTabIdx + 1 < tabIds.length) { + // adjacentTabsRef.current.add(tabIds[activeTabIdx + 1]); + // } + // } useEffect(() => { - console.log("triggered!!!!"); - // if ((isDragging || isActive) && tabIndicesMoved.length) { - if (isDragging || isActive) { + console.log("triggered!!!!", tabsSwapped); + + // Get the index of the current tab ID + const currentIndex = tabIds.indexOf(id); + // Get the right adjacent ID + const rightAdjacentId = tabIds[currentIndex + 1]; + // Get the left adjacent ID + const leftAdjacentId = tabIds[currentIndex - 1]; + + const reset = () => { + if (!isActive) { + const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; + // To check if leftAdjacentElement is the active tab then do not reset opacity + const leftAdjacentElement = document.querySelector( + `[data-tab-id="${leftAdjacentId}"]` + ) as HTMLElement; + if (!currentTabElement || !leftAdjacentElement) return; + const separator = currentTabElement.querySelector(".separator") as HTMLElement; + + if (!leftAdjacentElement.classList.contains("active")) { + separator.style.opacity = "1"; // Reset opacity for the current tab only if not active + } + } + + if (rightAdjacentId) { + console.log("rightAdjacentId!!!!!", rightAdjacentId); + + // To check if rightAdjacentElement is the active tab then do not reset opacity + const rightAdjacentElement = document.querySelector( + `[data-tab-id="${rightAdjacentId}"]` + ) as HTMLElement; + if (!rightAdjacentElement) return; + const separator = rightAdjacentElement.querySelector(".separator") as HTMLElement; + + if (!rightAdjacentElement.classList.contains("active")) { + separator.style.opacity = "1"; // Reset opacity for the right adjacent tab + } + } + }; + + if (tabsSwapped || isActive) { // Find the index of the current tab ID - const currentIndex = tabIds.indexOf(id); console.log("tabIds", tabIds); console.log("id", id); - // Get the right adjacent ID - const rightAdjacentId = tabIds[currentIndex + 1]; - // Get the left adjacent ID - const leftAdjacentId = tabIds[currentIndex - 1]; + const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; + if (!currentTabElement) return; + const separator = currentTabElement.querySelector(".separator") as HTMLElement; - // console.log("rightAdjacentId", rightAdjacentId); - - // Set the opacity of the separator for the current tab - if (currentIndex !== -1) { - const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; - - if (currentTabElement) { - const separator = currentTabElement.querySelector(".separator") as HTMLElement; - if (separator) { - console.log("1"); - // separator.style.opacity = "0"; // Always hide the separator of the current tab - - if (isActive && !tabIndicesMoved.length) { - separator.style.opacity = "0"; // Hide the separator of the right adjacent tab - } else if (tabIndicesMoved.length) { - // console.log("rightAdjacentTabElement>>>>>>", rightAdjacentTabElement); - console.log("2"); - separator.style.opacity = "0"; // Hide the separator of the right adjacent tab - } - } - } + if (isActive || draggingId === id) { + separator.style.opacity = "0"; } // Set the opacity of the separator for the right adjacent tab @@ -273,101 +290,46 @@ const Tab = memo( const rightAdjacentTabElement = document.querySelector( `[data-tab-id="${rightAdjacentId}"]` ) as HTMLElement; - if (rightAdjacentTabElement) { - const separator = rightAdjacentTabElement.querySelector(".separator") as HTMLElement; + if (!rightAdjacentTabElement) return; + const separator = rightAdjacentTabElement.querySelector(".separator") as HTMLElement; - if (separator) { - if (isActive && !tabIndicesMoved.length) { - separator.style.opacity = "0"; // Hide the separator of the right adjacent tab - } else if (tabIndicesMoved.length) { - // console.log("rightAdjacentTabElement>>>>>>", rightAdjacentTabElement); - // console.log("2"); - separator.style.opacity = "0"; // Hide the separator of the right adjacent tab - } - } + if (isActive || draggingId === id) { + separator.style.opacity = "0"; } } - // Cleanup function to reset opacity return () => { - if (!isActive && currentIndex !== -1) { - const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; - - // To check if leftAdjacentElement is the active tab then do not reset opacity - const leftAdjacentElement = document.querySelector( - `[data-tab-id="${leftAdjacentId}"]` - ) as HTMLElement; - if ( - currentTabElement && - leftAdjacentElement && - !leftAdjacentElement.classList.contains("active") - ) { - const separator = currentTabElement.querySelector(".separator") as HTMLElement; - if (separator) { - separator.style.opacity = "1"; // Reset opacity for the current tab only if not active - } - } - } - - if (rightAdjacentId) { - const rightAdjacentTabElement = document.querySelector( - `[data-tab-id="${rightAdjacentId}"]` - ) as HTMLElement; - console.log("rightAdjacentId!!!!!", rightAdjacentId); - - // To check if rightAdjacentElement is the active tab then do not reset opacity - const rightAdjacentElement = document.querySelector( - `[data-tab-id="${rightAdjacentId}"]` - ) as HTMLElement; - if ( - rightAdjacentTabElement && - rightAdjacentElement && - !rightAdjacentElement.classList.contains("active") - ) { - const separator = rightAdjacentTabElement.querySelector(".separator") as HTMLElement; - if (separator) { - separator.style.opacity = "1"; // Reset opacity for the right adjacent tab - } - } - } + console.log("entered return +++++++++++++++"); + reset(); }; + } else { + console.log("entered else ?????????????????????????"); + reset(); } - }, [id, tabIds, isFirst, isActive, tabIndicesMoved]); + }, [id, tabIds, isFirst, isActive, draggingId, tabsSwapped]); const handleMouseEnter = useCallback(() => { if (isActive) return; const currentIndex = tabIds.indexOf(id); - console.log("tabIds", tabIds); - console.log("id", id); + // console.log("tabIds", tabIds); + // console.log("id", id); const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; if (currentTabElement) { // Ensure the element exists - if (!tabIndicesMoved.length) { + if (!tabsSwapped) { currentTabElement.classList.add("hover"); } } - // const crrSeparator = currentTabElement.querySelector(".separator") as HTMLElement; - // if (crrSeparator) { - // crrSeparator.style.opacity = "0"; // Reset opacity for the right adjacent tab - // } - - // const rightAdjacentTabElement = document.querySelector( - // `[data-tab-id="${rightAdjacentId}"]` - // ) as HTMLElement; - // const rightSeparator = rightAdjacentTabElement.querySelector(".separator") as HTMLElement; - // if (rightSeparator) { - // rightSeparator.style.opacity = "0"; // Reset opacity for the right adjacent tab - // } - }, [id, isActive, tabIndicesMoved]); + }, [id, isActive, tabsSwapped]); const handleMouseLeave = useCallback(() => { if (isActive) return; - console.log("tabIds", tabIds); - console.log("id", id); + // console.log("tabIds", tabIds); + // console.log("id", id); const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; if (currentTabElement) { @@ -375,39 +337,14 @@ const Tab = memo( currentTabElement.classList.remove("hover"); } - - // const currentIndex = tabIds.indexOf(id); - - // console.log("tabIds", tabIds); - // console.log("id", id); - - // // Get the right adjacent ID - // const rightAdjacentId = tabIds[currentIndex + 1]; - // // Get the left adjacent ID - // const leftAdjacentId = tabIds[currentIndex - 1]; - - // const currentElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; - // const crrSeparator = currentElement.querySelector(".separator") as HTMLElement; - // const leftAdjacentElement = document.querySelector(`[data-tab-id="${leftAdjacentId}"]`) as HTMLElement; - // if (crrSeparator && leftAdjacentElement && !leftAdjacentElement.classList.contains("active")) { - // crrSeparator.style.opacity = "1"; // Reset opacity for the right adjacent tab - // } - - // const rightAdjacentElement = document.querySelector( - // `[data-tab-id="${rightAdjacentId}"]` - // ) as HTMLElement; - // const rightSeparator = rightAdjacentElement.querySelector(".separator") as HTMLElement; - // if (rightSeparator && rightAdjacentElement && !rightAdjacentElement.classList.contains("active")) { - // rightSeparator.style.opacity = "1"; // Reset opacity for the right adjacent tab - // } - }, [id, isActive, tabIndicesMoved]); + }, [id, isActive, tabsSwapped]); return (
{ const isFullScreen = useAtomValue(atoms.isFullScreen); const settings = useAtomValue(atoms.settingsAtom); const setTabIndicesMoved = useSetAtom(atoms.tabIndicesMoved); + const setTabsSwapped = useSetAtom(atoms.tabsSwapped); let prevDelta: number; let prevDragDirection: string; @@ -150,7 +151,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { useEffect(() => { if (workspace) { // Compare current tabIds with new workspace.tabids - console.log("tabbar workspace", workspace); + // console.log("tabbar workspace", workspace); const newTabIds = new Set([...(workspace.pinnedtabids ?? []), ...(workspace.tabids ?? [])]); const newPinnedTabIds = workspace.pinnedtabids ?? []; @@ -161,9 +162,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => { if (!areEqual) { const newPinnedTabIdSet = new Set(newPinnedTabIds); - console.log("newPinnedTabIds", newPinnedTabIds); + // console.log("newPinnedTabIds", newPinnedTabIds); const newTabIdList = newPinnedTabIds.concat([...newTabIds].filter((id) => !newPinnedTabIdSet.has(id))); // Corrects for any duplicates between the two lists - console.log("newTabIdList", newTabIdList); + // console.log("newTabIdList", newTabIdList); setTabIds(newTabIdList); setPinnedTabIds(newPinnedTabIdSet); } @@ -316,7 +317,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { if (currentX + tabWidth > otherTabStart + tabWidth / 2) { // setTest("switching right"); newTabIndex = i; - console.log("newTabIndex===", newTabIndex, tabRefs.current); + // console.log("newTabIndex===", newTabIndex, tabRefs.current); } } } else { @@ -418,8 +419,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => { // Find current index of the dragged tab in tempTabs const currentIndexOfDraggingTab = tabIds.indexOf(tabId); - console.log("currentIndexOfDraggingTab", currentIndexOfDraggingTab); - console.log("tabIndex", tabIndex); + // console.log("currentIndexOfDraggingTab", currentIndexOfDraggingTab); + // console.log("tabIndex", tabIndex); // Move the dragged tab to its new position if (currentIndexOfDraggingTab !== -1) { @@ -427,11 +428,14 @@ const TabBar = memo(({ workspace }: TabBarProps) => { } // Track indices that have been moved - if (getDragDirection(currentX) === "+") { - setTabIndicesMoved([tabIds[newTabIndex], tabIds[newTabIndex + 1]].filter(Boolean)); - } else if (getDragDirection(currentX) === "-") { - setTabIndicesMoved([tabIds[newTabIndex - 1], tabIds[newTabIndex]].filter(Boolean)); - } + // if (getDragDirection(currentX) === "+") { + // setTabIndicesMoved([tabIds[newTabIndex], tabIds[newTabIndex + 1]].filter(Boolean)); + // } else if (getDragDirection(currentX) === "-") { + // setTabIndicesMoved([tabIds[newTabIndex - 1], tabIds[newTabIndex]].filter(Boolean)); + // } + + // Update to trigger in-tab re-render + setTabsSwapped(newTabIndex); tabIds.splice(newTabIndex, 0, tabId); @@ -452,13 +456,13 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const setUpdatedTabsDebounced = useCallback( debounce(300, (tabIndex: number, tabIds: string[], pinnedTabIds: Set) => { - console.log( - "setting updated tabs", - tabIds, - pinnedTabIds, - tabIndex, - draggingTabDataRef.current.tabStartIndex - ); + // console.log( + // "setting updated tabs", + // tabIds, + // pinnedTabIds, + // tabIndex, + // draggingTabDataRef.current.tabStartIndex + // ); // Reset styles tabRefs.current.forEach((ref) => { ref.current.style.zIndex = "0"; @@ -473,7 +477,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { pinnedTabIds.delete(draggedTabId); } if (pinnedTabCount != pinnedTabIds.size) { - console.log("updated pinnedTabIds", pinnedTabIds, tabIds); + // console.log("updated pinnedTabIds", pinnedTabIds, tabIds); setPinnedTabIds(pinnedTabIds); pinnedTabCount = pinnedTabIds.size; } @@ -517,7 +521,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => { setDraggingTab(null); } - setTabIndicesMoved([]); + // setTabIndicesMoved([]); + setTabsSwapped(false); document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener("mousemove", handleMouseMove); draggingRemovedRef.current = false; @@ -530,7 +535,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const tabIndex = tabIds.indexOf(tabId); const tabStartX = dragStartPositions[tabIndex]; // Starting X position of the tab - console.log("handleDragStart", tabId, tabIndex, tabStartX); + // console.log("handleDragStart", tabId, tabIndex, tabStartX); if (ref.current) { draggingTabDataRef.current = { tabId, @@ -592,7 +597,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const handlePinChange = useCallback( (tabId: string, pinned: boolean) => { - console.log("handlePinChange", tabId, pinned); + // console.log("handlePinChange", tabId, pinned); fireAndForget(async () => { await WorkspaceService.ChangeTabPinning(workspace.oid, tabId, pinned); }); @@ -663,7 +668,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { onLoaded={() => handleTabLoaded(tabId)} onPinChange={() => handlePinChange(tabId, !isPinned)} isBeforeActive={isBeforeActive(tabId)} - isDragging={draggingTab === tabId} + draggingId={draggingTab} tabWidth={tabWidthRef.current} isNew={tabId === newTabId} tabIds={tabIds} diff --git a/frontend/types/custom.d.ts b/frontend/types/custom.d.ts index e375d9382..aa4f84798 100644 --- a/frontend/types/custom.d.ts +++ b/frontend/types/custom.d.ts @@ -28,6 +28,7 @@ declare global { notificationPopoverMode: jotia.atom; reinitVersion: jotai.PrimitiveAtom; tabIndicesMoved: jotai.atom; + tabsSwapped: jotai.atom; }; type WritableWaveObjectAtom = jotai.WritableAtom;