dockview-core 1.15.3 → 1.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist/cjs/api/component.api.d.ts +32 -6
  2. package/dist/cjs/api/component.api.js +42 -6
  3. package/dist/cjs/api/dockviewPanelApi.d.ts +1 -1
  4. package/dist/cjs/api/entryPoints.d.ts +9 -0
  5. package/dist/cjs/api/entryPoints.js +28 -0
  6. package/dist/cjs/dnd/abstractDragHandler.js +2 -65
  7. package/dist/cjs/dockview/components/titlebar/voidContainer.js +1 -1
  8. package/dist/cjs/dockview/dockviewComponent.d.ts +4 -2
  9. package/dist/cjs/dockview/dockviewComponent.js +60 -17
  10. package/dist/cjs/dockview/dockviewFloatingGroupPanel.d.ts +1 -1
  11. package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts +1 -1
  12. package/dist/cjs/dockview/dockviewGroupPanelModel.js +1 -1
  13. package/dist/cjs/dockview/dockviewPanel.d.ts +1 -1
  14. package/dist/cjs/dockview/dockviewPanel.js +1 -1
  15. package/dist/cjs/dockview/options.d.ts +2 -2
  16. package/dist/cjs/dockview/options.js +1 -0
  17. package/dist/cjs/dockview/types.d.ts +1 -1
  18. package/dist/cjs/dom.d.ts +3 -0
  19. package/dist/cjs/dom.js +66 -1
  20. package/dist/cjs/gridview/baseComponentGridview.d.ts +5 -2
  21. package/dist/cjs/gridview/baseComponentGridview.js +54 -3
  22. package/dist/cjs/gridview/gridviewComponent.d.ts +3 -4
  23. package/dist/cjs/gridview/gridviewComponent.js +4 -2
  24. package/dist/cjs/gridview/options.d.ts +1 -1
  25. package/dist/cjs/index.d.ts +2 -1
  26. package/dist/cjs/index.js +6 -1
  27. package/dist/cjs/{dnd → overlay}/overlay.d.ts +3 -0
  28. package/dist/cjs/{dnd → overlay}/overlay.js +41 -82
  29. package/dist/cjs/{overlayRenderContainer.d.ts → overlay/overlayRenderContainer.d.ts} +7 -5
  30. package/dist/cjs/{overlayRenderContainer.js → overlay/overlayRenderContainer.js} +41 -6
  31. package/dist/cjs/paneview/options.d.ts +1 -1
  32. package/dist/cjs/paneview/paneviewComponent.d.ts +2 -1
  33. package/dist/cjs/paneview/paneviewComponent.js +68 -19
  34. package/dist/cjs/splitview/options.d.ts +1 -1
  35. package/dist/cjs/splitview/splitview.js +64 -71
  36. package/dist/cjs/splitview/splitviewComponent.d.ts +5 -5
  37. package/dist/cjs/splitview/splitviewComponent.js +70 -21
  38. package/dist/dockview-core.amd.js +301 -98
  39. package/dist/dockview-core.amd.js.map +1 -1
  40. package/dist/dockview-core.amd.min.js +2 -2
  41. package/dist/dockview-core.amd.min.js.map +1 -1
  42. package/dist/dockview-core.amd.min.noStyle.js +2 -2
  43. package/dist/dockview-core.amd.min.noStyle.js.map +1 -1
  44. package/dist/dockview-core.amd.noStyle.js +300 -97
  45. package/dist/dockview-core.amd.noStyle.js.map +1 -1
  46. package/dist/dockview-core.cjs.js +301 -98
  47. package/dist/dockview-core.cjs.js.map +1 -1
  48. package/dist/dockview-core.esm.js +298 -99
  49. package/dist/dockview-core.esm.js.map +1 -1
  50. package/dist/dockview-core.esm.min.js +2 -2
  51. package/dist/dockview-core.esm.min.js.map +1 -1
  52. package/dist/dockview-core.js +301 -98
  53. package/dist/dockview-core.js.map +1 -1
  54. package/dist/dockview-core.min.js +2 -2
  55. package/dist/dockview-core.min.js.map +1 -1
  56. package/dist/dockview-core.min.noStyle.js +2 -2
  57. package/dist/dockview-core.min.noStyle.js.map +1 -1
  58. package/dist/dockview-core.noStyle.js +300 -97
  59. package/dist/dockview-core.noStyle.js.map +1 -1
  60. package/dist/esm/api/component.api.d.ts +32 -6
  61. package/dist/esm/api/component.api.js +42 -6
  62. package/dist/esm/api/dockviewPanelApi.d.ts +1 -1
  63. package/dist/esm/api/entryPoints.d.ts +9 -0
  64. package/dist/esm/api/entryPoints.js +21 -0
  65. package/dist/esm/dnd/abstractDragHandler.js +3 -11
  66. package/dist/esm/dockview/components/panel/content.js +1 -1
  67. package/dist/esm/dockview/components/titlebar/voidContainer.js +1 -1
  68. package/dist/esm/dockview/dockviewComponent.d.ts +4 -2
  69. package/dist/esm/dockview/dockviewComponent.js +48 -13
  70. package/dist/esm/dockview/dockviewFloatingGroupPanel.d.ts +1 -1
  71. package/dist/esm/dockview/dockviewGroupPanelModel.d.ts +1 -1
  72. package/dist/esm/dockview/dockviewGroupPanelModel.js +1 -1
  73. package/dist/esm/dockview/dockviewPanel.d.ts +1 -1
  74. package/dist/esm/dockview/dockviewPanel.js +1 -1
  75. package/dist/esm/dockview/options.d.ts +2 -2
  76. package/dist/esm/dockview/options.js +1 -0
  77. package/dist/esm/dockview/types.d.ts +1 -1
  78. package/dist/esm/dom.d.ts +3 -0
  79. package/dist/esm/dom.js +20 -0
  80. package/dist/esm/gridview/baseComponentGridview.d.ts +5 -2
  81. package/dist/esm/gridview/baseComponentGridview.js +19 -0
  82. package/dist/esm/gridview/gridviewComponent.d.ts +3 -4
  83. package/dist/esm/gridview/gridviewComponent.js +4 -2
  84. package/dist/esm/gridview/options.d.ts +1 -1
  85. package/dist/esm/index.d.ts +2 -1
  86. package/dist/esm/index.js +1 -0
  87. package/dist/esm/{dnd → overlay}/overlay.d.ts +3 -0
  88. package/dist/esm/{dnd → overlay}/overlay.js +36 -32
  89. package/dist/esm/{overlayRenderContainer.d.ts → overlay/overlayRenderContainer.d.ts} +7 -5
  90. package/dist/esm/{overlayRenderContainer.js → overlay/overlayRenderContainer.js} +39 -6
  91. package/dist/esm/paneview/options.d.ts +1 -1
  92. package/dist/esm/paneview/paneviewComponent.d.ts +2 -1
  93. package/dist/esm/paneview/paneviewComponent.js +19 -2
  94. package/dist/esm/splitview/options.d.ts +1 -1
  95. package/dist/esm/splitview/splitview.js +37 -27
  96. package/dist/esm/splitview/splitviewComponent.d.ts +5 -5
  97. package/dist/esm/splitview/splitviewComponent.js +19 -2
  98. package/dist/styles/dockview.css +78 -82
  99. package/package.json +1 -1
