Skip to content

Commit 27b7dae

Browse files
mathuomathuo
committed
chore: docs
1 parent 3d2ca3a commit 27b7dae

File tree

7 files changed

+158
-118
lines changed

7 files changed

+158
-118
lines changed

‎packages/docs/docs/core/dnd/disable.mdx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: 'Disable Dnd'
3+
sidebar_position: 3
4+
---
5+
6+
import { DocRef } from '@site/src/components/ui/reference/docRef';
7+
8+
9+
<FrameworkSpecific framework="JavaScript">
10+
<DocRef declaration="DockviewComponentOptions" methods={["disableDnd"]} />
11+
</FrameworkSpecific>
12+
13+
<FrameworkSpecific framework="React">
14+
<DocRef declaration="IDockviewReactProps" methods={["disableDnd"]} />
15+
</FrameworkSpecific>
16+
17+
18+
19+
20+

‎packages/docs/docs/core/dnd/dragAndDrop copy.mdx

-94
This file was deleted.

‎packages/docs/docs/core/dnd/dragAndDrop.mdx

+73-23
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: 'Overview'
3-
sidebar_position: 2
2+
title: 'Dnd'
3+
sidebar_position: 1
44
---
55

66
import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -10,35 +10,85 @@ import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
1010

1111
import { DocRef } from '@site/src/components/ui/reference/docRef';
1212

13-
Dockview supports a wide variety of built-in Drag and Drop possibilities.
13+
The dock makes heavy use of drag and drop functionalities.
1414

15-
<h4>Position a tab between two other tabs</h4>
15+
<DocRef declaration="DockviewApi"
16+
methods={[
17+
'onWillDragPanel', 'onWillDragGroup',
18+
'onWillDrop', 'onDidDrop', 'onWillShowOverlay'
19+
]}
20+
/>
1621

17-
<div style={{display:' flex', justifyContent: 'center'}}>
18-
<img style={{ height: '50px' }} src={useBaseUrl('/img/add_to_tab.svg')} />
19-
</div>
2022

21-
<h4>Position a tab at the end of a list of tabs</h4>
23+
# Drag And Drop
2224

23-
<div style={{display:' flex', justifyContent: 'center'}}>
24-
<img style={{ height: '50px' }} src={useBaseUrl('/img/add_to_empty_space.svg')} />
25-
</div>
25+
You can override the conditions of the far edge overlays through the `rootOverlayModel` prop.
2626

27-
<h4>Merge one group with another group</h4>
27+
```tsx
28+
<DockviewReact
29+
{...props}
30+
rootOverlayModel={{
31+
size: { value: 100, type: 'pixels' },
32+
activationSize: { value: 5, type: 'percentage' },
33+
}}
34+
/>
35+
```
2836

29-
<div style={{display:' flex', justifyContent: 'center'}}>
30-
<img style={{ height: '50px' }} src={useBaseUrl('/img/add_to_group.svg')} />
31-
</div>
37+
## Extended behaviours
3238

33-
<h4>Move both Tabs and Groups in relation to another group</h4>
39+
For interaction with the Drag events directly the component exposes some method to help determine whether external drag events should be interacted with or not.
3440

41+
```tsx
42+
/**
43+
* called when an ondrop event which does not originate from the dockview libray and
44+
* passes the showDndOverlay condition occurs
45+
**/
46+
const onDidDrop = (event: DockviewDropEvent) => {
47+
const { group } = event;
3548

36-
<div style={{display:' flex', justifyContent: 'center'}}>
37-
<img style={{ height: '300px' }} src={useBaseUrl('/img/drop_positions.svg')} />
38-
</div>
49+
event.api.addPanel({
50+
id: 'test',
51+
component: 'default',
52+
position: {
53+
referencePanel: group.activePanel.id,
54+
direction: 'within',
55+
},
56+
});
57+
};
3958

40-
<h4>Move both Tabs and Groups in relation to the container</h4>
59+
/**
60+
* called for drag over events which do not originate from the dockview library
61+
* allowing the developer to decide where the overlay should be shown for a
62+
* particular drag event
63+
**/
64+
const showDndOverlay = (event: DockviewDndOverlayEvent) => {
65+
return true;
66+
};
4167

42-
<div style={{display:' flex', justifyContent: 'center'}}>
43-
<img style={{ height: '300px' }} src={useBaseUrl('/img/magnet_drop_positions.svg')} />
44-
</div>
68+
return (
69+
<DockviewReact
70+
components={components}
71+
onReady={onReady}
72+
className="dockview-theme-abyss"
73+
onDidDrop={onDidDrop}
74+
showDndOverlay={showDndOverlay}
75+
/>
76+
);
77+
```
78+
79+
## Intercepting Drag Events
80+
81+
You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods.
82+
83+
<MultiFrameworkContainer sandboxId="dnd-dockview" react={DndDockview} />
84+
85+
## Third Party Dnd Libraries
86+
87+
This shows a simple example of a third-party library used inside a panel that relies on drag
88+
and drop functionalities. This examples serves to show that `dockview` doesn't interfer with
89+
any drag and drop logic for other controls.
90+
91+
<MultiFrameworkContainer
92+
sandboxId="externaldnd-dockview"
93+
react={DockviewExternalDnd}
94+
/>

