mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
fix hiding/showing of separating
This commit is contained in:
Red Adaya
parent
601fc44823
commit
e6810fdd36
@ -14,13 +14,14 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
.separator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
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 {
|
||||
@ -32,10 +33,10 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& + .tab::after,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
// & + .tab::after,
|
||||
// &::after {
|
||||
// content: none;
|
||||
// }
|
||||
|
||||
.tab-inner {
|
||||
border-color: transparent;
|
||||
@ -60,15 +61,15 @@
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
&+.tab::after,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
// &+.tab::after,
|
||||
// &::after {
|
||||
// content: none;
|
||||
// }
|
||||
}
|
||||
|
||||
&:first-child::after {
|
||||
content: none;
|
||||
}
|
||||
// &:first-child::after {
|
||||
// content: none;
|
||||
// }
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
|
||||
@ -6,6 +6,7 @@ import { ContextMenuModel } from "@/store/contextmenu";
|
||||
import * as services from "@/store/services";
|
||||
import * as WOS from "@/store/wos";
|
||||
import { clsx } from "clsx";
|
||||
import { Atom, useAtomValue } from "jotai";
|
||||
import * as React from "react";
|
||||
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
|
||||
|
||||
@ -22,6 +23,7 @@ interface TabProps {
|
||||
isDragging: boolean;
|
||||
tabWidth: number;
|
||||
isNew: boolean;
|
||||
tabIndicesMovedAtom: Atom<number[]>;
|
||||
onSelect: () => void;
|
||||
onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void;
|
||||
onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
||||
@ -39,6 +41,7 @@ const Tab = React.memo(
|
||||
isDragging,
|
||||
tabWidth,
|
||||
isNew,
|
||||
tabIndicesMovedAtom,
|
||||
onLoaded,
|
||||
onSelect,
|
||||
onClose,
|
||||
@ -55,6 +58,10 @@ const Tab = React.memo(
|
||||
const loadedRef = useRef(false);
|
||||
const tabRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const tabIndicesMoved = useAtomValue(tabIndicesMovedAtom);
|
||||
|
||||
console.log("tabIndicesMoved", tabIndicesMoved);
|
||||
|
||||
useImperativeHandle(ref, () => tabRef.current as HTMLDivElement);
|
||||
|
||||
useEffect(() => {
|
||||
@ -214,6 +221,7 @@ const Tab = React.memo(
|
||||
<i className="fa fa-solid fa-xmark" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="separator"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ import { WindowDrag } from "@/element/windowdrag";
|
||||
import { deleteLayoutModelForTab } from "@/layout/index";
|
||||
import { atoms, createTab, getApi, isDev, PLATFORM } from "@/store/global";
|
||||
import { fireAndForget } from "@/util/util";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||
import { OverlayScrollbars } from "overlayscrollbars";
|
||||
import { createRef, memo, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { debounce } from "throttle-debounce";
|
||||
@ -17,6 +17,12 @@ import "./tabbar.scss";
|
||||
import { UpdateStatusBanner } from "./updatebanner";
|
||||
import { WorkspaceSwitcher } from "./workspaceswitcher";
|
||||
|
||||
// export class TabBarModel {
|
||||
// draggedTabIndex: PrimitiveAtom<number>;
|
||||
|
||||
// constructor
|
||||
// }
|
||||
|
||||
const TAB_DEFAULT_WIDTH = 130;
|
||||
const TAB_MIN_WIDTH = 100;
|
||||
const DRAGGER_RIGHT_MIN_WIDTH = 74;
|
||||
@ -37,6 +43,9 @@ const OS_OPTIONS = {
|
||||
},
|
||||
};
|
||||
|
||||
const tabIndicesMovedAtom = atom<number[]>([]);
|
||||
const tabIdsAtom = atom<string[]>([]);
|
||||
|
||||
interface TabBarProps {
|
||||
workspace: Workspace;
|
||||
}
|
||||
@ -100,11 +109,12 @@ const ConfigErrorIcon = ({ buttonRef }: { buttonRef: React.RefObject<HTMLElement
|
||||
};
|
||||
|
||||
const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
const [tabIds, setTabIds] = useState<string[]>([]);
|
||||
// const [tabIds, setTabIds] = useState<string[]>([]);
|
||||
const [dragStartPositions, setDragStartPositions] = useState<number[]>([]);
|
||||
const [draggingTab, setDraggingTab] = useState<string>();
|
||||
const [tabsLoaded, setTabsLoaded] = useState({});
|
||||
const [newTabId, setNewTabId] = useState<string | null>(null);
|
||||
const [test, setTest] = useState("");
|
||||
|
||||
const tabbarWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const tabBarRef = useRef<HTMLDivElement>(null);
|
||||
@ -134,11 +144,13 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
const prevAllLoadedRef = useRef<boolean>(false);
|
||||
const activeTabId = useAtomValue(atoms.staticTabId);
|
||||
const isFullScreen = useAtomValue(atoms.isFullScreen);
|
||||
|
||||
const settings = useAtomValue(atoms.settingsAtom);
|
||||
const [tabIds, setTabIds] = useAtom(tabIdsAtom);
|
||||
const setTabIndicesMoved = useSetAtom(tabIndicesMovedAtom);
|
||||
|
||||
let prevDelta: number;
|
||||
let prevDragDirection: string;
|
||||
let prevRightAdjacentIndex: number | null = null; // Track the previous right-adjacent tab index
|
||||
|
||||
// Update refs when tabIds change
|
||||
useEffect(() => {
|
||||
@ -299,7 +311,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
for (let i = tabIndex + 1; i < tabIds.length; i++) {
|
||||
const otherTabStart = dragStartPositions[i];
|
||||
if (currentX + tabWidth > otherTabStart + tabWidth / 2) {
|
||||
// setTest("switching right");
|
||||
newTabIndex = i;
|
||||
console.log("newTabIndex===", newTabIndex, tabRefs.current);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@ -307,6 +321,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
for (let i = tabIndex - 1; i >= 0; i--) {
|
||||
const otherTabEnd = dragStartPositions[i] + tabWidth;
|
||||
if (currentX < otherTabEnd - tabWidth / 2) {
|
||||
// setTest("switching left");
|
||||
newTabIndex = i;
|
||||
}
|
||||
}
|
||||
@ -314,6 +329,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
return newTabIndex;
|
||||
};
|
||||
|
||||
console.log("test::::::::::::::::", test);
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
const { tabId, ref, tabStartX } = draggingTabDataRef.current;
|
||||
|
||||
@ -387,6 +404,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
ref.current!.style.zIndex = "100";
|
||||
|
||||
const tabIndex = draggingTabDataRef.current.tabIndex;
|
||||
|
||||
const newTabIndex = getNewTabIndex(currentX, tabIndex, dragDirection);
|
||||
|
||||
if (newTabIndex !== tabIndex) {
|
||||
@ -399,10 +417,21 @@ 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);
|
||||
|
||||
// Move the dragged tab to its new position
|
||||
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);
|
||||
|
||||
// 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;
|
||||
}
|
||||
};
|
||||
@ -453,6 +498,12 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
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("mousemove", handleMouseMove);
|
||||
draggingRemovedRef.current = false;
|
||||
@ -467,7 +518,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
|
||||
if (ref.current) {
|
||||
draggingTabDataRef.current = {
|
||||
tabId: ref.current.dataset.tabId,
|
||||
tabId,
|
||||
ref,
|
||||
tabStartX,
|
||||
tabIndex,
|
||||
@ -541,6 +592,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
<i className="fa fa-ellipsis" />
|
||||
</div>
|
||||
) : undefined;
|
||||
|
||||
console.log("draggingTAb==========", draggingTab);
|
||||
|
||||
return (
|
||||
<div ref={tabbarWrapperRef} className="tab-bar-wrapper">
|
||||
<WindowDrag ref={draggerLeftRef} className="left" />
|
||||
@ -565,6 +619,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
|
||||
isDragging={draggingTab === tabId}
|
||||
tabWidth={tabWidthRef.current}
|
||||
isNew={tabId === newTabId}
|
||||
tabIndicesMovedAtom={tabIndicesMovedAtom}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -207,7 +207,7 @@ const WorkspaceSwitcher = forwardRef<HTMLDivElement, {}>(({}, ref) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover className="workspace-switcher-popover" onDismiss={() => setEditingWorkspace(null)}>
|
||||
<Popover ref={ref} className="workspace-switcher-popover" onDismiss={() => setEditingWorkspace(null)}>
|
||||
<PopoverButton
|
||||
className="workspace-switcher-button grey"
|
||||
as="div"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user