From e6810fdd369742a95cf91bb23c0b72b152aaa408 Mon Sep 17 00:00:00 2001 From: Red Adaya Date: Tue, 3 Dec 2024 20:56:48 +0800 Subject: [PATCH] fix hiding/showing of separating --- frontend/app/tab/tab.scss | 31 ++++++------ frontend/app/tab/tab.tsx | 8 ++++ frontend/app/tab/tabbar.tsx | 65 ++++++++++++++++++++++++-- frontend/app/tab/workspaceswitcher.tsx | 2 +- 4 files changed, 85 insertions(+), 21 deletions(-) diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss index d12f19b49..7473137f3 100644 --- a/frontend/app/tab/tab.scss +++ b/frontend/app/tab/tab.scss @@ -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; diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx index 0b01cf832..b28745cdb 100644 --- a/frontend/app/tab/tab.tsx +++ b/frontend/app/tab/tab.tsx @@ -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; onSelect: () => void; onClose: (event: React.MouseEvent | null) => void; onDragStart: (event: React.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(null); + const tabIndicesMoved = useAtomValue(tabIndicesMovedAtom); + + console.log("tabIndicesMoved", tabIndicesMoved); + useImperativeHandle(ref, () => tabRef.current as HTMLDivElement); useEffect(() => { @@ -214,6 +221,7 @@ const Tab = React.memo( +
); } diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index ac32fbdfb..58acb8141 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -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; + +// 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([]); +const tabIdsAtom = atom([]); + interface TabBarProps { workspace: Workspace; } @@ -100,11 +109,12 @@ const ConfigErrorIcon = ({ buttonRef }: { buttonRef: React.RefObject { - const [tabIds, setTabIds] = useState([]); + // const [tabIds, setTabIds] = useState([]); const [dragStartPositions, setDragStartPositions] = useState([]); const [draggingTab, setDraggingTab] = useState(); const [tabsLoaded, setTabsLoaded] = useState({}); const [newTabId, setNewTabId] = useState(null); + const [test, setTest] = useState(""); const tabbarWrapperRef = useRef(null); const tabBarRef = useRef(null); @@ -134,11 +144,13 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const prevAllLoadedRef = useRef(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) => { ) : undefined; + + console.log("draggingTAb==========", draggingTab); + return (
@@ -565,6 +619,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { isDragging={draggingTab === tabId} tabWidth={tabWidthRef.current} isNew={tabId === newTabId} + tabIndicesMovedAtom={tabIndicesMovedAtom} /> ); })} diff --git a/frontend/app/tab/workspaceswitcher.tsx b/frontend/app/tab/workspaceswitcher.tsx index a59294f1a..e9a6401d5 100644 --- a/frontend/app/tab/workspaceswitcher.tsx +++ b/frontend/app/tab/workspaceswitcher.tsx @@ -207,7 +207,7 @@ const WorkspaceSwitcher = forwardRef(({}, ref) => { }; return ( - setEditingWorkspace(null)}> + setEditingWorkspace(null)}>