@@ -1,12 +1,12 @@
1
1
  import { FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDockview } from '../dockview/dockviewComponent';
2
- import { AddGroupOptions, AddPanelOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
2
+ import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
3
3
  import { Parameters } from '../panel/types';
4
4
  import { Direction } from '../gridview/baseComponentGridview';
5
5
  import { AddComponentOptions, IGridviewComponent, SerializedGridviewComponent } from '../gridview/gridviewComponent';
6
6
  import { IGridviewPanel } from '../gridview/gridviewPanel';
7
7
  import { AddPaneviewComponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
8
8
  import { IPaneviewPanel } from '../paneview/paneviewPanel';
9
- import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
9
+ import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview } from '../splitview/splitviewComponent';
10
10
  import { IView, Orientation, Sizing } from '../splitview/splitview';
11
11
  import { ISplitviewPanel } from '../splitview/splitviewPanel';
12
12
  import { DockviewGroupPanel, IDockviewGroupPanel } from '../dockview/dockviewGroupPanel';
@@ -16,6 +16,9 @@ import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
16
16
  import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
17
17
  import { Box } from '../types';
18
18
  import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from '../dockview/dockviewGroupPanelModel';
19
+ import { PaneviewComponentOptions } from '../paneview/options';
20
+ import { SplitviewComponentOptions } from '../splitview/options';
21
+ import { GridviewComponentOptions } from '../gridview/options';
19
22
  export interface CommonApi<T = any> {
20
23
  readonly height: number;
21
24
  readonly width: number;
@@ -26,6 +29,7 @@ export interface CommonApi<T = any> {
26
29
  fromJSON(data: T): void;
27
30
  toJSON(): T;
28
31
  clear(): void;
32
+ dispose(): void;
29
33
  }
30
34
  export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
31
35
  private readonly component;
@@ -75,10 +79,6 @@ export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
75
79
  */
76
80
  get onDidRemoveView(): Event<IView>;
77
81
  constructor(component: ISplitviewComponent);
78
- /**
79
- * Update configuratable options.
80
- */
81
- updateOptions(options: SplitviewComponentUpdateOptions): void;
82
82
  /**
83
83
  * Removes an existing panel and optionally provide a `Sizing` method
84
84
  * for the subsequent resize.
@@ -114,6 +114,14 @@ export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
114
114
  * Remove all panels and clear the component.
115
115
  */
116
116
  clear(): void;
117
+ /**
118
+ * Update configuratable options.
119
+ */
120
+ updateOptions(options: Partial<SplitviewComponentOptions>): void;
121
+ /**
122
+ * Release resources and teardown component. Do not call when using framework versions of dockview.
123
+ */
124
+ dispose(): void;
117
125
  }
118
126
  export declare class PaneviewApi implements CommonApi<SerializedPaneview> {
119
127
  private readonly component;
@@ -194,6 +202,14 @@ export declare class PaneviewApi implements CommonApi<SerializedPaneview> {
194
202
  * Reset the component back to an empty and default state.
195
203
  */
196
204
  clear(): void;
205
+ /**
206
+ * Update configuratable options.
207
+ */
208
+ updateOptions(options: Partial<PaneviewComponentOptions>): void;
209
+ /**
210
+ * Release resources and teardown component. Do not call when using framework versions of dockview.
211
+ */
212
+ dispose(): void;
197
213
  }
198
214
  export declare class GridviewApi implements CommonApi<SerializedGridviewComponent> {
199
215
  private readonly component;
@@ -291,6 +307,11 @@ export declare class GridviewApi implements CommonApi<SerializedGridviewComponen
291
307
  * Reset the component back to an empty and default state.
292
308
  */
293
309
  clear(): void;
310
+ updateOptions(options: Partial<GridviewComponentOptions>): void;
311
+ /**
312
+ * Release resources and teardown component. Do not call when using framework versions of dockview.
313
+ */
314
+ dispose(): void;
294
315
  }
295
316
  export declare class DockviewApi implements CommonApi<SerializedDockview> {
296
317
  private readonly component;
@@ -493,4 +514,9 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
493
514
  }) => void;
494
515
  }): Promise<void>;
