}){kind=spacer}
+
+> Drag a tab to the right of the last tab to place it after the existing tabs.
+
+})
+
+> Drag a group onto an existing group to merge the two groups.
+
+
+ })
+ })
+
+
+> Drag into the left/right/top/bottom target zone of a panel to create a new group in the selected direction.
+
+> Drag into the center of a panel to add to that group.
+
+> Drag to the edge of the dockview component to create a new group on the selected edge.
+
+#### Extended behaviours
+
+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.
```tsx
/**
@@ -375,3 +499,51 @@ const Component: React.FunctionComponent
+
+
+
+ {isGroupActive ? 'Group Active' : 'Group Inactive'}
+
+ {`activePanel: ${
+ activePanel?.id || 'null'
+ }`}
+
+ );
+};
+```
+
+
diff --git a/packages/docs/src/components/dockview/customHeaders.tsx b/packages/docs/src/components/dockview/customHeaders.tsx
index 8494cdefb..08e5b85b1 100644
--- a/packages/docs/src/components/dockview/customHeaders.tsx
+++ b/packages/docs/src/components/dockview/customHeaders.tsx
@@ -84,7 +84,7 @@ export const CustomHeadersDockview = () => {
position: { referencePanel: 'panel_7', direction: 'within' },
});
- event.api.addEmptyGroup();
+ event.api.addGroup();
};
return (
diff --git a/packages/docs/src/components/dockview/demo.tsx b/packages/docs/src/components/dockview/demo.tsx
index 88410fc6d..c8ce7aadc 100644
--- a/packages/docs/src/components/dockview/demo.tsx
+++ b/packages/docs/src/components/dockview/demo.tsx
@@ -209,9 +209,8 @@ const Icon = (props: {
};
const Button = () => {
- const [position, setPosition] = React.useState<
- { x: number; y: number } | undefined
- >(undefined);
+ const [position, setPosition] =
+ React.useState<{ x: number; y: number } | undefined>(undefined);
const close = () => setPosition(undefined);
@@ -316,19 +315,19 @@ export const DockviewDemo = () => {
position: { referencePanel: 'panel_7', direction: 'within' },
});
- event.api.addEmptyGroup();
+ event.api.addGroup();
event.api.getPanel('panel_1').api.setActive();
- setInterval(() => {
- event.api.getPanel('panel_1').update({
- params: {
- params: {
- title: Date.now().toString(),
- },
- },
- });
- }, 1000);
+ // setInterval(() => {
+ // event.api.getPanel('panel_1').update({
+ // params: {
+ // params: {
+ // title: Date.now().toString(),
+ // },
+ // },
+ // });
+ // }, 1000);
};
return (
diff --git a/packages/docs/src/components/dockview/groupControl.scss b/packages/docs/src/components/dockview/groupControl.scss
new file mode 100644
index 000000000..9a9d5bce1
--- /dev/null
+++ b/packages/docs/src/components/dockview/groupControl.scss
@@ -0,0 +1,17 @@
+.dockview-groupcontrol-demo {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ color: white;
+ background-color: black;
+ padding-left: 8px;
+
+ .dockview-groupcontrol-demo-group-active {
+ padding: 0px 8px;
+ }
+
+ .dockview-groupcontrol-demo-active-panel {
+ color: yellow;
+ padding: 0px 8px;
+ }
+}
diff --git a/packages/docs/src/components/dockview/groupControl.tsx b/packages/docs/src/components/dockview/groupControl.tsx
new file mode 100644
index 000000000..1279b5092
--- /dev/null
+++ b/packages/docs/src/components/dockview/groupControl.tsx
@@ -0,0 +1,103 @@
+import {} from '@site/../dockview/dist/cjs/dnd/droptarget';
+import {
+ DockviewReact,
+ DockviewReadyEvent,
+ IDockviewGroupControlProps,
+ IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+import './groupControl.scss';
+
+const components = {
+ default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
+ return (
+ (t: T): void {
+ this.data = t;
+ }
+
+ getData(): T {
+ return this.data;
+ }
+
+ clearData(): void {
+ this.data = null;
+ }
+}
+
+type CustomDescriptor = {
+ type: 'CUSTOM';
+ id: string;
+};
+
+function isCustomDescriptor(obj: any): obj is CustomDescriptor {
+ return (
+ typeof obj === 'object' && (obj as CustomDescriptor).type === 'CUSTOM'
+ );
+}
+
+function convertPositionToDirection(position: Position): Direction {
+ switch (position) {
+ case Position.Left:
+ return 'left';
+
+ case Position.Right:
+ return 'right';
+
+ case Position.Bottom:
+ return 'below';
+
+ case Position.Top:
+ return 'above';
+
+ case Position.Center:
+ return 'within';
+ }
+}
+
+const components = {
+ default: (props: IDockviewPanelProps<{ title: string; x?: number }>) => {
+ return (
+ ({
default: false,
});
-function RenderWhenVisible<
- T extends { api: Pick }
->(component: React.FunctionComponent) {
- const HigherOrderComponent = (props: T) => {
+function RenderWhenVisible(
+ component: React.FunctionComponent
+) {
+ const HigherOrderComponent = (props: IDockviewPanelProps) => {
const [visible, setVisible] = React.useState(
props.api.isVisible
);
diff --git a/packages/docs/src/components/dockview/resize.tsx b/packages/docs/src/components/dockview/resize.tsx
index eaff93af3..a6e68cfb4 100644
--- a/packages/docs/src/components/dockview/resize.tsx
+++ b/packages/docs/src/components/dockview/resize.tsx
@@ -23,13 +23,24 @@ const Default = (props: IDockviewPanelProps) => {
step={1}
/>
+
+ {`${props.params.title}`}
+ {props.params.x && {` ${props.params.x}`}}
+
+ );
+ },
+};
+
+const GroupControlComponent = (props: IDockviewGroupControlProps) => {
+ const isGroupActive = props.isGroupActive;
+ const activePanel = props.activePanel;
+
+ return (
+
+
+ {isGroupActive ? 'Group Active' : 'Group Inactive'}
+
+ {`activePanel: ${
+ activePanel?.id || 'null'
+ }`}
+
+ );
+};
+
+export const DockviewGroupControl = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ const panel1 = event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ tabComponent: 'default',
+ params: {
+ title: 'Window 1',
+ },
+ });
+
+ const panel2 = event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ tabComponent: 'default',
+ params: {
+ title: 'Window 2',
+ },
+ position: {
+ direction: 'right',
+ },
+ });
+
+ const panel3 = event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ tabComponent: 'default',
+ params: {
+ title: 'Window 3',
+ },
+ position: {
+ direction: 'below',
+ },
+ });
+ };
+
+ return (
+
+
+ );
+};
diff --git a/packages/docs/src/components/dockview/native.scss b/packages/docs/src/components/dockview/native.scss
new file mode 100644
index 000000000..03d7d8c35
--- /dev/null
+++ b/packages/docs/src/components/dockview/native.scss
@@ -0,0 +1,34 @@
+.nested-dockview {
+ position: relative;
+ ::after {
+ content: '';
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ height: 1px;
+ width: 100%;
+ background-color: var(--dv-separator-border);
+ }
+}
+
+.header-title {
+ padding: 0px 8px;
+}
+
+.my-custom-tab {
+ padding: 0px 8px;
+ width: 100%;
+ display: flex;
+ height: 100%;
+ align-items: center;
+ background-color: var(--dv-tabs-and-actions-container-background-color);
+
+ .my-custom-tab-icon {
+ font-size: 16px;
+
+ &:hover {
+ border-radius: 2px;
+ background-color: var(--dv-icon-hover-background-color);
+ }
+ }
+}
diff --git a/packages/docs/src/components/dockview/native.tsx b/packages/docs/src/components/dockview/native.tsx
new file mode 100644
index 000000000..f0a62997d
--- /dev/null
+++ b/packages/docs/src/components/dockview/native.tsx
@@ -0,0 +1,259 @@
+import {
+ CanDisplayOverlay,
+ Droptarget,
+ DropTargetDirections,
+} from '@site/../dockview/dist/cjs/dnd/droptarget';
+import {
+ DockviewDndOverlayEvent,
+ DockviewDropEvent,
+ DockviewReact,
+ DockviewReadyEvent,
+ GridviewReact,
+ GridviewReadyEvent,
+ IDockviewPanelProps,
+ IGridviewPanelProps,
+ Position,
+ Direction,
+ IDockviewPanelHeaderProps,
+} from 'dockview';
+import * as React from 'react';
+import './native.scss';
+
+class CustomDndTraget {
+ private data: any;
+
+ static SINGLETON = new CustomDndTraget();
+
+ setData
+ {`${props.params.title}`}
+ {props.params.x && {` ${props.params.x}`}}
+
+ );
+ },
+ isolatedApp: (
+ props: IDockviewPanelProps<{ title: string; x?: number }>
+ ) => {
+ const onReady = (event: DockviewReadyEvent) => {
+ const panel1 = event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Tab 1',
+ },
+ });
+ const panel2 = event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Tab 2',
+ },
+ });
+ const panel3 = event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Tab 3',
+ },
+ });
+ };
+ return (
+
+ {props.params.title}
+
+
+
+ chrome_minimize
+
+
+ chrome_maximize
+
+
+ close
+
+
+ );
+ },
+};
+
+export const DockviewNative = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ const panel1 = event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ tabComponent: 'default',
+ params: {
+ title: 'Window 1',
+ },
+ });
+ panel1.group.locked = true;
+
+ const panel2 = event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ tabComponent: 'default',
+ params: {
+ title: 'Window 2',
+ },
+ position: {
+ direction: 'right',
+ },
+ });
+ panel2.group.locked = true;
+
+ const panel3 = event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ tabComponent: 'default',
+ params: {
+ title: 'Window 3',
+ },
+ position: {
+ direction: 'below',
+ },
+ });
+ panel3.group.locked = true;
+ };
+
+ return (
+
+
+ );
+};
+
+export const DockviewNative2 = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ const panel1 = event.api.addPanel({
+ id: 'panel_1',
+ component: 'isolatedApp',
+ tabComponent: 'default',
+ params: {
+ title: 'Window 1',
+ },
+ });
+ panel1.group.locked = true;
+
+ const panel2 = event.api.addPanel({
+ id: 'panel_2',
+ component: 'isolatedApp',
+ tabComponent: 'default',
+ params: {
+ title: 'Window 2',
+ },
+ position: {
+ direction: 'right',
+ },
+ });
+ panel2.group.locked = true;
+
+ const panel3 = event.api.addPanel({
+ id: 'panel_3',
+ component: 'isolatedApp',
+ tabComponent: 'default',
+ params: {
+ title: 'Window 3',
+ },
+ position: {
+ direction: 'below',
+ },
+ });
+ panel3.group.locked = true;
+ };
+
+ return (
+
+
+ );
+};
diff --git a/packages/docs/src/components/dockview/rendering.tsx b/packages/docs/src/components/dockview/rendering.tsx
index 78f775423..18b1b3ebf 100644
--- a/packages/docs/src/components/dockview/rendering.tsx
+++ b/packages/docs/src/components/dockview/rendering.tsx
@@ -13,10 +13,10 @@ const renderVisibleComponentsOnlyAtom = atom
@@ -42,13 +53,24 @@ const Default = (props: IDockviewPanelProps) => {
step={1}
/>
+
diff --git a/packages/docs/static/img/add_to_empty_space.svg b/packages/docs/static/img/add_to_empty_space.svg
new file mode 100644
index 000000000..da2c2f446
--- /dev/null
+++ b/packages/docs/static/img/add_to_empty_space.svg
@@ -0,0 +1,20 @@
+
diff --git a/packages/docs/static/img/add_to_group.svg b/packages/docs/static/img/add_to_group.svg
new file mode 100644
index 000000000..e8f2ab88d
--- /dev/null
+++ b/packages/docs/static/img/add_to_group.svg
@@ -0,0 +1,25 @@
+
diff --git a/packages/docs/static/img/add_to_tab.svg b/packages/docs/static/img/add_to_tab.svg
new file mode 100644
index 000000000..bdc5acf49
--- /dev/null
+++ b/packages/docs/static/img/add_to_tab.svg
@@ -0,0 +1,20 @@
+
diff --git a/packages/docs/static/img/dockview_grid_3.svg b/packages/docs/static/img/dockview_grid_3.svg
new file mode 100644
index 000000000..fb70b1897
--- /dev/null
+++ b/packages/docs/static/img/dockview_grid_3.svg
@@ -0,0 +1,61 @@
+
diff --git a/packages/docs/static/img/drop_positions.svg b/packages/docs/static/img/drop_positions.svg
new file mode 100644
index 000000000..365e7f609
--- /dev/null
+++ b/packages/docs/static/img/drop_positions.svg
@@ -0,0 +1,45 @@
+
diff --git a/packages/docs/static/img/magnet_drop_positions.svg b/packages/docs/static/img/magnet_drop_positions.svg
new file mode 100644
index 000000000..a82f693b0
--- /dev/null
+++ b/packages/docs/static/img/magnet_drop_positions.svg
@@ -0,0 +1,53 @@
+