From e1304ce69462ccbe9ed5a3723369654eb6e8ec19 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 22 Dec 2024 19:20:24 +0000
Subject: [PATCH] chore: docs

---
 .../react/dockview/demo-dockview/src/app.scss | 147 ++++++++++--------
 .../react/dockview/demo-dockview/src/app.tsx  | 112 +++++++------
 .../demo-dockview/src/gridActions.tsx         |  15 +-
 .../demo-dockview/src/mapboxPanel.tsx         |  28 ++++
 .../demo-dockview/src/panelActions.tsx        |   9 +-
 5 files changed, 188 insertions(+), 123 deletions(-)
 create mode 100644 packages/docs/sandboxes/react/dockview/demo-dockview/src/mapboxPanel.tsx

diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
index 6abc9a64d..57549c075 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
@@ -1,33 +1,29 @@
-.group-control {
-    .action {
-        padding: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        font-size: 18px;
-        cursor: pointer;
+.dockview-demo {
+    .group-control {
+        .action {
+            padding: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            font-size: 18px;
+            cursor: pointer;
 
-        &:hover {
-            border-radius: 2px;
-            background-color: var(--dv-icon-hover-background-color);
+            &:hover {
+                border-radius: 2px;
+                background-color: var(--dv-icon-hover-background-color);
+            }
         }
     }
-}
 
-.data-table {
-    table {
-        font-size: 11px;
-        th {
-            padding: 0px 8px;
+    .data-table {
+        table {
+            font-size: 11px;
+            th {
+                padding: 0px 8px;
+            }
         }
     }
-}
-
-.action-container {
-    display: flex;
-    padding: 4px 0px;
-    overflow: auto;
 
     button {
         height: 25px;
@@ -40,57 +36,78 @@
         cursor: pointer;
         outline: 1px solid #4c65d4;
 
+        &:focus {
+            outline: 1px solid #4c65d4 !important;
+        }
+
         &:hover {
             background-color: #222e62;
         }
     }
 
-    .text-button {
-        margin: 0px 4px;
-    }
-
-    .button-action {
-        margin: 0px 4px;
-        // display: flex;
-
-        .selected {
-            background-color: #4864dc;
-        }
-    }
-
-    .button-group {
-        button {
-            margin-right: 0px;
-        }
-    }
-
-    .demo-button {
-        min-width: 50px;
-        padding: 0px 2px;
-        border-radius: 0px;
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
+    input {
         outline: 1px solid #4c65d4;
-    }
-
-    .demo-icon-button {
-        outline: 1px solid #4c65d4;
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-        border-radius: 0px;
-        padding: 0px 4px;
         border: none;
-        cursor: pointer;
+        margin: 0px;
+        height: 25px;
 
-        &:disabled {
-            color: gray;
-            cursor: help;
+        &:focus {
+            outline: 1px solid #4c65d4 !important;
+        }
+    }
+
+    .action-container {
+        display: flex;
+        padding: 4px;
+        overflow: auto;
+
+        .text-button {
+            margin: 0px 4px;
         }
 
-        span {
-            font-size: 16px;
+        .button-action {
+            margin: 0px 4px;
+            // display: flex;
+
+            .selected {
+                background-color: #4864dc;
+            }
+        }
+
+        .button-group {
+            button {
+                margin-right: 0px;
+            }
+        }
+
+        .demo-button {
+            min-width: 50px;
+            padding: 0px 2px;
+            border-radius: 0px;
+            display: flex;
+            flex-grow: 1;
+            align-items: center;
+            outline: 1px solid #4c65d4;
+        }
+
+        .demo-icon-button {
+            outline: 1px solid #4c65d4;
+            flex-grow: 1;
+            display: flex;
+            align-items: center;
+            border-radius: 0px;
+            padding: 0px 4px;
+            border: none;
+            cursor: pointer;
+
+            &:disabled {
+                color: gray;
+                cursor: help;
+            }
+
+            span {
+                font-size: 16px;
+            }
         }
     }
 }
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
index a22bbf159..a9f4ea97c 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
@@ -89,7 +89,10 @@ const components = {
                     event.api.addPanel({
                         id: 'panel_3',
                         component: 'default',
-                        floating: true,
+                    });
+
+                    event.api.onDidRemovePanel((e) => {
+                        console.log('remove', e);
                     });
                 }}
                 className={'dockview-theme-abyss'}
@@ -264,6 +267,7 @@ const DockviewDemo = (props: { theme?: string }) => {
 
     return (
         <div
+            className="dockview-demo"
             style={{
                 height: '100%',
                 display: 'flex',
@@ -381,61 +385,77 @@ const DockviewDemo = (props: { theme?: string }) => {
                             width: '400px',
                             backgroundColor: 'black',
                             color: 'white',
-                            overflow: 'auto',
+                            overflow: 'hidden',
                             fontFamily: 'monospace',
                             marginLeft: '10px',
                             flexShrink: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
                         }}
                     >
-                        {logLines.map((line, i) => {
-                            return (
-                                <div
-                                    style={{
-                                        height: '30px',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        whiteSpace: 'nowrap',
-                                        fontSize: '13px',
-                                        display: 'flex',
-                                        alignItems: 'center',
-
-                                        backgroundColor: line.backgroundColor,
-                                    }}
-                                    key={i}
-                                >
-                                    <span
+                        <div style={{ flexGrow: 1, overflow: 'auto' }}>
+                            {logLines.map((line, i) => {
+                                return (
+                                    <div
                                         style={{
+                                            height: '30px',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                            fontSize: '13px',
                                             display: 'flex',
                                             alignItems: 'center',
-                                            minWidth: '20px',
-                                            maxWidth: '20px',
-                                            color: 'gray',
-                                            borderRight: '1px solid gray',
-                                            marginRight: '4px',
-                                            paddingLeft: '4px',
-                                            height: '100%',
+
+                                            backgroundColor:
+                                                line.backgroundColor,
                                         }}
+                                        key={i}
                                     >
-                                        {logLines.length - i}
-                                    </span>
-                                    <span>
-                                        {line.timestamp && (
-                                            <span
-                                                style={{
-                                                    fontSize: '0.7em',
-                                                    padding: '0px 2px',
-                                                }}
-                                            >
-                                                {line.timestamp
-                                                    .toISOString()
-                                                    .substring(11, 23)}
-                                            </span>
-                                        )}
-                                        <span>{line.text}</span>
-                                    </span>
-                                </div>
-                            );
-                        })}
+                                        <span
+                                            style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                minWidth: '20px',
+                                                maxWidth: '20px',
+                                                color: 'gray',
+                                                borderRight: '1px solid gray',
+                                                marginRight: '4px',
+                                                paddingLeft: '4px',
+                                                height: '100%',
+                                            }}
+                                        >
+                                            {logLines.length - i}
+                                        </span>
+                                        <span>
+                                            {line.timestamp && (
+                                                <span
+                                                    style={{
+                                                        fontSize: '0.7em',
+                                                        padding: '0px 2px',
+                                                    }}
+                                                >
+                                                    {line.timestamp
+                                                        .toISOString()
+                                                        .substring(11, 23)}
+                                                </span>
+                                            )}
+                                            <span>{line.text}</span>
+                                        </span>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                        <div
+                            style={{
+                                padding: '4px',
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                            }}
+                        >
+                            <button onClick={() => setLogLines([])}>
+                                Clear
+                            </button>
+                        </div>
                     </div>
                 )}
             </div>
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
index f1b2a0eeb..40e57b2fa 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
@@ -132,7 +132,7 @@ export const GridActions = (props: {
 
     const popover = usePopover();
 
-    const onAddPanel = (options?: { advanced: boolean }) => {
+    const onAddPanel = (options?: { advanced?: boolean; nested?: boolean }) => {
         if (options?.advanced) {
             popover.open(({ close }) => {
                 return <PanelBuilder api={props.api!} done={close} />;
@@ -140,7 +140,7 @@ export const GridActions = (props: {
         } else {
             props.api?.addPanel({
                 id: `id_${Date.now().toString()}`,
-                component: 'default',
+                component: options?.nested ? 'nested' : 'default',
                 title: `Tab ${nextId()}`,
                 renderer: 'always',
             });
@@ -170,6 +170,12 @@ export const GridActions = (props: {
                     <span className="material-symbols-outlined">tune</span>
                 </button>
             </div>
+            <button
+                className="text-button"
+                onClick={() => onAddPanel({ nested: true })}
+            >
+                Add Nested Panel
+            </button>
             <button className="text-button" onClick={onAddGroup}>
                 Add Group
             </button>
@@ -198,8 +204,8 @@ export const GridActions = (props: {
                 Reset
             </button>
             <span style={{ flexGrow: 1 }} />
-            <div style={{ display: 'flex' }}>
-                <span style={{ paddingRight: '4px' }}>Group Gap</span>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+                <span style={{ paddingRight: '4px' }}>Grid Gap</span>
                 <input
                     style={{ width: 40 }}
                     type="number"
@@ -209,6 +215,7 @@ export const GridActions = (props: {
                     value={gap}
                     onChange={(event) => setGap(Number(event.target.value))}
                 />
+                <button onClick={() => setGap(0)}>Reset</button>
             </div>
         </div>
     );
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/mapboxPanel.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/mapboxPanel.tsx
new file mode 100644
index 000000000..3393133a3
--- /dev/null
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/mapboxPanel.tsx
@@ -0,0 +1,28 @@
+import { IDockviewPanelProps } from 'dockview';
+import * as React from 'react';
+import Map from 'react-map-gl';
+
+export const MapboxPanel = (props: IDockviewPanelProps) => {
+    React.useEffect(() => {
+        const subscription = props.api.onDidLocationChange((e) => {
+            const isPopout = e.location.type === 'popout';
+        });
+
+        return () => subscription.dispose();
+    }, [props.api]);
+
+    return (
+        <div style={{ overflow: 'auto', height: '100%' }}>
+            <Map
+                mapboxAccessToken="pk.eyJ1IjoibWF0aHVvIiwiYSI6ImNrMXo4bnJ1ajA5OXUzaXA5ODg3Nnc1M3YifQ.Il7zfYd-sZ113W6Fmmagjg"
+                initialViewState={{
+                    longitude: -122.4,
+                    latitude: 37.8,
+                    zoom: 14,
+                }}
+                style={{ width: 600, height: 400 }}
+                mapStyle="mapbox://styles/mapbox/streets-v9"
+            />
+        </div>
+    );
+};
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
index c81a63077..276aaa94e 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
@@ -74,14 +74,7 @@ const PanelAction = (props: {
                     onClick={() => {
                         const panel = props.api.getPanel(props.panelId);
                         if (panel) {
-                            props.api.addFloatingGroup(panel, {
-                                position: {
-                                    width: 400,
-                                    height: 300,
-                                    bottom: 50,
-                                    right: 50,
-                                },
-                            });
+                            props.api.addFloatingGroup(panel);
                         }
                     }}
                 >