495
516
  setGap(gap: number | undefined): void;
517
+ updateOptions(options: Partial<DockviewComponentOptions>): void;
518
+ /**
519
+ * Release resources and teardown component. Do not call when using framework versions of dockview.
520
+ */
521
+ dispose(): void;
496
522
  }
@@ -70,12 +70,6 @@ export class SplitviewApi {
70
70
  constructor(component) {
71
71
  this.component = component;
72
72
  }
73
- /**
74
- * Update configuratable options.
75
- */
76
- updateOptions(options) {
77
- this.component.updateOptions(options);
78
- }
79
73
  /**
80
74
  * Removes an existing panel and optionally provide a `Sizing` method
81
75
  * for the subsequent resize.
@@ -129,6 +123,18 @@ export class SplitviewApi {
129
123
  clear() {
130
124
  this.component.clear();
131
125
  }
126
+ /**
127
+ * Update configuratable options.
128
+ */
129
+ updateOptions(options) {
130
+ this.component.updateOptions(options);
131
+ }
132
+ /**
133
+ * Release resources and teardown component. Do not call when using framework versions of dockview.
134
+ */
135
+ dispose() {
136
+ this.component.dispose();
137
+ }
132
138
  }
133
139
  export class PaneviewApi {
134
140
  /**
@@ -256,6 +262,18 @@ export class PaneviewApi {
256
262
  clear() {
257
263
  this.component.clear();
258
264
  }
265
+ /**
266
+ * Update configuratable options.
267
+ */
268
+ updateOptions(options) {
269
+ this.component.updateOptions(options);
270
+ }
271
+ /**
272
+ * Release resources and teardown component. Do not call when using framework versions of dockview.
273
+ */
274
+ dispose() {
275
+ this.component.dispose();
276
+ }
259
277
  }
260
278
  export class GridviewApi {
261
279
  /**
@@ -396,6 +414,15 @@ export class GridviewApi {
396
414
  clear() {
397
415
  this.component.clear();
398
416
  }
417
+ updateOptions(options) {
418
+ this.component.updateOptions(options);
419
+ }
420
+ /**
421
+ * Release resources and teardown component. Do not call when using framework versions of dockview.
422
+ */
423
+ dispose() {
424
+ this.component.dispose();
425
+ }
399
426
  }
