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 reinitVersion = atom(0);
const tabIndicesMovedAtom = atom<number[]>([]);
const tabsSwappedAtom = atom<number | null>(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,
};
}

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

@ -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<HTMLDivElement>(null);
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 [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 (
<div
ref={tabRef}
className={clsx("tab", {
active: isActive,
isDragging,
isDragging: draggingId === id,
"before-active": isBeforeActive,
"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 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<string>) => {
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}

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

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