Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-03-11 13:23:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix hiding/showing of separating

Browse Source
This commit is contained in:
Red Adaya 2024-12-03 20:56:48 +08:00
parent 601fc44823
commit e6810fdd36
4 changed files with 85 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/app/tab/tab.scss
View File

@ -14,13 +14,14 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&::after { .separator {
content: "";
position: absolute; position: absolute;
left: 0; right: 0;
width: 1px; width: 1px;
height: 14px; height: 14px;
border-right: 1px solid rgb(from var(--main-text-color) r g b / 0.2); border-right-width: 1px;
border-right-style: solid;
border-color: rgb(from var(--main-text-color) r g b / 0.2);
} }
.tab-inner { .tab-inner {
@ -32,10 +33,10 @@
} }
&:hover { &:hover {
& + .tab::after, // & + .tab::after,
&::after { // &::after {
content: none; // content: none;
} // }
.tab-inner { .tab-inner {
border-color: transparent; border-color: transparent;
@ -60,15 +61,15 @@
color: var(--main-text-color); color: var(--main-text-color);
} }
&+.tab::after, // &+.tab::after,
&::after { // &::after {
content: none; // content: none;
} // }
} }
&:first-child::after { // &:first-child::after {
content: none; // content: none;
} // }
.name { .name {
position: absolute; position: absolute;

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

@ -6,6 +6,7 @@ import { ContextMenuModel } from "@/store/contextmenu";
import * as services from "@/store/services"; import * as services from "@/store/services";
import * as WOS from "@/store/wos"; import * as WOS from "@/store/wos";
import { clsx } from "clsx"; import { clsx } from "clsx";
import { Atom, useAtomValue } from "jotai";
import * as React from "react"; import * as React from "react";
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"; import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
@ -22,6 +23,7 @@ interface TabProps {
isDragging: boolean; isDragging: boolean;
tabWidth: number; tabWidth: number;
isNew: boolean; isNew: boolean;
tabIndicesMovedAtom: Atom<number[]>;
onSelect: () => void; onSelect: () => void;
onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void; onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void;
onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void; onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@ -39,6 +41,7 @@ const Tab = React.memo(
isDragging, isDragging,
tabWidth, tabWidth,
isNew, isNew,
tabIndicesMovedAtom,
onLoaded, onLoaded,
onSelect, onSelect,
onClose, onClose,
@ -55,6 +58,10 @@ const Tab = React.memo(
const loadedRef = useRef(false); const loadedRef = useRef(false);
const tabRef = useRef<HTMLDivElement>(null); const tabRef = useRef<HTMLDivElement>(null);
const tabIndicesMoved = useAtomValue(tabIndicesMovedAtom);
console.log("tabIndicesMoved", tabIndicesMoved);
useImperativeHandle(ref, () => tabRef.current as HTMLDivElement); useImperativeHandle(ref, () => tabRef.current as HTMLDivElement);
useEffect(() => { useEffect(() => {
@ -214,6 +221,7 @@ const Tab = React.memo(
<i className="fa fa-solid fa-xmark" /> <i className="fa fa-solid fa-xmark" />
</Button> </Button>
</div> </div>
<div className="separator"></div>
</div> </div>
); );
} }

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

@ -7,7 +7,7 @@ import { WindowDrag } from "@/element/windowdrag";
import { deleteLayoutModelForTab } from "@/layout/index"; import { deleteLayoutModelForTab } from "@/layout/index";
import { atoms, createTab, getApi, isDev, PLATFORM } from "@/store/global"; import { atoms, createTab, getApi, isDev, PLATFORM } from "@/store/global";
import { fireAndForget } from "@/util/util"; import { fireAndForget } from "@/util/util";
import { useAtomValue } from "jotai"; import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
import { OverlayScrollbars } from "overlayscrollbars"; import { OverlayScrollbars } from "overlayscrollbars";
import { createRef, memo, useCallback, useEffect, useRef, useState } from "react"; import { createRef, memo, useCallback, useEffect, useRef, useState } from "react";
import { debounce } from "throttle-debounce"; import { debounce } from "throttle-debounce";
@ -17,6 +17,12 @@ import "./tabbar.scss";
import { UpdateStatusBanner } from "./updatebanner"; import { UpdateStatusBanner } from "./updatebanner";
import { WorkspaceSwitcher } from "./workspaceswitcher"; import { WorkspaceSwitcher } from "./workspaceswitcher";
// export class TabBarModel {
// draggedTabIndex: PrimitiveAtom<number>;
// constructor
// }
const TAB_DEFAULT_WIDTH = 130; const TAB_DEFAULT_WIDTH = 130;
const TAB_MIN_WIDTH = 100; const TAB_MIN_WIDTH = 100;
const DRAGGER_RIGHT_MIN_WIDTH = 74; const DRAGGER_RIGHT_MIN_WIDTH = 74;
@ -37,6 +43,9 @@ const OS_OPTIONS = {
}, },
}; };
const tabIndicesMovedAtom = atom<number[]>([]);
const tabIdsAtom = atom<string[]>([]);
interface TabBarProps { interface TabBarProps {
workspace: Workspace; workspace: Workspace;
} }
@ -100,11 +109,12 @@ const ConfigErrorIcon = ({ buttonRef }: { buttonRef: React.RefObject<HTMLElement
}; };
const TabBar = memo(({ workspace }: TabBarProps) => { const TabBar = memo(({ workspace }: TabBarProps) => {
const [tabIds, setTabIds] = useState<string[]>([]); // const [tabIds, setTabIds] = useState<string[]>([]);
const [dragStartPositions, setDragStartPositions] = useState<number[]>([]); const [dragStartPositions, setDragStartPositions] = useState<number[]>([]);
const [draggingTab, setDraggingTab] = useState<string>(); const [draggingTab, setDraggingTab] = useState<string>();
const [tabsLoaded, setTabsLoaded] = useState({}); const [tabsLoaded, setTabsLoaded] = useState({});
const [newTabId, setNewTabId] = useState<string | null>(null); const [newTabId, setNewTabId] = useState<string | null>(null);
const [test, setTest] = useState("");
const tabbarWrapperRef = useRef<HTMLDivElement>(null); const tabbarWrapperRef = useRef<HTMLDivElement>(null);
const tabBarRef = useRef<HTMLDivElement>(null); const tabBarRef = useRef<HTMLDivElement>(null);
@ -134,11 +144,13 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const prevAllLoadedRef = useRef<boolean>(false); const prevAllLoadedRef = useRef<boolean>(false);
const activeTabId = useAtomValue(atoms.staticTabId); const activeTabId = useAtomValue(atoms.staticTabId);
const isFullScreen = useAtomValue(atoms.isFullScreen); const isFullScreen = useAtomValue(atoms.isFullScreen);
const settings = useAtomValue(atoms.settingsAtom); const settings = useAtomValue(atoms.settingsAtom);
const [tabIds, setTabIds] = useAtom(tabIdsAtom);
const setTabIndicesMoved = useSetAtom(tabIndicesMovedAtom);
let prevDelta: number; let prevDelta: number;
let prevDragDirection: string; let prevDragDirection: string;
let prevRightAdjacentIndex: number | null = null; // Track the previous right-adjacent tab index
// Update refs when tabIds change // Update refs when tabIds change
useEffect(() => { useEffect(() => {
@ -299,7 +311,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
for (let i = tabIndex + 1; i < tabIds.length; i++) { for (let i = tabIndex + 1; i < tabIds.length; i++) {
const otherTabStart = dragStartPositions[i]; const otherTabStart = dragStartPositions[i];
if (currentX + tabWidth > otherTabStart + tabWidth / 2) { if (currentX + tabWidth > otherTabStart + tabWidth / 2) {
// setTest("switching right");
newTabIndex = i; newTabIndex = i;
console.log("newTabIndex===", newTabIndex, tabRefs.current);
} }
} }
} else { } else {
@ -307,6 +321,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
for (let i = tabIndex - 1; i >= 0; i--) { for (let i = tabIndex - 1; i >= 0; i--) {
const otherTabEnd = dragStartPositions[i] + tabWidth; const otherTabEnd = dragStartPositions[i] + tabWidth;
if (currentX < otherTabEnd - tabWidth / 2) { if (currentX < otherTabEnd - tabWidth / 2) {
// setTest("switching left");
newTabIndex = i; newTabIndex = i;
} }
} }
@ -314,6 +329,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
return newTabIndex; return newTabIndex;
}; };
console.log("test::::::::::::::::", test);
const handleMouseMove = (event: MouseEvent) => { const handleMouseMove = (event: MouseEvent) => {
const { tabId, ref, tabStartX } = draggingTabDataRef.current; const { tabId, ref, tabStartX } = draggingTabDataRef.current;
@ -387,6 +404,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
ref.current!.style.zIndex = "100"; ref.current!.style.zIndex = "100";
const tabIndex = draggingTabDataRef.current.tabIndex; const tabIndex = draggingTabDataRef.current.tabIndex;
const newTabIndex = getNewTabIndex(currentX, tabIndex, dragDirection); const newTabIndex = getNewTabIndex(currentX, tabIndex, dragDirection);
if (newTabIndex !== tabIndex) { if (newTabIndex !== tabIndex) {
@ -399,10 +417,21 @@ 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("tabIndex", tabIndex);
// Move the dragged tab to its new position // Move the dragged tab to its new position
if (currentIndexOfDraggingTab !== -1) { if (currentIndexOfDraggingTab !== -1) {
tabIds.splice(currentIndexOfDraggingTab, 1); tabIds.splice(tabIndex, 1);
} }
console.log("tabIndex=====", tabIndex);
console.log("newTabIndex=====", newTabIndex);
if (getDragDirection(currentX) === "+") {
setTabIndicesMoved([tabIndex, newTabIndex, newTabIndex + 1]);
} else if (getDragDirection(currentX) === "-") {
setTabIndicesMoved([newTabIndex, tabIndex, tabIndex + 1]);
}
tabIds.splice(newTabIndex, 0, tabId); tabIds.splice(newTabIndex, 0, tabId);
// Update visual positions of the tabs // Update visual positions of the tabs
@ -414,6 +443,22 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
} }
}); });
// debounce(30, () => {
// const prevRightAdjacentTab = tabRefs.current[draggingTabDataRef.current.rightAdjacentTabIndex]?.current;
// // prevRightAdjacentTab.style.setProperty("--hide-separator", "1");
// // prevRightAdjacentTab.style.borderColor = "rgb(from var(--main-text-color) r g b / 0.2)";
// })();
// // Handle right adjacent tab's separator
// const rightAdjacentIndex = newTabIndex + 1;
// if (rightAdjacentIndex < tabIds.length) {
// const rightAdjacentTab = tabRefs.current[rightAdjacentIndex]?.current;
// if (rightAdjacentTab) {
// rightAdjacentTab.style.borderColor = "transparent";
// }
// }
// draggingTabDataRef.current.rightAdjacentTabIndex = rightAdjacentIndex;
draggingTabDataRef.current.tabIndex = newTabIndex; draggingTabDataRef.current.tabIndex = newTabIndex;
} }
}; };
@ -453,6 +498,12 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
setDraggingTab(null); setDraggingTab(null);
} }
// const rightAdjacentTab = tabRefs.current[draggingTabDataRef.current.rightAdjacentTabIndex]?.current;
// // console.log("prevRightAdjacentTab=======", prevRightAdjacentTab);
// // if (prevRightAdjacentTab) {
// rightAdjacentTab.style.removeProperty("--hide-separator");
// }
document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener("mouseup", handleMouseUp);
document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mousemove", handleMouseMove);
draggingRemovedRef.current = false; draggingRemovedRef.current = false;
@ -467,7 +518,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
if (ref.current) { if (ref.current) {
draggingTabDataRef.current = { draggingTabDataRef.current = {
tabId: ref.current.dataset.tabId, tabId,
ref, ref,
tabStartX, tabStartX,
tabIndex, tabIndex,
@ -541,6 +592,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
<i className="fa fa-ellipsis" /> <i className="fa fa-ellipsis" />
</div> </div>
) : undefined; ) : undefined;
console.log("draggingTAb==========", draggingTab);
return ( return (
<div ref={tabbarWrapperRef} className="tab-bar-wrapper"> <div ref={tabbarWrapperRef} className="tab-bar-wrapper">
<WindowDrag ref={draggerLeftRef} className="left" /> <WindowDrag ref={draggerLeftRef} className="left" />
@ -565,6 +619,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
isDragging={draggingTab === tabId} isDragging={draggingTab === tabId}
tabWidth={tabWidthRef.current} tabWidth={tabWidthRef.current}
isNew={tabId === newTabId} isNew={tabId === newTabId}
tabIndicesMovedAtom={tabIndicesMovedAtom}
/> />
); );
})} })}

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

@ -207,7 +207,7 @@ const WorkspaceSwitcher = forwardRef<HTMLDivElement, {}>(({}, ref) => {
}; };
return ( return (
<Popover className="workspace-switcher-popover" onDismiss={() => setEditingWorkspace(null)}> <Popover ref={ref} className="workspace-switcher-popover" onDismiss={() => setEditingWorkspace(null)}>
<PopoverButton <PopoverButton
className="workspace-switcher-button grey" className="workspace-switcher-button grey"
as="div" as="div"