‎packages/docs/docs/core/dnd/overview.mdx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: 'Overview'
3+
sidebar_position: 0
4+
---
5+
6+
import useBaseUrl from '@docusaurus/useBaseUrl';
7+
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
8+
import DndDockview from '@site/sandboxes/dnd-dockview/src/app';
9+
import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
10+
11+
import { DocRef } from '@site/src/components/ui/reference/docRef';
12+
13+
Dockview supports a wide variety of built-in Drag and Drop possibilities.
14+
15+
<h4>Position a tab between two other tabs</h4>
16+
17+
<div style={{display:' flex', justifyContent: 'center'}}>
18+
<img style={{ height: '50px' }} src={useBaseUrl('/img/add_to_tab.svg')} />
19+
</div>
20+
21+
<h4>Position a tab at the end of a list of tabs</h4>
22+
23+
<div style={{display:' flex', justifyContent: 'center'}}>
24+
<img style={{ height: '50px' }} src={useBaseUrl('/img/add_to_empty_space.svg')} />
25+
</div>
26+
27+
<h4>Merge one group with another group</h4>
28+
29+
<div style={{display:' flex', justifyContent: 'center'}}>
30+
<img style={{ height: '50px' }} src={useBaseUrl('/img/add_to_group.svg')} />
31+
</div>
32+
33+
<h4>Move both Tabs and Groups in relation to another group</h4>
34+
35+
36+
<div style={{display:' flex', justifyContent: 'center'}}>
37+
<img style={{ height: '300px' }} src={useBaseUrl('/img/drop_positions.svg')} />
38+
</div>
39+
40+
<h4>Move both Tabs and Groups in relation to the container</h4>
41+
42+
<div style={{display:' flex', justifyContent: 'center'}}>
43+
<img style={{ height: '300px' }} src={useBaseUrl('/img/magnet_drop_positions.svg')} />
44+
</div>

‎packages/docs/docs/core/dnd/thirdParty.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: 'Third Party Libraries'
3+
sidebar_position: 2
34
---
45

56
All third party Drag & Drop libraries should work as expected.

‎packages/docs/docs/core/groups/popoutGroups.mdx

+7
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ From within a panel you may say
3939
props.containerApi.addPopoutGroup(props.api.group);
4040
```
4141

42+
## Closing the Popout Group
43+
4244
To programatically move the popout group back into the main grid you can use the `moveTo` method in many ways, one of the following would suffice
4345

4446
```tsx
@@ -50,4 +52,9 @@ const group = props.containerApi.addGroup();
5052
props.group.api.moveTo({ group });
5153
```
5254

55+
Alternatively, if the user closes the Window the group the dock will make a best attempt to place it back
56+
in it's original location within the grid. If the dock cannot determine the original location it will
57+
choose a new location.
58+
59+
5360
<LiveExample framework="react" id="dockview/popout-group"/>

‎packages/docs/src/css/custom.scss

+13-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
--ifm-alert-padding-vertical: 8px;
1717
--ifm-alert-padding-horizontal: 8px;
1818

19+
--ifm-background-surface-color: #141d2c;
20+
--ifm-background-color: white;
21+
1922
--ifm-color-primary: #21222c;
2023
--ifm-color-primary-dark: #1e1f28;
2124
--ifm-color-primary-darker: #1c1d25;
@@ -25,6 +28,15 @@
2528
--ifm-color-primary-lightest: #2b2c39;
2629
--ifm-code-font-size: 95%;
2730
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
31+
32+
--ifm-color-primary: black;
33+
34+
--ifm-navbar-link-color: white;
35+
--ifm-navbar-link-hover-color: white;
36+
37+
.navbar {
38+
color: white;
39+
}
2840
}
2941

3042
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -200,7 +212,7 @@
200212
// }
201213

202214
.menu__link {
203-
color: white;
215+
// color: white;
204216
}
205217
}
206218

0 commit comments

Comments
 (0)