From 03045435d8d1b08d214808f9d58a019b088b29f9 Mon Sep 17 00:00:00 2001 From: mozzie Date: Thu, 18 Jul 2024 15:40:06 +0800 Subject: [PATCH] feat: change dock lib --- package.json | 1 + pnpm-lock.yaml | 15 ++++ src/pages/ Dock/index.tsx | 124 ++++++++++++++++++++++++++++++++ src/pages/ Dock/theme.reset.css | 28 ++++++++ src/pages/FlexLayoutDemo.tsx | 4 +- src/pages/Layout.tsx | 8 +-- 6 files changed, 173 insertions(+), 7 deletions(-) create mode 100644 src/pages/ Dock/index.tsx create mode 100644 src/pages/ Dock/theme.reset.css diff --git a/package.json b/package.json index 9eaa2c1..c2a4a14 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "cmdk": "^1.0.0", "custom-electron-titlebar": "^4.2.8", "date-fns": "^3.6.0", + "dockview": "^1.15.2", "flexlayout-react": "^0.7.15", "lucide-react": "^0.408.0", "react": "^18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 96b200c..62666c3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: date-fns: specifier: ^3.6.0 version: 3.6.0 + dockview: + specifier: ^1.15.2 + version: 1.15.2 flexlayout-react: specifier: ^0.7.15 version: 0.7.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1590,6 +1593,12 @@ packages: os: [darwin] hasBin: true + dockview-core@1.15.2: + resolution: {integrity: sha512-zKcZLzWi28uwC9AdlmaUNRrG48vxV0FARCykEovkFaYgOzAddb61lzEozWQfsFJCu4OH9kDvxEsVmAU3XOOfxQ==} + + dockview@1.15.2: + resolution: {integrity: sha512-i5P0OMVZFIWPY8AVVL6GIluj3SEgRb9hkGuKULaNLI/U4EJqPWGXh6cAPGJ9tiv4t5n4JbirY5viYOpEODhYRQ==} + doctrine@3.0.0: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} engines: {node: '>=6.0.0'} @@ -4444,6 +4453,12 @@ snapshots: verror: 1.10.1 optional: true + dockview-core@1.15.2: {} + + dockview@1.15.2: + dependencies: + dockview-core: 1.15.2 + doctrine@3.0.0: dependencies: esutils: 2.0.3 diff --git a/src/pages/ Dock/index.tsx b/src/pages/ Dock/index.tsx new file mode 100644 index 0000000..27ce2a1 --- /dev/null +++ b/src/pages/ Dock/index.tsx @@ -0,0 +1,124 @@ +import { + DockviewApi, + DockviewReact, + DockviewReadyEvent, + IDockviewPanelProps, +} from "dockview"; +import { useEffect, useState } from "react"; +import 'dockview/dist/styles/dockview.css'; +import './theme.reset.css' + +const Default = (props: IDockviewPanelProps) => { + return ( +
+
{props.api.title}
+
+ ); +}; + +const components = { + default: Default, +}; + +const Dockview = (props: { theme?: string }) => { + const [disablePanelDrag, setDisablePanelDrag] = useState(false); + const [disableGroupDrag, setDisableGroupDrag] = useState(false); + const [disableOverlay, setDisableOverlay] = useState(false); + + const [api, setApi] = useState(); + + useEffect(() => { + if (!api) { + return; + } + + const disposables = [ + api.onWillDragPanel((e) => { + if (!disablePanelDrag) { + return; + } + e.nativeEvent.preventDefault(); + }), + + api.onWillDragGroup((e) => { + if (!disableGroupDrag) { + return; + } + e.nativeEvent.preventDefault(); + }), + api.onWillShowOverlay((e) => { + console.log(e); + + if (!disableOverlay) { + return; + } + + e.preventDefault(); + }), + + api.onWillDrop((e) => { + // + }), + + api.onDidDrop((e) => { + // + }), + ]; + + return () => { + disposables.forEach((disposable) => { + disposable.dispose(); + }); + }; + }, [api, disablePanelDrag, disableGroupDrag, disableOverlay]); + + const onReady = (event: DockviewReadyEvent) => { + setApi(event.api); + + event.api.addPanel({ + id: "panel_1", + component: "default", + }); + + event.api.addPanel({ + id: "panel_2", + component: "default", + + position: { + direction: "right", + referencePanel: "panel_1", + }, + }); + + event.api.addPanel({ + id: "panel_3", + component: "default", + position: { + direction: "below", + referencePanel: "panel_1", + }, + }); + event.api.addPanel({ + id: "panel_4", + component: "default", + }); + event.api.addPanel({ + id: "panel_5", + component: "default", + }); + }; + + return ( +
+
+ +
+
+ ); +}; + +export default Dockview; diff --git a/src/pages/ Dock/theme.reset.css b/src/pages/ Dock/theme.reset.css new file mode 100644 index 0000000..937d3ed --- /dev/null +++ b/src/pages/ Dock/theme.reset.css @@ -0,0 +1,28 @@ +.dockview-theme-light { + --dv-background-color: black; + --dv-paneview-active-outline-color: dodgerblue; + --dv-tabs-and-actions-container-font-size: 13px; + --dv-tabs-and-actions-container-height: 35px; + --dv-drag-over-background-color: hsl(var(--accent)); + --dv-drag-over-border-color: white; + --dv-tabs-container-scrollbar-color: #888; + --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31); + --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5); + --dv-group-view-background-color: white; + --dv-tabs-and-actions-container-background-color: #f3f3f3; + --dv-activegroup-visiblepanel-tab-background-color: white; + --dv-activegroup-hiddenpanel-tab-background-color: #ececec; + --dv-inactivegroup-visiblepanel-tab-background-color: white; + --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec; + --dv-tab-divider-color: white; + --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51); + --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7); + --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7); + --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35); + --dv-separator-border: hsl(var(--border)); + --dv-paneview-header-border-color: rgb(51, 51, 51); +} + +.tabs-container .tab{ + border-radius: 5px 5px 0 0; +} \ No newline at end of file diff --git a/src/pages/FlexLayoutDemo.tsx b/src/pages/FlexLayoutDemo.tsx index f1394e3..89f7c11 100644 --- a/src/pages/FlexLayoutDemo.tsx +++ b/src/pages/FlexLayoutDemo.tsx @@ -84,7 +84,7 @@ const FlexLayoutComponent: React.FC = () => { } }; - const renderTab = (node: TabNode, renderValues: ITabRenderValues) => { + const onRenderTab = (node: TabNode, renderValues: ITabRenderValues) => { renderValues.content = (
{node.getConfig().icon} @@ -142,7 +142,7 @@ const FlexLayoutComponent: React.FC = () => { realtimeResize factory={factory} classNameMapper={(defaultClass) => `${defaultClass} custom-layout-class`} - onRenderTab={renderTab} + onRenderTab={onRenderTab} onRenderTabSet={onRenderTabSet} /> ); diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx index 6f95ef6..8849025 100644 --- a/src/pages/Layout.tsx +++ b/src/pages/Layout.tsx @@ -1,8 +1,5 @@ -import { Button } from "@/components/ui/button"; -import { CommandDialogDemo } from "./CommandDialogDemo"; +import Dockview from "./ Dock"; import FlexLayoutComponent from "./FlexLayoutDemo"; -import { VscLayoutSidebarLeftOff } from "react-icons/vsc"; -import { useEffect, useState } from "react"; const LayoutMain = () => { const platform = @@ -18,7 +15,8 @@ const LayoutMain = () => {
123
- + {/* */} +