diff --git a/packages/dockview-core/src/api/component.api.ts b/packages/dockview-core/src/api/component.api.ts index fe7d5c2d3..cae19f9b1 100644 --- a/packages/dockview-core/src/api/component.api.ts +++ b/packages/dockview-core/src/api/component.api.ts @@ -678,10 +678,20 @@ export class DockviewApi implements CommonApi { return this.component.onDidRemovePanel; } + /** + * Invoked when a panel is moved + */ get onDidMovePanel(): Event { return this.component.onDidMovePanel; } + /** + * Invoked when a floating group is repositioned. + */ + get onDidRepositionFloatingGroup(): Event { + return this.component.onDidRepositionFloatingGroup; + } + /** * Invoked after a layout is deserialzied using the `fromJSON` method. */ diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 27e95fc52..7423c8eb4 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -183,6 +183,7 @@ export interface IDockviewComponent extends IBaseGrid { readonly onDidActiveGroupChange: Event; readonly onUnhandledDragOverEvent: Event; readonly onDidMovePanel: Event; + readonly onDidRepositionFloatingGroup: Event; readonly options: DockviewComponentOptions; updateOptions(options: DockviewOptions): void; moveGroupOrPanel(options: MoveGroupOrPanelOptions): void; @@ -298,6 +299,11 @@ export class DockviewComponent readonly onDidActiveGroupChange: Event = this._onDidActiveGroupChange.event; + private readonly _onDidRepositionFloatingGroup = + new Emitter(); + readonly onDidRepositionFloatingGroup: Event = + this._onDidRepositionFloatingGroup.event; + get orientation(): Orientation { return this.gridview.orientation; } @@ -407,7 +413,8 @@ export class DockviewComponent this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, - this.onDidActivePanelChange + this.onDidActivePanelChange, + this.onDidRepositionFloatingGroup )(() => { this._bufferOnDidLayoutChange.fire(); }), @@ -964,7 +971,7 @@ export class DockviewComponent group.layout(group.width, group.height); }), overlay.onDidChangeEnd(() => { - this._bufferOnDidLayoutChange.fire(); + this._onDidRepositionFloatingGroup.fire(group); }), group.onDidChange((event) => { overlay.setBounds({ diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx index e2449a4ab..a52004494 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx @@ -202,6 +202,10 @@ const DockviewDemo = (props: { theme?: string }) => { addLogLine(`Group Added ${event.id}`); }); + event.api.onDidRepositionFloatingGroup((event) => { + addLogLine(`Floating Group repositioned ${event.id}`); + }); + event.api.onDidMovePanel((event) => { addLogLine(`Panel Moved ${event.panel.id}`); });