Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

save work

Browse Source
This commit is contained in:
Red Adaya 2024-12-10 10:52:38 +08:00
parent 772e48db80
commit 9c51bca2e6
4 changed files with 116 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/store/global.ts
View File

@ -146,6 +146,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
const notificationPopoverModeAtom = atom<boolean>(false); const notificationPopoverModeAtom = atom<boolean>(false);
const reinitVersion = atom(0); const reinitVersion = atom(0);
const tabIndicesMovedAtom = atom<number[]>([]); const tabIndicesMovedAtom = atom<number[]>([]);
const tabsSwappedAtom = atom<number | null>(null);
atoms = { atoms = {
// initialized in wave.ts (will not be null inside of application) // initialized in wave.ts (will not be null inside of application)
clientId: clientIdAtom, clientId: clientIdAtom,
@ -169,6 +170,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
notificationPopoverMode: notificationPopoverModeAtom, notificationPopoverMode: notificationPopoverModeAtom,
reinitVersion, reinitVersion,
tabIndicesMoved: tabIndicesMovedAtom, tabIndicesMoved: tabIndicesMovedAtom,
tabsSwapped: tabsSwappedAtom,
}; };
} }

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

@ -22,7 +22,7 @@ interface TabProps {
isActive: boolean; isActive: boolean;
isFirst: boolean; isFirst: boolean;
isBeforeActive: boolean; isBeforeActive: boolean;
isDragging: boolean; draggingId: string;
tabWidth: number; tabWidth: number;
isNew: boolean; isNew: boolean;
isPinned: boolean; isPinned: boolean;
@ -46,7 +46,7 @@ const Tab = memo(
isFirst, isFirst,
isPinned, isPinned,
isBeforeActive, isBeforeActive,
isDragging, draggingId,
tabWidth, tabWidth,
isNew, isNew,
tabIds, tabIds,
@ -71,7 +71,7 @@ const Tab = memo(
const tabRef = useRef<HTMLDivElement>(null); const tabRef = useRef<HTMLDivElement>(null);
const adjacentTabsRef = useRef<Set<string>>(new Set()); const adjacentTabsRef = useRef<Set<string>>(new Set());
const tabIndicesMoved = useAtomValue<number[]>(atoms.tabIndicesMoved); const tabsSwapped = useAtomValue<boolean>(atoms.tabsSwapped);
const tabs = document.querySelectorAll(".tab"); const tabs = document.querySelectorAll(".tab");
const [adjacentTabs, setAdjacentTabs] = useAtom(adjacentTabsAtom); const [adjacentTabs, setAdjacentTabs] = useAtom(adjacentTabsAtom);
@ -208,64 +208,81 @@ const Tab = memo(
[onPinChange, handleRenameTab, id, onClose, isPinned] [onPinChange, handleRenameTab, id, onClose, isPinned]
); );
if (isDragging) { // if (isDragging) {
console.log("isDragging", isDragging); // console.log("isDragging", isDragging);
console.log("dragging tab idx>>>>>>", id); // console.log("dragging tab idx>>>>>>", id);
const draggingTabIdx = tabIds.indexOf(id); // const draggingTabIdx = tabIds.indexOf(id);
// Add the dragging tab and its right adjacent tab to the Set // // Add the dragging tab and its right adjacent tab to the Set
adjacentTabsRef.current.add(id); // adjacentTabsRef.current.add(id);
if (draggingTabIdx + 1 < tabIds.length) { // if (draggingTabIdx + 1 < tabIds.length) {
adjacentTabsRef.current.add(tabIds[draggingTabIdx + 1]); // adjacentTabsRef.current.add(tabIds[draggingTabIdx + 1]);
} // }
} // }
if (isActive) { // if (isActive) {
const activeTabIdx = tabIds.indexOf(id); // const activeTabIdx = tabIds.indexOf(id);
// Add the active tab and its right adjacent tab to the Set // // Add the active tab and its right adjacent tab to the Set
adjacentTabsRef.current.add(id); // adjacentTabsRef.current.add(id);
if (activeTabIdx + 1 < tabIds.length) { // if (activeTabIdx + 1 < tabIds.length) {
adjacentTabsRef.current.add(tabIds[activeTabIdx + 1]); // adjacentTabsRef.current.add(tabIds[activeTabIdx + 1]);
} // }
} // }
useEffect(() => { useEffect(() => {
console.log("triggered!!!!"); console.log("triggered!!!!", tabsSwapped);
// if ((isDragging || isActive) && tabIndicesMoved.length) {
if (isDragging || isActive) { // 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 // Find the index of the current tab ID
const currentIndex = tabIds.indexOf(id);
console.log("tabIds", tabIds); console.log("tabIds", tabIds);
console.log("id", id); console.log("id", id);
// Get the right adjacent ID const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
const rightAdjacentId = tabIds[currentIndex + 1]; if (!currentTabElement) return;
// Get the left adjacent ID const separator = currentTabElement.querySelector(".separator") as HTMLElement;
const leftAdjacentId = tabIds[currentIndex - 1];
// console.log("rightAdjacentId", rightAdjacentId); if (isActive || draggingId === id) {
separator.style.opacity = "0";
// 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
}
}
}
} }
// Set the opacity of the separator for the right adjacent tab // Set the opacity of the separator for the right adjacent tab
@ -273,101 +290,46 @@ const Tab = memo(
const rightAdjacentTabElement = document.querySelector( const rightAdjacentTabElement = document.querySelector(
`[data-tab-id="${rightAdjacentId}"]` `[data-tab-id="${rightAdjacentId}"]`
) as HTMLElement; ) as HTMLElement;
if (rightAdjacentTabElement) { if (!rightAdjacentTabElement) return;
const separator = rightAdjacentTabElement.querySelector(".separator") as HTMLElement; const separator = rightAdjacentTabElement.querySelector(".separator") as HTMLElement;
if (separator) { if (isActive || draggingId === id) {
if (isActive && !tabIndicesMoved.length) { separator.style.opacity = "0";
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
}
}
} }
} }
// Cleanup function to reset opacity
return () => { return () => {
if (!isActive && currentIndex !== -1) { console.log("entered return +++++++++++++++");
const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; reset();
// 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
}
}
}
}; };
} else {
console.log("entered else ?????????????????????????");
reset();
} }
}, [id, tabIds, isFirst, isActive, tabIndicesMoved]); }, [id, tabIds, isFirst, isActive, draggingId, tabsSwapped]);
const handleMouseEnter = useCallback(() => { const handleMouseEnter = useCallback(() => {
if (isActive) return; if (isActive) return;
const currentIndex = tabIds.indexOf(id); const currentIndex = tabIds.indexOf(id);
console.log("tabIds", tabIds); // console.log("tabIds", tabIds);
console.log("id", id); // console.log("id", id);
const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
if (currentTabElement) { if (currentTabElement) {
// Ensure the element exists // Ensure the element exists
if (!tabIndicesMoved.length) { if (!tabsSwapped) {
currentTabElement.classList.add("hover"); currentTabElement.classList.add("hover");
} }
} }
// const crrSeparator = currentTabElement.querySelector(".separator") as HTMLElement; }, [id, isActive, tabsSwapped]);
// 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]);
const handleMouseLeave = useCallback(() => { const handleMouseLeave = useCallback(() => {
if (isActive) return; if (isActive) return;
console.log("tabIds", tabIds); // console.log("tabIds", tabIds);
console.log("id", id); // console.log("id", id);
const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
if (currentTabElement) { if (currentTabElement) {
@ -375,39 +337,14 @@ const Tab = memo(
currentTabElement.classList.remove("hover"); currentTabElement.classList.remove("hover");
} }
}, [id, isActive, tabsSwapped]);
// 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]);
return ( return (
<div <div
ref={tabRef} ref={tabRef}
className={clsx("tab", { className={clsx("tab", {
active: isActive, active: isActive,
isDragging, isDragging: draggingId === id,
"before-active": isBeforeActive, "before-active": isBeforeActive,
"new-tab": isNew, "new-tab": isNew,
})} })}

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

@ -138,6 +138,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const isFullScreen = useAtomValue(atoms.isFullScreen); const isFullScreen = useAtomValue(atoms.isFullScreen);
const settings = useAtomValue(atoms.settingsAtom); const settings = useAtomValue(atoms.settingsAtom);
const setTabIndicesMoved = useSetAtom(atoms.tabIndicesMoved); const setTabIndicesMoved = useSetAtom(atoms.tabIndicesMoved);
const setTabsSwapped = useSetAtom(atoms.tabsSwapped);
let prevDelta: number; let prevDelta: number;
let prevDragDirection: string; let prevDragDirection: string;
@ -150,7 +151,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
useEffect(() => { useEffect(() => {
if (workspace) { if (workspace) {
// Compare current tabIds with new workspace.tabids // 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 newTabIds = new Set([...(workspace.pinnedtabids ?? []), ...(workspace.tabids ?? [])]);
const newPinnedTabIds = workspace.pinnedtabids ?? []; const newPinnedTabIds = workspace.pinnedtabids ?? [];
@ -161,9 +162,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
if (!areEqual) { if (!areEqual) {
const newPinnedTabIdSet = new Set(newPinnedTabIds); 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 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); setTabIds(newTabIdList);
setPinnedTabIds(newPinnedTabIdSet); setPinnedTabIds(newPinnedTabIdSet);
} }
@ -316,7 +317,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
if (currentX + tabWidth > otherTabStart + tabWidth / 2) { if (currentX + tabWidth > otherTabStart + tabWidth / 2) {
// setTest("switching right"); // setTest("switching right");
newTabIndex = i; newTabIndex = i;
console.log("newTabIndex===", newTabIndex, tabRefs.current); // console.log("newTabIndex===", newTabIndex, tabRefs.current);
} }
} }
} else { } else {
@ -418,8 +419,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
// Find current index of the dragged tab in tempTabs // Find current index of the dragged tab in tempTabs
const currentIndexOfDraggingTab = tabIds.indexOf(tabId); const currentIndexOfDraggingTab = tabIds.indexOf(tabId);
console.log("currentIndexOfDraggingTab", currentIndexOfDraggingTab); // console.log("currentIndexOfDraggingTab", currentIndexOfDraggingTab);
console.log("tabIndex", tabIndex); // console.log("tabIndex", tabIndex);
// Move the dragged tab to its new position // Move the dragged tab to its new position
if (currentIndexOfDraggingTab !== -1) { if (currentIndexOfDraggingTab !== -1) {
@ -427,11 +428,14 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
} }
// Track indices that have been moved // Track indices that have been moved
if (getDragDirection(currentX) === "+") { // if (getDragDirection(currentX) === "+") {
setTabIndicesMoved([tabIds[newTabIndex], tabIds[newTabIndex + 1]].filter(Boolean)); // setTabIndicesMoved([tabIds[newTabIndex], tabIds[newTabIndex + 1]].filter(Boolean));
} else if (getDragDirection(currentX) === "-") { // } else if (getDragDirection(currentX) === "-") {
setTabIndicesMoved([tabIds[newTabIndex - 1], tabIds[newTabIndex]].filter(Boolean)); // setTabIndicesMoved([tabIds[newTabIndex - 1], tabIds[newTabIndex]].filter(Boolean));
} // }
// Update to trigger in-tab re-render
setTabsSwapped(newTabIndex);
tabIds.splice(newTabIndex, 0, tabId); tabIds.splice(newTabIndex, 0, tabId);
@ -452,13 +456,13 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const setUpdatedTabsDebounced = useCallback( const setUpdatedTabsDebounced = useCallback(
debounce(300, (tabIndex: number, tabIds: string[], pinnedTabIds: Set<string>) => { debounce(300, (tabIndex: number, tabIds: string[], pinnedTabIds: Set<string>) => {
console.log( // console.log(
"setting updated tabs", // "setting updated tabs",
tabIds, // tabIds,
pinnedTabIds, // pinnedTabIds,
tabIndex, // tabIndex,
draggingTabDataRef.current.tabStartIndex // draggingTabDataRef.current.tabStartIndex
); // );
// Reset styles // Reset styles
tabRefs.current.forEach((ref) => { tabRefs.current.forEach((ref) => {
ref.current.style.zIndex = "0"; ref.current.style.zIndex = "0";
@ -473,7 +477,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
pinnedTabIds.delete(draggedTabId); pinnedTabIds.delete(draggedTabId);
} }
if (pinnedTabCount != pinnedTabIds.size) { if (pinnedTabCount != pinnedTabIds.size) {
console.log("updated pinnedTabIds", pinnedTabIds, tabIds); // console.log("updated pinnedTabIds", pinnedTabIds, tabIds);
setPinnedTabIds(pinnedTabIds); setPinnedTabIds(pinnedTabIds);
pinnedTabCount = pinnedTabIds.size; pinnedTabCount = pinnedTabIds.size;
} }
@ -517,7 +521,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
setDraggingTab(null); setDraggingTab(null);
} }
setTabIndicesMoved([]); // setTabIndicesMoved([]);
setTabsSwapped(false);
document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener("mouseup", handleMouseUp);
document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mousemove", handleMouseMove);
draggingRemovedRef.current = false; draggingRemovedRef.current = false;
@ -530,7 +535,7 @@ 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
console.log("handleDragStart", tabId, tabIndex, tabStartX); // console.log("handleDragStart", tabId, tabIndex, tabStartX);
if (ref.current) { if (ref.current) {
draggingTabDataRef.current = { draggingTabDataRef.current = {
tabId, tabId,
@ -592,7 +597,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const handlePinChange = useCallback( const handlePinChange = useCallback(
(tabId: string, pinned: boolean) => { (tabId: string, pinned: boolean) => {
console.log("handlePinChange", tabId, pinned); // console.log("handlePinChange", tabId, pinned);
fireAndForget(async () => { fireAndForget(async () => {
await WorkspaceService.ChangeTabPinning(workspace.oid, tabId, pinned); await WorkspaceService.ChangeTabPinning(workspace.oid, tabId, pinned);
}); });
@ -663,7 +668,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)}
isDragging={draggingTab === tabId} draggingId={draggingTab}
tabWidth={tabWidthRef.current} tabWidth={tabWidthRef.current}
isNew={tabId === newTabId} isNew={tabId === newTabId}
tabIds={tabIds} tabIds={tabIds}

1
frontend/types/custom.d.ts vendored
View File

@ -28,6 +28,7 @@ declare global {
notificationPopoverMode: jotia.atom<boolean>; notificationPopoverMode: jotia.atom<boolean>;
reinitVersion: jotai.PrimitiveAtom<number>; reinitVersion: jotai.PrimitiveAtom<number>;
tabIndicesMoved: jotai.atom<number[]>; tabIndicesMoved: jotai.atom<number[]>;
tabsSwapped: jotai.atom<number | null>;
}; };
type WritableWaveObjectAtom<T extends WaveObj> = jotai.WritableAtom<T, [value: T], void>; type WritableWaveObjectAtom<T extends WaveObj> = jotai.WritableAtom<T, [value: T], void>;