mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
save work
This commit is contained in:
Red Adaya
parent
772e48db80
commit
9c51bca2e6
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -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,166 +208,128 @@ 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) {
|
||||
// Find the index of the current tab ID
|
||||
console.log("triggered!!!!", tabsSwapped);
|
||||
|
||||
// Get 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];
|
||||
|
||||
// console.log("rightAdjacentId", rightAdjacentId);
|
||||
|
||||
// Set the opacity of the separator for the current tab
|
||||
if (currentIndex !== -1) {
|
||||
const reset = () => {
|
||||
if (!isActive) {
|
||||
const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
|
||||
|
||||
if (currentTabElement) {
|
||||
// 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 (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 (!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
|
||||
|
||||
console.log("tabIds", tabIds);
|
||||
console.log("id", id);
|
||||
|
||||
const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
|
||||
if (!currentTabElement) return;
|
||||
const separator = currentTabElement.querySelector(".separator") as HTMLElement;
|
||||
|
||||
if (isActive || draggingId === id) {
|
||||
separator.style.opacity = "0";
|
||||
}
|
||||
|
||||
// Set the opacity of the separator for the right adjacent tab
|
||||
if (rightAdjacentId) {
|
||||
const rightAdjacentTabElement = document.querySelector(
|
||||
`[data-tab-id="${rightAdjacentId}"]`
|
||||
) as HTMLElement;
|
||||
if (rightAdjacentTabElement) {
|
||||
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,
|
||||
})}
|
||||
|
||||
@ -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
1
frontend/types/custom.d.ts
vendored
@ -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>;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user