feat: improve layout events

packages/dockview-demo/package.json

@@ -16,7 +16,8 @@
   "dependencies": {
     "dockview": "^0.0.25",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "recoil": "^0.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",

packages/dockview-demo/src/index.tsx

@@ -1,8 +1,14 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import './index.scss';
 import { Application } from './layout-grid/application';
+import { RecoilRoot } from 'recoil';
+import './index.scss';
 
 document.getElementById('app').classList.add('dockview-theme-dark');
 
-ReactDOM.render(<Application />, document.getElementById('app'));
+ReactDOM.render(
+    <RecoilRoot>
+        <Application />
+    </RecoilRoot>,
+    document.getElementById('app')
+);

packages/dockview-demo/src/layout-grid/application.tsx

@@ -50,13 +50,19 @@ export const Application = () => {
 
         // event.api.fromJSON(require('./application.layout.json'));
 
+        let success = false;
         const state = localStorage.getItem('dockview-layout');
 
         if (state) {
-            console.log('loading from save');
-            const jsonstate = JSON.parse(state) as SerializedGridview;
-            event.api.fromJSON(jsonstate);
-        } else {
+            try {
+                event.api.fromJSON(JSON.parse(state));
+                success = true;
+            } catch (err) {
+                console.error('failed to load layout', err);
+            }
+        }
+
+        if (!success) {
             event.api.addPanel({
                 id: 'i',
                 component: 'activitybar',
@@ -110,7 +116,6 @@ export const Application = () => {
 
     return (
         <GridviewReact
-            // className={'visual-studio-theme'}
             components={rootcomponents}
             onReady={onReady}
             orientation={Orientation.VERTICAL}

packages/dockview-demo/src/layout-grid/controlCenter.tsx

@@ -8,21 +8,6 @@ export const ControlCenter = () => {
 
     const dragRef = React.useRef<HTMLDivElement>();
 
-    // React.useEffect(() => {
-    //     const api = registry.get<DockviewApi>('dockview');
-    //     const target = api.createDragTarget(
-    //         { element: dragRef.current, content: 'drag me' },
-    //         () => ({
-    //             id: 'yellow',
-    //             component: 'test_component',
-    //         })
-    //     );
-
-    //     return () => {
-    //         target.dispose();
-    //     };
-    // }, []);
-
     const onDragStart = (event: React.DragEvent) => {
         event.dataTransfer.setData('text/plain', 'Panel2');
     };

packages/dockview-demo/src/layout-grid/footer.tsx

@@ -1,13 +1,27 @@
 import * as React from 'react';
 import { IGridviewPanelProps } from 'dockview';
+import { atom, useRecoilValue } from 'recoil';
+
+export const selectedPanelAtom = atom<string>({
+    key: 'selectedPanelAtom',
+    default: '',
+});
 
 export const Footer = (props: IGridviewPanelProps) => {
+    const selectedPanel = useRecoilValue(selectedPanelAtom);
+
     return (
         <div
             style={{
                 height: '22px',
                 backgroundColor: 'dodgerblue',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0px 8px',
             }}
-        ></div>
+        >
+            <span style={{ flexGrow: 1 }} />
+            <span>{selectedPanel}</span>
+        </div>
     );
 };

packages/dockview-demo/src/layout-grid/layoutGrid.tsx

@@ -22,6 +22,8 @@ import './layoutGrid.scss';
 import { WelcomePanel } from '../panels/welcome/welcome';
 import { SplitviewPanel } from '../panels/splitview/splitview';
 import { GridviewDemoPanel } from '../panels/gridview/gridview';
+import { useRecoilCallback } from 'recoil';
+import { selectedPanelAtom } from './footer';
 
 const Test = (props: IDockviewPanelProps) => {
     const [counter, setCounter] = React.useState<number>(0);
@@ -102,23 +104,6 @@ const components: PanelCollection<IDockviewPanelProps> = {
             }
         };
 
-        React.useEffect(() => {
-            const compDis = new CompositeDisposable(
-                props.api.onDidDimensionsChange((event) => {
-                    // _api.current?.layout(event.width, event.height);
-                }),
-                _api.current.onGridEvent((event) => {
-                    if (event.kind === GroupChangeKind.LAYOUT_CONFIG_UPDATED) {
-                        props.api.setState('layout', _api.current.toJSON());
-                    }
-                })
-            );
-
-            return () => {
-                compDis.dispose();
-            };
-        }, []);
-
         return (
             <div
                 style={{
@@ -296,101 +281,66 @@ export const nextGuid = (() => {
 })();
 
 export const TestGrid = (props: IGridviewPanelProps) => {
-    const _api = React.useRef<DockviewApi>();
+    const [api, setApi] = React.useState<DockviewApi>();
     const registry = useLayoutRegistry();
 
     const onReady = (event: DockviewReadyEvent) => {
         const api = event.api;
-        _api.current = event.api;
+        setApi(api);
         registry.register('dockview', api);
+    };
 
-        // api.addDndHandle('text/plain', (ev) => {
-        //     const { event } = ev;
-
-        //     return {
-        //         id: 'yellow',
-        //         component: 'test_component',
-        //     };
-        // });
-
-        // api.addDndHandle('Files', (ev) => {
-        //     const { event } = ev;
+    const setSelectedPanel = useRecoilCallback(
+        ({ set }) => (value: string) => set(selectedPanelAtom, value),
+        []
+    );
 
-        //     ev.event.event.preventDefault();
+    React.useEffect(() => {
+        if (!api) {
+            return () => {
+                //
+            };
+        }
+        props.api.setConstraints({
+            minimumWidth: () => api.minimumWidth,
+            minimumHeight: () => api.minimumHeight,
+        });
 
-        //     return {
-        //         id: Date.now().toString(),
-        //         title: event.event.dataTransfer.files[0].name,
-        //         component: 'test_component',
-        //     };
-        // });
+        const disposable = new CompositeDisposable(
+            api.onDidLayoutChange(() => {
+                const state = api.toJSON();
+                localStorage.setItem('dockview', JSON.stringify(state));
+            }),
+            api.onGridEvent((e) => {
+                console.log(e);
+                if (e.kind === GroupChangeKind.PANEL_ACTIVE) {
+                    setSelectedPanel(e.panel?.id || '');
+                }
+            })
+        );
 
         const state = localStorage.getItem('dockview');
+        let success = false;
         if (state) {
-            api.fromJSON(JSON.parse(state));
-        } else {
+            try {
+                api.fromJSON(JSON.parse(state));
+                success = true;
+            } catch (err) {
+                console.error('failed to load layout', err);
+            }
+        }
+        if (!success) {
             api.addPanel({
                 component: 'welcome',
                 id: 'welcome',
                 title: 'Welcome',
             });
-
-            // event.api.deserialize(require('./layoutGrid.layout.json'));
-            return;
-
-            api.addPanel({
-                component: 'test_component',
-                id: nextGuid(),
-                title: 'Item 1',
-                params: { text: 'how low?' },
-            });
-            api.addPanel({
-                component: 'test_component',
-                id: 'item2',
-                title: 'Item 2',
-            });
-            api.addPanel({
-                component: 'split_panel',
-                id: nextGuid(),
-                title: 'Item 3 with a long title',
-            });
-            api.addPanel({
-                component: 'test_component',
-                id: nextGuid(),
-                title: 'Item 3',
-                position: { direction: 'below', referencePanel: 'item2' },
-                suppressClosable: true,
-            });
         }
 
-        // api.addPanel({
-        //     component: 'test',
-        //     id: 'test',
-        //     title: 'Test',
-        // });
-    };
-
-    React.useEffect(() => {
-        props.api.setConstraints({
-            minimumWidth: () => _api.current.minimumWidth,
-            minimumHeight: () => _api.current.minimumHeight,
-        });
-
-        const disposable = new CompositeDisposable(
-            _api.current.onDidLayoutChange(() => {
-                const state = _api.current.toJSON();
-                localStorage.setItem('dockview', JSON.stringify(state));
-            }),
-            props.api.onDidDimensionsChange((event) => {
-                const { width, height } = event;
-                // _api.current.layout(width, height);
-            })
-        );
-
         return () => {
             disposable.dispose();
         };
-    }, []);
+    }, [api]);
 
     const [coord, setCoord] = React.useState<{
         x: number;