From 83d0c350c123b6346f8492a510f531796421619a Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 18 Jul 2023 20:46:34 +0100 Subject: [PATCH 1/3] feat: link api resize events to overlay for floating panels --- .../dockview/dockviewComponent.spec.ts | 33 +++++++++++++++++++ .../src/dockview/dockviewComponent.ts | 6 ++++ 2 files changed, 39 insertions(+) diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 778df49d6..847372d8e 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -3787,4 +3787,37 @@ describe('dockviewComponent', () => { dockview.element.querySelectorAll('.view-container > .view').length ).toBe(0); }); + + test('that api.setSize applies to the overlay for floating panels', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + default: PanelContentPartTest, + }, + tabComponents: { + test_tab_id: PanelTabPartTest, + }, + orientation: Orientation.HORIZONTAL, + }); + + dockview.layout(1000, 500); + + const panel1 = dockview.addPanel({ + id: 'panel_1', + component: 'default', + floating: true, + }); + + panel1.api.setSize({ height: 123, width: 256 }); + + const items = dockview.element.querySelectorAll('.dv-resize-container'); + expect(items.length).toBe(1); + + const el = items[0] as HTMLElement; + + expect(el.style.height).toBe('123px'); + expect(el.style.width).toBe('256px'); + }); }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index d8c64938d..206b42a4e 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -373,6 +373,12 @@ export class DockviewComponent overlay.onDidChange(() => { this._bufferOnDidLayoutChange.fire(); }), + group.onDidChange((event) => { + overlay.setBounds({ + height: event?.height, + width: event?.width, + }); + }), { dispose: () => { group.model.isFloating = false; From 133ecbfccc4bc320e5f3fdb3ccde42cb7939b551 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 18 Jul 2023 20:47:10 +0100 Subject: [PATCH 2/3] feat: overlay resizing outside of main viewport but within bounds --- packages/dockview-core/src/dnd/overlay.ts | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/dockview-core/src/dnd/overlay.ts b/packages/dockview-core/src/dnd/overlay.ts index 6d818725a..36f8fb2d0 100644 --- a/packages/dockview-core/src/dnd/overlay.ts +++ b/packages/dockview-core/src/dnd/overlay.ts @@ -322,10 +322,15 @@ export class Overlay extends CompositeDisposable { let left: number | null = null; let width: number | null = null; - function moveTop() { + const minimumInViewportHeight = + this.options.minimumInViewportHeight; + const minimumInViewportWidth = + this.options.minimumInViewportWidth; + + function moveTop(): void { top = clamp( y, - 0, + -minimumInViewportHeight, Math.max( 0, startPosition!.originalY + @@ -339,7 +344,7 @@ export class Overlay extends CompositeDisposable { top; } - function moveBottom() { + function moveBottom(): void { top = startPosition!.originalY - startPosition!.originalHeight; @@ -351,15 +356,16 @@ export class Overlay extends CompositeDisposable { 0, containerRect.height - startPosition!.originalY + - startPosition!.originalHeight + startPosition!.originalHeight + + minimumInViewportHeight ) ); } - function moveLeft() { + function moveLeft(): void { left = clamp( x, - 0, + -minimumInViewportWidth, Math.max( 0, startPosition!.originalX + @@ -373,7 +379,7 @@ export class Overlay extends CompositeDisposable { left; } - function moveRight() { + function moveRight(): void { left = startPosition!.originalX - startPosition!.originalWidth; @@ -384,7 +390,8 @@ export class Overlay extends CompositeDisposable { 0, containerRect.width - startPosition!.originalX + - startPosition!.originalWidth + startPosition!.originalWidth + + minimumInViewportWidth ) ); } From 1dd839272607f578b09841d82fe007640c5a4a59 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 19 Jul 2023 21:30:16 +0100 Subject: [PATCH 3/3] feat: adjust floating group boundaries --- packages/dockview-core/src/dnd/overlay.ts | 64 ++++++++++++----------- 1 file changed, 34 insertions(+), 30 deletions(-) diff --git a/packages/dockview-core/src/dnd/overlay.ts b/packages/dockview-core/src/dnd/overlay.ts index 36f8fb2d0..f9c52753e 100644 --- a/packages/dockview-core/src/dnd/overlay.ts +++ b/packages/dockview-core/src/dnd/overlay.ts @@ -330,13 +330,18 @@ export class Overlay extends CompositeDisposable { function moveTop(): void { top = clamp( y, - -minimumInViewportHeight, - Math.max( - 0, - startPosition!.originalY + - startPosition!.originalHeight - - Overlay.MINIMUM_HEIGHT - ) + -Number.MAX_VALUE, + startPosition!.originalY + + startPosition!.originalHeight > + containerRect.height + ? containerRect.height - + minimumInViewportHeight + : Math.max( + 0, + startPosition!.originalY + + startPosition!.originalHeight - + Overlay.MINIMUM_HEIGHT + ) ); height = startPosition!.originalY + @@ -351,28 +356,30 @@ export class Overlay extends CompositeDisposable { height = clamp( y - top, - Overlay.MINIMUM_HEIGHT, - Math.max( - 0, - containerRect.height - - startPosition!.originalY + - startPosition!.originalHeight + - minimumInViewportHeight - ) + top < 0 + ? -top + minimumInViewportHeight + : Overlay.MINIMUM_HEIGHT, + Number.MAX_VALUE ); } function moveLeft(): void { left = clamp( x, - -minimumInViewportWidth, - Math.max( - 0, - startPosition!.originalX + - startPosition!.originalWidth - - Overlay.MINIMUM_WIDTH - ) + -Number.MAX_VALUE, + startPosition!.originalX + + startPosition!.originalWidth > + containerRect.width + ? containerRect.width - + minimumInViewportWidth + : Math.max( + 0, + startPosition!.originalX + + startPosition!.originalWidth - + Overlay.MINIMUM_WIDTH + ) ); + width = startPosition!.originalX + startPosition!.originalWidth - @@ -383,16 +390,13 @@ export class Overlay extends CompositeDisposable { left = startPosition!.originalX - startPosition!.originalWidth; + width = clamp( x - left, - Overlay.MINIMUM_WIDTH, - Math.max( - 0, - containerRect.width - - startPosition!.originalX + - startPosition!.originalWidth + - minimumInViewportWidth - ) + left < 0 + ? -left + minimumInViewportWidth + : Overlay.MINIMUM_WIDTH, + Number.MAX_VALUE ); }