feat: change dock lib
This commit is contained in:
parent
375876ad77
commit
03045435d8
|
@ -22,6 +22,7 @@
|
||||||
"cmdk": "^1.0.0",
|
"cmdk": "^1.0.0",
|
||||||
"custom-electron-titlebar": "^4.2.8",
|
"custom-electron-titlebar": "^4.2.8",
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
|
"dockview": "^1.15.2",
|
||||||
"flexlayout-react": "^0.7.15",
|
"flexlayout-react": "^0.7.15",
|
||||||
"lucide-react": "^0.408.0",
|
"lucide-react": "^0.408.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
|
|
@ -41,6 +41,9 @@ importers:
|
||||||
date-fns:
|
date-fns:
|
||||||
specifier: ^3.6.0
|
specifier: ^3.6.0
|
||||||
version: 3.6.0
|
version: 3.6.0
|
||||||
|
dockview:
|
||||||
|
specifier: ^1.15.2
|
||||||
|
version: 1.15.2
|
||||||
flexlayout-react:
|
flexlayout-react:
|
||||||
specifier: ^0.7.15
|
specifier: ^0.7.15
|
||||||
version: 0.7.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
version: 0.7.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||||
|
@ -1590,6 +1593,12 @@ packages:
|
||||||
os: [darwin]
|
os: [darwin]
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
|
||||||
|
dockview-core@1.15.2:
|
||||||
|
resolution: {integrity: sha512-zKcZLzWi28uwC9AdlmaUNRrG48vxV0FARCykEovkFaYgOzAddb61lzEozWQfsFJCu4OH9kDvxEsVmAU3XOOfxQ==}
|
||||||
|
|
||||||
|
dockview@1.15.2:
|
||||||
|
resolution: {integrity: sha512-i5P0OMVZFIWPY8AVVL6GIluj3SEgRb9hkGuKULaNLI/U4EJqPWGXh6cAPGJ9tiv4t5n4JbirY5viYOpEODhYRQ==}
|
||||||
|
|
||||||
doctrine@3.0.0:
|
doctrine@3.0.0:
|
||||||
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
|
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
|
||||||
engines: {node: '>=6.0.0'}
|
engines: {node: '>=6.0.0'}
|
||||||
|
@ -4444,6 +4453,12 @@ snapshots:
|
||||||
verror: 1.10.1
|
verror: 1.10.1
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
dockview-core@1.15.2: {}
|
||||||
|
|
||||||
|
dockview@1.15.2:
|
||||||
|
dependencies:
|
||||||
|
dockview-core: 1.15.2
|
||||||
|
|
||||||
doctrine@3.0.0:
|
doctrine@3.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
esutils: 2.0.3
|
esutils: 2.0.3
|
||||||
|
|
124
src/pages/ Dock/index.tsx
Normal file
124
src/pages/ Dock/index.tsx
Normal file
|
@ -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 (
|
||||||
|
<div style={{ height: "100%" }}>
|
||||||
|
<div>{props.api.title}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const components = {
|
||||||
|
default: Default,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Dockview = (props: { theme?: string }) => {
|
||||||
|
const [disablePanelDrag, setDisablePanelDrag] = useState<boolean>(false);
|
||||||
|
const [disableGroupDrag, setDisableGroupDrag] = useState<boolean>(false);
|
||||||
|
const [disableOverlay, setDisableOverlay] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const [api, setApi] = useState<DockviewApi>();
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
|
||||||
|
<div style={{ flexGrow: 1 }}>
|
||||||
|
<DockviewReact
|
||||||
|
className={`${props.theme || "dockview-theme-light"}`}
|
||||||
|
onReady={onReady}
|
||||||
|
components={components}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Dockview;
|
28
src/pages/ Dock/theme.reset.css
Normal file
28
src/pages/ Dock/theme.reset.css
Normal file
|
@ -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;
|
||||||
|
}
|
|
@ -84,7 +84,7 @@ const FlexLayoutComponent: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderTab = (node: TabNode, renderValues: ITabRenderValues) => {
|
const onRenderTab = (node: TabNode, renderValues: ITabRenderValues) => {
|
||||||
renderValues.content = (
|
renderValues.content = (
|
||||||
<div className="text-xs">
|
<div className="text-xs">
|
||||||
<span>{node.getConfig().icon}</span>
|
<span>{node.getConfig().icon}</span>
|
||||||
|
@ -142,7 +142,7 @@ const FlexLayoutComponent: React.FC = () => {
|
||||||
realtimeResize
|
realtimeResize
|
||||||
factory={factory}
|
factory={factory}
|
||||||
classNameMapper={(defaultClass) => `${defaultClass} custom-layout-class`}
|
classNameMapper={(defaultClass) => `${defaultClass} custom-layout-class`}
|
||||||
onRenderTab={renderTab}
|
onRenderTab={onRenderTab}
|
||||||
onRenderTabSet={onRenderTabSet}
|
onRenderTabSet={onRenderTabSet}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
import { Button } from "@/components/ui/button";
|
import Dockview from "./ Dock";
|
||||||
import { CommandDialogDemo } from "./CommandDialogDemo";
|
|
||||||
import FlexLayoutComponent from "./FlexLayoutDemo";
|
import FlexLayoutComponent from "./FlexLayoutDemo";
|
||||||
import { VscLayoutSidebarLeftOff } from "react-icons/vsc";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
const LayoutMain = () => {
|
const LayoutMain = () => {
|
||||||
const platform =
|
const platform =
|
||||||
|
@ -18,7 +15,8 @@ const LayoutMain = () => {
|
||||||
<div className="flex h-full">
|
<div className="flex h-full">
|
||||||
<div className="workspace w-[36px] h-full border-r">123</div>
|
<div className="workspace w-[36px] h-full border-r">123</div>
|
||||||
<div className="relative w-[calc(100%-36px)] h-full">
|
<div className="relative w-[calc(100%-36px)] h-full">
|
||||||
<FlexLayoutComponent />
|
{/* <FlexLayoutComponent /> */}
|
||||||
|
<Dockview />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user