rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-09-29 20:48:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: addFlotaingGroup method changes

Browse Source
This commit is contained in:
mathuo 2024-06-21 22:05:24 +01:00
parent cf8f18dbbd
commit 9b46c1e7d9
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
11 changed files with 116 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
View File

@ -490,14 +490,11 @@ describe('tabsContainer', () => {
const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
fireEvent(container, event);
expect(accessor.addFloatingGroup).toHaveBeenCalledWith(
groupPanel,
{
x: 100,
y: 60,
},
{ inDragMode: true }
);
expect(accessor.addFloatingGroup).toHaveBeenCalledWith(groupPanel, {
x: 100,
y: 60,
inDragMode: true,
});
expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(1);
expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(1);

19
packages/dockview-core/src/api/component.api.ts
View File

@ -1,4 +1,5 @@
import {
FloatingGroupOptions,
IDockviewComponent,
SerializedDockview,
} from '../dockview/dockviewComponent';
@ -139,7 +140,7 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
return this.component.onDidRemoveView;
}
constructor(private readonly component: ISplitviewComponent) { }
constructor(private readonly component: ISplitviewComponent) {}
/**
* Update configuratable options.
@ -295,7 +296,7 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
return emitter.event;
}
constructor(private readonly component: IPaneviewComponent) { }
constructor(private readonly component: IPaneviewComponent) {}
/**
* Remove a panel given the panel object.
@ -459,7 +460,7 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
this.component.updateOptions({ orientation: value });
}
constructor(private readonly component: IGridviewComponent) { }
constructor(private readonly component: IGridviewComponent) {}
/**
* Focus the component. Will try to focus an active panel if one exists.
@ -728,7 +729,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
return this.component.activeGroup;
}
constructor(private readonly component: IDockviewComponent) { }
constructor(private readonly component: IDockviewComponent) {}
/**
* Focus the component. Will try to focus an active panel if one exists.
@ -800,15 +801,9 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
*/
addFloatingGroup(
item: IDockviewPanel | DockviewGroupPanel,
coord?: { x: number; y: number },
options?: {
position?: AnchoredBox;
skipRemoveGroup?: boolean;
inDragMode?: boolean;
skipActiveGroup?: boolean;
}
options?: FloatingGroupOptions
): void {
return this.component.addFloatingGroup(item, coord, options);
return this.component.addFloatingGroup(item, options);
}
/**

26
packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
View File

@ -270,14 +270,11 @@ export class TabsContainer
const { top: rootTop, left: rootLeft } =
this.accessor.element.getBoundingClientRect();
this.accessor.addFloatingGroup(
this.group,
{
x: left - rootLeft + 20,
y: top - rootTop + 20,
},
{ inDragMode: true }
);
this.accessor.addFloatingGroup(this.group, {
x: left - rootLeft + 20,
y: top - rootTop + 20,
inDragMode: true,
});
}
}
),
@ -380,14 +377,11 @@ export class TabsContainer
const { top: rootTop, left: rootLeft } =
this.accessor.element.getBoundingClientRect();
this.accessor.addFloatingGroup(
panel as DockviewPanel,
{
x: left - rootLeft,
y: top - rootTop,
},
{ inDragMode: true }
);
this.accessor.addFloatingGroup(panel as DockviewPanel, {
x: left - rootLeft,
y: top - rootTop,
inDragMode: true,
});
return;
}

141
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -165,6 +165,17 @@ type MoveGroupOrPanelOptions = {
};
};
export interface FloatingGroupOptions {
x?: number;
y?: number;
height?: number;
width?: number;
position?: AnchoredBox;
skipRemoveGroup?: boolean;
inDragMode?: boolean;
skipActiveGroup?: boolean;
}
export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
readonly activePanel: IDockviewPanel | undefined;
readonly totalPanels: number;
@ -208,10 +219,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
//
addFloatingGroup(
item: IDockviewPanel | DockviewGroupPanel,
coord?: { x: number; y: number },
options?: {
position?: AnchoredBox
}
options?: FloatingGroupOptions
): void;
addPopoutGroup(
item: IDockviewPanel | DockviewGroupPanel,
@ -226,7 +234,8 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
export class DockviewComponent
extends BaseGrid<DockviewGroupPanel>
implements IDockviewComponent {
implements IDockviewComponent
{
private readonly nextGroupId = sequentialNumberGenerator();
private readonly _deserializer = new DefaultDockviewDeserialzier(this);
private readonly _api: DockviewApi;
@ -750,13 +759,7 @@ export class DockviewComponent
addFloatingGroup(
item: DockviewPanel | DockviewGroupPanel,
coord?: { x?: number; y?: number; height?: number; width?: number },
options?: {
position?: AnchoredBox;
skipRemoveGroup?: boolean;
inDragMode: boolean;
skipActiveGroup?: boolean;
}
options?: FloatingGroupOptions
): void {
let group: DockviewGroupPanel;
@ -820,27 +823,27 @@ export class DockviewComponent
function getAnchoredBox(): AnchoredBox {
if (options?.position) {
const result: any = {};
if ("left" in options.position) {
result.left = Math.max(options.position.left, 0)
} else if ("right" in options.position) {
result.right = Math.max(options.position.right, 0)
if ('left' in options.position) {
result.left = Math.max(options.position.left, 0);
} else if ('right' in options.position) {
result.right = Math.max(options.position.right, 0);
} else {
result.left = DEFAULT_FLOATING_GROUP_POSITION.left;
}
if ("top" in options.position) {
result.top = Math.max(options.position.top, 0)
} else if ("bottom" in options.position) {
result.bottom = Math.max(options.position.bottom, 0)
if ('top' in options.position) {
result.top = Math.max(options.position.top, 0);
} else if ('bottom' in options.position) {
result.bottom = Math.max(options.position.bottom, 0);
} else {
result.top = DEFAULT_FLOATING_GROUP_POSITION.top;
}
if ("width" in options.position) {
result.width = Math.max(options.position.width, 0)
if ('width' in options.position) {
result.width = Math.max(options.position.width, 0);
} else {
result.width = DEFAULT_FLOATING_GROUP_POSITION.width;
}
if ("height" in options.position) {
result.height = Math.max(options.position.height, 0)
if ('height' in options.position) {
result.height = Math.max(options.position.height, 0);
} else {
result.height = DEFAULT_FLOATING_GROUP_POSITION.height;
}
@ -848,19 +851,23 @@ export class DockviewComponent
}
return {
left: typeof coord?.x === 'number'
? Math.max(coord.x, 0)
: DEFAULT_FLOATING_GROUP_POSITION.left,
top: typeof coord?.y === 'number'
? Math.max(coord.y, 0)
: DEFAULT_FLOATING_GROUP_POSITION.top,
width: typeof coord?.width === 'number'
? Math.max(coord.width, 0)
: DEFAULT_FLOATING_GROUP_POSITION.width,
height: typeof coord?.height === 'number'
? Math.max(coord.height, 0)
: DEFAULT_FLOATING_GROUP_POSITION.height,
}
left:
typeof options?.x === 'number'
? Math.max(options.x, 0)
: DEFAULT_FLOATING_GROUP_POSITION.left,
top:
typeof options?.y === 'number'
? Math.max(options.y, 0)
: DEFAULT_FLOATING_GROUP_POSITION.top,
width:
typeof options?.width === 'number'
? Math.max(options.width, 0)
: DEFAULT_FLOATING_GROUP_POSITION.width,
height:
typeof options?.height === 'number'
? Math.max(options.height, 0)
: DEFAULT_FLOATING_GROUP_POSITION.height,
};
}
const anchoredBox = getAnchoredBox();
@ -873,14 +880,14 @@ export class DockviewComponent
this.options.floatingGroupBounds === 'boundedWithinViewport'
? undefined
: this.options.floatingGroupBounds
?.minimumWidthWithinViewport ??
DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
?.minimumWidthWithinViewport ??
DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
minimumInViewportHeight:
this.options.floatingGroupBounds === 'boundedWithinViewport'
? undefined
: this.options.floatingGroupBounds
?.minimumHeightWithinViewport ??
DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
?.minimumHeightWithinViewport ??
DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
});
const el = group.element.querySelector('.void-container');
@ -1231,11 +1238,11 @@ export class DockviewComponent
const group = createGroupFromSerializedState(data);
this.addFloatingGroup(
group,
undefined,
{ position: position, skipRemoveGroup: true, inDragMode: false }
);
this.addFloatingGroup(group, {
position: position,
skipRemoveGroup: true,
inDragMode: false,
});
}
const serializedPopoutGroups = data.popoutGroups ?? [];
@ -1372,7 +1379,7 @@ export class DockviewComponent
referenceGroup =
typeof options.position.referenceGroup === 'string'
? this._groups.get(options.position.referenceGroup)
?.value
?.value
: options.position.referenceGroup;
if (!referenceGroup) {
@ -1414,11 +1421,12 @@ export class DockviewComponent
const o =
typeof options.floating === 'object' &&
options.floating !== null
options.floating !== null
? options.floating
: {};
this.addFloatingGroup(group, o, {
this.addFloatingGroup(group, {
...o,
inDragMode: false,
skipRemoveGroup: true,
skipActiveGroup: true,
@ -1467,11 +1475,12 @@ export class DockviewComponent
const coordinates =
typeof options.floating === 'object' &&
options.floating !== null
options.floating !== null
? options.floating
: {};
this.addFloatingGroup(group, coordinates, {
this.addFloatingGroup(group, {
...coordinates,
inDragMode: false,
skipRemoveGroup: true,
skipActiveGroup: true,
@ -1505,9 +1514,9 @@ export class DockviewComponent
skipDispose: boolean;
skipSetActiveGroup?: boolean;
} = {
removeEmptyGroup: true,
skipDispose: false,
}
removeEmptyGroup: true,
skipDispose: false,
}
): void {
const group = panel.group;
@ -1572,8 +1581,8 @@ export class DockviewComponent
const referencePanel =
typeof options.referencePanel === 'string'
? this.panels.find(
(panel) => panel.id === options.referencePanel
)
(panel) => panel.id === options.referencePanel
)
: options.referencePanel;
if (!referencePanel) {
@ -1638,11 +1647,11 @@ export class DockviewComponent
group: DockviewGroupPanel,
options?:
| {
skipActive?: boolean;
skipDispose?: boolean;
skipPopoutAssociated?: boolean;
skipPopoutReturn?: boolean;
}
skipActive?: boolean;
skipDispose?: boolean;
skipPopoutAssociated?: boolean;
skipPopoutReturn?: boolean;
}
| undefined
): void {
this.doRemoveGroup(group, options);
@ -1652,11 +1661,11 @@ export class DockviewComponent
group: DockviewGroupPanel,
options?:
| {
skipActive?: boolean;
skipDispose?: boolean;
skipPopoutAssociated?: boolean;
skipPopoutReturn?: boolean;
}
skipActive?: boolean;
skipDispose?: boolean;
skipPopoutAssociated?: boolean;
skipPopoutReturn?: boolean;
}
| undefined
): DockviewGroupPanel {
const panels = [...group.panels]; // reassign since group panels will mutate

4
packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
View File

@ -65,13 +65,13 @@ const GroupAction = (props: {
}
onClick={() => {
if (group) {
props.api.addFloatingGroup(group, undefined, {
props.api.addFloatingGroup(group, {
position: {
width: 400,
height: 300,
top: 50,
right: 50,
}
},
});
}
}}

4
packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
View File

@ -29,13 +29,13 @@ const PanelAction = (props: {
onClick={() => {
const panel = props.api.getPanel(props.panelId);
if (panel) {
props.api.addFloatingGroup(panel, undefined, {
props.api.addFloatingGroup(panel, {
position: {
width: 400,
height: 300,
bottom: 50,
right: 50,
}
},
});
}
}}

17
packages/docs/sandboxes/react/dockview/floating-groups/src/app.tsx
View File

@ -217,8 +217,9 @@ export const DockviewPersistence = (props: { theme?: string }) => {
setDisableFloatingGroups((x) => !x);
}}
>
{`${disableFloatingGroups ? 'Enable' : 'Disable'
} floating groups`}
{`${
disableFloatingGroups ? 'Enable' : 'Disable'
} floating groups`}
</button>
</div>
<div
@ -258,11 +259,9 @@ const RightComponent = (props: IDockviewHeaderActionsProps) => {
);
React.useEffect(() => {
const disposable = props.group.api.onDidLocationChange(
(event) => {
setFloating(event.location.type === 'floating');
}
);
const disposable = props.group.api.onDidLocationChange((event) => {
setFloating(event.location.type === 'floating');
});
return () => {
disposable.dispose();
@ -274,13 +273,13 @@ const RightComponent = (props: IDockviewHeaderActionsProps) => {
const group = props.containerApi.addGroup();
props.group.api.moveTo({ group });
} else {
props.containerApi.addFloatingGroup(props.group, undefined, {
props.containerApi.addFloatingGroup(props.group, {
position: {
width: 400,
height: 300,
bottom: 50,
right: 50,
}
},
});
}
};

4
packages/docs/templates/dockview/demo-dockview/react/src/groupActions.tsx vendored
View File

@ -32,13 +32,13 @@ export const GroupActions = (props: {
onClick={() => {
const panel = props.api?.getGroup(x);
if (panel) {
props.api?.addFloatingGroup(panel, undefined, {
props.api?.addFloatingGroup(panel, {
position: {
width: 400,
height: 300,
bottom: 50,
right: 50,
}
},
});
}
}}

4
packages/docs/templates/dockview/demo-dockview/react/src/panelActions.tsx vendored
View File

@ -32,13 +32,13 @@ export const PanelActions = (props: {
onClick={() => {
const panel = props.api?.getPanel(x);
if (panel) {
props.api?.addFloatingGroup(panel, undefined, {
props.api?.addFloatingGroup(panel, {
position: {
width: 400,
height: 300,
bottom: 50,
right: 50,
}
},
});
}
}}

2
packages/docs/templates/dockview/floating-groups/react/src/app.tsx vendored
View File

@ -264,7 +264,7 @@ const RightComponent = (props: IDockviewHeaderActionsProps) => {
const group = props.containerApi.addGroup();
props.group.api.moveTo({ group });
} else {
props.containerApi.addFloatingGroup(props.group, undefined, {
props.containerApi.addFloatingGroup(props.group, {
position: {
width: 400,
height: 300,

4
packages/docs/templates/dockview/floating-groups/vue/src/index.ts vendored
View File

@ -93,13 +93,13 @@ const RightAction = defineComponent({
const group = this.params.containerApi.addGroup();
this.group.api.moveTo({ group });
} else {
this.containerApi.addFloatingGroup(this.params.group, undefined, {
this.containerApi.addFloatingGroup(this.params.group, {
position: {
width: 400,
height: 300,
bottom: 50,
right: 50,
}
},
});
}
},