feat: change dock lib

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",

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

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 (
+    <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;

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;
+}

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 = (
       <div className="text-xs">
         <span>{node.getConfig().icon}</span>
@@ -142,7 +142,7 @@ const FlexLayoutComponent: React.FC = () => {
       realtimeResize
       factory={factory}
       classNameMapper={(defaultClass) => `${defaultClass} custom-layout-class`}
-      onRenderTab={renderTab}
+      onRenderTab={onRenderTab}
       onRenderTabSet={onRenderTabSet}
     />
   );

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 = () => {
         <div className="flex h-full">
           <div className="workspace w-[36px] h-full border-r">123</div>
           <div className="relative w-[calc(100%-36px)] h-full">
-            <FlexLayoutComponent />
+            {/* <FlexLayoutComponent /> */}
+            <Dockview />
           </div>
         </div>
       </div>