feat: demo

packages/splitview-demo/src/stories/paneview.stories.tsx

@@ -5,6 +5,12 @@ import {
     PaneviewReadyEvent,
     IPaneviewPanelProps,
     SerializedPaneview,
+    PanelConstraintChangeEvent,
+    CompositeDisposable,
+    PanelDimensionChangeEvent,
+    ExpansionEvent,
+    FocusEvent,
+    ActiveEvent,
 } from 'dockview';
 import * as React from 'react';
 import { Story, Meta } from '@storybook/react';
@@ -12,6 +18,32 @@ import 'dockview/dist/styles.css';
 
 const components: PanelCollection<IPaneviewPanelProps> = {
     default: (props) => {
+        const [constraints, setConstraints] = React.useState<
+            PanelConstraintChangeEvent
+        >();
+        const [dimensions, setDimensions] = React.useState<
+            PanelDimensionChangeEvent
+        >();
+        const [expansionState, setExpansionState] = React.useState<
+            ExpansionEvent
+        >();
+        const [active, setActive] = React.useState<ActiveEvent>();
+        const [focus, setFocus] = React.useState<FocusEvent>();
+
+        React.useEffect(() => {
+            const disposables = new CompositeDisposable(
+                props.api.onDidConstraintsChange(setConstraints),
+                props.api.onDidDimensionsChange(setDimensions),
+                props.api.onDidExpansionChange(setExpansionState),
+                props.api.onDidActiveChange(setActive),
+                props.api.onDidFocusChange(setFocus)
+            );
+
+            return () => {
+                disposables.dispose();
+            };
+        }, []);
+
         const resize = () => {
             props.api.setSize({ size: 300 });
         };
@@ -21,10 +53,24 @@ const components: PanelCollection<IPaneviewPanelProps> = {
                 style={{
                     padding: '10px',
                     backgroundColor: props.color,
+                    boxSizing: 'border-box',
                     height: '100%',
                 }}
             >
-                <div>hello world</div>
+                <div
+                    style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}
+                >
+                    <div>Contraints:</div>
+                    <div>{`maximumSize: ${constraints?.maximumSize} minimumSize: ${constraints?.minimumSize}`}</div>
+                    <div>Dimesions:</div>
+                    <div>{`width: ${dimensions?.width} height: ${dimensions?.height}`}</div>
+                    <div>Expansion:</div>
+                    <div>{`expanded: ${expansionState?.isExpanded}`}</div>
+                    <div>Active:</div>
+                    <div>{`active: ${active?.isActive}`}</div>
+                    <div>Focus:</div>
+                    <div>{`focused: ${focus?.isFocused}`}</div>
+                </div>
                 <button onClick={resize}>Resize</button>
             </div>
         );

packages/splitview-demo/src/stories/splitview.stories.tsx

@@ -23,6 +23,7 @@ const components: PanelCollection<ISplitviewPanelProps> = {
                     padding: '10px',
                     backgroundColor: props.color,
                     height: '100%',
+                    boxSizing: 'border-box',
                 }}
             >
                 <div>hello world</div>