400
427
  export class DockviewApi {
401
428
  /**
@@ -688,4 +715,13 @@ export class DockviewApi {
688
715
  setGap(gap) {
689
716
  this.component.updateOptions({ gap });
690
717
  }
718
+ updateOptions(options) {
719
+ this.component.updateOptions(options);
720
+ }
721
+ /**
722
+ * Release resources and teardown component. Do not call when using framework versions of dockview.
723
+ */
724
+ dispose() {
725
+ this.component.dispose();
726
+ }
691
727
  }
@@ -4,7 +4,7 @@ import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
4
4
  import { DockviewPanel } from '../dockview/dockviewPanel';
5
5
  import { DockviewComponent } from '../dockview/dockviewComponent';
6
6
  import { Position } from '../dnd/droptarget';
7
- import { DockviewPanelRenderer } from '../overlayRenderContainer';
7
+ import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
8
8
  import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi';
9
9
  import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
10
10
  export interface TitleEvent {
@@ -0,0 +1,9 @@
1
+ import { DockviewApi, GridviewApi, PaneviewApi, SplitviewApi } from '../api/component.api';
2
+ import { DockviewComponentOptions } from '../dockview/options';
3
+ import { GridviewComponentOptions } from '../gridview/options';
4
+ import { PaneviewComponentOptions } from '../paneview/options';
5
+ import { SplitviewComponentOptions } from '../splitview/options';
6
+ export declare function createDockview(element: HTMLElement, options: DockviewComponentOptions): DockviewApi;
7
+ export declare function createSplitview(element: HTMLElement, options: SplitviewComponentOptions): SplitviewApi;
8
+ export declare function createGridview(element: HTMLElement, options: GridviewComponentOptions): GridviewApi;
9
+ export declare function createPaneview(element: HTMLElement, options: PaneviewComponentOptions): PaneviewApi;
@@ -0,0 +1,21 @@
1
+ import { GridviewApi, PaneviewApi, SplitviewApi, } from '../api/component.api';
2
+ import { DockviewComponent } from '../dockview/dockviewComponent';
3
+ import { GridviewComponent } from '../gridview/gridviewComponent';
4
+ import { PaneviewComponent } from '../paneview/paneviewComponent';
5
+ import { SplitviewComponent } from '../splitview/splitviewComponent';
6
+ export function createDockview(element, options) {
7
+ const component = new DockviewComponent(element, options);
8
+ return component.api;
9
+ }
10
+ export function createSplitview(element, options) {
11
+ const component = new SplitviewComponent(element, options);
12
+ return new SplitviewApi(component);
13
+ }
14
+ export function createGridview(element, options) {
15
+ const component = new GridviewComponent(element, options);
16
+ return new GridviewApi(component);
17
+ }
18
+ export function createPaneview(element, options) {
19
+ const component = new PaneviewComponent(element, options);
20
+ return new PaneviewApi(component);
21
+ }
@@ -1,4 +1,4 @@
1
- import { getElementsByTagName } from '../dom';
1
+ import { disableIframePointEvents } from '../dom';
2
2
  import { addDisposableListener, Emitter } from '../events';
3
3
  import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
4
4
  export class DragHandler extends CompositeDisposable {
@@ -21,20 +21,12 @@ export class DragHandler extends CompositeDisposable {
21
21
  event.preventDefault();
22
22
  return;
23
23
  }
24
- const iframes = [
25
- ...getElementsByTagName('iframe'),
26
- ...getElementsByTagName('webview'),
27
- ];
24
+ const iframes = disableIframePointEvents();
28
25
  this.pointerEventsDisposable.value = {
29
26
  dispose: () => {
30
- for (const iframe of iframes) {
31
- iframe.style.pointerEvents = 'auto';
32
- }
27
+ iframes.release();
33
28
  },
34
29
  };
35
- for (const iframe of iframes) {
36
- iframe.style.pointerEvents = 'none';
37
- }
38
30
  this.el.classList.add('dv-dragged');
39
31
  setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
40
32
  this.dataDisposable.value = this.getData(event);
@@ -1,5 +1,5 @@
1
1
  import { CompositeDisposable, MutableDisposable, } from '../../../lifecycle';
2
- import { Emitter } from '../../../events';
2
+ import { Emitter, } from '../../../events';
3
3
  import { trackFocus } from '../../../dom';
4
4
  import { Droptarget } from '../../../dnd/droptarget';
5
5
  import { getPanelData } from '../../../dnd/dataTransfer';
@@ -20,7 +20,7 @@ export class VoidContainer extends CompositeDisposable {
20
20
  this._element.className = 'void-container';
21
21
  this._element.tabIndex = 0;
22
22
  this._element.draggable = true;
23
- this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
23
+ this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
24
24
  this.accessor.doSetGroupActive(this.group);
25
25
  }));
26
26
  const handler = new GroupDragHandler(this._element, accessor, group);
@@ -10,9 +10,10 @@ import { Orientation } from '../splitview/splitview';
10
10
  import { GroupOptions, GroupPanelViewState, DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from './dockviewGroupPanelModel';
11
11
  import { DockviewGroupPanel } from './dockviewGroupPanel';
12
12
  import { Parameters } from '../panel/types';
13
+ import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
13
14
  import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
14
15
  import { AnchoredBox, AnchorPosition, Box } from '../types';
15
- import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlayRenderContainer';
16
+ import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlay/overlayRenderContainer';
16
17
  export interface PanelReference {
17
18
  update: (event: {
18
19
  params: {
@@ -176,7 +177,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
176
177
  get renderer(): DockviewPanelRenderer;
177
178
  get api(): DockviewApi;
178
179
  get gap(): number;
179
- constructor(options: DockviewComponentOptions);
180
+ get floatingGroups(): DockviewFloatingGroupPanel[];
181
+ constructor(parentElement: HTMLElement, options: DockviewComponentOptions);
180
182
  addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: {
181
183
  skipRemoveGroup?: boolean;
182
184
  position?: Box;
@@ -15,11 +15,11 @@ import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEve
15
15
  import { DockviewGroupPanel } from './dockviewGroupPanel';
16
16
  import { DockviewPanelModel } from './dockviewPanelModel';
17
17
  import { getPanelData } from '../dnd/dataTransfer';
18
- import { Overlay } from '../dnd/overlay';
18
+ import { Overlay } from '../overlay/overlay';
19
19
  import { addTestId, toggleClass, watchElementResize } from '../dom';
20
20
  import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
21
21
  import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, } from '../constants';
22
- import { OverlayRenderContainer, } from '../overlayRenderContainer';
22
+ import { OverlayRenderContainer, } from '../overlay/overlayRenderContainer';
23
23
  import { PopoutWindow } from '../popoutWindow';
24
24
  const DEFAULT_ROOT_OVERLAY_MODEL = {
25
25
  activationSize: { type: 'pixels', value: 10 },
@@ -88,7 +88,10 @@ export class DockviewComponent extends BaseGrid {
88
88
  get gap() {
89
89
  return this.gridview.margin;
90
90
  }
91
- constructor(options) {
91
+ get floatingGroups() {
92
+ return this._floatingGroups;
93
+ }
94
+ constructor(parentElement, options) {
92
95
  var _a;
93
96
  super({
94
97
  proportionalLayout: true,
@@ -96,10 +99,11 @@ export class DockviewComponent extends BaseGrid {
96
99
  styles: options.hideBorders
97
100
  ? { separatorBorder: 'transparent' }
98
101
  : undefined,
99
- parentElement: options.parentElement,
102
+ parentElement: parentElement,
100
103
  disableAutoResizing: options.disableAutoResizing,
101
104
  locked: options.locked,
102
105
  margin: options.gap,
106
+ className: options.className,
103
107
  });
104
108
  this.nextGroupId = sequentialNumberGenerator();
105
109
  this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -135,10 +139,10 @@ export class DockviewComponent extends BaseGrid {
135
139
  this._onDidActiveGroupChange = new Emitter();
136
140
  this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
137
141
  this._moving = false;
138
- const gready = document.createElement('div');
139
- gready.className = 'dv-overlay-render-container';
140
- this.gridview.element.appendChild(gready);
141
- this.overlayRenderContainer = new OverlayRenderContainer(gready);
142
+ // const gready = document.createElement('div');
143
+ // gready.className = 'dv-overlay-render-container';
144
+ // this.gridview.element.appendChild(gready);
145
+ this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
142
146
  toggleClass(this.gridview.element, 'dv-dockview', true);
143
147
  toggleClass(this.element, 'dv-debug', !!options.debug);
144
148
  this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
@@ -304,7 +308,7 @@ export class DockviewComponent extends BaseGrid {
304
308
  }
305
309
  const gready = document.createElement('div');
306
310
  gready.className = 'dv-overlay-render-container';
307
- const overlayRenderContainer = new OverlayRenderContainer(gready);
311
+ const overlayRenderContainer = new OverlayRenderContainer(gready, this);
308
312
  const referenceGroup = itemToPopout instanceof DockviewPanel
309
313
  ? itemToPopout.group
310
314
  : itemToPopout;
@@ -453,7 +457,6 @@ export class DockviewComponent extends BaseGrid {
453
457
  }
454
458
  }
455
459
  }
456
- group.model.location = { type: 'floating' };
457
460
  function getAnchoredBox() {
458
461
  if (options === null || options === void 0 ? void 0 : options.position) {
459
462
  const result = {};
@@ -520,10 +523,14 @@ export class DockviewComponent extends BaseGrid {
520
523
  : false,
521
524
  });
522
525
  const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
523
- const disposable = watchElementResize(group.element, (entry) => {
526
+ const disposable = new CompositeDisposable(group.api.onDidActiveChange((event) => {
527
+ if (event.isActive) {
528
+ overlay.bringToFront();
529
+ }
530
+ }), watchElementResize(group.element, (entry) => {
524
531
  const { width, height } = entry.contentRect;
525
532
  group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
526
- });
533
+ }));
527
534
  floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
528
535
  // this is either a resize or a move
529
536
  // to inform the panels .layout(...) the group with it's current size
@@ -539,12 +546,13 @@ export class DockviewComponent extends BaseGrid {
539
546
  }), {
540
547
  dispose: () => {
541
548
  disposable.dispose();
542
- group.model.location = { type: 'grid' };
543
549
  remove(this._floatingGroups, floatingGroupPanel);
550
+ group.model.location = { type: 'grid' };
544
551
  this.updateWatermark();
545
552
  },
546
553
  });
547
554
  this._floatingGroups.push(floatingGroupPanel);
555
+ group.model.location = { type: 'floating' };
548
556
  if (!(options === null || options === void 0 ? void 0 : options.skipActiveGroup)) {
549
557
  this.doSetGroupAndPanelActive(group);
550
558
  }
@@ -585,6 +593,7 @@ export class DockviewComponent extends BaseGrid {
585
593
  }
586
594
  updateOptions(options) {
587
595
  var _a, _b;
596
+ super.updateOptions(options);
588
597
  const changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
589
598
  options.floatingGroupBounds !== this.options.floatingGroupBounds;
590
599
  const changed_rootOverlayOptions = 'rootOverlayModel' in options &&
@@ -1128,6 +1137,7 @@ export class DockviewComponent extends BaseGrid {
1128
1137
  this._groups.delete(group.id);
1129
1138
  this._onDidRemoveGroup.fire(group);
1130
1139
  }
1140
+ remove(this._popoutGroups, selectedGroup);
1131
1141
  const removedGroup = selectedGroup.disposable.dispose();
1132
1142
  if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
1133
1143
  this.doAddGroup(removedGroup, [0]);
@@ -1239,6 +1249,31 @@ export class DockviewComponent extends BaseGrid {
1239
1249
  return;
1240
1250
  }
1241
1251
  }
1252
+ if (sourceGroup.api.location.type === 'popout') {
1253
+ /**
1254
+ * the source group is a popout group with a single panel
1255
+ *
1256
+ * 1. remove the panel from the group without triggering any events
1257
+ * 2. remove the popout group
1258
+ * 3. create a new group at the requested location and add that panel
1259
+ */
1260
+ const popoutGroup = this._popoutGroups.find((group) => group.popoutGroup === sourceGroup);
1261
+ const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
1262
+ skipSetActive: true,
1263
+ skipSetActiveGroup: true,
1264
+ }));
1265
+ this.doRemoveGroup(sourceGroup, { skipActive: true });
1266
+ const newGroup = this.createGroupAtLocation(targetLocation);
1267
+ this.movingLock(() => newGroup.model.openPanel(removedPanel, {
1268
+ skipSetActive: true,
1269
+ }));
1270
+ this.doSetGroupAndPanelActive(newGroup);
1271
+ this._onDidMovePanel.fire({
1272
+ panel: this.getGroupPanel(sourceItemId),
1273
+ from: sourceGroup,
1274
+ });
1275
+ return;
1276
+ }
1242
1277
  // source group will become empty so delete the group
1243
1278
  const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
1244
1279
  skipActive: true,
@@ -1,4 +1,4 @@
1
- import { Overlay } from '../dnd/overlay';
1
+ import { Overlay } from '../overlay/overlay';
2
2
  import { CompositeDisposable } from '../lifecycle';
3
3
  import { AnchoredBox } from '../types';
4
4
  import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
@@ -10,7 +10,7 @@ import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContaine
10
10
  import { DockviewGroupPanel } from './dockviewGroupPanel';
11
11
  import { IDockviewPanel } from './dockviewPanel';
12
12
  import { DockviewDndOverlayEvent } from './options';
13
- import { OverlayRenderContainer } from '../overlayRenderContainer';
13
+ import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
14
14
  import { TitleEvent } from '../api/dockviewPanelApi';
15
15
  interface GroupMoveEvent {
16
16
  groupId: string;
@@ -533,7 +533,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
533
533
  group: this.groupPanel,
534
534
  });
535
535
  this.watermark = watermark;
536
- addDisposableListener(this.watermark.element, 'click', () => {
536
+ addDisposableListener(this.watermark.element, 'pointerdown', () => {
537
537
  if (!this.isActive) {
538
538
  this.accessor.doSetGroupActive(this.groupPanel);
539
539
  }
@@ -6,7 +6,7 @@ import { CompositeDisposable, IDisposable } from '../lifecycle';
6
6
  import { IPanel, PanelUpdateEvent, Parameters } from '../panel/types';
7
7
  import { IDockviewPanelModel } from './dockviewPanelModel';
8
8
  import { DockviewComponent } from './dockviewComponent';
9
- import { DockviewPanelRenderer } from '../overlayRenderContainer';
9
+ import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
10
10
  export interface IDockviewPanel extends IDisposable, IPanel {
11
11
  readonly view: IDockviewPanelModel;
12
12
  readonly group: DockviewGroupPanel;
@@ -30,7 +30,7 @@ export class DockviewPanel extends CompositeDisposable {
30
30
  // forward the resize event to the group since if you want to resize a panel
31
31
  // you are actually just resizing the panels parent which is the group
32
32
  this.group.api.setSize(event);
33
- }), this.api.onDidRendererChange((event) => {
33
+ }), this.api.onDidRendererChange(() => {
34
34
  this.group.model.rerender(this);
35
35
  }));
36
36
  }
@@ -9,7 +9,7 @@ import { IDisposable } from '../lifecycle';
9
9
  import { DroptargetOverlayModel, Position } from '../dnd/droptarget';
10
10
  import { DockviewGroupDropLocation, GroupOptions } from './dockviewGroupPanelModel';
11
11
  import { IDockviewPanel } from './dockviewPanel';
12
- import { DockviewPanelRenderer } from '../overlayRenderContainer';
12
+ import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
13
13
  import { IGroupHeaderProps } from './framework';
14
14
  import { FloatingGroupOptions } from './dockviewComponent';
15
15
  export interface IHeaderActionsRenderer extends IDisposable {
@@ -44,6 +44,7 @@ export interface DockviewOptions {
44
44
  rootOverlayModel?: DroptargetOverlayModel;
45
45
  locked?: boolean;
46
46
  disableDnd?: boolean;
47
+ className?: string;
47
48
  /**
48
49
  * Pixel gap between groups
49
50
  */
@@ -71,7 +72,6 @@ export declare class DockviewUnhandledDragOverEvent implements DockviewDndOverla
71
72
  }
72
73
  export declare const PROPERTY_KEYS: (keyof DockviewOptions)[];
73
74
  export interface DockviewFrameworkOptions {
74
- parentElement: HTMLElement;
75
75
  defaultTabComponent?: string;
76
76
  createRightHeaderActionComponent?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
77
77
  createLeftHeaderActionComponent?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
@@ -32,6 +32,7 @@ export const PROPERTY_KEYS = (() => {
32
32
  locked: undefined,
33
33
  disableDnd: undefined,
34
34
  gap: undefined,
35
+ className: undefined,
35
36
  };
36
37
  return Object.keys(properties);
37
38
  })();
@@ -3,7 +3,7 @@ import { PanelInitParameters, IPanel } from '../panel/types';
3
3
  import { DockviewApi } from '../api/component.api';
4
4
  import { Optional } from '../types';
5
5
  import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
6
- import { DockviewPanelRenderer } from '../overlayRenderContainer';
6
+ import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
7
7
  export interface HeaderPartInitParameters {
8
8
  title: string;
9
9
  }
package/dist/esm/dom.d.ts CHANGED
@@ -27,3 +27,6 @@ export declare function getDomNodePagePosition(domNode: Element): {
27
27
  */
28
28
  export declare function isInDocument(element: Element): boolean;
29
29
  export declare function addTestId(element: HTMLElement, id: string): void;
30
+ export declare function disableIframePointEvents(): {
31
+ release: () => void;
32
+ };
package/dist/esm/dom.js CHANGED
@@ -182,3 +182,23 @@ export function isInDocument(element) {
182
182
  export function addTestId(element, id) {
183
183
  element.setAttribute('data-testid', id);
184
184
  }
185
+ export function disableIframePointEvents() {
186
+ const iframes = [
187
+ ...getElementsByTagName('iframe'),
188
+ ...getElementsByTagName('webview'),
189
+ ];
190
+ const original = new WeakMap(); // don't hold onto HTMLElement references longer than required
191
+ for (const iframe of iframes) {
192
+ original.set(iframe, iframe.style.pointerEvents);
193
+ iframe.style.pointerEvents = 'none';
194
+ }
195
+ return {
196
+ release: () => {
197
+ var _a;
198
+ for (const iframe of iframes) {
199
+ iframe.style.pointerEvents = (_a = original.get(iframe)) !== null && _a !== void 0 ? _a : 'auto';
200
+ }
201
+ iframes.splice(0, iframes.length); // don't hold onto HTMLElement references longer than required
202
+ },
203
+ };
204
+ }
@@ -1,7 +1,7 @@
1
1
  import { Event, AsapEvent } from '../events';
2
2
  import { Gridview, IGridView } from './gridview';
3
3
  import { Position } from '../dnd/droptarget';
4
- import { IValueDisposable } from '../lifecycle';
4
+ import { IDisposable, IValueDisposable } from '../lifecycle';
5
5
  import { ISplitviewStyles, Orientation } from '../splitview/splitview';
6
6
  import { IPanel } from '../panel/types';
7
7
  import { MovementOptions2 } from '../dockview/options';
@@ -16,12 +16,13 @@ export interface BaseGridOptions {
16
16
  readonly disableAutoResizing?: boolean;
17
17
  readonly locked?: boolean;
18
18
  readonly margin?: number;
19
+ readonly className?: string;
19
20
  }
20
21
  export interface IGridPanelView extends IGridView, IPanel {
21
22
  setActive(isActive: boolean): void;
22
23
  readonly isActive: boolean;
23
24
  }
24
- export interface IBaseGrid<T extends IGridPanelView> {
25
+ export interface IBaseGrid<T extends IGridPanelView> extends IDisposable {
25
26
  readonly element: HTMLElement;
26
27
  readonly id: string;
27
28
  readonly width: number;
@@ -62,6 +63,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
62
63
  readonly onDidLayoutChange: Event<void>;
63
64
  private readonly _onDidViewVisibilityChangeMicroTaskQueue;
64
65
  readonly onDidViewVisibilityChangeMicroTaskQueue: Event<void>;
66
+ private classNames;
65
67
  get id(): string;
66
68
  get size(): number;
67
69
  get groups(): T[];
@@ -80,6 +82,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
80
82
  abstract clear(): void;
81
83
  setVisible(panel: T, visible: boolean): void;
82
84
  isVisible(panel: T): boolean;
85
+ updateOptions(options: Partial<BaseGridOptions>): void;
83
86
  maximizeGroup(panel: T): void;
84
87
  isMaximizedGroup(panel: T): boolean;
85
88
  exitMaximizedGroup(): void;
@@ -4,6 +4,7 @@ import { Disposable } from '../lifecycle';
4
4
  import { sequentialNumberGenerator } from '../math';
5
5
  import { Sizing } from '../splitview/splitview';
6
6
  import { Resizable } from '../resizable';
7
+ import { toggleClass } from '../dom';
7
8
  const nextLayoutId = sequentialNumberGenerator();
8
9
  export function toTarget(direction) {
9
10
  switch (direction) {
@@ -58,6 +59,7 @@ export class BaseGrid extends Resizable {
58
59
  this.gridview.locked = value;
59
60
  }
60
61
  constructor(options) {
62
+ var _a, _b;
61
63
  super(document.createElement('div'), options.disableAutoResizing);
62
64
  this._id = nextLayoutId.next();
63
65
  this._groups = new Map();
@@ -71,8 +73,13 @@ export class BaseGrid extends Resizable {
71
73
  this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
72
74
  this._onDidViewVisibilityChangeMicroTaskQueue = new AsapEvent();
73
75
  this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
76
+ this.classNames = [];
74
77
  this.element.style.height = '100%';
75
78
  this.element.style.width = '100%';
79
+ this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
80
+ for (const className of this.classNames) {
81
+ toggleClass(this.element, className, true);
82
+ }
76
83
  options.parentElement.appendChild(this.element);
77
84
  this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
78
85
  this.gridview.locked = !!options.locked;
@@ -96,6 +103,18 @@ export class BaseGrid extends Resizable {
96
103
  isVisible(panel) {
97
104
  return this.gridview.isViewVisible(getGridLocation(panel.element));
98
105
  }
106
+ updateOptions(options) {
107
+ var _a, _b;
108
+ if ('className' in options) {
109
+ for (const className of this.classNames) {
110
+ toggleClass(this.element, className, false);
111
+ }
112
+ this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
113
+ for (const className of this.classNames) {
114
+ toggleClass(this.element, className, true);
115
+ }
116
+ }
117
+ }
99
118
  maximizeGroup(panel) {
100
119
  this.gridview.maximizeView(panel);
101
120
  this.doSetGroupActive(panel);